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.
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:
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
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.
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:
Fuente: HTML 5 – Maestros del Web
http://html5facil.com/
Algunos ejemplos los saque de diferentes web y no recuerdo cuales, mil disculpas
Entradas
1 comentarios:
QUANTUM BINARY SIGNALS
Get professional trading signals delivered to your cell phone daily.
Start following our trades NOW & gain up to 270% per day.
Publicar un comentario