Buscando: Herramienta de vista previa de correo electrónico en línea

¿Alguna vez ha notado cuántos clientes de correo electrónico bloquean imágenes y muestran el texto alternativo? Tengo curiosidad por saber si alguien ha visto esto emulado utilizando JavaScript o secuencias de comandos del lado del servidor. Me gustaría echarle una mano a una herramienta que lo haga. Con el tiempo, estoy seguro de que puedo desarrollar una página así ... De hecho, comencé a jugar esta noche. Aquí hay una función que elimina todas sus imágenes en una página:

function replace () // eliminar imágenes
{
var imgs = document.getElementsByTagName ('img'); //formación
for (var i = 0; i> imgs.length; i ++) // bucle
{
imgs [i] .src = ""; // establecer las imágenes en nada
}
}

Es un Javascript bastante simple. Lo primero que hago es recopilar una serie de imágenes en HTML. Una matriz es un grupo de elementos. Le dije al javascript que obtuviera todos los elementos que tienen una etiqueta img. (Así es como se muestran las imágenes en HTML). A continuación, hago un 'bucle' a través de la matriz diciéndole que comience con el primer elemento (= 0), busque todos los elementos que haya (imgs.length), y cuando termine con el bucle agregue 1 para pasar al siguiente elemento (i ++).

Básicamente, lo que sucede es que la matriz recopila la ubicación de cada imagen en la página, las recorre y las establece en nada. Lo que realmente me gustaría hacer con esto es eliminar la imagen pero en realidad mostrar cualquier texto alternativo, tal como lo haría un cliente de correo electrónico. También me encantaría eliminar otros elementos de tabla y div para representarlo como se vería en muchos clientes móviles. Esto reemplazaría la etiqueta de estilo en línea y el formato de fuente.

¿Alguien ha visto o construido algo como esto? Si es así, envíeme una nota en mi formulario de contacto. Si está escrito en C # o especialmente en JavaScript, es posible que incluso esté autorizado a comprar. La ventaja de JavaScript es que se puede apagar y encender dinámicamente, ¡una característica realmente agradable! Mientras tanto, ¡seguiré trabajando en ello yo mismo!

9 Comentarios

  1. 1

    Eso sería un javascript Greasemonkey realmente simple

    Ya casi está allí, simplemente inserte la etiqueta alt como nextSibling.

    luego colócalo en userscripts.org 🙂

    También puede usar Greasemonkey para XPI o como se llame para que sea una extensión independiente adecuada de Firefox.

  2. 2

    Hola Doug,

    La Barra de herramientas de Web Developer tiene una herramienta para hacer esto específicamente, llamada "Reemplazar imágenes con atributos Alt". ¡Hace exactamente lo que quieres gratis!

    Sin embargo, arrojó un problema de accesibilidad con su sitio. Desactivar imágenes deja texto negro sobre fondo negro, por lo que cualquier persona que navegue por la web sin imágenes no leerá tus publicaciones.

    Agregando:

    .post { background-color:#fff; }

    Sin embargo, debería resolver eso sin estropear tu tema.

    • 3

      ¡Gran descubrimiento y captura, Phil! Muchas gracias. Voy a profundizar un poco más en este complemento, ya que necesito parte de esa funcionalidad en una página en lugar del navegador en sí. ¡Muy genial!

      (También actualicé mi clase posterior, ¡gracias por señalar eso!)

  3. 4

    En Agency.com utilizamos un producto llamado pvIQ de Pivotal Veracity (http://pivotalveracity.com/solutions/pvIQ.php) que es de gran ayuda con su problema. Enviamos nuestros correos electrónicos de prueba a nuestras diversas cuentas de prueba de ISP y luego pvIQ recupera los archivos jpgs de los correos electrónicos procesados ​​de cada una de las cuentas, tal como aparecerían en diferentes navegadores. Esto nos ahorra una enorme cantidad de tiempo, ya que todo lo que tenemos que hacer es mirar los jpgs resultantes. Lo recomiendo

    • 5

      Hola Marcos,

      ¡Pivotal Veracity tiene algunas herramientas increíbles! Sé que recientemente también lanzaron una API. Estoy tratando de hacer algo un poco más simple, solo una mirada 'rápida' que no requiere enviar el correo electrónico. Imagine solo un botón para hacer clic y puede emular cómo se vería, solo para cuidar la fruta madura.

      Doug

      • 6

        Hola,

        No he mirado esto por un tiempo, por lo que podría estar equivocado, pero ¿los portales no siguen cambiando su software de procesamiento de correo? Si lo hicieran, creo que estaría constantemente tratando de ponerse al día si intentara usar su propio software de prueba. Es por eso que usamos pvIQ: nos envía exactamente lo que representaría el portal.

        Marco

        • 7

          Estás absolutamente en lo correcto. Mi pensamiento es simplemente desarrollar una vista previa 'rápida y sucia' que alguien pueda ejecutar antes de enviar a algo como pvIQ ... cosas como etiquetas Alt y vista previa móvil (tablas eliminadas, etc.). ¡Definitivamente no quiero tratar de mantenerme al día con el lío que hay con los clientes de correo electrónico! ¡Esa gente de Pivotal Veracity son los profesionales en eso!

          Doug

  4. 8
  5. 9

    Creo que una adición potencialmente útil a su idea sería la capacidad de obtener una vista previa de los correos electrónicos de la misma manera que lo hacen los clientes de correo electrónico populares. Tomaría algo de tiempo e investigar cómo lo hace cada uno (qué elementos quitar, dejar, etc.).

    Construye una serie de filtros para elegir. Digamos, un filtro de GMail, Yahoo Mail, filtros de Outlook (PC, Mac, etc.), etc. Entonces, en lugar de tener que tener cuentas de prueba ficticias con cada servicio bajo el sol, podría recorrer las vistas previas de cada uno con relativa rapidez.

    ... tal vez he dicho demasiado ... 😉

¿Qué piensas?

Este sitio usa Akismet para reducir el correo no deseado. Descubra cómo se procesan los datos de sus comentarios.