Borrón y cuenta Nueva

Hace poco más de cuatro años, en Abril de 2009, puse en línea este sitio, Cuenco Digital. Originalmente la intención fue Blog, un espacio para comentar algunas cosas que fui aprendiendo durante mis primeros años con Drupal. Recuerdo que uno de los primeros artículos que escribí fue como hacer un sitio en Drupal paso a paso, que tuvo una muy buena recepción por la gente en aquel entonces.

Los años pasaron y las obligaciones laborales y académicas hicieron cada vez más difícil escribir y mantener actualizado el sitio. Paradójicamente, cada vez tenía más cosas por escribir e ideas interesantes que contar, pero simplemente no tenía demasiado tiempo, o tal vez si, pero había otras prioridades y mantener el sitio no era una de ellas.

Unos días atrás, llegue por casualidad a un Blog en inglés muy interesante, un artículo en particular me llamó mucho la atención. En el mismo se plantea la idea de que hay que escribir por escribir y no escribir para ser leído. La estética del sitio me llevó a leer este otro artículo en donde se plantea una Internet orientada a lectores y no a dueños del sitio. Y entonces me dije, yo quiero algo así para Cuenco Digital...

Empezando desde cero

Con estas dos ideas básicas, me puse a pensar un poco, como re-estructurar todo el sitio para hacerlo más legible, más ameno, y por sobre todo, que me llame a mi mismo a escribir más.

Para lograr un cambio real, lo primero que hice fue olvidarme de todos los vicios que solemos tenes los desarrolladores web. Eso de "jugar de memoria"... E hice todo lo contrario a lo que hubiera hecho en un principio. En vez de instalar un nuevo Theme, seguramente Zen, como usualmente hago, decidí arrancar desde cero. En vez de diseñar con Inkscape o Gimp, pase directamente a los prototipos en HTML.

Recordé un tweet de @sipuedo que hablaba sobre el framework Foundation y sus ventajas frente a Bootstrap. Yo conocía Boostrap pero no Foundation, y decidí darle una mirada. Después de jugar un rato con este framework llegué a la conclusión de que podía servirme para mi rediseño. Yo quería hacer un sitio responsivo, pero no soy un Themer experto, y reusar algo que ya funciona era mi mejor opción.

Por otro lado, ya que iba a iniciar el desarrollo desde cero, revisé nuevamente los conceptos de HTML 5 explicado de forma notable en Dive Into HTML 5 para estructurar el contenido de forma más semántica y de paso aprender un poco más sobre esta versión de HTML.

Hacer un theme desde cero no es tan difícil como uno podría esperarse, de hecho yo creí que iba a ser un poco más complicado. Para no arrancar completamente desde cero, opté por copiar y renombrar el theme Stark, que es lo más simple que viene en themes para Drupal, y ya está incluido en el núcleo.

Las plantillas a modificar, para que funcione la grilla de Foundation 4 y pueda usar los elementos semánticos de HTML 5, estaban en su mayoría dentro del módulo system. Las que yo copié a mi tema fueron:

Luego, de cada una, borré casi todo el HTML y lo redefiní. Por ejemplo así quedó el template de page.tpl.php:

<header id ="site-header" class="row">
  <div class="large-12 columns">
  <hgroup>
    <h1 id="site-name"><a href="/">
<?php print $site_name; ?>
</a></h1>
    <p id="site-slogan">
<?php print $site_slogan; ?>
</p>
  </hgroup>
  <nav>
   
<?php print theme('links__system_main_menu', array('links' => $main_menu)) ?>

  </nav>
 
<?php if (!$is_front && $breadcrumb): ?>

    <div class="row" id="breadcrumb">
     
<?php print $breadcrumb; ?>

    </div>
 
<?php endif; ?>

  </div>
</header>
<?php print render($page['content']); ?>

<footer>
  <div class="row">
    <div class="large-12 columns">
   
<?php print render($page['footer']); ?>

    </div>
  </div>
</footer>

Bastante claro, y mucho menos drupalizado que de costumbre...

Énfasis de la legibilidad

Como mencioné al principio, quedé bastante impactado por la estética del sitio http://pjrvs.com. Recordé haber leído algunos artículos muy interesantes sobre tipografía en Smashing Magazine, en particular, The Perfect Paragraph, me ayudó a especificar mejor las dimensiones de los textos y los espacios entre líneas.

