Éste no pretende ser un post larguísimo predicando las ventajas del CSS, sencillamente voy a hablaros de cómo centrar imágenes o alinearlas a cualquier lado usando las hojas de estilo. Aunque primero vamos a hacer un recorrido sobre la alineación de las imágenes en sus comienzos y luego seréis vosotros quienes saquéis la conclusión sobre si CSS es mejor o no :-)

Para una mejor comprensión de este texto, es recomendable tener ciertas nociones básicas de HTML y uso de CSS.

HTML: El origen

La etiqueta <img> (que nos permite añadir imágenes en nuestra web) admite el atributo align que puede tomar los siguientes valores: left, right, top, texttop, middle, absmiddle, bottom, absbottom, baseline. Cada valor permite que podamos alinear la imagen a la izquierda, derecha, etc. con respecto al texto o contenido.

Si queremos alinear una imagen a la derecha tendríamos que escribir:

<img src="imagen.jpg" alt="Esto es una imagen" align=right>

El problema: tenemos que conformarnos con la alineación que hace el navegador. Si no nos gusta, por ejemplo, que la imagen se pegue tanto al margen o queremos que esté algo más separada del párrafo o elemento anterior, el código cambiaría de esta manera:

<img src="imagen.jpg" alt="Esto es una imagen" align=right vspace=20 hspace=10>

Conseguiríamos que la imagen tuviera una separación superior e inferior de 20 pixels (vspace) y una lateral (hspace) de 10 pixels.

El código ha crecido, aunque no supone ningún trauma, ¿no? Ahora, piensa, si un día decides cambiar el aspecto de tu web y no prefieres que las imágenes tengan el mismo margen lateral y quieres poner un valor menor, ¿qué tendrías que hacer? Cambiar uno a uno todos los valores de hspace que haya en todas las imágenes (es muy probable que sea más de una) que tengas en tu web. Un gran problema, ¿verdad? Afortunadamente, la historia evoluciona :-)

XHTML + CSS: La elegancia

Con las hojas de estilo, somos nosotros los que podemos cambiar el comportamiento por defecto de las etiquetas. En nuestro caso, queremos modificar el comportamiento de la etiqueta <img>. Veamos lo que tendríamos que hacer para darle un margen lateral de 10 pixels:

img {
     margin-top: 20px;
     margin-bottom: 20px;
     margin-left: 10px;
     margin-right: 10px
}

Y obtendríamos el mismo resultado que <img src="imagen.jpg" alt="Esto es una imagen" align=right vspace=20 hspace=10>. (Podéis pensar que vspace es equivalente a margin-top y margin-bottom; y hspace sería equivalente a margin-left y margin-right.)

Seguro que estáis pensando que hay que escribir más usando CSS que de la forma “antigua”. Antes de seguir pensando, mirad lo siguiente:

<img src="imagen.jpg" alt="Esto es una imagen" />

Ya está, usando así la etiqueta <img> obtendremos la presentación que queríamos ya que usará el estilo que hemos definido para esa etiqueta en nuestra hoja de estilos. Decidimos el aspecto de cada elemento en la CSS y no en nuestro código.

Esperad, que hay más. Podemos abreviar la definición del estilo:

img {
     margin: 20px 10px 20px 10px
}

Y es exactamente lo mismo. Para entender a qué corresponde cada valor, empieza como si fueran las doce (en un reloj de aguja) y ahora desplázate en sentido horario. Entonces, sería margin-top (20px), margin-right (10px), margin-bottom (20px) y margin-left (10px). No es complicado y nos hemos ahorrado 3 líneas.

¿Pero qué pasa con la alineación? Bueno, bueno, ahora nos ponemos, ¡qué impacientes! Podríamos usar también el atributo align, pero nosotros queremos tener un control total, aplicar nuestra propia alineación a la derecha o izquierda. Sin más preámbulos, un posible estilo para alinear una imagen a la derecha:

img.derecha {
	float: right;
	margin: 0 0 20px 20px;
	display: block
	}

Con float hacemos que la imagen se desvincule del flujo normal del documento y que se vaya a la derecha del mismo. Con el atributo margin establecemos el margen respecto al resto de elementos de la página que rodean la imagen. Y con display hacemos que se comporte como un elemento de bloque (ya que img es un elemento en línea).

