diseño

You are currently browsing articles tagged diseño.

Hoy me he percatado al abrir en un navegador (Chrome) una sesión nueva en google.es que el aspecto de la página de resultados había cambiado y mucho. Habituado a ver todos los días las páginas de resultados de google.es, como otros tantos miles de mortales, el cambio me ha llamado la atención, y mucho.

La página de resultados de google.es (o SERP) que me he encontrado es muy muy parecida a la SERP de Bing

Pagina de resultados nueva de Google.es para la búsuqeda "alquilar coche"

Pagina de resultados nueva de Google.es para la búsqueda "alquilar coche" - Clic sobre la imagen para verla grande.

Por comparar y entrender el porque llama la atencion tanto este cambio, aquí podeis ver una página de resultados del buscador Bing:

Pagina de resultados del buscador Bing

Pagina de resultados del buscador Bing para la búsqueda "rent a car" - Clic sobre la imagen para verla grande.

Como puede verse a simple vista, la disposición de los elementos de la nueva página de resultados de Google es muy similar a la de Bing, sobre todo en lo referente al menú vertical de la parte izquierda, algo nuevo en google y que fue una apuesta de Bing. ¿Es este el futuro de la página de resultados de Google?

Sigue leyendo »

Tags: , , , , ,

Probablemente muchos de los que leais este post ya conoceis perfectamente lo que es un test multivariante en Google Website Optimizer. Para los que no, aquí un pequeño resumen: Optimizer es una herramienta que te permite testear diseños alternativos de una landing page para ver si mejoras la conversión o cambia el comportamiento del usuario (esto es un test A/B) o bien puedes, dentro de un diseño, testear diferentes versiones de uno o varios elementos del diseño (botones, colores, fotos, etc.) para ver si mejoras la conversión, etc.

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.

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. Sigue leyendo »

Tags: , , ,

El diseño web es una actividad que día a día, conforme el uso de internet es más general, va cobrando cada vez más importancia, ya que ante la demanda de creación y mantenimiento de sitios web cada vez más profesionalizados se hace necesario contar con buenos diseñadores web.

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.

diseno-web-profesional-01

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. Sigue leyendo »

Tags: , , ,

La analítica web puede sernos muy util a nivel de diseño web y puede ser una herramienta importante para conocer a nuestros usuarios y orientar correctamente nuestros diseños web hacia ellos. En el caso de que utilicemos Google Analytics hay una serie de datos que resultan fundamentales para el diseño web, así que ya sabes, si eres diseñador y te da repelús usar Google Analytics, no tengas tanto miramiento porque es una herramienta de medición que te va a ser fundamental para hacer un diseño web mucho mejor.

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.

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. Sigue leyendo »

Tags: , , , , ,

Hoy en día prácticamente todos estamos de acuerdo, en mayor o menor medida, en eso de que “content is king” o lo que es lo mismo, el contenido es el rey. Es cierto que depende del tipo de sitio web que tengamos puede ser que el contenido tenga mayor o menor importancia, pero en líneas generales, lo que contamos en nuestro sitio web y, sobre todo, como lo contamos, puede ser el principal valor para conseguir clientes, ventas, formularios o cualquiera que sea nuestro objetivo.

Ahora bien, por muy buen contenido que tengamos, ¿es suficiente con eso?, ¿solo importa el contenido?. La respuesta es no, porque el contenido del sitio web es su núcleo, pero el envoltorio también es muy importante, es como si un caramelo que está riquísimo lo envolvieramos en un cutreenvoltorio de papel de water. Sería igual de bueno, pero desde luego no lo parecería. Vale que el ejemplo no es el más apropiado, pero a lo que voy es que si es importante tener un buen contenido web es igual de importante maquetar ese contenido de una manera adecuada para que resulte atractivo para el usuario.

De hecho, y lo voy a explicar con un caso práctico, simplemente cambiando la apariencia de una landing page de un sitio web sin variar el contenido pueden mejorarse valores tan importantes en un sitio web como el porcentaje de rebote, el tiempo de permanencia o el número de páginas vistas por usuario. Y todo ello simplemente variando la forma de presentar la información, sin tocar el contenido ni el SEO del sitio web, ni la programación ni ningún factor que no sea la disposición de la información (ni siquiera voy a llamarlo usabilidad, que es un concepto más complejo). Para tomar este tipo de decisiones sobre como maquetar un sitio web es fundamental utilizar Google Analytics o similar y analizar con tranquilidad los datos que la analítica web nos ofrece, aplicar el sentido común, escuchar a los usuarios y sobre todo olvidarse de las opiniones personales sobre los sitios web. No importa que nos guste o no, importa que consigamos el objetivo que se pretende. Sigue leyendo »

