Modifica dónde guardar los marcadores de Firefox

firefox.pngHoy me he encontrado con que apagué mal el ordenador ayer, y cuando he ido a poner el Firefox… [tachaaan]… no tenía los marcadores. ¡Socorro!, todos los feeds que tengo con el Sage perdidos. Aunque he podido recuperarlos, y aún no sé cómo, lo que sí he querido hacer es guardar los marcadores en otro directorio, en el cual se hacen copias de seguridad.

El método es sencillo:

  • Cierra Firefox
  • Copia o mueve el archivo bookmarks.html y el bookmarks.bak que se hayan en el profile en el directorio nuevo
  • Escribe about:config en la barra de dirección de Firefox
  • Haz click con el botón derecho del ratón, pulsa en Nuevo->Cadena
  • Escribe como nombre de la preferencia: browser.bookmarks.file
  • Escribe el path completo del archivo bookmarks.html (incluido el nombre del archivo)

Listo, ya tenemos cambiada la localización de los marcadores.

Customize the Firefox Bookmarks location

Funciones anónimas y autoejecutables en javascript

¿Sabías que en javascript una función puede contener a otras? Pues ahora ya lo sabes. Fíjate en el siguiente código:
function barrioSesamo() {
function epi() {
alert(‘hola Blas’);
}
function blas() {
alert(‘hola Epi’);
}
epi();
blas();
}
barrioSesamo();
// el navegador nos presentará un par
// de alertas, a saber, “hola Blas” y
// “hola Epi”
Nada impresionante, por el momento. Lo interesante del asunto es que, al definir la función `epi` dentro de la función `barrioSesamo`, el ámbito de la misma (scope) queda limitado, de manera que solo podemos llamar a `epi` desde su propio barrio.
Vale, sigo sin impresionarte.

Continue reading

Convierte tus scripts de Greasemonkey en extensiones

Para aquellos que les gusten los scripts de Greasemonkey, o para aquellos que no tengan instalado Greasemonkey, pero que les guste alguna funcionalidad, ahora hay un script que te crea una extensión para Firefox con el script de Greasemonkey.
Claro, que si eres de los que usas varios scripts en Greasemonkey, no creo que este script sea para ti, porque no es plan de tener muchas extensiones, una para cada script, cuando las puedes gestionar con una sola extensión, supongo que sería más eficiente.
Vía / Lifehacker

Traducción del botón de FeedBurner al español

boton-feedburner-castellano.gif Hasta Sentido Web, como primera nano que lanzamos en castellano, no habíamos puesto atención a la necesidad de traducir el readers de los botones de FeedBurner que muestran el número de suscriptores.

Como no hay ninguna referencia “oficial” (aviso de Jordi), y previa consulta a Juan Luis (representante de FeedBurner en España), ahí va el truco que varios sitios ya aplican…

Solo tienes que añadir en el código del botón justo después de animo=0″ si tú botón es el estático o anim=1″ si tienes el animado y asegurándote de borrar la comilla al lado del 0 o del 1 ya que la pondremos luego: &label=lectores". El lectores lo puedes sustituir por un texto de 8 caracteres para respetar el tamaño del botón. Para nosotros, el ideal sería suscriptores pero sale cortado.

El código de nuestro botón:

<a href="http://feeds.feedburner.com/sentidoweb"><img src="http://feeds.feedburner.com/~fc/sentidoweb?bg=008585&fg=ffffff&anim=0&label=lectores" height="26" width="88" border="0" alt="Feed de Sentido Web" /></a>

CSS: Mnemotecnia y shorthand

Seguimos organizando las hojas de estilo.
La [mnemotecnia][] (o nemotecnia) es un proceso de asociación mental destinado a facilitar el recuerdo de algo. Ese algo puede ser, por ejemplo, el orden de declaración de las reglas de presentación para los enlaces (link no visitado, visitado, etc.). Para recodar el orden nos servirán los términos en inglés (mayúsculas especialmente) LoVe HAte.
### LoVe HAte
Es conveniente recordar que el orden correcto de las declaraciones es este y no otro:
a:link { /* Love hate */
}
a:visited { /* loVe hate */
}
a:hover { /* love Hate */
}
a:active { /* love hAte */
}
### TRouBLe
Algunas propiedades CSS se pueden definir en forma taquigráfica (shorthand).
Por ejemplo, para definir los márgenes de un elemento podemos usar `margin-top: 0; margin-right: 1em; margin-bottom: 1em; margin-left: 1em` o, para ahorrar teclas y bytes, usar la versión corta:
#unSelector {
margin: 0 1em 1em 1em;
}
El orden de los valores es el siguiente: arriba, derecha, abajo, izquierda. Esto es, empezamos a asignar valores en sentido de las agujas del reloj (de las doce de la mañana y acabamos a las nueve de la noche). Mnemotécnicamente sería, TRouBLe (top, right, bottom, left).
Estas versiones abreviadas pueden llevar, atención, uno, dos, tres o cuatro valores, ahí es _ná_. Veamos:
#unSelector {
margin: 0;
/* margen 0 por los cuatro costados */
}
#unSelector {
margin: 0 1em;
/* márgenes superior e inferior a cero,
márgenes izquierdo y derecho de 1em */
}
#unSelector {
margin: 0 1em 2em;
/* huy, este tiene truco: margen superior, cero;
margen derecho, 1em; margen inferior, 2em.
¿Y el izquierdo? en caso de tener
tres valores, se toma el segundo, esto es el
valor es el mismo para los dos laterales */
}
#unSelector {
margin: 0 1em 2em 1em;
/* TRouBLe, como ya hemos comentado */
}
Claro está que lo dicho para los márgenes también es aplicable a `padding`, `border-width`, `border-style`, `border-color` y seguramente a alguna propiedad más que ahora mismo (¡café!) no está en mi cabeza.
Más sobre [Memoria y reglas nemotécnicas][m].
[mnemotecnia]: http://buscon.rae.es/draeI/SrvltGUIBusUsual?LEMA=mnemotecnia&TIPO_HTML=2&FORMATO=ampliado&sourceid=mozilla-search “Definición en el diccionario de la Real Academia Española”
[m]: http://www.weblioteca.com.ar/textos/mente/memoriaynemotecnia.htm

