Capítulo 8. La resiliencia

A riesgo de parecer pretencioso, he querido escribir, de mi puño y letra, este capítulo adicional para la traducción al español del libro “Diseño web flexible”. Y lo he titulado “La resiliencia”.

Para ello, vamos a hacer primero un repaso a este fabuloso trabajo de Jeremy Keith, para ver a continuación hacia dónde va el diseño web, cuáles son las tendencias actuales, y, finalmente, echar una ojeada al futuro. ¿Me seguís?

 

¿De que va todo esto?

Creo que, a estas alturas, todo el mundo tendrá claro que esto va de Internet, de la web, del diseño web. Pero, sobre todo, esto va de resiliencia. El título original en inglés de este libro es Resilient Web Design, que yo he traducido a Diseño Web Flexible, tomándome un crédito de traductor.

Básicamente, fue una decisión poco meditada y motivada por el hecho que el título Diseño Web Resiliente no me resultaba excesivamente atractivo. Pido disculpas por ello, pero también quiero explicar el porqué de esta decisión.

La resiliencia

Sea cual sea el campo de qué se trate, la resiliencia es la capacidad que tiene un cuerpo, una persona, una sociedad, un sistema tecnológico, una cultura, o incluso una obra de arte, a absorber, mediante la deformación o adaptación (flexibilidad), una amenaza, una fuerza contraria, un ataque o una catástrofe, y recuperar su forma o estado inicial una vez aquella ha cesado, pudiendo incluso hacerse más fuerte.

Por tanto, cuando hablamos de Diseño Web Resiliente nos estamos refiriendo a un diseño web que ha sabido hacer frente a las diferentes “amenazas”, cambios o escenarios con los que se ha encontrado, adaptándose a los mismos, siendo flexible.

La resiliencia en las personas
La resiliencia en las personas

Esto va de UI y de UX

Aunque Jeremy Keith no muestra ninguna línea de código, sí nos habla de “lenguajes” de programación web; nos habla acerca de HTML, CSS y JavaScript. Sin embargo, existen otros lenguajes, como PHP, Ruby, PERL y otros, que también pertenecen a Internet, pero que Jeremy no trata, salvo mención de soslayo.

Porque estos tres lenguajes, HTML, CSS y JavaScript, son los que interpreta el navegador que tienes instalado en tu ordenador personal, en tu tablet, en tu smartphone. Son lenguajes de lado navegador.

El código que interpreta tu navegador es aquél que ha recibido desde el servidor en respuesta a una solicitud que tu navegador le ha efectuado. Y todo ese código viene en forma de texto (contenido), etiquetas HTML (la estructura), sentencias CSS (la apariencia) y funciones JavaScript (el comportamiento).

Pues ese contenido, con esa estructura, esa apariencia y ese comportamiento, es lo que forma la UI (User Interface – Interfaz de usuario) de una página web.

La interfaz de usuario de una página web es aquello que tú ves cuando visitas un sitio web y navegas por las diferentes páginas que lo conforman. Es lo que te sale por pantalla, y generalmente está compuesto por una cabecera y un pie de página, con un contenido intermedio donde te puedes encontrar desde un vídeo que puedes visualizar, hasta un formulario con el que puedas comprar un producto de una tienda online, o una barra de navegación con la que puedas decidir qué página quieres ver.

De cómo de agradable sea esa UI, rápida, fluida, resultará una percepción positiva o negativa para el usuario. Esa percepción es la UX (User eXperience – Experiencia del usuario). Y esa experiencia debemos intentar que sea positiva al máximo, esté el usuario donde esté, ya sea delante de su ordenador de sobremesa (con un monitor enorme), ya sea en el cómodo sofá del comedor con su tablet con una pantalla mediana, ya sea en la terraza de un bar con su smartphone de pantalla más o menos reducida.

Pero no sólo se trata de la pantalla con la que visualizas la UI. Existen otros factores: El ratón de sobremesa no existe en otros dispositivos. Tampoco se rellena de la misma forma un formulario en todas las plataformas. Ni se navega igual entre las diferentes páginas que conforman un sitio.

Ideas previas

