Archivos Mensuales: septiembre 2005

“Zebreado” con CSS

Había visto antes varias soluciones para mostrar código fuente “zebreado” (alternando el color de fondo en cada linea) en las webs, pero ninguna me convencía del todo, más que nada porque se hacía uso de demasiado codigo HTML, usando, por ejemplo, diferentes clases CSS en cada linea de una tabla o en los elementos de una lista.
Así que se me ocurrió intentar conseguir lo mismo utlizando solo CSS, y aquí teneis el resultado.

Para utilizar este método, teneis que seguir los siguientes pasos:

  1. Crear una imagen de 1px de ancho y 32px (el doble de la altura de linea). Los 16px superiores los rellenareis de un color y los 16px inferiores de otro. (La que yo uso es esta: bg-code.png)
  2. (Re)Establecer los atributos CSS de la etiqueta <code> de la siguiente manera:
    code {
      display: block;
      white-space: pre;
      font-family: "Courier New", Courier, mono;
      font-size: 11px;
      line-height: 16px;
      background-image: url(bg-code.png);
      padding-left: 4px;
      overflow: auto;
    }
  3. Cada vez que vayais a poner algún codigo fuente en vuestra web, solo tendreis que englobarlo entre las etiquetas <code> y </code>

Si bien esa es la solución más semánticamente correcta ya que utiliza la etiqueta <code>, en muchos CMS (p.ej. WordPress) tendremos problemas con la misma, debido a que cuando escribimos algo los saltos de linea de texto (n) son automáticamente transformados en saltos de linea HTML (<br />)..
La solución (en WordPress) pasa por utilizar la etiqueta <pre> en vez de <code>, y crear una clase CSS asociada, que usaremos para presentar código fuente por pantalla, de forma que quedaría así:

pre.code {
  display: block;
  white-space: pre;
  font-family: "Courier New", Courier, mono;
  font-size: 11px;
  line-height: 16px;
  background-image: url(bg-code.png);
  padding-left: 4px;
  overflow: auto;
}

Comentar aparte, que si quereis cambiar la altura de linea (line-height), lógicamente tendreis que modificar también la imagen de fondo estableciendo el alto al doble del la altura de linea. Por ejemplo, para un line-height: 14px;, creareis una imagen de 28px de alto.

Anuncios

Irlanda – Killarney – Catedral de Santa María

Esta catedral de estilo neogótico diseñada por Augustus Pugin se empezó a construir en 1842. Durante la hambruna irlandesa (1845 a 1849) se uso como hospital y refugio para los necesitados. En 1855 fue consagrada y dedicada a la Asunción de la Virgen María por el Dr. Moriarty.

Exterior de la Catedral de Santa María

Interior de la Catedral de Santa María

Cuenta con unas esplendidas vidrieras que relatan pasajes de la Biblia así como la vida de algunos santos irlandeses.

Vidrieras de la Catedral de Santa María

Podeis encontrar más fotos de la Catedral de Santa María aquí.

Irlanda – Killarney – De excursión

Sábado, 7 de Mayo de 2005
Por la tarde nos fuimos de excursión por el Parque Nacional de Killarney.
Nuestra primera parada fue en la Muckross House[GP:Muckross House], una mansión de estilo tudor construida en 1843.

Muckross House

El lago desde Muckross House

(Panorámica de 360º desde Mucross House. Pulsa en la imagen para descargar el archivo. Requiere el reproductor Apple Quicktime con el plugin QTVR para su correcta visualización)

Luego nos dirigimos hacia las montañas para visitar las famosas cataratas:

Cascada - 03

Por último, realizamos una ascensión (no completa) a una de las montañas más altas del parque, desde donde pudimos disfrutar de unas vistas increibles:

Paisaje - 03

(Panorámica desde la montaña. Pulsa en la imagen para descargar el archivo)

El lago desde la montaña - 03

(Panorámica desde la montaña. Pulsa en la imagen para descargar el archivo)

Podeis encontrar más fotos del Parque Nacional de Killarney y Muckross House aquí.