sábado, 29 de junio de 2013

HTML 5, Tutorial de como entender el futuro de la web. Parte 1.

Antes que nada, debo felicitar al camarada Eduardo Samán por su asignación como Presidente de Indepabis, vuelve profesor que persiguió la especulación.

Alejado de las opiniones políticas expresados en mi Blog, decidí centrarme en las tecnologías actuales de la web. Seguramente tu, lector has sido victima de la lentitud de muchos web, principalmente bancos (los invito a soportar la web del Banco de Venezuela por ejemplo) con estándares web atrasados con el uso de tablas, exceso de imágenes y exceso de comunicaciones entre el cliente y el servidor de gran peso. La solución a estos problemas por mucho tiempo fue incrementar el ancho de banda de la web, pasamos de los 54 kbps de dial up al 1,5 Mbps (sin tocar el tema de costos).

La solución americana (Más rápido y más furioso jejeje) es practica, pero no corrige o optimiza la web. La W3C (World Wide Web Consortium) juega un rol importante, dejando atrás las cicatrices de la guerra de navegadores introduce a los usuarios una nueva Web bajo los conceptos de la internet semántica. Este conjunto de estándares de mayor impacto son HTML5, CSS3, MathML y SVG; se incorpora Javascript el cual no esta incluido por la W3C pero de igual impacto.

La nueva documentación web se proyecta en los siguientes principios:
  • Semántica:  El contenido de la información esta caracterizado, propiamente lo que nosotros conocemos como "tag" es un principio básico de la web semántica, añade y automatiza los procesos de búsqueda y de indexar datos. Instagram por ejemplo, no busca en cada uno de los comentarios la palabra que buscamos si no que por cada tag que creamos, en lista la foto y muestra en orden cronológico. La web semántica va más allá clasifica los documentos en secciones, los extractos son artículos entre otros puntos que se dirán más adelante.
  • Descargar solo lo necesario: Cada vez que nos conectamos a una pagina web, compilarla, cargarla y refregarla toma tiempo. Pero que sucede si nuestro navegador o "cliente" ya tiene esa información pre-cargada, los tiempos se optimizan pues imágenes y contenidos están en el navegador y solo hace falta descargar lo nuevo, lo actualizado o lo que solo necesites.
  • Amplia horizontes para todos: "Escribe para uno, arranca en todos" es el eslogan de Java para indicar su funcionalidad en todos las plataformas. Los estándares como HTML5 (Canvas) y WebGL rompen el esquema de las aplicaciones más complejas que debían programarse para cada plataforma puedan ahora ejecutarse en nuestros navegadores. Imagina GIMP desde el navegador o un software CAE. Computar los datos de manera remota y los resultados de manera local.

Los <Tag> de HTML5:

Como ya mencione, HTML5 es una web semántica, los elementos estructurales no dejan de existir, pero se incorporan unos nuevos con funciones particulares aunque de manera conceptual. Por ejemplo <div> se utiliza para definir una división y es así desde HTML 4, pero hoy podemos hablar de secciones agrupados de manera conceptual.

Estos son los tag más importantes que debes manejar algunos siguen siendo de HTML 4 pero son buenos conocer:
  • <section> Identifica como ya se ha mencionado bloques conceptuales particulares. Un sitio web sencillo por ejemplo sobre una ONG del medio ambiente,  es de esperar que tenga al menos un blog, una galería de fotos y pagina dedicada a números de teléfonos y centro de donaciones. Cada una de estas paginas ahora pueden incorporarse en una sola y definirlas como secciones. No es para nada diferente a <div> pero conceptualmente te permite ordenar tu trabajo.
  • <article> Este tag tuvo muchos problemas de conceptualización pues se asemeja a "section" no obstante la definición correcta es de todo contenido que no sea originado por el autor de la pagina o sitio web. Para un buscador, esto es vital pues nos dice que es un contenido de segunda mano.
  • <audio> y <video> son los tag que manejan contenidos multimedia, son la continuación de <img> pero aplicado a sonidos o películas de video.
  • <figure> y <figcaption> indica el bloque al cual esta el contenido multimedia y su pie imagen o video.
  • <details> y <summary> son elementos complementarios que no precisamente deben estar publicados pero si contenidos, como derechos de autor.
  • <nav> y <menu> elementos de navegación, siendo <nav> para secciones del documento y <menu> para puntuales.
Haz la practica con el bloq de notas, y más adelante mostrare la potencia de HTML5 con CSS3.