La eterna discusión sobre qué tipo de diagramación (layout, maquetación) es mejor para cierto tipo de páginas debería quedar al fin zanjada. En un principio, existían dos tipos de diagramación. Estos tipos estaban diferenciados en el tipo de unidades que se usaban para definir los anchos de los elementos. Por un lado estaba el ancho fijo, basado en píxeles, y por otro el ancho variable, basado en porcentajes. Ésto daba como resultado: páginas de anchos inamovibles el primero y páginas que se acomodaban al ancho de la ventana del navegador el segundo.

En una época, el ancho fijo fue el preferido por los diseñadores web no porque fuera mejor que el ancho variable sino porque era más fácil de manejar y controlar el resultado (especialmente usando programas de tipo WYSIWYG). Obviamente, cuando un diseñador web decide “controlar el resultado”, si no atiende a ciertos cuidados, es muy probable que lo haga en detrimento de las preferencias del usuario que usará su página. Una mala costumbre de aquella época era, además de poner anchos fijos a los elementos, definir tamaños fijos (también en píxeles) a la tipografía. Resultado: una gran pérdida en la accesibilidad de las páginas web (que sumada a la costumbre de maquetar con mil tablas anidadas y mil grafiquitos sin más utilidad que “embellecer” la página daba como resultado un verdadero calvario para todo usuario con algún tipo de discapacidad visual).

Los anchos variables estaban reservados a “los que sabían” porque eran más difíciles de predecir y, a la vez, lograr un diseño vistoso que no se “rompiera” cuando se pasaba de verlo en una resolución de pantalla de 640*480 a una de 1024*768 era demasiado complicado y desgastante para la mayoría, además existía (y aún existe) el mito de que es un sistema más usable y/o accesible, lo cual no es cierto. ¿Qué ganaba el usuario? personalmente, siempre creí que nada, salvo tener menos espacios libres en la pantalla (si a ésto se le puede llamar “ganancia”). Además, esta práctica se complementaba casi siempre con tamaños de tipografía fijos, lo cual tampoco ayudaba al resultado final. Leer textos largos en pantallas cada vez más grande se hacía cada vez más complicado. ¿Por qué? porque no es lo mismo el 80% de 800px que el 80% de 1280px y saltar de una línea a la siguiente (sin tener que buscar cuál es la siguiente) no es tan fácil como podría parecer en un primer momento.

Cualquiera que se haya dedicado en algún momento de su vida al diseño gráfico editorial sabrá que existen, o al menos habrá escuchado hablar de ciertas normas o convenciones. Una de ellas define lo que se considera el ancho óptimo de una línea de texto para ser leído en bloque. Éste es de entre 30 em y 35 em. La unidad de medida de este ancho es el “em”. Un “em” mide exactamente el ancho de la letra “M” mayúscula de una tipografía dada y a un tamaño dado. Efectivamente, según esta definición un “em” no mide físicamente siempre lo mismo. ¿Por qué se usa esta medida? porque el ancho óptimo para la lectura dependerá, necesariamente, del tipo de letra que se use y, más necesariamente aún, del tamaño de ésta.

1. Aplicando el ancho óptimo a la web
Aquí empieza lo bueno. Las hojas de estilo admiten el uso de “em” como unidad de medida, lo cual nos permite escribir textos definiendo un tamaño de tipografía relativo sin depender de impredecibles porcentajes. La ventaja número uno es que el tamaño es relativo a la tipografía que se use y no al ancho de la ventana del usuario. La ventaja número dos es que, felizmente, usar “em” como unidad para tamaños de tipografía permite que el usuario pueda variar el tamaño desde el control de tamaño de letra de su navegador preferido.
Una práctica que se usa últimamente es usar anchos fijos (px) para definir los bloques de una página y “em” para el tamaño de la tipografía. Ésto permite al usuario ver el texto en el tamaño que prefiera, eso es bueno… pero… el problema es que alguien necesite ampliar la tipografía dos o más veces y el ancho del contenedor quede como estaba originalmente. Nuestro ancho óptimo de línea da por lo suelos.

