Clicky

Cómo construir un bloque de comentarios anidados con HTML5 y CSS3

Comentarios anidados

Estructuración del documento HTML5 y cómo colocar los elementos con CSS

Blogs y foros a menudo muestran respuestas anidadas en los comentarios. Las populares redes sociales Reddit y Hacker News admiten comentarios anidados que permiten a los usuarios responder directamente en línea con los comentarios, expresando una opinión sin perderse en la confusión.

Vamos a mirar la construcción de una sencilla distribución de comentarios anidados con HTML5 y CSS3. No vamos a utilizar efectos jQuery en los bloques de comentarios (aunque es posible extender esta funcionalidad). Vamos a mirar en la estructuración del documento HTML5 y cómo colocar los elementos con CSS. A partir de esta plantilla base, debe ser fácil para los desarrolladores realizar sus propias personalizaciones e implementar un bloque de comentarios anidados en cualquier diseño de página web.

Antes de empezar, puedes echar un vistazo a la demo para ver lo que vamos a construir. Si quieres, puedes descargar el código fuente desde aquí.

La construcción de la cabecera de página

Empezaremos por mirar la plantilla de HTML básica utilizada en este diseño. Me atengo al doctype HTML5 codificados en UTF-8, junto con algunos otros elementos de HTML5. Para los navegadores más antiguos que Internet Explorer 9 se incluye una copia del script HTML5shiv alojado en los servidores de Google dev.

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>HTML5/CSS3 Threaded Comments Block</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://www.webdesignerdepot.com/favicon.ico">
  <link rel="icon" href="http://www.webdesignerdepot.com/favicon.ico">
  <link rel="stylesheet" type="text/css" href="/styles.css">
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Wellfleet">
<!--[if lt IE 9]>
  <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

Esto permitirá que los nuevos elementos como <header>, <footer> y <section> funcionen correctamente en todos los navegadores. El único problema podría estar en su ejecución en navegadores con JavaScript desactivado, pero en mi opinión no puedes hacer un diseño para cada usuario. He incluido otro recurso externo para estilos de Wellfleet Google webfont que es el texto del encabezado de página.

(¿No es maravilloso que vivamos en una época en que todos estos recursos son gratuitos para ser utilizados por los desarrolladores? Nos permite crear rápidamente prototipos de una plantilla de comentarios sin demasiados problemas).

Contenido del cuerpo interior

Dentro de las etiquetas <body> </ body> podemos encontrar una gran cantidad de divs interiores del comentario. El diseño de la página entera se envuelve dentro de un div con el ID #w su para envoltura. Todo se centra en la página con un ancho fijo de 700px.

El div #container es lo que mantiene el sistema de comentarios en lugar alejado de la cabecera del texto u otros elementos de la página. Cada hilo de los comentarios se lleva a cabo dentro de una lista desordenada donde la <ul> raíz tiene el ID #comments. A cada elemento interno se le da la clase .cmmnt y se replica gran parte del mismo contenido interior. He aquí un comentario de muestra del diseño de la página:

<li>
<div><a href="javascript:void(0);"><img src="/images/pikabob.png" width="55" height="55" alt="pikabob photo avatar"></a></div>
<div>
<header><a href="javascript:void(0);">Pikabob</a> - posted 6 days ago</header>
<p>Listen you are going to get a kick out of this one. I've got to tell one of the funniest jokes of all time.</a></p>
</div>
</li>

El comentario interno contiene una imagen de avatar flotante junto con otro div con la clase .cmmnt-content. Este contenedor div interior ayuda a distinguir a partir de la columna de avatar, de modo que nuestro contenido se coloca solamente en el lado derecho. Esto también deja espacio para colocar las etiquetas <header> y <footer> dentro del cuerpo del comentario, que podrá proceder a nuevos enlaces para editar o compartir.

Los comentarios internos utilizan listas internas desordenadas con la clase .replies unidas a cada una. Esto nos permite duplicar 3 niveles de comentario o incluso 4 hilos profundos. Para esta demostración sólo he creado estilos de 3 niveles de comentarios. Pero es muy fácil de personalizar hilos para ir aún más profundo.

<li>
  <div><a href="javascript:void(0);"><img src="/images/dark-cubes.png" width="55" height="55" alt="DarkCubes photo avatar"></a></div>
  <div>
    <header><a href="javascript:void(0);">DarkCubes</a> - posted 1 week ago</header>
    <p>Ut nec interdum libero. Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis risus. Cras lacinia lorem sit amet augue mattis vel cursus enim laoreet. Vestibulum faucibus scelerisque nisi vel sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque massa ac justo tempor eu pretium massa accumsan. In pharetra mattis mi et ultricies. Nunc vel eleifend augue. Donec venenatis egestas iaculis.</p>
  </div>
  <ul>
    <li>
      <div><a href="javascript:void(0);"><img src="/images/pig.png" width="55" height="55" alt="Sir_Pig photo avatar"></a></div>
      <div>
      <header><a href="javascript:void(0);">Sir_Pig</a> - posted 1 day ago</header>
      <p>Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis risus.</p>
      <p>Morbi id neque nisl, nec fringilla lorem. Duis molestie sodales leo a blandit. Mauris sit amet ultricies libero. Etiam quis diam in lacus molestie fermentum non vel quam.</p>
      </div>
    </li>
  </ul>
</li>

Ten en cuenta que incluso las respuestas de anidación de menor nivel todavía siguen el mismo formato exacto del nivel superior del comentario. Obviamente, esto es útil si está envolviendo estos estilos en torno a un CMS como WordPress. Entonces puedes generar dinámicamente comentarios para llenar la misma plantilla.

Restablecer el CSS Stylesheet

He creado otro documento, styles.css, que sostiene todo nuestro código CSS básico para el posicionamiento y el diseño de contenido de la página.

Empezando con mi propio personalizado CSS resets que se basa en fragmentos de código Eric Meyer. Esto restablecerá todas las fuentes, márgenes, el relleno y sobre todo el tamaño de caja para todos los elementos de la página en todos los navegadores principales. También se puede notar que se están usando algunas propiedades para actualizar dinámicamente el color de resaltado CSS.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { height: 101%; }
body { background: #e3e0ef url('images/bg.png'); font-size: 62.5%; line-height: 1; font-family: Arial, sans-serif; padding-bottom: 65px; }
::selection { background: #d7d0f3; }
::-moz-selection { background: #d7d0f3; }
::-webkit-selection { background: #d7d0f3; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

A medida que avanzamos hacia abajo se ha incluido el código para restablecer los estilos básicos sobre los elementos h1 y párrafos de la página. Hay que configurar una estructura básica para la envoltura y los divs contenedores. En el contenedor se han incluido algunas propiedades de CSS3, como una sombra de caja que se destaque del fondo.

h1 { font-family: 'Wellfleet', 'Trebuchet MS', Tahoma, Arial, sans-serif; font-size: 2.85em; line-height: 1.6em; font-weight: normal; color: #756f8b; text-shadow: 0px 1px 1px #fff; margin-bottom: 21px; }
p { font-family: Arial, Geneva, Verdana, sans-serif; font-size: 1.3em; line-height: 1.42em; margin-bottom: 12px; font-weight: normal; color: #656565; }
a { color: #896dc6; text-decoration: none; }
a:hover { text-decoration: underline; }
/* page layout structure */ 
#w { display: block; width: 700px; margin: 0 auto; padding-top: 35px; }
#container { 
  display: block; 
  width: 100%; 
  background: #fff; 
  padding: 14px 20px; 
  -webkit-border-radius: 4px; 
  -moz-border-radius: 4px; 
  border-radius: 4px; 
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

El estilo de los comentarios de la página

Ahora bien, este último trozo de código mira por encima para configurar todos nuestros comentarios en la página.

#comments { display: block; }
#comments .cmmnt, ul .cmmnt, ul ul .cmmnt { display: block; position: relative; padding-left: 65px; border-top: 1px solid #ddd; }
#comments .cmmnt .avatar  { position: absolute; top: 8px; left: 0; }
#comments .cmmnt .avatar img { 
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px; 
  border-radius: 3px; 
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.44);
  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.44);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.44);
  -webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  -ms-transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
#comments .cmmnt .avatar a:hover img { opacity: 0.77; }

Para iniciar, cada elemento de lista .cmmnt está diseñado para ser empujado a la izquierda con cada contenedor <ul> interno. Se ha puesto el valor de configuración padding-left: 65px; para que cada bloque se higa a un lado sin importar la longitud o altura. Cada imagen del avatar se coloca absolutamente hacia el lado izquierdo, por lo que tiene que el padding adicional mantiene el contenido a distancia desde el borde.

También se ha aplicado algunos únicos efectos y transiciones CSS3 border-radius en las imágenes de avatar. A medida que se ciernen sobre cada uno la opacidad se reducirá gradualmente hasta el 77% a más de 400 milisegundos. Este es un efecto muy interesante para tener con sólo unas pocas líneas de código. Solía ??requerirse un largo JavaScript para realizarlo incluso algo parecido a esta transición.

#comments .cmmnt .cmmnt-content { padding: 0px 3px; padding-bottom: 12px; padding-top: 8px; }
#comments .cmmnt .cmmnt-content header { font-size: 1.3em; display: block; margin-bottom: 8px; }
#comments .cmmnt .cmmnt-content header .pubdate { color: #777; }
#comments .cmmnt .cmmnt-content header .userlink { font-weight: bold; } 
#comments .cmmnt .replies { margin-bottom: 7px; }

En esta última parte del código CSS, todo lo que estamos haciendo es posicionar el contenido con un padding adicional y actualizar los esquemas de color.

Reflexiones finales

El ámbito del desarrollo frontend web es enorme y abarca una gran variedad de interfaces de usuario. En este tutorial hemos visto algunas de las opciones que permiten a los usuarios un contacto más directo con los demás. Esta es probablemente la solución más sencilla para la presentación de comentarios por la forma en conversaciones con capas que aparecen en un monitor.

Jesus_Caceres