Pues este es el primero post sobre html5 que escribo. La verdad que me ha dejado asombrado, había visto algo muy por encima y sin prestar mucha atención.
Tiene muy buena pinta, pero supondrá que hay que darse caña en aprender esta nueva mejora en la tecnología de World Wide Web, HTML.
Para tener algo de teoría HTML 5 es una de las revisiones más importantes que establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Algunos de ellos son técnicamente similares a las etiquetas <div> y <span>, pero tienen un significado semántico, como por ejemplo <nav> (bloque de navegación del sitio web) y <footer>. Otros elementos proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los elementos <audio> y <video>.
Mejoras en el elemento <canvas>
Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo elementos puramente de presentación, como <font> y <center>, cuyos efectos son manejados por el CSS. También hay un renovado enfasis en la importancia del scripting DOM para el comportamiento de la web.
Fuente: wikipedia
Nuevas APIS
A parte de las nuevas etiquetas de html5 existen una serie de APIs que extienden algunas interfaces de las propiedades DOM, éstas son un por ejemplo:
- El elemento canvas para dibujar en 2D, es un parte de html5 que permite la renderización de gráficos e imágenes bitmap de forma dinámica. Es un modelo de procesamiento de bajo nivel que actualiza un bitmap.
Ejemplo de uso de una etiqueta canvas
[code]
<canvas id="tutorial" width="150" height="150"></canvas>
[/code]Función para verificar si el navegador soporta la etiqueta
[code]
var canvas = document.getElementById(‘tutorial’);
if (canvas.getContext){
var ctx = canvas.getContext(‘2d’);
// pintar codigo aqui
} else {
// codigo que no soporta canvas de html5 aqui
}
[/code]Ver ejemplo de canvas tag html5
Reproducción de vídeo [code] <video id="video_with_controls" width="320" controls autobuffer> <source src="video.webm" type="video/vp8" /> <source src="video.mp4" type="video/mp4" /> <source src="video.ogv" type="video/ogg" /> Tu navegador no soporta el video tag de html5 </video> [/code] Ver ejemplo de video tag html5
Aplicaciones offline
Drag-and-drop
Gestión del historial del navegador
Geolocalización
He visto algunas web y ejemplos en HTML5 y me ha dejado asombrado. Sobre todo sketchpad, es una web para dibujar parecida al paint, obviamente no lo vamos a comparar con Photoshop… pero para ser los inicios de html5 aplicado a un desarrollo, de dibujo y edición de imagen a bajo nivel, online esta pero que muy bien desarrollada, me ha gustado mucho.
También esta el siguiente video que al pulsar sobre él hace un efecto de explosión, el tema es que al tener unos frames por segundo muy altos los ordenadores que ya son un poco viejos como mi portátil pues se nota que va lento.
He estado trasteando en la web HTML5Rocks.com desarrollada por Google, y en la que hay tutoriales sobre html5, implementación de nuevos tags, ejemplos de uso, presentaciones, una herramienta online para testear y probar código y javascript html5 y otros recursos y material didáctico para empezar a usar y aprender html5.
Esto es señal de que ha Google le gusta y lo apoya, y personalmente creo que a la hora de indexar empezará a valorar más las web de vídeos que usan html5 en vez de flash, más allá de que flash no indexe y se tengan que hacer algunos trucos o «piruetas» para que indexe contenido. Pero lo cierto es que el Sr. Google es quien marca las reglas del juego y parece que html 5 le gusta.
No me voy a aventurar a opinar sobre flash (mucho), que esta muy bien para depende que aplicaciones y determinados tipos de webs, pero yo creo que con el tiempo flash dejará de usarse para muchas tareas, que hoy día son necesarias y el reproductor de vídeos puede ser una de ellas.
Para mas especificaciones y ver la documentación oficial sobre HTML5 Y XHTML5 visitar la web oficial de W3C
Mas información en la wikipedia html5
Nota: pero google ya hace tiempo que lee contenido flash
http://www.blogtecnologico.net/google-lee-flash-lee-textos-enlaces-flash/
Estoy contigo en que flash dejará de usarse para muchas cosas, de hecho ya pasa gracias a las librerias js, pero tp estoy para nada con la gente que dice por ahí que casi desaparecerá. Hay ventajas y cosas que nadie le podrá quitar.
Ya se que Google lee contenido en flash y que rastrea las librerías js, iframes y sino lo capas haciendo algunas «cosillas» se mete hasta en las tripas de la web, prueba atributos y valores en las urls, etc..
Lo otro que comentas es básicamente lo que digo:
«No me voy a aventurar a opinar sobre flash (mucho), que esta muy bien para depende que aplicaciones y determinados tipos de webs, pero yo creo que con el tiempo flash dejará de usarse para muchas tareas, que hoy día son necesarias y el reproductor de vídeos puede ser una de ellas.»
Hola muy buen tutorial, si queréis aprender HTML5 podéis pasarlos por
http://www.foroshtml5.com
Un saludo!!
Hola, me ha gustado el mensaje que aparece a estar más de 15 minutos en la página, por eso me he motivado a comentar.
Me encontraba buscando algo de información para «refrescar» un poco mis viejos conocimientos de programación y diseño web, pues hace años que no miraba nada y HTML5 me parece un gran avance.
Me preguntaba si podrías darme algún consejo. No soy programador, todo lo que sé lo he aprendido de forma autodidacta, por lo que no entiendo muchos términos ni tecnicismos. ¿Podrías darme algún consejo sobre cómo aprender algo básico? Si pulsas en el enlace de mi web (en el nick del comentario) verás lo poco que necesito saber, pues realmente solo me interesa tener nociones básicas para que mi web no parezca del siglo pasado, así que si pudieras recomendarme algún libro u otro medio para lograr un nivel «amateur» en esto del mundo web, te estaría muy agradecido.
Muy bueno, habéis visto el foro de html 5 español?
http://www.foroshtml5.com
saludines
Yo también opino que el flash morirá, no olvidemos que el sentido de la web es llegar al máximo de gente posible.
Os dejo una web española de HTML5 interesante:
http://www.foroshtml5.com
un saludo!
Muy bueno el tutorial, esta claro que el HTML5 es el futuro.
hola, tengo una terrible duda, estoy usando la etiqueta video, y de manera local me funciona a la perfeccion el problema viene cuando subo mi sitio a la web, estoy subiendo toda la carpeta que contiene el index.html y mis videos un mp4 y un ogv, repito cuando lo hago en mi maquina todo funciona a la percccion el problema es cuando ya está en el server, paraciera como si no lo encontrara, alguien me puede ayudar ya intente pasarle el src de varias formas, solo poniendo el nombre del video.mp4, con toda la url hasta el video, inclusive ya intenté meter mis videos en una carpeta y solo agregué el nombre de la carpeta al src, pero no funciona