Tags: , , , , ,

En menudo jardin me meto poniéndome a dar consejos sobre como hacer webs. Yo soy el primero al que le queda mucho por aprender, pero la verdad es que a base de hacer webs y más webs, y reunirte con clientes, y leer artículos y libros, y hacer cursos de usabildiad y diseño, y más y más cosas acabas teniendo unas pautas sobre como hacer un diseño web bien concebido, bien orientado para lo que el cliente quiere. Como en todo, cada uno tiene su método, pero creo que el 90% de los que lean esto estarán de acuerdo en que estos 10 consejos para hacer un diseño web son prácticamente universales. Espero que os sean útiles:

  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. Sigue leyendo »

Tags: , , ,

Seguro que todos los que habeis tocado CSS en un momento u otro os habeis encontrado con el típico problema de que el CSS no se ve igual en todos los navegadores ni versiones de estos: lo que se ve estupendamente en Firefox no se ve bien en IE6 aunque si se ve en IE7.

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. Sigue leyendo »

Tags: , , , , ,

Cuando empecé a entender y a manejar esto del CSS pensaba que estaba muy bien y que molaba mucho para cambiar los colorines de los enlaces y que se subrayaran y cosas así, pero no le veía mucha más aplicación. No digamos ya cuando se trataba de centrar un diseño en la página, por favor… eso se hace con tablas!!!. Pues no amigos, con CSS se puede, y además es más lógico, tiene más sentido y el diseño es más limpio.

Ejemplo de diseño centrado: www.elbuscadordecursos.comPara 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>

Layout01 - Asi queda el resultado final.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!!!

Tags: , , , , , , , ,

Los seres habituados a utilizar el lenguaje CSS para diseño de sitios web suelen estructurar todo el sitio web en DIVs, utilizandolos para contener todo lo que se quiere mostrar, pero a veces, ay amigos, es necesario recurrir a nuestras viejas amigas las tablas porque son más útiles para presentar según que información, como por ejemplo, tablas con datos ecónomicos o estadísticas o cosas de ese tipo.

Como estos ejemplos lo que mola es explicarlos con un caso práctico, pues vamos a ello: te abres a tu amigo Dreamweaver y te haces una tabla sencillita porque en tu web quieres poner unos datos y los DIVs que tanto te ha costado aprender a manejar con CSS no son todo lo útiles que quisieras.

Por ejemplo, hacemos esta tabla:

<table border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<th>Fecha</th>
<th>Unidades Vendidas </th>
<th>Precio por unidad </th>
<th>IVA por unidad </th> </tr>
<tr>
<th>29/10/07</th>
<td>520</td>
<td>420 € </td>
<td>67,20 € </td>
</tr>
<tr>
<th>29/10/07</th>
<td>520</td>
<td>420 € </td>
<td>67,20 € </td>
</tr>

</table>

En esta tabla que he colocado hay una característica no muy común, y es que algunas celdas no son <td> sino <th>, <th> significa “table header” – cabecera de tabla, y por defecto colocara el texto en negrita y centrado. ¿Hasta aquí todo OK?, pues venga, vamos a complicarnos la vida, que somos así de guayses. Esta tabla vista en plan gráfico en el navegador es así de chula:

Tabla sin CSS

No se puede hacer un diseño más rancio ni por accidente, pero bueno, ya tenemos nuestra tabla con nuestros datos, pero la presentación es muy pero que muy pobre. Si no queremos recurrir al CSS empezaremos a “customizar” la tabla añadiendo bordes, imágenes de fondo, etc… bien con Dreamweaver o directamente a pelo en código fuente, a gusto del consumidor. Para que veais lo que se puede conseguir, el resultado final que conseguiremos es este:Tabla con CSS

Es la misma tabla, no hay magia ni poderes mutantes ni nada, solo que esta última está vinculada al CSS que vamos a ir creando. Como no cabe entera sale un poco cortada pero os vale para haceros a la idea.

En lugar de jugar con etíquetas html para darle atributos a la tabla de colorines, etc… nos apetece complicarnos un poquillo la vida con CSS, así que lo primero de todo es hacernos nuestra hoja CSS y en un apartado de la misma, incluir los estilos para esta tabla.

