Tecnologías web modernas al servicio del marketing de contenidos.

El marketing de contenidos ha sido durante mucho tiempo limitado, no solo a escribir textos de calidad. Los profesionales de marketing y los diseñadores web utilizan imágenes, audio y videos para revitalizar el contenido estático. Sin embargo, durante el año pasado, el marketing de contenidos ha alcanzado un nivel completamente nuevo gracias al contenido interactivo.

Tomemos, por ejemplo, el nuevo proyecto del diario electrónico The New York Times con el colorido nombre de Snowfall ("Snowfall"). Este sitio combina armoniosamente videos, imágenes y una historia interesante, es decir, los mejores elementos de las tecnologías web.

Por supuesto, el portal anterior es el resultado del arduo trabajo de un equipo profesional, que ha realizado grandes esfuerzos durante largos meses. Y puede tener la impresión de que con un presupuesto limitado, no se pueden lograr los mismos resultados.

Estas equivocado

Las tecnologías subyacentes a este proyecto no son un secreto detrás de siete sellos, y puede ver fácilmente el código completo del programa de las páginas web. Para ello, vaya al sitio, haga clic con el botón derecho en el fragmento correspondiente y seleccione la opción "Ver código de elemento" (si tiene Google Chrome), "Inspeccionar el elemento" (si es Opera) y Explore el elemento (si es Mozilla Firefox). Si desea ver el código completo de la página, simplemente presione ctrl + u. Esta combinación de teclas funciona en todos los navegadores listados.

Después de hacer esto, puede ver con sus propios ojos cómo los desarrolladores pudieron lograr resultados tan sorprendentes e incluso utilizar su tecnología en su práctica. Por cierto, algunos desarrolladores web inteligentes ya han aprovechado esto. Por ejemplo, la compañía Usvsth3m, que creó una parodia interesante del proyecto Snowfall, o la compañía ScrollKit, que logró hacer una copia exacta del proyecto en una hora.

Por supuesto, pocos pueden presumir de un excelente conocimiento de los lenguajes de programación, pero la esencia del asunto no cambia. Si su actividad está relacionada de alguna manera con el marketing de contenidos, debe comprender al menos los conceptos básicos de las tecnologías web modernas para ofrecer dichos proyectos a sus clientes. En este artículo veremos las últimas herramientas de marketing de contenido y las tecnologías subyacentes. Trataremos de presentarlos de la manera más simple y clara posible para que incluso aquellas personas para quienes la programación web es un "bosque oscuro" puedan entender.

Imágenes de desplazamiento

Veamos un ejemplo simple. Concert Hotels ha publicado en su sitio web una imagen interactiva que muestra la capacidad de memoria de un iPod clásico, expresado en discos de vinilo. Solo debe hacer clic en la flecha hacia abajo y comenzará a cargar una pila completa de registros que imitan la capacidad del iPod. Gracias a esta simple recepción, comprendemos de inmediato la esencia del asunto. Además, esta imagen recibió más de 26,000 participaciones en redes sociales. Los resultados hablan por sí mismos:

Desde un punto de vista técnico, la creación de esta imagen es un par de trivialidades. Hannah Smith, que es uno de sus desarrolladores, incluso se preocupó porque era demasiado simple. De hecho, la pila de registros que ve delante de usted es solo una imagen, que se repite una y otra vez hasta que se obtiene el volumen requerido. De hecho, usted elige la cantidad de imágenes que desea ver en la pantalla y luego inicia el ciclo, durante el cual la imagen se repite hasta que se alcanza el valor especificado.

El script de imagen se puede encontrar en el código fuente. Es bastante simple. Incluso puedes extraer el código y ver cómo funciona en la práctica.

¿Quieres crear el mismo contenido? Debe aprender el lenguaje JavaScript, así como una de sus bibliotecas, jQuery.

Cálculos

Una de las últimas tendencias en marketing de contenido es la adaptación de contenido para cada visitante del sitio. Esto se puede lograr con la ayuda de cálculos matemáticos que se llevan a cabo "detrás de la escena". Aplicando un poco de magia con la ayuda de códigos especiales, puedes obtener un resultado similar.

