UNIVERSIDAD DON BOSCO

FACULTAD DE ESTUDIOS TECNOLOGICOS

ESCUELA DE COMPUTACION
CICLO 01-2016

GUIA DE LABORATORIO N 9
Nombre de la prctica: Multimedia y Animaciones
Lugar de ejecucin: Laboratorio de Informtica
Tiempo estimado: 2:30 horas
Materia: Lenguajes de Marcado y Estilos Web

I. OBJETIVOS
Que el estudiante:
1.
2.
3.
4.

Inserte archivos de audio y video en las pginas web mediante las etiquetas de HTML5.
Realice transformaciones sobre los elementos de las pginas web ocupando las propiedades de CSS3.
Aprenda a transicionar las propiedades CSS.
Utilice adecuadamente las animaciones explotando al mximo las posibilidades de CSS3.

II. INTRODUCCION TEORICA

MULTIMEDIA EN HTML
La versin 5 de HTML incorpora nuevas etiquetas para incluir vdeos y audio en un documento HTML. Estas
nuevas etiquetas nos permitirn tanto incluir un reproductor con un archivo de audio /video, como conectarlo
con una fuente de audio o vdeo 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 caractersticas 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 cancin, una entrevista, un podcast...) es muy sencillo: para
eso tenemos la etiqueta <audio>.
<audio src= "musica.mp3" preload autoplay controls loop>
Este explorador no soporta HTML 5.
</audio>

Atributos de la etiqueta audio

Atributo src. El atributo src permite especificar la direccin 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
automticamente, 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

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 botn de reproduccin,
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 automticamente 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 ningn 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 reproduccin sea ms
homognea 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>
<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.
</audio>

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:

Etiqueta <video>
La etiqueta <video>, es una de las nuevas etiquetas del lenguaje HTML5, que permite reproducir un archivo de
video. La utilizacin 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>
Este explorador no soporta HTML 5.
</video>

La etiqueta <video> posee los siguientes atributos:

autoplay - Reproduce automticamente el archivo de video
controls - Mostrar controles de reproduccin (estos controles dependen de cada navegador)
height - Altura del reproductor en pxeles
loop - Reiniciar la reproduccin al finalizar
poster - Especifica una imagen para mostrar mientras el video se descarga o hasta que el usuario de
clic en el botn reproducir.
src - Url del archivo de video
width - Ancho del reproductor en pxeles
Definiendo distintos formatos de video
Al igual que para el audio, HTML5 permite definir tantos archivos de vdeo como sean necesarios y obtener as
la mayor compatibilidad posible con los navegadores ms populares mediante el uso de la etiqueta <source>
dentro de la etiqueta <video>.
<video width="640" height="360" controls autoplay preload>
<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
</video>

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:

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 librera jQuery. La combinacin de
HTML5 con CSS3 nos permitir crear sitios de la potencia de Flash, pero optimizados para SEO y con soporte
nativo en la mayora de navegadores modernos.
Transformaciones en CSS3
El efecto de una trasformacin en CSS3 consiste en aplicar un cambio de apariencia geomtrica 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:

Rotacin
Transformacin de escala
Distorsin
Traslacin

Funcin
rotate(angulo)
scale(sx,sy)
scaleX(sx)
scaleY(sy)
skew(angX,angY)

skewX(angulo)

Descripcin
Especifica una rotacin 2D en el ngulo especificado en el parmetro sobre
el origen del elemento.
Especifica una operacin de escala 2D con el vector de escala [sx,sy]
descrita por los dos parmetros.
Especifica una operacin de escala con el vector de escala [sx,1], donde sx
se indica como parmetro.
Especifica una operacin de escala con el vector de escala [1,sy], donde sy
se indica como parmetro.
Especifica una transformacin de deformacin a lo largo de los ejes X e Y. El
primer parmetro de ngulo especifica la deformacin en el eje X. El
segundo parmetro de ngulo especifica la deformacin en el eje Y.

translateX(tx)

Especifica una operacin de deformacin a lo largo del eje X segn el ngulo

indicado.
Especifica una operacin de deformacin a lo largo del eje Y segn el ngulo
indicado.
Especifica una traslacin 2D segn el vector [tx,ty] descrito por los dos
parmetros
Especifica una traslacin de cantidad determinada en la direccin X.

translateY(ty)

Especifica una traslacin de cantidad determinada en la direccin Y.

skewY(angulo)
translate(tx,ty)

Nota: Todas estas propiedades requieren el uso de prefijos propietarios para garantizar la compatibilidad entre
navegadores.

Mltiples transformaciones
A veces podra resultar til realizar sobre un elemento varias transformaciones al mismo tiempo. Para obtener
una propiedad transform combinada, solo tenemos que separar cada funcin 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 an ms emocionante, es en este momento donde la propiedad
transition entra en accin.
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 ms simple para definir una transicin de una propiedad es:
Elemento {
transition: [nombre_propiedad] [duracin_transicin] ;
}
En el siguiente ejemplo se transiciona la rotacin de un div para que esta rotacin se realice de forma sutil y
gradualmente:
div {

div:nth-child(1):hover {

display: inline-block;

background-color: #3F51B5;

padding: 1em;

transform: rotate(30.5deg);

margin: 1em;

background-color: #666;
color: #fff;
transition:transform 2s;
}

Transiciones de mltiples propiedades

Tambin podemos hacer transiciones de mltiples propiedades, para ello indicamos cada transicin separada
por coma:
Elemento {
transition: [nombre_propiedad] [duracin_ transicin],
[nombre_propiedad] [duracin_transicin],
[nombre_propiedad] [duracin_transicin] ;
}
Tambin 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 transicin
Un tercer parmetro opcional de la propiedad transition es indicar una "funcin de transicin" que nos permite
seleccionar la velocidad durante la transicin:
Elemento {
transition: [nombre_propiedad] [duracin_transicin] [funcin_de_transicin];
}
Los valores posibles que podemos especificar son:
ease : Define un efecto de transicin con un comienzo lento, luego rpido y finalmente termina lento
(cuando no definimos la funcin de transicin elige esta por defecto)
linear : Define un efecto de transicin con la misma velocidad de inicio a fin.
ease-in : Define un efecto de transicin con un comienzo lento.
ease-out : Define un efecto de transicin con un final lento.
ease-in-out : Define un efecto de transicin con un comienzo lento y un final lento.

Tiempo de demora en iniciar la transicin

El cuarto parmetro opcional de la propiedad transition es indicar un tiempo de espera hasta que se inicie la
transicin:
Elemento {
transition: [nombre_propiedad] [duracin_transicin]
[funcin de transicin] [tiempo de inicio];
}
Es decir indicamos la cantidad de milisegundos o segundos hasta que se inicia el proceso de transicin.
Sintaxis alternativa
Hemos visto que a la propiedad transition podemos indicarle hasta cuatro parmetros. 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: [duracin de la transicin];
transition-timing-function: [funcin de transicin];
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 bsica para una animacin es la siguiente:
Elemento {
animation-name: [nombre de la animacin];
animation-duration: [tiempo de duracin];
}
@ keyframes [nombre de la animacin] {

from {
[propiedades y valores del estado inicial de la animacin]
}
to {
[propiedades y valores del estado final de la animacin]
}
}
animation-iteration-count
La propiedad animation-iteration-count permite controlar el nmero de repeticiones que tendr la animacin.
Elemento {
animation-iteration-count: [cantidad de veces a repetir la animacin o
"infinite"];
}
7

Si queremos que la animacin 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 animacin. Esta propiedad puede asumir dos
valores:
normal: con lo que la animacin cada vez que finaliza comienza desde el principio.
Alternate: cuando finaliza la animacin 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 funcin de transicin y el tiempo que
debe esperar para comenzar la animacin:
Elemento {
animation-timing-function: [funcin de transicin];
animation-delay: [tiempo de demora para iniciar la animacin];
}
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.
Definicin de ms de 2 keyframes
Hasta ahora hemos indicado en la animacin solo 2 keyframes (el inicial y el final), pero para animaciones ms
complejas es posible que necesitemos ms de 2 keyframes, para esto tenemos la siguiente sintaxis:
@keyframes [nombre de la animacin] {
0%{
[propiedades y valores]
}
[valor en porcentaje]%{
[propiedades y valores]
}
[valor en porcentaje]%{
[propiedades y valores]
}
100%{
[propiedades y valores]
}
}

III. MATERIALES Y EQUIPO

No.
1

2
3
4

Cantidad
Descripcin
1
PC con uno de los editores de pginas Web: Sublime Text, Brackets, Notepad ++,
BlueFish y HTML Kit y cualquiera de los navegadores siguiente: Internet Explorer 7
u 8, Firefox (ltima versin disponible), Google Chrome (ltima versin
disponible), Opera (ltima versin disponible), Safari (ltima versin disponible).
1
Gua de Laboratorio #9 de Lenguajes de Marcado y Estilo Web
1
Recursos para laboratorio prctico.
1
Memoria USB

IV. PROCEDIMIENTO
INDICACIONES GENERALES
1. Crear una carpeta en mis documentos y colocarle el nombre NCarnet_Guia9_LME, Nota: Cambiar
NCarnet por su nmero de carnet brindado por la Universidad.
2. Descargar los recursos de la gua
(https://dl.dropboxusercontent.com/u/61883835/Recursos%20guia%209/Recursos.rar),
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 informacin sobre la Liga Espaola de Futbol.
2. Visualice con el navegador de su preferencia la pgina index.html. Debera tener un resultado idntico
al siguiente:

3. Visualice las otras pginas del sitio. Notar que la pgina jugadas.html no posee contenido aun, puesto
que posteriormente se lo agregaremos.
4. Tmese un tiempo para revisar la estructura de las pginas web y de las hojas de estilo
proporcionadas. Notar que la hoja de estilo animaciones.css se encuentra inicialmente vaca puesto
que posteriormente escribiremos las reglas de estilo correspondientes a las transformaciones y
transiciones.
Insertando audio y video
5. Ubquese en el archivo jugadas.html. Dentro del div con el id contenedor coloque las siguientes
lneas de cdigo 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 lneas de cdigo 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 pgina con distintos navegadores para que vea como lucen los controles de audio y video
en cada uno de ellos.

10

Usando transformaciones de rotacin

11. Ubquese 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 imgenes de la pgina equipo.html. La
primera transformacin ser de rotacin y se realizar sobre la primera imagen de esa pgina.

Ntese que en esa regla de estilo se est seleccionando la imagen del primer elemento con la clase campen
y se le est aplicando una rotacin de 32 grados que se miden en sentido horario desde el centro de la imagen.
El resultado obtenido debera ser el siguiente:

13. Pruebe con distintos valores de ngulo para ver los resultados obtenidos. Pruebe con valores negativos
y responda: Cmo interpreta el navegador un ngulo negativo?
14. Agregue los prefijos propietarios para garantizar la compatibilidad de la transformacin con los
distintos navegadores y sus versiones.

11

15. Por defecto el ngulo de rotacin 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 transformacin sea la esquina inferior derecha de la imagen. La regla de estilo quedara
de la siguiente manera:

16. Visualice los cambios y conteste Qu fue lo que cambio al agregar la propiedad transform-origin?
Usando transformaciones de traslacin.
17. Para ejemplificar el uso de transformaciones de traslacin vamos a seleccionar la imagen del segundo
div con id campen y la vamos a mover 40 pixeles hacia abajo y 100 pixeles a la izquierda con
respecto a su posicin original.

18. Visualice los resultados en su navegador y responda: Por qu se ha usado el signo menos antes de
los 100px? Qu habra pasado si no se agregaba tal signo?
19. Agregue los prefijos propietarios para garantizar la compatibilidad de la transformacin 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 campen y le cambiaremos el tamao para que se muestre 30% ms grande con respecto a su
escala original.

12

Hasta este punto su pgina debera lucir de la siguiente manera:

21. Realice los cambios necesarios para que la imagen se vea 20% ms ancha y 15 menos larga con
respecto a su dimensin original.
22. Agregue los prefijos propietarios para garantizar la compatibilidad de la transformacin con los
distintos navegadores y sus versiones. Hasta este punto su regla de estilo debera lucir de la siguiente
manera:

Usando transformaciones de deformacin

23. Para ejemplificar el uso de las transformaciones de deformacin vamos a seleccionar la imagen del
cuarto div con id campen y la deformaremos 20 grados en el eje X.

13

El resultado obtenido debera ser similar al siguiente:

24. Pruebe cambiando el ngulo de deformacin con distintos valores.

25. Realice los cambios necesarios para que la deformacin 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 transformacin con los
distintos navegadores y sus versiones. Hasta este punto su regla de estilo debera lucir de la siguiente
manera:

Aplicando mltiples transformaciones.

27. Para aplicar mltiples transformaciones basta con separar con un espacio cada una de las funciones de
transformacin. Para ejemplificar esto, vamos a seleccionar la imagen del quinto div con id
campen, la rotaremos 180 grados y la vamos a escalar para que aumente su tamao en un 50%.

El resultado obtenido debera ser similar al siguiente:

14

28. Agregue los prefijos propietarios para garantizar la compatibilidad de la transformacin con los
distintos navegadores y sus versiones.
Transformaciones interactivas
29. Las transformaciones que hemos realizado hasta este punto de la gua se ejecutan automticamente
cuando se carga la pgina 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 imgenes.
Para ello lo nico que debemos de realizar es modificar los selectores de las reglas agregndoles la
pseudo-clase :hover. Por ejemplo, la regla de estilo para el primer div con la clase campen quedara
de la siguiente manera:
NOTA: Estas reglas de estilo no deben aadirse 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 transformacin NO debera producirse al cargar la pgina sino hasta que el usuario
pase el cursor sobre las imgenes. El efecto es interesante pero bastante brusco puesto que el cambio
es inmediato. Para hacer que el cambio de estado se haga de forma ms 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 transicin
dure 3 segundos.

32. Visualice los resultados en su navegador y notar que ahora las transformaciones se realizan de forma
lenta y progresiva.

15

33. Agregue los prefijos propietarios para garantizar la compatibilidad de la transicin con los distintos
navegadores y sus versiones.

Transicionando mltiples propiedades

34. En este ejemplo haremos que adems de que se realicen las transformaciones cuando se hace :hover
sobre las imgenes tambin 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 transformacin 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 pgina
campeonatos.html. Inicialmente esta pgina debera lucir de la siguiente manera:

16

38. Revise la estructura de la pgina y notar que el div con id contenedor tiene 4 divs con la clase
campen. Identifique la siguiente seccin de cdigo 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 campen cuando el usuario pasa
el cursor sobre ellos.

17

40. Realice las modificaciones necesarias para que los cambios que se producen en la pseudo-clase :hover
se realice de forma progresiva con una duracin de la transicin de 2 segundos. Su pgina debera de
lucir de la siguiente manera cuando se hace el hover sobre los elementos.

Transiciones de posicin y escala.

41. Ahora vamos a realizar algunas transiciones sobre los elementos de la pgina index.html. Ubquese
sobre el cdigo de esta pgina y revise su estructura. Notar que hay varios divs con la clase jugador
en los que se muestra informacin sobre los jugadores de la BBVA.

42. Coloque las siguientes reglas de estilo dentro de su archivo animaciones.css.

18

43. Visualice los resultados en su navegador y vea lo que sucede cuando se pasa el cursor sobre las
imgenes de los futbolistas. El resultado obtenido debera ser similar al siguiente:

44. Revisando la estructura del cdigo 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 declaracin 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. Debera obtener un resultado similar al siguiente:

19

Agregando animaciones
46. A continuacin vamos a agregar animaciones sobre los iconos de redes sociales que se muestran en la
parte inferior de las pginas web. La animacin consistir en reducir la escala de las imgenes cuando
se pasa el cursor sobre ellas.

47. Realice las modificaciones necesarias para que la animacin se repita un nmero infinito de veces.
48. Realice las modificaciones necesarias para que cuando finalice la animacin comience desde el final
hasta el principio. Hasta este punto su cdigo debera lucir de la siguiente manera:

20

49. Realice las modificaciones necesarias para que la animacin dure 2 segundos.
50. Dado que la animacin 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 animacin. Modifique el cdigo del keyframe animacion1 para que luzca
de la siguiente manera:

51. En el cdigo que se le ha proporcionado ya se han agregado los prefijos propietarios para webkit.
Coloque los prefijos restantes.

21

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 ttulo de la pgina 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
Tamao de letra: 35px
Tipo de letra: Arial Unicode MS
Alineacin de texto: center
Vista: Block
Posicin: relative
Margen: auto
Ancho: 100%
Ancho mximo: 960px
Alto mximo: 440px
Overflow: hidden
Posicion: absolute
Vista: block
Bottom: 30px
Margen: 0
relleno:0
Orden de apilamiento: 999
Opacidad:0
Curso:pointer
22

.boton:nth-child(1)
.boton:nth-child(3)
.boton:nth-child(5)
.boton:nth-child(7)

left:30px
left: 60px
left:90px
left:120px
Label dentro de la clase slider
Posicin: absolute
.slider label
bottom: 30px
Ancho: 12px
Alto: 12px
Fondo: White;
Bordes redondeados: 7px
Orden de apilamiento: 100
Borde: 1px solid #777;
.slider label:nth-child(2)
left:30px
.slider label:nth-child(4)
left:60px
.slider label:nth-child(6)
left:90px
.slider label:nth-child(8)
left:120px
Label ms prximo a checked dentro de Fondo : yellow
la clase botn
Color de borde: eee
.boton:checked+label
img dentro de clase contendor-img
Vista: block
.contenedor-img img
Float: left
Clase cuatro-imagenes
Ancho:400%
Img dentro de Clase cuatro-imgenes
Ancho: 25%
Clase contenedor-img
Posicin: relative
left:0
Creacin de transicin
transition: left .3s ease-in;
-webkit-transition: left .3s ease-in;
Seleccionar todos los elementos que contengan el left: 0
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 botn
Seleccionar todos los elementos que contenga el
nombre de la clase contenedor-img dentro del hijo
5 de la clase botn
Seleccionar todos los elementos que contenga el
nombre de la clase contenedor-img dentro del hijo
7 de la clase botn

left:-100%
left:-200%
left:-300%

7. Agregar la lnea necesaria en el documento html para lograr vincular el archivo css y poder aplicar los
estilos.

23

8. Visualizar la pgina web en el navegador. Al hacer clic sobre los crculos cambiar de imagen.

V. ANALISIS DE RESULTADOS
1. Realice las modificaciones necesarias para que el video del ejercicio 1 no se reproduzca de forma
automtica. Adems, 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 botn reproducir.
2. Realice las modificaciones necesarias para que en el slider del ejercicio 2 las transiciones de imgenes
se produzcan de forma automtica, es decir sin necesidad de que el usuario haga click sobre los
crculos.
El instructor evaluar el desempeo de su trabajo dentro la clase. Estos ejercicios se evaluarn en la misma
hora de clase.
VI. EJERCICIOS COMPLEMENTARIOS
1. Presente un ejemplo de animaciones usando mltiples fotogramas. Se evaluar la originalidad,
creatividad y esttica del ejemplo presentado.
2. Investigar la forma en que se incrustan videos de youtube dentro de una pgina web. Presentar un
ejemplo.
3. Investigar como colocar un video como fondo (background) de una pgina web.
4. Presentar un men desplegable en el que se utilicen transiciones y/o animaciones.
Fecha de entrega: Prxima semana.

24