comparte el articulo 

Fundamentos de HTML5

Actualizado el 17/08/2011 < > 1 Comentario

Resumen: En este artículo explicamos las bases y fundamentos de HTML5, enumeramos cada uno de los cambios más relevantes de esta nueva versión del lenguaje de marcado

Si bien HTML5 es un lenguaje que se ha venido desarrollando durante más de seis años, su aplicación en sistemas y verdadera popularización vino después de su triunfo sobre XHTML2 para convertirse en el nuevo estándar de lenguaje de marcado para el desarrollo web.

Debido a su relativa reciente incorporación al mundo del desarrollo, son pocos los que conocen a ciencia exacta las propiedades completas de este nuevo lenguaje. Es por ello que en este artículo nos hemos decidido a mencionar las principales características de este lenguaje de marcado, para así establecer las bases necesarias para un correcto desarrollo.

Son varios los nuevos elementos que incluye este lenguaje, los cuales en la actualidad son compatibles con todos los navegadores populares en sus versiones más modernas. Firefox, Chrome, Safari y Opera han dado soporte a este lenguaje desde tiempo atrás, mientras que Internet Explorer dio soporte desde septiembre de 2010 con la versión beta de IE9.

Estos elementos traen consigo funcionalidades extraordinarias que antes se creían imposibles de realizar desde el lado del usuario, cambios que van desde almacenaje, uso de multimedia, animaciones e incluso cambios de estructura.

HTML 5 y el contenido multimedia

HTML5 presenta dos nuevas etiquetas en este rubro cuyos nombres son “audio” y “video”, su función es permitirnos añadir sonido y vídeos a una página web, sin tener que usar largos códigos “embed”, como comúnmente se hacía en la actualidad para incluir videos en flash o precargados en un servidor.

La etiqueta “video” trae consigo varios atributos, entre los cuales encontramos “control”, “autoplay”, “src”, “height”, “width”, “loop”, “preload” y “audio”, lo que nos da la oportunidad de modificar el reproductor a nuestro gusto sin necesidad de recurrir a CSS o Javascript. Además de esto, “video” nos permite la adición de texto entre la apertura y cierre de la etiqueta.

Por su parte, la etiqueta “audio” funciona de manera similar para el contenido de sonido y tiene cinco atributos por su propia cuenta, “autoplay”, “controls”, “loop”, “preload” y “src”.

Estructura del sitio con HTML 5

Con nuevas etiquetas como “section”, “footer”, “header”, “nav”, “article”, “aside” y “figure”, HTML5 establece nuevos niveles de estructuración. Estas etiquetas se encargan de definir las distintas secciones de una página web, y muchas de ellas vienen con su propia posición en la página definida.

Formularios con HTML 5

En lo que se refiere a formularios, la etiqueta “input” sigue siendo la base de todo, pero con la diferencia de que ahora cuenta con nuevas maneras de declarar su tipo, lo que agrega flexibilidad y facilita la validación.

En total son veintitrés los tipos de “input” que podemos utilizar en un formulario, entre los cuales podemos encontrar los tipos “date,” “datetime,” “datetimelocal”, “time”, “month”, “week”, “url”, “range”, “number” y “email” que fueron incluidos con esta versión. Con esto no habrá necesidad de declarar un input tipo “text”, condicionar los caracteres que recibe con Javascript y después validar del lado servidor el valor que realmente estamos esperando, basta con definir bien el tipo y el propio navegador se encargará de procesar correctamente los datos.

Elementos inline

Las etiquetas “meter”, “time”, “mark” y “progress” fueron incluidas para ser usadas en representaciones de figuras, fechas, hora, listas o barras de progreso, y asi lograr una mejor estructura semántica. Generalmente se utilizan para envolver contenido similar, y como su propio nombre lo dice cada una de ellas tiene un tipo de contenido relacionado.

Gráficas

Quizás uno de los mejores proyectos que se presenta HTML5 es la etiqueta “canvas”, considerados por mucho el bebé consentido de este nuevo estándar debido a su potencial y gran capacidad de uso.

La etiqueta “canvas” nos permite mostrar gráficos mediante código plano, a igual que nos da la oportunidad de definir una altura y anchura para el área de trazo, permite el uso de eventos HTML5 y al momento de combinarlo con Javascript se puede crear magia pura.

Su accedemos a esta etiqueta a través de las funciones de trazo de Javascript, nos sirve como superficie de dibujo en 2D para la presentación de gráficos, juegos, animaciones y composiciones de imágenes.

Elementos interactivos

Para esta función se presentan etiquetas como “datagrid”, la cual puede ser utilizada para proporcionar un conjunto interactivo de datos. También contamos con la etiqueta “details” nos permite proporcionar consejos y otra información útil.

La etiqueta “menu”, que previamente había sido declarada obsoleta, vuelve con una nueva funcionalidad. Cuenta con dos atributos, los cuales son “label” y “type”, y se utiliza para definir las listas de menú con elementos de mando.

Charset y DOCTYPE HTML5

El charset del sitio es definido con una etiqueta bastante fácil de recordar, meta charset=”UTF-8″, mientras que el nuevo DOCTYPE se define de una manera mucho más sencilla, simplemente indicando que nuestra página es de tipo HTML, !doctype html.

Cambios en los atributos de elementos ya existentes en HMTL 5

HTML5 agregó algunos atributos nuevos a los elementos que ya existían en la versión anterior del lenguaje. Por ejemplo, los elementos de tipo anclaje como “a” y los elementos de tipo “area” han recibido un nuevo atributo que lleva por nombre “media”, el elemento “base” ahora tiene un atributo “target” y el elemento “meta” tiene a “charset” como atributo.

Por otra parte hay ciertos atributos que se deprecaron, tal es el caso del atributo “language” de la etiqueta “script”, “border” de la etiqueta “inc”, “name” de los tipo anclaje “a” y “type” como atributo de “style” y “script”,

Elementos deprecados en HTML 5

Existen varios elementos que quedaro al margen de esta nueva versión, etiquetas tradicionales como “font” pasaron a mejor vida, acompletan la lista las etiquetas “acronym” “applet”, “basefont”, “big”, “center”, “dir”, “font”, “frame”, “frameset”, “isindex”, “noframes”, “noscript”, “s”, “strike”, “tt” y “u”.

Publicado el 17/08/2011, última actualización 17/08/2011.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño Paginas Web

Añadir Comentario (Subir al texto)

1 Comentario

  1. Antonio

    Me gusta porque se explica de una forma muy clara.

    Domingo, 3 de marzo 2013

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras