Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. JavaScript

Consejo rápido: diseño de contenido restringido para editores en línea

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

Muchos periódicos populares en línea (por ejemplo, The Wall Street Journal, Le Figaro, The Telegraph) ofrecen contenido gratuito, pero requieren que los usuarios compren una suscripción si desean una lectura ilimitad

Y en un mundo donde muchas personas esperan que el contenido en Internet sea gratuito, encontrar el modelo de pago más adecuado es un desafío continuo para los editores en línea.

"Uno de los desafíos más esenciales de todos los tiempos para el periodismo es su sustentabilidad económica." (Aurelija Gackaitė)

Toma como ejemplo una publicación de The Wall Street Journal, en la que los usuarios tienen permitido ver un extracto de un artículo de forma gratuita, pero necesitan suscribirse para obtener acceso a la pieza completa:

A post from The Whole Street Journal

En este breve tutorial, usaremos JavaScript para imitar este comportamiento. Primero vamos a crear una publicación con contenido restringido enmascarado por un degradado, y luego dejaremos que los usuarios suscritos desplieguen la publicación completa.

Este es nuestro ejemplo de demostración:

1. Comienza con el marcado de la página

Vamos a comenzar usando el elemento article para representar una entrada de blog o un artículo periodístico típicos. También lo envolveremos en el interior de un .container para establecer un ancho máximo de página.

Este es el marcado correspondiente:

2. Agrega el CSS

De forma predeterminada, agregaremos una clase not-member al elemento html (aquí estamos usando la herramienta Add Class (Agregar clase) proporcionada por CodePen):

Add the not-member class to the html element

Esto garantiza que solo una pequeña parte de la publicación sea visible inicialmente para los lectores:

The restricted post content

De manera más específica, solo mostraremos el encabezado, los dos primeros párrafos y los enlaces de llamada a la acción. Hacemos esto usando el "combinador de hermanos general" para seleccionar todo lo que esté después del segundo párrafo (p:nth-child(2) ~ *) en donde .not-member esté presente:

A continuación agregaremos algunos estilos al último párrafo visible (el segundo). Ocultaremos gradualmente su contenido y agregaremos un icono en forma de candado sobre él. Estos estilos indicarán a los lectores que el acceso al artículo completo está restringido.

Este es el CSS necesario para esta parte:

Para completar estas reglas básicas de estilo, aplicaremos un estilo a la sección de llamada a la acción:

3. Desbloquea el contenido prémium

Para los fines de nuestra sencilla demostración, supongamos que un lector se convierte en un miembro prémium cada vez que hace clic en una llamada a la acción.

En nuestro caso, en ese momento la clase not-member se elimina del elemento html y el contenido completo de la publicación se vuelve visible.

Este es el código JavaScript responsable de esa funcionalidad:

En el momento en el que la publicación completa aparece, no hay necesidad de aplicar un estilo al segundo párrafo de forma diferente ni hay que mostrar las llamadas a la acción iniciales. Así que ocultemos todo eso:

Finalmente, podemos reiniciar el proceso de suscripción o cancelación de la misma haciendo clic en el enlace Unsubscribe/Sign Out (Cancelar suscripción/Cerrar sesión) que se encuentra en la parte inferior del contenido de la publicación:

UnsubscribeSign Out link

Este es el código JavaScript necesario:

Conclusión

En este tutorial rápido, creamos una demostración sencilla que cubrió algunas ideas para estilizar contenido restringido. Los grandes periódicos y editoriales en línea usan técnicas similares, pero tal vez tú puedas encontrar un uso para esto por tu cuenta.

Nosotros solamente simulamos la suscripción, por lo que, para implementar esto correctamente, tendrías que desarrollar el proceso de registro en segundo plano. Y es importante tener en cuenta que el contenido que hemos ocultado solamente está oculto visualmente: la fuente de la página aún tiene el contenido restringido. Ten en cuenta esto si estás publicando material verdaderamente confidencial.

Como siempre, ¡gracias por leer!

¡Lee todos los detalles!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.