Definición de tasa de transferencia

La tasa de transferencia es la totalidad de datos que se transfieren desde y hacia el servidor que aloja una página web. Esta cantidad de información se mide en Kb (kilobytes), Mb (megabytes) o Gb (gigabytes) en un período de tiempo determinado. En la oferta de los servicios de alojamiento web, generalmente la tasa de transferencia es mensual, por lo que la cifra a la que se refieren es de la cantidad de bytes mensuales que pueden ingresar o salir del servidor.

La tasa de transferencia incluye la transmisión de datos por todo concepto (esto es muy importante), por lo que debe incluirse la cantidad de información que se transferirá desde el servidor a los usuarios por el concepto de visitas al sitio, las subidas y descargas de archivos por FTP, las descargas y subidas de archivos por parte de los visitantes, el empleo de correo electrónico en cuentas alojadas en el servidor, y en definitiva, toda clase de movimientos, tanto de los visitantes como los propios del mantenimiento de la página que se encuentra alojada.

¿Qué tasa de transferencia necesito?

Al momento de seleccionar un servicio de alojamiento web, deberíamos hacernos esta pregunta. Generalmente, esto es algo que aquellos que tienen experiencia dominan y saben manejar, aunque para quienes recién se inician en la creación de páginas web puede aparecer como algo oscuro y difícil. En realidad, debemos tener en cuenta que cuando una página web es nueva, la tasa de transferencia que requerirá es muy baja. Al principio, la cantidad de visitantes al sitio será baja, la cantidad de información en el sitio no será muy importante, y por lo tanto, el porcentaje de la tasa de transferencia máxima será irrelevante aun cuando se tenga un servicio con prestaciones modestas.

Sin embargo, se debe tener en cuenta que el sitio poco a poco irá ganando cantidad de visitantes, que se le irá agregando cantidad de información (la cual no siempre es posible hacer que ocupe pocos bytes, sobre todo si se trata de imágenes o videos), todo lo cual implicará un aumento de la tasa de transferencia del sitio.

De todas formas, generalmente los servicios de hosting ofrecen varios planes de alojamiento, los cuales tienen diferencias entre sus prestaciones, por lo que en caso de necesitar mejores prestaciones por parte del servidor, siempre existe la posibilidad de cambiar de plan abonando una cifra superior.

¿Cómo se calcula la tasa de transferencia necesaria?

Si bien puede ser algo realmente complicado saber a ciencia cierta cuál es la tasa de transferencia necesaria para un sitio web, se pueden hacer algunas estimaciones que pueden ser útiles como referencia. Debemos tener en cuenta, a la hora de realizar estos cálculos, que debemos hacerlo en forma optimista, ya que calcular una tasa de transferencia menor a la necesaria, puede tener consecuencias desagradables.

Para hacer nuestros propios cálculos, debemos tener en cuenta las siguientes cifras:

1. El “peso” total de los archivos que componen el sitio. Esto es muy sencillo de hacer, ya que basta con colocar todos los archivos en una carpeta en nuestro propio ordenador, hacer click con el botón derecho y ver las propiedades, donde aparece claramente la cantidad de bytes que contiene.
2. La máxima cantidad de visitas mensuales que recibirá el sitio. Si bien esto es difícil de prever, una posibilidad es analizar la cantidad de visitas que tienen sitios similares al que se está por crear. La cantidad de visitas de un sitio puede verse (con algún margen de error) en sitios como Alexa, donde con solo teclear el nombre del sitio aparecerán una serie de datos estadísticos muy interesantes.
3. La cantidad de datos que será necesario transferir hacia el servidor por concepto de FTP, aunque esta es una cifra que resultará despreciable en comparación con la tasa de transferencia por otros conceptos.
4. La cantidad de información que los usuarios descargarán del sitio, en caso de que los visitantes tengan posibilidad de descargar archivos. Este cálculo es mucho más difícil de estimar, por lo que el margen de error es mucho mayor. Sin embargo, salvo que se esté pensando en un sitio destinado fundamentalmente a descargas, la tasa de transferencia total por este concepto no tiene una incidencia mayor, aunque conviene tener en cuenta algún dato para no llevarse sorpresas.
5. La cantidad de emails que se enviarán a través del sitio. Esto, al igual que la cantidad de bytes de transferencia por FTP, es un dato menor, ya que usualmente tienen escasa incidencia en la tasa de transferencia total.

Para realizar el cálculo de la tasa de transferencia provocada por las visitas a la página, se aplica la siguiente fórmula:

visitas mensuales x páginas por visita x volumen por página x 1,25

Imaginemos que tenemos una web en la que se producen unas 30.000 visitas mensuales (1.000 visitas diarias), con páginas que tienen un tamaño promedio de 100 Kb (el máximo recomendable) y los visitantes realizan un recorrido promedio de cuatro páginas en cada visita. Esto nos arroja los siguientes datos:

30.000 visitantes x 4 páginas x 100 Kb por página x 1.25 = 15.000.000 Kb

Teniendo en cuenta que cada Mb equivale a 1.024 Kb y que cada Gb equivale a 1.024 Mb, tenemos que:

15.000.000 Kb / 1.024 / 1.024 = 10.73 Gb

Si se desea, para convertir unidades de información, pueden emplearse calculadoras en línea, como Computer Units Conversion o la del sitio Wilkinsonpc.

Ahora calculamos la transferencia por otros motivos:

1.000 descargas x 1Mb = 1.000Mb = 0.98 Gb
5.000 emails x 0.1Mb = 500Mb = 0.49 Gb
El uso de FTP, aun siendo exagerados, no sería superior al doble del peso total de los archivos componentes del sitio, por lo que, comparado con las demás cifras es despreciable.

Sumando la totalidad de los Gb, nos da 12.2 Gb de transferencia  necesarios (siendo siempre muy optimistas). Ha de tenerse en cuenta que hacer un cálculo algo exagerado, tiene como consecuencia que aún en el caso de que el sitio sea más visitado de lo que originalmente hemos previsto, no superaremos el tope de transferencia del servidor.

¿Qué sucede si supero el tope de tasa de transferencia de mi servidor?

Normalmente existen dos medidas que las compañías proveedoras de alojamiento web toman en estos casos. En algunos, generalmente en caso de servidores gratuitos u opciones económicas, una vez que se llega al tope de la tasa de transferencia mensual la página deja de estar accesible, es decir, deja de verse, hasta tanto el plazo de un mes termine y se comience a computar la nueva tasa de transferencia mensual. En caso de servicios pagos, generalmente la compañía proveedora de hosting realiza la facturación extra por las transferencias en exceso. En este último caso, el costo de la tasa de transferencia es bastante mayor que la que se computa dentro del plan, por lo que es conveniente contratar un plan superior antes de que esto suceda.

Muchas páginas ofrecen textos o imágenes que posiblemente los usuarios necesiten o deseen imprimir. Es muy frecuente que cuando tratamos de imprimir una página en su diseño original, esta no tiene las medidas adecuadas y la impresión no se vea en forma correcta. Por ello, muchas páginas ofrecen a sus usuarios y visitantes la posibilidad de acceder a una versión imprimible del documento.

Del mismo modo, un usuario que desea acceder a una página web desde un móvil, encontrará que las versiones para ordenadores de las páginas web presentan dimensiones inadecuadas para este medio, debiendo emplear las molestas barras de desplazamiento horizontal para acceder al todos los contenidos. Debido al notorio incremento del empleo de móviles para acceder a la web, muchas páginas ofrecen actualmente versiones de sus páginas que se adaptan a las resoluciones de pantalla de los mismos.

Documentos adaptables al medio desde el que se visualiza

La opción de crear un documento para cada tipo de medio, si bien es viable, realmente resulta difícil de implementar por dos razones. La primera es que constituye una verdadera pérdida de tiempo y energía por parte del diseñador. En segundo lugar, la creación de varios documentos para cada una de las páginas de un sitio implica ocupar mucho espacio en el servidor, con el consiguiente aumento de los costos del mismo.

La mejor solución es la implementación de hojas de estilo externas, es decir, separadas del documento HTML o XHTML para cada uno de los medios que se desea implementar y vinculadas al documento principal a través de la etiqueta <link> en el <head> del documento.