Decidí además, eliminar las barras laterales. Después de todo, yo no hago ingresos con esta web y no me reditua tener mayor o menor tasa de rebote en mi sitio. Es más, a mi criterio, que el sitio no tenga barras laterales, mejora bastante la legibilidad y distrae menos la lectura.

Performance

¿Cuantos módulos necesito para tener un Blog? Revisé y vi que podía desactivar muchos de los módulos que tenía instalados. Empecé con Views. ¿Necesito Views para mi sitio? La verdad es que no. Podría usarlo sí, pero modificar el template node.tpl.php, y simplificar mucho el diseño general hizo de este módulo algo prescindible.

¿Necesito un Sitemap en formato xml? Según este artículo y muchos otros, no lo necesito si tengo un sitio con pocos enlaces y una buena navegabilidad.

El resultado de este análisis tuvo como resultado desinstalar unos 8 módulos que no fueron más necesarios.

Por otro lado, ¿Es necesario (o deseable) cargar tantos scripts en mi página? No tengo ningún comportamiento que requiera javascript, ¿para que voy a cargar todo jQuery en cada una de mis páginas...? Para el usuario final, no es necesario. Además, como bien plantean acá el javascript es el principal cuello de botella en la carga de las paginas utilizando dispositivos móviles.

¿Y con respecto a los botones sociales? Un artículo muy interesante titulado, no vendas a tus usuarios me animó a evitar cargar otros scripts de fuentes externas como Facebook o Twitter.

Después de borrar la carga de scripts desde el template html.tpl.php me di cuenta que tal vez podía hacer lo mismo con el CSS.

Por desgracia, Drupal agrega más archivos CSS de los que realmente necesita, con el siguiente código que coloqué en el archivo template.php de mi theme hice que solamente se cargue el CSS de mi theme. Para administrar el sitio uso otro theme distinto, por lo que no pierdo funcionalidad ni estilos.

<?php

function cuencus_process_html(&$variables, $hook) {
  foreach ($variables['css'] as $css => $css_info) {
    if (strpos($css, 'cuencus') === FALSE) {
      unset($variables['css'][$css]);
    }
  }
  $variables['styles'] = drupal_get_css($variables['css']);
}

?>

Artículos anteriores

Para unificar un poco el contenido del sitio, y marcar un cambio notorio, agrupé todos los artículos anteriores en un única página llamada Archivo. Muchos de estos artículos hacen referencia a Drupal 6 y casi pueden considerarse obsoletos.

¿Cómo sigue esto?

Más allá de todos los cambios estéticos, la principal diferencia entre el Blog "viejo" y la nueva versión se va a centrar en el nivel técnico y la longitud de los artículos. No voy a escribir cosas tan específicas como por ejemplo, como implementar un hook_menu_alter(). En vez de eso, la idea es buscar acercar Drupal a los problemas cotidianos de internet y los clientes. Si no, me aburro...

Estoy bastante conforme con el resultado final del rediseño. He visto varios Blogs que se han volcado a Jekyll y utilizan un diseño similar, pero con Drupal se puede lograr lo mismo y siempre deja la puerta abierta a mejoras puntuales que surjan en un futuro.

Espero que esta renovación y nuevo enfoque me motive a escribir más seguido y sobre temas más interesantes.

¡Hasta la próxima!

Te invito a leer también...

Compartir este material en...

Comentarios

Me ha gustado mucho la aproximación que has hecho en un principio de poner solo lo estrictamente necesario. A veces, los desarrolladores olvidamos que menos es más y terminamos matando mosquitos a cañonazos.
El diseño muy claro y legible. Felicidades

Muchas gracias Stoichkov13.

Saludos!

Me alegra haberte podido ayudar en algo.
Y poco más que felicitarte con el "nuevo rumbo"… directo al contenido, muchos dicen que el rey de internet ;)

pd: ¿Muy arriesgado lo de prescindir de views no?

Mi ignorancia de Drupal es casi perfecta, pero me llamó la atención el rediseño del sitio, y, fundamentalmente, los motivos que te llevaron a ello. Coincido con todos los criterios; muy interesantes los artículos que enlazás desde esta entrada. Felicitaciones.

profe yo se que sos vos pero como riot cuencus no te encontre

Añadir nuevo comentario