Continuando con nuestra recodificación de la página principal del gigante de las subastas online en Latinoamérica, DeRemate.com, construiremos el cuadro de búsqueda superior.

Si bien el formulario en cuestión es muy simple, aprovecharemos para ver algunos aspectos básicos de accesibilidad y usabilidad aplicada.

El cuadro de búsqueda

Empezaremos viendo el código del cuadro de búsqueda original.


<table width="100%" height="31" border="0" cellpadding="0" cellspacing="0">
<form name="Form1" onSubmit="javascript: chkForm1();" action="/accdb/search1.asp" method=get>
<input type="hidden" name="IDC" value="">
<input type="hidden" name="IdCamino" value="">
<input type="hidden" name="SearchHere" value="1">
<tr>
<td align="center" background="/images/H/bg_busc.gif"> <table width="640" height="31" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="1" height="31" align="right" background="/images/H/bg_busc.gif">&nbsp;</td>
<td width="200" align="right" background="/images/H/bg_busc.gif"><img src="/images/H/lft_busc2.gif" width="178" height="31"></td>
<td width="180" align="right" background="/images/H/bg_busc.gif">
<input name="txtsearch" type="text" class="pull2" value="" size="28" maxlength="200">
&nbsp;</td>
<td width="80" align="center" background="/images/H/bg_busc.gif"><input name="imageField" type="image" src="/images/common/buscador/bt_bus_c.gif" align="middle" border="0"></td>
<td width="150" align="center" background="/images/H/bg_busc.gif">
<li><a href="/form/advSearch.asp" class="nbkg">B&uacute;squeda Avanzada</a></td>
<td width="30" align="center" background="/images/H/bg_busc.gif"><a href="#"><img src="/images/common/buscador/ay3.gif" alt="" border="0" onClick="MM_openBrWindow('/ayuda/listados/ayudabuscador.html','','scrollbars=yes,width=316,height=300')"></a></td>
</tr>
<script language="Javascript">
function chkForm1()
{
return true;
}
</script>
</table></td></tr></form></table><!--/DR_HomeV3_Buscador_Tbl-->

El código está mucho mejor que el de la cabecera que vimos en el artículo anterior, al menos no está "escondido" o generado por un JS externo. Igualmente, podemos ver un par de tablas anidadas y bastante código inválido. Vamos a solucionar ésto.

Nuestro cuadro de búsqueda

Como siempre, comenzamos analizando las necesidades reales: un formulario de búsqueda claramente identificado y lo más funcional posible, un enlace a la página de búsquedas avanzadas y un enlace a la página de ayuda del buscador.

Hablemos un poco sobre los formularios

Los formularios son elementos excesivamente sensibles a cuestiones de accesibilidad y usabilidad. Para hacer un formulario basta poner uno o más campos encerrados en una etiqueta form, pero para hacer un buen formulario hay que tener en cuenta algunos conceptos mínimos a la hora de llevarlo a la página. No entraremos ahora en detalles sobre posibles diagramaciones de formularios (que afectarán a la arquitectura de la información de la página que los contienen) mayormente porque para ello es necesario saber, por ejemplo, los campos necesarios, los posibles agrupamientos de éstos, a qué público va dirigido, y muchas cosas más.

Bien, sabemos que un formulario es un conjunto de campos modificables por el usuario que están encerrados en una etiqueta form, pero hay mucha más tela que cortar y que no siempre se vé a simple vista. Existe una serie de elementos, además de los tipos de campo, que pueden (deben) usarse para ayudar al usuario en su trabajo de ingresar sus datos.

La etiqueta fieldset sirve para agrupar una serie de campos que se refieren a un mismo tema y ayuda al usuario a separar y entender más facilmente a que se refiere cada grupo de campos (esta etiqueta es especialmente útil en formularios largos y/o complejos). Nuestro fieldset tiene un aliado que también es muy útil en casos de formularios complejos: la etiqueta legend. Un texto encerrado en ella y dentro de un fieldset aparecerá visualmente (y auditivamente) como el "título" del fieldset que lo encierra ayudando aún más a la comprensión del grupo de campos que el usuario debe encarar. La etiqueta label sirve para establecer una relación entre el texto encerrado en ella y un campo del formulario mediante el uso del atributo id del campo y for del label, si haces clic en el label éste te llevará automáticamente a su campo relacionado. El atributo tabindex puede usarse, al igual que en los enlaces, para facilitar la navegación por teclado saltando de campo en campo siguiendo un orden lógico. Hay más cosas aún, pero las abordaremos más adelante en un artículo exclusivo.