Ahora bien, ¿qué sucedería si usásemos “em” como unidad de medida para los anchos de los elementos también? Obtendríamos lo que se conoce como diagramación elástica donde todo lo que se defina basado en “em” dependerá del tamaño de letra que el usuario use.

Obviamente, no todo son rosas en este camino. Internet Explorer da problemas para manejar distintos tamaños (especialmente cuando se hereda un tamaño definido por un elemento “padre”). Afortunadamente, hay una solución muy simple a este problema. Basta con definir un tamaño de letra basado en porcentaje al BODY de la página. Además, “hilando fino” hay que marcar que, al posicionar con float, IE de Mac necesita que se defina el ancho de al menos uno de los bloques un poco más pequeño de lo que la lógica matemática podría decir. Cosas de la vida.

2. Un poco de código
Un ejemplo muy básico sería algo como:

CSS para pegar dentro del HEAD.

HTML para pegar dentro del BODY.

Como se puede ver en el ejemplo, el concepto es muy simple y una vez comprendido no es demasiado distinto del uso de píxeles para definir anchos.

También tenemos un ejemplo más complejo, con una diagramación a dos columnas con encabezado y pie. Éste ejemplo puede ser alineado a la izquierda o centrado en la ventana y puede tener la columna de extras a la izquierda o la derecha mediante un intercambiador de estilos que está en la misma columna. Nótese que el XHTML no cambia en nada, solo cambian los estilos (que están brevemente comentados en el mismo CSS). Vamos, que ya no hay excusas para no usarlo.

3. Algunas conclusiones
La realidad es que una vez que se entiende el funcionamiento de este sistema, puede usarse muy fácilmente, aunque con algunas limitaciones. El principal problema viene de la mano del uso de imágenes web de fondo en los bloques de la página. No es que no se puedan usar, sino que hay que tener en cuenta algunas cosas a la hora de pensar cómo implementarlas, como por ejemplo que al achicarse un bloque éstas se cortarán y que al agrandarlo éstas no lo seguirán. Hay también algo que sí se puede aprovechar y es que se puede definir el tamaño de una imagen con “em” para el width y el height con lo cual lograremos que las imágenes así definidas se agranden o se achiquen junto con el diseño (un efecto muy simpático, a la vez que útil para una persona con problemas de visión que debe agrandar todo para verlo).

De cualquier manera y desde mi punto de vista, es (al menos hoy en día) la mejor solución para páginas y sitios web en los que lo más importante es el texto ya que permite: por un lado manejar muy fácilmente un bloque de texto asegurando que su ancho es el óptimo para una lectura cómoda y eficaz; y por otro brindar una accesibilidad bastante mejorada al común de los sitios ya que es el usuario quien decide en qué tamaño desea leer nuestro contenido.

Normalmente pensamos que el diseño de páginas web está referido al diseño de las versiones que usualmente vemos en los monitores de los ordenadores personales, tanto de escritorio como portátiles (en realidad se trata del mismo medio). Sin embargo, el diseño de las páginas también debe comprender a los usuarios de los móviles, y algo bastante frecuente, las páginas en modo de impresión.

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.

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 estilos 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.

Las capas, pueden ser dimensionadas empleando los atributos que definen el ancho y la altura de las capas. Sin embargo, el empleo de otros atributos puede hacer que el ancho y la altura finales se vea modificado.

Dimensiones de las capas
El tamaño de las capas en CSS se fija mediante los atributos “width” (ancho) y “height” (alto), empleando para ello cualquiera de las unidades que están permitidas. De no marcarse estas dimensiones, las capas adquieren las dimensiones del contenido. Sin embargo, esto puede verse afectado por la aplicación de tres atributos de las capas: márgenes, relleno y bordes.

Los márgenes son el espacio que hay entre la capa y cualquier objeto adyacente. El borde es la línea que delimita la capa. El relleno, es el espacio entre el borde de la capa y el contenido. En la siguiente imagen veremos cada uno de estos atributos en su posición:

A continuación, haremos una descripción de cada uno de estos atributos y veremos como se aplican en el código CSS.

Márgenes
Cada capa tiene cuatro márgenes, los que por defecto tienen un valor cero. En el código CSS, el margen se establece mediante el atributo “margin”, el cual es seguido de un guión (sin dejar espacio) y el lado de la capa al cual se le determina el margen. Existen métodos abreviados (empleando una sola línea de código para determinar todos los márgenes), que describimos a continuación:

Relleno (Padding):
El relleno se determina del mismo modo que los márgenes. Al igual que en el caso anterior, por defecto, cada capa tiene relleno cero, por lo que para que pueda ser visible debe determinarse su valor en el código CSS. Al igual que en el caso de los márgenes, el relleno se determina lado por lado, a menos que se emplee el método abreviado, que es igual que el empleado en los márgenes.

Borde (Border):
El borde es el límite de la capa. A diferencia de los dos atributos anteriores, el borde tiene tres propiedades que puedes ser determinadas en el código CSS. La siguiente es una lista de estas propiedades y la forma en que se determinan:

En la siguiente imagen veremos un ejemplo de los estilos de los border:

Al igual que en los casos de los márgenes y los rellenos, cada uno de estos atributos puede ser simplificado. Así que puede colocarse “border-color:” y determinar el color de los cuatro bordes, o “border-width:” y determinar el ancho de todos los bordes en una sola línea de código.

Incidencia de los distintos atributos en el tamaño de las capas
El dimensionamiento de una capa no termina cuando se determina los valores de “width” y “height”. Salvo para las versiones anteriores a Internet Explorer 7, todos los navegadores entienden que el ancho (“width”) y el alto (“height”) es independiente de los valores que tomen los márgenes, los rellenos y los bordes, por lo que para saber el ancho o la altura total de una capa, a los valores respectivos hay que sumar los márgenes, rellenos y bordes laterales al ancho o sumar los márgenes, rellenos y bordes superior e inferior a la altura. Veamos un ejemplo:

Crear dos archivos en bloc de notas. En el primero, copiaremos el siguiente código y lo guardaremos en cualquier directorio con el nombre estilo.css:

Al segundo archivo, al que guardaremos en el mismo directorio que el anterior, le daremos el nombre index.html e introduciremos en él el siguiente código:

Importante: Colocar la declaración del tipo de documento (DOCTYPE), puede ser la diferencia entre ver bien o no el ejercicio que estamos llevando adelante, sobre todo si empleamos Internet Explorer como navegador, en cualquiera de sus versiones.

Luego de guardados, abriremos el archivo index.html en nuestro navegador, y en él veremos la siguiente imagen:

Para hacer que todas las capas tengan el mismo ancho (incluyendo los rellenos y los bordes, debemos sumar éstos al ancho de la capa y darle a las capas que no tienen todos los atributos, el valor ajustado del ancho. Para ello debemos hacer las siguientes operaciones:

Ancho de la capa con todos los atributos:

Ancho + margen izq. + margen der. + relleno izq. + relleno der. + borde izq. + borde der. =
400px + 20px + 20px + 20px + 20px + 20px + 20px = 520px

Ancho de la capa con un solo atributo definido:

Ancho + atributo izq. + atributo der. =
400px + 20px + 20px = 440px

Para que la capa sin atributos definidos (con valor cero) se vea del mismo ancho que la que tiene todos los atributos, debemos darle un valor de ancho (width) igual a 520 pixeles. A las que tienen uno de sus atributos definidos con un ancho de 20 pixeles por cada lado, el ancho (width) debe ser de 480 pixeles. La capa que tiene todos los atributos definidos, quedará con el ancho original de 400 pixeles. El código CSS quedaría de la siguiente manera:

La siguiente imagen nos muestra el resultado de la modificación del código CSS:

Conclusión
El manejo de las dimensiones de la página es determinante, y suele ser uno de los principales problemas con los que se enfrentan los principiantes cuando se inician en la maquetación empleando hojas de estilo en cascada. Esto se debe fundamentalmente a la falta de compresión de cómo deben tomarse las dimensiones de los bordes, rellenos y márgenes.

Lo que antes era solo un mero escaparate de presentación de empresa o lo que es igual, un elemento más del marketing mix, se ha convertido en un divulgador de opiniones compartidas en las que la participación de usuarios y clientes finales, es la clave par el buen funcionamiento y posicionamiento de la Web.

Actualmente, tras el Boom de Facebok y otras redes sociales, son mas las empresas que incorporan en su web un apartado de compartir opiniones sobre noticias, artículos, etc… que hacen mantener la página viva, así como su imagen de marca o los productos y servicios que comercializan o promocionan.

Además de esto, en materia de diseño también ha habido cambios respecto a años anteriores, a continuación detallamos algunos aspectos que hacen más atractivos nuestros proyectos web y como no, mas acorde con la tendencia actual;

No hay que olvidar que cuanto más claro sea el mensaje y el apartado gráfico más posibilidades tendremos que conseguir visitas.

A la hora de elegir la tipografía a utilizar hay que elegir fuentes llamativas pero siempre acordes al resto del diseño de la web.

La tendencia es usar fuentes Serif, llaman más la atención y son más fáciles de leer.

Hay que tener en cuenta el no combinar diferentes tipos de letra en el mismo párrafo sin estar justificado, es más apropiado y creativo jugar con el tamaño y los colores de las fuentes.

En relación a las imágenes a utilizar, hay que evitar las ilustraciones clipart típicas y optar por gráficos con colores planos, motivos de decoración Vintage[/bb] y en general [b]gráficos sencillos pero con un toque vanguardista y moderno.

En cuanto al contenido hay que tener en cuenta que los usuarios normalmente disponen de poco tiempo para leer grandes párrafos y buscan algo fresco para rápidamente quedarse con la esencia del mensajes, es decir la tendencia son artículos cortos, directos y redacción muy fresca.

La parte más importante de tu página está situada en el área superior izquierda, (La cabecera), ya que es justo ahí donde se fija la vista en cuanto entras a un sitio. Por eso aconsejamos colocar el “quienes somos” , o la introducción a la web, en un recuadro cercano a esa área de manera que sea lo primero que lean tus visitantes.

Tal y como hemos mencionado anteriormente si incluimos enlaces a redes sociales ayudaremos a crear vínculos con los usuarios y por lo tanto fidelizar a un grupo de personas que comparten el mismo interés por algo.

Ya pasó de moda el poner gráficos de fondo e incluso músicas que hacían que la web tardara más en aparecer, la tendencia son los fondos blancos o usar texturas originales.

Cuanto más limpio y despejado esté todo más fácil será para el usuario encontrar la información que busca directamente.

Además la pureza del blanco permite colocar tanto imágenes como textos sin que estas se mimeticen con el fondo.

En la sencillez está el buen gusto.

El lenguaje de iconos es lo más “In” actualmente en cualquier proyecto interactivo, estos deben de ser totalmente representativos de la opción de la que da información.

Los iconos aparte de darle un toque minimalista a la web, son más fáciles de identificar por el usuario y además no ocupan tanto lugar en la botonera de opciones principales.

Si la web tiene mucha información, es preferible presentarla en popups, (o ventanas emergentes), a ser posible un layer para que no que el firewall o antivirus no bloquee la página nueva.

Además de llamar la atención, le dan un toque dinámico y multimedia a la web, por ejemplo que se abra un video de presentación independiente a la web principal.

No hay que olvidarse de diseñar la web compatible con los cada vez más utilizados smartphones. Son el futuro más próximo en la visualización de páginas web.

Algo que es muy utilizado y que, a pesar de haber toneladas de información y códigos en la red, se sigue preguntando y pidiendo es cómo hacer una ventana pop-up.

Creo que la mejor forma de no ahogarse en un vaso de agua tratando de adaptar algún script que encontremos por ahí y que no se ajuste exactamente a lo que queremos es aprender a hacerlo desde cero conociendo los conceptos elementales.

El método open()
El objeto window posee un método para abrir nuevas ventanas: el método open().

Eso abrirá una nueva ventana vacía con Javascript (no cargará ningún documento en ella)

Si queremos que cargue algún documento dentro de la ventana nueva se lo indicamos pasándolo como parámetro y poniéndolo entre comillas dentro de los paréntesis:

Eso abrirá una ventana nueva con el documento pagina.html cargada adentro.

El método open() acepta 3 parámetros. Se le puede pasar uno, dos, los tres o ninguno

documento
URI del documento a ser cargado dentro de la nueva ventana.

Nombre de la ventana
identificador para la nueva ventana. Sirve para poder hacer referencia a la ventana después de haber sido abierta en caso necesario.

Atributos de la ventana:
una serie de pares nombre/valor que permite asignarle a la nueva ventana determinadas características, tales como tamaño, posición, barras a mostrar ….

Algunos de los atributos disponibles para la mayoría de navegadores:

width
anchura de la ventana (en píxels).
valor
número entero positivo.

height
altura de la ventana (en píxels).
valor
número entero positivo.

top
posición de la ventana desde la parte superior (en píxels).
valor
número entero.

left
posición de la ventana desde la izquierda (en píxels).
valor
número entero.

toolbar
determina si la barra de herramientas del navegador es o no mostrada.
IE7 ignora la instrucción de no mostrar esta barra con el fin de que los usuarios puedan saber en qué dirección se encuentran.
valor
booleano (yes/no).

status
determina si la barra de estado (status) es o no mostrada.
valor
booleano (yes/no)

location
indica si la barra de dirección es o no mostrada.
valor
booleano (yes/no)

directories
indica si la barra personal es o no mostrada.
valor
booleano (yes/no)

scrollbars
indica si la barra de scroll es o no mostrada.
valor
booleano (yes/no)

menubar
indica si la barra de menús es o no mostrada.
valor
booleano (yes/no)

Abriendo una ventana ante un evento determinado
Si queremos que una ventana sea abierta ante un evento determinado, como por ejemplo un click de ratón del usuario en un botón, podemos definirlo directamente en el manejador del evento del propio botón.

Abriendo una ventana desde una función
Podemos crear una función que se encargue de abrir la ventana nueva y llamarla en el manejador del evento del botón.

Y dentro del botón hacemos la llamada a la función en el manejador del evento

Usando la función para abrir más de un documento
Si queremos usar la misma función para abrir la ventana más de una vez con distintos documentos cargados dentro de ella podemos agregarle una variable a la función que le pasaremos como argumento cuando la llamemos.

Y al llamar a la función desde los distintos botones le pasamos el dato como parámetro.

Botón 1

Botón 2

Usando la función para abrir la ventana más de una vez con distintas dimensiones
Podemos usar la misma función para que, además, cada ventana que sea abierta desde distintos botones tenga dimensiones distintas. Le enviaremos los valores que queramos pasados como argumentos a la función y haremos una concatenación para crear la cadena de atributos.

Y al llamar a la función desde los distintos botones le pasamos los datos de ancho y alto como parámetros.

Botón 1

Botón 2

Haciendo referencia a la ventana
Si por alguna razón una vez abierta nuestra ventana necesitamos hacer algo con ella desde Javascript debemos de poder referirnos a ella de algún modo. Para eso está el segundo parámetro de la función open() que define el nombre de la ventana; en el caso del ejemplo que hemos estado usando la ventana se está llamando nuevaVentana aunque podríamos haberla llamado vladimir o leporcia.

Si una vez abierta quisiéramos hacer algo con ella, como por ejemplo cerrarla usando el método close() mediante otro botón nos referiríamos a ella por el nombre que le hayamos asignado al momento de crearla.

Abrir distintas ventas distintas desde la misma función
Podemos enviar otra variable más como argumento a nuestra función del ejemplo para asignar distintos nombres a cada ventana que abramos desde un botón diferente. Con eso lograremos que se abran ventanas distintas, algo que no sucede si cada vez que llamamos a la función nos crea la ventana nueva con el mismo nombre, como ha estado haciendo la función del ejemplo hasta ahora.

Botón 2

De esta forma cada botón abrirá una ventana distinta con distintos documentos cargados en cada una de ellas.

La función tal y como estaba antes abría los distintos documentos desde los diferentes botones cargando documentos diferentes pero los abría en la misma ventana, es decir, en ningún momento podrían haber dos ventanas abiertas a la vez dado que se estaban abriendo siempre con el mismo nombre. Si en el momento de llamar por segunda vez a la función la ventana aún se encontraba abierta (no se había cerrado) el segundo documento sería cargado dentro de esa ventana ya abierta.

Al asignar en cambio un nombre distinto para cada ventana sí puede haber más de una ventana abierta simultáneamente.

Usando links para abrir ventanas.
Es importante que toda la información sea accesible y se pueda acceder al recurso al que se pretende llegar y no es recomendable delegar al 100% a Javascript el acceso a un recurso. Podemos usar un link al documento que queramos mostrar dentro de nuestra ventana pop-up; de esta forma nos aseguramos de que, en el caso de estar siendo visualizada nuestra página en algún dispositivo sin soporte para Javascript, nuestro documento pueda ser llamado de forma alternativa desde este link.

La forma más simple de hacerlo usando la misma función del ejemplo es la siguiente:

En el evento click llamamos a la función creando una ventana pop-up asignándole un nombre ventana1 y al link le hemos agregado un target hacia esa ventana. Así el link al ser activado carga el documento dentro de la ventana que abrimos desde el manejador de eventos onclick. Observar que al llamar a la función no es necesario indicar el documento que queremos que se cargue y lo dejamos como una cadena vacía '' (dos comillas simples). Como en realidad lo que estamos haciendo es desviar el destino del link a la ventana nueva no es necesario indicarle a la función Javascript que debe cargar un determinado documento pues ya se encarga el propio link de hacerlo.

Para algunos usuarios el footer (pie de página) es una cosa de poca importancia. Pero en ciertos casos el footer puede ser un instrumento útil e importante para la navegación por el sitio y prestar una información útil al visitante.

El footer no ha de ser sobrecargado de la información “pesada” y es deseable que su diseño sea simple y comprensible, no sea sobrecargado de la gráfica.

La información expuesta en el footer del sitio puede facilitar informaciones útiles acerca de tu sitio y puede ser una magnífica herramienta de navegación.

Enlace “Quienes somos”
Tu sitio debe tener una sección “Quienes somos” que ha de contener una información principal acerca de ti o de tu empresa (firma, compañía, organización etc.), sitio web, servicios prestados etc. Eso facilita a los visitantes los datos adicionales para concretizar el carácter de tu web. Es importante familiarizar al visitante con tu sitio cuanto más.

Enlace “Contacto”
Uno de los problemas más graves según mi pensar, es la ausencia en el sitio de la información de contacto, pues un cliente/usuario potencial carece de toda la posibilidad de contactarse con el propietario del sitio o el webmaster.

Eso no debe ser.

Es deseable que facilites cuanto más información de contacto con ayuda de la cual un usuario podría contactar contigo.

Términos del servicio
Si tu empresa o firma presta servicios o vende algo, puedes hacer un enlace a los Términos de Uso o garantías que prestas durante el servicio de los clientes.

Son medidas de protección y es muy importante tenerlas. La colocación de tal información es una cosa estándar y los usuarios tienen todo derecho de encontrar los datos.

Política de privacidad
En el proceso de procesar una información confidencial o trabajando con las direcciones y contraseñas de los usuarios, sería bueno advertir cómo estás pensando guardar esta información.

Además, esa será una de las medidas para mostrar a los usuarios que ellos sí pueden confiar en ti.

Mapa del sitio
El enlace a tu Mapa del sitio permitirá a tus usuarios orientarse en tu sitio. De tal manera si alguien se pierde, podrá encontrar una ruta necesaria al pasar al Mapa del sitio por el enlace en el footer.

Es un lugar ideal para poner este enlace.

Dirección y teléfonos
Si tu web está dedicada al “offline business”, sería deseable poner tu dirección y teléfonos para que los usuarios o clientes potenciales pudieran comunicarse contigo.

Footer es un lugar muy conveniente para situar esa información pues los usuarios la esperan encontrar en ese mismo lugar.

Unas cuantas palabras acerca del diseño del footer
Trata de que el footer sea bien comprensible, lacónico y sin excesos. El gráfico no debe ser demasiado llamativo. Tampoco utiliza las fuentes específicos. Al crear el footer, asegúrate de que todo se lee fácil, se puede distinguir un enlace y un texto.