Un test multivariante nos permite comprobar el rendimiento de varias alternativas de un elemento en un diseño web. Para mejorar la conversión es una muy buena herramienta.

Dicho esto, en el caso práctico y real del que voy a hablar aquí, tenemos una web de comercio electrónico, y queríamos comprobar, tras leer un artículo, si la posibilidad de que un usuario haga clic sobre el botón de compra de un producto varia en función del color de éste. Es decir, si tengo un botón de “Iniciar compra” de un producto, ¿el color de este botón influye en la decisión del usuario de hacer clic en él, y por tanto comprar?.

En este test multivariante se utilizaron 3 colores diferentes para el botón de compra, con el objetivo de ver cual ofrecía mayor ratio de conversión.

Por supuesto, yo tengo claro que sí, que influye y mucho, y hay montones de estudios, posts y artículos hablando de ello, porque los colores tienen una asociación inconsciente con el comportamiento del usuario. Pero con creerlo o intuirlo no vale, así que decidí hacer un test multivariante para determinar si el color del botón de “Iniciar compra” influía en el CTR, el índice de clics, en ese botón de compra de los usuarios, en qué medida y qué margen de mejora teníamos en la web.

La prueba se planteó entre tres colores del botón de acción principal. Los colores elegidos fueron el azul, color original, el naranja y el rojo. Anteriormente hicimos otra prueba con más colores en la variación de los que eliminamos aquellos que funcionaron peor que el original: como el color verde, por ejemplo. Así que este segundo test la intención era clara: determinar cual de los tres colores elegidos ofrecía un mayor ratio de clic en el botón objeto del test, un dato muy importante teniendo en cuenta que hablamos del botón que corresponde con la acción de iniciar una compra.

Hacer un test multivariante para determinar el botón más adecuado para una acción que supone una conversión o acción de compra tiene un gran valor comercial.

Desde el principio la idea era probar esas alternativas durante un mes completo, para poder tener un volumen de clics y datos importantes y que permitieran que los cambios en el CTR del botón no se debieran a circunstancias puntuales de un día concreto.

¿Qué cuales fueron los resultados del test multivariante? Aquí los teneis:

Gráfico de la evolución del test multivariante en el que se testearon 3 colroes diferentes para el mismo botón a ver cual ofrecia mejor CTR.

Lógicamente, lo importante aquí es lo que los datos de la prueba nos dicen, no nuestra opinión personal o las sensaciones subjetivas que pudiéramos tener respecto a un color u otro. Y lo que vemos aquí es que ambas versiones alternativas del botón funcionan mejor que la original y ofrecen un mejor CTR y, por tanto, incrementan las probabilidades de compra del producto, ya que cuanta más gente inicie el proceso de compra, más gente lo terminara, siempre y cuando el proceso de compra esté bien pensado y concebido, pero esa es otra historia.

Como puede verse en el gráfico, el botón anaranjado (representado en la gráfica por la línea naranja) nos da una mejora de más del 30% (un 5,38% de conversión frente a un 4,10% del modelo original) en el indice de CTR en el botón. La versión del botón en color rojo se ha quedado en una mejora del CTR de un 27%.

Finalmente, la decisión gracias a los datos de este test multivariante es sencilla: implantaremos el color naranja en el botón de “Iniciar compra”.

Lo malo es que la profesión de diseñador web alberga a muchos perfiles, algunos muy profesionales y conscientes de lo que supone el diseño de web y otros que simplemente se apuntan al carro porque saben manejar Dreamweaver un poco por encima y consideran que con eso ya son diseñadores web.

Aquí tenemos un diseño web reciente, de 2008 o 2009, aunque no lo parezca, ¿os atreveis a llamar profesional del diseño web a su autor?

La principal característica del diseño web y la que lo diferencia de otros tipos de diseño, es que requiere un buen conocimiento de conceptos como navegadores, usabilidad, arquitectura de la información, resoluciones, código HTML y demás zarandajas técnicas y no técnicas directamente relacionadas con el medio en el que trabaja el diseñador web: internet. En resumen, puedes ser un gran diseñador gráfico, pero eso no te convierte en un buen diseñador web, y la fórmula también se aplica a la inversa.

Después de conocer a muchos y trabajar yo mismo como diseñador web unos cuantos años, participar en procesos de selección e incluso hacerlos, os incluyo unas listas de mínimos que SI y que NO debe cumplir un diseñador web para poder considerarlo como tal. La lista podría ampliarse mucho en ambos sentidos, pero se trata de ver lo básico que debe tener y no tener un diseñador web.

Lo que SÍ debe saber o tener un diseñador web que sabe diseñar webs:

1. En su portafolio deben aparecer varias direcciones web diseñadas por él mismo. Si un diseñador web no tiene URLs en su portafolio solo hay dos posibilidades: no sabe hacer webs o las que ha hecho le averguenzan y no las pone en su curriculum. En cualquier caso nada bueno.
2. Debe conocer y utilizar CSS. Hoy en día, por muchísimos factores, el uso de CSS es imprescindible en el diseño web. Si un diseñador web no utiliza CSS generalmente es porque no se ha molestado en aprender y estar actualizado o porque sigue diseñando webs basadas en el uso de flash o en tablas y recorte de imágenes.
3. Sabrá trabajar con código HTML. El diseño web, guste o no, no se limita solo al diseño gráfico, sino que también hay que controlar y utilizar algo de código HTML y ser más o menos hábil con editores de HTML. Un buen diseñador web sabrá lo que es una etiqueta <h1> o una etiqueta <head> o una etiqueta <alt>, simplemente porque son hoy en día etiquetas indispensables en cualquier diseño web.
4. La disposición de los elementos en los sitios web que haya diseñado será como mínimo, de sentido común. La información será fácilmente accesible, la navegación será clara, etc. Independientemente del grafismo o de los colores empleados, la web será comprensible por el público al que vaya dirigida.
5. Un buen diseñador web hará un diseño pensado para cualquier navegador actual y resolución y tendrá en cuenta una serie de mínimos en cuanto a estructura web, como por ejemplo, no abusar de JavaScript o no colocar Flash sin cargador, etc. Con la situación actual, por ejemplo, es impensable que un diseño no funcione como mínimo en Internet Explorer 6, 7 y 8, Firefox y Chrome. Si por ejemplo un diseñador web te dice que no sabe porque versión vamos de Internet Explorer o que que es eso de Chrome, él mismo se pone en su sitio.

Por ejemplo, aquí tenemos un buen par de ejemplos de diseños web muy bien concebidos, aunque muy diferentes entre sí:

El diseño web de Product Planner: claro, sencillo, limpio y muy profesional. Directamente a los valores del producto.

La web de SMS Parking también se centra en las virtudes del servicio, pero se orienta a su público objetivo a través de un grafismo que busca complicidad.

¿Y como saber cuando un diseñador web NO es un buen diseñador web?. Lo que te da pistas de que NO es un buen diseñador web:

1. Su opinión sobre el diseño de la web es la más importante y no admite ningún tipo de crítica o corrección por obvia que parezca. Su opinión es importante, pero no es la más importante. Un buen diseñador web debe entender que el diseño debe obedecer a un objetivo concreto y que está dentro de una estrategia. Un diseño debe servir a un propósito, y no ser un vehículo de placer del propio diseñador.
2. Si no domina la teoría del color o del sentido común. Si un diseñador combina verde y rojo y/o utiliza 7 fuentes en un diseño que además no son de las más comunes. Los diseñadores que utilizan 40 colores en un diseño no son, en general, muy recomendables.
3. Si utiliza marcos, popups, keywords en el color del fondo de la web o similares. Si aún usa ese tipo de técnicas es que no se actualiza o peor aún, le da igual.
4. Todos sus diseños son exactamente iguales, con pequeños cambios. Eso significa que ha aprendido a hacer una web y la explota hasta la saciedad.
5. El peso de la web, la optimización de imágenes o el donde colocar el menú de navegación le da absolutamente igual o lo hace sin ningún tipo de lógica o siguiendo su instinto. Cualquiera de estas cosas es mala cosa, amigos.

No voy a poner ningún ejemplo de web horrorosa porque hay montones por todos lados, y hay montones de webs que recopilan webs mal hechas como la famosa QWeb.

A ver, es cierto que se puede hacer un buen diseñador web de alguien que tiene interés en aprender y conceptos de base, bien por sus estudios, bien por su experiencia profesional, y también es verdad que el que alguien, por ejemplo, no sepa como colocar la información no le convierte en un mal diseñador, pero creo que en general estos 5 SIes y estos 5 NOes reflejan muy bien lo que debe ser un perfil de diseñador web profesional hoy en día.

Google Analytics puede ayudarte con el diseño web en lo referente a los navegadores empleados por los usuarios.

A nivel de diseño web uno de los valores más importantes que nos ofrece Google Analytics es la posibilidad de ver los navegadores web que utilizan los usuarios que usan nuestro sitio web. En los ejemplos voy a utilizar los datos de un sitio web de comercio electrónico orientado fundamentalmente a España pero con usuarios y clientes en algunos paises como Venezuela, Chile o Uruguay. Si por ejemplo, analizo la información del mes de septiembre de 2009 veo la lista de los navegadores más utilizados y los porcentajes de tráfico correspondientes a cada uno (en Google Analytics se ve esta información en Usuarios/Navegadores). Esta información lógicamente me es muy util porque me dice que navegadores usan los usuarios de mi sitio web. En este caso los navegadores que se usan son estos:

Google Analytics nos muestra el porcentaje de visitas de nuestro sitio web que corresponde a cada navegador.

Como podemos ver haciendo una rápida suma los usuarios que emplean Internet Explorer y Firefox suponen el 94,5% de las visitas al sitio web, con lo que ya tenemos una primera conclusión, por muy obvia que sea: nuestro sitio web debe funcionar perfectamente y estar correctamente diseñado para ser usado con Internet Explorer y Firefox como mínimo. Si verdaderamente queremos tener a casi todo el mundo en cuenta no podemos olvidar el 5% de las visitas que han empleado Chrome y Safari, de forma que si queremos tener un diseño web que cubra casi el 100% de las posibilidades debe estar correctamente diseñado para Internet Explorer, Firefox, Chrome y Safari.

La visualización de un diseño puede variar mucho de un navegador a otro si no lo contemplamos desde el principio. Gracias a Google Analytics podemos saber en cuantos navegadores como mínimo debe funcionar perfectamente el diseño de nuestro sitio web.

Lo más interesante es profundizar, sobre todo en el caso de Internet Explorer, ya que un mismo diseño no se comporta igual en Internet Explorer 6 o en Internet Explorer 8. Si en el mismo informe hacemos clic sobre “Internet Explorer” veremos las versiones de este navegador que nuestros usuarios emplean:

Las diferentes versiones de Internet Explorer que utilizan los usuarios para ir a nuestro sitio web

Esta información, de cara al diseño web es muy importante porque sé que mi diseño debe funcionar perfectamente en varios navegadores y en concreto en varias versiones del mismo navegador, y ya conocemos todos los problemas que fundamentalmente da el CSS con estos temas. En este caso concreto, es muy llamativo que, en nuestro ejemplo, todavía el 26,38% de las visitas hechas con Internet Explorer, que suponen un 20,12% de todas las visitas al sitio web, utilizan Internet Explorer 6, lo que nos obliga, nos guste o no, a hacer nuestros diseños pensando en que deben verse y funcionar a la perfección en Internet Explorer 6, lo que en gran medida condicionara nuestro diseño, sobre todo en cuanto a CSS y uso de JavaScript o AJAX.

En resumen, si somos unos buenos diseñadores web, y atenor de lo que veamos en la analítica web de los sitios que conozcamos o que nos toque rediseñar, debemos considerar que un diseño web será bueno si funciona corerctamente en Internet Explorer 6, 7 y 8, Firefox, Chrome y Safari, y eso como mínimo profesionalmente exigible, porque con el uso cada vez mayor de los dispoditivos moviles para navegar aún se podría hilar más fino.

Y sobre todo, aunque penseis en todos estos navegadores a la hora de diseñar nunca olvideis probar los diseños sobre estos navegadores, a ser posible con diferentes combinaciones de sistema operativo. ¿Alguien dijo que diseñar para web era fácil?

