Html 5 Introducir una nota adhesiva ,audio o vídeo
Nota adhesiva
Escribe algo para mi
- Que te parece mi blog
- Escribe sobre esta nota dejandome un mensaje preferiblemente amigable
Este es el código en HTML5.
<html><body>
<h1>Nota adhesiva</h1>
<section id="aditable" contenteditable="true">
<h2>Escribe algo para mi </h2>
<Texto para la nota >
<ul>
<li>Que te parece mi blog </li>
<li> Escribe sobre esta nota dejan dome un mensaje preferiblemente amigable </li>
<li>puedes escribir aquí</li>
</ul>
</section>
</body>
</html>
Crédito para mejorando.la es solo cuestión de técnica o de algún consejo de nuestros expertos no lo implemente aun pero lo dejo por si acaso .
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Mi primera web </title>
<script src="js/modernizr.custom.75566.js"></script>
</head>
<body>
<header>
<h1>Mi web en practicas</h1>
</header>
<section>
<article><video id="video"
width="640" height="320" controls>
<source src="video.mp4"
type="video/mp4; codecs='avc1,mp4a'"/>
<source src="video.webm"
type="video/webm; codecs='vp8,vorbis'"/>
</video>
</article>
<aside>(Botones sociales)</aside>
<article>(chat)</article>
</section>
<footer> Con andreina zerpa</footer>
</body>
</html>
Esto es según lo que aprendí osea a mi manera .
Audio
Introducir audio en tu sitio con html5 es muy fácil
Asegurando la compatibilidad en los tres formatos y con la famosa nota por si acaso no se escuchara en algún navegador . Este es el código.
<html>
<audio controls="Controls">
<source src="111.ogg" type="audio/ogg"/>
<source src="222.mp3" type="audio/mpeg"/>
<source src="333.wav" type="audio/wav"/>
Tu navegador no soporta audio en html5
</audio>
</html>
Y así es como debería visualizarse en el navegador claro en este caso no funciona por que el audio tendría que estar en la misma carpeta del proyecto pero para hacerse una idea nada mas
Parámetros adicionales .
preload
para cargar el archivo con anterioridad al uso pero este consume ancho de banda innecesario y es mejor usarlo en situaciones especiales .
<audio controls="Controls" preload="preload">
quedando en total de esta manera .
<html>
<audio controls="Controls" preload="preload">
<source src="111.ogg" type="audio/ogg"/>
<source src="222.mp3" type="audio/mpeg"/>
<source src="333.wav" type="audio/wav"/>
Tu navegador no soporta audio en html5
</audio>
</html>
autoplay
con este parámetro el audio se cargar solo al entrar en la pagina, ideal para quienes quieren colocar fondo de audio en su sitio web
<audio controls="Controls" autoplay="autoplay">
quedando todo de esta manera
<html>
<audio controls="Controls" autoplay="autoplay">
<source src="111.ogg" type="audio/ogg"/>
<source src="222.mp3" type="audio/mpeg"/>
<source src="333.wav" type="audio/wav"/>
Tu navegador no soporta audio en html5
</audio>
</html>
Y con Loop
<audio controls="Controls" autoplay="autoplay" loop="loop">
volverá a iniciarse una ves finalice
quedando así
<html>
<audio controls="Controls" autoplay="autoplay" loop="loop">
<source src="111.ogg" type="audio/ogg"/>
<source src="222.mp3" type="audio/mpeg"/>
<source src="333.wav" type="audio/wav"/>
Tu navegador no soporta audio en html5
</audio>
</html>
Vídeo
Produciéndose en su tamaño y escala original podremos pausar y controlar su volumen de igual manera que en ocasiones anteriores con el mismo mensaje por si acaso hay incompatibilidad de navegadores el mensaje
Tu navegador no soporta vídeo en html5
al igual que el audio el vídeo tendrá que estar todo en una mismo archivo
y este es el código
<html>
<video src="sintel.ogg"
controls="controls">
Tu navegador no soporta video en HTML5
</video>
<html>
podremos modificar su tamaño
<html>
<video src="sintel.ogg"
controls="controls" wight=300 height="150">
Tu navegador no soporta video en HTML5
</video>
<html>
y crear una compatibilidad para distintos navegadores .
con
<source src="nombre y extensión del archivo " type="tipo de vídeo"/>
la introducción de tantas etiquetas dependerá del tantos formatos de vídeos que tengamos .
mp4,ogg,webm,etc.
quedando así.
<html>
<video controls="controls" wight=300 height=150>
<source src="sintel.ogg" type="video/ogg"/>
<source src="sintel.mp4" type="video/mp4"/>
<source src="sintel.webm" type="video/webm"/>
Tu navegador no soporta video en HTML5
</video>
<html>
En conclusión La posibilidad que nos da HTML5 sin usar ningún plugins externo fantástico no?.
Tal vez te interese .
Microdatos .
Manifiesto
Herramientas para un sitio web mas rápido.
Canvas.
Editores para html5.
CSS3. Trabajar con Múltiples imágenes de fondo .
Border-radius,Shadow CSS3.
framework.
Evolución del html
Enlaces librerías herramientas y compatibilidad con IE.
Internet mas rápida.
Contador de visitas personalizado para tu sitio.
Como siempre muy interesantes tus artículos
ResponderEliminarGracias !!!!!!!!!!
ResponderEliminarGracias por compartir andreina. Saludos.
ResponderEliminarHola +eleazar garcia estrada Gusto de saludarte
ResponderEliminary agradecerte el apoyo en todo ,y de nada hombre estamos para ayudarnos mucha surte para ti y felicidad !!!!!!!!!!!!