Nuevo diseño de Sfpaula.com

Hace 2 meses aprox. que no escribo un post y estoy incumpliendo la primera regla de una buena página web. Tener un cotidiano feed back, cosa difícil dado nuestras tareas diarias.
Estoy encargándome del diseño del Colegio de San Francisco de Paula cuya página hace tiempo que está anticuada. El nuevo diseño es moderno, ligero y muy visual (no está terminado ni aprobado aún. Por ejemplo la barra de herramientas naranja pertenece a otra página).

antiguo portal web sfpaula.com

Proyecto para sfpaula.com

Hay diversas diferencias con respecto al antiguo diseño:
1.-Está ejecutado utilizando CSS al 100%.
Siempre me he dedicado a hacer páginas con tablas y mi control sobre ellas es excelente, como hacer un diseño complejo con tablas me resulta bastante fácil, prueba viviente de ello es http://www.sfpaula.com/campus/ . No obstante, no es la mejor forma.
Como ya experimenté en http://www.bandbsevilla.com, el diseño debe estar completamente contenido en el CSS así:
-tenemos un control completo sobre cómo se muestra el contenido.
-controlamos mucho mejor el diseño en todas los sistemas operativos y navegadores existentes.
Los grandes inspiradores de estas técnicas punta hoy día son http://www.zeldman.com, http://www.meyerweb.com etc... y de ellos se puede aprender mucho.
Tras leer todo lo leíble, se debe experimentar con todo tipo de diseños de 2,3 y 4 columnas, con/sin cabecera o "footer".
Debemos almacenar una serie de plantillas que funcionan 100% bien y utilizarlas según necesitemos. Yo he guardado muchas hasta la fecha.
Para sfpaula.com, necesitaba algo muy complejo, el truco de esta plantilla está en tener 3 columnas relativas y que cada columna se estire cuando una de ellas sobrepase la talla de las demás y que el footer se desplace hacia abajo.
Esto en sí no es excesivamente complicado. Yo tengo una plantilla que juega con la idea del fondo, donde hay un fondo común para las 3 columnas y es por eso que da la impresión de estirar los fondos de las otras 2 columnas pero en realidad es un fondo común que aparece según el tamaño de la columna más larga.
En este caso esta plantilla mucho más sencilla no me convenía porque quería controlar los bordes internos punteados y los bordes externos, quería experimentar y buscar otra solución.
Al final lo he conseguido con mucho esfuerzo. Los pasos que he seguido son:
-hacer uso de una plantilla mía anterior.
-hacer las modificaciones utilizando "css hacks" para engañar a navegadores como IE 5.5
-comprobar que funciona repetidamente tanto para Linux, Mac o PC a través de http://www.browsercam.com.

Esta vez he sido aún más exhaustivo que con http://www.bandbsevilla.com y me he fijado en cualquier detalle en cualquier sistema operativo. Ello me ha obligado a ampliar las opciones que había barajado hasta el momento en mi "browser sniffer" incluyendo opciones para reconocer firefox, Konqueror ... y distinguir entre Mac, Linux y PC.
Las diferencias en algunos casos no podían arreglarse con los sencillos "css hacks" y he debido emplear javascript. Pero esto sobre todo para arreglar pequeños detalles como donde queda exactamente las imágenes que hacen de puntos del menú. No es la solución ideal, y es mejor el "css hacks" porque los podemos agrupar en CSS y cambiarlos a nuestro antojo. Con el javascript resulta menos dinámico pero en este caso lo cierto es que no voy a necesitar cambiar el CSS en el cliente salvo para la plantilla de impresión.

2.-Doble estructura de la web
Como se ve en la captura, para la portada he preparado una estructura donde hay accesos directos a todo tipo de documentos, así la navegación es más rápida, además se puede apreciar una foto de portada más grande impactando más al usuario. Para el resto de las páginas utilizo la captura de arriba de este post, donde no se pierde el aspecto visual porque dejo una foto del colegio aunque más pequeña.
Una novedad extra y que he podido apreciar en otras páginas entre ellas de universidades americanas es que las fotos son al azar y rotan, proveyendo al usuario más información a cada vez que entra y por lo tanto le incita a volver.
Me ha parecido que lo gráfico, lo real era algo muy importante para este diseño.

3.-Colores más atractivos

La elección de los colores ha sido el azul que tiene un aire elegante y serio, y el blanco como mejor elección para mostrar información que combinado con el gris y las letras algo redondeadas y alargadas le dan un aire moderno al conjunto.
Los colores son más atractivos y para quitarle algo de excesiva seriedad y darle un look algo más siglo xxi, al azul marino le he puesto un ligero fondo rayado muy a la moda hoy día.
Fondo rayado
4.-Nuevas funcionalidades
El diseño debe ir unido a funcionalidades cada vez mayores y es por eso que estoy programando un buscador para Sql Server 2000 y está resultando muy interesante pelearse con diferentes opciones de expresiones regulares.
Lo más complicado es tomar en consideración los acentos cuando el usuario no ha escrito ningún acento. Es decir, yo como usuario 1 escribo "interes" y debe buscar "ínteres" "intéres" y "interés" además del primero, ya que debemos contar con la posibilidad de que el usuario no lo escribe correctamente.

5.-Estructura de la información
He resaltado información que consideraba importante, antes toda la información aparecía en secciones. Me parece que es mucho más claro además de ponerlo de relieve, agrupar todas las webs que patrocina el colegio y agrupar los reconocimientos de un colegio altamente condecorado.

Todas estas características se cumplen a pesar de tener que adaptarlo a un programa rígido como cualquier CMS. Los contenidos los introduce el cliente.