Descubre cómo añadir una portada animada a tu artículo HTML

La tecnología avanza cada día más y hemos de estar atentos a todas las novedades que se producen para poder obtener el máximo partido de ellas. En el caso del diseño editorial, existen numerosas herramientas y recursos con las que hacer de las publicaciones digitales algo sorprendente y diferente. Podemos ser mucho más creativos que en el caso de las ediciones impresas, utilizando recursos como el de las interactividades, vídeos o animaciones que nos permitirán no sólo mejorar la experiencia de usuario sino también aumentar el engagement con nuestros lectores, entre otras ventajas.

Uno de los mayores errores que se comenten es querer reproducir con total exactitud en Internet la versión impresa de la revista. Los artículos son los mismos, pero es la forma de contar las historias es la que hace diferente cada publicación. ¿Por qué no utilizar las herramientas que tenemos a nuestro alcance para destacar? ¿Por qué quedarnos en las revistas digitales cuando podemos hacer apps de publicaciones interactivas? 
 
Por todo ello, hoy hablamos de cómo añadir una portada animada a tu artículo HTML. Una portada que se reproducirá antes de verse el artículo como tal y que se podrá omitir deslizando con el dedo o al cabo de un tiempo, como prefieras. En este tutorial, además de mostrarte los pasos a seguir , encontrarás un ejemplo de portada animada para que puedas probarla tú mismo.

Ejemplos de publicaciones con  portada animada

Portada_NewyorkerLos medios de comunicación tradicionales hace ya tiempo que comenzaron a utilizar recursos digitales en sus ediciones online. Una de las revistas más prestigiosa del mundo, “The New Yorker”, destacó hace años por su originalidad dando vida a una de sus portadas en la edición digital, cuya imagen se publicó tanto en su página web como en las aplicaciones móviles. Aunque era un sencillo gift, supuso un gran paso hacia la adaptación digital y plantó la semilla de la innovación en el sector editorial. 

Tras esta portada animada vinieron muchas más y hoy en día es un recurso muy utilizado para dotar de dinamismo  e interactividad a las publicaciones digitales. Si quieres ver algún ejemplo más, EDRevista, la app de la revista “Enfermería en Desarrollo” que ha sido desarrollada con la tecnología de 480interactive, incluye este tipo de efectos en las portadas de sus publicaciones.

Sorprende al usuario desde la primera página

¿Te imaginas comenzar tu revista o publicación con una portada de revista que parezca sacada de un anuncio? Al dotar de este tipo de efectos a nuestras publicaciones conseguimos sorprender al usuario desde el primer momento e incentivarle a descubrir que más sorpresas se esconden en las siguientes páginas de la publicación. 

En este tutorial te mostramos como trabajar con lenguaje HTML y así poder adaptarlo como portada animada. Es muy recomendable seguir todos los pasos para tener claro cómo funcionan los artículos HTML y tener los archivos necesarios para añadirle la portada a continuación. Además, dentro del tutorial también podrás descargar una portada animada de prueba para comprobar el resultado final. 

Botón-tutorial

El juego que aporta la interactividad de una revista digital al usuario en una tablet no tiene límites, ofreciendo un mundo de posibilidades tanto para el editor, como para el cliente además del anunciante. Recordemos que los anuncios en las revistas digitales no son una página estática, sino que se pueden dotar de interactividad y hacer que el usuario dedique parte de su valioso tiempo a interactuar con el anuncio. ¿Qué mejor manera de vender una marca?

portadaanimada_ok

Si quieres aplicar mayor interactividad a tus publicaciones digitales así como crear tu propia app de revista, recuerda que puedes encontrar este y muchos otros tutoriales como recursos prácticos en el centro de soporte de 480interactive.

Fuentes del artículo:

Quizá te interese:

Descarga gratis 480interactive y empieza a crear tus propias apps sin programar

partner_footer