<link rel="stylesheet" href="screen.css" media="screen, handheld" />
<link rel="stylesheet" href="print.css" media="print" />
<link rel="stylesheet" href="handheld.css" media="handheld" />


Estas etiquetas tienen la facultad de que una vez que el navegador ha detectado el medio a través del atributo “media” (media=”screen” para los ordenadores normales, media=”print” para el diseño de la página imprimible y media=”handheld” para los diferentes dispositivos móviles), determina cual de las hojas de estilo es la que debe aplicar. El siguiente ejemplo es una muy conocida página (Wikipedia), la cual ofrece a sus visitantes la posibilidad de acceder a una página imprimible. Aquí pueden observarse las diferencias entre un diseño y otro.

Orden del documento

Muchos motores de búsqueda indexan las páginas web teniendo en cuenta cuáles son los elementos que aparecen desplegados en los primeros lugares del documento HTML, lo que no indica necesariamente que sea el orden en el que se visualizan, ya que esto puede modificarse empleando el CSS.

Además, siempre es conveniente dar un orden lógico a los contenidos, de modo que la página no aparezca como algo confuso compuesto por elementos inconexos. Además de la importancia real de los elementos del documento (tanto los visibles como los no visibles), los diferentes componentes tienen un orden de importancia relativa, es decir, una jerarquía en el orden en que son visualizados. Desde este punto de vista, es importante que los diferentes contenidos aparezcan ordenados de acuerdo con esta jerarquía, y su visualización corresponda con la misma.

Selección de los elementos visualizables

La presentación de un documento en varios formatos para su visualización en diferentes medios, también conlleva la selección de elementos. Cuando se diseña una página web, algunos elementos de este formato son compatibles con los diseños de impresión, mientras que otros pueden y deben ser obviados, dado que no aportan ninguna utilidad al usuario y puede ocupar un espacio que, en los formatos de impresión, pueden resultar útiles para expandir textos o imágenes.

Algunos ejemplos de elementos que pueden ser dejados de lado, son por ejemplo, los menús y las columnas (siempre y cuando no tengan contenidos relevantes y relacionados con el resto del documento). Los links no serán visualizables en un formato de impresión, pero si se puede colocar una dirección web para que pueda ser visible en el documento impreso.

Utilización de textos alternativos

La etiqueta <img />, la cual determina la ubicación de una imagen en un documento web, tiene la posibilidad de insertar un texto alternativo a través del atributo alt=”texto alternativo”. Algunos buscadores le dan importancia a los textos alternativos de las imágenes, por lo que es aprovechado en el posicionamiento de una página web en los mismos. Sin embargo, este atributo tiene una importancia que va mucho más allá de colaborar en la tarea de indexación de una página por las palabras clave empleadas en este atributo. Se trata de la accesibilidad.

Este texto alternativo es el que los medios destinados a las personas con dificultades visuales utilizan para la descripción de lo que se muestra en una página web. También los videos tienen la posibilidad de agregar descripciones en forma de texto, los cuales pueden ser interpretados por los medios para discapacitados.

Adaptación al medio empleado

Las personas que navegan por la web, emplean los sitios web de formas diferentes, de acuerdo a sus necesidades, gustos o posibilidades. El hecho de que un porcentaje de los usuarios de Internet tengan dificultades visuales o ausencia completa de la visión, debe orientar una buena parte de los contenidos a su uso por parte del software de lectura. Otro porcentaje importante de los internautas, acceden la mayor parte del tiempo a la web a través de los múltiples dispositivos móviles, por lo que las páginas deberían contar con un diseño específico para este tipo de dispositivos, que permita la visualización de los contenidos en bajas resoluciones de pantalla.

Y lo más importante, todo esto, no debe requerir un esfuerzo desmesurado por parte del diseñador, el cual cuenta con medios a su alcance para que esta tarea resulte sencilla y sin tener que realizar modificaciones en el documento original, tanto si está escrito en HTML como en XHTML.

Ambas se trabajan juntas, pues una sirve para complementar a la otra.

Float

Float en simples palabras es una propiedad de CSS que nos permite “hacer flotar” un elemento a una posición relativa rompiendo el esquema normal de la pagina.

Nos permitirá con facilidad paginas con 2 o más columnas, entre muchas otras cosas.

Esta propiedad tiene 3 valores importantes:

• Left: Flota el elemento a la Izquierda.
• Right: Flota el elemento a la Derecha
• None: Que el elemento no Flota.

Ejemplos de estructuras web usando float y clear del CSS

Ahora veremos una serie de ejemplos.

Primero debemos tener dos archivos, el HTML y el CSS:
EL HTML sera así:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Aprendiendo Float y Clear</title>
    <link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</body>
</html>

Al archivo html lo podremos llamar como queramos, en él simplemente se encuentran 4 divs con un numero dentro y la clase Box asignada a ellos.

Luego nuestro archivo CSS que deberá llamarse style.css y estar en la misma carpeta que el html.

