Foro de elhacker.net

Traducción y adaptación de: HTML 5 for Beginners. Use it now, its easy! (http://"http://www.whatcreative.co.uk/blog/tutorials/html5-for-beginners-use-it-now-its-easy/")

 Hay un montón de artículos sobre HTML5, especialmente desde que llegó  Google Wave (porque es la primera app reconocida en ese lenguaje, pero  toda la información que necesitas para poder empezar a usarlo ahora  mismo es algo más complicado de encontrar. En este artículo  vamos a simplificar un poco las cosas.
  
   
  
    Estoy seguro de que ya lo sabeis, Internet Explorer no soporta HTML5.  Sorpresa, sorpresa!. Así que lo primero que aprenderemos a hacer será:  
 Hackear IE usando javascript

   
 Hay un buen sitio llamado HTML5Doctor (http://"http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2") que nos da la solución  perfecta. Se trata de un script en javascript que fuerza a IE a 'ver'  los siguientes tags de HTML5:


  Se puede descargar desde aquí (http://"http://remysharp.com/downloads/html5.js")
 Obviamente usar javascript no es la mejor forma de fijar el problema,  ya que si lo desactivamos la página dejará de funcionar. Lo único que  podemos hacer es asegurarnos que con JS desactivado la página funcionará  correctamente.
 HTML5 también tiene problemas con Firefox 2 y Camino 1 ya que estos  dos navegadores usan Gecko para renderizar las páginas. Este problema es  más difícil de parchear, pero afortunadamente esos dos navegadores  tienen solo una pequeña parte del mercado. Si aún así no quieres ignorar  esas versiones, HTML5doctor explica como parchearlos.
 Ahora los navegadores más reconocidos del mercado reconocerán  nuestros códigos (IE, Safari, Chrome, Firefox, Opera)
 Empezando a usar HTML5

  Uno de los principales beneficios de HTML5 es que podemos deshacernos  en gran parte del código duplicado. No hay que seguir definiendo todo  por una id o una clase porque los elementos por defecto ya están  construidos.
 Entre otros elementos, para tus cabeceras puedes usar <header>,  para la navegación <nav>, para el pié, adivina..., <foot>.  También, con el tag <section> puedes dividir tu contenido usando  <article>. Con esos tags podemos lograr que los navegadores capten  la relevancia del contenido de una forma más simple, eso nos ayudará  con el SEO y, por supuesto, significa menos tiempo codeando. De todas  formas podemos seguir usando <div id="header"> pero las nuevas  etiquetas tienen un mejor y más simple uso
 Hay otros dos grandes avances en HTML5 con el que se hará la vida más  fácil a los desarrolladores. La primera es:
 El tag <video>

   
 Para usar el tag <video> tenemos que hacerlo así:
 
La línea entre <video> y </video> es para aquellos  navegadores que no usen HTML5.
 Un problema con este tag es que Apple decidió no dar soporte al  formato abierto OGG en Safari. Así que para dar soporte a todos los  navegadores tendremos que poner 2 sources
 
El segundo avance es:
 Validación de formularios

   
 Desafortunadamente la mayoría de navegadores aún no dan soporte. De  echo, estoy bastante seguro que Opera es el único que da soporte de  momento. De todas formas he decidido incluirlo porque creo que será una  característica brillante...
 Con HTML5 seremos capaces de validar la información de un input  simplemente indicandole que tipo de dato esperamos.
 

 También podemos usar el autofocus, de esta forma:
 

 Que simple es!

Mmm la verdad es que no pinta nada mal, habrá que empezar a probar cosillas con HTML5 :D

Gracias por el aporte!

Otra cosa buena es que no hace falta, para valores verdaderos colocar el true, como en tu ejemplo: , esto hace que el código quede más legible.

Y bueno, ahora si todo sigue así, el estándar será mp4 :(

Esperamos ahora más sobre el tema!

Interesante  ::)

si que hay inputs interesantes :D como type="range" muy bueno, aqui encontre una lista para aportar con el mini tuto

<input type="search"> para cajas de búsqueda.
<input type="number"> para adicionar o restar números mediante botones.
<input type="range"> para seleccionar un valor entre dos valores predeterminados.
<input type="color"> seleccionar un color.
<input type="tel"> números telefónicos.
<input type="url"> direcciones web.
<input type="email"> direcciones de email.
<input type="date"> para seleccionar un día en un calendario.
<input type="month"> para meses.
<input type="week"> para semanas.
<input type="time"> para fechas.
<input type="datetime"> para una fecha exacta, absoluta y tiempo.
<input type="datetime-local"> para fechas locales y frecuencia.

Saludos y gracias, muy bueno

EDITO: Encontre otro mas, placehover que hace la marca de agua similar a la de google

ejemplo:

<form>
  <input placeholder="Buscar en elhacker.net">
  <input type="submit" value="Buscar">
</form>

Lamentablemente lo probe con opera y no funciona, solo funciono con Chrome :¬¬

Aqui algo interesante que encontre tambien.

Cuando utilizan la etiqueta <article> hablan de un contenido especifico osea:

<article>
    Este es un post donde se habla de html5
</article>

Ahora si necesitamos poner contenido relacionado, podemos anidar "article" pòr ejemplo

<article>
    Este es un post donde se habla de html5
       <article>html5 aun no esta en funcionamiento</article>
       <article>Internet explorer aun no soporta html5</article>
</article>

Si se fijan todo tiene relacion con el articulo pero separamos lo mas importante de las observaciones (por decirlo de algun modo :xD)

Muy Buen tuto!!! :D


WTF! Se sigue usando la version 2??? :| (el otro no digo nada porque no lo conozco jeje)

por lo visto html5 tiene una conexion en cuanto a las etiquetas en xml.. <xD> para crear cualquiera que se ocurra xD Luego em lo mirare de mas cerca.

Interesate las validaciones de los campos del form  :D
pero prefiero seguir usando js y php para validar el campo email, me eh vuelto casi perfeccionista al validar un mail pero el html5 da como valido el correo .@-.-  :xD
pense que seria facil de descargar un video en las etiquetas html5 pero youtube hace magia para que no se pueda lograr  :¬¬ http://www.youtube.com/html5

Sin duda validar los forms desde html es una maravilla... también lo seria poder utilizar expresiones regulares.

en teoria se puede, por ejemplo algo como esto:

<input id="form11" name="part" pattern="[0-9][A-Z]{3}" placeholder="Digit followed by three uppercase letters.">
<code>[0-9][A-Z]{3}</code>

fijate en [pattern="[0-9][A-Z]{3}"] lo malo es que seria tan seguro como proteger un formulario con javascript

asi es, es lo que iba a comentar xD que validar datos con html solo serviria para evitar que se recargue la pag.. pero si te quieres saltar la validacion con firebug o similar se va al carajo

ademas no es muy intuitivo porque al menos en chrome, lo unico que hace es poner el puntero en el textbox, han agregado eventos para saber cuales no fueron validados? algo como onload...

Nakp haz un formulario y pone varios inputs distintos, todos con required y un submit al final :) ahí está la gracia, aunque habrá que ver que tanto se pueden personalizar las funciones de cada cual... Html seguirá necesitando js para muchas cosas aunque se pueden evitar algunas intrusivas

ehm... es que ya lo he hecho, simplemente te regresa el puntero al que no fue validado, pero no es muy intuitivo ;)

Como que no? xD que diablos quieres? Que se rellene el campo con lo que estas pensando?

pues si generara un evento podria tratarse con javascript :P campo.notvalid = function(){aparecer algo, por ejemplo} :P