Diseño con ventanas de una página web

Muchas veces el diseño de una página web suele regirse por una serie de modelos prefijados que no siempre suele ser lo que más le conviene a nuestro desarrollo. En esta entrada voy a proponer un modelo con ventanas que puede ser apropiado en algunos casos (por ejemplo, en la promoción de un negocio que contiene poca información), pero que puede ser incorrecto usarlo en otras situaciones (por ejemplo, un blog).
La página principal muestra una zona de tamaño fijo que contendrá las ventanas (cuatro en este caso) que serán las que muestren la información. El número de ventanas debe estar limitado y deben ser pocas para que no sobrecarguen la página, por eso he comentado al principio que este modelo puede ser válido para sitios con poco contenido. Las ventanas van a disponer de alguna funcionalidad, lo que da dinamismo y cierta espectacularidad (espero que guste) al diseño, se podrán mover, maximizar y minimizar (creando un efecto thumbnails), efecto imán entre ventanas, etc... No he intentado ver si funciona en Opera debido a que los iframes no admiten el estilo z-index.

Me gustaría poder poner la página directamente, pero me da problemas el sitio donde alojo los archivos y no quiero que cause mala impresión, lo malo es que no se puede apreciar del todo en la imagen, por lo que te recomiendo que te bajes el zip y lo pruebes en tu máquina.

Mostrar resto >>

<< Ocultar resto
Vamos a ir paso a paso explicando todas las características, pero esta vez daré una explicación más funcional, si pongo el código se hará una entrada muy larga. De todas formas, el código se puede ver en el zip y guiarse por los comentarios y si hay dudas, mandadme un email.

• Contenedor: Es la capa dónde se van a incluir las ventanas. Es la que controla el movimiento de las ventanas, se captura el evento de movimiento del ratón (onmousemove) y mueve la ventana seleccionada (cuando se pincha en la ventana onmousedown) mientras se mueve el ratón por su superficie. A parte, contendrá cuatro capas que simulan la aparición de las ventanas, esto es solo adorno y se ejecutan al principio nada más.
• Ventanas: Se crea un objeto mediante Javascript que representará la ventana, almacenando las características (posición, tamaño, ...) y los métodos (dibujar, maximizar, minimizar, ...). No he creado funciones para acceder a las propiedades por vagancia y porque en Javascript se puede acceder a ellas de todas formas. La capa que se dibuja cuando se crea la ventana contiene una barra con el título (que al pulsarla se activa el movimiento y al soltarla se desactiva el movimiento) y una botonera, que permite cerrar (realmente ocultar) y maximizar/minimizar la ventana. También habrá un iframe que muestra la página web correspondiente, hay que controlar cuando se carga la página para poder mostrarla, si se mostrara antes, como las ventanas empiezan estando minimizadas, se vería como están en tamaño grande y luego pequeño, algo que no es muy agradable visualmente. Habrá una capa que ocupa toda la ventana, y que tiene una imagen transparente, que estará visible cuando la ventana está minimizada para así evitar que se acceda al contenido de la página.
• Movimiento: Como ya he dicho anteriormente, el movimiento lo controla el evento onmousemove de la capa contenedora, este evento mueve la ventana que se haye seleccionada según el movimiento del ratón. Una ventana se selecciona cuando se pincha sobre su barra con el ratón (onmousedown) y se deselecciona cuando se suelta el botón del ratón (onmouseup). Se controla que la ventana no se salga del contenedor y el efecto imán entre ventanas.
• Efecto imán: Es pegar una ventana a la otra cuando se hayan a una cierta distancia. Para ello se comprueba si la ventana que se está moviendo está cerca por arriba, abajo, izquierda o derecha de alguna de las otras ventanas, en ese caso, se mueve la ventana hasta la posición más cercana, dejando un margen de un pixel por estética.
• Minimizar: A parte de cambiar progresivamente el tamaño de la ventana, de lo que se trata realmente es de transformar la ventana en un thumbnail de si misma. Para ello transformaremos todos los elementos HTML de la página, teniendo en cuenta que según el tipo de elemento, se realizará una acción: los elementos que contengan texto se les modificará el estilo (className) por otro con el mismo nombre pero seguido de "_min", la diferencia entre ambos estilos será el tamaño de la letra (font-size) que deberá ser más pequeño, los márgenes (margin) y los espacio de relleno (padding) que deberán ser cero. Los elementos que tengan un tamaño (imágenes, cajas de texto, ...) deberán ser reducidas mediante estilos, para ello el width y el height deberá ser especificado en cada elemento. A las tablas se les debe quitar el cellpadding y el cellspacing. Y también se podrá hacer desaparecer ciertos elementos sobre los que no podremos actuar, por ejemplo un DIV que contenga la publicidad de AdSense, ya que no podemos modificar los estilos de la publicidad al no tener acceso. En cada elemento que se modifica hay que incluir un atributo con el valor modificado para que cuando se tenga que maximizar se pueda recuperar.
• Maximizar: Es recuperar la apariencia normal de la ventana. Todos los cambios que hemos realizado en el proceso de minimización deberán ser deshechos. Una cosa curiosa que me ha ocurrido es que el IE (¡viva él!) no redimensionaba al tamaño inicial las imágenes, si escribía un alert cuando recuperaba el tamaño, si me lo hacía correctamente, o si lo hacía normalmente y luego miraba las propiedades de la imagen, me cambiaba el tamaño cuando salía de la ventana de propiedades, total, que vete a saber por qué, el IE no hacía lo que tenía que hacer, la solución una chapuza, me clono el elemento HTML y lo sustituyo por sí mismo.
• Botones: Son las imágenes que se encuentran debajo del contenedor de ventanas, cada botón representa a una ventana y efectúa acciones sobre ella: si la ventana está cerrada la muestra maximizada, si está maximizada la minimiza y si está minimizada la maximiza.
• Otras cosas a tener en cuenta son: hay un array con índice el id de la ventana (para poder acceder a ellas fácilmente), hay otro array con índice un número consecutivo (para poder acceder a todas las ventanas), cuando se maximiza una ventana, se minimiza la que estaba maximizada anteriormente, etc...

Espero que os guste y que os sea útil. Se pueden ir haciendo mejoras y ampliando funcionalidades, aunque tampoco hay que pasarse para evitar que sea un código muy complejo.
Te puedes bajar el código aquí: ARCHIVO