Mi consejo es que antes de ponernos a hacer chorradas y probatinas con CSS visualicemos que es lo que queremos, como queremos que sea la tabla. Aquí yo voy a hacer un diseño variado con varias posibilidades contempladas, pero cada uno puede luego simplificar o complicarse aún más la existencia. En mi caso, lo que yo quiero es que las celdas tenga bordes, un espacio interior (padding) para el texto o el contenido, un fondo chulillo, y diferentes tipos de letra dependiendo de si son cabeceras o no. Con la idea clara la llevamos a la práctica.

Lo primero es en nuestra superhoja de estilos CSS a la que voy a llamar tabla.css hacer un clase para toda la tabla. Yo lo llamo .tabla y lo hago así:

.tabla {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align: right;
width: 600px;

}

En este estilo defino por ejemplo, el tamaño de la tabla, el tamaño de la fuente, el padding, la alineación de texto, etc… Podría añadir más cosas o menos, pero ya cada uno a investigar por su cuenta. Para que podamos ir viendo el efecto en la tabla lo que hacemos es vincular nuestro documento html a la hoja de estilos – <link href=”tabla.css” rel=”stylesheet” type=”text/css” /> – y a la etiqueta de la tabla le aplicamos la class que hemos creado de esta forma tan sencilla – <table border=”0″ cellpadding=”0″ cellspacing=”0″ class=”tabla”> – Con esta acción tan sencilla ya hemos vinculado la tabla al estilo que hemos definido en la clase .tabla. El efecto es este:

Tabla con CSS - Paso 1

Ya se aprecian diferencias al aplicar el estilo. La fuente y su tamaño son los asignados en la clase .tabla, así como el ancho en píxeles y la alineación de texto. Las etiquetas <th> aparecen en negrita porque es su comportamiento por defecto. Lo siguiente que voy a hacer es dar precisamente a las qtiquetas <th>, a las cabeceras, un estilo propio, que las sitinga claramente del resto de celdas, y aquí interviene mucho lo que he comentado, que antes de hacer nada lo visualicemos y veamos con claridad lo que queremos. En mi caso, yo quiero que el texto sea más grande, en negrita, pero en blanco sobre un fondo degradado oscuro y que las celdas <th> tengan bordes a la derecha y abajo. Así que me creo este fondo en Photoshop Fondo y lo voy a utilizar en la clase .tabla th, que al tener ese nombre arrastra las propiedades de .tabla y aplica las propiedades que indico a las etiquetas <th> del documento. La clase .tabla th queda así:

.tabla th {
padding: 5px;
font-size: 16px;
background-color: #83aec0;
background-image: url(fondo_th.png);
background-repeat: repeat-x;
color: #FFFFFF;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #558FA6;
border-bottom-color: #558FA6;
font-family: “Trebuchet MS”, Arial;
text-transform: uppercase;
}

Y a ojos del navegador el resultado es este:

Tabla con CSS - Paso 2

La clase .tabla th se ha aplicado a la tabla y en concreto a las etiquetas <th>, o sea, a las celdas que han quedado molonas. Lo siguiente que vamos a hacer es definir dos clases para aplicar a una fila. En este caso llamaré a una clase .tabla .modo1, para que herede las propiedades de .tabla y defina nuevas propiedades en la fila en la que la apliquemos, y en la clase .tabla. modo1 td indicaremos otras propiedades para que se apliquen en las etiquetas <td> de esa misma fila, ¿está claro más o menos?. Venga, que se puede. En este caso me he preparado otro degradado de fondo (no tiene porque haber una imagen de fondo, puede ser un color sólido de background), que es este Fondo Modo 1 para aplicarlo en las etiquetas <td> de la fila con la clase .tabla .modo1. Las dos clases que creo son así:

.tabla .modo1 {
font-size: 12px;
font-weight:bold;
background-color: #e2ebef;
background-image: url(fondo_tr01.png);
background-repeat: repeat-x;
color: #34484E;
font-family: “Trebuchet MS”, Arial;
}
.tabla .modo1 td {
padding: 5px;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #A4C4D0;
border-bottom-color: #A4C4D0;
text-align:right;
}

Y para que surtan efecto en la primera etiqueta <tr> de nuestra tabla, en html, le asignamos la clase .tabla .modo1 de la siguiente manera – <tr class=”modo1″> – y el resultado, publicado en el navegador es este:

