- FRONTEND
- BEST PRACTICES
- ENERO 2020
Animaciones web: ¿HTML, CSS o JavaScript?
Suscríbete a Insights
Déjanos tu email y te mantendremos al tanto de todas nuestras publicaciones. Solo recibirás una comunicación al mes aproximadamente. Tranquilo, no mandamos spam ;)
Pongamos que tu equipo de diseño te pide animar algunos elementos de la interfaz de nueva aplicación que estáis desarrollando: “esto entra volando por aquí”, “eso gira mientras el elemento esté visible en la pantalla, etc” y dudas qué herramienta utilizar. Pues resolver esta pregunta hará que sufras (y mucho) por el camino o lo disfrutes y el reto sea todo un éxito.
A día de hoy el lenguaje web es muy visual por varios motivos; porque los elementos gráficos mejoran la comprensión de un mensaje, porque rompen la monotonía en un bloque de texto y porque la capacidad de las personas para interpretar símbolos arbitrarios y aplicarles un significado concreto nos permite codificar mensajes de manera mucho más rápida que la alternativa textual, lo cual, en estos tiempos de hiperconectividad y consumo inmediato de datos e información, es una necesidad.
Por otro lado, el aumento de las capacidades de los dispositivos, de las redes de conexión y de los lenguajes web nos está permitiendo utilizar y servir recursos gráficos más grandes, de mayor peso, y en muchos aspectos, más exigentes. Así que volvemos a desempolvar los gifs animados para darle una nueva vuelta de tuerca porque la vida es movimiento, y ésta es la tendencia.
Como decíamos, tenemos varias posibilidades a la hora de elegir una herramienta para animar, pero no todas serán igual de convenientes según qué caso y nuestras intenciones, por eso es necesario definir el objetivo para que la tarea sea divertida y no descubramos a mitad de camino que nos hemos confundido de herramienta o enfoque y tengamos que volver atrás.
Buscamos una herramienta más potente con la que podamos tener mayor control, y es en este punto en el que animar con JavaScript se convierte en la mejor opción.
En un mundo ideal no habría duda, utilizaríamos CSS para realizar nuestras animaciones porque siguiendo la idea de la separación de capas según la utilidad de cada una, a saber; HTML para estructurar nuestro código, CSS para aplicar estilos y JavaScript para manipular el DOM y dotarlo de dinamismo y flexibilidad. Animar elementos encajaría en la capa de presentación (CSS) porque principalmente es una característica decorativa, y sería de facto nuestra primera y mejor opción para abordar este tipo de trabajos.
CSS tiene a su favor que tanto el lenguaje como la sintaxis es fácil de manejar, es ampliamente conocida por la mayoría de desarrolladores y está plenamente optimizada y enfocada para este tipo de tareas. No en vano se desarrollaron las propiedades 'animation', 'transition' y '@keyframes' con las que creamos todas las microinteracciones y efectos simples, dejando atrás el tan popular método 'animate()' de jQuery. Sin embargo cuando empiezas a crear una animación compleja quedan al descubierto las limitaciones de CSS como lenguaje para crear animaciones y te ves en la necesidad de cambiar de rumbo.
La principal desventaja de animar con CSS es la dificultad para controlar la línea de tiempo, sobre todo cuando varios elementos se mueven de manera no secuencial solapándose entre ellos el inicio y el final de su movimiento, lo tedioso que es modificarla cuando éstos dependen entre sí especialmente si se quiere alterar el orden en la secuencia, y la falta de implementación de un callback nativo, es decir, la falta de control y de información sobre si una animación ha terminado o sigue ejecutándose.
Todo esto nos lleva a tener que buscar una herramienta más potente con la que podamos tener mayor control, y es en este punto en el que animar con JavaScript se convierte en la mejor opción.
¿Nativo o librería?
Podemos leer en la especificación de Web Animations que la API está todavía en estado working draft pero que va a proporcionarnos todos aquello que echamos de menos cuando intentamos realizar animaciones complejas con CSS. A futuro tendremos total control sobre nuestra línea de tiempo a través de eventos y métodos pero hasta que no se cierre el documento de trabajo y la implementación llegue a los navegadores nuestra mejor opción será utilizar una librería consolidada, como GSAP de Greenshock que acaba de sacar su versión 3 con novedades muy interesantes o Animejs, una librería que destaca por su facilidad de uso, sintaxis clara, control total y versatilidad, útil para animar propiedades CSS de elementos del DOM, SVG u objetos, y que vamos a utilizar en este ejemplo para construir una pequeña demo.
Boream insights
Descubre tendencias y sigue el día a día de nuestros proyectos.
Ver todos los insights-
Backend Best practices
Aplicando soluciones de Inteligencia Artificial para la creación de Chatbots en Drupal
Con la rápida evolución de la Inteligencia Artificial (IA), las empresas y organizaciones buscan cada vez más formas de automatizar la atención al cliente y mejorar la experiencia del usuario. Los chatbots, impulsados por tecnologías de IA, se han convertido en una solución popular para estas necesidades. Drupal, con su arquitectura modular y flexible, es una plataforma ideal para integrar estas soluciones.
-
UX-CX
Solid, UX y datos personales. ¿Una utopía o una realidad?
Solid es una tecnología basada en los estándares actuales de Internet que permite la organización de datos e identidades en las aplicaciones que desarrollemos. Hasta aquí poca cosa nueva. La revolución viene dada porque con esta tecnología es el propio usuario quien tiene el control de sus datos y quien da el permiso de uso a las compañías a través de un WebID.
-
Diseño UX-CX Research
Sesgos cognitivos y prejuicios en los procesos de diseño de interfaz: como combatirlos
Como diseñadores de interfaz y de experiencia de usuario debemos tomar decisiones rápidas que impactan de manera notable en el resultado final de nuestros productos digitales. Generalmente no somos conscientes de que estas decisiones pueden verse profundamente afectadas por una interpretación errónea de la realidad, sesgada por nuestra propia experiencia y alejada de una comprensión racional del entorno.
-
Backend Best practices
Desarrollo Drupal conexión con LDAP: control de acceso.
Tras el primer insight donde comentamos los pasos básicos de conexión de un desarrollo Drupal con un Sistema LDAP, en esta nueva entrega profundizamos en algunos aspectos más avanzados o particulares.