A veces, lo mejor es no intentar entender por qué quien hizo la página original decidió usar “ésto o aquello” para solucionar “eso” sino, simplemente, ver el resultado que hay que lograr y decidir nosotros mismos cual es la mejor solución.

Éste es el primero de una serie de artículos en los que nos abocaremos a la tarea de recodificar la página principal del gigante de las subastas online en Latinoamérica: DeRemate.com (en su sitio de Argentina, más exactamente).

Captura de pantalla

¿Cómo lo haremos? Lo primero será dividir lo visible en bloques que agruparemos por similitud y los iremos abordando de uno en uno para terminar en un último paso donde veremos los “cómos y porqués” de la diagramación general de la página en la que integrarán cada uno de los bloques. Si todo va bien hasta ahora, deberíamos obtener algo como ésto:

Captura de pantalla

Donde pondremos nombre a cada bloque:

  1. cabecera
  2. buscador
  3. categorias
  4. extras
  5. ofertas
  6. superofertas
  7. superofertas-extend
  8. pie

Y ya podemos comenzar con el primero de ellos.

La cabecera

El código original de la cabecera, que incluye el logotipo y dos menús, está encerrado en un archivo Javascript externo que es llamado en la página mediante la línea:<script language="javascript" src="/images/common/js/27/nav.js"></script>

El contenido del archivo nav.js es el siguiente es largo y engorroso. Lo importante de este JS es que lo único que hace es escribir cierto código HTML, que es el siguiente:<link rel="stylesheet" href="/images/common/styles/styledr.css" type="text/css">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background="/images/h/bg_nav.gif" border=0>
<TR><TD><TABLE cellSpacing=0 cellPadding=0 width=720 align=center border=0>
<TR><TD><A href="http://argentina.deremate.com/index.html?page=1"><IMG src="/images/27/nav/v8/logo_nav.gif" alt="DeRemate - Home - Argentina" border=0></A></TD>
<TD><IMG src="/images/27/nav/v8/nav_rgt.gif" useMap=#nav_map border=0></TD>
</TR></TABLE></TD></TR></TABLE>
<script>
function LogInOut()
{
Now = new Date();
tmst = new String(Now.getTime());
window.location.href = "/form/verifID.asp?tmst=" + tmst;
}
</script>
<MAP name=nav_map>
<AREA title="[página de principal]" shape=RECT alt="¡Volvé a la Página de Principal!" coords=31,12,135,26 href="/index.html?page=2">
<AREA title="[ayuda]" shape=RECT alt="¿Tenés dudas? Ingresa acá." coords=226,44,292,66 href="/gen/ayuda/index.html?page=9">
<AREA title="[comunidad]" shape=RECT alt="¡Tu espacio en DeRemate.com está acá!" coords=303,12,376,26 href="/gen/comunidad/index.html?page=8">
<AREA title="[servicios]" shape="RECT" alt="¡Mira todo lo que te ofrece DeRemate.com para que compres y vendas mejor!" coords=229,12,288,26 href="/gen/servicios/index.html?page=7">
<AREA title="[buscar]" shape="RECT" alt="¡Acá encontrarás todo lo que deseas!" coords=83,44,155,68 href="/form/advsearch.asp?Page=6">
<area title="[Mi DeRemate]" shape="RECT" alt="¿Ya estás registrado? ¡Esta es un área exclusiva para ti!" coords="292,44,398,66" href="/mideremate/mideremate.asp">
<AREA title="[vender]" shape="RECT" alt="¿Tenés productos para vender? ¡Publicalos YA!" coords=154,44,226,66 href="/form/addObj.asp?Page=5">
<AREA title="[navegar]" shape="RECT" alt="¡Fijate las diferentes formas para navegar en DeRemate.com!" coords=1,44,83,66 href="/gen/navegar/index.html?page=4">
<AREA title="[identificate]" shape="RECT" alt="¡Registrate para operar en DeRemate.com!" coords=146,12,214,26 href="/AddUserNew/AdduserPaso1.asp?Page=10">
</MAP>
<center>

El código resultante pesa exactamente 2.101 bytes. El JS que lo genera (con el resultante incluído) pesa 2.218 bytes a los cuales hay que sumar:

  1. 73 bytes de la línea que carga el JS
  2. 5.000 bytes de imágenes

