miércoles, 14 de noviembre de 2012

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



Puedes ver el ejemplo arriba escribe algo sobre el 



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.