empezando con html 5. Tutoriales, ejemplos y opiniones

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:

  1. 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

    &lt;canvas id=&quot;tutorial&quot; width=&quot;150&quot; height=&quot;150&quot;&gt;&lt;/canvas&gt;
    

    Función para verificar si el navegador soporta la etiqueta

    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
    }
    

    Ver ejemplo de canvas tag html5

  2. Reproducción de vídeo
    
    &lt;video id=&quot;video_with_controls&quot; width=&quot;320&quot; controls autobuffer&gt;
     &lt;source src=&quot;video.webm&quot; type=&quot;video/vp8&quot; /&gt;
     &lt;source src=&quot;video.mp4&quot; type=&quot;video/mp4&quot; /&gt;
     &lt;source src=&quot;video.ogv&quot; type=&quot;video/ogg&quot; /&gt;
     Tu navegador no soporta el video tag de html5
     &lt;/video&gt;
    

    Ver ejemplo de video tag html5

  3. Aplicaciones offline
  4. Drag-and-drop
  5. Gestión del historial del navegador
  6. Geolocalización
  7. 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

Tags de búsquedas:

html5 tutorial,html5 tutorial español,tutoriales html5,manual html5,html5 tutoriales,html 5 tutorial español,ejemplos html5,html5 ejemplos,ejemplos de codigo de html5,tutorial html5 español,manual html5 pdf,tutoriales html,tutoriales html 5,manual html5 español,ejemplos html

Noticias relacionadas »

11 comentarios en empezando con html 5. Tutoriales, ejemplos y opiniones

  1. Pingback: 10 Herramientas online para ayudar y crear código HTML5

  2. dranix7
    / Responder

    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

  3. / Responder

    Muy bueno el tutorial, esta claro que el HTML5 es el futuro.

  4. Pingback: 10 Herramientas online para ayudar y crear código HTML5

  5. Miguel
    / Responder

    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!

  6. Maria
    / Responder

    Muy bueno, habéis visto el foro de html 5 español?

    http://www.foroshtml5.com

    saludines

  7. / Responder

    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.

  8. Rimboe
    / Responder

    Hola muy buen tutorial, si queréis aprender HTML5 podéis pasarlos por

    http://www.foroshtml5.com

    Un saludo!!

  9. Pingback: Manuales HTML5 | chasanachanchan

  10. / Responder

    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.

    • Pedro Ventura
      / Responder

      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.”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Comparte este artículo! »

Sígueme en Facebook »

  • MRMOOT (4 días)
    Buenas tardes Pedro, estoy intentando aplicar tu procedimiento y me…
  • Luis (2 meses)
    Hola Pedro, muchas gracias por transmitirnos tu conocimiento. Te comento…
  • Senado.es: Vuelta al año 2000 - Yorokobu (2 meses)
    […] desarrollador Pedro Ventura explica en su blog cómo alternativas…
  • Pedro Ventura (2 meses)
    Hola Edwer La manera de como hacerlo viene explicada en…
  • Rodrigo (2 meses)
    Tengo una duda, como hago para no repetir el tweet?…
  • Jorge (2 meses)
    Tambien se puede vaciar un archivo con "true > archivo",…

Suscríbete al newsletter »

Proporciona tu correo electrónico a continuación y recibe las últimas noticias! Funciona con Feedburner de Google

Archivo »

Leer entrada anterior
cakephp funcion para bloquear ips y evitar spam

En este post voy a explicar como hacer una función que bloquea ips de robots o simples usuarios spammers. Para...

Cerrar