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.
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:
<- In portrait orientation ->
<img class="portrait" src="a.jpg" />
<- In landscape orientation ->
<img class="landscape" src="a.jpg" />
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:
<Img intent in-base src = "reg_img.png" in highres src = "big_img.png" />
Específicamente para dispositivos con resolución retina:
<img src="big_img.png" />
Esto se aplica a todos los demás dispositivos:
<img src="reg_img.png" />
<Href intent in-mobile-class = "narrow" in-tablet-class = "medium" in standard class = "wide" />
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>
<header>
<img src="retina.png" />
</ Header>
<div id="content" class="mobile Portrait">
<nav class="swipeDrawer">
<a href="/faq"> FAQ </ a>
<a href="about.html"> About </ a>
</ Nav>
This is all so easy!
</ Div>
<source srcset="small.jpg 1x, small-highres.jpg 2x" />
<source media="(min-width: 18em)" srcset="med.jpg 1x, med-highres.jpg 2x" />
<source media="(min-width: 45em)" srcset="large.jpg 1x, large-highres.jpg 2x" />
<Img src = "small.jpg" alt = "Description of image subject." />
<header>
<img src="logo.png" />
</ Header>
<div id="content" class="tablet Portrait">
<nav class="swipeDrawer">
<a href="about.html"> About </ a>
<a href="/faq"> FAQ </ a>
</ Nav>
This is all so easy
</ Div>
<header>
<img src="logo.png" />
</ Header>
<nav>
<a href="about.html"> About </ a>
<a href="/faq"> FAW </ a>
</ Nav>
<div id="content" class="Standard">
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:
<div id="timeExample" intent in-time:> </ div>
var time = intent.responsive ({
ID: 'time',
contexts: [
{Name: 'night', min: 20},
{Name: 'evening', min: 17},
{Name: 'sunset', min: 16},
{Name: 'day', min: 9},
{Name: 'morning', min: 0}
]
matcher: function (test, ctx) {
return test> = ctx.min;
}
measure: function (arg) {
var time = new Date ();
time.getHours return ();
}
});
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:
var axis = intent.responsive ({
ID: 'AxisId'
contexts: [
{Name: 'CTX1', val: '3 '},
{Name: 'ctx2', val: '2 '},
{Name: 'ctx3', val: '1 '}
]
matcher: function (measure, context) {
return measure> = context.val;
}
measure: function () {
someMeasurement return;
});
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.
Ruben Carracedo Cano
Latest posts by Ruben Carracedo Cano (see all)
- maqueta texto en columnas solo con css3 - 26 febrero, 2014
- Tutorial para optimizar imagenes para SEO - 26 febrero, 2014
- Analisis y reseña de SmartWatch Pebble - 30 enero, 2014
Deja un comentario