Para ello, Jeremy nos ha aportado, durante los 7 capítulos del libro, una serie de ideas:

  • Los avances se producen sobre una base previa. El mejor ejemplo es la compartición de líneas de telégrafo, teléfono e internet.
  • El navegador puede ignorar esta etiqueta“. Si el navegador no entiende algún código, salta a la siguiente línea y continúa la interpretación.
  • HTML marca el significado del contenido, mientras que CSS se preocupa de la presentación del mismo.
  • Responsive Design o Diseño Adaptativo. Es aquel que modifica la presentación en función del dispositivo donde se visualiza.
  • Mobile First (primero el móvil). Ante el auge de los dispositivos móviles en la navegación por internet, es recomendable diseñar un sitio web pensando en ellos principalmente, y adaptando después dicho diseño a equipos más tradicionales.
  • Lenguajes declarativos e imperativos. Los primeros etiquetan, sin preocuparse de la interpretación; los últimos interpretan y ejecutan fielmente el código dictado.
  • JavaScript es un lenguaje imperativo que nos permite interactuar con la página web (comportamiento) en tiempo real en nuestro navegador; AJAX es una técnica JavaScript que permite la interactuación usuario-navegador-servidor en tiempo real.
  • Las capas. Como si de una cebolla se tratase, el núcleo del contenido estaría envuelto con la capa estructural HTML, la capa de presentación CSS, y la capa de comportamiento de JavaScript.
  • Cortar la mostaza, o conseguir el resultado previsto. En JavaScript, un lenguaje imperativo, preguntamos primero si se puede ejecutar una función, para hacerlo en caso afirmativo.
  • Los 3 pasos: Identificar la funcionalidad básica; hacerla accesible mediante la tecnología más simple posible; y mejorarla.
  • El futuro de la web es desconocido.

 

El testigo

Jeremy Keith sentencia al final del séptimo capítulo:

El futuro, como la web, será escrito por usted.

De acuerdo. Cojo el testigo y, humildemente, continúo su obra.

 

¿Hacia dónde va la web?

¡Toma ya! La pregunta del millón. La respuesta a esa pregunta yo creo que no la tiene nadie, y yo menos. Sin embargo, existen una serie de actores en este escenario que intervienen con un papel principal dentro de la escena.

El gran inquisidor: Google

Que nadie interprete mal este título. Todos aquellos que andamos metidos en programación web, miramos de reojo a Google. Lógico. Cuando tú creas un sitio web, quieres llegar al máximo público posible, sea por el motivo que sea, bien porque tienes una tienda online, bien porque buscas branding. Para ello, necesitas que todo el mundo te encuentre en el buscador omnipresente: Google.

Eso significa que, hagas lo que hagas, debes intentar obtener el beneplácito de quien luego te va a enviar a tus visitantes. Es por ello que revisamos los índices de PageSpeed (Google), consultamos las tendencias de búsqueda en Google Trends, o verificamos nuestros datos estructurados en Google Search Console, entre otros.

Por tanto, Google marca la tendencia y la pauta a seguir en la web.

Lo principal es el contenido: la web semántica

La web semántica significa dotar a nuestros sitios web de un significado interpretable por parte de las máquinas, para que éstas almacenen también dicho significado, y no sólamente el contenido.

De esta forma, la información está mejor organizada, lo que asegura unas búsquedas más precisas por significado y no por contenido. Cuántas veces no sucede que realizas una búsqueda en un buscador, y te aparecen resultados extraños, sólo porque existe alguna coincidencia con tu consulta, pero sin tener que ver nada con aquella.

Incluso hay quien se atreve a denominar la web semántica como web 3.0.

Internet es móvil: Mobile First

Según el “Informe ditrendia: Mobile en España y en el Mundo 2016“, un 62% del tiempo total pasado por los usuarios en el mundo online ya se realiza desde smartphones y tablets.

Eso significa que, al diseñar un sitio web, debemos hacerlo primero para dispositivos móviles. Añadiendo después adaptaciones para otros formatos. ¿Y cómo lo conseguimos? Pues mediante el responsive design o diseño adaptativo y las media queries.

Pero no es el único requisito para ser adecuados en la “tecnología mobile“.

La velocidad, el eterno requisito

Internet es rápida, muy rápida. Por tanto, cualquier diseño web que se precie debe ser igualmente rápido.

Se estima que un 40% de los internautas esperan 2 segundos a que cargue una página web, sino, buscan otra. Eso implica que, no sólamente el diseño, sino también toda la codificación de lado servidor, de tu página web, deberá estar optimizado (lo que se conoce como Web Performance Optimization – WPO) para dar tales resultados.

Además, en el caso específico de los dispositivos móviles, deberemos hacer especial hincapié en este factor: nuestros diseños deberán optimizarse al máximo para llegar más velozmente a dichos dispositivos.

 

La tendencia actual

Reconozco de antemano que no soy ningún especialista en la cuestión, pero, por mis pinitos en la programación web, sí he observado algunas pautas que actualmente están marcando la tendencia en la web.