Veamos esta técnica en el ejemplo del sitio SeeYourFolks:

Los desarrolladores del sitio solo necesitaron un día para crear este recordatorio efectivo de la importancia de los lazos familiares. Además, tenemos un gran ejemplo del uso de las matemáticas para crear contenido.

El principio de usar esta forma es bastante simple. Es necesario ingresar información sobre dónde vive, la edad de sus padres y la frecuencia con la que los ve durante todo el año. Luego, el sitio calcula automáticamente cuántas veces puedes verlos mientras están vivos.

Esto sucede de la siguiente manera:

  • Cuando ingresa el nombre de su país, a cada uno de ellos se le asigna un valor específico basado en la esperanza de vida promedio en un país en particular;
  • La edad de tu madre y tu padre se dobla y se divide por la mitad para obtener un promedio;
  • Este valor promedio se resta de la esperanza de vida promedio;
  • El número resultante se multiplica por el número de sus reuniones anuales con sus padres;
  • El resultado se redondea.

También hay otro código que se ejecuta si ingresa la edad de solo uno de los padres, así como un esquema de activación que se activa si la edad de sus padres supera la esperanza de vida promedio en su país. Puedes ver todo el código haciendo clic en este enlace. Como puede ver, está claramente marcado, para que pueda comprender fácilmente lo que significa.

¿Quieres crear el mismo contenido? Necesitas aprender información sobre cómo realizar cálculos con JavaScript.

Infografías interactivas

La infografía estática es ayer. Si quieres sorprender a tus clientes, hazlo interactivo. Un excelente ejemplo de infografías dinámicas se presenta en el sitio web de la compañía Town Center Car Parks, que proporciona servicios de estacionamiento. A diferencia de los ejemplos anteriores, JavaScript, en este caso, solicita una página en el propio sitio web para generar resultados y luego cambia dinámicamente el contenido de las páginas.

Esta infografía anima a los conductores a dejar sus autos en el estacionamiento la noche de Navidad. De hecho, durante las vacaciones es imposible resistir la tentación de beber alcohol y, como saben, conducir en estado de ebriedad está cargado de graves consecuencias.

Los visitantes del sitio tienen la oportunidad de simular la situación real. En la parte superior de la página hay varias bebidas alcohólicas, seguidas de un contador que indica la cantidad de unidades de alcohol que ha consumido. El contenido de la página cambiará dependiendo de su elección. Por ejemplo, si planea tomar 6 copas de champán por noche, el contador mostrará el siguiente resultado:

Si elige una bebida diferente, los resultados serán diferentes y, por lo tanto, el código fuente cambiará. Supongamos que decides limitar un vaso de vodka. En este caso, el contador mostrará la unidad, pero se te avisará:

"Tal vez no exceda el límite permitido, pero no olvide que el alcohol actúa de manera diferente en diferentes personas. Por lo tanto, la solución más segura es dejar el automóvil en el estacionamiento e ir a casa en taxi".

De ahí la conclusión: su contenido no tiene que ser estático, puede cambiar, lo que refleja la elección de su audiencia. ¿Por qué escribir un artículo enorme que describa todos los resultados posibles cuando puede crear una infografía que muestre información relevante para un lector en particular?

¿Quieres crear el mismo contenido? Examine la información sobre cómo se usa JavaScript para solicitar páginas, así como las características del DOM.

Desplazamiento de página

En algunos sitios, el contenido cambia según su posición en la página. Un buen ejemplo es The Future of Car Sharing. A pesar de que, en este caso, JavaScript se vuelve a habilitar, muchos elementos de diseño se crean gracias al lenguaje CSS. Considera la siguiente imagen:

¿Puedes creer que todas estas colinas son elementos de CSS que se superponen entre sí? En caso de duda, puede verlos en el archivo CSS principal.