Por lo tanto podríamos decir que la cabecera original de DeRemate pesa 7.291 bytes.

¿Para qué hacen un JS externo que lo único que hace es escribir código HTML? Porque buscan acelerar la carga de la página jugando con el cache de los navegadores. Normalmente, cuando el navegador ha descargado un archivo lo guarda en el disco duro para buscarlo allí la próxima vez que lo necesite, sin tener necesidad de descargarlo nuevamente.

¿Ventajas? Pues eso, acelerar la carga de una página en los navegadores que tengan habilitado el cache.

¿Desventajas? Que el día que cambien algo del archivo nav.js no tendrán garantía alguna de que el usuario esté viendo la versión nueva, ya que su navegador puede estar buscando su versión de cache durante mucho tiempo antes de descargarlo nuevamente, y que cualquier navegador que no soporte JS o lo tenga deshabilitado simplemente no verá la cabecera y, por consiguiente, los menús de navegación.

Nuestra cabecera

Lo primero que haremos será evaluar qué elementos componen la cabecera original para buscar la mejor solución a cada uno. Éstos elementos son:

  1. El logotipo (con enlace a la página principal)
  2. Un menú con cuatro enlaces (parte superior)
  3. Un menú con cinco enlaces (parte inferior)

Bien, partiendo de la base que nos interesa, que es lograr un documento semánticamente correcto para que pueda ser utilizado e interpretado mediante el uso de cualquier dispositivo de navegación, definiremos que el logotipo (o más bien lo que dice) es un encabezado de primer nivel y los menús son listas de enlaces. Por lo tanto comenzaremos escribiendo nuestro “código primigenio”:
<h1>DeRemate.com</h1>
<ul>
<li><a href="#" title="¡Volvé a la Página de Principal!">Home Argentina</a></li>
<li><a href="#" title="¡Registrate para operar en DeRemate.com!">Registrate</a></li>
<li><a href="#" title="¡Mirá todo lo que te ofrece DeRemate.com para que compres y vendas mejor!">Servicios</a></li>
<li><a href="#" title="¡Tu espacio en DeRemate.com está acá!">Comunidad</a></li>
</ul>
<ul>
<li><a href="#" title="¡Fijate las diferentes formas para navegar en DeRemate.com!">Navegar</a></li>
<li><a href="#" title="¡Acá encontrarás todo lo que deseas!">Buscar</a></li>
<li><a href="#" title="¿Tenés productos para vender? ¡Publicalos YA!">Vender</a></li>
<li><a href="#" title="¿Tenés dudas? Ingresa acá.">Ayuda</a></li>
<li><a href="#" title="¿Ya estás registrado? ¡Esta es un área exclusiva para ti!">MiDeremate</a></li>
</ul>

El próximo paso será encerrar el código anterior en bloques y ponerles nombres que nos permitirán, además de brindar información sobre lo que hay dentro de cada uno, darle “toques de presentación gráfica” mediante el uso de CSS más adelante:
<div id="cabecera">
<div class="center">
<h1 id="logo" title="DeRemate - Home - Argentina"><a href="http://argentina.deremate.com/index.html?page=1"><span></span>Deremate.com</a></h1>
<div id="menus">
<div id="primermenu">
<ul>
<li><a href="/index.html?page=2" title="¡Volvé a la Página de Principal!">Home Argentina</a></li>
<li><a href="/AddUserNew/AdduserPaso1.asp?Page=10" title="¡Registrate para operar en DeRemate.com!">Registrate</a></li>
<li><a href="/gen/servicios/index.html?page=7" title="¡Mirá todo lo que te ofrece DeRemate.com para que compres y vendas mejor!">Servicios</a></li>
<li><a href="/gen/comunidad/index.html?page=8" title="¡Tu espacio en DeRemate.com está acá!">Comunidad</a></li>
</ul>
</div>
<div id="segundomenu">
<ul>
<li id="nav1"><a href="/gen/navegar/index.html?page=4" title="¡Fijate las diferentes formas para navegar en DeRemate.com!">Navegar</a></li>
<li id="nav2"><a href="/form/advsearch.asp?Page=6" title="¡Acá encontrarás todo lo que deseas!">Buscar</a></li>
<li id="nav3"><a href="/form/addObj.asp?Page=5" title="¿Tenés productos para vender? ¡Publicalos YA!">Vender</a></li>
<li id="nav4"><a href="/gen/ayuda/index.html?page=9" title="¿Tenés dudas? Ingresa acá.">Ayuda</a></li>
<li id="nav5"><a href="/mideremate/mideremate.asp" title="¿Ya estás registrado? ¡Esta es un área exclusiva para ti!">MiDeremate</a></li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript">
<!--
function LogInOut(){
Now = new Date();
tmst = new String(Now.getTime());
window.location.href = "/form/verifID.asp?tmst=" + tmst;
}
//-->
</script>