Tabla con CSS - Clase CSS .modo1

¿La cosa ya va molando no?. El problema es que aunque mola mucho, seguimos viendo la celda donde pone “29/10/07” exactamente igual que las otras celdas <th> de la tabla. Esto es precisamente porque es una celda con etiqueta <th> (no tiene porque ser <th>, si fuera <td> tendría el mismo aspecto que las otras). Para que varie, hemos de aplicarle una clase .tabla . modo1 th, ya que la clase .tabla .modo1 td solo afecta a las etiquetas <td>. Así que me preparo una clase .tabla .modo1 th así:

.tabla .modo1 th {
background-image: url(fondo_tr01a.png);
background-position: left top;
font-size: 12px;
font-weight:bold;
text-align: left;
background-color: #e2ebef;
background-repeat: repeat-x;
color: #34484E;
font-family: “Trebuchet MS”, Arial;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #A4C4D0;
border-bottom-color: #A4C4D0;
}

Y así consigo este resultado al publicar en el navegador:

Tabla con CSS - Paso 4

Ahora ya solo queda aplicar la clase definida a las diferentes celdas y filas, pero para terminar, supongamos que yo no quiero que todas las filas sean iguales, así que me creo otras clases para un modo2 que aplicaré a las filas pares, con otras características: diferente fondo, diferente alineación de texto… Con la idea de lo que quiero clara lo primero, creo estas clases:

.tabla .modo2 {
font-size: 12px;
font-weight:bold;
background-color: #fdfdf1;
background-image: url(fondo_tr02.png);
background-repeat: repeat-x;
color: #990000;
font-family: “Trebuchet MS”, Arial;
text-align:left;
}
.tabla .modo2 td {
padding: 5px;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #EBE9BC;
border-bottom-color: #EBE9BC;
}
.tabla .modo2 th {
background-image: url(fondo_tr02a.png);
background-position: left top;
font-size: 12px;
font-weight:bold;
background-color: #fdfdf1;
background-repeat: repeat-x;
color: #990000;
font-family: “Trebuchet MS”, Arial;
text-align:left;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #EBE9BC;
border-bottom-color: #EBE9BC;
}

Y las aplico tal y como hemos visto antes a la segunda fila de nuestra tabla, con lo que consigo el resultado final que hemos visto al principio:

Tabla con CSS

El código html de esta tabla es:

<table border=”0″ cellpadding=”0″ cellspacing=”0″ class=”tabla”>
<tr>
<th>Fecha</td>
<th>Unidades Vendidas </td>
<th>Precio por unidad </td>
<th>IVA por unidad </td> </tr>
<tr class=”modo1″>
<th>29/10/07</td>
<td>520</td>
<td>420 € </td>
<td>67,20 € </td>
</tr>
<tr class=”modo2″>
<th>29/10/07</td>
<td>520</td>
<td>420 € </td>
<td>67,20 € </td>
</tr>
</table>

Espero que esto haya quedado más o menos claro y que os sea de utilidad. Lo que está claro es que los DIVs no son la solución a todo, pero si es cierto que las hojas de estilo, via CSS, si se pueden aplciar a las tablas, como acabamos de ver, y ello os sacará de un aprieto en más d euna ocasión, sobre todo cuando, por ejemplo, esteis haciendo una web en la que haya que presentar datos en formato tabla.

Bueno gentes y seres del mundo, espero que os haya gustado… proximamente desvelaremos más increibles secretos del apasionante mundo del CSS y la web!!!

Rock & Ride forever!!!!

Tags: , , , , , , ,

Cuando empecé en esto de diseñar webs, el diseño gráfico y todo este mundillo en general, las cosas eran muchiiiiiisimo más simples que ahora, que prácticamente tienes que estar todos los días leyendo 1 o 2 horitas para enterarte de por donde van los tiros en la web, y aún así no te enteraras de todo jamás en tu vida.

Hace como no se cuantos años llegó a mi vida el CSS y como todo hijo de vecino me hice las tres preguntas de rigor, que son: ¿que es el css?, ¿para que sirve el css? y ¿podré hacer las webs más chulas y más rápido?. Creo que para todo el mundo cuando empieza con CSS estas son las tres grandes preguntas, y el problema hoy en día es que encuentras con mucha facilidad miles de guías de CSS super completas y muchísimas páginas de recursos, pero nadie te explica de forma sencilla y rápida que es esto del CSS, y eso, amigos mios , es lo que voy a intentar yo… con un par!!!

