El Blog De Medios Blog de Medios

¿Como 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

Herramientas Jeremías G. Ruiz Jeremías G. Ruiz
compara imagen 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]

Te puede interesar 🤓

periodimo cientifico1

Periodismo científico, un nicho de mercado muy necesario

Periodismo digital

No todas las personas pueden hablar de ciencia, suena chocante la afirmación pero es cierta. Se trata de una cuestión de rigor intelectual y veracidad informativa. Hoy circula información científica mediante textos entre divulgativos y Fake News, que no resuelven la necesidad de los usuarios de obtener datos confiables. El periodismo científico se presenta hoy como necesidad vital y oportunidad única

buenas noticias1

También hay buenas noticias

Periodismo digital

Cuando la realidad aplasta el ánimo de los usuarios, los medios de comunicación también pueden ser una vía de escape para sentirse un poco mejor. Esto es lo que advirtieron algunos periódicos que comenzaron a incluir, entre sus columnas, secciones destinadas a las buenas noticias. ¿Paliativo para el desánimo por el Covid-19 o segmento de mercado en ascenso?

Lo más visitado 🔥

SERPs, posicionar en los motores de búsqueda

¿Qué significa SERP?

SEO

Si hablamos de SERP inmediatamente pensaremos en posicionamiento SEO. Claro está, si es que nos interesa indagar y trabajar sobre el SEO de nuestro sitio. Si aún no ocurre eso, quizás sea buen momento para comenzar. Te contamos qué significa la abreviatura SERPs y, lo más importante, su utilidad

La importancia del feedback

¿Qué es el marketing de contenidos?

Marketing Digital

Si definiéramos al marketing de contenidos con una acción diríamos movimiento. Cambio contante en la construcción de ideas, sentimientos y valores, relacionados a un producto que acompañen al público objetivo durante el ciclo de compra

La importancia de optimizar las meta title

¿Qué es el meta title?

SEO

Cuando hablamos de sitios de noticias, un meta title se refiere al título que le damos a cada artículo que redactamos. Comprender la importancia de los meta title y saber cómo optimizarlos colabora grandemente en aumentar la tasa de clics

Comentarios y posicionamiento SEO

Los comentarios, afectan al SEO?

SEO

Si todo lo que se publica en un sitio web puede considerarse como parte de este, ¿los comentarios son entendidos por Google como algo que forma parte de un artículo?

Recibe las novedades en tu correo