En nuestro XHTML: <img class="derecha" src="imagen.jpg" alt="Esto es una imagen" /> Fíjate que tenemos un atributo nuevo class cuyo valor es el de nuestro estilo (podemos darle el nombre que queramos a nuestro estilo que para eso es nuestro. “derecha” me pareció bastante descriptivo :-P). Por decirlo de alguna manera, es la forma que tenemos para decir que queremos usar ese estilo en esta etiqueta.

¿Y si queremos alinear a la izquierda?

img.izquierda {
	float: left;
	margin: 0 20px 20px 0;
	display: block
	}

Para usarlo: <img class="izquierda" src="imagen.jpg" alt="Esto es una imagen" />

Complicado, ¿eh? Venga, ya que estamos animados, ahora vamos a centrar la imagen:

img.centrar {
	margin: 10px auto;
	display: block
}

Y para usarlo: <img class="center" src="imagen.jpg" alt="Esto es una imagen" />.

¿Sólo eso? Esperad, que aquí hay un poco más de “chicha”. Si sólo ponemos dos valores en el atributo margin, el primero hace referencia a margin-top y margin-bottom; el segundo se aplica a margin-right y margin-left. Otra forma de ahorrar. Maravilloso :-) Pero, ¿qué es esto de auto? Aquí podemos tener algún problemilla con cierto navegador. El valor auto le dice al navegador que calcule (así no lo hacemos nosotros) el mismo margen en ambos lados (en este caso) consiguiendo así que la imagen quede centrada. Sin embargo, hasta la versión 7 del Internet Explorer (si no me equivoco), este navegador (y puede que alguno más) no interpreta correctamente el valor auto, así que habrá que hacerlo a mano si te importan los usuarios de ese “navegador”.

Para acabar, si ahora quisiéramos alinear una imagen que antes estaba centrada, bastará con poner derecha o izquierda donde antes estaba centrar (en el atributo class).

Y eso es todo, aunque apenas he hecho un esbozo de todo lo que se puede hacer con CSS y, en este caso, las imágenes. No he querido entrar en muchos detalles, sólo explicar lo más importante. Por supuesto que si quedan dudas, sólo tenéis que disparar :-)

Hala, a alinear imágenes como los mayores :-P

Hace tiempo, mostré un ejemplo de galería (más o menos atractiva) usando hojas de estilo. Esta vez traigo otra galería que a lo mejor no resulta tan llamativa pero sí algo curiosa y exploraremos otra de las propiedades del CSS.

Antes de explicar (lo poco que hay que explicar), puedes ver la galería en funcionamiento, para que te hagas una idea.

La sucesión de imágenes está formada por una lista desordenada. Cada elemento de la lista contiene una imagen. Cada enlace a una imagen tiene el siguiente estilo:

.gallery a img {
	position: relative;
	z-index: 1
	}

Lo que nos interesa es el atributo z-index. Este atributo nos permite asignar un orden de apilamiento entre los distintos objetos que haya en nuestra web. En este caso, le damos el valor 1, que es como indicarle la posición que ocupa esta capa en el resto de la web.

Ahora veamos el estilo para cuando se haga hover (cuando pasamos el puntero del ratón sobre el elemento):

.gallery a:hover img {
	z-index: 2;
	width: 500px;
	height: 334px
	}

Aquí z-index, tiene un valor 2. Los valores mayores hacen que los objetos se superpongan sobre los de menor valor. Esto es, la capa que contiene z-index:2 se pondrá encima que la anterior, que vale 1. Si tenemos otro elemento con un valor mayor en z-index, estaría por encima de todos los elementos más pequeños. Si, por el contrario, tuviésemos un elemento con un valor negativo o menor que los demás en z-index, sería la capa más “profunda”, la que estaría en la posición más baja y estaría tapada por las demás.

Hay comentarios en la hoja de estilo y en el fichero XHTML (que podéis descargar). Podéis ir cambiando las propiedades para ver cómo varía. Si tenéis alguna pregunta, disparad :-)

Enlaces relacionados

• Galería de imágenes usando CSS

