HTML 5… el futuro, ahora

Para los que no esten muy enterados ya existe una nueva verisón en el tema de HTML, ese lenguaje que todos usamos en la web y que se ha vuelto parte de la vida de la mayoría, incluso en SharePoint lo encontramos como base; la versión 5 de HTML sigue estando en desarrollo pero ya existe la intensión de muchos de utilizarlo e incluso existen navegadores como el nuevo FireFox 3.5 que ya lo soportan, por lo que es importante comenzar a conocerlo y saber vivir con él.

La primera de las novedades que podemos encontrar es en el tema de estructuración de la información, un apartado que nos interesa mucho en SharePoint, vale más una imagen que mil palabras:

Se les hace conocido esto?… así es, cuantas veces no hemos visto el primer escenario en SharePoint, utilizando un id para el header, uno para el nav, otro para el footer, otro para el content… ahora todo es más sencillo, dejaremos de abusar del div y tendremos más elementos con los cuales jugar.

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

Otro tema que tuvo mejoras es la parte de formularios, el elemento input ha sido ampliado y ahora permite todos estos tipos de datos:

  • datetime, datetime-local, date, month, week, time
  • number
  • range
  • email
  • url
  • search
  • color

Estas nuevas opciones son útiles para las interfaces ya que con ello se puede discriminar el tipo de controles que se le ofrecerán al usuario dependiendo del tipo de dato.

Algo de lo que más esta resonando en esta nueva versión, es el tema de audio y video, ya que ahora es posible tener contenido de este tipo sin la necesidad de plugins adicionales, como suele pasar con Flash, bastara con especificar el tipo de contenido con llamadas como <audio> o <video>. Para los contenidos multimedia actuales, que requieren de plugins como el de flash, tendremos embed, con lo que se le da un estandar definitivo a esos temas. Encontramos una curiosidad que a mi me llamo mucho la atención, ya que conozco un poco de Silverlight y al oir el nuevo elemento canvas, me genera una relación involuntaria, con él ahora podremos generar gráficos, permitiendo dibujar elementos.

Otros elementos que encontramos son:

  • 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. Tiene más sentido si lo unimos con…
  • 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. Será útil sobre todo si se quiere trabajar con aplicaciones que necesiten de bastantes datos a la vez en el lado del cliente.

Pasando a otro tema, algo en lo que se basa mucho esta nueva versión de HTML es que la parte de diseño se tiene que trabajar en hojas de estilos, se trata de obligar a usar todo el tema de presentación de la información en CSS y limpiar el código de esta “basura”, es por ello que no nos vamos a econtrar muchas cosas que antes usabamos, o más bien abusabamos, como son elementos como: <center>, <font>, <strike>, <big>, etc… ni ninguno de los atributos conocidos: <background>, <bgcolor>, <align>, <border> y un largisimo etcétera. Cabe mencionar que style ahora es un atributo universal y se podrá usar en todo elemento.

Otros de los que desaparecerán son los frames, ya que ahora todo mundo usa iframes; applet dejara su lugar para que object quede como el estandar. En fin existen varios elementos obsoletos que ya no tienen razón de ser y se iran.

Como ven los cambios son fuertes, ahora bien y SharePoint que dice, pues tal vez a SharePoint 2007 ya no le toque mucho pero por lo menos para la próxima versión del producto, SharePoint 2010, habrá que tener muy en cuenta todo esto, ojo señores diseñadores, desarrolladores y hasta ITPros, que a veces nos toca meterle mano al código.

Esta información fue obtenida de la siguiente ruta: http://www.anexom.es/tecnologia/diseno-web/las-novedades-de-html5-i/, ya saben que a mi no me gusta andarme pirateando trabajo ajeno, es una excelente guía del nuevo HTML5, se los recomiendo. De hecho la guía completa consta de cuatro partes:

Saludos;

Vlad


Technorati : , , ,
Del.icio.us : , , ,
Zooomr : , , ,
Flickr : , , ,

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s