martes, 17 de abril de 2012

HTML 5 - Inducción

HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. HTML5 también es un termino de marketing para agrupar las nuevas tecnologías de desarrollo de aplicaciones web: HTML5, CSS3 y nuevas capacidades de Javascript.

La versión anterior y más usada de HTML, HTML4, carece de características necesarias para la creación
de aplicaciones modernas basadas en un navegador. El uso fuerte de Javascript ha ayudado a mejorar esto, gracias a frameworks como jQuery,1 jQuery UI2, Sproutcore3, entre otros.

Flash en especial ha sido usado en reemplazo de HTML para desarrollar web apps que superaran las habilidades de un navegador: Audio, video, webcams, micrófonos, datos binarios, animaciones vectoriales, componentes de interfaz complejos, entre muchas otras cosas. Ahora HTML5 es capaz de hacer esto sin necesidad de plugins y con una gran compatibilidad entre navegadores.

Si queremos saber si nuestro web browser es compatible con HTML 5, les recomiendo que accedan a este link: http://caniuse.com/#cats=HTML5 en el cual podrán ver la compatibilidad.

Bueno, sin más preambulos y sin tanta explicación de las cosas, intentaré realizar prácticas sencillas. Les dejare Drag & Drop y la inserción de videos que me parecieron interesantes, obviamente existen muchas otras mejoras, pero al menos aquí se podrán formar una idea.

Drag & Drop

Para el que no sepa que es esto, esto significa “Arrastrar y Soltar”, lo cual a mi parecer es un toque fabuloso de HTML 5. Para lo primero que debemos  hacer es crear el elemento que podrá ser arrastrado, esto se lográ con el atributo draggable="true, además de agregarle un evento script, una forma sencilla es con ondragstart. En este ejemplo trabajaremos con un párrafo (<p></p>), pero bien lo propiamo hacer con otro elemento como un div o directamente una imagen. Esto nos deberia estar quedando de la siguiente forma:



 


Ahora dentro del párrafo le agregaremos una imagen a arrastrar, nos debería quedar de la siguiente forma:



 



Ahora crearemos un contenedor el cual tendrá la función de recibir lo que nosotros arrastremos. Este debe tener los atributos “ondrop”, “ondragenter” y “ondragover”.



El atributo “ondrop” permitirá llamar la función Javascript para llevar la tarea una vez que el elemento ha sido soltado sobre el contenedor. Dado que el comportamiento por defecto del navegador es cancelar soltados, devolver false en los atributos “dragenter” y “dragover” permitirá el movimiento. El contenedor también va dentro del body.


Arrastrar

El estilo aplicado es para que diferenciemos el contenedor.

Ya con esto tenemos todo el body listo, ahora solo nos queda introducir en el head (<head></head>) las funciones Javascript, crearemos 2 funciones, la función drag que es para tomar el elemento y la función drop que es para dejar el elemento tomado.



 
  Elejemplo DragandDrop
  


Con esto ya tenemos todos los elementos necesarios para crear un elementos arrastrable, obviamente esta una forma muy sencilla de hacerlo.

Agregar un video

Ahora la inserción de un video a nuestra página web ahora lo hacemos gracias al tag video. Un sintaxis simple seria:



Lo que hacemos aquí es que la opción controls nos permite justamente eso, controlar el video, reproducir, pausar, adelantar, retroceder, subir o bajar el volumen. En cambio src es donde indicamos la ruta del video. Para darle un ancho y alto, lo hacemos con height y width.



En el caso que no queramos que tenga controles, le debemos quitar “controls” el problema es que el video no se reproducira, para eso le debemos dar autoplay, de la siguiente forma:




Una recomendación, es que si bien es cierto de la forma descrita se reproducirá el video, es buena práctica indicar el tipo del archivo, por ejemplo si queremos un video mp4, hacerlo de la siguiente forma:




En el caso que deseemos que nos de un mensaje de error si el navegador no soporta HTML 5, lo debemos hacer de la siguiente manera:




Los atributos que ofrece el tag video son: autoplay, controls, height, loop, muted, poster, preload, src, widht.



Fuente: HTML 5 – Maestros del Web
http://html5facil.com/
Algunos ejemplos los saque de diferentes web y no recuerdo cuales, mil disculpas

0 comentarios:

Publicar un comentario