Tips de Diseño Web: Banderas de Fin de Sección
Pasa que uno diseña con lo mejor en mente pero siempre se debe estar preparado para lo peor. A mi me gusta mucho maquetar directamente en HTML y me preocupo por tener una estructura bien sólida de HTML tan válido y semántico como sea posible antes de poner una sola línea de CSS. Me gusta tener todas las etiquetas correctamente identadas para distinguir los elementos anidados y asegurarme de que nada se me escape. Además si en algun momento necesito añadir algun otro modulo, es más sencillo si el codigo está bonito y bien identado. Algo asi como este bebé:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Pretty Code - Qué código más bonito</title>
</head>
<body>
<h1>Que código tan chido</h1>
<div id="afuera">
<h2>Lo de afuera no importa</h2>
<div class="adentro">
<h3>Lo que importa es lo de adentro</h3>
<p class="uno">
Donec leo risus, tincidunt quis, pharetra sed,
eleifend et, libero. Morbi sollicitudin consectetuer nisl.
Duis dictum, turpis quis tincidunt laoreet,
nisi tortor convallis libero, vitae mollis libero nunc at pede.
</p>
<p class="dos">
Vestibulum augue lectus, sagittis id, congue in, consectetuer ac, dolor.
Integer sed lacus ut pede ullamcorper rutrum.
Sed tincidunt hendrerit ante. Nunc tempor blandit lacus.
Curabitur porttitor est auctor elit. Nulla libero ipsum,
</p>
<p class="tres">
imperdiet et, mollis vitae, ornare ut, elit.
In hac habitasse platea dictumst.
Fusce eu nibh vitae turpis rhoncus porta. Nam ultricies.
Curabitur posuere gravida nulla. Curabitur sapien.
</p>
</div>
</div>
</body>
</html>
Pero la triste realidad es que rara vez el código que escribes pasa tal cual a producción. Generalmente tienes que pasarlo por un CMS o un sistema de plantillas y/o generar las páginas dinamicamente. Luego ves el sitio en tu navegador y por fuera se ve igual que como lo habías diseñado pero cuando das “ver código fuente” te encuentras con que tu bebé código ha mutado en un deforme y amorfo monstruo de tags (el siguiente ejemplo es una dramatización):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> <title>Pretty Code - Qué código más bonito</title>
</head>
<body>
<h1>Que código tan chido</h1>
<div id="afuera">
<h2>Lo de afuera no importa</h2>
<div class="adentro">
<h3>Lo que importa es lo de adentro</h3>
<p class="uno"> Donec leo risus, tincidunt quis, pharetra sed, eleifend et, libero. Morbi sollicitudin consectetuer nisl. Duis dictum, turpis quis ncidunt laoreet, nisi tortor convallis libero, vitae mollis libero nunc at pede.
</p>
<p class="dos">
Vestibulum augue lectus, sagittis id, congue in, consectetuer ac, dolor.
Integer sed lacus ut pede ullamcorper rutrum. Sed tincidunt hendrerit ante. Nunc tempor blandit lacus. Curabitur porttitor est auctor elit. Nulla libero ipsum,
</p>
<p class="tres">
imperdiet et, mollis vitae, ornare ut, elit. In hac habitasse platea dictumst.
Fusce eu nibh vitae turpis rhoncus porta. Nam ultricies. Curabitur posuere gravida nulla. Curabitur sapien.
</p>
</div>
</div>
</body>
</html>
Diganme, ¿Pueden encontrarle sentido, forma o estructura a eso? ahora multipliquenlo por diez e imaginen que necesitan duplicar todo el <div id="afuera"> por alguna extraña ocurrencia de su cliente (no pongo ejemplos, ustredes saben).
Es relativamente fácil saber donde comienza cada sección y donde se está abriendo un nuevo elemento — sobre todo en un editor que coloree la sintaxis. ¿Pero el final?. ¿Cual de todos esos </divs> corresponde a <div id="afuera">?
La solución a la que yo llegué es la de usar unas banderas — o flags
— dentro de un comentario al final de cada sección denotada por un id o class de la siguiente forma:
<div id="afuera">
<div class="adentro">
</div>< !-- /.adentro -->
</div>< !-- /#afuera -->
La diagonal o barra (/) significa que es el final de un elemento y uso el gato (#) y el punto (.) para significar si estamos cerrando un identificador o una clase, respectivamente.
Esto no soluciona el asunto de las identaciones deformes pero almenos me ha ayuda a escanear más rápido mi código y mover y modificar secciones enteras sin mayor problema. Como dije, esto no le va a salvar la vida a nadie, pero a mi me pareció util y quise compartirselos.
Aunque no se ven los comentarios en tus bloques de ejemplo de código fuente (¡Tal vez porque son comentarios! :o) ), capto la idea. ;)
ypomsvewf xzdhnpi qyve vugw xztvsorf ldkq nxchj
ypomsvewf xzdhnpi qyve vugw xztvsorf ldkq nxchj
Contribuye a la discusión