.box{ width:200px; height:200px; background:#999; float:left; border:1px solid #444; }

Como vemos le he dado ciertas propiedades como tamaño, color y un borde. Solo para reconocer mejor cada div.

Con este codigo nuestros divs se verían así:

Como vemos el primer div flota a la izquierda y luego los otros intentan lo mismo, quedando al lado en orden.

Así mismo, si en vez de tener float:left lo cambiamos a float:right veríamos todo de la siguiente manera:

Como vemos los objetos “cambiaron sentido” el primer div se fue a la derecha y así los demás se fueron poniendo a su lado en orden.

Para que noten la utilidad y el cambio, veremos como sería sin la propiedad float.

Como se puede ver los objetos no flotan por lo tanto simplemente van quedando uno abajo de otro.
Con float podremos lograr paginas y diseños de varias columnas.

Pero surge un problema, cuando el tamaño de la pantalla es menor a lo que ocupan nuestros objetos estos se irán corriendo para abajo de la siguiente manera:

Este problema se puede solucionar encerrando a todos estos divs dentro de otro que tenga un tamaño igual o mayor al que ocupan todos los divs en linea. Por ejemplo para corregir este error en mi ejemplo deberíamos encerrarlos en un div con un width:808px; (Contando que cada uno mide 200px más 2px de borde y son 4)

Pero puede ocurrir lo contrario, que queramos que se vea como en la imagen anterior pero al agrandar la resolución de pantalla nuestro diseño se deforme y se forme una linea como en la primera imagen. Para eso tenemos Clear.

Clear

Clear es la propiedad que sirve para “romper” el esquema que estaba formando float.
Como vimos por cada objeto que contenga la propiedad float se irán agrupando a su lado uno tras otro sin interrupción al menos que el tamaño de su contenedor sea menor.  Al colocarse clear a un objeto le decimos que actúe como si fuese el primero objeto en tener la propiedad float pero en la siguiente linea, y así el esquema anterior se rompe y comienza uno nuevo de ahí para abajo.
Puede tener los siguientes valor:

• Left: Se rompe el esquema de orden para los elementos con “Float:left”
• Right: Se rompe el esquema de orden para los elementos “Float:right”
• Both: Se rompe el esquema de orden para los elementos con cualquier float, ya sea right o left.

Por ejemplo si en nuestro HTML al tercer div le cambiamos su id a box2 y agregamos al css:

.box2{ width:200px; height:200px; background:#999; clear:left; float:left; border:1px solid #444; }

Con esto, sin importar cuanto agrandemos la pantalla nuestra web se vería así.

Con float y Clear podremos crear muchas formas de paginas, aquí algunos ejemplos.

Espero que les sea de utilidad. Para cualquier duda, comenten.

Dentro de los objetivos que debe trazarse un diseñador a la hora de iniciar el diseño de un sitio web, está la identidad institucional, o lo que es igual, lograr que los usuarios identifiquen cada página del sitio como parte de una unidad.

Esto se logra empleando plantillas de diseño, o sea, la repetición de un mismo diseño con variación casi en forma exclusiva en los contenidos. Sin embargo, existe la posibilidad de que algunas secciones o páginas del sitio requieran un tratamiento especial, por lo que seguramente el diseñador necesitará realizar más de una plantilla, que generalmente son variaciones de una misma plantilla original.

Dónde comenzar el diseño de la plantilla

Todo diseñador novato tiene la tendencia natural de iniciar el diseño de un sitio construyendo la página inicial. Sin embargo, la página inicial es una página con características especiales, por lo que si lo que se desea es establecer una unidad visual del sitio, lo correcto sería comenzar por las páginas cuyo diseño se repetirá. Esto quiere decir, que lo mejor es comenzar diseñando las páginas interiores. Luego, el método debería continuar con las variaciones que algunas de las páginas interiores requieren, para finalizar en el diseño de la página inicial.

Las páginas interiores deben ser diseñadas teniendo en cuenta cuáles son sus funciones, las que para todos los sitios son las mismas:

1. Navegación local e inserción de la página dentro de la estructura jerárquica del sitio.
2. Establecer el marco del diseño, introduciendo los contenidos en forma coherente con el resto del sitio.
3. Establecer el marco gráfico, dándole al sitio una coherencia visual, aunque lo suficientemente flexible como para adaptarse a las necesidades de cada sección o contenido

En casos de sitios muy complejos, puede ser necesario establecer plantillas secundarias para diferentes niveles de estructura. También es conveniente en estos casos, establecer páginas de submenú, que facilitan la navegación interna dando al usuario nuevos puntos de apoyo para la navegación.

Algunas páginas web, por razones de marketing necesitan establecer “entradas alternativas” al sitio. Por ejemplo, la página web de una cadena de supermercados, durante el período que dura una oferta especial, necesita que sus visitantes ingresen por otra página de inicio, que contiene los detalles de la oferta. Esta página que funciona como entrada alternativa, necesita tener una clara vinculación visual con el resto del sitio, y además debe orientar al visitante para que acceda a la página principal del sitio.

En sitios de grandes corporaciones internacionales o negocios con varias sucursales, también es posible que deseen que cada una de las ramas tenga una sección destinada a cada una de sus divisiones. Esto puede realizarse estableciendo secciones o sitios independientes, los que deben, al igual que en los casos anteriores, mantener una unidad visual con el sitio principal, además de la mayor vinculación que sea posible.

La página de inicio

El diseño de la página de inicio, si bien tiene características especiales que hay que tener en cuenta, una vez que los pasos anteriores ya han sido resueltos, resultará sensiblemente más sencilla de realizar que si se hubiera comenzado el diseño por ella. Y esto está relacionado con que gran parte del trabajo de diseño ya ha sido realizado.

La página de inicio tiene cuatro elementos por los que está compuesta. Cada uno de estos elementos es importante, aunque la importancia y la relación que tienen entre ellos es variable de un tipo de sitio a otro. Los elementos son los siguientes:

1. Principio de identidad
2. Navegación
3. Enfoque del contenido
4. Herramientas

El diseño de una página de inicio debe siempre contemplar estos cuatro elementos constitutivos, aunque la importancia que debe darse a cada uno de ellos está relacionada con lo que el visitante querrá encontrar en el sitio cuando ingrese. Un ejemplo notable es la diferencia que existe entre las páginas de inicio de los buscadores Google y Yahoo!. Mientras que la página de inicio del buscador de Google se centra casi exclusivamente a la navegación, la página de inicio de Yahoo destaca otros elementos, como noticias destacadas (contenido) y otros servicios (herramientas).

Otras páginas se deben centrar más en la imagen corporativa (principio de identidad), aunque en el caso de que no se trate de marcas plenamente identificables por tener una gran presencia, debe agregarse además breves comentarios explicativos que orienten al usuario en lo que encontrarán en el sitio. Si no se posee una marca reconocible a simple vista por cualquier usuario, la simple presencia de un logotipo, por bien diseñado que esté, no será suficiente para que el usuario sepa que es lo que encontrará en el resto del sitio.

Distribución de los contenidos en la página principal

Algunos sitios, como los destinados a las noticias, necesitan introducir una gran cantidad de contenidos de todo tipo en su página de inicio. Esto necesariamente requiere que haya una distribución ordenada de forma tal que los principales contenidos se encuentren en los lugares más destacados. Siguiendo con el ejemplo de una página de noticias, las noticias principales deberían tener acceso desde un lugar cercano a la esquina superior izquierda.

En cambio, en los sitios en cuya página principal puede introducirse poco o ningún contenido, en los lugares más relevantes debería colocarse elementos que generen un impacto visual en el usuario, de forma que se sienta atraído a buscar contenidos en páginas secundarias.

Uso de menús desplegables

Para la mayoría de los usuarios normales, los menús desplegables suelen ser difíciles de manejar, y en muchos casos ni siquiera descubren que se encuentran allí. Este tipo de menús por lo general implican que el usuario debe posar el puntero en una zona de espacio bastante limitado, lo que puede generar alguna complicación a usuarios inexpertos o personas con algún tipo de problema motriz.

Menos aconsejable aún es el empleo de menús desplegables que usan javascript o similares, ya que los enlaces contenidos en estos menús no son detectados por los motores de búsqueda, que no ejecutan los scripts.

Contenido de los menús

Los menús principales, aquellos más visibles, generalmente ubicados cerca de la cabecera de la página, debe estar destinado a mostrar las secciones más apetecibles por los visitantes que ingresan a la página por primera vez. Esto se debe a que los usuarios habituales de un sitio, generalmente conocen en qué secciones pueden encontrar la información que buscan, mientras que los usuarios que ingresan por primera vez, deben ser rápidamente orientados a las secciones que necesitan.

Páginas de bienvenida

Salvo algunos sitios muy especiales, la mayoría de los sitios no solo necesitan una página de bienvenida (mucho menos con imágenes grandes o animaciones flash que llevan mucho tiempo de carga u obligan al usuario a buscar un botón de salida y hacer click en él), sino que constituye un verdadero problema, ya que se trata de la misma página a la que llegarán los motores de búsqueda, donde no encontrarán contenidos con información clasificable y muy pocos enlaces.

Para que el mensaje llegue al usuario, todos los elementos deben estar equilibrados. Este equilibrio tiene una serie de reglas básicas que todo diseñador de páginas web y diseñador gráfico debe conocer. Sin embargo, un error frecuente en el diseño es realizar el mismo para luego introducir los componentes, cuando en realidad el diseño debe estar pensado para que los componentes se vean de tal forma que el mensaje llegue en forma correcta al usuario.

Equilibrio de las proporciones

Cada componente de una página web tiene un peso visual, el cual depende de sus atributos, como forma, color, tamaño, etc. Este peso visual, es la proporción. Lo primero que se nos ocurre al hablar de proporción, es el tamaño relativo del objeto en cuestión. Un elemento más grande que otro, tiene una atracción visual superior que el segundo. Pero además, la carga visual de un elemento también depende de otros atributos, como el color. Un objeto de color saturado, tiene un peso visual superior que otro cuyo color tiene una saturación menor.  Las formas tienen también influencia en la proporción de los elementos. Así pues, un elemento de forma irregular tiene mayor atracción visual que un objeto de forma regular.

Todos estos atributos deben guardar una proporción tal que los elementos que se desee resaltar sean más visibles que otros, pero de forma tal que tampoco los elementos secundarios “desaparezcan”. Hay muchas formas de conseguir que las proporciones de los diferentes objetos se adecúen al fin perseguido.

Equilibrio de las escalas

Las proporciones de los diferentes elementos de un diseño tienen una relación entre sí que denominamos escala. Esta escala, que en principio pensamos exclusivamente en relación al tamaño de los objetos, abarca a todos los atributos de los mismos. Esto quiere decir, que deben tenerse en cuenta las escalas de tamaño, de forma, de color. Cada uno de los atributos de un objeto, tiene una dimensión, la cual no es absoluta, sino relativa, ya que depende de los atributos de los demás objetos. Por ejemplo, un cuadrado de 120 pixeles de lado es grande si se encuentra junto a otro de 60 pixeles, pero es chico si se le relaciona con uno de 200 pixeles. Lo mismo sucede con los colores. Un objeto de color amarillo sobre fondo negro es más llamativo que uno de color gris ubicado a su lado; sin embargo, el mismo elemento amarillo, sobre fondo blanco es mucho menos llamativo que un objeto de color rojo ubicado también a su lado.

La escala, en definitiva, es muy importante para relacionar objetos de diferentes proporciones. Todo diseño equilibrado debe estar integrado por elementos que mantienen una cierta relación entre sus proporciones. Un ejemplo práctico lo vemos en el siguiente diseño, donde (solo por tomar la relación existente entre algunos de sus elementos) la escala del encabezado y del menú, tienen una relación tal que la atención fluye rápidamente hacia el primero, pero con una diferencia tal que hace posible que el menú sea visible para los usuarios y dar una buena navegabilidad a la página. El equilibrio de las escalas, en este ejemplo, puede apreciarse en el tamaño, en el color y en las formas.

Agrupación de elementos

Dentro de las reglas del equilibrio de un diseño, debe tenerse muy presente que una de las formas de lograr un mejor equilibrio entre los diferentes elementos, es la agrupación de los mismos. La agrupación, además, consigue otro factor importante en un diseño, que es el orden. La agrupación de elementos es natural en el ser humano, que tiene la tendencia a colocar juntos a objetos afines. Esto, en el diseño de páginas web, tiene como finalidad darle lógica y racionalidad a la ubicación de los diferentes elementos, de forma tal que la comunicación del mensaje sea efectiva.

Los componentes de una página pueden agruparse de acuerdo a varios criterios:

• Por proximidad, la forma más elemental de agrupar los objetos, que consiste en agruparlos de acuerdo a su cercanía física.
• Por semejanza, que consiste en agrupar objetos de acuerdo a su parecido visual.
• Por continuidad, es decir, de acuerdo al significado de los elementos.
• Por simetría, que es agrupar objetos de manera tal que den la sensación de conformar una figura conocida o simétrica.

La agrupación es uno de los equilibrios más sencillos de ver en un diseño web. Es muy común, por ejemplo, ver agrupaciones de imágenes, o que los textos se encuentren en un lugar determinado de la página, los botones de navegación siempre están agrupados en un menú, etc.

Alineación del diseño

Para que la composición no aparezca como caótica, los diferentes elementos y grupos de elementos deben aparecer ordenados de acuerdo al trazado de líneas imaginarias, tanto verticales como horizontales, que se denominan reticulado. La alineación es importante, debido a que cuando se colocan muchos objetos dentro de un diseño, la forma más sencilla de que los usuarios logren ubicarlos e identificarlos es que se encuentren alineados. Esto se ve acentuado por el hecho de que la propia forma de los monitores es rectangular, por lo que el ordenamiento según líneas rectas es algo natural. En la imagen siguiente, vemos una página alineada, tanto vertical como horizontalmente y donde resulta muy sencillo trazar líneas imaginarias sobre las que se encuentran los componentes:

La alineación de los textos, es además, un aspecto importante en la comunicación. Lo usual, siguiendo la tradición escrita, es que los mismos se encuentren alineados a la izquierda, aunque excepcionalmente y debido a ciertas circunstancias, los textos pueden aparecer alineados a la derecha, centrados o justificados, aunque lo recomendable, para facilitar la lectura, es que se emplee la primera de las alineaciones.

Equilibrio de contenidos

Toda página web está integrada por elementos textuales, gráficos y ocasionalmente con contenidos de otros medios. Desde el punto de vista del diseño de una página web, y dado la relevancia de los dos primeros, nos referiremos al equilibrio entre los elementos gráficos y textuales. Los elementos textuales son indispensables, ya que aportan la mayor parte de la información que se desea transmitir. Los elementos gráficos, además de también hacer aportes de información, suministran las sensaciones visuales necesarias para acompasar y resaltar el sentido del mensaje de la web.

El abuso de cualquiera de los dos tipos de elementos es contraproducente, ya que los usuarios necesitan la información por la que llegan a la página, pero también necesitan sentirse atraídos por el lenguaje visual. Por consiguiente, el equilibrio entre estos tipos de componentes de una página, es fundamental.

Jerarquía visual

Una página web equilibrada debe mantener una cierta jerarquización de los contenidos, de forma tal que la vista del usuario sea guiada en forma adecuada a través de los mismos. La jerarquización de los componentes comienza con la ubicación de los mismos. Dado que el sistema de lectura empleado en occidente es de izquierda a derecha y de arriba hacia abajo, existe una tendencia natural en los individuos a recorrer los objetos gráficos en ese orden. Por consiguiente, es natural que el elemento más importante de una página web (su logotipo) se encuentre ubicado en la esquina superior izquierda o muy cerca de ella, seguido hacia la derecha por el título de la página.

La jerarquización de los elementos componentes de una web, puede realizarse también empleando colores y contraste. Todo contenido de una página web debe tener establecida su jerarquía en la misma, empleando para ello cualquier técnica de diseño.

Cuando muchos de nosotros iniciamos en el mundo del Internet y paginas web, a mediados y finales de la década de los 90, la variedad y diversidad de navegadores web era casi nula, teníamos poco o nada de donde escoger para navegar a través de la red mundial. Quitando a Mosaic, y su variación Spyglass que más tarde se convertiría en Internet Explorer, Netscape dominaba el mercado casi en su totalidad, en cada PC en la que nos sentábamos en aquellos años encontrábamos el curioso icono del “Timón” que aparecía en nuestro escritorio y nos llevaba al famoso Internet del que muchos hablaban pero pocos conocían.

La era Netscape

Netscape Navigator no era un mal navegador, por lo contrario, nos ofrecía lo necesario y más para poder navegar de manera correcta en aquellos años, envió de formularios, correo electrónico, manejo de scripts y desde 1997 incorporó las hojas de estilo, aunque no de la manera más correcta, de cierta manera nos permitía ir experimentando con el HTML dinámico y conocer más allá del código plano que veníamos manejando.

El triunfo de Internet Explorer

Sin embargo no todo fue bueno, como todo en un principio, el navegador contenía bastantes errores y nos podíamos encontrar con los famosos Bugs en varias de sus funciones, éstos tuvieron que irse corrigiendo con el paso de las versiones, y al momento de la salida de Internet Explorer (aliado a Microsoft) la competencia que sintió Netscape lo llevo a crear los llamados “netscapismos” los cuales eran extensiones que sólo el navegador Netscape podía interpretar.

Estos netscapismos no respetaban lo que el W3C (World Wide Web Consortium) establecía como estándares, lo que obviamente llevaba a que algunas páginas web no fueran compatibles con este navegador o con su competencia, en este caso Internet Explorer, quien también se encargó de ir creando sus propias extensiones y se desató una guerra que duró los últimos años de la década.

Internet Explorer fue el amplio “vencedor” de esto, aunque seguía y sigue manejando sus propias extensiones en muchas de las normas, incluyendo HTML, CSS y DOM. El 98% de los usuarios de Internet en aquellos años lo usaba, claramente derivado por la influencia e imposición de Windows, lo que fue factor para que la gente lo probara y se acostumbrara a su uso, incluso muchos crecieron con la idea de que era el único navegador que existía en la época, caso de aquellos usuarios que “nacieron” con la burbuja punto com.
Quizás en aquellos años a muchos de nosotros la compatibilidad y los estándares  no nos parecía algo relevante ya que sólo éramos unos internautas novatos ansiosos por conocer todo lo que podíamos obtener de este mundo de información, pero con el paso del tiempo Internet Explorer se volvió un navegador caprichoso, impuesto por nuestro sistema operativo y de bajo apego a lo que nos interesaba a los programadores en ese entonces de HTML, convirtiéndose en una constante frustración para los desarrolladores web.

Los nuevos navegadores vs Internet Explorer

Es entonces que surgió una nueva ola de navegadores que vinieron a cubrir aquellos sectores de usuarios inconformes con Internet Explorer. En 2002 surge de las cenizas que dejo Netscape el proyecto Mozilla, que inicialmente se encargaría de tomar el código fuente de la versión 4.7 de Netscape para lanzar un nuevo navegador, pero finalmente se decidió desarrollar un navegador prácticamente nuevo  y así fue como se creó con el paso del tiempo lo que hoy conocemos como Mozilla Firefox, cuyo  año de salida oficial fue 2004, aunque ya existían otros navegadores de la marca como parte del Mozilla Application Suite desde 2002.

El gran rival de IE, Firefox

Pronto Firefox acrecentó su popularidad entre los internautas, al ofrecer mayor seguridad y rapidez que Internet Explorer, además de ser gratuito, apegarse a los estándares de la W3C y en sus principios tener el respaldo de los ex-integrantes del proyecto Netscape. Todo esto hizo que el navegador del mal llamado “Zorro” (hay que recordar que el logo de Firefox realmente es un panda rojo) se colocara rápidamente al lado de Internet Explorer en las encuestas de uso y popularidad, incluso rebasándolo en ciertos sectores de la población de usuarios.

Firefox parecía el navegador ideal,  su navegación por pestañas y la enorme cantidad de extensiones con que cuenta ayudaron a que se propagara rápidamente en los hogares y oficinas del mundo. Esta rápida popularidad hizo olvidar que muchos de los elementos que formaron parte en el pasado y presente de la estructura y navegación de Mozilla Firefox, fueron inspirados en los que desde hace un tiempo ya usaba otro navegador de gran renombre, Opera.

Los estándares web y Opera

Opera es un caso especial en cuestión de navegadores, su gran apego a los estándares de la W3C lo hacen un navegador verdaderamente especial para los desarrolladores , cuenta con una gran velocidad al momento de navegar, incorporó la navegación de pestañas antes que Firefox, dio la posibilidad de editar las hojas de estilo en vivo antes que cualquier otra herramienta, cuenta con IRC y correo electrónico interno, entre otras cosas, pero ¿Por qué no es tan popular?, daré una respuesta sencilla para una pregunta tan compleja, mal manejo diría yo.

El proyecto de Opera nació desde 1994 pero fue hasta el año 2000 cuando empieza a tomar fuerza, al principio era un navegador que se vendía, o bien podías descargarlo y usarlo en modo de prueba durante un tiempo, con esto no había ningún problema, pero al no contar con un sistema operativo que lo respaldara, como el caso de Internet Explorer, se tuvo que optar por una alternativa.  Es así como nace el Adware de Opera, donde constantemente veías anuncios en el navegador,  lo cual era una verdadera molestia por lo que para 2005 finalmente la versión de Opera es liberada y es entonces cuando empieza a ganar público.

Actualmente Opera es el quinto navegador más utilizado en computadoras personales, pero su verdadero éxito se ha producido fuera de ellas, al introducirlo para uso en teléfonos móviles, smart phones y asistentes digitales personales, así como en videojuegos como el Nintendo Wii y Nintendo DS.

Más allá de Explorer y Firefox: Chrome y Safari

Si Internet Explorer y Firefox se están alternando entre el primero y el segundo lugar de popularidad y Opera es el quinto en uso en computadoras personales, ¿Quiénes ocupan el tercer y cuarto lugar de la lista?, la respuesta es Google Chrome y Safari, dos navegadores de relativa corta edad que basados en su imagen y velocidad han logrado adoptar un mercado enfocado a diseñadores, donde Chrome lleva clara ventaja y se aproxima a pelear los primeros lugares, mientras que Safari ha crecido por el uso exclusivo de usuarios MAC en el mundo.

Google Chrome

Google Chrome tiende a proyectarse como algo grande a futuro, actualmente muchos desarrolladores están emigrando a este navegador, principalmente por ofrecer grandes beneficios para el desarrollo como lo es Web Inspector (Developer Tools), que contiene una consola JavaScript para pobrar nuestros scripts, verificar y corregir errores, entre otras herramientas que lo hacen muy similar a Firebug de Firefox. También cuenta con extensiones como  Pendule, lo equivalente a Web Developer Toolbar de Firefox, o como Chrome Sniffer que te ayuda a saber con que Framework de PHP o JavaScript está trabajando un sitio de Internet.

Conclusiones finales

En conclusión, todo depende de gustos, existen muchos otros navegadores que han salido al mercado desde K-Meleon hasta Amaya (realizado por W3C) pero se nos irían páginas y páginas describiendo a cada uno. En mi muy humilde opinión, Firefox es el mejor navegador en este momento, aunque he de admitir que mi uso de Google Chrome ha crecido últimamente. No importa si somos puristas o comerciales, lo importante es que si nos dedicamos a desarrollar para Web debemos validar nuestro trabajo para  que funcione en la mayoría de estos navegadores, por lo menos en los principales cinco que son los que describí en este artículo.

Dentro de la selección de los colores de una página, hay que tener en cuenta varios factores, como el tipo de página, la estructura del diseño y la temática de la misma. Cada uno de estos factores puede alterar sustancialmente los criterios para la selección. Como se podrán imaginar, la página de una empresa de seguros y otra de ventas de juguetes deben emplear combinaciones de colores basados en criterios muy diferentes. Otro factor a tener en cuenta es la armonía de los colores que se desea emplear. Los tipos de armonía son varios, y cada uno de ellos arroja resultados muy dispares.

Tipos de combinaciones de color

Las combinaciones del color ha sido motivo de investigación por parte de artistas y diseñadores por milenios. Desde las primitivas pinturas rupestres puede verse la preocupación de los artistas y diseñadores de todos los tiempos por armonizar y combinar los colores para lograr los efectos deseados en el observador.

Combinaciones monocromáticas

La primera y más sencilla de las combinaciones de color es la monocromática. En estas combinaciones las únicas variaciones están dadas por la luz. Si se toma un color base y se le agrega blanco o negro (que es la forma de agregar o quitar luz) en diferentes proporciones, se obtiene una gama del mismo color. Estas combinaciones pueden abarcar al blanco y el negro, dando una gama de grises, algo que es posible apreciar en algunas páginas web.

Las combinaciones monocromáticas empleadas en el diseño web, suelen emplearse en páginas en la que se busca un efecto de sobriedad y de elegancia. Evidentemente si lo que se pretende es llamar la atención de los usuarios, este tipo de combinaciones no son las indicadas. Se emplean en páginas en las que se desea provocar una sensación de tranquilidad y seriedad. Analicemos el ejemplo siguiente:

Esta página corresponde a la edición digital de un periódico. La paleta de colores empleada tiene como base el color azul, cuyos matices pueden verse en el color de fondo, el encabezado, el menú y la tipografía. Posiblemente el motivo de la selección de esta combinación se deba a que se desea presentar un diseño sobrio (el ejemplo lo es en extremo) y elegante. Esto puede deberse a varios motivos. El primero es que posiblemente su público esté conformado por personas de mediana a avanzada edad y con tendencias más o menos conservadoras. Otro efecto conseguido con el establecimiento de una paleta de colores monocromática es que el contenido gráfico y textual adquiere una relevancia mucho mayor al no verse opacado por la coloración del diseño.

Combinación de colores análogos

Se denominan colores análogos a aquellos que, ubicados en la rueda de colores, se encuentran en lugares próximos. Este tipo de combinaciones se dan muy frecuentemente en ambientes naturales. Si se observa un bosque o una pradera, veremos que los colores que se combinan son amarillos, verdes y celestes, colores que se encuentran próximos en la rueda de colores.

Es frecuente encontrar este tipo de paleta de colores en páginas web destinadas a los productos naturales o se desea exaltar la vinculación de lo que se publica con los ambientes naturales. En el ejemplo siguiente, se utiliza una paleta de colores que incluye naranja, amarillo y verde como base (con diferentes grados de luminosidad) para dar un toque natural al estilo.

Combinación de colores opuestos

Cuando lo que se desea generar es un alto impacto visual a través del color, una de las formas de lograrlo es utilizando una paleta de colores que incluya colores opuestos. Los colores opuestos son aquellos que se encuentran en oposición dentro de la rueda de colores, como por ejemplo rojo y celeste, verde y violeta, amarillo y azul. Estas combinaciones suelen emplearse en el diseño de carteles para la vía pública, dado que consiguen atrapar la atención de los usuarios de las mismas.

El siguiente es un ejemplo de utilización de colores opuestos en la paleta de una página web. En este sencillo pero llamativo diseño, se pretende atraer la atención del público hacia los contenidos con fuertes colores opuestos, además de distinguir claramente unos de otros gracias a que los colores opuestos también generan contraste.

Otra forma de emplear los colores opuestos es hacer una tríada de colores, empleando dos colores complementarios y uno opuesto de forma que se obtiene las ventajas de ambos sistemas, aunque el impacto visual conseguido es algo menor que en el empleo de combinaciones de opuestos. Tal es el caso de la web que hemos tomado como ejemplo, donde la combinación incluye dos colores análogos, como el naranja y el amarillo, que se encuentran opuestos al verde, incluido en la paleta de colores de este sitio.

Modelos de paletas de colores

A pesar de que las posibilidades de combinar los diferentes colores son casi infinitas, no todas las combinaciones resultan efectivas en su utilización en el diseño de páginas web. Existe una gran cantidad de paletas de colores cuya efectividad y atractivo se encuentran probados gracias a su uso.

Dentro de las posibilidades de aplicación del color, también se debe distinguir algunos elementos que son importantes. Por ejemplo, los colores pueden ser tomados tal como se encuentran en el círculo de colores, dando como resultado una combinación de colores vivos muy llamativos. Sin embargo, también es posible emplear matices con variaciones en la luminosidad, dando colores pasteles o apagados.

Otras formas de combinación emplean el blanco y el negro, ya que ambos colores se combinan con mucha facilidad con cualquiera de los demás colores. Esta facilidad de combinación del blanco y el negro ha hecho que sean incluidos en la mayoría de las paletas de colores.

A continuación, les mostramos algunos ejemplos de paletas de colores de las muchas posibles, aunque animamos a la experimentación como método de obtener las paletas adecuadas para el sitio web que se encuentra en creación:

Para seguir esta guía, conviene leer antes el capítulo sistema de navegación de una página web.

Hemos visto, mencionado y resaltado en nuestros artículos anteriores, como el diseño de nuestros sitios web puede marcar la diferencia entre atraer o no a los internautas que llegan por primera vez a nuestro portal. Esa primera impresión es capaz de crearnos un grupo de seguidores que en un futuro se puede convertir en un buen mercado, lo que influirá para atraer inversionistas y empresas que deseen publicitarse con nosotros,  o bien, por el otro lado nos hará ir perdiendo clientes potenciales que es exactamente lo contrario a lo que buscan estos anunciantes.

Incluso, muchas veces no queremos crear un sitio web que venda espacios, quizás nosotros sólo deseamos dar a conocer nuestra idea o producto en la web sin necesidad de ofrecer nuestro servicio de publicidad y cobrar por ello, sin embargo en estos casos un mal diseño también puede influir para hacer que esta idea o este producto llegue a quedar con una mala imagen si no lo exponemos adecuadamente y con las herramientas apropiadas.
Para lograr llegar a esa diferencia positiva hay que tener siempre en cuenta dos factores muy importantes, la accesibilidad y la navegación a través de nuestro sitio, en las cuales influirá el estilo y el diseño.

La navegación web es una de los principales elementos que podemos mejorar y adecuar con las hojas de estilo, esto se ve reflejado en el constante uso de menús y barras para guiar al usuario en las páginas de internet.
El uso de menús permite al usuario de nuestro sistema o al navegante de nuestro sitio, desplazarse a través del árbol conformado por todos los elementos web, páginas de contacto, de información, de productos, de compras, de dudas, búsquedas, etcétera. Es importante darle acceso a todas y cada una de estas secciones para que toda los datos que el requiera estén a su alcance de manera rápida y sencilla.

Existen miles de sitios minimalistas en la red donde todo se logra exponer en una o dos páginas, esto en principio suena muy bien y si tenemos la oportunidad de hacerlo es una buena práctica, sin embargo muchas veces esto no se puede adecuar a nuestro sitio quizás por disposición del mismo cliente o por necesidad de presentar más información y/o productos, tenemos que ver el enfoque de nuestro sitio como algo relevante para guiar la navegación; ya que, no es lo mismo guiar a un usuario a través de un sitio de compras a guiarlo en una página personal o blog.

Por ello, debemos de realizar un esfuerzo a la hora de diseñar un menú y no simplemente tomarlo como un paso más, debemos planearlo y codificarlo de tal manera de que el producto sea efectivo y sobre todo útil para los internautas.  La creación de menús de navegación con CSS es un tema creativo, con muchas formas de explotarse y que nos permitirá desplegar nuestras ideas para que los usuarios se sientan cómodos en nuestra página.

Pasos para hacer un menú web eficaz

Existen cientos de galerías y códigos en internet para obtener menús desplegables, horizontales, verticales,  transparentes, con hijos, sin hijos, etc., es cuestión de buscar y con la ayuda de Google tendremos en la “palma” de nuestra computadora un sinfín de menús que lucirían fantásticos en nuestros sitios, esto no es ninguna novedad, pero que pasa si deseamos ir más allá y queremos empezar a diseñar nuestros propios menús y nosotros mismos manipular cada aspecto y saber el para qué y cómo de las cosas, para ello hay que empezar con la estructura la cual se irá formando tomando en cuenta varios puntos.

Elegir el lenguaje web para el menu

En primer lugar debemos definir con que lenguaje haremos nuestro menú, como ya mencionamos en nuestro caso usaremos únicamente CSS por ser el lenguaje en el que nos estamos adentrando actualmente y debido a su sencillez y fácil ejecución. Se puede optar por crear menús en otros lenguajes o mezclar estos con el propio CSS, como es el caso de Javascript, el cual se ha convertido en la mejor opción para hacer menús dinámicos ligeros que muestren los “hijos” o sub-secciones de las páginas principales, para ello el uso de librerías como jQuery o mootools nos puede ahorrar unas cuantas horas de trabajo.

Otra opción puede ser usar la herramienta Flash, de Adobe, pero ya dependerá del enfoque que le queremos dar, como mencione anteriormente todo varía según la navegación que  corresponde al tipo de nuestro sitio.

Estructura básica del menú de navegación

La estructura básica en XHTML para nuestro menú será la siguiente:

<div id="menu">
  <ul>
    <li>Sección 1</li>
    <li>Sección 2</li>
    <li>Sección 3</li>
    <li>Sección 4</li>
  </ul>
</div>


Estos son los cimientos sobre los cuales construiremos el resto del proyecto, como podemos ver se trata simplemente de una lista desordenada (unordered list) que contendrá el número de “ítems” o secciones que queremos mostrar en el menú los cuales están resguardados dentro de las etiquetas “<li>”.  Sin agregar un estilo, esto se vería nada más como una lista con viñetas de punto en nuestro navegador, pero ahí es donde empieza a hacer su trabajo el CSS.

Añadiendo estilos CSS

Debemos declarar la propiedad “inline-block” para los ítem del id #menu en nuestro CSS, así todo el texto dentro de las etiquetas “<li>” se acomodaran dentro de una sola línea sin que exista saltos entre ellos; es decir, al momento de definir esta propiedad en el navegador veremos una lista pero ahora de manera horizontal y sin decoración, aunque esto puede variar si nosotros se la agregamos. Para lograr esto basta con agregar las siguientes líneas en nuestro código:


#menu ul li {
  display: inline;
  }


Al momento de definir la propiedad “inline-block” también podemos agregar otras como padding para separar cada elemento por cierta distancia dada en pixeles, si yo indico algo como “padding-left: 15px;” existirá un espacio de 15 píxeles a la izquierda de cada elemento de la lista. Con “inline-block” podemos agregar width y height para definir el tamaño del elemento, es por ello que en este caso lo usamos en vez de “inline”, que aunque a simple vista parecen la misma propiedad, al usar “inline” no se puede dar ancho ni altura a los elementos de la lista.

También podemos irle dando estilo a nuestro menú agregando atributos como fuentes y colores.


#menu a {
  height: 20px;
  font-family: Helvetica;
  font-size: 18px;
  color: #CCCCCC;
  }