• Usar sólo blanco, negro o gris.
• Que tuviera un aire a la vieja escuela, a la web “uno punto cero”.
• Que fuese retro ;-)

Y bueno, esto es lo que ha salido:

A pesar de esa apariencia tan cutre, la web valida perfectamente: código XHTML 1.0 Transitional y CSS válidos. La resolución mínima recomendable es 1024×768.

Tenéis el código [ ZIP - 37,9 kB ] junto con las imágenes para que lo utilicéis o me critiquéis diciéndome lo malo que soy. También podéis verlo en funcionamiento.

Por supuesto, para cualquier duda sobre estos diseños, aquí estoy.

Otros diseños marca de la casa

• Macus’ World.
• food4thoughts.
• Mi PeCé style.

Como comento, fue un diseño rápido, está algo verde pero como no le voy a dedicar más tiempo y tampoco me parece que haya quedado demasiado cutre, lo publico y os lo dejo por si os puede servir de inspiración, crítica, utilidad, etc.

Como siempre, podéis verlo en funcionamiento o descargarlo [ Macus' World . 30,7 kB ] . Ya sabéis que todos los diseños que hago cumplen los estándares y son de dominio público.

Espero que Macus no se enfade por haberle robado las fotos :-P

Enlaces relacionados

• Web de Macus.
• Mi PeCé style.
• food4thoughts.

El único requerimiento para poder entender todo este rollo que cuento es tener algo de idea de diseño web.

El navegador de Wii

Uno de los servicios más populares que nos ofrece Internet es la web: poder navegar a través de millones y millones de páginas web. Para Wii hay un navegador especialmente diseñado. Se trata de una versión del navegador Opera adaptada (y de momento en prueba), con las mejores características de éste, aunque con algunas limitaciones:

• Basado en la versión 9 de Opera
• Plugin de Flash 7 (no hay problema para entretenerse con YouTube o Google Video, por ejemplo)
• Soporte de Cookies
• Soporte de JavaScript
• No soporta Java
• No soporta archivos de vídeo como Windows Media o Quicktime

Ya sabemos un poco más del navegador web, vayamos ahora al tema :-)

Resolución

Aquí dependerá del televisor que estéis usando, pero se supone que se adapta a la mayor resolución que permita el televisor. En las pruebas que he hecho (y en modo 16:9), obtengo una resolución de 1024 píxeles de ancho por 500 de alto (1024×500). En realidad, serían 600 de alto, pero 100 se los come la barra de herramientas del navegador.

Lo mejor es usar tamaños relativos en nuestro diseño. En lugar de definir una anchura de página de 800 píxeles, por ejemplo, decimos que será el 80% de la anchura total de la televisión. Así no importará qué resolución soporte el televisor, ya que el diseño se adaptará al 80% de la máxima anchura. Y así con el resto de capas que usemos.

Fuentes y tamaño

La mayoría de las fuentes (tipos de letra) que se usan en blogs o páginas web se ven perfectamente en el navegador de Wii, el único problema es el tamaño de dichas fuentes. Fuentes de menos de 15 pixels son bastante difíciles de leer por lo pequeñas que se ven, aunque esto no sea un gran problema pues podemos hacer Zoom con el mando, pero es un poco engorroso. Un tamaño ideal sería de 25 pixels, y de ahí, para arriba :-)

Si queréis usar el tipo de letra que se usa en el menú principal de Wii (la fuente oficial, digamos), se llama Wii NTLG PGothic JPN Regular.

Seleccionar un estilo si es Wii

Imaginemos que queremos que nuestra página muestre diseños distintos según se vea desde el navegador de la Wii o desde otro navegador, así podríamos tener un diseño general y luego uno adaptado, con letras más grandes, otro tipo de fuente, colores… para que sea cómodo de visualizar desde la consola.

Lo ideal es que en nuestra página web o weblog tengamos separado el contenido del continente, es decir, el contenido del diseño. Con lo cual tendremos por un lado nuestras páginas y por otra una o varias hojas de estilo (CSS). Así que para cambiar entre un diseño y otro, tan sólo hay que cargar una hoja de estilo u otra, sin apenas tocar código. Tendremos, por ejemplo, style.css que será nuestra hoja de estilo normal y style-wii.css que será una hoja de estilo que hemos creado para el caso de que nuestra página se vea desde la consola de Nintendo. Nos ayudaremos de código en PHP para hacer todo esto (así que debéis aseguraros de que vuestro servidor tiene instalado PHP o no funcionará). Nada de asustarse, que es muy sencillo :-)

La idea es detectar el navegador de la Wii y si es cierto, cargar la hoja de estilos adecuada. Así que en nuestra página principal, entre las etiquetas <head> y </head>, ponemos algo así:

<?php
     if(eregi("wii",$_SERVER["HTTP_USER_AGENT"])) {
          echo "<link rel='stylesheet' type='text/css' href='http://miweb.com/style-wii.css' title='style' />";
     } else {
          echo "<link rel='stylesheet' type='text/css' href='http://miweb.com/style.css' title='style' />";
     }
?>

Si el navegador se identifica como wii, se escribirá el código necesario para añadir la hoja de estilo adaptada a Wii (style-wii.css). En otro caso, usaremos la hoja de estilos normal (style.css).

Para el que sienta curiosidad, lo que devuelve la variable HTTP_USER_AGENT es:
Opera/9.00 (Nintendo Wii; U; ; 1309-9; es-es).

Acabáis de ver un caso práctico de por qué es bueno diseñar webs separando el diseño del contenido. Menos trabajo :-)

Dámelo todo hecho

Si usas WordPress para administrar tu sitio, seguramente te interese saber que hay un añadido (plugin) para este CMS que permite modificar el estilo de nuestra página sin tener que tocar código. Lo podéis descargar desde aquí. Ojo, no lo recomiendo porque cambia totalmente el diseño de tu página por el que trae el plugin por defecto, pero si eso no te importa, es muy cómodo. Por ejemplo, mirad cómo se ve el weblog de DraXus (y así respondo a su pregunta ;-):

Y con el plugin:

Este texto no está ni cerca de estar completo. Según tenga más información y siga haciendo pruebas, iré poniendo los resultados.

Actualización [14/04/2007]: Ha salido la versión final (hasta ahora era una beta) con las siguiente características:

• Opera 9.10
• JavaScript 1.5
• Plugin Flash 7.0 r68
• Resolución: 800×664

El diseño (como los que vaya publicando) es de dominio público así que haced lo que queráis con él. Sigue los estándares y debería adaptarse a cualquier resolución de pantalla aunque haya sido diseñado con una resolución de 1024×768 de base.

Descargar food4thoughts [ 141,1 kB, imágenes incluídas ] y para verlo en funcionamiento, aquí lo tenéis.

Enlaces relacionados

• Mi PeCé style, otro diseño marca de la casa.

Os hablaré de unas cuantas etiquetas de HTML (el lenguaje de Internet) para que podáis subrayar el texto, remarcarlo con negrita, inclinarlo como si fuera cursiva… Así vuestros comentarios tendrán otra pinta, no serán tan aburridos o sencillamente serán más cómodos de leer y podréis dar más importancia a ciertas partes del texto. No os preocupéis que esto no es programación ;-)

En HTML todo va por etiquetas que se “abren” y “cierran” para indicar a qué parte del texto o contenido afectan. Por ejemplo: Hola, <etiqueta>esto es</etiqueta> un texto.

La etiqueta llamada “etiqueta” (sí, podría haber buscado un nombre menos redundante, pero no sería tan descriptivo :-P) comienza justo antes de esto y termina después de es. Como habréis notado, las etiquetas se encierran entre los símbolos menor ( < ) y mayor que ( > ) y cuando cerramos una etiqueta, es decir, cuando le decimos “hasta aquí quiero que funciones”, lleva una barra inclinada ( / ) antes del nombre de la etiqueta.

Vayamos con unas etiquetas útiles para los comentarios:

NOTA: Algunos blogs no permiten el uso de HTML en sus comentarios. Así que aseguraos de que podéis usar HTML antes de llenar el texto con etiquetas y más etiquetas :-P

Habréis observado que en la última etiqueta, la que nos permite añadir enlaces (links), se le añaden más cosas que la propia etiqueta: los atributos. Son varias las etiquetas HTML que pueden llevar atributos. Para el ejemplo anterior, el atributo target indica dónde se abrirá la nueva página. Dos son las opciones importantes que ofrece:

• _self: La nueva página se abrirá en la ventana actual del navegador.
• _blank: La nueva página se abrirá en otra ventana del navegador.

El otro atributo, href, es para indicar la web que queremos enlazar (en el ejemplo de la tabla, enlazamos la dirección de este blog).

Otra etiqueta útil, sobre todo cuando quieres citar a alguien es blockquote:

Hey, fijaos que además, sin mucho esfuerzo, habéis aprendido algo del lenguaje para hacer páginas web :-)

Venga, tenéis los comentarios de este post a vuestra disposición para pruebas ;-)

El caso es que nunca me había animado a publicar alguna plantilla y el otro día, pensando en un rediseño para la primera página que colgué en Internet, salió Mi PeCé style. Es un tema bastante sencillo (no soy un crack en el diseño web), poco recargado y ‘elástico’, es decir, que se adapta a la resolución que uséis en vuestro ordenador. En fin, poco más puedo decir. Lo tenéis a vuestra entera disposición [ ZIP - 25,8 kB ] para lo que queráis, totalmente libre :-)

Ah, ¿que queréis verlo en funcionamiento? Pues venga, aquí lo tenéis. Si es que lo queréis todo :-P

El otro problema es la pérdida del Pagerank (cuán popular es tu sitio para Google) o de los backlinks (enlaces a contenidos de tu página desde otras páginas). Afortunadamente, estas cosas tienen solución (bendita informática :-P)

Vamos a hacer uso de uno de los estados del servidor web, concretamente el 301, que indica que la página web a la que estás accediendo ha sido movida a otro sitio. Esto es muy útil para los robots de los buscadores, que cuando rastrean nuestra página web, anotan que deben seguir la nueva dirección de la página. Muy bien, ¿y cómo hacemos esto? En PHP, basta con poner el siguiente código en la página principal de la página que queremos redireccionar:

<?php
     Header( "HTTP/1.1 301 Moved Permanently" );
     Header( "Location: http://www.direccion-nueva.com" );
?>

Bastará con cambiar la parte que pone Location, con el sitio al que queremos que redireccione.

Puede suceder (es lo que me ocurrió a mí) que el sitio donde tengas alojada tu página, no permita incluir código PHP en su contenido, así que tendremos que echar mano de una solución algo cutre, pero también efectiva. Entre las etiquetas <head> y </head>, ponemos:

<META HTTP-EQUIV="refresh" content="0;
          URL=http://www.direccion-nueva.com/">

Lo que hemos hecho es que la página que contiene ese código se actualice (refresh), a los 0 segundos de haber sido cargada, a la nueva página http://www.direccion-nueva.com. Podéis ver cómo funciona entrando en http://jab.blogia.com, donde estaba antes este weblog. Debería traeros aquí de nuevo.

Y nada de perder visitantes ;-)

El ‘truco’ está en crear una capa que se active cuando se hace mouse over, es decir, cuando pasamos el puntero del ratón sobre un elemento.

.thumb:hover span {
          background-color: #333;
          visibility: visible;
          right: 0;
          top:  150px;
          left: 0px;
          z-index: 50;
          margin: 0 auto;
          width: auto;
}

Fijaos en el atributo visibility, en la clase de arriba está como visible.

.thumb span {
          position: absolute;
          top: 150px;
          left: -1000px;
          visibility: hidden;
          color: #fc7;
          font-family: "Andale mono", "Trebuchet MS", sans-serif;
          font-size: 12px;
          border-bottom: 1px dashed #666;
}

Aquí, sin embargo, visibility está como hidden, es decir que no se muestra, está oculto. Así que dependiendo de si se pasa el puntero del ratón por encima de un elemento o no, se mostrará una capa u otra.

Podéis verla en funcionamiento aquí. Y por supuesto os podéis descargar la galería completa para investigar / romper / copiar / modificar el código :-)

PD Debería funcionar bien en todos los navegadores decentes, cumple con los estándares XHTML y CSS, pero no te me quejes si usas el Internet Explorer, eso ya no es culpa mía :-P