UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION

Transcripción

1 CICLO UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 9 Nombre de la práctica: Multimedia y Animaciones Lugar de ejecución: Laboratorio de Informática Tiempo estimado: 2:30 horas Materia: Lenguajes de Marcado y Estilos Web I. OBJETIVOS Que el estudiante: 1. Inserte archivos de audio y video en las páginas web mediante las etiquetas de HTML5. 2. Realice transformaciones sobre los elementos de las páginas web ocupando las propiedades de CSS3. 3. Aprenda a transicionar las propiedades CSS. 4. Utilice adecuadamente las animaciones explotando al máximo las posibilidades de CSS3. II. INTRODUCCION TEORICA MULTIMEDIA EN HTML La versión 5 de HTML incorpora nuevas etiquetas para incluir vídeos y audio en un documento HTML. Estas nuevas etiquetas nos permitirán tanto incluir un reproductor con un archivo de audio /video, como conectarlo con una fuente de audio o vídeo en directo. Anteriormente para ubicar un medio en un sitio web, era necesario agregarlo mediante un <embed> o depender de flash. Ahora como una de las principales características de HTML5 se encuentra el soporte nativo para medios mediante las etiquetas <audio> y <video>. Estas etiquetas permiten consumir multimedia sin necesidad de instalar plugins adicionales al navegador o computadora. Etiqueta <audio> Insertar un archivo de audio (un simple sonido, una canción, una entrevista, un podcast...) es muy sencillo: para eso tenemos la etiqueta <audio>. <audio src= "musica.mp3" preload autoplay controls loop> </audio> Este explorador no soporta HTML 5. Atributos de la etiqueta audio Atributo src. El atributo src permite especificar la dirección URL del recurso al cual se quiere acceder, siendo en este caso el archivo que contiene el audio a cargar en el documento web. Atributo autoplay. Este atributo permite especificar que el archivo de audio sea reproducido automáticamente, al ser el archivo cargado por el navegador. Es un atributo booleano, por tanto para que se ejecute el audio simplemente se ha de especificar el atributo en la etiqueta. 1 / 24

2 Atributo controls. Es un atributo booleano que al ser especificado en la etiqueta, permite que se visualicen los controles de control de audio, entre los que se encuentran, el botón de reproducción, pausa y volumen. Como es habitual, la apariencia de los controles de audio dependerá del navegador: Atributo loop. Si se especifica el atributo loop, el archivo de audio es reproducido automáticamente en modo bucle, es decir, cuando finalice el audio volverá a empezar de nuevo. Atributo preload. Este atributo permite definir si se realiza una precarga inicial del archivo de audio. El atributo puede asumir los siguientes valores: none: no se realiza ningún tipo de precarga y se espera que el usuario sea el que active el audio pulsando sobre el control correspondiente. auto, se realiza la precarga completa del archivo de audio, para que la reproducción sea más homogénea y no se produzcan paros o saltos en la misma. Definiendo distintos formatos de audio Para garantizar el reconocimiento de los archivos de audio por parte de los distintos navegadores (y sus versiones) es preciso definir distintos formatos para el mismo archivo de audio. Para realizar esta tarea HTML5 dispone de la etiqueta <source>, la cual permite realizar la carga del archivo de audio en varios formatos. <audio controls autoplay preload> </audio> <source src="cancion.ogg" type="audio/ogg" /> <source src="cancion.mp3" type="audio/mpeg" /> <source src="cancion.wav" type="audio/wav" /> Este explorador no soporta HTML 5. Como se evidencia en el ejemplo anterior, la etiqueta <source> dispone de dos atributos: src: permite especificar la ruta absoluta o relativa al archivo de audio. type: se utiliza para indicar el tipo MIME del archivo que se quiere reproducir. Entre los posibles tipos a utilizar por este último atributo se encuentran los siguientes: 2

