Posts Tagged ‘tips’

Comandos de Linux: Conocer el espacio libre y ocupado en disco

// Enero 19th, 2006 // Comments // AC Log

A petición de Varis, pongo la descripción de un par de comandos de Linux que sirven para conocer cuanto espacio libre u ocupado tenemos en el disco duro:

  • df: Muestra el espacio libre del disco
  • du -u fichero1 … ficheroN: Muestra el total que ocupan los ficheros
  • du -s directorio: Muestra el espacio que ocupa el directorio

Si a estos comandos le añadimos además el parámetro “-h“, las cantidades saldrán en un formato de facil lectura (gigabyte, megabyte, etc.) teniendo en cuenta la cifra.

Si quereis conocer más comandos útiles para Linux, podeis pasaros por “Comandos de Linux con ejemplos“.

“Zebreado” con CSS

// Septiembre 20th, 2005 // Comments // AC Log

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.

Trabajar en casa

// Julio 31st, 2005 // Comments // AC Log

Si eres de los que tiene la suerte de trabajar en casa como yo, o piensas hacerlo pronto, quizás te vengan bien estos consejos de como trabajar en casa y no morir en el intento. Yo creo que se pueden resumir en dos palabras: disciplina y organización.