Finalmente, nuestro CSS se ocupará de posicionar cada bloque y aplicar los gráficos necesarios para que la presentación sea perfecta.
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 {
margin:0;
padding:0;
border:0;
position:relative;
}
#cabecera {
height:66px;
background-image:url(i/bkg.nav.gif);
font-size:.8em;
clear:both;
width:100%;
margin:0;
padding:0;
}
#menus {
float:right;
}
.center { /** lo definimos como una clase porque lo reutilizaremos más de una vez en la página **/
margin:0 auto;
width:720px;
text-align:left;
}
/** el logotipo **/
h1#logo {
margin:0;
padding:0;
}
#logo a {
position:absolute;
top:0;
left:0;
width:324px;
height:66px;
background: url(i/logo_nav.gif) no-repeat;
display:block;
text-indent:-1000em;
}
/** el primer menú **/
#primermenu {
padding-top:10px;
clear:right;
text-align:right;
}
#primermenu ul {
margin:0 18px;
padding:0;
}
#primermenu li {
display:inline;
}
#primermenu a {
color:#009;
font-weight:bold;
padding:0 5px;
}
#primermenu a:hover {
text-decoration:none;
}
#primermenu li:after { /** hack para que aparezca un | entre cada enlace en los navegadores modernos **/
content: "|";
font-weight:bold;
text-align: center;
margin-right: -3px;
display: block;
}
#primermenu li+li+li+li:after {/** hack para que NO aparezca un | luego del último enlace en los navegadores modernos **/
content: "";
}
/** el segundo menú **/
#segundomenu {
padding:19px 0 0 0;
}
#segundomenu ul {
margin:0;
list-style: none;
}
#segundomenu li {
display:inline;
margin: 0;
padding: 0;
}
#segundomenu a {
background-color:#fffaf1;
height:21px;
text-indent:-1000em;
text-decoration:none;
float:left;
display:block;
}
#segundomenu a:hover {
background-color:#fff;
}
#nav1 a {
width:81px;
background-image:url(i/nav.1.gif);
}
#nav2 a {
width:72px;
background-image:url(i/nav.2.gif);
}
#nav3 a {
width:73px;
background-image:url(i/nav.3.gif);
}
#nav4 a {
width:65px;
background-image:url(i/nav.4.gif);
}
#nav5 a {
width:104px;
background-image:url(i/nav.5.gif);
}

Aquí podemos ver nuestra cabecera final. Nuestros pesos han quedado en:

  1. 1.691 bytes de HTML
  2. 2.162 bytes de CSS
  3. 4.286 bytes de imágenes (que son las siguientes):

Nuestra cabecera ha quedado pesando 8.139 bytes en total, 848 bytes más que la original. Sin embargo, hay que tener en consideración un par de hechos: tanto el código HTML como el CSS están correctamente indentados y comentados para una mejor “lectura e interpretación” a la hora de hacer modificaciones (borrando los comentarios, el indentado del HTML y poniendo las instrucciones del CSS en una línea por selector o clase pueden ganarse muchos bytes, al igual que al definir los nombres y rutas a las imágenes); en el CSS tenemos código “reutilizable”, o sea, código que se refiere a la presentación que utilizaremos en más de un elemento en la página total ahorrando código cada vez que lo reutilicemos; nuestra cabecera es visible y utilizable con cualquier dispositivo de navegación, inclusive no convencional (PDAs, teléfonos móviles, etc.); y la accesibilidad se ha incrementado en, al menos, un 100%.

En los próximos artículos seguiremos abordando el rediseño (recodificación) de la página principal de DeRemate.com de Argentina bloque por bloque. ¿El que viene? El cuadro de búsquedas.

Stay tuned ;)