1. Antes de diseñar nada de nada, reúnete con el cliente si es posible. Es fundamental saber de primera mano que es lo que el cliente quiere, y si no lo tiene claro, ayúdale. La pregunta clave es ¿para qué quieres una web?. La web no va a ser igual si el objetivo es vender productos, vender servicios, hacer branding o dar información. Pero lo más importante es saber lo que quiere el cliente con exactitud. A veces no es posible reunirse con el cliente, pero en ese caso es necesario disponer de un briefing (¿qué es un briefing?) o de unas indicaciones vía email o como sea pero sobre todo claras y concisas. Cuantos más intermediarios haya, más dificil te va a ser hacer un diseño web acertado. Me permito un apunte: muchas veces hay clientes que directamente no saben lo que quieren, así que si después de hacerle 2 o 3 propuestas no lo ve claro o sigue sin saber lo que quiere, no trabajes para él hasta que lo tenga claro, porque si no ni el cliente ni tú vais a tener una relación fácil.
2. Haz una maqueta de la web que vas a hacer en papel, en plan dibujo esquemático. Esto parece una chorrada, pero te servirá, y mucho, para aclarar ideas y hacer un planteamiento de como vas a hacer la web.
3. Crea una maqueta gráfica de la web en Photoshop o similares. Simplemente diseña todos los elementos, tal y como se verían en un navegador. Es una maqueta del resultado final, que no funciona pero que es al 100% un reflejo del aspecto gráfico que tendrá la web. Esta maqueta puede ser tu principal arma… a favor o en contra.
4. Con tu maqueta gráfica, reúnete con el cliente para conocer sus impresiones y su opinión. Se supone que has trabajado con material que el cliente te ha facilitado y siguiendo sus indicaciones, por lo que lo que hayas diseñado debería estar próximo a su idea de como quiere su web, aunque también depende de tu habilidad como diseñador web. El principal trabajo es plasmar la idea del cliente en la maqueta. Imprime la maqueta y coméntala con el cliente.
5. Fundamental: si crees que el cliente está equivocado en sus planteamientos o que no son los más adecuados para su web, házselo saber, pero siempre de una manera objetiva y muy argumentada. No puedes decirle a un cliente que su idea de como hacer una web es erronea porque sí, pero si que puedes explicarle porque le conviene hacerla de otra manera, aportando datos, ejemplos y estrategias web que le pueden beneficiar. No pretendas convencerle con un “porque si”, pero si le das argumentos y explicas tus razones, además deun mero diseñador te habrás involucrado mucho más en el trabajo y el cliente lo agradecerá.
6. Ten en cuenta los navegadores que se utilizan y las resoluciones más comunes, y adapta tu diseño a ello. Hoy en día, por ejemplo, no tiene sentido diseñar para una resolución de 800×600 o sin haber probado el sitio web como mínimo en Internet Explorer 6, 7 y 8 además de Firefox, como mínimo.
7. Hoy en día, debes tener en cuenta el posicionamiento web al plantear un diseño, ya que es muy típica la pregunta tipo “Y cuando la web esté lista, ¿cuanto tiempo tardará en estar en Google?, ¿de eso te encargas tú, no?”. Todo el mundo quiere estar en Google, y para estar en el buscador con garantías, el sitio web que diseñemos debe cumplir unos mínimos, algo que Google se encarga de explicarnos en su guía SEO para principiantes. Otra cosa es que ignoremos el tema de los buscadores porque estamos haciendo un sitio web enteramente en flash porque así nos lo han pedido. Pero si quieres un sitio web apto para buscadores y con posibilidades de aparecer en ellos, olvídate de frames o marcos, flash indiscriminado y uso excesivo de imágenes.
8. Prepárate para ser receptivo a las críticas. El diseño es algo muy subjetivo y todo el mundo tiene una opinión sobre el sitio web que estés diseñando. Esto es así, y hay que aceptarlo. Un alto porcentaje de los clientes llevan un diseñador web en su interior. Siempre hay que escuchar las opiniones, siempre. Pero si realmente estás convencido de que lo que te proponen es una majadería, defiende tu postura con argumentos que hagan entender al cliente que estás haciendo un trabajo para él, pero para que triunfe y sea un éxito. Un ejemplo sencillo, las combinaciones de colores. Es clásico que un cliente nos pida algo que hemos hecho en un color, en otro que se da de patadas. La mejor manera de que entienda que eso no va a funcionar es enseñarle sitios web muy populares que respetan una líneas claras en cuanto a colores. Aunque a veces, toca tragar.
9. Plantea tu diseño pensando en lo que el cliente quiere, no en lo que quieres tú. A veces, a la hora de plantear un diseño web, los diseñadores pensamos en lucirnos con el último javascript que hemos visto o utilizar tal disposición de elementos o en trabajar mucho las imágenes de la web. Antes de hacer todas estas cosas piensa si es lo que verdaderamente quiere tu cliente. Tú tienes tu estilo, OK, pero debes adaptarlo a lo que el cliente quiere, y no debe ser el cliente el que se adapte a tu estilo. Para eso tenemos nuestros proyectos personales, para gustarnos a nosotros mismos, pero aquí hablamos de trabajo.
10. Si es posible, enseña tu diseño a un grupo pequeño pero variado de personas. Esta práctica no gusta a muchos diseñadores, pero es una forma de probar un diseño simulando un entorno más o menos real. Varias personas, de diferente perfil, van a ver tu web y van a opinar sobre ella. Escucha sus opiniones. Algunas no tendrán sentido, objetivamente, pero seguro que alguien, generlamente quien menos pienses, te dará alguna pauta o apunte interesante que podrás aplicar y enriquecerá el diseño. Y si desde luego consigues que un grupo variado de personas esté satisfecho con un diseño web es que has conseguido el sueño de cualquier diseñador: que tu diseño guste a todos.

Ahora que he puesto estos 10 consejos para hacer un buen diseño web la verdad es que se me ocurren unos cuantos más, como la importancia del contenido, o del tamaño de las fuentes o el uso de CSS, etc… pero bueno, creo por el momento es más que suficiente, por lo menos para empezar. ¿Estais de acuerdo con estos 10 consejos para hacer un buen diseño web?

En mi caso, estaba bastante cansado de este tipo de problema, siempre teniendo que “apañar” el código CSS para que funcionara bien en cualquier navegador. Quería una solución a este problema…

Y un buen día, mi amigo y colega Miguel Monreal me habló de Yahoo! YUI Grids CSS, y yo me dije ¿y esto qué es y para qué sirve?

