Intention JS – Librería para hacer mas fácil el responsive design

Intention-JS
  • Ruben Carracedo Cano
  • Sin categoría
  • 27 / 10 / 2013
  • 0 Comments

El Diseño Adaptativo o Responsive Design está de moda. Además de las Media Queries, existen numerosas formas de realizar un diseño adaptativo. Ahora os presento intention.js: Transformación del HTML dependiendo del dispositivo que se utilice.

En palabras simples y desde una perspectiva técnica, puede ser descrito como “diseñar las media queries usadas en los diseños adaptativos para buscar que resolución hay que usar para mostrar la página”. Como consecuencia, las estructuras son movidas, escaladas u ocultadas. Por tanto, el contenido se adapta para cambiar el ancho de los elementos.

Intention-JS

En otras palabras, si por ejemplo utilizásemos un navegador pequeño como el de un móvil o smartphone, encogeríamos las imágenes flexibles y los elementos superfluos – por ejemplo la sidebar o barra lateral se ocultaría; un diseño de dos o tres columnas se convertiría en una columna – de esta manera evitaríamos que los elementos quedasen erróneamente o mal posicionados. Desde un punto de vista técnico, esto sería descrito de la siguiente manera: utilizaríamos puntos de ruptura o breakpoints para que el motor de renderización de la pagina tomase decisiones en función de la resolución que se utiliza.

Si encogemos la sidebar o la quitamos:

  • ¿Que pasaría en el modo Apaisado o Landscape?
  • ¿Mostraríamos la barra lateral o sidebar otra vez o la ocultaríamos?
  • ¿Que pasaría con el contenedor del contenido?
  • ¿Como podemos adaptar nuestras imágenes para una pantalla retina (iPhone)?

Intention.js en el desarrollo web

Intention.js es una herramienta para el Diseño Adaptativo. Te ofrece una manera fácil de reestructurar el HTML para diferentes dispositivos. Da la impresión de que puedes especificar en el HTML, como cambia el DOM para los distintos dispositivos.

Simplificando, puedes escribir en el HTML, “platillas”, y que intention.js las interprete para cada resolución. Especialmente con la reestructuración de los objetos del DOM, intention.js es magnífico. Gracias a esto, el Diseño Adaptativo no volverá a ser abstracto o poco claro, sino todo lo contrario. Se volverá claro y simple de entender.

Varias plantillas para diferentes dispositivos se pueden implementar de manera fácil. En un ordenador, quieres que una galería de imágenes se represente con miniaturas, en la tablet quieres que sea a pantalla completa y que sea táctil al igual que en un smartphone. Además quieres que todas las imágenes tengan el ancho más grande posible según el dispositivo… No hay problema. Todo esto es posible gracias a intention.js

¿Como funciona intention.js?

Este sistema esta pensado como si tuviese dos columnas. La primera consiste en lo que llamamos márgenes o umbrales, definen el contexto de como será mostrado un sitio. Por ejemplo: ¿Como de ancho es el viewport? ¿Necesita que sea táctil? ¿Modo normal o apaisado?

La segunda columna sería la manipulación de los atributos del HTML. Existen tres métodos distintos:

La manipulación de las clases CSS

El método mas simple es la manipulación de las clases CSS

<img intent in-orientation: src="a.jpg" />

sería en intention.js. En formato tradicional:

La manipulación de los atributos HTML

Este método ofrece mas detalle en la manipulación que el método anterior. Define un valor base, que es adaptado para un caso particular. Como en el siguiente ejemplo:

Específicamente para dispositivos con resolución retina:

Esto se aplica a todos los demás dispositivos:

<img src="reg_img.png" />

La manipulación del árbol del documento

La “manipulación de la posición” se utiliza para mover los objetos del DOM para reestructurarlos para distintos dispositivos.

<header>
<nav intent in-mobile-prepend = "footer" in-tablet-append = "section" in standard-append = "header">
</nav>
<section> ... </section>
<footer> ... </footer>
</header>

Para móvil: La navegación está posicionada dentro del pie.

Para tablet: La navegación está posicionada debajo de la sección con el contenido.

Todo lo demás: La navegación está posicionada debajo de la cabecera.

Usando Intention.js

El sistema hace referencia a jQuery y Underscore.js. Intention.js viene minimizado y requiere solo de 7kb con soporte para navegadores modernos (hasta el IE 8). El siguiente ejemplo muestra algo un poco más extenso. Gracias a el podríamos generar tres distintos códigos fuente desde un HTML.

<header>
<Img src = "logo.png" intent
in highres src = "retina.png" />
</ Header>

 

<Nav intent
in-mobile-prepend = "# content"
in-tablet-prepend = "# content"
in standard-after = "header"
in-touch class = "swipeDrawer">

 

<A id = "about" intent
in-mobile-href = "about.html"
in-tablet-href = "about.html"
in standard href = "# about"> About </ a>

 

<a id="projects" href="/faq">
Intent
in-mobile-before = "# about"> FAQ </ a>
</ Nav>

 

<Div id = "content" intent
in-width: in-orientation:>
This is all so easy!
</ Div>

Como ya he mencionado, con intention.js puedes diferenciar el diseño adaptativo predeterminado basándote en el contexto. Pero puedes definirlo por ti mismo. Esto te permite cambiar el proyecto web “en vivo”, basándote por ejemplo en el comportamiento al hacer scroll, en las páginas vistas o en la hora del día.

Un ejemplo mostrado en el código siguiente:

Construyendo ejes predefinidos y el contenido

La estructura consiste en dos propiedades diferentes y sus funciones. Brevemente, un “eje” mide un objeto medible o una colección de información. El grupo del contexto define las unidades. Un ejemplo:

Conclusión

Intention.js es interesante. ¿Creéis que podría revolucionar el diseño adaptativo? Yo si. No lo veo útil en pequeños proyectos. Pero para grandes proyectos solo veo ventajas, como reestructurar los objetos del DOM convenientemente y manejarlos fácilmente. Por supuesto, con sistema de diseño o frameworks como Bootstrap, puedes crear funcionalidades similares, pero ¿tan rápidas y complejas? Intention.js no sirve solo como framework UI, es también otra forma de acercarnos a los diseños adaptativos.

Una mención especial a la documentacion de intention.js. El código es parcialmente explicado línea a línea. Esto hace que puedas empezar a trabajar con intention.js mas rápido y fácil. Echa un vistazo a las demos que te interesen.

The following two tabs change content below.
Ruben Carracedo Cano

Ruben Carracedo Cano

Analista Programador at Adviqo Telelinea
Soy un profesional Web Multiplataforma con mucha curiosidad y ganas de seguir mejorando. Tecno-Friki entre otros vicios. Me encanta todo lo relacionado con la programación y el desarrollo de aplicaciones. En mis ratos libres investigo novedades tecnológicas, busco adaptar la tecnología para facilitar su uso cotidiano.
Ruben Carracedo Cano

Latest posts by Ruben Carracedo Cano (see all)

Deja un comentario