Con el código anterior las letras de nuestro menú ahora se mostrarán con una Font (fuente) llamada Helvética, muy utilizada por los diseñadores, en color gris bajo y un tamaño de 18 píxeles. De igual manera podemos hacer que la lista se muestre exactamente en el inicio del div menú, esto lo podemos lograr quitando de la siguiente manera, los márgenes y padding que se agregan por default.


#menu ul {
  margin: 0;
  padding: 0;
  }


Con ello tenemos definida la estructura del menú, este div lo podemos incrustar dentro de otro div “contenedor” y asi centrarlo o colocarlo en el lugar donde queremos que luzca. Para poder realizar una menú vertical básicamente se hace lo mismo sólo que obviamente la propiedad “inline-block” se omite.

A partir de ahí podemos usar nuestra creatividad para darle el estilo que deseemos a nuestro menú podemos manejar fondos, sombras, eventos y demás, en los siguientes artículos daremos ideas para decorar y hacer más presentables nuestros menús.

Pincha aquí para ver el menú en funcionamiento.

Algunos diseñadores prefieren seguir escribiendo el código directamente sobre un editor de texto plano, al estilo del Bloc de Notas de Microsoft, otros prefieren los editores de texto especializados en lenguajes web y de programación, otros prefieren los editores de texto con ventana de vista previa, mientras que otros emplean la opción más avanzada, que son los editores WYSIWYG.