YUI (Yahoo! User Interface Library) es un conjunto de utilidades y aplicaciones en JavaScript, así como recursos CSS que Yahoo! ofrece desde su web de desarrollo de forma totalmente gratuita. Son utilidades concebidas para hacer entornos web amables, bien pensados, muy fáciles de configurar y robustos… y este conjunto incluye una solución muy muy buena, de verdad, para los problemas de CSS como los que he comentado antes: Grids CSS, un sistema de CSS que permite crear webs maquetadas de prácticamente cualquier manera que os podais imaginar, y con una ventaja extra: es un sistema que ya lleva los típicos problemas resueltos desde el principio y 100% compatible entre navegadores. Lo único que teneis que hacer es descargaros los archivos que están a vuestra disposición en la web de Yahoo! User Interface Library y utilizarlos en vuestros proyectos web. Para que os hagais una idea, con Grids CSS de YUI vienen varios archivos y hay unas 100 plantillas de layouts web en un archivo que no llega a los 2 Kb.

Os pongo un ejemplo muy sencillo y real: estás dándole vueltas a la cabeza sobre como hacer un diseño web que consta de una cabecera, un contenido y un pie, y por ejemplo quieres que en la parte del contenido, 2/3 (o el 66% del espacio) lo ocupe un contenido y el resto otro, y que además todo esté centrado, estoe s algo bastante común, ¿o no?. Bueno, pues en lugar de hacer tu propio CSS y luego comprobarlo y corregirlo en todos los navegadores para asegurarte que funciona bien puedes utilizar ESTO, que es un modelo de Grids CSS ya hecho y con todos esos problemas resueltos. Tan solo tienes que fijarte en como está hecho y luego sustituir el contenido por el tuyo.

Por si necesitais más ejemplos, podeis ver como funciona por ejemplo en estas webs:

WedTool - Podeis ver en su código fuente y en sus CSS que está hecha con este sistema y por eso mismo nos ahorramos un montón de problemas ocn los CSS.

Gedesel - Otro ejemplo de una web hecha utilizando Grids CSS de YUI.

iMasterD.com - Una web de cursos online montada también con este sistema.

Si os poneis a buscar por ahí hay cientos de webs hechas así y si estais perdidos sobre como empezar con Grids CSS solo teneis que mirar su código fuente y sus CSS para ir entendiendo como hacerlo, aunque lo mejor es la web oficial de Yahoo! sobre YUI, la Yahoo! User Interface Library e ir directamente al apartado de Grids CSS.

Hay que invertir algo de tiempo en entender bien como funciona, pero luego la verdad es que es muy sencillo de manejar y sobre todo te resuelve todos los problemas derivados de la interpretación en diferentes navegadores. Espero que os sirva, porque es un sistema sencillo y muy muy potente y que te ahorra un montón de quebraderos de cabeza.

El principio, ¿cómo hago un background o fondo para mi web?. Pues lo primero es que depende de lo que quieras hacer… si quieres hacer un background que se va a repetir indefinidamente en la página, lo mejor es recurrir a creadores de backgrounds o fondos como los que pueden hacerse con bgMaker. Esta web te ofrece de forma sencilla y gratuita una herramienta para crear diseños de fondos sencillos, como por ejemplo lineas sobre fondos de color, etc… Simplemente eliges un color y pulsas “Fill”, con lo que el cuadrado (cuyo tamaño puedes cambiar) se rellena de ese color, y luego seleccionas otros colores y haces tu diseño sobre el área rellenada, dibujando lo que te apetezca. Es fundamental que al dibujar el diseño lo hagamos de forma que el fondo quede continuo, que al repetirse no haya cortes… Una vez hecho un diseño, lo guardamos con “Save” en la misma web y lo utilizaremos como fondo, pero daros cuenta de que los diseños hechos de este tipo solo sirven para repetirse indefinidamente a lo largo de la página. Lo más importante es hacer un diseño de fondo pequeño, para que no pese, y que esté bien hecho para que la continuidad de las formas quede bien si se repite de forma infinita. Voy a hacer unos ejemplos…

Que quede claro que esto son solo unos ejemplos, ya que podemos diseñar los fondos como queramos o bien diseñar fondos mucho más grandes en tamaño y elementos. Yo simplemente os habló de esta opción por ser muy agradecida visualmente ya demás tener muy poco peso, lo que hace que la navegabilidad no se vea afectada y el rendimiento de la web sea bueno.

Ahora viene la segunda cuestión, ¿como utilizar backgrouns o fondos de página con CSS en mis diseños web?. Para explicarlo voy a utilizar los tres archivos png que he creado y que podeis ver más arriba. Para mostraros el resultado voy a emplear el mismo ejemplo de web que utilicé en el post Hacer un diseño web centrado con CSS, ¿cómo se hace? e iremos viendo como varía su diseño según el fondo que le pongamos.

