Certificado de

profesionalidad
IMSV0209
 MULTIMEDIA EN HTML5
Múltiples formatos tanto de fotos, vídeos o audio.

Los navegadores soportan diferentes tipos de formato.

HTML5 simplifica el proceso de publicación aunque cada navegador

tiene sus especificaciones y acepta determinados formatos.
 <AUDIO>
<audio src="[Link]" controls preload autoplay loop></audio>

controls Muestra la barra de control

preload Precarga la el archivo de sonido para que este

disponible para ser escuchado por el usuario.
autoplay En cuanto se ha cargado el archivo de audio
se empieza a reproducir.
loop Reproduce el sonido en bucle
 Formatos de AUDIO
Browser MP3 Ogg Wav
audio/mpeg audio/ogg audio/wav
IE Si No No
Chrome Si Si Si
Firefox Si Si Si
Safari Si Si No
Opera Si Si Si

<audio>
<audio>
<source src="[Link]" type="audio/ogg"/>
<source src="musica.mp3">
<source src="musica.mp3" type="audio/mpeg"/>
<source src="[Link]">
<source src="[Link]" type="audio/acc"/>
</audio>
</audio>

[Link]
 <VIDEO>
<video src="video.mp4" controls preload width="720" height="576" poster="[Link]">
</video>
controls Muestra la barra de control

preload Precarga la el archivo de vídeo para que este

disponible para ser escuchado por el usuario.
autoplay En cuanto se ha cargado el archivo de vídeo
se empieza a reproducir.
loop Reproduce el vídeo en bucle
poster Imagen previa al vídeo
height Altura del vídeo
width Anchura del vídeo.
 Formatos de Video
Browser MP4 Ogg WebM
video/mp4 video/ogg video/webm
IE Si No No
Chrome Si Si Si
Firefox Si Si Si
Safari Si No No
Opera Si Si Si

<video>
<source src="video.mp4">
<source src="[Link]">
<source src="[Link]">
</video>

[Link]
Youtube Videos
 Youtube Videos
<iframe width="560" height="315”
src="[Link]
frameborder="0" allowfullscreen></iframe>

autohide =0, controles siempre visibles

=1, controles se esconden cuando el vídeo empieza
=2, si formato 16:9 o:3, valor 1, sino valor 0
autoplay =0, el vídeo no se carga automáticamente
=1, video cargado automático
controls =0, los controles no se muestran y se carga inmediatamente.
=1, los controles se muestran y se carga inmediatamente.
=2, los controles se muestran, pero el vídeo no se carga
loop =0, el vídeo carga una sola vez | =1 el vídeo se carga en bucle

<iframe width="560" height="315”

src="[Link]
frameborder="0" allowfullscreen></iframe>
 Multimedia 1: vídeo de fondo

Poner Video de
fondo y una capa
por encima
 Multimedia 2: vídeo de fondo

Poner vídeo
YOUTUBE de
fondo y una capa
por encima
Etiquetas Semánticas
 Etiquetas Semánticas
<header>
A nivel de página, cabecera que aparece en lo alto, con logotipo,
eslogan, menú de navegación, etc.
A nivel de contenido, zona de introducción de contenido.

<footer>
A nivel de página, zona de pie de la página.
A nivel de contenido, zona de conclusión del contenido.

<nav>
Señala la zona de navegación entre páginas del mismo sitio web.

<section>
Permite agrupar elementos de la misma temática, por ejemplo,
agrupamos un contenido, su título y pie.
 Etiquetas Semánticas
<article>
Define un contenido autónomo que se puede usar en cualquier zona
sin perder su significado.
Un article puede tener <header>, <footer> y varos <hx>

<aside>
Muestra contenido relacionado al contenido vinculado.

<main>
Presenta el contenido principal de la página. Sólo hay un elemento
por página, no debe usarse dentro de <article>, <aside>, <footer>,
<header> o <nav>

<figure> y <figcaption>
Presenta una imagen y un texto que la acompaña
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure>
[Link]
Etiquetas Semánticas
Etiquetas Semánticas
Etiquetas Semánticas
 Selectores
Selector universal: permite aplicar un estilo a la totalidad de los
elementos HTML de la página. Sintaxis: * {...}.

Selector de elemento o de tipo: permite aplicar un estilo a un

elemento HTML existente. Sintaxis: p {...}.

Selector de clase: permite aplicar un estilo a los elementos que

utilicen esa clase. Sintaxis: .intro {...}.

Selector de clase de un elemento: permite aplicar un estilo a un

elemento específico que utilice dicha clase. Sintaxis: [Link] {...}.

Selector de descendientes: permite aplicar un estilo a un elemento

determinado que se encuentre dentro de un elemento específico.
Sintaxis: p .nombrePropio {...}.
 Selectores
Selector hijo: permite aplicar un estilo a los elementos hijos de un
elemento específico. Sintaxis: p>.nombrePropio {...}.

Selector adyacente: permite aplicar un estilo al elemento que se

encuentre a continuación de un elemento específico. Sintaxis: h1+h2
{...}.

Selector de atributo: permite aplicar un estilo a un elemento que