3 Etiqueta <video> La etiqueta <video>, es una de las nuevas etiquetas del lenguaje HTML5, que permite reproducir un archivo de video. La utilización de esta etiqueta es extremadamente sencilla y muy similar al uso de la etiqueta <audio> <video src="video.mp4" width="640" height="360" controls autoplay preload> </video> Este explorador no soporta HTML 5. La etiqueta <video> posee los siguientes atributos: autoplay - Reproduce automáticamente el archivo de video controls - Mostrar controles de reproducción (estos controles dependen de cada navegador) height - Altura del reproductor en píxeles loop - Reiniciar la reproducción al finalizar poster - Especifica una imagen para mostrar mientras el video se descarga o hasta que el usuario de clic en el botón reproducir. src - Url del archivo de video width - Ancho del reproductor en píxeles Definiendo distintos formatos de video Al igual que para el audio, HTML5 permite definir tantos archivos de vídeo como sean necesarios y obtener así la mayor compatibilidad posible con los navegadores más populares mediante el uso de la etiqueta <source> dentro de la etiqueta <video>. <video width="640" height="360" controls autoplay preload> </video> <source src="mivideo.mp4" type= "video/mp4" /> <source src="mivideo.ogg" type= "video/ogg" /> <source src="mivideo.webm" type= "video/webm" /> Este navegador no soporta HTML5 Como ya se mencionó anteriormente, la etiqueta <source> dispone de dos atributos: src (para definir la ruta del archivo) y type (para indicar el tipo MIME del archivo que se quiere reproducir). Para el caso de los videos, el atributo type puede asumir los siguientes valores: 3

4 ANIMACIONES, TRANSFORMACIONES Y TRANSICIONES EN CSS3 Con las nuevas propiedades CSS3 para animaciones, transformaciones y transiciones es posible crear muchos interesantes efectos sin necesidad de JavaScript, uso de frameworks o de la librería jquery. La combinación de HTML5 con CSS3 nos permitirá crear sitios de la potencia de Flash, pero optimizados para SEO y con soporte nativo en la mayoría de navegadores modernos. Transformaciones en CSS3 El efecto de una trasformación en CSS3 consiste en aplicar un cambio de apariencia geométrica a cualquier elemento. Esto proporciona una notable capacidad de control visual que anteriormente no era posible en lo que respecta a HTML o a las hojas de estilo. La propiedad CSS3 para realizar transformaciones se denomina transform (esta propiedad requiere el uso de prefijos propietarios para garantizar la compatibilidad entre navegadores). La propiedad transform permite hacer los siguientes tipo de transformaciones: Rotación Transformación de escala Distorsión Traslación Función rotate(angulo) scale(sx,sy) scalex(sx) scaley(sy) skew(angx,angy) Descripción Especifica una rotación 2D en el ángulo especificado en el parámetro sobre el origen del elemento. Especifica una operación de escala 2D con el vector de escala [sx,sy] descrita por los dos parámetros. Especifica una operación de escala con el vector de escala [sx,1], donde sx se indica como parámetro. Especifica una operación de escala con el vector de escala [1,sy], donde sy se indica como parámetro. Especifica una transformación de deformación a lo largo de los ejes X e Y. El primer parámetro de ángulo especifica la deformación en el eje X. El segundo parámetro de ángulo especifica la deformación en el eje Y. skewx(angulo) Especifica una operación de deformación a lo largo del eje X según el ángulo indicado. skewy(angulo) Especifica una operación de deformación a lo largo del eje Y según el ángulo indicado. translate(tx,ty) Especifica una traslación 2D según el vector [tx,ty] descrito por los dos parámetros translatex(tx) Especifica una traslación de cantidad determinada en la dirección X. translatey(ty) Especifica una traslación de cantidad determinada en la dirección Y. Nota: Todas estas propiedades requieren el uso de prefijos propietarios para garantizar la compatibilidad entre navegadores. 4