En primer lugar, tenmos nuestra hoja de estilos: layout01.css, en la que tenemos la etiqueta body, que se aplica a todas las páginas del sitio web salvo que le indiquemos otra cosa. En este caso, actualmente tenemos esta etiqueta body en nuestra hoja css:

body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
background-color: #003366;
}

Con esta etiqueta lo que tenemos es nuestras páginas con un color de fondo azul oscuro y punto, nada más. Si quisieramos, podriamos cambiar ese color de fondo simplemente cambiando el color hexadecimal, y así por ejemplo si queremos un fondo blanco pues pondriamos esto:

body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
background-color: #ffffff;
}

Pero a lo que vamos, para insertar un fondo de imagen, yo os aconsejo conservar también el fondo de color solido, más que nada porque si hay un fallo en la ruta de la imagen o algún problema, os cargue un colora decuado con el diseño. Para que se inserte el fondo layout01.png pondremos en la etiqueta body:

body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
background-image: url(images/layout01.png);
background-color: #ffffff;
}

MUY IMPORTANTE: Aseguraros de que la ruta de la imagen que insertais tras “url” es la correcta, ya que si no no cargará. Si lo habeis hecho bien, el resultado debería ser el de la imagen de la derecha (click para verla más grande), en el que la página tiene como fondo la imagen de layout01.png que hemos visto antes repetida por toda la página, y gracias a su diseño queda como una imagen continua.

Al insertar el fondo vía CSS este aparecerá en todas las páginas que utilicen la hoja CSS que contiene esa orden. Lo más importante de hacerlo con este sistema es que si tenemos varios fondos en el mismo directorio, tan solo tenemos que cambiar el archivo de imagen que queremos que nos sirva de fondo en cada página y automáticamente ese cambio aparecerá reflejado en todas las páginas. Por ejemplo, si queremos que el background que se vea sea el layout02.png, haremos el siguiente cambio en la etiqueta body de nuestra hoja css:

body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
background-image: url(images/layout02.png);
background-color: #ffffff;
}

Y el resultado sería este (pulsa sobre la imagen para verla más grande):

Y si hicieramos la misma operación pero colocando el fondo número 3 con un código tal que este:

body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
background-image: url(images/layout03.png);
background-color: #ffffff;
}

El resultado sería este (pulsa sobre la imagen para verla más grande):

Espero que todo esto os haya servido de utilidad y os introduzca en el tema de los fondos o backgrounds de página, que da mucho más juego. A ver si posteo más adelante otra vez sobre este tema, que se pueden hacer cosas muy muy chulas probando cositas.

Rock & Ride!!!

Para empezar, ¿que entendemos por un diseño centrado?, pues aquel diseño web que permanece centrado verticalmente en el navegador que utilicemos (en cualquier navegador: Firefox, IE, Opera… como el ejemplo de la imagen de la izquierda) sea cual sea la resolución de nuestra pantalla. Así de sencillo y de dificil a la vez. Si nosotros no indicamos al diseño web via CSS que esté centrado, por defecto, el diseño se centrara a la izquierda y en la esquina superior, en el mismo orden en el que escribimos, por ejemplo. Así que una vez que esto es claro y meridiano, que diría alguno, pasemos a explicar como se hace.

En primer lugar creamos el documento HTML de nuestro proyecto, la página principal, y la llamamos como queramos, por ejemplo, layout01.html. Lo siguiente que debemos hacer es vincular ese archivo html a una hoja de estilos css que llamaremos, por ejemplo, layout01.css.

Antes de continuar insisto siempre en que es fundamental que visualicemos el resultado que pretendemos conseguir antes de ponernos a hacerlo. Un recurso muy antiguo y muy util es dibujar como queremos que sea nuestra web, ya que en el mismo dibujo podemos hacer anotaciones. Creedme amigos, es muy pero que muy util aunque sea más viejo esto de dibujar que hacer pis en el campo.

Con la idea clara, hagamos la estructura. En este caso yo voy a hacer un diseño con una cabecera y un cuerpo central, así de sencillo. Luego ya cada uno puede ir agregando cosas. En primer lugar voy a crear un estilo tipo ID (los que llevan #, no como los class, que llevan un .) de DIV que englobe todo el ancho de la página. Es bueno tener metodología en esto y utilizar siempre el mismo tipo de estructuras. Yo lo voy a llamar “wrapper” y es así:

#wrapper {
width: 100%;
text-align: center;
margin-top: 10px;
}

Este ID de CSS dice que el ancho es del 100% de la página, que el texto esta centrado y que el margen superior es de 10px. Al margen podria ponerle otros valores o no ponerle ninguno. Ahora, en mi documento html inserto este DIV de la siguiente manera:

<div id=”wrapper”>
</div>

