Posts Tagged: html


12
Ago 10

Internet y la historia del correo electrónico

Para este nuevo artículo tenemos el honor de contar con la participación de nuestro Software Developer Rodrigo Fuentealba, quien ha querido plasmar toda su experiencia y años de circo, hablando de la historia de cómo nació y ha evolucionado el correo electrónico:

Un historiador dijo una vez que “todo lo que ocurre en el presente tiene explicación si se analiza el pasado“.

Betamax / Google Image

Quizás tenga razón, pero pocas veces recordamos el pasado en términos de tecnología. Olvidamos las RCA Victor, los televisores Westinghouse, la lucha VHS versus Betamax, los Personal Stereo y la aparición de los primeros CD. Sin embargo, no nos cuesta aprender a utilizar cada cosa nueva que sale en el mercado. Un reproductor multimedia como el que utilizamos en la actualidad tiene los mismos controles (Reproducir, Avanzar, Retroceder, Pausar, Detener) que nuestro Ipod.

Pero si hablamos de tecnología, no podemos no hablar de Internet, que también tiene su historia.

Nació como ARPANET en el Departamento de Defensa de los Estados Unidos en 1972, y era muy distinto de lo que es ahora. En primer lugar no era tan veloz (transferir un MP3 de 4 Mb en 1997 tomaba algo más de 8 horas, y cosas como YouTube o Grooveshark eran totalmente impensables).

Estas limitaciones también afectaban al correo electrónico como lo conocemos ahora. En el equipo de Fidelizador.com, los más computines veteranos cuentan cómo era el correo electrónico con la misma nostalgia con que otros recuerdan su primer televisor o su primera consola de videojuegos.

Antigüedad: Correos de Texto

¿El primer correo? /Google Image

Antes de 1995, escribir un correo electrónico era tan divertido como elaborar una carta con máquina de escribir. Este constaba de un encabezado y un cuerpo, donde el encabezado cumplía la misma función que un sobre normal: contenía el emisor y el receptor del mensaje y todas las firmas de las oficinas postales (o servidores de correo electrónico) por los que pasó, y el cuerpo contenía un texto rústico, en el que para marcar una palabra con negritas se le escribía entre *asteriscos* o para marcarla como cursiva, se le escribía entre _underscores_. Ah, y se podía enviar archivos adjuntos, pero no todos los clientes de correo lo soportaban.

Edad Media: Correos HTML

Con el paso del tiempo, la cantidad de gente que tenía acceso a una computadora y a Internet aumentó considerablemente, y junto con esto, surgieron proveedores de correo electrónico como Hotmail, Yahoo! y otros, que competían por posicionarse en la Internet como proveedores de vanguardia.

Una de las grandes cosas que se creó para ello fue la posibilidad de enviar correo electrónico con “formato enriquecido”, lo que consistía en agregar código HTML (utilizado para las páginas Web) en el cuerpo del email. Una complicación: no todos los clientes de correo electrónico soportaban correos en formato HTML, por lo que esta característica tuvo que volver a ser mejorada nuevamente.

Edad Moderna: Correos Multiparte

En ambas versiones del correo electrónico existían ventajas. El correo electrónico en modo texto era preferido para intercambiar información en universidades, mientras que el modo HTML permitía a empresas difundir su identidad corporativa de una nueva forma; mientras que a estas alturas, las limitaciones en términos de almacenamiento y velocidad de conexión ya habían desaparecido. La mejor forma de no perder funcionalidad es evidente: enviar el correo electrónico en ambas versiones, la de texto y la HTML, y el usuario elige qué versión utilizar, ofreciéndose por defecto en casi todos los clientes de correo la versión HTML por ser la más avanzada.

Básicamente, el correo Multiparte es una extensión del correo electrónico, en el que cada parte (incluyendo los archivos adjuntos) se separa de la anterior con una marca de límite (la versión electrónica del clásico - – - 8< corte aquí 8< – - -), y los archivos adjuntos se envían también como un sólo paquete de datos (no como en la antigüedad).

Edad Contemporánea: Correos Multiparte… pero mejor aprovechados.

En la actualidad hemos visto que, en vez de crear computadoras más potentes, han salido al mercado dispositivos portátiles. Para un usuario tecnológico, ya no basta tener un teléfono para hablar, sino que debe tener una serie de características como conectividad a Internet, cámaras fotográficas, reproducción de audio, video… y cómo no, correo electrónico.

Un smartphone común y corriente nos permite tomar una fotografía y enviársela por correo electrónico a un colega o inclusive compartirla en Twitpic o Flickr. Y para recibir correos electrónicos, en vez de tener toda esa tremenda cantidad de imágenes que nos saturan la pantalla, podemos siempre leer su versión de texto, que es mucho más cómoda.

También podemos gozar de plataformas como la de Fidelizador.com :) , que hace uso de muchas de las funcionalidades del correo electrónico (inserción de imágenes y colores, por ejemplo) para el Email Marketing y lo ponemos al servicio de nuestros clientes. Estamos trabajando para colocar a su disposición nuevas formas de utilizar el correo electrónico que es, a todas luces, la herramienta más versátil que existe en Internet.


11
Jun 10

Recomendaciones para diseñar un newsletter en HTML

Google Image

