Humor con CSS

(1 comentario)

Si os digo que el CSS puede ser divertido, quizás os evoque un novedoso método para dejar de fumar sin esfuerzo. Pero esta vez es cierto: Saijo George recopila en su web algunas bromas con CSS de lo más ingeniosas que puede servirte pera echar unas risas y también para aprender un poco de CSS. Estas son algunas de las mejores.

Humor con CSS: El Titanic no flota

[Pulsa para continuar]

Degradados con CSS

(43 comentarios)

Aunque se trata de una característica experimental, sujeta a posibles cambios en el futuro, los navegadores más populares del mercado ya permiten hoy en día, en sus últimas versiones, la creación de fondos con degradados o gradientes sin necesidad de usar imágenes, utilizando exclusivamente CSS. Esto, cómo no, a excepción de Internet Explorer, con el que tenemos que usar su peculiar sistema de filtros.

Los desarrolladores del motor de renderizado que utilizan Safari y Google Chrome, Webkit, fueron los primeros en sugerir la creación de degradados utilizando CSS, a principios de 2008. Su implementación, disponible para Safari 4 y superiores y Google Chrome 1 y superiores, soportaba degradados lineales y radiales utilizando las sintaxis:

[Pulsa para continuar]

Tutorial rápido de CSS

(39 comentarios)

Siguiendo con la temática del desarrollo web, esta vez os traigo un pequeño tutorial de CSS, en el que intentaré explicar las bases del lenguaje. Para seguir este tutorial necesitarás conocimientos básicos de HTML por lo que, si no lo has hecho ya, te recomiendo leer mi Tutorial de HTML / XHTML

CSS, de Cascading Style Sheets (hojas de estilo en cascada), es un lenguaje que se utiliza para definir el aspecto que tendrán los documentos HTML o XHTML en pantalla.

[Pulsa para continuar]

El tamaño sí importa

(17 comentarios)

El tamaño es muy importante, al menos a la hora de crear una página web: cuantos menos ocupen los archivos que componen nuestra web, menos tiempo tardará en descargarlos el usuario y menos ancho de banda consumiremos. Veamos algunos métodos para ahorrar algunos kilobytes en nuestras imágenes, hojas de estilo o scripts.

[Pulsa para continuar]

Nuevo Firefox 3.6: ¿el mejor navegador del mercado?

(85 comentarios)

Firefox 3.6

Ayuda -> Buscar actualizaciones, señores. ¿Novedades? Unas cuantas. Y MUY interesantes:

  • Personas: una característica de la que ya podíamos disfrutar anteriormente en forma de extensión y que permite personalizar aún más el aspecto del navegador.
  • Herramienta para el autocompletado de formularios
  • Mayor soporte de HTML 5 y CSS 3 lo que a efectos prácticos nos trae, entre otras cosas, vídeo nativo en pantalla completa o gradientes con CSS
  • Mejoras de rendimiento. Un 20% más rápido que Firefox 3.5.
  • Herramienta de actualización de plugins
  • Mejoras en el rendimiento de JavaScript
  • Mejoras en la estabilidad
  • Mejoras en el tiempo de arranque

Y tú, ¿piensas usar Firefox 3.6 como navegador principal? ¿o crees que existen alternativas mejores?

Cómo transformar los feeds en formatos legibles para el usuario

(16 comentarios)

Este es uno de los puntos menos amigables para el usuario que se pueden encontrar en una web. Cuando un usuario no sabe qué es un feed, ver código XML al abrir un archivo puede resultar muy desconcertante.

Por eso es obligatorio transformar el feed en una salida que muestre información sobre qué es ese archivo y cómo utilizarlo. Feedburner ofrece este servicio, pero estamos limitados a las salidas que ellos nos proponen. Nosotros vamos a ver cómo utilizar XSLT y CSS para crear el documento que queramos. Podéis ver un ejemplo en el feed RSS2 de Mundo geek.

XSLT (eXtensible Stylesheet Language Transformations) es un lenguaje de la W3C que permite transformar documentos XML en otros formatos, por ejemplo HTML. XSLT funciona a base de plantillas, de la forma:

<xsl:template match="foo">
R1
R2
R3...
</xsl:template>

Las reglas R1-R3 se aplican cuando en el documento XML original se encuentre una etiqueta foo. Estas reglas podrían ser, por ejemplo, mostrar un cierto texto, el contenido de la etiqueta, uno de sus atributos, aplicar otra plantilla, etc. Podéis ver un ejemplo en el documento XSLT que he utilizado para transformar el feed RSS2.

Para asociar un documento XML a un documento XSL, y que por lo tanto se muestre la salida especificada con XSLT al abrir el XML, tenemos que añadir una línea indicando dónde encontrar el XSL asociado:

<?xml-stylesheet href="xslt-rss2.xsl" type="text/xsl"?>

En el caso de WordPress abrimos el archivo wp-rss2.php y añadimos la línea:

<?php echo '<?xml-stylesheet href="xslt-rss2.xsl" type="text/xsl"?>'; ?>

después de

<?php echo '<?xml version="1.0" encoding="'.get_settings('blog_charset').'"?'.'>'; ?>

De esta forma hemos indicado que cuando se abra el feed RSS2 de la web se apliquen las transformaciones de xslt-rss2.xsl que se encuentra en el mismo directorio que wp-rss2.php. No tiene ningún misterio.

Podeis utilizar mi archivo XSL o bien modificarlo para que se ajuste a vuestras necesidades, la mayor parte de él es simple código HTML. Simplemente descargarlo y subirlo al directorio en el que se encuentre el feed (el directorio raíz en WordPress). Lo que si deberíais tener en cuenta es que en el XSL, al crear el documento HTML, se incluye una hoja de estilo CSS en la línea 13:

<link rel="stylesheet" type="text/css" href="/wp-content/themes/fscreenmg/style.css" />

Modificadlo para que apunte a la hoja de estilo que queráis utilizar y voilà!.