Los primeros generan el archivo HTML, las hojas de estilo y los scripts sobre una o varias hojas de texto plano y valoran los resultados directamente sobre el o los navegadores. Este método es el más primitivo, aunque no ha perdido vigencia. Durante el aprendizaje de los lenguajes de diseño web y de programación, todos los centros de enseñanza inician el estudio de HTML, XHTML y CSS con este rudimentario método. Y la razón es que es el mejor método para conocer a fondo los lenguajes de diseño y programación. La generación de código a partir de editores de texto plano implica necesariamente la comprensión plena del funcionamiento del sistema.

El segundo grupo de diseñadores emplean editores de texto, pero que tienen algunas funciones especializadas en los lenguajes de diseño web y programación, como autocompletado de etiquetas de cierre, coloreado de acuerdo a la sintaxis del lenguaje, posibilidad de seleccionar las etiquetas de una barra de herramientas y otras muy variadas. Por ejemplo, cuando se escribe una línea de código, ésta no adquiere los diferentes colores correspondientes a la sintaxis hasta que no está correctamente escrita. Para visualizar los resultados, emplean uno o más navegadores, a los que, tras cada cambio, se le hace click en el botón “refrescar” para ver los mismos.

El grupo de diseñadores que optan por la tercera opción, cuenta con una herramienta en el editor que hace las veces de navegador, por lo que pueden ir viendo los cambios que van efectuando a medida que los van haciendo.

Los editores WYSIWYG son algo bastante más complejo, y consiste en  (tal como indica la sigla que les da nombre: What You See Is What You Get – Lo que ves es lo que obtienes) la creación de páginas web arrastrando y colocando, completado por elementos que permiten modificar los atributos de los elementos que se van colocando.

Editores de texto plano y navegador

Los diseñadores web que emplean esta opción desechan la ayuda que constituye el software especializado. No tiene muchas ventajas sobre el resto de los métodos, solo la certeza de que quienes lo hacen tienen un pleno dominio de los diferentes lenguajes. Como método de aprendizaje, seguramente sea el mejor, ya que el conocimiento del lenguaje deja de ser una opción para ser absolutamente obligatorio. Siempre, y no solo para quienes optan por este sistema de trabajo, es necesario contar con varios navegadores, siendo el mínimo recomendado de tres, ya que las diferencias en la interpretación del código por parte de los navegadores, obliga a visualizar las páginas en más de un navegador.

Editores de texto especializados en HTML y CSS

El desarrollo del diseño web y el creciente número de diseñadores ha planteado la posibilidad de crear herramientas especializadas en la escritura de códigos. La cantidad de editores de este tipo existentes es enorme, siendo en su mayoría gratuitos, aunque algunos son de pago o forman parte de paquetes de software para diseñadores web. Otra característica que los diferencia a unos de otros, es la especialización en los diferentes lenguajes. Algunos editores tienen soporte casi exclusivamente para HTML, aun cuando colorean varios lenguajes más, mientras que otros editores tienen herramientas especiales para diferentes tipos de lenguajes, incluyendo los lenguajes de programación.

Editores de texto especializados con ventana de vista previa

Comparten muchas de las características descriptas para el grupo de editores anteriores, con el elemento distintivo de poseer entre sus herramientas un visor en tiempo real (generalmente en la misma ventana que se escribe el código) que permite al diseñador web observar el resultado de lo que se encuentra escribiendo sin tener que ir a la ventana del navegador y refrescar la página.

Editores WYSIWIG

También cuenta entre sus herramientas la edición de los códigos sobre texto plano, aunque su mejor herramienta es la ventana donde el diseñador realiza las modificaciones arrastrando y soltando con el ratón, en un sistema similar al que se emplea en procesadores de texto como Microsoft Word o Writer.

Algunos de estos editores son de manejo tan sencillo, que para muchas de las tareas propias del diseño de páginas web no se requiere conocimiento de lenguaje HTML. Sin embargo, a la hora de darle atributos a los diferentes componentes de la página, el diseñador deberá contar con conocimientos básicos de HTML y CSS.

Elección del editor HTML

Cada diseñador debe desarrollar su método de trabajo, aquel con el que se sienta más cómodo. No existen recetas preestablecidas y hay tantas formas de trabajar como diseñadores. Lo mismo sucede con el software que se ha de seleccionar. En una primera instancia, el diseñador debe elegir el método que empleará y luego probar herramientas hasta encontrar una que lo satisfaga.

A continuación damos las descripciones de algunos de los programas más conocidos, pero solo son algunos de una muy amplia gama.

Algunos editores de texto especializados

Bluefish

• Desarrollado inicialmente para Linux, en la actualidad hay versiones para otros sistemas operativos como Solaris, MacOS-X y otros, aunque no existe una versión para Microsoft Windows.
• La última versión estable es la 1.07 de marzo de 2008.
• Soporta varios archivos abiertos a la vez
• Marcado de sintaxis personalizable para HTML, PHP, JSP, SQL, XML, CSS, Javascript, Python, Perl, Pascal y otros.
• Asistentes para creación de documentos.
• Asistentes para la creación de tablas y marcos.
• Soporta diferentes juegos de caracteres.
• Diálogos para la inserción de imágenes.
• Traducido a 22 idiomas, entre los que se encuentra el español.
• Gratuito.
• Licencia GPL.

Weaverslave

• Desarrollado para Windows, es compatible con todas las versiones de este sistema operativo desde Windows 95.
• Totalmente portable
• Última versión estable: 3.9.18 de noviembre de 2005.
• Puede trabajar con varios archivos a la vez.
• Marcado con colores de sintaxis para DHTML, CSS, JS, PHP (4 y 5), MySQL, PERL, C, C++ y otros.
• Ventana de colores.
• Inspector de etiquetas.
• Navegador de archivos e imágenes.
• Traducido a varios idiomas (incluidos) entre los que está el español.
• Gratuito.
• Software propietario.

Editores de texto con ventanas de vista previa

Aptana

• Windows, MacOS-X y Linux.
• Cliente FTP.
• Posibilidad de instalar un plug-in que permite la escritura en el lado del servidor.
• Panel de vista previa Firefox e Internet Explorer.
• Soporte principal para HTML, XHTML y CSS, aunque también cuenta con herramientas para  Php, Python, Ruby, CSS, Ajax, HTML y Adobe AIR.
• Última versión: 2.0.2 de 2009.
• Marcado de sintaxis por colores.
• Una muy variada serie de herramientas y diálogos.
• Gratuito.
• GNU / GPL.

Arachnophilia

• Unix, Linux, MacOS-X y Windows 
• Última versión: 5.4 (Octubre de 2009) 
• Ventana de vista previa. 
• HTML, CSS, JS, C++, CGI, PERL, Java y otros. 
• Marcado de sintaxis en colores. 
• Gratuito. 
• Software propietario. 

HTML-kit

• Este software solo es compatible con Microsoft Windows 95 en adelante. 
• Ventana de vista previa múltiple. 
• Validación de código. 
• Cliente FTP.
• HTML, XHTML, XML, CSS, XSL, PHP, ASP, VB, C/C++, SQL, Java, Javascript, Delphi, Perl
• Sugerencias y sistema de corrección de errores.
• Gratis.
• Software propietario.

