Tutorial

TUTORIAL: HAGAMOS UNA WEB (5): TABLAS Y CAPAS (… Y II)

2 Mar , 2014  

Si ya antes veíamos tablas y cuando usarlas, sabemos ahora que si no son para boletines de correos o datos tabulares no quedan elegantes.

Como balancear patitos de hule: bien para las fiestas, mal para las reuniones de negocios.

Como balancear patitos de hule: bien para las fiestas, mal para las reuniones de negocios.

Piensa en las capas como elementos multiuso, donde igual pones un párrafo o dos, alguna imagen, una tabla o incluso otras capas.

Es lo que tienen las capas, que son muy versátiles.

... y ¡elegantes!

… y ¡elegantes!

El problema es, sin embargo, que esta misma versatilidad trabaja en contra nuestra por dos temas.  El primero es entender como interpretan los navegadores lo que llaman el modelo de caja. El segundo es el abuso de las mismas.

El modelo de caja.

Según el consorcio que define que es que y como es cada cosa dentro de los estándares de la web, la W3C, el modelo de caja se describe como el formato mediante el cual los elementos a nivel de bloque son envueltos por un relleno (o padding), un borde (o border) o los márgenes (o margin).  Para la especificación de CSS propuesta por W3C, cuando un ancho es explícitamente especificado a cualquier elemento a nivel de bloque, este debería determinar sólo el ancho del contenido dentro de la caja con el relleno, bordes y márgenes agregados después. (Fuente: Wikipedia).

Pensemos en una capa (o div) como una caja de cartón.

Schrodinger's Caturday

Con o sin gato.

Una caja de cartón que lleva un relleno acolchado para evitar los golpes, un borde (el cartón mismo) y en la que especificamos cuanto espacio existirá entre esta caja y la siguiente.

Dido in a box

Por que un gato cómodo es un gato feliz.

Al especificar sus dimensiones tenderíamos a pensar que estas se miden “desde fuera”, es decir, que cuando las medimos, lo hacemos desde el exterior.

¡NO! ¡Así no!

¡NO! ¡Así no!

Sin embargo, para la web, las cajas miden su interior, es decir, medimos el espacio útil que hay en ellas.  Tanto el relleno, como el cartón y el espacio hasta otra caja son medidas adicionales.  De seguro estarás pensando que tiene lógica dejar fuera de la medida el espacio entre cajas, y tienes razón.  Pero, acostumbrados a medir las cajas desde fuera, pensamos que los bordes y el relleno son también parte de la misma.  Va a ser que no.

Esta forma de pensar exige que, cuando quieras crear una caja de 200 píxeles de ancho con 2 píxeles de borde (el cartón) y 3 de padding (el relleno), deberás sustraer estas medidas del ancho que esperabas aplicar.

 

path3803

En la imagen vemos la diferencia entre ambos conceptos.  Arriba, la forma ‘correcta’; abajo, la forma en que estamos acostumbrados a medir.

Al calcular, entonces, el ancho de una caja (un bloque) en tu sitio web deberá tener en cuenta su borde y su relleno; pueda que esto sea más  fácil de hacer cuando haces las medidas en píxeles, pero no es tan sencillo cuando usas unidades diferentes (como em o %) en cada característica por que la matemática no es tan clara y directa.

¿Cómo resolverlo fácilmente?

CSS3 al rescate.

Agregas un CSS a tu página y listo:

    *, *:before, *:after {
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         box-sizing: border-box; 
    }

Este CSS aplica una instrucción para el navegador, donde le dice que tú estás midiendo tu caja desde fuera (el cartón) y que se deje de historias.  Si es bueno para Paul Irish y Chris Coyier (grandes conocedores de todo lo relacionado con la web) entonces es bueno para nosotros también.

¿Para qué, entonces, la explicación?

Por que de esta manera entendemos que puede salir mal cuando no podamos hacer uso de esta recomendación y tengamos que medir las cajas desde dentro.  Existen casos puntuales donde el requerimiento de compatibilidad con navegadores antiguos o las condiciones propias de las decisiones tomadas por algún programa de gestión de contenidos no te harán posible ocupar la instrucción antes mencionada.  Si ves que, al aplicarlo, se rompe entonces sabrás ya como solucionarlo.