utilice un atributo específico. Sintaxis: p[lang] {...}.

Selector de ID: permite aplicar un estilo a un elemento que disponga

de un código de identificación único. Sintaxis: #bannerSuperior {...}.
 Pseudo-clases
La pseudo-clase first-child permite aplicar un estilo al primer
elemento hijo de un elemento. Sintaxis: ul li:first-child {...}.

La pseudo-clase :last-child permite seleccionar el último elemento

hijo de un elemento padre.

Las pseudo-clases de vínculos permiten aplicar estilos a los

vínculos en función de su estado (visitado y no visitado).
Sintaxis: a:link {...} y a:visited {...}.

Las pseudo-clases dinámicas permiten aplicar estilos a los

vínculos cuando se pasa el ratón por encima o cuando se ha hecho
clic en ellos, así como a los campos de los formularios que estén
activos. Sintaxis: a:hover {...}, a:active {...} y .campoTexto:focus {...}.

La pseudo-clase de lenguaje permite aplicar estilos en función del

idioma especificado. Sintaxis: :lang(es) {...}.
 Pseudo-elementos
Los pseudo-elementos de primera letra y de primera línea. Con el
pseudo-elemento de primera letra es posible aplicar un estilo a la
primera letra de un elemento.
Sintaxis: .especial:first-letter {...}.
Se sigue el mismo principio para la primera línea.
Sintaxis: .especial:first-line {...}.

Los pseudo-elementos antes y después. Con estos pseudo-

elementos es posible generar texto antes o después de un elemento
determinado. Se usa asociado a content.
Sintaxis: .nota:before {...} [Link]:after {...}.

Ejemplo: h1:before {content: “Capitulo – ”;}

Ejemplo: [Link]
 Pseudo-clase :nth(X)
Ver ejemplo práctico:
[Link]

Multimedia 3: Filas alternas

 Los prefijos de los estilos
Cuando una propiedad no está todavía confirmada, pero está definida,
los navegadores la adoptando usando unos prefijos:

-moz-: para Mozilla Firefox.

-webkit-: para Safari y Chrome.
-o-: para Opera.
-ms-: para Internet Explorer.
 Los prefijos de los estilos
Cuando una propiedad no está todavía confirmada, pero está definida,
los navegadores la adoptando usando unos prefijos:

-moz-: para Mozilla Firefox.

-webkit-: para Safari y Chrome.
-o-: para Opera.
-ms-: para Internet Explorer.

header {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
 Elementos CSS3
Bordes redondeados
[Link]

Background
[Link]
Ejemplo imagen de fondo:
[Link]

Gradientes
[Link]

Efectos de sombras
[Link]

Transformaciones 2D
[Link]
 Multimedia 4: Galeria 1
Usando las propiedades de transformación y
efectos de sombra conseguir realizar esta composición en web.
 Multimedia 5: foto 3D
Usando las propiedades de caja, sombra y rotación realizar esta composición web.
 Elementos CSS3
Transformaciones 3D
[Link]

Transiciones
[Link]
Transition-timing-function
[Link]
Multimedia 6: Galeria 2 Hover
 Elementos CSS3
Selector :target
[Link]
Ejemplo:
[Link]
Multimedia 7: Galeria 2 Target
Multimedia 8: Acordeón
Multimedia 9: Pantalla modal
 KEYFRAMES
Ejemplo: [Link]

10px,100px 10px,400px

10px,400px 400px,400px
 KEYFRAMES
Ejemplo: [Link]
#caja { #caja {
background-color: red; …
position: relative; Características caja
width: 100px; …
height: 100px; prefijo-animation-name: redBox;
-webkit-animation-name: redBox; prefijo--animation-duration: 5s;
-webkit-animation-duration: 5s; prefijo-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite; }
-moz-animation-name: redBox;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
animation-name: redBox;
animation-duration: 5s;
animation-iteration-count: infinite;
}
 KEYFRAMES
Ejemplo: [Link]
@-webkit-keyframes redBox { @-moz-keyframes nombre_animacion
0% {left: 10px; top: 100px;} { 20% {
25% {left: 400px; top: 100px;} /* código css 1 */
50% {left: 400px; top: 400px;} }
75% {left: 10px;top: 400px;} 40%, 80% {
100% {left: 10px;top: 100px;} /* código css 2 */
} }
… 65% {
@keyframes redBox { /* código css 3 */
0% {left: 10px; top: 100px;} }
25% {left: 400px; top: 100px;} }
50% {left: 400px; top: 400px;}
75% {left: 10px;top: 400px;} Más:
100% {left: 10px;top: 100px;} [Link]
} [Link]
 Multimedia 10: foto giratoria
Mostrar una imagen que gira 360 grados, empezando con una
opacidad 0 en el momento 0% y 1 en el momento 100%. Utilizar la
transformación rotate.
Multimedia 11: Formulario Parpadee
 Multimedia 12: CSS, Arriba Abajo

[Link]
Multimedia 13: Slider, Izquierda Derecha

[Link]
 Certificado de
profesionalidad
IMSV0209