HTML5

¿Que es HTML5 ?

HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. La versión anterior y más usada de HTML, HTML4, carece de características necesarias para la creación de aplicaciones modernas basadas en un navegador. El uso fuerte de Javascript ha ayudado a mejorar esto, gracias a frameworks como jQueryjQuery UISproutcore, entre otros.

HTML5 es capaz de realizar efectos esto sin necesidad de plugins y con una gran compatibilidad entre navegadores.

HTML4 y HTML5 son 100% compatibles entre sí.

Las principales etiquetas HTML5 nuevas no tienen una representación especial en pantalla. Todas se comportan como un <div> o un <span>. Pero cada una tiene un significado semántico superior a un simple div o span.

En el siguiente gráfico hacemos una comparación con respecto a lo que se utilizaba antes y como se utiliza actualmente una estructura en html5.

A continuación una breve descripción del uso de las etiquetas más importantes en HTML5.

<header>

Hacer cosas como <div id=”header”> ya no es muy aconsejable cuando el 99% de los proyectos web tienen una cabecera. <header> está diseñada para reemplazar la necesidad de crear divs sin significado semántico.

<hgroup>

Muchos headers necesitan múltiples títulos, como un blog que tiene un titulo y un tagline explicando el blog. <hgroup> permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar otro h1 en el sitio.
En el HTML actual, sólo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO.

<nav>

Igual que <header>, <nav> está diseñado para que ahí coloques la botonera de navegación principal. Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>.Sólo puedes tener un <nav> por página.

<section>

Define un área de contenido única dentro del sitio. En un blog, sería la zona donde están todos los posts. En un video de youtube, habría un section para el video, uno para los datos del video, otro para la zona de comentarios.

<article>

Define zonas únicas de contenido independiente. En el home de un blog, cada post sería un article. En un post del blog, el post y cada uno de sus comentarios sería un <article>.

<aside>

Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un aside. En un blog, obviamente el aside es la barra lateral de información. En el home de un periódico, puede ser el área de indicadores económicos.

<footer>

Este es el pie de página y todo lo que lo compone.

Atención: div no está muerto :

Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse cuando necesites una caja con objetivos de diseño gráfico o cualquier cosa que no tenga significado semántico. Sólo usa las etiquetas semánticas de HTML5 donde sean necesarias.

Las etiquetas nuevas “importantes” de HTML5

Las etiquetas semánticas, a pesar de ser claves para posicionamiento en buscadores y buen desarrollo web, no son la razón por la que todo el mundo habla de HTML5. Video, audio y animación vectorial están en la lista de prioridades y en la boca de todas las personas que evangelizan su uso. Específicamente, las nuevas etiquetas son:

<video>

Inserta video sin necesidad de plugins. Es muy fácil usarla, pero cada navegador soporta codecs diferentes de video, lo que hace necesario recodificar un video en múltiples codecs.

<audio>

Lo mismo que video, pero sin video. Puede usar múltiples formatos, en especial mp3, pero también depende del navegador.

<input *>

Input ya existía como la etiqueta para insertar cajas de texto y botones. Ahora es más poderosa, con la capacidad de insertar cajas tipo “email” que se autovalidan, calendarios tipo “date”, sliders, números, entre otras.

<canvas>

Un área de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo entero para Javascript.

<svg>

Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo de Flash. Todo basado en el estándar abierto SVG (Scalable Vector Graphics), derivado de XML.

Nuevas capacidades de CSS3

Diseñar en CSS ha sido una mezcla entre risas de victoria y gritos de ira. No sólo por la falta de compatibilidad con IE, sino porque cosas como bordes redondeados en tamaños dinámicos requiere múltiples divs, estilos y cuatro PNGs diferentes (o un sprite) en el mejor de los casos. Ya no más, CSS3 es hermoso y trae para ti opciones que hacen el diseño mucho más fácil.

@font-face

Es la capacidad de usar CUALQUIER FUENTE EN HTML. Sin necesidad de Flash, Cufon, SiFR u otras cosas de hippies. ¿Saben qué otra cosa? Esto funciona perfecto desde Internet Explorer 6 para arriba ¿Y saben qué más? NADIE LO USA.
¿Como funciona? Pilla un archivo de tipo de fuente ttf o otf, mételo aquí fontface.codeandmore.com o aquí www.fontsquirrel.com/fontface, coge los archivos

