Introducción al HTML 5

DEFINICION

HTML 5 (HyperText Markup Language, versión 5) es la quinta revisión mayor del lenguaje básico de la World Wide Web, HTML. HTML 5 especifica dos variantes de sintaxis para HTML: un «clásico» HTML (text/html), la variante conocida como  HTML5  y una variante XHTMLconocida como sintaxis XHTML5 que deberá ser servida como XML (XHTML) (application/xhtml+xml).1 Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.

CARACTERISTICAS

Hay que aclarar que HTML5 sigue en borrador y lo seguirá estando durante algunos años más. El enfoque general ha cambiado bastante respecto a versiones anteriores de HTML, añadiendo semántica y accesibilidad implícitas, especificando cada detalle y borrando cualquier ambigüedad. También se tiene en cuenta que muchas páginas web actuales son dinámicas, pareciéndose más a aplicaciones que a documentos. Algo básico es que HTML5 está definido en base al DOM (la representación interna de una web con la que trabaja un navegador), dejando de lado la representación "real", definiendo a la vez un estándar HTML y XHTML.

MEJOR ESCTRUCTURA

En HTML5 hay varios elementos que sirven para estructurar mejor una página web, estableciendo qué es cada sección, y reemplazando en muchas ocasiones a div.

Estos son los elementos:

• section representa una sección "general" dentro de un documento o aplicación, como un capítulo de un libro. Puede contener subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor toda la página.

• article representa un contenido independiente en un documento, el caso más claro son las entradas de un blog o las noticias de un periódico online. Así, dentro de la portada podremos tener varios artículos demarcados semánticamente, por lo que una herramienta puede extraerlos fácilmente.

• aside representa un contenido que está muy poco relacionado con el resto de la página, como una barra lateral. Esencial para delimitar el contenido "importante" del contenido "de apoyo", haciendo más caso al primero que al segundo.

• header representa la cabecera de una sección, y es de suponer que se le dé más importancia que al resto, sobre todo si la sección es un artículo.

• footer representa el pié de una sección, con información acerca de la página/sección que poco tiene que ver con el contenido de la página, como el autor, el copyright o el año.

• nav representa una sección dedicada a la navegación entre el sitio, como la típica barra superior de los periódicos.

MEJORES FORMULARIOS

El elemento input ha sido ampliado y ahora permite todos estos tipos de datos:

• datetime, datetime-local, date, month, week, time, para que indicar una fecha/hora.

• number para que el usuario indique un número.

• range para indicar un rango entre dos números.

• email para indicar un correo electrónico.

• url para indicar una dirección web.

• search para indicar una búsqueda.

• color para indicar un color.

ELEMENTOS IMPORTANTES

• audio y video sirven para incrustar un contenido multimedia de sonido o de vídeo, respectivamente. Sin duda uno de los añadidos más interesantes, ya que permite reproducir/controlar vídeos y audios sin necesidad de plugins como el de Flash.

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

• canvas es un elemento complejo que permite generar gráficos, dibujando elementos dentro de él.

MAS ELEMENTOS

• dialog se plantea para escribir conversaciones, por ejemplo para transcripciones de chat.

• figure se plantea para asociar un contenido multimedia (una foto, un vídeo, etc) a un título o leyenda.

• mark representa un texto resaltado, por ejemplo para resaltar una búsqueda.

• meter representa una medida, como el número de KB.

• progress representa el estado de una tarea, y se puede usar por ejemplo al subir un documento o al realizar varias tareas pesadas. Esto permitirá barras de tareas personalizadas y potentes.

• time representa una fecha o una hora.

• command representa un comando que el usuario puede ejecutar en su navegador.

• output representa una salida de un programa, probablemente ejecutado directamente en el navegador, como una calculadora.

• datagrid representa datos de manera interactiva y permite trabajar dinámicamente con información y cambiar la página respecto a esa información.

ETIQUETAS QUE SE VAN

