Homer en CSS

10:03 — 1 Comentario

Hay gente que sabe de CSS, gente que pilota en CSS y luego está este tío.

Todo un Homer Simpson dibujado a golpe de CSS, y que además se ve en casi todos los navegadores.

Mi más sonoro aplauso.

gReader theme

21:57 — 0 Comentarios

¿Se acuerdan de aquel skin que Jon Hicks diseñó para bloglines y que le da un aire muchísimo más molón? (yo na lo concibo de otra manera).

Pues ahora ha hecho algo parecido para Google Reader, ese lector de feeds cancamusero que salió al mercado a medio cocinar (error que le hizo desmerecer de cualquier confianza, al menos mientras bloglines no se duerma).

Más en el blog de Hicks.

Categorías de links y listas

10:29 — 4 Comentarios

Una de las cosas que no me gusta de wordpress es que te coloque automáticamente un <li> antes de cada categoría de links. Luego puedes editar lo que aparece antes y después de cada uno de los links, pero no es posible hacer lo mismo con las categorías.

El resultado, en mi caso, es este (cada vez que actualizo el theme):

Obsérvense los puntitos de los cojones y la diferencia con el “Buscar” de más arriba, que es como tendría que aparecer.

Las posibilidades son: a) resignarse y hacer malabares con el CSS ó b) toquetear un miserable archivo de wp para que vea quien manda aquí.

Sobra decir cuál es la opción elegida…

Vas a /wp-includes/links.php y lo editas, buscando donde pone esto:

Cambiamos los li por div (por ejemplo) y arreglamos la inconveniencia (el resultado, arriba a la derecha).

Viva y bravo.

Bloglines Skin

4:39 — 5 Comentarios

Ya lo ví hace unos días, pero no había tenido tiempo en esta ajetreada e interesante vida que llevo (ja!) para probarlo: Bloglines Skin (de Jon Hicks). Eso sí, sólo para OSX (creo).

La verdad es que adecenta bastante la imagen de bloglines que, dicho sea, no es gran cosa, sino más bien un punto débil.

Beautiful interfaces with CSS

23:24 — 0 Comentarios

Muy buena presentación de Douglas Bowman, bastante aclaradora en algunos aspectos.

Habemus rediseño

17:36 — 13 Comentarios

Después de amontonar tres rediseños casi acabados a la papelera de las brillantes ideas que nunca se llevarán a cabo, ayer me puse tozudo y comencé a rediseñar (aprovechando que no me apetece nada estudiar).

Esto que ven (si están en el lector de feeds no lo verán) es lo que hay, y uno no da para más.

Simplemente voy a cambiar algunas cosas que no me gustan:

• El horrible título que tan sólo puse ahí a efectos de calcular el espacio necesario.
• El color de los enlaces, que no me parece que acabe de pegar.
• La caja. O pongo una sombreada o la quito (esta del borde difuminado no me acaba de convencer).

A prueba están los “ticks” en los enlaces ya visitados y alguna que otra funcionalidad, pero el grueso lo doy por hecho.

Hay diseño específico para páginas individuales y los archivos y las categorías no aparecen en la portada (usen esa fabulosa barra de navegación que hay arriba).

Como siempre, se aceptan sugerencias y se advierte de que estos días pueden ocurrir cosas raras que, por una vez, no serán cosa de las meigas, sino de los micro-rediseños.

Ahora me voy corriendo a poner el captcha que estos días están muy pesados.

Actualizado: Ya funciona TrencaSpammers y ya se puede comentar (aunque últimamente no está el personal muy hablador…).

CSS

12:53 — 4 Comentarios

Lo sé, lo sé. Esto es lo que tengo que hacer yo un día de estos. Que el CSS Reboot del 1 de Mayo ya no lo pillo…

Tarea para esta semana

17:07 — 1 Comentario

Quiero convertir esto que he escrito mientras comía pizza, en esto otro que he dibujado mientras comía tiramisú, previo paso por aquí y a golpe de CSS.

Parece que no hay grandes cambios pero algo hay:

1. El HTML es más limpio.
2. El CSS está mejor declarado. Los id para los elementos únicos y las class para los elementos de tipo que se repiten.
3. Los selectores son únicos, por lo que el CSS ocupará menos.
4. Y, evidentemente, habrá un lavado de cara y cambio de colores, fuentes y mandangas (oig, lo que le gusta a una renovarse…).

Últimamente me he dado cuenta de que algunas páginas sólo me resultan legibles en Bloglines.com, así que intentaré no caer en esa moda de los colores imposibles (generalmente oscuros o marronáceos) que emborronan la vista y provocan dolores hasta en los dedos de los pies. No prometo nada.

Si la fuerza me acompaña y mis múltiples compromisos sociales (jaja, los geeks no tenemos de eso) me lo permiten, para el final de la semana igual hay algo. Igual.

Nota: Escribo este rollazo de post para auto-obligarme con el plazo :)