Lógicamente si publico la página en un navegador no veré nada todavía, porque lo que hemos creado, este “wrapper” es el envoltorio que va a contener al resto de la estructura para que aparezca centrada. Lo siguiente es crear el ID del DIV que va a tener todo el contenido dentro. Este DIV estará dentro del “wrapper” y por eso estará siempre centrado. Llamo a este DIV “container”, y es así:

#container {
width: 750px;
margin-left:auto;
margin-right:auto;
}

Simplemente le he indicado el ancho total que va a tener el sitio web (750 px en este caso) y también le he indicado que los márgenes izquierdo y derecho tengan una medida “auto”. Esto hace que el DIV container se mantenga siempre centrado dentro del “wrapper”, tal y como indica el estilo del “wrapper” al utilizar un text-align: center. Ahora inserto este DIV dentro del “wrapper” tal que así:

<div id=”wrapper”>
<div id=”container”>
</div>
</div>

Sigo sin ver nada si lo publico en un navegador, y es normal, porque no hay ningún contenido sino simplemente una estructura para albergar el contenido, que es justo lo que hemos hecho. A partir de ahora, lo que nos aseguramos es que el DIV “container” esté centrado de forma absoluta. Voy a hacer dos estilos ID más, uno que llamare “header” y que definira la cabecera y otro que llamare “content” que definira el contenido principal, y quedaran así:

#header {
width: 100%;
background-color:#FFFFFF;
height: 150px;
margin-bottom: 10px;
}
#content {
width: 100%;
background-color:#FFFFFF;
height: 400px;
}

Que quede claro que lo mismo que yo les doy estos valores de tamaño y de background, luego cada uno tiene que jugar en función de lo que quiera obtener. Una vez definidos estos IDs los incluyo en mi documento html dentro del DIV “container”:

<div id=”wrapper”>
<div id=”container”>
<div id=”header”>Colocar aquí el contenido para id “header”</div>
<div id=”content”>Colocar aquí el contenido para id “content”</div>
</div>
</div>

Y tachán, ya está (pulsa la miniatura de la derecha para ver como queda el resultado en Internet Explorer). Para que se vea el contraste ya que no voy a poner nada de contenido, en la CSS pongo en el estilo body que haya un background-color: #000000; para que se vea el fondo negro y los DIVs que he insertado en blanco. Resumiendo, lo que he hecho ha sido indicar via CSS a una serie de DIVs que deben tener el contenido centrado de forma absoluta. La hoja CSS layout01.css ha quedado así hecha:

body {
background-color: #003366;
}
#wrapper {
width: 100%;
text-align: center;
margin-top: 10px;
}
#container {
width: 750px;
margin-left:auto;
margin-right:auto;
}
#header {
width: 100%;
background-color:#FFFFFF;
height: 150px;
margin-bottom: 10px;
}
#content {
width: 100%;
background-color:#FFFFFF;
height: 400px;
}

Y el archivo HTML para conseguir este increible y fascinante resultado que os cambiará la vida es así:

<head>
<title>ricardotayar.wordpress.com</title>
<link href=”layout01.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”wrapper”>
<div id=”container”>
<div id=”header”>Colocar aquí el contenido para id “header”</div>
<div id=”content”>Colocar aquí el contenido para id “content”</div>
</div>
</div>
</body>
</html>

Ala mozos, ahora a practicar cada uno en su casa estas cosicas, que poco a poco se pueden conseguir resultados muy interesantes. Ahora, ya sabeis como centrar un diseño web utilizando CSS, así que lo siguiente es experimentar y ampliar esta minilección por cuenta propia e ir dándole contenido al contenedor web principal… suerte!!!

Pero recientemente ha decidido impartir una formación sobre Flex a la que estoy asistiendo, y he descubierto con asombro que Flex es probablemente hasta la fecha la herramienta en la que mejor se complementan los trabajos de un diseñador y un programador. Antes de nada, decir que Flex es una aplicación de Adobe que permite crear aplicaciones web complejas, pero con un diseño muy vistoso, gracias a que toda la aplicación funciona en flash player y aprovecha las capacidades de Flash y Photoshop, permitiendo además manejar los estilos de una forma muy similar a como se hace en lenguaje CSS.

Podeis ver ejemplos de trabajos realizados en Flex en el sitio web de Adobe, pero aquí os pongo unas direcciones de los más chulos, para que se vean las capacidades de esta herramienta:

http://examples.adobe.com/flex2/inproduct/sdk/flexstore/flexstore.html Este es un ejemplo de una tienda de moviles con Flex… acojonante.

http://examples.adobe.com/flex2/inproduct/sdk/dashboard/dashboard.html Ejemplo de representación gráfica de datos con quesitos, barras, etc…