5 Múltiples transformaciones A veces podría resultar útil realizar sobre un elemento varias transformaciones al mismo tiempo. Para obtener una propiedad transform combinada, solo tenemos que separar cada función a aplicar con un espacio. Considere el siguiente ejemplo en el que se escala, rota y desplaza un div div:nth-child(3) { transform: scale(1.25) rotate(30deg) translate(40px,0px); -moz-transform: scale(1.25) rotate(30deg) translate(40px,0px); -webkit-transform: scale(1.25) rotate(30deg) translate(40px,0px); -o-transform: scale(1.25) rotate(30deg) translate(40px,0px); Transiciones en CSS3 Mientras que las trasformaciones son una herramienta fuerte e interesante para el desarrollador, la posibilidad de animar los mismos efectos es algo aún más emocionante, es en este momento donde la propiedad transition entra en acción. Las transiciones en CSS3 permiten modificar el valor de una propiedad de un elemento HTML en forma gradual durante un tiempo determinado de un estado inicial a un estado final. La sintaxis más simple para definir una transición de una propiedad es: Elemento { transition: [nombre_propiedad] [duración_transición] ; En el siguiente ejemplo se transiciona la rotación de un div para que esta rotación se realice de forma sutil y gradualmente: div { display: inline-block; padding: 1em; margin: 1em; background-color: #666; color: #fff; transition:transform 2s; div:nth-child(1):hover { background-color: #3F51B5; transform: rotate(30.5deg); 5

6 Transiciones de múltiples propiedades También podemos hacer transiciones de múltiples propiedades, para ello indicamos cada transición separada por coma: Elemento { transition: [nombre_propiedad] [duración_ transición], [nombre_propiedad] [duración_transición], [nombre_propiedad] [duración_transición] ; También es posible transicionar todas las propiedades de un elemento mediante la palabra clave all. div { display: inline-block; padding: 1em; margin: 1em; background-color: #666; color: #fff; transition: all 3s; Funciones de transición Un tercer parámetro opcional de la propiedad transition es indicar una "función de transición" que nos permite seleccionar la velocidad durante la transición: Elemento { transition: [nombre_propiedad] [duración_transición] [función_de_transición]; Los valores posibles que podemos especificar son: ease : Define un efecto de transición con un comienzo lento, luego rápido y finalmente termina lento (cuando no definimos la función de transición elige esta por defecto) linear : Define un efecto de transición con la misma velocidad de inicio a fin. ease-in : Define un efecto de transición con un comienzo lento. ease-out : Define un efecto de transición con un final lento. ease-in-out : Define un efecto de transición con un comienzo lento y un final lento. 6

7 Tiempo de demora en iniciar la transición El cuarto parámetro opcional de la propiedad transition es indicar un tiempo de espera hasta que se inicie la transición: Elemento { transition: [nombre_propiedad] [duración_transición] [función de transición] [tiempo de inicio]; Es decir indicamos la cantidad de milisegundos o segundos hasta que se inicia el proceso de transición. Sintaxis alternativa Hemos visto que a la propiedad transition podemos indicarle hasta cuatro parámetros. Los dos primeros son obligatorios y los otros son opcionales. CSS3 dispone de otras cuatro funciones para indicar cada uno de estos valores en forma independiente: Elemento { transition-property: [nombre de propiedad]; transition-duration: [duración de la transición]; transition-timing-function: [función de transición]; transition-delay: [tiempo de inicio]; Animaciones en CSS3 Las animaciones en CSS3 nos permiten hacer cosas que con las transiciones no alcanzamos y nos quedamos cortos. La sintaxis básica para una animación es la siguiente: Elemento { animation-name: [nombre de la animación]; animation-duration: [tiempo de keyframes [nombre de la animación] { from { to { [propiedades y valores del estado inicial de la animación] [propiedades y valores del estado final de la animación] animation-iteration-count La propiedad animation-iteration-count permite controlar el número de repeticiones que tendrá la animación. Elemento { animation-iteration-count: [cantidad de veces a repetir la animación o "infinite"]; 7

8 Si queremos que la animación se repita solo tres veces luego indicamos en la propiedad animation-iterationcount dicho valor: animation-iteration-count: 3; En cambio si queremos que se repita siempre luego especificamos el valor "infinite": animation-iteration-count: infinite; animation-direction La propiedad animation-direction indica como debe repetirse la animación. Esta propiedad puede asumir dos valores: normal: con lo que la animación cada vez que finaliza comienza desde el principio. Alternate: cuando finaliza la animación comienza desde el final hasta el principio. Elemento { animation-direction: ["normal" o "alternate"]; animation-timing-function y animation-delay Similar a las transiciones disponemos de dos propiedades para definir la función de transición y el tiempo que debe esperar para comenzar la animación: Elemento { animation-timing-function: [función de transición]; animation-delay: [tiempo de demora para iniciar la animación]; Los valores posibles para la propiedad animation-timing-function son exactamente las mismas funciones disponibles para las transiciones, es decir: ease, linear, ease-in, ease-out y ease-in-out. Definición de más de 2 keyframes Hasta ahora hemos indicado en la animación solo 2 keyframes (el inicial y el final), pero para animaciones más complejas es posible que necesitemos más de 2 keyframes, para esto tenemos la siguiente [nombre de la animación] { 0%{ [propiedades y valores] [valor en porcentaje]%{ [propiedades y valores] [valor en porcentaje]%{ [propiedades y valores] 100%{ [propiedades y valores] 8

9 III. MATERIALES Y EQUIPO No. Cantidad Descripción 1 1 PC con uno de los editores de páginas Web: Sublime Text, Brackets, Notepad ++, BlueFish y HTML Kit y cualquiera de los navegadores siguiente: Internet Explorer 7 u 8, Firefox (última versión disponible), Google Chrome (última versión disponible), Opera (última versión disponible), Safari (última versión disponible). 2 1 Guía de Laboratorio #9 de Lenguajes de Marcado y Estilo Web 3 1 Recursos para laboratorio práctico. 4 1 Memoria USB IV. PROCEDIMIENTO INDICACIONES GENERALES 1. Crear una carpeta en mis documentos y colocarle el nombre N Carnet_Guia9_LME, Nota: Cambiar N Carnet por su número de carnet brindado por la Universidad. 2. Descargar los recursos de la guía ( descomprimirlos y colocar todas las carpetas y archivos dentro de su carpeta de trabajo. Ejercicio 1. Multimedia, trasformaciones y transiciones. 1. Para este primer ejemplo se le proporcionan un conjunto de archivos base sobre los cuales tendrá que trabajar. Se le proporcionan 4 documentos HTML (index.html, equipo.html, campeonatos.html y jugadas.html) y tres hojas de estilo (main.css, menuprincipal.css y animaciones.css) con los cuales se ha elaborado un sitio web de información sobre la Liga Española de Futbol. 2. Visualice con el navegador de su preferencia la página index.html. Debería tener un resultado idéntico al siguiente: 9

10 3. Visualice las otras páginas del sitio. Notará que la página jugadas.html no posee contenido aun, puesto que posteriormente se lo agregaremos. 4. Tómese un tiempo para revisar la estructura de las páginas web y de las hojas de estilo proporcionadas. Notará que la hoja de estilo animaciones.css se encuentra inicialmente vacía puesto que posteriormente escribiremos las reglas de estilo correspondientes a las transformaciones y transiciones. Insertando audio y video 5. Ubíquese en el archivo jugadas.html. Dentro del div con el id contenedor coloque las siguientes líneas de código en la que se inserta un video llamado goles.mp4. 6. Dentro de la hoja de estilo main.css escriba las reglas de estilo necesarias para que el video se muestre centrado. 7. Siempre dentro del div con id contenedor ubique las siguientes líneas de código en donde se inserta un archivo de audio. 8. Dentro de la hoja de estilo main.css escriba las reglas de estilo necesarias para que reproductor de audio se muestre centrado. 9. Realice los cambios necesarios para que el archivo de audio se quede ciclado, es decir, que vuelva a iniciar una vez que haya finalizado. 10. Visualice la página con distintos navegadores para que vea como lucen los controles de audio y video en cada uno de ellos. 10

11 Usando transformaciones de rotación 11. Ubíquese en la hoja de estilo animaciones.css puesto que todas las reglas de estilos que construiremos las colocaremos en este archivo. 12. Comenzaremos haciendo algunas transformaciones sobre las imágenes de la página equipo.html. La primera transformación será de rotación y se realizará sobre la primera imagen de esa página. Nótese que en esa regla de estilo se está seleccionando la imagen del primer elemento con la clase campeón y se le está aplicando una rotación de 32 grados que se miden en sentido horario desde el centro de la imagen. El resultado obtenido debería ser el siguiente: 13. Pruebe con distintos valores de ángulo para ver los resultados obtenidos. Pruebe con valores negativos y responda: Cómo interpreta el navegador un ángulo negativo? 14. Agregue los prefijos propietarios para garantizar la compatibilidad de la transformación con los distintos navegadores y sus versiones. 11

12 15. Por defecto el ángulo de rotación se comienza a medir desde el centro del elemento sin embargo este comportamiento se puede cambiar con la propiedad transform-origin. Para este ejemplo haremos que el origen de la transformación sea la esquina inferior derecha de la imagen. La regla de estilo quedaría de la siguiente manera: 16. Visualice los cambios y conteste Qué fue lo que cambio al agregar la propiedad transform-origin? Usando transformaciones de traslación. 17. Para ejemplificar el uso de transformaciones de traslación vamos a seleccionar la imagen del segundo div con id campeón y la vamos a mover 40 pixeles hacia abajo y 100 pixeles a la izquierda con respecto a su posición original. 18. Visualice los resultados en su navegador y responda: Por qué se ha usado el signo menos antes de los 100px? Qué habría pasado si no se agregaba tal signo? 19. Agregue los prefijos propietarios para garantizar la compatibilidad de la transformación con los distintos navegadores y sus versiones. Usando transformaciones de escala 20. Para ejemplificar el uso de las transformaciones de escala vamos a seleccionar la imagen del tercer div con id campeón y le cambiaremos el tamaño para que se muestre 30% más grande con respecto a su escala original. 12

13 Hasta este punto su página debería lucir de la siguiente manera: 21. Realice los cambios necesarios para que la imagen se vea 20% más ancha y 15 menos larga con respecto a su dimensión original. 22. Agregue los prefijos propietarios para garantizar la compatibilidad de la transformación con los distintos navegadores y sus versiones. Hasta este punto su regla de estilo debería lucir de la siguiente manera: Usando transformaciones de deformación 23. Para ejemplificar el uso de las transformaciones de deformación vamos a seleccionar la imagen del cuarto div con id campeón y la deformaremos 20 grados en el eje X. 13

14 El resultado obtenido debería ser similar al siguiente: 24. Pruebe cambiando el ángulo de deformación con distintos valores. 25. Realice los cambios necesarios para que la deformación se realice en el eje Y en lugar de realizarse en el eje X. 26. Agregue los prefijos propietarios para garantizar la compatibilidad de la transformación con los distintos navegadores y sus versiones. Hasta este punto su regla de estilo debería lucir de la siguiente manera: Aplicando múltiples transformaciones. 27. Para aplicar múltiples transformaciones basta con separar con un espacio cada una de las funciones de transformación. Para ejemplificar esto, vamos a seleccionar la imagen del quinto div con id campeón, la rotaremos 180 grados y la vamos a escalar para que aumente su tamaño en un 50%. El resultado obtenido debería ser similar al siguiente: 14

15 28. Agregue los prefijos propietarios para garantizar la compatibilidad de la transformación con los distintos navegadores y sus versiones. Transformaciones interactivas 29. Las transformaciones que hemos realizado hasta este punto de la guía se ejecutan automáticamente cuando se carga la página en el navegador. Para agregarle algo de interactividad vamos a hacer que estas transformaciones únicamente se realicen cuando el usuario pase el puntero sobre las imágenes. Para ello lo único que debemos de realizar es modificar los selectores de las reglas agregándoles la pseudo-clase :hover. Por ejemplo, la regla de estilo para el primer div con la clase campeón quedaría de la siguiente manera: NOTA: Estas reglas de estilo no deben añadirse puesto que ya las tiene en su hoja de estilo. Lo único que debe hacer es modificar el selector para agregarle la pseudo-clase :hover. 30. De forma similar modifique los selectores de las otras 4 reglas de estilo y visualice los resultados en su navegador. Ahora la transformación NO debería producirse al cargar la página sino hasta que el usuario pase el cursor sobre las imágenes. El efecto es interesante pero bastante brusco puesto que el cambio es inmediato. Para hacer que el cambio de estado se haga de forma más sutil y progresiva haremos uso de otra novedad de CSS3: las transiciones. Transiciones en CSS3 31. Para conseguir que los cambios de la pseudo-clase :hover se realicen de forma progresiva usaremos las transiciones. En este ejemplo, vamos a transicionar la propiedad transform y haremos que la transición dure 3 segundos. 32. Visualice los resultados en su navegador y notará que ahora las transformaciones se realizan de forma lenta y progresiva. 15

16 33. Agregue los prefijos propietarios para garantizar la compatibilidad de la transición con los distintos navegadores y sus versiones. Transicionando múltiples propiedades 34. En este ejemplo haremos que además de que se realicen las transformaciones cuando se hace :hover sobre las imágenes también se cambie su opacidad. Para conseguir esto debe agregar la siguiente regla de estilo: 35. Ahora modifique la regla de estilo que agrego en el paso 31 para conseguir que se transicione no solo la propiedades transform sino todas las propiedades (ocupe la palabra clave all ). 36. Visualice los resultados en su navegador y notará que tanto la transformación como el cambio de opacidad se realiza de forma suave y progresiva. Transiciones de color y escala 37. Ahora haremos algunas transiciones de color y escala sobre los elementos de la página campeonatos.html. Inicialmente esta página debería lucir de la siguiente manera: 16

17 38. Revise la estructura de la página y notará que el div con id contenedor tiene 4 divs con la clase campeón. Identifique la siguiente sección de código dentro de su archivo campeonatos.html. 39. Agregue las siguientes reglas de estilo en el archivo animaciones.css. En estas reglas de estilo se está cambiando la escala y el color del fondo de los elementos con clase campeón cuando el usuario pasa el cursor sobre ellos. 17

18 40. Realice las modificaciones necesarias para que los cambios que se producen en la pseudo-clase :hover se realice de forma progresiva con una duración de la transición de 2 segundos. Su página debería de lucir de la siguiente manera cuando se hace el hover sobre los elementos. Transiciones de posición y escala. 41. Ahora vamos a realizar algunas transiciones sobre los elementos de la página index.html. Ubíquese sobre el código de esta página y revise su estructura. Notará que hay varios divs con la clase jugador en los que se muestra información sobre los jugadores de la BBVA. 42. Coloque las siguientes reglas de estilo dentro de su archivo animaciones.css. 18

19 43. Visualice los resultados en su navegador y vea lo que sucede cuando se pasa el cursor sobre las imágenes de los futbolistas. El resultado obtenido debería ser similar al siguiente: 44. Revisando la estructura del código HTML notará que los div con clase jugador tienen dentro otro div con clase datos. De ese div con clase datos se muestra únicamente el nombre de los futbolistas, puesto que el otro contenido se ha ocultado mediante la declaración bottom: -119px; (esta regla de estilo está en el archivo main.css). Mediante las siguientes reglas de estilo haremos que el contenido de la clase datos se muestre completo cuando el usuario pase el cursor sobre el nombre de los futbolistas. 45. Revise los resultados en su navegador. Debería obtener un resultado similar al siguiente: 19

20 Agregando animaciones 46. A continuación vamos a agregar animaciones sobre los iconos de redes sociales que se muestran en la parte inferior de las páginas web. La animación consistirá en reducir la escala de las imágenes cuando se pasa el cursor sobre ellas. 47. Realice las modificaciones necesarias para que la animación se repita un número infinito de veces. 48. Realice las modificaciones necesarias para que cuando finalice la animación comience desde el final hasta el principio. Hasta este punto su código debería lucir de la siguiente manera: 20

21 49. Realice las modificaciones necesarias para que la animación dure 2 segundos. 50. Dado que la animación que realizamos tiene únicamente dos estados (from y to), se pudo haber obtenido el mismo resultado usando transformaciones y transiciones. Para que el uso de las animaciones tenga sentido vamos a definir distintos fotogramas para controlar lo que sucede en los distintos episodios de la animación. Modifique el código del keyframe animacion1 para que luzca de la siguiente manera: 51. En el código que se le ha proporcionado ya se han agregado los prefijos propietarios para webkit. Coloque los prefijos restantes. 21

22 Ejercicio 2. Slider CSS 1. Cree un archivo HTML llamado Slider.html. 2. Guardar el archivo en su carpeta de trabajo. 3. Digite la siguiente estructura html 4. Cambie el título de la página web por el texto Slider manual. 5. Crear un nuevo archivo y guardarlo en la carpeta css con el nombre estilo2.css 6. Aplicar las siguientes reglas de estilo: Regla body H1 Clase Slider Clase boton Propiedades Fondo: #0094ff; Color de letra: #ffd800 Tamaño de letra: 35px Tipo de letra: Arial Unicode MS Alineación de texto: center Vista: Block Posición: relative Margen: auto Ancho: 100% Ancho máximo: 960px Alto máximo: 440px Overflow: hidden Posicion: absolute Vista: block Bottom: 30px Margen: 0 relleno:0 Orden de apilamiento: 999 Opacidad:0 Curso:pointer 22

23 .boton:nth-child(1).boton:nth-child(3).boton:nth-child(5).boton:nth-child(7) Label dentro de la clase slider.slider label.slider label:nth-child(2).slider label:nth-child(4).slider label:nth-child(6).slider label:nth-child(8) Label más próximo a checked dentro de la clase botón.boton:checked+label img dentro de clase contendor-img.contenedor-img img left:30px left: 60px left:90px left:120px Posición: absolute bottom: 30px Ancho: 12px Alto: 12px Fondo: White; Bordes redondeados: 7px Orden de apilamiento: 100 Borde: 1px solid #777; left:30px left:60px left:90px left:120px Fondo : yellow Color de borde: eee Vista: block Float: left Clase cuatro-imagenes Ancho:400% Img dentro de Clase cuatro-imágenes Ancho: 25% Clase contenedor-img Posición: relative left:0 Creación de transición transition: left.3s ease-in; Seleccionar todos los elementos que contengan el nombre de la clase contenedor-img dentro del hijo 1 de la clase boton..boton:nth-child(1):checked ~.contenedor-img Seleccionar todos los elementos que contenga el nombre de la clase contenedor-img dentro del hijo 3 de la clase botón Seleccionar todos los elementos que contenga el nombre de la clase contenedor-img dentro del hijo 5 de la clase botón Seleccionar todos los elementos que contenga el nombre de la clase contenedor-img dentro del hijo 7 de la clase botón -webkit-transition: left.3s ease-in; left: 0 left:-100% left:-200% left:-300% 7. Agregar la línea necesaria en el documento html para lograr vincular el archivo css y poder aplicar los estilos. 23

24 8. Visualizar la página web en el navegador. Al hacer clic sobre los círculos cambiará de imagen. V. ANALISIS DE RESULTADOS 1. Realice las modificaciones necesarias para que el video del ejercicio 1 no se reproduzca de forma automática. Además, agregar un poster en el video, es decir una imagen que se muestre mientras el video se descarga o hasta que el usuario dé clic en el botón reproducir. 2. Realice las modificaciones necesarias para que en el slider del ejercicio 2 las transiciones de imágenes se produzcan de forma automática, es decir sin necesidad de que el usuario haga click sobre los círculos. El instructor evaluará el desempeño de su trabajo dentro la clase. Estos ejercicios se evaluarán en la misma hora de clase. VI. EJERCICIOS COMPLEMENTARIOS 1. Presente un ejemplo de animaciones usando múltiples fotogramas. Se evaluará la originalidad, creatividad y estética del ejemplo presentado. 2. Investigar la forma en que se incrustan videos de youtube dentro de una página web. Presentar un ejemplo. 3. Investigar como colocar un video como fondo (background) de una página web. 4. Presentar un menú desplegable en el que se utilicen transiciones y/o animaciones. Fecha de entrega: Próxima semana. 24