Este mensaje traido a ustedes por tres patos.

El abuso de las capas (o divitis)

Al igual que cuando se utilizaban tablas para el contenido, donde se anidaban tablas dentro de tablas dentro de tablas, hay gente que abusa de las capas y luego te encuentras con cajas dentro de cajas dentro de cajas.

Está claro que puedes hacerlo, pero no queda elegante.

Y ya conocemos las consecuencias…

No se trata de evitar el uso de capas dentro de capas, simplemente se  trata de usar el menor número posible de las mismas para resolver un diseño.  Toma por ejemplo cualquier sitio web, analiza su estructura (click derecho, ver código fuente) y verás que dependiendo de la complejidad de la distribución de los elementos en pantalla, se usan más o menos cajas.

Es un punto muy subjetivo para algunos ya que cada cabeza es un mundo aparte y puede resolver la misma tarea de diversas formas.

En general, sin embargo, queremos que nuestro código sea mantenible y manipulable a futuro (talvez, la técnica que te pareció muy útil al principio resulte un problema después).

Foto por Michelangelo-36 en Wikimedia Commons

Que luego dices: “¿Para qué tanta caja?”

Es por ello que, en general, se deben establecer ciertas pautas para establecer cuando usar una capa.  No es lo mismo trabajar en un sitio web que ha de cambiar de diseño constantemente (como es el caso del csszengarden, donde el mismo HTML se estila de muy diferentes formas con distintos CSS) o para el caso de un gestor de contenidos genérico, que el desarrollo puntual para una página específica.

Elementos bloque.

Un elemento bloque tiene una estructura rectangular, utiliza (si no lo estilas) todo el ancho del elemento en el que está contenido (un párrafo en una página de un libro, el encabezado de un menú tradicional, el titular en una noticia del periódico).

Foto por Justanother en Wikimedia Commons

Más como Lego® que como bloques de hormigón.

La idea que vamos a aplicar en la decisión del uso de las capas es la de delimitar áreas dentro de nuestro diseño (o bloques) de lo general a lo particular, de manera que podamos establecer relaciones dimensionales en nuestro contenido (por ejemplo columnas dentro de un bloque, barras laterales, etc).

Si analizamos la estructura de  una de nuestras propuestas originales:

Diagram4

podemos ver bloques: El encabezado, compuesto de tu nombre y la navegación componen el primer bloque, el contenido compone el segundo y el pie de página compone el tercero.

Dentro del contenido notaremos que existe una distribución columnar y en ella prevemos entonces que existirán tres bloques adicionales de contenidos: La imagen y el cuadro de texto debajo de ella serán la primera columna, los títulos y textos la segunda y la barra lateral derecha será la tercera.

Podríamos hacer bloques de cada una de las entradas de la segunda columna (algo que en algunos gestores de contenido es muy útil) y por tanto definiremos un bloque por cada entrada también.

En la tercera columna, si contásemos con más elementos además de la lista de entradas recientes, convendría generar bloques, sin embargo, y ateniéndonos a lo que hemos definido en nuestro esquema, esto no es necesario.

El código para ello entonces queda de la siguiente manera:

<html>
   <header><title>Mi web</title><header>
   <body>
        <div class="encabezado">
            <div class="titulo"><h1><a href="index.html">Mi nombre<a></h1></div>
                        <div><ul><li><a href="index.html">enlace 1</a></li></ul></div>
                    </div>
                    <div class="contenido">
                        <div class="columna_1">
                <div class="bloque_1 foto"><img src="mi_foto.png"></div>
                <div class="bloque_2 texto"><p>Un texto adicional</p></div>
            </div>
                        <div class="columna_2">
                <div class="entrada">
                    <h2 class="titular"><a href="entrada1.html">Título 1</a></h2>
                    <div class="extracto">
                        <p>Texto con un resumen de la entrada 1</p>
                    </div>
                </div>
                                <div class="entrada">
                    <h2 class="titular"><a href="entrada2.html">Título 1</a></h2>
                    <div class="extracto">
                        <p>Texto con un resumen de la entrada 2</p>
                    </div>
                </div>
            </div>
                        <div class="columna_3">
                <h2 class="titular">Entradas recientes</h2>
                <ul class="enlaces">
                    <li><a href="enlace1.html">Título 1</a></li>
                    <li><a href="enlace2.html">Título2</a></li>
                </ul>
            </div>
                    </div>
                    <div class="pie">
            <div class="navegacion simple"><ul><li><a href="index.html">enlace 1</a></li></ul></div>
            <div class="firma"><a href="index.html"><img src="logo.png"><a></div>
        </div>
            </body>
