BBVA API Market
Cuando el diseño parallax se usa con moderación puede proporcionar un elemento agradable y mucho más moderno y profesional a una página web. Pero, ¿qué hay detrás de un buen diseño de parallax? El llamado parallax scrolling es la última gran tendencia en diseño web, que consiste en dar movimiento a tu página web y generar una ilusión de profundidad al moverse, a diferentes velocidades, dos o más objetos en un plano 2D. Aunque ahora estamos viendo un gran ‘boom’ de este tipo de presentación de contenidos en web, realmente los diseñadores de videojuegos y otros artistas llevan utilizándola desde hace muchos años.
En primer lugar, hay varios aspectos a tener en cuenta antes de empezar con el diseño:
– Prepara un buen planteamiento de la web. Un diseño muy complejo puede acabar perjudicando el rendimiento, la usabilidad y la experiencia del usuario.
– Asegúrate de que todo el contenido esté alineado y centrado en la vista principal.
– Haz que tu JavaScript sea lo más rápido y eficiente posible para evitar tiempos de espera demasiado largos en la carga de la web.
– Utiliza siempre varios navegadores para detectar posibles errores en la página web.
La tecnología necesaria
El desarrollo de una web parallax aglutina tecnologías como HTML5, JavaScript y CSS. Pero no te asustes si no eres un desarrollador muy experimentado. Existen librerías que te facilitarán mucho el trabajo. Algunas de las más populares son: parallax.js, skrollr.js o jarallax.js.
Como punto de partida, hemos encontrado un pequeño tutorial claro y sencillo con el que podrás iniciar tu desarrollo. Antes de empezar te recordamos que con HTML podrás crear los ‘contenedores’ y el cuerpo de la página. Con CSS es posible decorar los párrafos y los textos que tenga la web, aportándoles estilos y color que luego se convertirán en elementos flotantes. Una vez completado el CSS podrás aplicar las animaciones con ayuda de las librerías JavaScript o jarallax.js.
Ten en cuenta que este tipo de diseño web se basa en elementos que entran y salen de la pantalla, por lo que si quieres que tu web sea más eficiente, un truco a tener en cuenta es establecer una orden en el código que detecte cuándo un contenedor se encuentra fuera de la ventana para que deje de calcular y ajustar su posición. Esto evitará cualquier cálculo innecesario cuando los elementos estén fuera de la pantalla, mejorando así el rendimiento.
Parallax en plataformas móviles
En la actualidad, cuando se planea el desarrollo de una página web no solo se tiene en cuenta la presentación y el rendimiento del site en el ordenador, sino también en los dispositivos móviles, ya que en estos últimos los parallax suelen ser lentos y no se ven bien. Entonces, ¿cómo es posible hacer que nuestro diseño sea efectivo en ambos mundos?
Una buena solución la encontramos en Jetpack. En este tutorial muestran cómo con este plugin, que posee un sistema de detección de dispositivos móviles, es posible adaptar un diseño de parallax scrolling a un smartphone o a una tableta. Para ello, es necesario desactivar el parallax de JavaScript y cargar en un archivo CSS extra cuando se detecta un teléfono móvil o una tableta. En esa hoja de estilo es posible cargar el parallax en versiones compiladas más pequeñas de imágenes de fondo, y utilizar las consultas de medios para ajustarlas a diferentes tamaños.
Algunos de los mejores ejemplos.
La técnica de parallax scrolling puede abarcar desde los diseños más sencillos, como el caso de Flickr, hasta algunos realmente complejos, como la página web que ha creado Peugeot para promocionar sus vehículos híbridos. La clave es encontrar la forma de incorporar todos los elementos que desees con un enfoque único sin perjudicar, como hemos mencionado anteriormente, el rendimiento, la usabilidad y la experiencia del usuario.
– Open-4u
Si el objetivo es comunicar distintos tipos de información, el diseño de parallax te permite crear una página web llamativa y que invite a la navegación para descubrir toda la información que contiene. Para encontrar un ejemplo no tienes que ir muy lejos, lo puedes encontrar en nuestra web.
Ante la falta de atención en el mundo de hoy en día, el diseño de una web parallax scrolling es una buena excusa para contar una historia de forma amena, combinando algunas técnicas de diseño web con técnicas propias de cómics, como el storytelling y las ilustraciones. Un ejemplo lo tenemos en el site que ha creado el equipo de ‘The walking dead’ para mostrar el proceso de transformación de un ser humano en un verdadero zombie.
La publicidad es otra forma de aprovechar las posibilidades que nos ofrece parallax. Mostrar todo el potencial de un producto llama la atención del usuario y mantiene su interés hasta el final, en el que se descubre todo lo que contiene. Así es como Wii ha creado la página web del videojuego Mario Kart.
Pero la técnica de parallax no solo expone una manera de mostrar información, sino también es una nueva forma de animarla y, como hemos mencionado, de contarla. Un ejemplo interesante lo encontramos en este relato publicado por The New York Times.
Llevar a un cliente por todo el proceso de compra hasta que este se formaliza es un viaje arduo y que se enfrenta a la posibilidad constante de abandono. Sin embargo, hay formas de lograr que la decisión de compra se haga realidad si se le dan facilidades como una financiación ágil, segura y adaptada a lo que necesita.
En un mundo conectado, las APIs son el pegamento que une todas las piezas que forman nuestra vida diaria. Y de la misma forma que un pegamento solo es potente si sabemos en qué material utilizarlo y conocemos sus propiedades, las APIs son tan útiles como su documentación permita.
Existen diferentes soluciones para monitorizar el rendimiento de una API, tanto en términos de tráfico como de calidad y rapidez de las respuestas que proporciona. Detectar fallos en el código o cuantificar los ingresos que genera también son algunas de las opciones que ofrecen estas útiles herramientas.