Enlaza tu email sin miedo al spam

El spam ha condicionado muchas prácticas que originariamente eran tan sencillas y poderosas como enlazar tu mail en la web.

Un truqui para evitarlo que en su día lo descubrimos en 604th.net:

function nospam(name,domain){
window.location = 'mailto:' + name + '@' + domain;
}

Cópialo tal cual sin cambiar nada y súbelo como emailnospam.js. Recomendamos subirlo a una carpeta en la que guardes los javascripts como por ejemplo la carpeta js. Si no te apetece crearla, súbelo a la raíz de tu ftp.

Luego añade lo siguiente entre la línea <head> y </head> de los documentos de tu web:

<script type="text/javascript"  src="/js/emailnospam.js"></script> 

Si lo has subido a la raíz elimina la ruta a la carpeta “js”. Quedaría así:

<script type="text/javascript" src="/emailnospam.js"></script> 

Ya solo queda que escribas tu mail enlazado en la parte de la web que quieras sustituyendo la palabra ejemplo y dominio.com por lo que corresponda a tu cuenta de email:

<a href="javascript:nospam('ejemplo','dominio.com');">Contáctame</a>

Consejos para organizar tus CSS

Muchas veces cuando estamos diseñando nuestras páginas web, nos encontramos con que vamos añadiendo estilos a nuestras CSS, por lo que al final tenemos un CSS bastante desorganizado y caótico. Aquí os dejo unos pocos consejos para tener unas CSS limpias y organizadas.

  • Agrupa los estilos: júntalos por categorías (cabecera, tipografía, …) y sepáralos mediante comentarios.
  • Elige correctamente las categorías
  • Importa otras hojas de estilo
  • Usa tabulación y saltos de línea
  • Usa selectores para descendientes…

Squeaky Clean CSS

Vía / Caótico Neutral

Múltiples LiveCD de Linux en un DVD

nautopia.jpgLa gran cantidad de LiveCD de Linux, sobre todo aquellas enfocadas a distintas actividades, hace que los amantes de Linux tengan varios CDs con distintas versiones. Por ello Nautopia.net ha creado un script que instala todas estas versiones en un único DVD. Por ahora admite las siguientes distribuciones: Knoppix, Kanotix, Kurumin, Livux, MEPIS, ProMEPIS, Slax, Aurox, BerryLinux, Basilisk, Adios, PCLinuxOS, MandrakeMove, Gnoppix, RiP, SystemRescueCD, Ultimate Boot CD, …

Una ayuda para los amantes de Linux y para aquellos que lo desconozcan.

Más información

Nautopia

Linux.com

Vía / Digg

Cómo extraer colores fuera del Photoshop

eyedropper.jpg ¿Cuántos minutos trabajas al día con Photoshop y te has visto en la situación de querer saber un color de otra web y tener que usar el Colorzilla de Firefox o directamente imprimir pantalla, pegarla en Photoshop y usar el eyedropper.?
Pues Photoshop, en cualquier versión, ya trae la opción y es el mismo Eyedropper (el icono del cuentagotas). Tan solo hay que clickarlo y dejarlo pulsado arrastrando el cursor hasta donde queremos obtener el color. Cuando lo tengamos, soltamos el click y aparecerá el color como color de primer plano.
Vía / Genbeta

Sanscons, iconos modificables mediante CSS

Una colección interesante de iconos que cambian de color mediante CSS, a parte de la colección, es interesante aprenderse el método y usarlo para tus propios diseños.

Sanscons.png

El método es sencillo, crear una imagen con el contenido en un color blanco (para que sea más sencillo ajustarlo con otros colores) y poner el fondo transparente, así, si se cambia el fondo mediante CSS, cambiará el fondo del icono.

 <img class="icon" src="icono.gif" alt="icon"/>
 .icon {
background-color:#f00;
}

Sanscons

Vía / Intenta