El listado de etiquetas que caen en desuso -porque ya existe una forma de hacer lo mismo con CSS- es el siguiente:

• FONT

• CENTER

• STRIKE

• BASEFONT

• BIG

• STRIKE

• TT

• U

El HTML 5 elimina completamente el uso de frames (marcos) por razones de usabilidad y accesibilidad. No ocurre lo mismo con el IFRAME que seguirá siendo válido. Por lo tanto, las etiquetas vinculadas con los frames que salen son:

• FRAME

• FAMESET

• NOFRAMES

Para terminar, encontramos etiquetas que ya no se usan porque creaban confusión o hacían lo mismo que otras ya existes. Estas son:

• ACRONYM

• APPLET

• ISINDEX

• DIR

Atributos eliminados:

ETIQUETAS NUEVAS

• SECTION

• ARTICLE

• ASIDE

• HGROUP

• HEADER

• FOOTER

• NAV

• DIALOG

• FIGURE

• VIDEO

• EMBED

• MARK

• PROGRESS

• METER

• TIME

• RUBY (RT y RP)

• CANVAS

• COMMAND

• DETAILS

• DATALIST

• KEYGEN

• OUTPUT

NOVEDADES

1) El elemento "lienzo" o "Canvas". Este elemento permitirá el renderizado de imágenes y gráficos sin ningún proceso intermedio. Al no depender de nada ni nadie para presentar esta clase de flexibilidad en una página web, las posibilidades tanto de diseño como de interactividad de los usuarios con la página que visitan es sencillamente enorme.

2) Caché para aplicaciones. Aplicaciones web enteras pueden ser guardadas y utilizadas de forma local cuando no hay una conexión a Internet, al igual que toda la información que haya sido guardada o generada a través de dichas aplicaciones.

3) Localización geográfica. HTML 5 tendrá la capacidad de determinar con un alto grado de precisión la ubicación geográfica del usuario. Esto se haría principalmente en páginas que, a partir de la posición actual del usuario, pueden ofrecer diferentes clases de servicios relacionados con el área en cuestión

4) "Operarios Web". habilitan la posibilidad de realizar procesamiento paralelo en segundo plano, mientras que la página web mantiene su rendimiento intacto. Las páginas web siempre han demostrado cierta tendencia lineal a la hora de cargarse, pero con HTML 5, aquellas aplicaciones y sitios que dependan de una gran cantidad de código, podrán ejecutarse de forma más eficiente, y sin afectar el rendimiento del navegador.

5) El elemento "Video". Sin lugar a dudas, la mejora más importante que incorpora HTML 5, y la que más revuelo está provocando entre los medios. El elemento de vídeo incorporado en HTML 5 es la forma definitiva de rebelión, ya que se pueden reproducir vídeos en Internet y embeberlos en páginas sin la necesidad de un plugin.

DIFERENCIAS ENTRE HTML4 Y HTML5

• 4: indica si el elemento está definido en HTML 4.01

• 5: indica si el elemento está definido en HTML

PRESENTACION EN HTML 5

FUENTE: http://apirocks.com/html5/html5.html#slide1

Algunas capturas interesantes (traducido al español):

BIBLIOGRAFIA

http://www.desarrolloweb.com/actualidad/html-4-5-diferencias-1465.html

http://daniel.pkstadium.com/?p=90

http://www.desarrolloweb.com/articulos/que-es-html5.html

http://apirocks.com/html5/html5.html#slide1

http://es.wikipedia.org/wiki/HTML_5

http://www.anexom.es/tecnologia/diseno-web/las-novedades-de-html5-i/

http://www.thuer.com.ar/blog/2009/html-5-para-disenadores-web

http://www.neoteo.com/html-5-y-el-futuro-de-internet-16399.neo

http://www.hostper.com/disenowebperu/2010/04/13/la-nueva-version-html-5/

 

 

Autor:

Ing. Tito Fernando Ale Nieto

TACNA – PERU

2010