¿Que es el CSS? – CSS son las siglas de Cascading Style Sheets, que en cristiano de toda la vida viene a ser algo así como Hojas de Estilo en cascada, porque son precisamente eso, aunque esto se entiende mejor con el paso del tiempo. El CSS, para que nos entendamos es un lenguaje que permite que un documento separado de tus páginas web definas todo el estilo de tu web, entendiendo como esto tipos de letra, comportamientos de los enlaces, etc… Si si si, lo se, es probable que tú, pequeño amigo que has llegado aquí de chiripa, todavía no sepas de que co%&·”#es te hablo, porque no queda claro. Tú, para que nos entendamos, haces tu web a tu marcha, con su contenido, pero la forma de ese contenido la defines en un documento externo, en una hoja CSS. Aquí pongo dos imágenes para que se entienda mejor: en la imagen de la web rision.net blanca, la web está sin CSS, mientras que en la imagen negra, la web está vinculada a su hoja CSS.

La web de la Rision - www.rision.net - sin CSS. ¿A que es fea?La web de la Rision - www.rision.net - con CSS. ¿A que as� es mucho más chula?

La diferencia es brutal, mismo contenido pero presentación totalmente diferente. Eso es el CSS, la posibilidad de separar el estilo de una web de su contenido, así de sencillo y de complicado a la vez. Tu haces un html por un lado y una hoja de estilos, un css, por otro, los juntas (vinculando el html a la css) y el resultado es algo así como esto.

Una vez aclarado, más o menos, que es el CSS, pasamos al segundo apartado, no menos apasionante.

¿Para qué sirve el CSS? – Aunque parezca obvio, mucha gente sabe lo que es el CSS pero no lo usa o lo usa de mala manera y de forma corrupta y con malos modos y tal. Lo más sencillo de entender es que el CSS sirve para definir la estética de un sitio web en un documento externo y eso mismo permite que modificando ese documento (la hoja CSS) podamos cambiar la estética entera de un sitio web… ¿poderes mágicos? NOOOOOO!!!, ese es precisamente el poder de CSS. En cristiano, el mismo sitio web puede variar totalmente de estética cambiando solo la CSS, sin tocar para nada los documentos HTML o jsp o asp que lo componen. Como ejemplo, usando otra vez la web rision.net algo sencillo.

La web de la Rision - www.rision.net - con CSS. ¿A que as� es mucho más chula?Rision.net con la CSS cambiadaEn la imagen de fondo negro veis la web como es. Esto es así por ejemplo porque la CSS de esa web determina que de fondo de página (background-image) se va a poner una imagen que es un rayadico negro y se ve ese fondo. Si yo cambió eso solo en el CSS y le digo que el background en vez de una imagen sea el color #00afc8, pues el fondo desaparecera en todas las páginas y se sustituira por el color que he metido. y si además pongo que el tamaño de la fuente en vez de los 11px que pone sea de 18px pues ese cambio también se aplicara a toda la web, en concreto a todas las zonas de la web donde se apliquen esos estilos que he modificado. La página cambiada es la de fondo verde, y solo tocando dos líneas en el CSS.

Y ahora la cuestión más importante…

¿Me ayudara el CSS a ligar más, haré webs más chulas? – Contestandoprimero lo más importante, diré que el CSS es muy potente pero complejo a la vez, y que hace que puedas cambiar el aspecto completo de una web empleando unas pocas horas en modificar la CSS a fondo, ese es el espiritu de webs como CSS Zen Garden ( en inglés) o del Proyecto Camaleón (en español), que explica con bastante claridad y más en detalle como usar CSS y su utilidad.

Sobre lo de ligar más, hombre… si la chavala en cuestión es informática o le va el mundillo de internet en plan profesional pues es probable que atraigas su atención, pero si eres un caya malayo lo vas a tener igual de crudo, y si te pones a hablar de CSS con una moza que ni sepa de que le hablas, lo más probable es que te abandone y te cambie por el primer sujeto que mueva el culo al ritmo de Bisbal, Shakira o cosas así… es lo que hay amigos, el CSS es muy util, sí, pero dificilmente os servirá para mejorar vuestra vida social…

Intentaré ampliar la información sobre CSS en plan amiguete, para que todo el mundo lo entienda… próximamente aquí.

Tags: , , , , , ,

Newer entries »