Atención : este post se divide en varias partes de información sobre html5 ,si quieres buscar algo en especial,solo ve hacia abajo y ve los títulos resaltados,todo esto fue un resumen y extracción de distintas fuentes,debido a que en anteriores post se armo forobardo por no poner las fuentes abajo las encontraran a todas
QUE DISFRUTEN EL POST !!
Hola amigos de T! como ahora el html5 es el mas buscado por los desarrolladores, decidí hacer un post,para que nadie se quede afuera de esta experiencia que hoy en día es tan usada por todos
Bueno,que empiece el post..
Introducción :
HTML5 nos permite una mayor interacción entre nuestras páginas web y contenido media (vídeo, audio, entre otros) así como una mayor facilidad a la hora de codificar nuestro diseño básico. Esta nueva versión se basó en el diseño más común de las páginas web alrededor del mundo para llegar a un estándar de etiquetas que realicen las mismas tareas de manera más rápida y eficiente..
Soporte para Audio y Vídeo
Una de las novedades más interesantes de HTML5 es su capacidad nativa para reproducir contenidos de audio y vídeo. Antes de HTML5 necesitábamos un plug-in como Silverlight o Flash para esto. En HTML5 ahora podemos integrar el audio y el vídeo utilizando las etiquetas <audio> y <video> respectivamente.
Desde el punto de vista del programador, los elementos audio y vídeo son de uso extremadamente simple (Ahora vamos a ver con mucho más detalle sus atributos). Ambos elementos, además, están soportados en los principales navegadores (las últimas versiones de Internet Explorer, Firefox, Chrome, Opera y Safari). La contrapartida, sin embargo, es que necesitamos códecs para reproducir audio y vídeo, y cada navegador soporta diferentes códecs.
Pero por suerte esto no es un problema grave. El soporte para audio y vídeo se ha implementado de una manera realmente inteligente, donde tenemos la posibilidad de trabajar con distintos formatos de archivo (el navegador intentará utilizarlos de forma secuencial, si no puede reproducir el archivo con uno, pasa al siguiente hasta que lo consiga).
Una buena práctica recomendada es disponer diferentes orígenes de audio y vídeo para acomodarse a distintos navegadores. También puedes preparar un fallback a Silverlight o Flash. Por último, cualquier texto que aparezca entre las etiquetas de apertura y cierre (o sea, <audio> y </audio> se mostrará en aquellos navegadores que no soporten el elemento audio o vídeo).
por ejemplo:
audio controls="controls">
<source src="laughter.mp3" type="audio/mp3" />
<source src="laughter.ogg" type="audio/ogg" />
</audio>
Con este código el navegador primero intentará reproducir el archivo laughter.mp3. Si no tiene los códecs adecuados para ello, intentará reproducir el siguiente archivo, laughter.ogg. Si el navegador desconoce por complete el elemento audio, mostrará en pantalla el mensaje "Tu navegador no soporta el elemento audio" en el sitio donde debería verse el control de audio.
Un inconveniente que afecta al audio y vídeo de HTML5 es que no integra soporte para la gestión de derechos digitales (DRM). Esto lo tiene que hacer el desarrollador por su cuenta. Puedes leer lo que el W3C expone aquí como justificación para ello. (Si tienes que utilizar contenidos protegidos mediante DRM, también te interesa la Documentación de DRM de Silverlight que puede ser una solución más fácil para este problema).
Ahora vamos a ver con más detenimiento estos nuevos elementos.
Audio
Volvamos sobre el ejemplo de código anterior con el elemento <audio>:
<audio controls="controls">
<source src="laughter.mp3" type="audio/mp3" />
<source src="laughter.ogg" type="audio/ogg" />
</audio>
Ya he explicado el efecto de fallback para cada origen de audio, que como decía, irá probando con cada uno hasta que pueda reproducir un archivo (con suerte).
Como puedes ver, aparece un atributo que se llama controls. Con él se muestra en pantalla un bloque de controles de audio que incluye un botón de reproducir/pausa, el tiempo de reproducción, un botón de silencio (mute) y los controles de volumen. En la mayoría de ocasiones es conveniente ofrecer al usuario los controles de audio en pantalla. A mí personalmente me molesta mucho un sitio web con sonido que no pueda parar, silenciar o volver a reproducir. ¿No te pasa esto a ti también?
Los controles de audio tienen este aspecto en Internet Explorer:
En cada navegador estos controles tienen un aspecto diferente. Aquí abajo puedes ver cómo salen en Chrome (cuando se reproduce una canción). El control deslizante de volumen se abre hacia abajo cuando pasamos el ratón por encima del icono de sonido, a la derecha.
Y así se ve en Firefox (dándole a la pausa en una canción). Igual que el de Chrome, tiene un control de volumen emergente (que no se ve aquí), cuando pasamos el ratón por encima del icono del altavoz de la derecha.
Otros atributos muy buenos del elemento de audio son estos:
Así, este código de ejemplo no solo muestra los controles de audio en pantalla, sino que empieza a reproducir el sonido de forma inmediata y lo sigue haciendo indefinidamente en un bucle.
<audio controls="controls" autoplay="autoplay" loop="loop">
<source src="laughter.mp3" type="audio/mp3" />
<source src="laughter.ogg" type="audio/ogg" />
Tu navegador no soporta el elemento audio.
</audio>
Si quieres jugar un poco con el elemento <audio> en tu navegador, puedes utilizar un excelente "Editor de Prueba" en http://w3schools.com que te permite editar un ejemplo de código y ver lo que ocurre. También te recomiendo que leas el artículo "Cómo añadir un reproductor de audio HTML5 a tu sitio Web".
Vídeo
Veamos ahora el elemento <video>.
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
</video>
Como ya he explicado antes, el elemento vídeo soporta múltiples orígenes que se irán probando hasta dar con uno que se pueda reproducir.
Igual que sucede con el audio, el elemento vídeo tiene un atributo controls. En esta captura de pantalla puedes ver el aspecto que tiene en Internet Explorer:
Otros atributos interesantes del elemento video son los siguientes:
De nuevo, si quieres jugar un poco con el elemento <video>, puedes utilizar el editor de pruebas de
que te deja modificar un ejemplo de código para ver el resultado.http://w3schools.com
Y hasta aquí fue la primera parte,si,lo se,muy pocos van a leer todo esto,pero si de verdad tenes ganas de aprender lo lees
Esto solo es una intruduccion,en la parte que viene les voy a colocar videos y mas explicaciones y en la ultima parte van a poner a prueba lo que saben...
En total son 3 post.. esto esta asegurado que de aquí van a manejar el html5 como la palma de su mano y bueno me despido,no en necesario que me den puntos,yo lo único que hice fue copiar y pegar..
SI TIENEN ALGUNA DUDA SOLO DIGANMELA EN COMENTARIOS O MP !!