Cultura Digital

Volvamos al tema que he reabierto en estos días, el marcado (X)HTML válido “fullero” le llamaré yo.

En realidad, no debería ser considerado como marcado válido pues la semántica debería ser parte de ello. En este sentido, quizá sea un poco talibán desde que adquirí ciertas costumbres heredadas de la lectura de Zeldman y más tarde minid.net por ejemplo.

El código posterior que generaré es un sistema que uso en la web que administro, laguardiadejaen.com, para generar unas citas aleatorias en la cabecera de la plantilla. Es una plantilla que adapté a Wordpress obra de Collin Grasley (de OpenDesigns.org), a decir verdad, un diseñador que me gusta bastante… pero, humildemente, considero que también peca del intento obsesivo de compatibilidad inversa en navegadores y, por qué no? e imagino: “sea condescendiente con IE a toda costa“.

La plantilla original es esta.

Consideremos este código:
(He indexado el código para una mejor comprensión aunque el original no la tiene.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="header">
	<div id="logo">
		<span class="logo">your logo here</span>
	</div>
	<div id="headerloginbutton"><a href="#">Log In | Sign Up</a></div>
	<div id="menu">
		<ul>
			<li><a href="#" title="Contact Us">Contact Us</a></li>
			<li><a href="#" title="About Us">About Us</a></li>
			<li><a href="#" title="Clients">Clients</a></li>
			<li><a href="#" title="Our Work">Our Work</a></li>
			<li><a href="#" title="Home">Home</a></li>
		</ul>
	</div>
</div>

Div, div, div, id, id, id…. pfffff por Dios… al menos hay una lista!

Hagámoslo algo coherente, con sentido y útil:

1
2
3
4
5
6
7
8
9
10
11

<div id="header">
	<h1>your logo here</h1>
	<a href="#">Log In | Sign Up</a>
	<ul id="menu">
		<li><a href="#" title="Contact Us">Contact Us</a></li>
		<li><a href="#" title="About Us">About Us</a></li>
		<li><a href="#" title="Clients">Clients</a></li>
		<li><a href="#" title="Our Work">Our Work</a></li>
		<li><a href="#" title="Home">Home</a></li>
	</ul>
</div>

Mucho mejor, no?… nos hemos ahorrado unas cuantas líneas, unos cuantos caracteres e identificadores innecesarios y el documento es más coherente y semántico. Ahora veremos los cambios y luego “la magia CSS“:

• Primero hemos eliminado el div, el span y la clase de logo.
  Es el logotipo principal, el título del sitio, un título de primer nivel cabe esperar así que pongamos nuestro inédito hasta ahora H1… simple y sencillo.
• Le sigue un enlace…
  Para qué queremos otro div más con otro identificador más? (por lo visto se cree que todos los elementos HTML deben ir identificados… no lo entiendo).
  Bien, un enlace pues un enlace… punto.
• Y lo que te rondaré morena:
  Oooootro DIV más… con el consiguiente identificador para englobar una lista que, por cierto, ahora que sería recomendable un identificador para algo tan importante como el menú… no lo tiene El del DIV no cuenta o cuando menos no es del todo semántico pues el menú en concreto, exacto es una lista.
  Bien… una lista que será el menú. Pues eso mismo: una lista identificada como menú.

La magia:

Pero… ¿como funcionará el nuevo código para un diseño idéntico?, bien, esto es la magia de CSS y sobre todo, la herencia de los elementos. Vamos allá:

Sabemos que tenemos una división o sección que es la cabecera: header.
Hasta ahora es correcto e incluso el identificador nos sirve para usar un marcador de posición superior.

Siendo así, todos los elementos será hijos únicos de esta división:
Header h1
Header a
Header ul…
Pues bien, no hay motivo para usar identificadores ni clases innecesarios, simplemente usemos la herencia CSS:

1
2
3
4
5
6
7
8
9
10

#header h1 {
}
#header a {
}
#header ul#menu {
}
#header ul#menu li {
}
#header ul#menu li a {
}

etc, etc, etc…

También se puede ser un poco menos talibán y usar un div para el login:

1
2
3
4
5
6
7
8
9
10
11

<div id="header">
	<h1>your logo here</h1>
	<div><a href="#">Log In | Sign Up</a></div>
	<ul id="menu">
		<li><a href="#" title="Contact Us">Contact Us</a></li>
		<li><a href="#" title="About Us">About Us</a></li>
		<li><a href="#" title="Clients">Clients</a></li>
		<li><a href="#" title="Our Work">Our Work</a></li>
		<li><a href="#" title="Home">Home</a></li>
	</ul>
</div>

Con otra regla CSS de herencia:

1
2

#header div a {
}

Pero en resumen se puede mirar el código de la plantilla y observar que todo son DIVs, IDs, SPAN y clases… por un tubo… no son necesarias

Con más tiempo extenderé el asunto con detalles y en definitiva de lo que va todo esto:

Conclusión

Cómo hemos pasado de un marcado inválido y propietario a otro fullero, volviendo a los trucos… antes eran trucos inválidos y ahora siguen siendo trucos, marcado sucio no semántico pero válido. Y además, de como algunos estilos que tanto llaman la atención, por ejemplo algunas plantillas Wordpress, al mirar sus entrañas se descubre más de lo mismo… muy triste no aprender de los errores pasados, pero… uno es libre de cometerlos, claro, solo que tus archivos pesarán un 50% más, tu sitio consumirá un 50% más de ancho y tu documento se renderizará un 50% más lento… eso sin contar con otro tipo de dispositivos como navegadores móviles, basados en estructura… texto, audio, etc…