Luego usando los selectores CSS, asigna un estilo font-family con los atributos ‘BebasNeueRegular’, arial (incluimos arial por si por alguna casualidad no funciona el font-face, la fuente para el elemento asignado sería la arial), esto se quedaría así: font-family: ‘BebasNeueRegular’, arial;.

Podéis ver los navegadores compatibles con @font-face aquí.

Selectores CSS

¿Te ha tocado hacer un diseño donde una lista o tabla tiene algunas líneas o celdas en fondo blanco y los otros en fondo gris? Como una cebra. Antes, la única forma era hacerlo a mano o con un script del lado del server. Ahora, con CSS3, sólo tienes que especificar un color para “odd” y otro para “even” y listo, usando el selector :nth-child(elementos):

Con este CSS haremos que las tablas o listas con la clase cebra asignada salgan todas con la primera linea con fondo blanco, la segunda con fondo gris, la tercera con fondo blanco, la quarta con fondo gris etc…

Igualmente, puedes crear estilos para el primer elemento y otro para el último (:first-child y :last-child respectivamente). O estilos para etiquetas iguales con ciertos atributos diferentes en HTML (elemento[id=”loquesea”] o elemento[id^=”loque”] para seleccionar elementos que tengan el atributo id que empiece con loque). Y esto es muy compatible desde IE8.

Columnas de texto

¿Sabes cómo se hacía antes que varios párrafos de texto se dividiera en columnas con HTML?

No se podía. Ahora sólo requieres un atributo CSS para lograrlo. Y puedes controlar la cantidad de columnas, el espacio entre ellas, lineas de separación, etc.

Opacidad, transparencia, canales alpha, contraste, saturación y brillo

Autodescriptivo. Vuelve lo que quieras transparente u opaco con una instrucción. Imágenes, textos, sombras, bordes, lo que sea. O si quieres convertir una foto en blanco y negro o sepia, lo puedes hacer con sólo CSS.

Animaciones de transición y transformación

Las animaciones que antes lograbas con jQuery o Javascript ahora pueden ser logrados sólo con CSS. Con una ventaja adicional, al hacerlo con CSS, las animaciones vendrán aceleradas por hardware. Mucho más veloces, sobre todo en dispositivos móviles.

Bordes redondeados

Sí. Con una instrucción puedes hacer que cualquier caja tenga bordes redondeados como quieras. Olvídate de crear múltiples divs, cortar pngs y otros temas arcaicos.

Reflecciones, gradientes y sombras

Si no has superado la web 2.0, puedes poner reflecciones a cualquier elemento HTML. Pero lo interesante es crear gradientes para fondos y sombras para cajas o texto, todo en una sola linea de código y con el mismo nivel de complejidad que logras con una sombra en Photoshop o Fireworks.

APPI’s EN HTML5

La mayoría de los navegadores no soportan la funcionalidad que se quiere utilizar. Aquí una lista de alguno APIs más populares de HTMl5 ya podemos implementar de alguna u otra forma en nuestros proyectos  este plugin nos proporciona la tecnología para tener las nuevas funcionalidades de HTML5 en aquellos navegadores que no las soportan de forma nativa.

1. classList

Ya que classList es una funcionalidad relativamente nueva de HTML5, no funciona en los navegadores más viejos, pero esto no debería preocuparnos ya que existe una polyfill llamada classlist.js. Aunque si estamos usando alguna librería javascript como jQuery, no necesitaremos esta API de forma nativa.

2. dataset

elem.dataset no es soportado por Internet Explorer ni por los navegadores móviles más antiguos. Para todos los navegadores no hay problema en utilizar atributos data-*. Pero lo que no conviene que usemos es elem.dataset.foo para obtener su valor en javascript, en vez de esto utilicemos elem.getAttribute(‘data-foo’). La polyfill que existe para esta API es HTML5 dataset support

3. DOM

