Nordic Design - El blog de Alex Lillo
Rediseños – Azahar Airlines
28 / Aug / 2004 - 03:43 PM
Comienzo hoy una nueva sección, dedicada a los rediseños. El primero del que quiero hablar es Azahar Airlines, una página personal dedicada a una aerolínea virtual.
Realicé este diseño allá por noviembre de 2003, y en aquella época a pesar de ya usar bastante las hojas de estilo, todavía trabajaba con una mentalidad basada en tablas. A si que el paso medio año después, fue cambiar todo el código, eliminando todas las tablas que me fueron posibles, dejando el estilo de la página lo más igual posible.
Podéis ver la antigua página siguiendo este enlace.
A destacar, pues la pelea habitual con el IE6 para poder posicionar las cajas en su sitio, por culpa del bug del modelo de caja. Al final consigo engañarlo y hacer que cada cosa quede en su sitio, pero tuve que cambiar el pie de página, y quitar el fondo gris porque no había manera de ponerlo en su sitio.
Además, incluí un truco leído en A List Apart, para hacer que una tabla tenga el color de fondo alternativo, sin necesidad de ponerlo a mano, una maravilla realizada con CSS y javascript. Podéis verlo en la plantilla. Comprobaréis que es mucho más claro de leer que no la antigua versión.
¿Objetivos conseguidos? El peso de la página no ha variado en general, algunas páginas son algo más ligeras, y otras un poco más pesadas, aunque el contenido no es el mismo, con lo que no es justa la comparación.
Ahora se muestra más correctamente en Opera y Firefox/Mozilla, ya que antes el fondo se mostraba incorrectamente (se cortaba cuando bajabas el scroll).
Y lo más importante, he sepadado el contenido del diseño. Ahora puedo actualizar rápidamente la imagen de la web, modificando casi únicamente los gráficos y la hoja de estilo.
En breve más rediseños, pero esta vez de antiguas páginas web que tenía colgadas en Internet, y que están ya desfasadas.
Published in: Diseño,
Related posts
* * *
Comments
Nordic dijo el 28 August 2004, 17:06 - #:
¡Lo de las Zebra Tables es una caña! Recuerdo que cuando lo descubrí, un compañero del trabajo se acababa de pegar la currada de hacer una tabla así larguísima, ¡a mano! Ahora un color, ahora otro... ufff. Y justo al día siguiente descubro yo esto, que mala suerte el pobre. :)En cuanto a Azahar, ahora es mucho más cómoda de actualizar, editar, etc. Sobre todo si lo haces a mano, que con mil tablas, rowspans y colspans, es complicado meterles mano y no joder nada.
Sin embargo así, lo tienes todo bien clarito y estructurado.
Toad dijo el 28 August 2004, 20:19 - #:
Jeje... además así si metes una fila más a una tabla ya hecha ya se le asigna su color debido automáticamente :D .Por cierto, dos ejemplos: Aquí una web bien diseñada pero a base de tablas... y aquí una maravilla de web con XHTML y CSS (seguro que ya la conoceis :D ) .
2004-2012 - Alex Lillo. Publicado bajo Licencia CreativeCommons. Mantenido con textpattern. 
Toad dijo el 28 August 2004, 16:05 - #:
Te quedó muy bien! Mucho mejor que la antigua :-)Gracias por el enlace al truco de alternar el color de fondo de las filas sin tener que hacerlo a mano! Es muy interesante, me va a venir muy bien :) .
Saludos...