¿Diseños profesionales?

Pantallazo de un diseño de marcado basura

No voy a pararme en comentar… eso, creo que es bastante obvio, pero solo diré que en unas 30 líneas de código con más de 10 etiquetas de marcado… solo se encuentran dos etiquetas semánticas, con sentido, un h1 y un p, sin olvidar la clasitis: buag, ¿para qué queremos la herencia… no?… Un diseño superprofesional sin duda alguna.

Por Dios…, a esto y cosas como estas son a las que se refería Minid cuando hablaba de una web en pañales, o un desarrollo web en pañales, y de creer que se saben hacer las cosas cuando en realidad se es un chapucero. El problema es que a un encofrador, si no sabe, se le cae la casa, a un fontanero se le va a pique, a un gestor se le hunde la empresa… con un maquetador web todo está perdonado, no existe la profesionalidad y cuando una empresa pide otro presupuesto para rediseñar una plantilla o un proyecto completo… es lo normal. Un caso interesante sería migrar, o puede que exportar, a XML: con un código sin pies ni cabeza la solución pasa por escribirlo de nuevo.

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! :D

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…

El hecho es que con la estandarización del marcado web a XML, las validaciones del W3C y todo este pollo, muchos de los diseñadores web han pasado del marcado basura de presentación HTML al marcado basura de presentación válido, estándar… pero basura y de presentación como digo.
Una de los primeros sintomas es la famosa DIVITIS. Vemos como editar este tema que uso en el blog: 4u para pasar de un marcado basura de presentación a un marcado estructural:

Teníamos esto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<div id="utombox">
	<div id="header">
		<div class="inside">
		<div class="utom">
			<div id="search">
				<form method="get" id="sform" action="<?php bloginfo('home'); ?>/">
 					<div class="searchimg"></div>
					<input type="text" id="q" value="<?php echo wp_specialchars($s, 1); ?>" name="s" size="15" />
				</form>
			</div>
 
			<h2><a href="<?php echo get_settings('home'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h2>
			<p class="description"><?php bloginfo('description'); ?></p>
		</div>
		</div>
	</div>
	<!-- [END] #header -->
	<div id="menu">
		<div class="utom_menu">
 
				<ul class="menu">
				<li class="<?php if (((is_home()) && !(is_paged())) or (is_archive()) or (is_single()) or (is_paged()) or (is_search())) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>">Blog</a></li>
				<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
				<?php wp_register('<li class="admintab">','</li>'); ?>
				<li class="utom_menu_b"></li>
				</ul>
 
		</div>
	  </div>

Sin acabar en absoluto aún, pasemos a esto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<div id="container">
 
	<div id="header">
 
		<div class="inside">
 
			<div class="utom">
 
				<!-- Busqueda -->
				<form method="get" id="searchform" action="" title="Escribe y pulsa ENTER">
					<input type="text" value="<?php _e('Search');?>: escribe y pulsa ENTER" size="20" name="s" id="s" onfocus="this.value=''" tabindex="4" />
					<input name="Buscar" type="hidden" id="searchbutton" value="Buscar" />
				</form>
				<!-- end Busqueda -->
 
				<h2><a href="<?php echo get_settings('home'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h2>
				<p class="description"><?php bloginfo('description'); ?></p>
 
				<ul id="globalinks">
					<li><a href="#content" accesskey="S" tabindex="1" title="Ir al Contenido">IR AL CONTENIDO</a></li><li><a href="#sidebar_top" accesskey="M" tabindex="2" title="Ir al Men&uacute;">IR AL MEN&Uacute;</a></li><li><a href="#searchform" accesskey="B" tabindex="3" title="Ir al Formulario">BUSCAR</a></li>
				</ul>
			</div>
			<!-- end utom -->
		</div>
		<!-- end inside -->
 
	</div>
	<!-- end header -->
 
	<ul id="menu">
		<li class="<?php if (((is_home()) && !(is_paged())) or (is_archive()) or (is_single()) or (is_paged()) or (is_search())) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>">Blog</a></li>
		<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
		<?php wp_register('<li class="admintab">','</li>'); ?>
	</ul>

No necesitamos un DIV para el menu… es una lista, usemosla en exclusiva, etc… etc… etc…
Como digo es algo rápido, sin acabar, pero vuelve a ser un ejemplo de hacer las cosas mal.

En definitiva, el resultado haciendo las cosas bien es el mismo: