Estilo de hilos de comentarios

Los hilos de comentarios son una de esas cosas que parecen realmente simples cuando se ejecutan correctamente. Al diseñarlos usted mismo, es posible que descubra que son engañosamente simples. Hay muchas cosas involucradas en el diseño de hilos de comentarios agradables y utilizables, y en este artículo, haré todo lo posible para guiarte a través de los pasos para crear un hilo de comentarios, que sea fantástico de muy y divertido de usar.

¿Qué hace que un hilo de comentarios sea bueno?

Antes de sumergirnos en el diseño y la escritura de código, analizamos lo que realmente constituye un buen hilo de comentarios. Un siguiente buen hilo de comentarios tendrá las características:

1. Los comentarios son legibles y todos los puntos de datos importantes son visibles para el usuario de un vistazo. Esto incluye el autor, el número de votos, la marca de tiempo y el contenido.
2. Las diferentes partes de los comentarios son visualmente distintas, de modo que el usuario puede entender inmediatamente qué es qué. Esto es especialmente importante para los botones de acción (por ejemplo, responder, informar) y los enlaces.
3. Debe haber señales visuales para las jerarquías entre los comentarios. Este es un requisito para tener comentarios anidados, es decir, un comentario es una respuesta a otro.
4. Debería haber una manera fácil de desplazarse rápidamente a un comentario, especialmente al comentario principal de sus hijos (es decir, respuestas).
5. Los comentarios también deben tener una función de alternancia que permita a los usuarios ocultar y mostrar el comentario y sus respuestas.

Como puedes ver, ¡eso es mucho que considerar! También hay algunas cosas interesantes que cubriremos en este artículo, pero que sin duda son buenas mejoras:

1. Los usuarios deberían poder marcar un comentario para que un moderador esté al tanto del contenido inapropiado.
2. Un comentario puede ser votado a favor o en contra como una forma de señalar comentarios útiles e inútiles.
3. Sólo se muestran los primeros comentarios y el usuario puede cargar más comentarios.

Las funciones anteriores requerirían al menos un poco de JavaScript para funcionar. Además, dependiendo de la pila tecnológica, estas funciones podrían implementarse en el lado del servidor, especialmente realizando un seguimiento del número de votos y el estado de los comentarios. Es por eso que en este artículo nos centraremos únicamente en diseñar los hilos de comentarios. Dejando eso de lado, eliminamos el primer conjunto de puntos y diseñamos nuestro hilo de comentarios.

Un hilo de comentarios básicos.

Un comentario por sí solo tiene una estructura bastante simple. Aquí hay un esqueleto de un solo comentario:

Hasta ahora, todo bien. Observa cómo las respuestas tienen un margen extra a la izquierda. Esto está destinado a satisfacer la jerarquía visual (punto 3 anterior). El marcado de la estructura anterior podría verse así:

div  !-- Comment heading start --  div    !-- Comment voting start --    div      button type="button"Vote up/button      button type="button"Vote down/button    /div    !-- Comment voting end --    !-- Comment info (author, # of votes, time added) start --    div      a href="#"{{ author }}/a      p        {{ # of votes }} • {{ time_added }}      /p    /div    !-- Comment info (author, # of votes, time added) end --  /div  !-- Comment heading end --  !-- Comment body start --  div    p      {{ comment_content }}    /p    button type="button"Reply/button    button type="button"Flag/button  /div  !-- Comment body end --  !-- Replies start --  div    !-- ... --  /div  !-- Replies end --/div

No hay nada que explique aquí, sólo un montón de contenedores con algunos elementos básicos. En lugar de eso, veamos un ejemplo de la vida real, con un comentario que también tiene una respuesta.

Se ve muy bien, ¿verdad? El ejemplo anterior satisface los primeros tres puntos, por lo que ya estamos en camino. Algunas cosas que hay que entender sobre el código anterior:

• Las respuestas reciben un margen adicional en el lado izquierdo para proporcionar una pista visual de la clasificación.
• Los botones de votar a favor y en contra utilizan códigos de caracteres HTML para los íconos.
• La clase de .sr-onlyelementos ocultos en todos los dispositivos excepto en los lectores de pantalla. Esto hace que los botones de votación sean accesibles. Si está utilizando un marco, como Bootstrap o Halfmoon , esta clase se empaqueta automáticamente.

Agregar enlaces que salten a los comentarios

Ahora que tenemos un hilo de comentarios básico, agregamos una función para ayudar a los usuarios a desplazarse rápidamente a un comentario. Como se mencionó anteriormente, esto es especialmente útil cuando alguien quiere saltar al comentario principal de una respuesta.

Para construirlo, debemos decidir cómo se verán estos enlaces. Si bien esto es completamente subjetivo, un diseño en particular que realmente me gusta es un “borde” en el que se puede hacer clic en el lado izquierdo del comentario, algo como esto:

Para acomodar el enlace, empujamos el cuerpo del comentario hacia la derecha y lo alineamos con las respuestas. Este diseño también tiene el beneficio adicional de reforzar la jerarquía entre los comentarios, porque simplemente puede observar la cantidad de enlaces de borde a la izquierda y determinar el nivel de anidamiento del comentario que está leyendo actualmente. Y, por supuesto, también puedes saltar inmediatamente a cualquier nivel superior haciendo clic en los enlaces del borde.

Para crear realmente estos enlaces de borde, necesitamos agregar elementos de anclaje ( a href="...") dentro de cada uno de nuestros comentarios y diseñar estos elementos de anclaje para que se parezcan a los bordes en los que se puede hacer clic. Agreguémoslos a nuestro primer ejemplo de código anterior.

Aquí hay algunas cosas que debes comprender sobre los cambios realizados:

• Los enlaces de anclaje se agregan dentro de cada uno de los comentarios y tienen un estilo que parece bordes en el lado izquierdo.
• El cuerpo del comentario ahora está alineado con las respuestas.
• El .comment-heading(que contiene los votos, el autor y el tiempo agregado) tiene un valor fijo heightde 50px. Por lo tanto, al darle a los enlaces de borde las propiedades de position:absolute, top: 50pxy height: calc(100% - 50px), nos aseguramos de que comenzarán justo debajo del encabezado y llegarán hasta el final del comentario. Si no está familiarizado con la calc()función, puede leer esta interesante guía de Chris.
• Los enlaces de borde tienen un fondo recortado y también reciben un widthde 12pxjunto con un border-widthde 4pxa la izquierda y a la derecha. Esto significa que, si bien el área visible es solo 4pxamplia, el área real en la que se puede hacer clic es 12pxamplia. Una superficie más amplia es para ayudar a los usuarios a tener más facilidad para colocar sus punteros en el enlace y hacer clic en él, porque 4pxes demasiado estrecho, pero cualquier cosa más ancha se vería mal visualmente.

Con todo eso, hemos eliminado los primeros cuatro de los puntos mencionados anteriormente. Agreguemos más comentarios al ejemplo de código para ver cómo quedaría.

Permitir a los usuarios ocultar/mostrar comentarios con un clic

En este punto, tenemos un hilo de comentarios bastante satisfactorio. Este diseño por sí solo puede funcionar para muchos casos de uso de la vida real. Sin embargo, vayamos un paso más allá y agreguemos nuestra función de alternar, es decir, ocultar y mostrar comentarios con un clic.

La forma más rápida y sencilla de permitir a los usuarios ocultar y mostrar comentarios con un clic es utilizar los elementos detailsy summary. En pocas palabras, la visibilidad de todo detailsse puede alternar haciendo clic en el botón summary. No hay JavaScript involucrado y estas etiquetas son compatibles con aproximadamente el 96 % de los navegadores en este momento. Una vez más, si no está familiarizado con estos conceptos, puede obtener más información en otro artículo de Chris.

De todos modos, para implementar esto realmente, debemos realizar los siguientes cambios en nuestro código:

• Cambie los comentarios de diva details, es decir, todos los elementos de la clase .commentahora serán un detailselemento.
• Envuelva el encabezado del comentario ( .comment-heading) dentro de una summaryetiqueta.
• Proporcione una señal visual al usuario para decirle si un comentario está oculto o no.

Parece bastante fácil. De todos modos, aquí está nuestra nueva implementación:

Estos son los aspectos finales que debe comprender sobre los cambios realizados:

• Los comentarios ahora son detailsy a todos se les asigna el openatributo, por lo que son visibles (es decir, abiertos) de forma predeterminada.
• Los encabezados de los comentarios ahora están dentro de summaryetiquetas. La flecha predeterminada también se elimina.
• La señal para el estado de visibilidad de los comentarios se crea principalmente mediante texto pequeño a la derecha del comentario. El contenido de este texto cambia dependiendo de si el detailselemento padre tiene el openatributo o no. El texto en sí es un pseudoelemento simple creado mediante el ::afterselector. Además, los comentarios cerrados también tienen un borde en la parte inferior para mostrar a los usuarios que hay más que ver.
• Al final del código CSS, encontrará algunos estilos dentro del @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {...}selector. Este es un truco que sólo apunta a Internet Explorer. Verá, IE no es compatible details, por lo que siempre están abiertos allí de forma predeterminada. Al eliminar el texto y restablecer el cursor, los usuarios de IE verán un hilo de comentarios normal, solo que sin la posibilidad de alternar la visibilidad de los comentarios. Entonces, no hay daño, no hay falta.

Menciones honoríficas

Antes de finalizar este artículo, hablemos de algunas cosas más que vale la pena considerar al diseñar hilos de comentarios en aplicaciones de la vida real.

¿Qué pasa si el hilo de comentarios no tiene comentarios para mostrar?

Este puede ser un problema muy sencillo de resolver, pero a menudo es fácil pasar por alto estas cosas sencillas. Si un hilo de comentarios no tiene ningún comentario (estado vacío), debemos comunicárselo claramente al usuario. Un párrafo simple que contiene la línea "Aún no hay comentarios". junto con un formulario que contenga un cuadro de texto y un botón de enviar, puede ser de gran ayuda y debe ser lo mínimo cuando se trata de estados vacíos. Si desea hacer un esfuerzo adicional, también puede tener una imagen bonita (que comunique el mensaje) acompañando al formulario.

¿Cómo manejar el formulario para responder a un comentario?

Cuando se trata del formulario para responder a un comentario, diferentes sitios web tienen diferentes implementaciones. Algunos utilizan la forma antigua de redirigir a los usuarios a una nueva página que contiene el formulario: un simple cuadro de texto con un botón de envío. Otros abren un formulario directamente dentro del hilo de comentarios, generalmente con un simple cambio. El último paradigma obviamente requiere JavaScript, pero es más popular hoy en día. Por ejemplo, en nuestro ejemplo anterior, podríamos tener un formulario simple que se puede alternar haciendo clic en el botón Responder , así:

En el ejemplo anterior, agregamos formularios simples dentro de los cuerpos de los comentarios y les asignamos la clase .d-nonepredeterminada, que los establece display: none;y los oculta de la vista. Gracias al simple detector de eventos, se puede hacer clic en cualquier botón con los atributos data-toggle="reply-form"y para alternar la visibilidad de los formularios. data-target="{{ comment_reply_form_id }}Este es un ejemplo muy sencillo de cómo manejar los formularios de respuesta con facilidad.

¿Dónde colocar una nueva respuesta después de que un usuario haya terminado de publicarla?

Digamos que un usuario responde a un comentario usando un formulario similar al que se muestra arriba. ¿Lo muestra encima de las respuestas existentes o debajo? La respuesta es que siempre debe mostrarse encima de las otras respuestas justo después de que el usuario la publique por primera vez. Cuando una persona completa un formulario y lo envía, quiere recibir comentarios inmediatos que le digan que funcionó. Por lo tanto, al colocar la nueva respuesta encima de las demás, le brindamos esta retroalimentación al usuario sin que tenga que desplazarse hacia abajo. En cargas posteriores, por supuesto, puede organizar las respuestas a sus comentarios de acuerdo con el algoritmo que considere adecuado para su sitio web.

Manejo de Markdown y bloques de código

Muchos sitios web, en particular los blogs de desarrolladores, necesitan admitir rebajas y bloques de código en sus comentarios. Esta es una discusión mucho más amplia, que tal vez justifique un artículo dedicado a este tema. Sin embargo, por el bien de este artículo, digamos que existen muchos editores de Markdown que puedes adjuntar a un cuadro de texto con bastante facilidad. La mayoría de ellos funcionan con JavaScript, por lo que deberían ser bastante fáciles de integrar en nuestros ejemplos. Uno de esos complementos es Markdown-it , que tiene una licencia MIT permisiva. También puedes consultar los editores WYSIWYG , que también tienen un propósito muy similar cuando se trata de comentarios en la web.

Prevención de spam y autenticación de usuarios

Si proporciona a los usuarios un formulario para que proporcionen sus comentarios, puede garantizar que encontrará spam en su camino, por lo que obviamente este es un problema que debe abordarse al crear hilos de comentarios. Una excelente manera de reducir el spam es utilizar servicios como reCAPTCHA de Google. Por ejemplo, en nuestro ejemplo anterior, se podría colocar un cuadro reCAPTCHA justo debajo del botón Enviar en los formularios de respuesta. Esto protegería nuestro sitio web del abuso.

Otra forma de prevenir el spam es permitir que sólo los usuarios autenticados publiquen comentarios, es decir, un usuario debe tener una cuenta e iniciar sesión para publicar un comentario. Obviamente, cada comentario estaría vinculado a una cuenta, por lo que esto tiene la ventaja de permitir a los moderadores manejar a los usuarios que continuamente publican spam o contenido de bajo esfuerzo. En términos de manejarlo en la interfaz de usuario, una excelente manera de hacerlo es redirigir a los usuarios a una página de inicio de sesión cuando hacen clic en el botón Responder o Publicar comentario si no han iniciado sesión. Una vez que completen el proceso de autenticación, podemos simplemente redirigirlos nuevamente al hilo de comentarios y abrir el formulario.

---

¡Y hemos terminado! Hemos cumplido con nuestros cinco puntos y hemos diseñado un hilo de comentarios atractivo que es altamente utilizable y accesible, con algunas características interesantes como saltar a los comentarios y alternar la visibilidad de cada comentario. También hablamos sobre formularios dentro de hilos de comentarios y discutimos otras cosas a considerar en aplicaciones de la vida real. La mayor parte de nuestro hilo de comentarios funciona utilizando únicamente CSS (no JavaScript), lo que demuestra hasta dónde ha llegado realmente CSS.