Actualmente, un gran conjunto de las nuevas funcionalidades sobre el DOM puede ser “corregido”. Sin embargo, los “shims” o “correctores” actuales no están probados en un 100% y se pierden algunas funciones. Los polyfills existentes (ES5-DOM-shim y DOM-shim) se deben usar con precaución. Igual hay que recordar, que podemos utilizar cualquier librería que manipule el DOM como jQuery que posee selectores y funciones muy potentes como las nativas de HTML5. He escrito un artículo en este sitio sobre esta API y su relación con los selectores de jQuery.

4. Drag and Drop

La funcionalidad de Drag and Drop se ha estandarizado en HTML5 basandose en la implementación original de Internet Explorer (¡si, de IE!). Es por esto que ya tiene un soporte bastante amplio, pero muchos se sienten frustrados cuando usan este API. Por eso, se recomienda usar jQuery UI Draggable (u otra librería Javascript). Las polyfills recomendadas: dropfile, fileSaver, jDataView.

5. EventSource

Eventos enviados por el servidor (Server-Sent Events) son eventos en tiempo real emitidos por el servidor y recibidos por el navegador. EventSource.js provee de una alternativa y no depende de jQuery. Los polyfills que se recomiendan son EventSource.js, jQuery.eventsource

Sitios de uso general que ya están usando HTML5

Esta es una lista corta de sitios que ahora mismo, en producción, usan HTML5. Si conoces más,por favor compartelos en los comentarios y los voy agregando a la lista, con tus créditos.

Twitter y m.twitter.com

Casi todo el diseño de las versiones desktop y móvil de Twitter usan intensivamente CSS3. En especial por los bordes redondeados. En la versión móvil de Twitter se usa geolocalización sumado a Google Geolocation Services para geolocalizar los tweets.

Gmail.com

Gmail usa Web Storage para guardar en el disco del usuario los correos más recientes. Así puedes acceder a ellos temporalmente si se cae la conexión. También usa Drag and Drop para arrastrar y soltar archivos adjuntos, entre otras habilidades de CSS3 para diseño.

Scribd.com

Scribd es un servicio que convierte cualquier PDF, PPT o PSD en HTML plano, con texto seleccionable y rendereado en el navegador, gracias en especial a @font-face y SVG.

Facebook

Las versiones móviles y desktop de Facebook hacen un uso intensivo de CSS3 para diseño y animaciones, así como de Web Sockets (o Pubsubhubbub) para las notificaciones de actividad y el chat. Muchas apps de Facebook usan otras capacidades.

¿Por qué utilizar HTML5 y CCS3 para el sitio web de mi negocio?

Las respuestas pueden ser varias, pero probablemente la más importante es que nos permite obtener resultados que antes simplemente no eran posibles, por ejemplo:

  • Sitios web de alto impacto visual amigables con iPhone, Ipad tablets  y otros dispositivos móviles.
  • Sitios web llamativos y modernos que al mismo tiempo puedan optimizarse para alcanzar excelentes posiciones en Google y otros buscadores.
  • La tecnología Flash tradicionalmente ha sido una excelente opción para desarrollar páginas web cuando la parte visual es prioritaria, sin embargo actualmente tiene serias desventajas respecto a HTML5 tanto en compatibilidad con móviles como en posicionamiento en buscadores (SEO).
  • Con HTML5 además es posible reproducir de forma nativa en el navegador audio y video, entre otros elementos que hasta ahora sólo era posible incorporar mediante el uso de plugins (como Flash o QuickTime). Esto evita las desventajas que el uso de plugins puede traer en compatibilidad, rendimiento y seguridad.
  • Además HTML5 permite mejorar la “semántica” de los sitios que lo utilizan, es decir, que los sitios estarán mejor dotados para “explicarle” a los buscadores y agregadores el significado de su contenido, permitiendo que la indización de los documentos sea más certera.
  • Por su parte, CSS3 es el compañero inseparable de HTML5 y es el lenguaje que verdaderamente se encarga de que las cosas “se vean bonitas”. CSS3 permite lograr estilos y efectos visuales que antes sólo eran posibles por medio de tecnologías adicionales.
  • HTML5 no sólo sirve para hacer páginas web en el sentido tradicional, sino también permite hacer desarrollo de aplicaciones complejas que funcionen tanto en computadoras de escritorio como en dispositivos móviles de diferentes marcas.
  • Por supuesto, un sitio hecho en HTML5 y CSS3 coloca a la vanguardia frente a tus competidores.

FUENTES:

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

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