Lo último del código HTML 5: Hoja de trucos

El Diseño de sitios web puede ser una selva a veces, ya que, con el tiempo, el número de idiomas a nuestra disposición se ha vuelto mucho más grande. Cuando las cosas eran nuevas y en el Internet sólo había un par de millones de sitios web (si usted podría incluso llamarlo así comparándolo con las experiencias de hoy en los medios de comunicación), el HTML es el único idioma que usted necesita dominar con el fin de poner un sitio de texto para mostrar a ti mismo. Bueno, era una cosa mucho más simple en ese entonces, pero desde entonces, la cantidad de lenguas de uso ha crecido a lo que le llevará alrededor de una biblioteca para poder aprender. Así que uno debe elegir si quiere estar seguro de agarrar todas las funciones del núcleo más internas de la Internet. Eso es, por supuesto, una cuestión de opinión y de gusto, pero el HTML es siempre un deber al poner algo en línea.

Con el lanzamiento del HTML 5, las cosas empezaron a complicarse aún más. Hubo de repente mucho más que aprender y dominar. Después de todo, todos los desarrolladores y diseñadores quieren estar en la vanguardia de las cosas, y se esperan para dominar las nuevas características.

TECHKING recientemente ha diseñado y compartido una verdaderamente impresionante hoja de trucos para el HTML 5. Le muestra el antiguo, el actual y las nuevas características del HTML. Si te has preguntado alguna vez acerca de cualquier cosa, puede que te interese mirar esta infografía, en vez de tener que mirar a través de un millar de páginas en los libros donde tratas de encontrar lo que necesitas. Es perfecto para el diseñador de hoy en día (sí, estoy un poco retro ... ¡no lo siento!). Para descargar e imprimir una versión más grande de esta infografía, sólo tiene que ir al sitio de TECHKING.

HTML 5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Algunos de ellos son técnicamente similares a las etiquetas "div" y "span", pero tienen un significado semántico, como por ejemplo "nav" (bloque de navegación del sitio web) y "footer". Otros elementos proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los elementos "audio" y "video".

Mejoras en el elemento "canvas", capaz de renderizar en algunos navegadores elementos 3D.
Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo elementos puramente de presentación, como "font" y "center", cuyos efectos son manejados por el CSS. También hay un renovado enfasis en la importancia del scripting DOM para el comportamiento de la web.

Diferencias entre HTML5 y HTML4/XHTML

 

En amarillo aquellas etiquetas introducidas en esta nueva versión, en azul las etiquetas que han sido cambiadas todo o en parte y en gris las etiquetas eliminadas de esta versión. Si bien en la práctica los navegadores no lo están teniendo en cuenta para evitar perder cuota de mercado.

Novedades

• Incorpora etiquetas (canvas 2D y 3D, audio, video) con codecs para mostrar los contenidos multimedia. Actualmente hay una lucha entre imponer codecs gratuitos (WebM + VP8) o de pago (H.264/MPEG-4 AVC).

• Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, menu y Command. Permiten generar tablas dinámicas que pueden filtrar, ordenar y ocultar contenido en cliente.

• Mejoras en los formularios. Nuevos tipos de datos (eMail, number, url, datetime …) y facilidades para validar el contenido sin Javascript.

• Visores: MathML (fórmulas matemáticas) y SVG (gráficos vectoriales). En general se deja abierto a poder interpretar otros lenguajes XML.

• Drag & Drop. Nueva funcionalidad para arrastrar objetos como imágenes.

Web Semántica

• Añade etiquetas para manejar la Web Semántica (Web 3.0): header, footer, article, nav, time (fecha del contenido), link rel=‘’ (tipo de contenido que se enlaza).

• Estas etiquetas permiten describir cual es el significado del contenido. Por ejemplo su importancia, su finalidad y las relaciones que existen. No tienen especial impacto en la visualización, se orientan a buscadores.

• Los buscadores podrán indexar e interpretar esta meta información para no buscar simplemente apariciones de palabras en el texto de la página.

• Permite incorporar a las páginas ficheros RDF / OWL (con meta información) para describir relaciones entre los términos utilizados.

Nuevas APIs y Javascript

• API para hacer Drag & Drop. Mediante eventos.
• API para trabajar Off-Line. Permite descargar todos los contenidos necesarios y trabajar en local.
• API de Geoposicionamiento para dispositivos que lo soporten.
• API Storage. Facilidad de almacenamiento persistente en local, con bases de datos (basadas en SQL Lite) o con almacenamiento de objetos por aplicación o por dominio Web (Local Storage y Global Storage). Se dispone de una Base de datos con la posibilidad de hacer consultas SQL.
• WebSockets. API de comunicación bidireccional entre páginas. Similar a los Sockets de C.
• WebWorkers. Hilos de ejecución en paralelo.

• ESTÁNDAR FUTURO. System Information API. Acceso al hardware a bajo nivel: red, ficheros, CPU, Memoria, puertos USB, cámaras, micrófonos … muy interesante pero con numerosas salvedades de seguridad.

Espero que este artículo haya sido de su interés. Es algo técnico, pero por los comentarios he tenido que extenderlo. Muchas gracias.