{"id":23944973,"date":"2025-02-07T09:42:07","date_gmt":"2025-02-07T08:42:07","guid":{"rendered":"https:\/\/www.demomentsomtres.com\/2025\/02\/collaboracio-web-msf-nlr\/"},"modified":"2025-11-20T14:27:01","modified_gmt":"2025-11-20T13:27:01","slug":"collaboracio-web-msf-nlr","status":"publish","type":"post","link":"https:\/\/www.demomentsomtres.com\/es\/2025\/02\/collaboracio-web-msf-nlr\/","title":{"rendered":"V\u00eddeo en tiempo real para M\u00e9dicos Sin Fronteras"},"content":{"rendered":"\n<p>En esta casa llevamos a\u00f1os trabajando con M\u00e9dicos Sin Fronteras. En todo este tiempo, hemos tenido la oportunidad de crear soluciones a medida para las necesidades de una de las organizaciones m\u00e1s comprometidas con los derechos de las personas. Hoy te contamos de la \u00faltima colaboraci\u00f3n y c\u00f3mo hemos resuelto los retos que se nos planteaban.  <\/p>\n\n<h2 class=\"wp-block-heading\">El reto: integrar al usuario en la iniciativa a trav\u00e9s del v\u00eddeo<\/h2>\n\n<p>Nuestro \u00faltimo trabajo ha sido la creaci\u00f3n de la web <strong>Nuestra L\u00ednea Roja<\/strong>, la web de una de las campa\u00f1as de participaci\u00f3n de M\u00e9dicos Sin Fronteras. <\/p>\n\n<p>La intenci\u00f3n de MSF es comunicar que existe una l\u00ednea roja que no se puede atravesar. Lo dicen bien claro: <em>&#8220;somos M\u00e9dicos Sin Fronteras, pero tenemos una, la que protege a la poblaci\u00f3n civil y la misi\u00f3n m\u00e9dica<\/em>&#8220;. Esta l\u00ednea roja la formamos todas las personas que apoyamos a la organizaci\u00f3n.  <\/p>\n\n<p>Se trata de una campa\u00f1a de <strong>recogida de firmas<\/strong> con la intenci\u00f3n de <strong>ir m\u00e1s all\u00e1<\/strong> de firmar o rellenar un formulario. M\u00e9dicos Sin Fronteras quiere que la persona que firma se sienta que <strong>forma parte<\/strong> de su l\u00ednea roja y lo <strong>compartan<\/strong>. <\/p>\n\n<h2 class=\"wp-block-heading\">Una experiencia de usuario con v\u00eddeo generado en tiempo real<\/h2>\n\n<figure class=\"wp-block-video\"><video height=\"554\" style=\"aspect-ratio: 1080 \/ 554;\" width=\"1080\" controls=\"\" src=\"https:\/\/www.demomentsomtres.com\/wp-content\/uploads\/2025\/02\/DMS3-Video-Nuestra-linea-roja-1.mp4\"><\/video><\/figure>\n\n<p>Cuando entras en la web de <strong>Nuestra L\u00ednea Roja<\/strong>, te encuentras con el v\u00eddeo de presentaci\u00f3n de la campa\u00f1a en la parte superior de la p\u00e1gina, que marca el tono emocional de la experiencia. <\/p>\n\n<p>Bajo el v\u00eddeo, se te presenta un texto explicativo que te sit\u00faa en el contexto de la campa\u00f1a, as\u00ed como el manifiesto con la llamada a la acci\u00f3n que te invita a unirte a esa petici\u00f3n.<\/p>\n\n<p>El siguiente paso es rellenar el formulario para firmar la petici\u00f3n. Como es de esperar vas a parar a la p\u00e1gina de agradecimiento (<em>thank you page<\/em> si quieres utilizar palabras t\u00e9cnicas en ingl\u00e9s). <\/p>\n\n<p>Aqu\u00ed comienza la interacci\u00f3n con <strong>v\u00eddeo generado en tiempo real<\/strong>. T\u00fa formas parte de esta l\u00ednea roja con otras muchas personas. El v\u00eddeo hace zoom hacia la l\u00ednea roja y voces que la forman muchas personas con reales, con nombres y apellidos. Hay un espacio en blanco en el que aparece tu nombre y la inicial del apellido, porque la privacidad es otra de las l\u00edneas rojas.   <\/p>\n\n<p>Y si formas parte de la l\u00ednea roja de MSF, quieres comunicarlo a tus amigos y conocidos. Por eso est\u00e1n los botones compartir en las redes sociales o WhatsApp con un <strong>enlace personalizado<\/strong>.  <\/p>\n\n<p>Cuando tus amigos accedan a la p\u00e1gina de inicio con este enlace, el v\u00eddeo de presentaci\u00f3n se modifica en tiempo real para incorporar la secuencia de la p\u00e1gina de agradecimiento al principio del v\u00eddeo de presentaci\u00f3n. <\/p>\n\n<p>El objetivo es hacer que sea un ciclo sin fin y que muchas personas m\u00e1s se unan a la l\u00ednea roja de M\u00e9dicos Sin Fronteras.<\/p>\n\n<h2 class=\"wp-block-heading\">Receta para construir storytelling interactivo: las tecnolog\u00edas<\/h2>\n\n<p>Cuando empezamos a plantear el proyecto dispon\u00edamos de varios ingredientes:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>La web de M\u00e9dicos Sin Fronteras que est\u00e1 construida sobre el CMS Drupal.<\/li>\n\n\n\n<li>V\u00eddeos est\u00e1ticos en YouTube.<\/li>\n\n\n\n<li>Animaciones dise\u00f1adas con Adobe After Effects.<\/li>\n<\/ul>\n\n<p>El elemento cr\u00edtico adem\u00e1s del trabajo en equipo de MSF y DeMomentSomTres ha sido <strong>JavaScript<\/strong> y especialmente la <strong>librer\u00eda p5.js<\/strong>.<\/p>\n\n<p>La librer\u00eda p5.js es una librer\u00eda de JavaScript para crear gr\u00e1ficos y animaciones. Esta librer\u00eda fue fundamental para la personalizaci\u00f3n de la web, lo que permite que los usuarios interactuaran con elementos visuales de una forma diferente, a\u00f1adiendo capas que permiten la personalizaci\u00f3n que hace que cada visita sea \u00fanica. P5.js nos ha permitido ejecutar en la web las animaciones creadas en After Effects personalizando su contenido.   <\/p>\n\n<p>Los desarrollos en JavaScript han terminado de atarlo todo y hacerlo m\u00e1s ligero: la captura de datos del formulario, el c\u00f3digo de p5.js, las API de YouTube y la personalizaci\u00f3n de los enlaces por compartir.<\/p>\n\n<h2 class=\"wp-block-heading\">Todos tenemos una l\u00ednea roja<\/h2>\n\n<p>Con la nueva web de <a href=\"https:\/\/www.msf.es\/nuestralinearoja\" target=\"_blank\" rel=\"noopener\"><strong>Nuestra L\u00ednea Roja<\/strong>,<\/a> no solo hemos creado una plataforma digital, sino que hemos contribuido a <strong>una causa real<\/strong>. El marketing digital debe estar al servicio de las personas, y en este proyecto hemos logrado combinar <strong>tecnolog\u00eda, implicaci\u00f3n personal y apelar a las emociones <\/strong>para crear una experiencia diferente para cada usuario.<\/p>\n\n<p>Esta web es una muestra de c\u00f3mo, con <strong>la aplicaci\u00f3n de las herramientas adecuadas<\/strong>, podemos crear webs que ayuden a las personas a volcarse en las causas justas y <strong>conectar con ellas<\/strong>.<\/p>\n\n<p>Si necesitas crear experiencias digitales, interacciones en tiempo real o quieres que tu web quede en la memoria de los usuarios, \u00a1<a href=\"https:\/\/www.demomentsomtres.com\/es\/contacto\/\">ponte en contacto con nosotros<\/a> y empezamos a trabajar!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En esta casa llevamos a\u00f1os trabajando con M\u00e9dicos Sin Fronteras. En todo este tiempo, hemos tenido la oportunidad de crear soluciones a medida para las necesidades de una de las organizaciones m\u00e1s comprometidas con los derechos de las personas. Hoy te contamos de la \u00faltima colaboraci\u00f3n y c\u00f3mo hemos resuelto los retos que se nos [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":23944964,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"video","meta":{"_acf_changed":false,"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[796,3855,4444],"tags":[3924,4522,4469],"class_list":["post-23944973","post","type-post","status-publish","format-video","has-post-thumbnail","hentry","category-blog-comunicacion-marqueting","category-desarrollo-de-software","category-ux-es","tag-storytelling-es","tag-ui-es","tag-ux","post_format-post-format-video"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/posts\/23944973","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/comments?post=23944973"}],"version-history":[{"count":6,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/posts\/23944973\/revisions"}],"predecessor-version":[{"id":25815228,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/posts\/23944973\/revisions\/25815228"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/media\/23944964"}],"wp:attachment":[{"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/media?parent=23944973"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/categories?post=23944973"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/tags?post=23944973"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}