Asegurar que las imágenes de tu sitio web estén optimizadas es fundamental para mantener una carga rápida y ofrecer una experiencia de usuario impecable.
¿Cómo crear una animación para comparar el antes y el después de una foto?
Crea una comparación interactiva de fotos o imágenes con JuxtaposeJS
Recursos y Herramientas
Jeremías G. Ruiz
Compara calidades de imágenes con JuxtaposeJS.
JuxtaposeJS es una herramienta fantástica que nos permitirá comparar dos imágenes en forma interactiva a través del desplazamiento de una pequeña línea sobre una imagen. Es gratuito, es fácil de usar, funciona en dispositivos móviles y se puede insertar en cualquier web a través de un iFrame
Usos:
JuxtaposeJS es útil para prácticamente cualquier comparación de imágenes que necesitemos hacer, nuestra imaginación dirá cuándo utilizarla y cuando no.
Algunas temáticas donde es comúnmente utilizada:
- Fotografía: Comparación de calidades de fotos de cámaras fotográficas, lo que incluye cualquier dispositivo con cámara, entre ellos, dispositivos móviles.
- Mapas: Comparaciones de fotografías aéreas sobre un mismo lugar mostrando el avance y expansión de áreas urbanas, cultivos, deforestaciones, etc.
- Construcción: Comparación mostrando avances de obras, reformas, resultados de usos de materiales distintos en misma obra, etc.
- Antes y después: Comparaciones entre fotografías tomadas en distinto punto temporal pero desde el mismo ángulo. Se utiliza en cosmética, agricultura, química, entre otros.
Cómo funciona JuxtaposeJS?
La utilización de la herramienta es extremadamente fácil. Es necesario conocer la URL de las imágenes que deseamos comparar, las cuales pueden estar alojadas en DropBox, Google Drive, o en la plataforma de tu sitio.
Al ingresar a JuxtaposeJS encontraremos dos campos principales donde pegar la URL de cada una de las imágenes que deseemos comparar. Para cada imagen además es posible indicar un nombre y el crédito en caso de querer mencionar la fuente de las imágenes.
En las opciones de la derecha encontraremos algo de configuración adicional como la posición inicial del Slider y otras.
Una vez que definimos la configuración, podemos hacer clic en "Update Preview" para obtener una vista previa del complemento a insertar. Para finalizar, simplemente hacemos clic en "Publish" y así obtener el iFrame que luego podemos insertar en un sitio web.
El siguiente video tutorial explica el funcionamiento de JuxtaposeJS y los pasos para insertarlo en un sitio creado con Medios CMS
Sobre JuxtaposeJS
La herramienta fue desarrollada por Alex Duner de la Universidad de Northwestern Knight para los creadores de contenidos de los laboratorios de dicha facultad. Se puede aportar al código informando cualquier problema en este link. O conocer el código fuente aquí. También es posible enviar consultas al siguiente correo [email protected]
Más para ti ⚠
FlexClip, una innovadora herramienta ha lanzado recientemente su generador de Imagen a Imagen basado en IA, para transformar tus fotos en arte
Canva ha lanzado tres herramientas innovadoras impulsadas por IA: el generador de música, de voz y el borrador de IA. Descubre cómo funcionan y cómo aprovecharlas.
Con Criservis, los medios digitales pueden ofrecer una nueva capa de servicios verificados a sus audiencias, monetizando con facilidad a través de una plataforma intuitiva y segura.
Necesitas complementar un artículo con un video publicado en la red social X (ex Twitter), sólo sigue estos simples pasos y consigue el video en HD en un abrir y cerrar de ojos y gratis.
Tres aplicaciones online para convertir videos MP4 a WebM: ¿Cuál elegir?
Carlos Mondino
Recursos y HerramientasConoce las mejores herramientas para convertir videos MP4 a WebM. Convertio.co, Online-Convert.com y Veed.io en análisis. Eficiencia, pros y contras al detalle.
Más visitado
Con la actualización Medios CMS 25.1, incorporamos nuevas funcionalidades que harán que la experiencia de edición y visualización de contenidos sea más fluida, atractiva y eficiente.
Los metatítulos y las meta descripciones son elementos clave en la optimización SEO de cualquier página web. No solo ayudan a los motores de búsqueda a comprender el contenido, sino que también influyen en la decisión de los usuarios al hacer clic en un resultado.
Una nueva herramienta está frente a nosotros, la Inteligencia Artificial. ¿Es una amenaza para los medios digitales o es una herramienta complementaria?
De esta forma puedes bloquear anuncios de AdSense o anunciantes según su temática o si resultan molestos, mejorando así el control y la experiencia del usuario.