Buen Diseño con CSS

Con anterioridad mencionamos que Rails es parte del paradigma de diseño de aplicaciones de web 2.0. Esto quiere decir que el diseño de la página debe de seguir principios de diseño de HTML modernos. En este capítulo veremos los principios e ideas que influencian el diseño de Rails.

Nota

Este no es un curso de CSS. La idea es entender porqué Rails y AJAX requieren de CSS y un diseño limpio. Si no sabes CSS, un buen lugar para comenzar es el Tutorial de CSS de W3.org

CSS - Hojas de Estilo de Cascada

Las hojas de estilo CSS le permiten separar el contenido de su página de la presentación de la misma. Asimismo, la capacidad de añadir más de un estilo a su página web le permite:

Diseño Semántico, Rails y AJAX

Limpieza semántica quiere decir claridad de propósito dentro de nuestro código. Esto se obtiene:

  1. Manteniendo Nuestro código HTML limpio y claro
  2. Añadiendo divisiones lógicas e identificadores de acuerdo con el propósito de nuestra página

HTML Claro con CSS

Si la idea es crear tres párrafos y un título, el código debe tener tres <p>s y un <h3>. Antes de CSS, los diseñadores de HTML debían poner muchos de sus párrafos y títulos en tablas para poderlos posicionar correctamente. Un buen diseño semántico evita usar tablas y otras etiquetas cuyo único propósito es forzar el estilo visual de la página. Esto es porque las tablas obscurecen el propósito del texto.

Tablas y Diseño Semántico

Antes del diseño semántico, las tablas se utilizaban mucho para posicionar su diseño con exactitud. Un buen diseño moderno sólo utiliza tablas para desplegar datos tabulares como listas y hojas de cálculo (que era la razón original de la existencia de las tablas en primer lugar).

Divisiones e Identificadores

Una vez que nuestro diseño de HTML está limpio podemos añadir etiquetas de division (<div>) y attributos identificadores (id=""). Basados en estos atributos, usted puede definir una estructura que le permite a Rails, AJAX y otras herramientas manipular su HTML dentro del navegador. Por ejemplo, dentro de nuestra libreta de direcciones, podemos hacer lo siguiente:

 <div id="persona_detalle_contenedor">
   <h1 class="titulo_detalle">Editar Persona</h1>
   <form class="forma_persona">
     <label for="persona_nombre">Nombre</label>
     <input name="persona_nombre"></input>
     ...
 </div>

Esta claridad nos permite utilizar funciones de AJAX para reemplazar el contenido de "persona_detalle_contenedor" con una vista de detalle una vez que el usuario guarde la forma. Como las divisiones en la estructura son claras, es mucho más sencillo cambiar la página existente.

Muchos de los conceptos de Rails y otras ayudas de desarrollo para web 2.0 se basan en cambiar secciones de HTML sin refrescar la página completa.

Herramientas de HTML Visuales

Las herramientas visuales de HTML tienden a insertar tablas y otros elementos no requeridos. Cuando evalúe una herramienta que genere HTML para su uso personal, verifique si el HTML generado es semántico con CSS y no contiene tablas. Evite herramientas que no puedan generar CSS o respetar la estructura semántica de su página.

La mejor manera de aprender cómo hacer estos diseños es ver otros diseños "limpios" y examinar sus fuentes de HTML. He aquí algunos ejemplos de buen diseño.