</html>

Copia y pega en tu editor de texto, guárdalo como index.html otra vez y comprueba como se mira.

Notarás que cada elemento de bloque ocupa todo el ancho de la pantalla, esto es por que no hemos agregado aún ninguna regla que especifique anchos de ningún tipo motivo por el cual en la siguiente entrega empezaremos a ver, poco a poco y con cuidado, el interesante mundo del CSS.

¿Se me olvida algo?
a22ddbe5-3b6a-46e6-a414-43ae2c4d825b
¡Ah! Es cierto.

HTML5

Como bien sabrás, la web evoluciona.  La forma en la que programamos como se ve y sus contenidos ha ido perfeccionándose poco a poco y se ha vuelto algo mucho más completo y complejo de lo que solía ser.

El HTML no es la excepción, y la W3C ha tenido a bien desarrollar unas especificaciones que avanzan conceptos que son de mucho interés.  La web semántica, por ejemplo, es uno de ellos y básicamente busca poner un poco de orden en todo el caos.  Verás, hasta ahora, complejísimos algoritmos se encargaban de intentar comprender de que va una página en la web, para poder catalogarla.

Todo ordenadito y en su lugar y para que cualquiera lo encuentre.

Todo ordenadito y en su lugar y para que cualquiera lo encuentre.

Si aún ahora piensas que a veces no encuentras lo que buscas, imagínate antes, cuando los programas encargados de “leer” la web e indexarla apenas comenzaban.  Pelearse por estar en primer lugar en las listas de los buscadores se volvió “un arte” (entre comillas, por que entonces se trataba de hacer creer a los buscadores que una página se trataba de algo diferente para poder meternos publicidad).

Claro que todo esto periódicamente se ha ido revisando y se ha regulado bastante, sin embargo aún quedaba el compromiso pendiente de poder habilitar a quienes hacemos páginas web de una estructura semántica claramente reglamentada que permitiera ofrecer un sentido a la página.

Y cuando los gatos comenzaron a tomar control del Internet...

Y cuando los gatos comenzaron a tomar control del Internet…

Fue entonces que se pensó en la creación de etiquetas que permitieran que en lugar de tener un montón de divs y que cada uno les llamemos como queramos, ahora existen algunas que delimitarán donde está lo importante en tu contenido.  Esto no sólo facilita la comprensión de tu página de cara a un buscador web, sino también frente a los mecanismos de accesibilidad ofrecidos por navegadores para gente con capacidades diferenciadas.

Si te fijas, en el código propuesto, tenemos un montón de divs que no confieren ningún sentido semántico.  Nos es claro a nosotros pues no sólo lo hemos ido creando, sino que hemos identificado cada área con clases CSS.  Si leyésemos desde un navegador de sólo texto, ¿Tendría sentido nuestro contenido? Talvez sí, pero a medida que nuestros diseños sean más complejos, mantener el sentido será cada vez más y más difícil.

Con el uso de las etiquetas HTML5 no sólo ganamos en esta materia sino también ganamos nuevas capacidades que nos facilitarán la forma en la que hacemos muchas cosas (como presentar video y audio, comunicarnos con un servidor y muchas otras).

En lo que a los elementos de bloque se refiere, la W3C agregó varios de ellos.  El tema es que en navegadores antiguos no existe la capacidad nativa para ponerlos en pantalla, por lo que no debes preocuparte por ellos si no sabes todavía como ponerlos en práctica. Esto lo vamos a aprender en su momento.

En la próxima entrega, hablaremos más de HTML5 y lo nuevo que nos trae para hacer páginas web.

, , , ,


Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.