Ahora un pequeño ejemplo de formulario correcto, usando los elementos anteriormente mencionados:


<form action="" method="get">
<fieldset>
<legend>Sobre tí mismo</legend>
<fieldset>
<legend>Tus comidas favoritas son</legend>
<label for="sopas">Sopas</label>: <input type="checkbox" name="sopas" id="sopas" value="si" /><br />
<label for="carnes">Carnes</label>: <input type="checkbox" name="carnes" id="carnes" value="si" /><br />
<label for="aves">Aves</label>: <input type="checkbox" name="aves" id="aves" value="si" /><br />
<label for="pasta">Pastas</label>: <input type="checkbox" name="pasta" id="pasta" value="si" /><br />
</fieldset>
<fieldset>
<legend>Tu día normal</legend>
<label for="trabajo">¿Cuantas horas trabajas al día?</label>
<select name="trabajo" id="trabajo">
<option value="" selected="selected">Selecciona</option>
<option value="0">0 horas</option>
<option value="1-4">de 1 a 4 horas</option>
<option value="4-8">de 4 a 8 horas</option>
<option value="8+">más de 8 horas</option>
</select><br />
<label for="internet">¿Cuantas horas usas internet al día?</label>
<select name="internet" id="internet">
<option value="" selected="selected">Selecciona</option>
<option value="0">0 horas</option>
<option value="1-4">de 1 a 4 horas</option>
<option value="4-8">de 4 a 8 horas</option>
<option value="8+">más de 8 horas</option>
</select><br />
<fieldset>
<legend>Sueles moverte…</legend>
<label for="coche">En tu propio coche</label> <input type="radio" name="movilidad" id="coche" value="coche propio" /><br />
<label for="bus">En bus</label> <input type="radio" name="movilidad" id="bus" value="bus" /><br />
<label for="caminando">Caminando</label> <input type="radio" name="movilidad" id="caminando" value="caminando" /><br />
<label for="arrastrandose">Arrastrandote</label> <input type="radio" name="movilidad" id="arrastrandose" value="arrastrandose" />
</fieldset>
</fieldset>
<input type="submit" value="Enviar" /> <input type="reset" value="Borrar Datos" />
</fieldset>
</form>

Que se vería así:

Sobre tí mismo
Tus comidas favoritas son:
:
:
:
Tu día normal


Sueles moverte…




Dijimos que era un formulario correcto, semántico, usable y accesible… nunca dijimos que fuera bonito ;)

De cualquier manera, al igual que todos los elementos de nuestras páginas web, cada elemento del formulario es fácilmente "embellecible" mediante el uso de CSS, pero eso también lo veremos más adelante.

Ahora sí, a lo nuestro

Ya tenemos claros algunos conceptos básicos e indispensables para llegar "a buen puerto". Entonces, planteamos la estructura básica que deberá tener nuestro cuadro de búsqueda:

<form id="cuadrobusca" onsubmit="chkForm1();" action="/accdb/search1.asp" method="get">
<fieldset>
<h2><label for="termino">¿Qué estás buscando?</label></h2>
<input name="txtsearch" id="termino" type="text" value="maquina de coser" size="28" maxlength="200" tabindex="1" />
<input name="imageField" type="image" src="i/bt_bus_c.gif" title="Buscar" tabindex="2" />
</fieldset>
<a href="/form/advSearch.asp" title="Ir al buscador avanzado">B&uacute;squeda Avanzada</a>
<a href="#"><img src="i/ay3.gif" alt="Ayuda del buscador" onclick="MM_openBrWindow(’/ayuda/listados/ayudabuscador.html’,”,’scrollbars=yes,width=316,height=300′)" /></a>
<input type="hidden" name="IDC" value="" />
<input type="hidden" name="IdCamino" value="" />
<input type="hidden" name="SearchHere" value="1" />
<script type="text/javascript">
function chkForm1(){
return true;
}
</script>
</form>

Ahora es cuestión de dividirlo en bloques para poder posicionarlos con nuestro CSS. Y quedaría algo como:


<div id="buscador">
<form id="cuadrobusca" onsubmit="chkForm1();" action="/accdb/search1.asp" method="get">
<fieldset>
<h2 title="¿Qué estás buscando?"><label for="termino"><span></span>¿Qué estás buscando?</label></h2>
<div>
<span><input name="txtsearch" id="termino" type="text" value="maquina de coser" size="28" maxlength="200" tabindex="1" /></span>
<span><input name="imageField" type="image" src="i/bt_bus_c.gif" title="Buscar" tabindex="2" /></span>
</div>
</fieldset>
<div>
<span><a href="/form/advSearch.asp" title="Ir al buscador avanzado">B&uacute;squeda Avanzada</a></span>
<span><a href="#"><img src="i/ay3.gif" alt="Ayuda del buscador" onclick="MM_openBrWindow(’/ayuda/listados/ayudabuscador.html’,”,’scrollbars=yes,width=316,height=300′)" /></a></span>
<input type="hidden" name="IDC" value="" />
<input type="hidden" name="IdCamino" value="" />
<input type="hidden" name="SearchHere" value="1" />
</div>
<script type="text/javascript">
function chkForm1(){
return true;
}
</script>
</form>
</div>

Seguramente alguien notará que hemos usado un h2 en lugar de un legend para mostrar el título de nuestro fieldset. Ésto es así por dos razones: la primera es que, personalmente, tomo el cuadro de búsqueda como un bloque semántico "fuerte" en la página general y por ello (y para continuar la jerarquía semántica de nuestra cabecera anterior) es necesario que el título sea de segundo nivel (ya veremos que tendremos varios títulos de segundo nivel a lo largo del rediseño total); la segunda es que la etiqueta legend responde muy distinto a los estilos dependiendo del navegador y, en especial, da muchos problemas a la hora de cambiar su posicionamiento.

Otra cosa notable es que el input general del formulario aparece con el texto "maquina de coser" impuesto. Ésto se debe a que las normas de accesibilidad WAI de W3C recomiendan que es conveniente poner un texto de muestra en los campos de texto que ayude al usuario a entender qué es lo que puede/debe ingresar en dicho campo.

Lo próximo es adentrarnos en nuestro CSS, que posicionará cada bloque y dará los toques de presentación necesarios.

html, body {
font-size: 100%;
font-family: arial, helvetica, sans-serif;
color: #333;
padding:0;
background-color:#fff;
margin:0 auto;
text-align:center;
}
/** posicionamientos generales **/
div, form, img, fieldset, h2, #buscador span { /** aprovechamos a definir más cosas generales **/
margin:0;
padding:0;
border:0;
position:relative;
}
/** el cuadro de búsqueda **/
#buscador {
font-size:.8em;
clear:both;
width:100%;
margin:0;
padding:0;
height:30px;
background-color:#FFD652;
border-top:1px solid #009;
border-bottom:1px solid #009;
}
#cuadrobusca {
width:645px;
height:30px;
margin:0 auto;
text-align:left;
}
#buscador fieldset, #buscador h2, #buscador span {
float: left;
display: inline;
}
#buscador div {
padding-top:4px;
width: 155px;
float: right;
}
#buscador fieldset div {
padding-top:4px;
width: 270px;
float: left;
}
#buscador h2 {
width: 178px;
height: 29px;
margin-left:20px;
font-size:1em;
}
#buscador span {
padding:0 3px;
}
#buscador h2 span {
background: url(../i/lft_busc2.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
float:none;
}

Si le echamos un ojo a la hoja de estilos de la cabecera de la parte 1, veremos que podemos reutilizar ya alguna cosa. Por eso a partir de ahora, las hojas de estilo de artículos anteriores empezarán a mezclarse por si solas y será casi imposible sacar los pesos exactos de cada parte. Dejaremos los pesos exactos para el final, cuando podamos cuantificar las páginas original y recodificada pero pondremos los pesos aproximados a lo largo del proceso.

El resultado de nuestro cuadro de búsqueda está servido.

Y para los impacientes que no puedan esperar a copiar los códigos y pegarlos a continuación de nuestra cabecera de la parte 1, aquí está lo que llevamos hecho de nuestra página general.

Nuestros pesos han quedado en:

  1. 1.108 bytes de HTML
  2. 932 bytes de CSS
  3. 2.559 bytes de imágenes (que son las siguientes):

En total, 4.559 bytes. El cuadro de búsqueda original pesaba en total 5.205 bytes.

Hemos logrado un ahorro de 646 bytes y ya hemos podido empezar a reutilizar CSS del artículo anterior (y si hacemos las cosas bien esta tendencia irá en aumento); hemos pedido al servidor 3 imágenes en lugar de 10; tenemos un formulario correcto, semántico, usable y accesible; y el cuadro de búsqueda se ve igual, pero funciona mejor :)

Ahora a esperar la próxima parte de esta serie: el listado de categorías.