Xenon Layout: Dynamic Layout with Liquid Behaviour
publicado el 26 de Diciembre de 2005
Enlace permanente: http://www.marciobarrios.com/xenon-layout
Actualización: nueva versión mejorada del script Xenon Layout
Aquí os presento un javascript para crear una estructura líquida dentro de un rango configurable y con la posibilidad de cambiar el documento CSS dependiendo de la resolución de la pantalla. Aquí podéis ver un ejemplo.
Explícame de qué va esto!!!
Todos conocemos las estructuras líquidas y las sólidas y sabemos que generar cualquier estructura no es tan fácil de generar como se presupone al utilizar estándares web, y casi siempre nos decantamos por una estructura sólida para desarrollar una web debido a que es una estructura fiable que aguanta con cualquier resolución, sin embargo si vamos a desarrollar una web con bastante contenido es muy recomendable utilizar una estructura líquida y así aprovechar todo el ancho de la pantalla, pero claro, una estructura líquida tiene varios inconvenientes, y el más importante es que no es difícil desmontar este tipo de estructuras cuando redimensionamos la pantalla. Bien pues debido a este problema y a la necesidad de aprovechar la ventaja de una estructura líquida salió este tipo de estructura, que básicamente se resume en una estructura líquida dentro de un rango de resoluciones, fuera de este rango la estructura permanece sólida e incluso podemos especificar una resolución límite (tanto máxima como mínima) donde nuestra estructura cambia de CSS, y así poder optimizar nuestra web para los nuevos dispositivos móviles como la sony PSP, pda's, móviles, etc.
Aquí podéis ver en un gráfico cómo funciona esta estructura, hay que tener en cuenta que los todos los límites de cambio son configurables, es un posible caso:
Todo esto se entiende mucho mejor con un ejemplo, aquí podeis encontrar una web de ejemplo y una posible solución con este layout. En el ejemplo podemos ver una web con un diseño líquido en pantallas de 700 a 1200 px, en pantallas de menos de 700px el diseño se mantiene sólido a 700, y en pantallas de más de 1200px se mantiene fijo a 1200, además si bajamos de 400px cambiamos el CSS para ver correctamente la web en la PSP (entre otros dispositivos portátiles) y si la pantalla supera los 1400px cambiamos el CSS para añadir una columna en la parte derecha de la estructura (esto último no está implementado en el ejemplo).
Características de esta estructura
- Diseño líquido sin temor a que se rompa la estructura.
- Javascript no intrusivo, simplemente se enlaza en el head.
- Optimización de nuestra web para dispositivos portátiles con la misma estructura utilizando otra CSS.
- Parámetros configurables: mínimo y/o máximo de la estructura líquida y mínimo y/o máximo para el cambio de CSS.
- Sólo ocupa 2kb.
Esta estructura ha sido probada en Firefox/Windows y en Explorer/Windows, en Opera no funciona el cambio de CSS (estoy averiguando porqué) así que la página mantiene una estructura líquida con max-width y min-width.
¿Por qué utilizar esta estructura?
- Porque cada día existen pantallas más grandes y con más resolución, habiendo mucha diferencia entre los 800px de un usuario a los 1600px de otro, asi que mejoraremos la experiencia del usuario navegando por nuestra web.
- Porque cada día salen al mercado nuevos dispositivos portátiles capaces de navegar por la red, y no son dispositivos móviles con pantallas pequeñas, sino dispositivos con resoluciones de 800×480 (Nokia 7100) o 480x272 (Sony PSP), y podemos hacer que sea vea correctamente nuestra web utilizando esta estructura y creando un css más ligero y adecuado para estos casos.
- Porque si una web tiene contenido, es más correcto y más cómodo para el usuario utilizar una estructura líquida, y la estructura Xenon tiene las ventajas de las estructuras líquidas sin las desventajas de éstas.
Importante!
Este código es un experimento propio y está distribuido bajo licencia de Creative Commons 2.5(Reconocimiento-CompartirIgual) al igual que todo el contenido de esta web, sois libres de coger el código y mejorarlo, de hecho seguro que haré mejoras en breve, pero así de mientras cualquiera puede juguetear con él.
Para que funcione el código correctamente son necesarios dos requisitos:
- Que la primera CSS enlazada sea la que controla el diseño líquido.
- Que en esta CSS de la que hablamos existan las siguiente reglas:
- width
- min-width
- max-width
Cabe destacar que me he encontrado con un error que tengo que solventar: si colocamos los atributos min-width o max-width en la primera posición de la regla CSS el script no funciona
como esperamos (debido a una mierda de magnífica expresión regular), así que por ahora hay que colocar primero el width. Estos requisitos se podrian haber omitido, ya que podría haber ido buscando por ejemplo el width de un id concreto pero no es óptimo
ya que debería buscar regla a regla en el CSS, así que en principio he creído más conveniente este convenio.
¿Cómo funciona?
Enlazamos el javascript desde nuestro html y también enlazamos las CSS que queramos utilizar, por ejemplo una CSS que compartiran todos los diseños para los colores generales, tipos y demás, otra para controlar el diseño normal (líquido y sólido), y otra si queremos optimizar nuestra web para dispositivos portátiles (e incluso podríamos crear otra para las pantallas grandes). Los <link> de las CSS deberán llevar el atributo title que luego utilizaremos para configurar el javascript añadiendo también los mínimos y máximos en píxeles.
En el javascript xenonLayout.js hay unos parámetros que podemos configurar, como por ejemplo si vamos a utilizar una CSS para resoluciones pequeñas y otra para las grandes, y si vamos a utilizarlas tenemos que especificar en qué momento se intercambian esas CSS, es decir, el máximo y/o el mínimo en píxeles. También tenemos que poner el nombre del title de los CSS que utilicemos, de todos modos están explicados los parámetros en el js, así que no tendréis ningun problema.
En el CSS que utilicemos para la estructura líquida hay que definir en la primera regla la división que se encarga de la estructura(en el ejemplo #wrapper) y dentro establecer
los atributos width, min-width y max-width, y el script ya se encarga de leer estos valores para "hacerselos saber" a nuestro pobre amigo explorer.
Bugs
- En Internet Explorer/Windows al actualizar la página después de cambiar de CSS no vuelve a coger los estilos, lo resolveremos entre todos!
- Como he comentado anetes, si colocamos los atributos min-width o max-width en la primera posición de la regla CSS el script no funciona como esperamos, así que por ahora hay que colocar primero el width.
Listado de compatibilidad entre navegadores
Yo solo lo he probado en Windows y con los 3 navegadores que tengo, a ver si entre todos me escribís y completamos este cuadro y empiezo a arreglar fallos
| Navegadores | Plataforma | ¿Funciona? |
|---|---|---|
| Internet Explorer | Windows | Sí, pero tiene un pequeño bug |
| Firefox | Windows | Sí |
| Opera | Windows | Sí, pero NO el cambio de CSS (en proceso de arreglo) |
Descarga un rar con los archivos
El zip contiene estos archivos:
- Js con el código comentado
- Js con el código comprimido (2Kb)
- Readme.txt con las instrucciones para hacer funcionar el código
- carpeta de ejemplo con dos css para que véais como funciona
Nota: Si queréis cambiar la configuración hacedlo en xenonLayout.js y luego comprimidlo.
P.D.: No me podía callar esto, jeje, el nombre salió porque al existir las estructuras líquidas y sólidas, solo faltaba las gaseosas, pero este nombre no era "xic" así que me decanté por Xenon... (vale, es una gilipollez :P pero que conste que la idea fue de un colega del curro, ale ya la he soltao)