Bordes redondeados en mozilla

16:09 — 2 Comentarios

El tema de los bordes redondos siempre me ha llamado la atención. Lo que me incomodaba y me retraía de utilizarlos era la cuestión de las imágenes de los cuatro extremos. No me convencía.

Según leí, el nivel 3 de CSS podrá implementar esta función con un selector llamado border-radius (+ info), pero hasta que esté totalmente desarrollado y los navegadores se entiendan con él, no hay nada que hacer.

Sin embargo, se pueden “fabricar” bordes redondeados para navegadores de la familia mozilla sin utilizar imágenes, lo cual es sumamente atractivo si tenemos en cuenta que cada vez más usuarios entierran el autolimitado Internet Explorer para pasar al mondo gecko.

Hace tiempo que lo ví pero no acababa de funcionar (por mi culpa) y es que se me olvidó añadir un guión al principio del selector. Entre tonto y cagaprisas, lo dejé estar.

El código de mis blockquotes es este:

        margin: 20px;
        border-left: 5px solid #E7E7E5;
        border-top: 1px solid #E7E7E5;
        border-right: 1px solid #E7E7E5;
        border-bottom: 1px solid #E7E7E5;
        -moz-border-radius: 15px 0 15px 0;
        padding: 10px;

Si en las cajas y cuadros los valores se escriben en el sentido de las agujas del reloj empezando por arriba, con los bordes de las esquinas funciona en el mismo sentido y empezando por el ángulo superior izquierdo.

• Así queda en firefox (con redoncheles)
• Así queda en Iexplorer (sin redoncheles)

PD. Por cierto, si alguien vé algún texto más grande o más pequeño de lo que cabría desear, que avise, por favor, que estoy toqueteando el css , las fuentes y tal y cual.

Kill Comic Sans

18:58 — 4 Comentarios

Es antiestética, nos pone nerviosos y despierta instintos asesinos (fuente: estudios propios). Estoy hablando de la tipografía Comic Sans de Microsoft. El otro día recomendábamos unirse a la causa, pero hoy vamos a ir más allá; eliminaremos el problema de raíz.

En firefox uno puede crear ciertas reglas CSS que convivirán con el CSS de las páginas que estemos visitando, pudiendo incluso indicar cuál prevalecerá sibre la otra. Veamos como:

1. Creamos un archivo llamado userContent.css con un editor CSS o un editor de texto plano.
2. Escribimos lo siguiente: font[face*="comic sans"] {font-family: Verdana !important;} (nota: el !important, como habrán deducido los más espabilados, es muy importante ya que indica que nuestra regla prevalecerá sobre las de la web. De no indicarlo, esta regla concreta no sirve para nada).
3. Guardamos este archivo en la carpeta chrome dentro del nuestro perfil de usuario (supongo que en el default también funcionará).

El perfil de usuario se encuentra en OSX en:

Usuarios/tuusuario/Librería/Application Support/Firefox/Profiles/tuperfil/

Ahí es donde está la carpeta “chrome”

En Güindons supongo que será algo como:

Archivos de programa/Mozilla-firefox/defaults/profile

o algo asín.

Para realizar la prueba final, visitamos esta horrible página y si sólo vemos los títulos naranjas en comic sans, lo hemos conseguido.

Así de bonita se ve la vida sin Comic Sans:

Hay un Kubrick en mi sopa

3:51 — 4 Comentarios

Una sensación de Déjà Vu me acompaña últimamente al visitar nuevos blogs. ¿Hay vida más allá de la combinación kubrick + wordpress? ¿Dan algo por usarlos juntos? ¿Se ha quedado mi navegador atascado?

Si no fuese tan vago aplicaría esos maravillosos conocimientos de estadística que el primo de Gila me enseña en la Universidad para comprobar mi teoría de que el Kubrick+wp son más populares que el dichoso iPod. Si no fuese tan vago.

W3C en tu ciudad

9:19 — 2 Comentarios

La oficina española de la W3c va a realizar la “Gira Estándares 2003″ por ocho ciudades españolas.

En las conferencias se tratarán temas técnicos y legales, y se dará a conocer el funcionamiento de la W3C española. También habrá un autobús habilitado para demostraciones y mandangas varias.

A Zaragoza llega el día 8, al CPS, así que mañicos, oscenos y aquellos que estéis cerca, no os lo perdáis. Casi con toda seguridad, no podré ir, pero me parece un acto interesante y espero que se repita.

Automatic rotator

4:59 — 2 Comentarios

Para pasar una noche más de insomnio, me he dedicado a instalar el Automatic Rotator de automaticlabs.com, por lo que también he tenido que hacer algunos titulillos.

Como uno no es un as del diseño, he hecho unos siete (de dudoso gusto, lo sé) y he probado el invento. Funciona incluso dentro del CSS.

titulo {background url(http://elsitio/carpetaimagenes/rotator.php)}

Tan simple como poner el script y las imágenes en la misma carpeta, y a correr.