schema.org

Los datos estructurados son los que nos van a permitir dotar a nuestros contenidos de un significado. Gracias a ello, los buscadores podrán indexar las páginas que conforman nuestros sitios web mediante significado, además del contenido textual.

Ello provocará, a su vez, que cuando un usuario realice una búsqueda en un buscador, los resultados que recibirá serán más acordes con dicha búsqueda.

schema.org es el sistema más ampliamente utilizado actualmente, e inteligible para los buscadores. Incluso, y principalmente, para Google.

AMP

AMP es el acrónimo de Acelerated Mobile Pages, Páginas Móviles Aceleradas. Es un proyecto que se ha lanzado últimamente en el que, gracias a una codificación HTML especial, y otras técnicas, nuestras páginas AMP son indexadas en un registro específico, gracias al cual, cuando alguien quiere acceder a una de ellas desde un dispositivo móvil, su tiempo de carga disminuye considerablemente.

Ello mejora enormemente la UX de nuestros visitantes y minimiza los abandonos. Por lo que es una tecnología que no debemos menospreciar si deseamos un diseño web realmente poderoso.

Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Efectivamente, existen otros muchos frameworks (marcos) CSS, pero Bootstrap, desarrollado por los programadores de twitter, es el más popular.

Entiendo que haya quien prefiera codificar su hoja de estilos CSS. Pero Bootstrap te aporta una solución elegante y funcional, creando un diseño adaptativo y con la filosofía mobile first. En fin, todo en uno.

Los marcos JavaScript

El comportamiento de nuestros diseños lo aporta JavaScript. Su utilización nos aporta dinamismo a nuestras páginas. Ello se traduce en una mejor UX, al ser más amigables y fluidas.

Algunos ya maduritos y otros de nueva creación, se han creado una serie de marcos sobre JavaScript que nos permiten utilizar funciones avanzadas que dotarán de mayor dinamismo nuestros diseños: jQuery, BackBone, Angular, React, Modernizr, entre otros, nos aportarán características adicionales a nuestros diseños web. La elección de uno u otro dependerá de cómo se adapte a nuestra filosofía de diseño.

AJAX

Incluyo en esta lista a AJAX, no porque sea tendencia, sino por ser realidad. Realmente, lo he hecho para evitar su olvido.

El pilar fundamental de la Web 2.0, nos proporciona un sistema por el que el usuario interactúa directamente con el servidor, sin tener que actualizar toda la página por ello.

Por tanto, es una técnica de obligado cumplimiento hoy en día, en cualquier diseño web que se precie.

 

¿Y el futuro?

No voy a hablar yo sobre el futuro. No soy especialista en el diseño web. Ni tengo una bola de cristal que me dé la respuesta a esta pregunta.

Pero si alguien quiere saber algo más, no dude en acudir a esta página web:

futurefriendlyweb.com

 


Notas de traducción

Pues ninguna. Simplemente quiero terminar diciendo que para mi ha sido una experiencia nueva y grata. Supongo que en algún punto se notará mi escaso dominio del inglés, sobre lo cual he aprendido también bastante.

Sobre este último capítulo, debo pedir disculpas a quien le parezca demasiado osado, pero es una concesión que me he permitido, buscando mejorar mi estilo literario. Pero, ante todo, aportar mi grano de arena en el Diseño Web Flexible.

Como hace todo el mundo que escribe algo, yo también quiero poner mis agradecimientos. Deberían ser para mi mujer y mis hijas, por aguantarme y todas esas cosas. Pero es lo que les ha tocado, lo siento. A quien sí doy las gracias es a Jeremy Keith, por este estupendo libro, y a Google Translate, aunque no siempre ha sido todo lo útil que cabría desear.

Sobre el trabajo que conlleva la traducción de un libro, quiero decir que mucho: primero traduces, luego revisas lo escrito, luego lo vuelves a revisar, y finalmente le añades las notas de traducción. Sin embargo, resulta sorprendente como, al final, el libro parece que lo hayas escrito tú mismo.

Derechos

Este libro ( Resilient Web Design ) ha sido escrito y producido por Jeremy Keith. Bajo licencia Creative Commons Attribution-ShareAlike 4.0 International License. Yo me he limitado a traducirlo, y, en todo caso, añadirle unas notas de traducción para enriquecerlo ( aunque no fuera necesario enriquecerlo ). Esta traducción, a su vez, también está bajo la licencia Creative Commons Attribution-ShareAlike 4.0 International License. Sobra decir que este último capítulo participa de la misma filosofía que el resto del libro.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *