Documentos de Académico
Documentos de Profesional
Documentos de Cultura
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.
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 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>
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>
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:
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)
translateY(ty)
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);
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;
}
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]
}
}
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
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
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:
13
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.
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.
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
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