Cómo lo habíamos anticipado en nuestro post anterior, les queremos dejar algunos tips para elaborar un newsletter en HTML. Es importante conocerlo, ya que es parte de las buenas prácticas que se deben tener en cuenta cuando se realizan campañas de email marketing:

  • Un diseño lo más simple posible
  • Utilizar tablas (sí, tablas) y no divs para posicionar los elementos de nuestro newsletter. Preferentemente usar tablas diferentes para cada parte del contenido y evitar en lo posible, las tablas anidadas y la combinación de columnas.
  • Si queremos incluir un color para el fondo de nuestro newsletter deberemos crear una tabla de 100 % de ancho con ese color de fondo.No usemos hojas de estilo externas ni embebidas en el head. Podemos utilizar CSS sólo aplicando los estilos “in-line”, es decir repitiendo cada estilo dentro de cada etiqueta HTML mediante la propiedad style. Puede resultar tedioso, pero es la única forma totalmente segura de aplicar formato mediante CSS a un newsletter. Usando con inteligencia las funciones de buscar y reemplazar de cualquier editor podremos cambiar estilos sin tanto trabajo. Un ejemplo aplicado a un párrafo (el código y el resultado):

<p style=”font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: #f8f8e4; padding: 4px;”>Este texto debería verse dentro de un bloque con un fondo claro</p>

Este texto debería verse dentro de un bloque con un fondo claro

  • Si no tenemos tiempo o ganas de hacer esta tarea, podemos probar incluyendo las hojas de estilo dentro de los tags <body> y </body>. Esto funcionaba bastante bien hasta hace poco, pero no funcionará en Gmail por lo que si tenemos muchos suscriptores de ese servicio es preferible usar estilos “in line”. Otra opción es rescatar a nuestra vieja y ya obsoleta etiqueta <font>, para dar un formato sencillo al texto.
  • Utilizar un ancho fijo de menos de 600 px, para asegurarnos de que la mayoría de los dispositivos puedan mostrar decentemente nuestro diseño.
  • Subir las imágenes a un servicio de hosting (o hostearlas en el propio servicio web de envío) e incluir como ruta de todas las imágenes, la url absoluta de cada archivo de imagen. Por ejemplo: si tenemos una carpeta llamada “newsletter” en nuestro sitio, y usamos un editor como Dreamweaver, probablemente nos quede algo así en el código:

<img src=”logo.jpg” alt=”" />

Para que los usuarios que reciben el email puedan ver esa imagen deberemos reemplazar ese código por:

<img src=”http://www.ejemplo.com/newsletter/logo.jpg”>

  • Los vínculos deben también contener la ruta absoluta al archivo vinculado:

<a href=”http://www.ejemplo.com/pagina-de-ejemplo.htm”>

  • Diseñar el newsletter teniendo en cuenta que muchos suscriptores le darán una leída “por arriba” para ver si les interesa antes de decidirse a activar la descarga de las imágenes. Es importante que se vea medianamente bien aún en esas condiciones. Una sugerencia: indicar siempre el alto y ancho de cada imagen para que el “placeholder” (indicador de posición de imagen) tenga el mismo tamaño que la imagen original y no se desarme el diseño.
  • Si queremos que más gente lea y haga click en los links de nuestro Newsletter, nunca usemos imágenes para esos links ni para los títulos o contenidos relevantes.
  • Podemos usar el Dreamweaver u otra herramienta WYSIWYG pero, en última instancia, siempre tendremos que codificar “a mano” parte de nuestro newsletter. Si no estamos dispuestos a ensuciarnos las manos con el código, es mejor que le pasemos la tarea a alguien que pueda hacerlo.
  • Hagamos varias pruebas antes de enviar un newsletter. Recomendamos tener al menos un equipo con los principales programas de correo instalados y tener varias cuentas POP3 y de webmail que usemos para testear los resultados en cada sistema.

Fuente: The HTML Email Guide


17
Mar 10

Aprende a crear una aplicación de Facebook para tu empresa

Foto Blog Alvaro Véliz

¿Sabes de lenguaje Html?… entonces esto es lo que estabas esperando para crear tu propia aplicación de Facebook para tu empresa. Encontramos en un blog bastante interesante, una explicación detallada de cómo crear y personalizar una aplicación para esta red social.

Según el autor del blog,  Facebook soporta dos formatos de aplicaciones externas, aplicaciones creadas usando FBML y las que usan el no estandar iframe.

¿Suena complicado?, recuerda que todas las herramientas que sirven para potenciar las comunicación con los clientes son efectivas y sobre todo si tienen que ver con las redes sociales.

Aprende a construir tu aplicación aquí


1
Sep 09

¿Porqué una versión de texto de mi correo es importante?

Para que una campaña de email marketing sea exitosa, existen muchos factores que deben estar en armonía. Uno de estos es la importancia de enviar a nuestros contactos una versión de texto de los correos HTML.

  • No pierdas la oportunidad de llegar a tus suscriptores por todos los medios. Por eso, aquí en Fidelizador.com te damos algunos consejos para que tu correo tenga el éxito que esperas:
  • Algunos filtros de spam reconocen un correo electrónico que está llegando a ellos sólo con la versión HTML. Muchos remitentes de spam no incluyen una versión de texto cuando envían sus mensajes de correo electrónico, por lo que el filtro puede llegar a pensar que un spammer puede estar haciendo de las suyas.
  • Envío a grandes empresas: algunas de éstas no aceptan en sus bandejas de entrada correos con formato HTML, por eso es importante la inclusión de una versión de texto del correo para obtener una mejor respuesta.
  • Envío a celulares: puede ser una excelente alternativa mandar una versión corta del email a los contactos de los cuales se tenga el número de celular. Eso si, no hay que extenderse de los 20 a 30 caracteres, esto es lo que se denomina comunicación efectiva.

Fuente: Marketineros