Editores WYSIWYG

Adobe Dreamweaver

• Versiones para Windows y MacOS-X.
• Última versión estable CS4 (10.0) de 2008.
• Se le considera el editor más potente, pero también el más pesado (354 MB antes de instalar) y el de mayores requerimientos de hardware.
• Requerimientos mínimos: procesador de más de 1 GHz, Windows XP o superior o Mac OS X v10.4.11–10.5.4, 512 MB de RAM, 1 GB de espacio libre en el disco, pantalla 1280 x 764 con tarjeta de 16 bits, DVD-ROM, banda ancha para servicios en línea.
• Ventana de visualización.
• Sugerencias de código.
• Herramientas avanzadas para imágenes de Photoshop (PSD).
• Utiliza CSS.
• Datos dinámicos (sencillos) sin empleo de XML ni bases de datos.
• Diseño sin escritura de código (aunque el usuario puede modificar el código manualmente).
• Alto costo (399 USD)
• Software propietario.

NVU

• Multiplataforma
• Última versión estable: 1.0 de junio de 2005. En la actualidad se ha abandonado su desarrollo.
• Cliente FTP.
• Edición de código fuente.
• Marcos, formularios, tablas, plantillas de diseño, hojas de estilo CSS, etc.
• Gratis.
• MPL / GPL / LGPL.

Amaya

• Multiplataforma
• Última versión:  11.1 de enero de 2009.
• Navegador.
• Genera páginas HTML 4.01, XHTML 1.0, XHTML Basic, XHTML 1.1, HTTP 1.1, MathML 2.0, muchas características CSS 2.
• Renderizado de imágenes.
• Herramientas para imágenes vectoriales (SVG).
• Edición WYSIWYG.
• Gratuito.
• Licencia W3C.

Para hacernos una idea de estos conceptos, imaginemos una colección de libros de una editorial. Estas colecciones suelen estar formadas por libros con dimensiones y encuadernación idénticas, para que se tenga la sensación visual de que se trata de una unidad, por más que se trate de una serie de libros independientes, de autores y temáticas disímiles. Lo mismo sucede con los sitios web. Los grandes portales suelen emplear cierta unidad visual para dar a entender al usuario que se encuentra en un sitio determinado.

Al igual que en otras disciplinas, el diseño web ha ido evolucionando hasta llegar a ciertos criterios estándares. Desde el punto de vista del usuario, tiene la ventaja hacer predecibles a los sitios, permitiendo un rápido acceso a todo sin necesidad de realizar búsquedas por toda la página. Desde el punto de vista de los diseñadores, salvo pequeños cambios que pueden realizarse, por regla general esta importante parte del diseño ya se encuentra prácticamente resuelta.

Estructura del diseño web

La gran mayoría de las páginas web tienen divisiones o secciones similares. Lo usual es que, en la parte superior de la página se encuentre un encabezado, seguido de un cuerpo principal que suele estar flanqueado por una columna lateral (tanto a la izquierda como a la derecha) o dos columnas laterales, seguidas al final de la página por un pie de página. La imagen siguiente es un esquema típico de una página web. Se debe tener en cuenta que este esquema sufre variaciones, aunque normalmente son pequeñas.

El encabezado

De todas las partes de la estructura del diseño web, el encabezado es la que mayor tendencia tiene a repetirse entre páginas de un mismo sitio. Aun cuando el sitio tenga grandes diferencias en estructura y contenido entre sus páginas, si mantiene una unidad en su encabezado los usuarios percibirán la sensación de unidad que el sitio requiere.

El encabezado es una faja horizontal que ocupa todo el ancho de la página en la parte superior de la misma. A la izquierda del encabezado suele ubicarse el logotipo del sitio, que ocupa un área importante dentro del mismo, aunque suelen haber diferencias importantes de un sitio a otro. Esta imagen debe tener un enlace a la página principal del sitio, ya que es uno de los estándares más respetados por los diseñadores y una de las formas que tienen los usuarios de volver al inicio.

Desde el final del logotipo, ocupando el centro y la zona derecha del encabezado, frecuentemente se sitúan una serie de franjas de diferentes grosores. En la faja superior, se encuentran algunos enlaces generales de la página, como acceso a usuarios registrados, registros de usuarios nuevos, acceso a perfiles, salidas, etc., así como ayudas y buscadores internos. La zona más ancha generalmente se encuentra ocupada por el título de la página, nombre de empresa, slogan, etc.

La zona inferior del encabezado se emplea para ubicar los links de navegación y las etiquetas de navegación, uno de los elementos más importantes a la hora de ayudar a los usuarios a encontrar las páginas componentes del sitio web. Dependiendo de la complejidad del sitio, puede encontrarse solo uno de estos sistemas de navegación o los dos; por ejemplo, cuando el sitio está dividido en secciones, uno de ellos está destinado a estas divisiones, mientras que el otro sirve para navegar dentro de cada sección, aunque pueden emplearse otros métodos de clasificación de los contenidos y por consiguiente, otros métodos de organizar la navegación interna.

Otra forma de colaborar con la exploración del sitio por parte de los usuarios es la instalación de un buscador interno. También es aquí donde los usuarios buscan este tipo de elementos, ya que convencionalmente es aquí donde la mayoría de los diseñadores los ubican, aunque en algunos casos, puede encontrarse en la parte superior de alguna de las columnas laterales. A continuación, mostramos un ejemplo de la aplicación de un buscador interno en el encabezado.

Columnas de exploración

El cuerpo principal de una página web, en el diseño moderno se le encuentra dividido. Una de estas divisiones, consiste una o dos columnas de exploración. Este tipo de columnas, se le emplea para ubicar algunos elementos importantes de la página, como enlaces externos, navegación interna, publicidad, informaciones adicionales y contenidos secundarios.

Cuando se emplea una única columna, es indistinto para los usuarios, de acuerdo a estudios sobre el comportamiento de usuarios de sitios web, ya que su ubicación no plantea dificultad alguna. En el caso de que el diseño requiera el empleo de dos columnas, pueden ubicarse una a cada lado del cuerpo principal de la página o ambas a uno de los lados, siendo también indiferente en este caso si se ubican a la derecha o a la izquierda del contenido principal.

Los usuarios, dado el uso continuo de estos elementos para esta función, suelen buscar la información de contacto en este tipo de columnas, por lo que resulta uno de los mejores lugares para ubicar los datos de contacto. A continuación, vemos algunos ejemplos de columnas de exploración:

Área de contenido

Esta zona del diseño de la página, es la que menos reglas tiene respecto de su diseño, ya que el hecho de que en ella se encuentren los contenidos principales de la página, el diseño depende en gran medida de los mismos, sobre todo en lo que respecta al tipo de contenidos, la cantidad, la disposición que se desea emplear, etc. Sin embargo, hay que considerar algunas reglas importantes y que, salvo muy raras ocasiones, deben ser seguidas al pie de la letra.

En la parte superior de esta área se debe emplazar el título entre etiquetas <h1>, ya que este título tiene las palabras clave que los usuarios luego emplearán en sus búsquedas y será de gran importancia para que los buscadores indexen la página en forma correcta. Además, los usuarios buscarán en este punto el título de lo que se expone, siendo de extrema importancia que el mismo sepa a qué contenidos está accediendo.

En caso de que los contenidos sean muchos y haya que hacer desplazamientos importantes hacia abajo, es de mucha utilidad colocar al final del área algún tipo de salto al inicio, para evitar que el usuario deba realizar grandes desplazamientos. En el caso de que se empleen varias páginas para albergar contenidos relacionados, tanto al inicio de la página como al final de la misma es de gran utilidad colocar un navegador de páginas (del tipo Página anterior 1 – 2 – 3 … Página siguiente) para que la navegabilidad entre ellas sea sencilla.

Pie de página

Finalmente, debajo de todas las secciones, se coloca una faja horizontal en cuyo interior se colocan algunos elementos importantes, como el autor, copyright, acceso a diversas políticas del sitio y asuntos legales, datos de contacto, enlaces a sitios relacionados, enlaces internos, etc.