El otro día enlazaba una página que recopilaba un bonito montón de buenos diseños, pero decía faemino que echaba de menos una categoría para los weblogs. Para cubrir el hueco, vía fran y manu apunto Blog Design Showcase.

Gracias a Urban Design he encontrado un buen lugar para inspirarse a la hora de hacer un diseño nuevo. Misspato recoge 473 sitios con excepcionales diseños, organizados en 14 estilos, seleccionados por la diseñadora portuguesa Patricia Carvalho.

Desde que instalé las fuentes de Windows en mi SuSE, en bastantes páginas estoy teniendo problemas para que el navegador represente algunos caracteres especiales correctamente, sobre todo apóstrofes y comillas, que son sustituidas por un feo cuadrado blanco que dificulta la lectura. Investigando un poco la razón de ésto, he descubierto que la causa es la elección de charset en los documentos HTML. El más utilizado es el ISO-8859-1, un juego de caracteres bastante amplio, pero que tiene algunas limitaciones, que son las causantes de los molestos cuadraditos blancos.

El problema se soluciona usando un juego de caracteres más amplio todavía, del tipo UCS, como UTF-8, que, de hecho, es el segundo más utilizado. La elección de este charset tiene además algunas ventajas adicionales, como que permite olvidarse de ampersands acutes y ntildes para representar eñes y vocales acentuadas, el navegador las representará siempre correctamente escritas tal cual. Además, si el tipo de letra elegido no dispone de un caracter concreto, como podrían ser algunos tipos de comillas, se obliga al navegador a usar otro tipo de letra que sí disponga de él (sólo para representar ese caracter especial, sin cambios en el resto del documento).

La única pega que he encontrado es que Netscape 4 usa un tamaño de letra anormalmente grande para representar UTF-8, lo que no es un gran problema, teniendo en cuenta que esa versión de Netscape está al borde de la extinción.

Estoy preparando un nuevo diseño que incorporará el uso del charset UTF-8. Lo pondré on-line en cuanto resuelva algunos problemas cross-browser que estoy teniendo con el menú superior, que emplea masivamente CSS 2.

En blogpocket hablaban ayer de un tutorial (en inglés) que explica cómo tener instaladas las versiones 5, 5.5 y 6 de Internet Explorer al mismo tiempo en Windows XP, haciendo posible ejecutar cualquiera de ellos.

Lo apunto, principalmente, para acordarme de echarle un vistazo cuando disponga de tiempo y ver si es posible hacerlo en Windows 98, que me vendría bien, puesto que cada una de las versiones de IE incorpora diferentes versiones de los estándares en lo que a CSS se refiere, interpretándolos, además, de una forma distinta (eso sin hablar del cambio de motor gráfico que hay de por medio), lo que hace que sea necesario visualizar tu trabajo con cada uno de ellos por separado, a ver qué es lo que hacen con tu código.

Debería ser innecesario, pero todavía hay gran cantidad de gente que no quiere (o no puede) actualizar a la última versión del navegador de Microsoft (o instalarse otro).

Como ellos mismos dicen, el CSS Zen Garden intenta motivar, inspirar, y animar la participacion pero, sobre todo, es un magnífico (y porqué no, también hermoso) ejemplo de lo que puede hacerse con CSS.

El contenido siempre es el mismo, exactamente el mismo código, sólo cambia el archivo externo .css. ¿Los resultados? Sencillamente hay que verlos.

Conviene volver a visitarlo de cuando en cuando para ver los nuevos diseños que se van añadiendo.

Hasta ahora mis artículos de Diseño Web mostraban como se conseguían ciertos efectos usando CSS, aunque a menudo se colaba algún ejemplo que funcionaba sólo en según que navegador. Los artículos que vayan bajo el título CSS insólito, serán justo lo contrario. Funcionarán en al menos un navegador, pero no en todos, ni siquiera en la mayoría. Serán sólo experimentos, curiosidades, que rara vez tendrán utilidad en el mundo real.

El experimento de hoy consiste en recrear el típico efecto leer más usando sólo CSS. Para ver el ejemplo necesitarás un navegador con motor Gecko como por ejemplo, Mozilla Firebird, pues solo ellos implementan la pseudo-clase focus, de la que me sirvo para recrear el efecto.

Suficiente como introducción, ahora toca ver el experimento funcionando.

Sabido es que IE no soporta position:fixed. Corren por ahí varios hacks para que al menos las distintas versiones del navegador de Microsoft se comporten de una forma similar a lo que el resto de navegadores presentan cuando se encuentran con esa instrucción. Hay que recordar que es CSS de nivel uno y todos los demás navegadores (en su última versión) ya la soportan completamente.

Como decía, hay varias formas de hacerlo, incluso sin necesidad de scripts. Aquí está la mía que, por supuesto, sólo usa CSS.

Para que hubiera más de un elemento fijo, le he añadido al menú un truco de Eric A. Meyer que también explico.

Cuatro menús completamente distintos aplicando CSS a una misma lista desordenada.

Ver los ejemplos.

Walter Kobylanski ha decidido publicar la plantilla CSS de su weblog Personal. Pero ha sido más generoso que yo y ha publicado la plantilla completa, lista para usar, en vez de sólo el esqueleto. Es una plantilla de dos columnas más cabecera con posicionamiento absoluto, pensada para bitácoras.

Gracias a iniciativas como éstas, pronto no habrá excusa para seguir usando tablas.

Como lo prometido es deuda, aquí está explicada la plantilla sin tablas que he usado para la página principal de navegaseguro.cjb.net.

He intentado ser claro pero, si hubiera algún tipo de duda, puedes dejar un comentario aquí mismo y me extenderé más.

No sé si será de utilidad para alguien, pero ha sido divertido hacerlo.

Sigo con mis experimentos en XHTML 1.0 sin usar tablas. En esta ocasión, dos ejemplos:

En el primero, un menú similar al de aquí (arriba) pero con un efecto algo diferente.

En el segundo, una forma de posicionar párrafos usando bordes sobredimensionados.

Ver los ejemplos

Para colorear una línea horizontal y que ésta se vea coloreada en todos los navegadores necesitas el siguiente código:

hr {
/* Netscape 6/7, Mozilla, otros navegadores Gecko */
background-color:#0ff;
/* IExplorer */
color:#0ff;
/* Opera */
border: #0ff;
}

¿Por qué hay que declarar tres reglas distintas, una para cada navegador? Pues porque cada navegador interpreta de una manera ese tag. Para Netscape/Mozilla es un bloque y, por lo tanto, se debe rellenar con color de fondo; también se puede usar una imagen, definir bordes, etc. como un elemento de bloque cualquiera. Para Internet Explorer es un tipo especial de texto y se comporta como tal. Por ejemplo, Internet Explorer representará centrada una línea definida así:

hr {
color: #0ff;
width: 75%;
text-align: center;
}

Para Opera, en cambio, es el borde superior e izquierdo de un elemento de bloque. Por lo que el único color que se puede definir es el de ese borde.

A ver cuándo aparece un estándar que les obligue a ponerse de acuerdo.

Los formularios son muchas veces los grandes olvidados del diseño web. No es extraño ver el estilo por defecto de los formularios incluso en páginas de cuidado diseño.

Pinchando en este enlace puedes aprender cómo personalizar todas las partes de tus formularios.