TODO SOBRE HTML5: junio 2012

Introducción a HTML5

HTML5 (HyperText Markup Language, versión 5) es la version mas madura del lenguaje de programación conocido como HTML en el que se emplean corchetes (< >) para su contenido y que pretende solucionar los problemas con los que los desarrolladores web se encuentran.

Una de la grandes novedades de esta nueva version de HTML es que incluye soporte para algunos formatos de audio y video con lo que pretende sustituir el Flash, que por mucho tiempo a sido lider en animación y aplicaciones animadas.

Una característica de html5 es que facilita la creacion de sitios web aportando por defecto algunas etiquetas que facilitan la separación de la información que mejora la estructura, lista para usar CSS sin HashID (#).

Otro elemento novedoso de html5 es: La Geolocalización

La geolocalización es la forma de suponer donde te encuentras en el mundo y si quieres, compartir información con gente de confianza. Existen muchas maneras de descubrir donde te encuentras, por tu dirección IP, la conexión de red inalámbrica, la torre de telefonía móvil por la que habla tu teléfono móvil (celular), o GPS específicos que reciben las coordenadas de longitud y la latitud de satélites que están ene el cielo.

Afecta a mi web los nuevos cambios?

No es necesario que cambies nada de tu pag.web ya que HTML4 y HTML5 son 100% compatibles entre sí. Todo el código que tienes en HTML normal seguirá funcionando sin problemas en HTML5 y si tienes tu propio servidor web mucho menos tendrías que preocuparte por nada, pero si quieres asegurarte de que tu pag.web es totalmente compatible revisa su código para verificar que no emplea etiquetas que se hayan modificado o reemplazado en el nuevo estándar y si quieres empezar a usar HTML5 lo único que tienes que hacer es colocar !DOCTYPE html al principio de cada pag.web y te permitirá usar todas las habilidades de HTML5.

Etiquetas Nuevas que mejoran la estructura:

NOTA:Todas son compatibles con Internet Explorer 9, Firefox, Opera, Chrome y Safari. Menos con Internet Explorer 8 y versiones anteriores.

*header: Especifica un encabezado de un documento o sección.Esta etiqueta no pueden ser colocados dentro de un footer, dirección u otro elemento header.

*footer: Define un pie de página de un documento o sección. Un pie de página suele contener el autor del documento, información del copyright, los enlaces a las condiciones de uso, información de contacto, etc.

*nav: Esta etiqueta define una sección de vínculos de navegación.

*article: Delimita un contenido independiente en un documento.Por ej. comentarios, noticias, blog mensajes, etc.

*section: Define secciones de un documento. Tal como capítulos, encabezados, pies de página, o cualquier otra sección del documento.

*aside: define un contenido aparte del contenido principal. El contenido de lado debe estar relacionada con el contenido circundante.

Estructura de HTML5

Otras elementos Importantes

NOTA: Por Ahora no todos son compatibles con todos los navegadores

*audio: define el sonido, como la música u otras pistas de audio.Puede usar múltiples formatos, en especial mp3, pero también depende del navegador.

video: Inserta vídeo sin necesidad de plugins como el flash. Cualquier texto entre la etiqueta video y / video mostrarán en los navegadores que no soportan vídeo.

*canvas: se utiliza para dibujar los gráficos, sobre la marcha, a través de secuencias de comandos (normalmente JavaScript). Esta etiqueta es sólo un contenedor para los gráficos, debe utilizar un script para llamar la realidad de los gráficos.

embed: sirve para contenido incrustado pero no nativo, sino ejecutado por plugins como el de Flash.

hgroup: se utiliza para elementos del grupo del título. El elemento hgroup se utiliza para agrupar un conjunto de h1 a los elementos h6, cuando un título tiene varios niveles de las subpartidas.

*mark: indicará un texto resaltado. Utilícela si desea resaltar partes del texto.

*time: indica una fecha u tiempo(24 horas).No es compatible con ninguno de los navegadores más importantes.

*meter: representa un valor numérico. Compatible actualmente en Opera y Chrome.

*progress, indica el estado de una tarea, lo que es una barra de progreso. Compatible con Chrome, Firefox y Opera.

*output:representa el resultado de un cálculo (como uno realizado por un script).

*bdi: Aísla una parte del texto que pueda ser formateada en una dirección distinta de otro texto fuera de ella.

*command: Define un comando (un botón de radio, una casilla de verificación o un botón de comando) que el usuario puede invocar.

*datalist: Especifica una lista de opciones predefinidas para un elemento input.se utiliza para proporcionar un "autocompletar" en función de elementos input. Los usuarios podrán ver una lista desplegable de opciones predefinidas.

*datagrid: Muy útil en ajax, representa datos de manera interactiva y permite trabajar dinámicamente con información y cambiar la página respecto a esa información.

*autofoccus: hace exactamente lo que suena, en cuanto la web se comienza a cargar, mueve el cursor y así la atención del usuario a un campo input particular. Por ahora Autofocus solo lo soportan Safari, Chrome y Opera. Firefox e IE, lo ignorarán.