Ahora que lo conoxco un poco más en detalle, aunque aún me queda camino, y mucho, puedo decir que después de ver millones de programas, creo que es la primera vez que me encuentro con una aplicación que permite compatibilizar a la perfección el trabajo de diseñador y programador, permitiendo que cada uno desarrolle su parte a la vez que se integran perfectamente.

Y es que Flex permite que el desarrollador programe y que el diseñador haga con el interface prácticamente cualquier cosa que quiera, aprovechando un sistema de estilos muy similar al de CSS y la completa integración de Photoshop y Flash con Flex, de hecho, las plantillas ya hechas en Flex tienen una calidad muy superior a algunos diseños “profesionales” y permiten que programadores sin ninguna experiencia en diseño creen aplicaciones que aparte de ser útiles, sean realmente atractivas.

Por esto digo que Flex es algo así como un “punto de encuentro entre programador y diseñador”, ya que cada uno puede controlar por completo su parcela sin interferir más de lo debido en el trrabajo del otro. Ahora lo que hay que hacer es abandonar las poses chorras de muchos diseñadores y programadores y concentrarse en el hecho de que gracias a aplicaciones así es posible compatibilizar al 100% el hacer una aplicación robusta y funcional que además sea muy atractiva visualmente, y ambas cosas son indispensables en el mundo de hoy.

COMIENZA EL EXPERIMENTO: Me metó en Google para comprobar algo que sospecho y tachán!!!!, mis temores se hacen realidad. Introduzco “monsters of rock” y le doy a búsqueda. ¿Qué cual es mi intención?, simplemente quiero comprobar en que posición de nuestro buscador favorito aparece la web del acontecimiento que me permitirá ver en directo a Ozzy, a Megadeth y a Motörhead, entre otros, a finales de junio en Zaragoza. ¿Cual es el resultado? La web oficial del festival aparece en la posición…. (pausa dramática)… 232!!!, si si, que habeis leido bien, 232!!! (a día de hoy, 22 de mayo de 2007), con dos cojones, para que la encuentres facil. Ya sabemos casi todos que el 70% de las búsquedas no pasan de los primeros 10 resultados, así que ya sabeis, si meteis “monsters of rock” en Google, tendreis que ir a la página 24 (os da tiempo a comer y echaros el café) para encontrar la web oficial del festival.

Me digo a mi mismo “esto no es posible, no puede estar tan mal hecha siendo un evento relativamente importante y bastante promocionado”, así que hago otra búsqueda más concreta todavía y pongo en el buscador “monsters of rock” con las comillas y todo para que busque exactamente esa cadena y la posicion es… (pausa dramática) la número 82!!!!!. Vamos mejorando, pero vamos, que me sigue pareciendo de traca. Con resultados paginados de 10 en 10, a la novena página!!!!, vamos de excursión!!!

Ya decidido a ponerle las cosas más fáciles todavía al amigo Google pongo “monsters of rock zaragoza”, (que más concreto ya solo puede ser “monsters of rock zaragoza en junio en la feria de muestras y se llega girando en la calle del capon a la izquierda”) y Google me escupe un resultado para la web que buscó del… 8!!!!. Hombre, 8 no estaría mal si el dominio no contuviera todas las palabras clave de la busqueda, que ya es gordo.
En resumen, la web en cuanto a posicionamiento es un churro, así de claro, y solo voy a entrar un poco por encima en el tema del contenido, que parece ya un chiste y de los malos de jaimito, de los que sales corriendo cuando te los cuentan y te escondes y todo, porque aparte del cartel del festival (desactualizado a fecha de hoy por cierto) y biografías de cada grupo, no hay practicamente nada más. No hay información sobre la zona de acampada (y a mi que voy a acamapar alli me interesa, pardiez), no hay información sobre lo que cuesta una cerveza, normas de entrada, si hay duchas… no hay información de nada. La información que hay es de como llegar a Zaragoza y donde comprar las entradas y ya. Hombre, que menos que saber que va a costar una cerveza, a como va el litro de calimocho y todas esas cosas… pero todo esto no me importará un pito si cuando esté allí puedo estar en primera fila viendo como Lemmy machaca su bajo y me taladra la cabeza con “Stone dead forever”.

A lo que iba, que me pierdo. Estos dos zagales me pidieron ayuda porque conocían mi trabajo previo e impresionados por él me engatusaron para que les desarrolle gráficamente el sitio web de Guasax www.guasax.com y así poder presentar sus proyectos con una presencia gráfica acorde a la envargadura del proyecto, un framework que cambiara el destino de la humanidad.

Aqui os pongo una minicaptura que no os molesteis en clicar porque no se hace más grande para que veais así en plan rápido un poco el diseño general del nuevo sitio de Guasax, del que haremos toda la publicidad posible en cuanto esté listo.

Rock & Ride Forever !!!