En él, recibirá información sobre cómo se fijan en su lugar todos los elementos de la imagen. A primera vista, parecen ser dinámicos, pero, de hecho, la mayor parte de la imagen de fondo es fija. Sólo un vehículo y algunas partes interactivas se están moviendo.

Supongamos que está interesado en cómo se pone en movimiento el plano ubicado al principio de la página. Para hacer esto, abra la infografía y vea el código del artículo (cómo hacerlo, escribimos arriba). Verá que hay un código especial que cambia la posición de la parte inferior de la aeronave, creando así la ilusión de su movimiento.

¿Quieres crear el mismo contenido? Aprende CSS y animación en JavaScript. Además, el conocimiento de HTML 5 no interferirá para formatear correctamente el código.

Y de nuevo sobre el proyecto Snowfall.

Desafortunadamente, en el campo de la comercialización de Internet aún no ha aparecido el término exacto para describir el contenido, como Snowfall. A pesar de esto, la cantidad de tales ejemplos crece constantemente cada día.

    En su esencia, el proyecto Snowfall consta de los siguientes elementos:

  • Contenido de texto de alta calidad;
  • Video en formato MP4 (puede parecerte que estas son solo imágenes dinámicas, pero, de hecho, estos son videos que se pueden reproducir);
  • Imágenes adecuadas;
  • Buen diseño de página.

Por lo tanto, el proyecto Snowfall se ha convertido en un soplo de aire fresco para los usuarios de Internet, ya que combina armoniosamente todos los elementos anteriores. Desde un punto de vista técnico, es bastante sencillo extraer elementos individuales y ver cómo funcionan. Por ejemplo, las imágenes se activan cuando se alcanza una determinada posición en una página. En este caso, el complemento Inview fue utilizado para este propósito. Hay otra forma de lograr este efecto. Para hacer esto, necesita usar JavaScript para ejecutar imágenes en un punto específico de la página web. Por ejemplo, en uno de los artículos en Pitchfork, la imagen cambia con cada desplazamiento del mouse.

Si observa el código de la página, queda claro que este efecto se logra a través de un conjunto de imágenes con el nombre (XXXX-1.jpg), etc., así como un script que requiere que la página muestre las imágenes XXXX-1 (+ 1 ) .jpg con cada desplazamiento hacia abajo hasta que se agoten. En otras palabras, el script primero muestra la imagen XXXX-1.jpg, luego XXXX-2.jpg, hasta que su lista se agota. Como puedes ver, todo es muy simple.

Y unas palabras sobre el proyecto Snowfall. Como se mencionó anteriormente, un diseño de calidad es uno de sus componentes más importantes. Este es otro buen ejemplo del uso del lenguaje CSS para posicionar visualmente los elementos en una página. Lo bueno es que los autores del proyecto no hicieron el diseño demasiado fantasioso. No interfiere con la percepción del texto, e incluso, por el contrario, lo hace más figurativo y comprensible.

¿Quieres crear el mismo contenido? The New York Times ha proporcionado a sus lectores una historia detallada de la creación de este proyecto. Solo queda conocerlo.

Por favor, tenga en cuenta el texto en inglés.

Resumamos

El futuro del marketing de contenidos estará determinado por las tecnologías web, tanto antiguas como nuevas. Lo más importante es usarlos correctamente para complementar con éxito el contenido textual principal. Incluso si los conceptos de jQuery, CSS y JavaScript te parecen nuevos e intimidantes, no te desesperes. Con el tiempo, comenzará a entenderlos y, a continuación, le será más fácil comprender las tecnologías que subyacen a los diferentes tipos de contenido.

Por supuesto, no puede crear contenido integrado y de alta calidad sin la ayuda de desarrolladores y diseñadores web profesionales. Sin embargo, debe tener al menos una comprensión general de las tecnologías web si trabaja en el campo del marketing de contenidos.

¿Está familiarizado con otras últimas tecnologías de marketing de contenidos? ¿Los usas al crear contenido en tu sitio web? Damos la bienvenida a sus comentarios.

Loading...

Deja Tu Comentario