|

Sanscons, iconos modificables mediante CSS

ByLuis

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

Similar Posts

|

30 ‘chuletas’ para desarrolladores

ByLuis

Aunque ahora estamos acostumbrados a buscar directamente en Google cuando tenemos una duda, se suele tardar mucho menos, nunca viene mal tener una “chuleta” con lo que solemos utilizar. Una lista bastante amplia y útil, aunque algunas no son de las “bonitas” que ocupan un folio y alguna que otra es de pago:

  • Desarrollo web (JavaScript, CSS, códigos hexadecimales, HTML, XHTML, entidades HTML)
  • Bases de datos (MySQL, Oracle, SQL)
  • Lenguajes (PHP, Ruby, expresiones regulares, JSP, Java)
  • Control de versiones (CVS)
  • Otras (Google, Windows, Unix, Vi, mod_rewrite, códigos de caracteres ASCII, htaccess)

Cheat Sheet Roundup – Over 30 Cheatsheets for developers

Vía / Menéame

| |

Enlaza tu email sin miedo al spam

ByLuis

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>
|

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

ByLuis

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>
| |

Protege tus imágenes con Apache

ByLuis

Una de las cosas más molestas con las que te puedes encontrar al mantener un sitio, es ver cómo tus imágenes estan siendo utilizadas en otros sitios que las enlazan directamente a tu servidor, esto es molesto por dos motivos, evidentemente el uso de material gráfico de tu propiedad sin tu consentimiento, y la carga extra que sufre la conexión de tu página.
Para los que usamos Apache existe una fácil solución combinándolo con mod_rewrite, el método se basa en crear un fichero .htaccess que contenga una serie de reglas, que literalmente le indicarán al servidor que las imágenes solo se mostrarán si la petición viene del dominio propio.
Las reglas a añadir son las siguientes. Solo tendrás que sustituir el texto example.com por el nombre de tu dominio:

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?example.com/?.*$ [NC]
RewriteRule \.(gif|jpg|jpeg|png|mp3|mpg|avi|mov)$ - [F,NC]
|

Ben Goodger explica el uso elevado de memoria en Firefox 1.5

ByLuis

Ben Goodger, el jefe de desarrolladores de Firefox, explica el uso de memoria en Firefox. Comenta que la gente confunde entre el uso de memoria y las pérdidas de memoria. En el caso de Firefox 1.5 se trata de uso elevado de memoria, ya que almacena en caché las páginas que se visitan para un mejor funcionamiento del historial de navegación.

El uso excesivo de memoria se puede solucionar cambiando el valor de la propiedad browser.sessionhistory.max_total_viewers a 8, para ello escribe about:config en la caja de navegación de Firefox, busca la propiedad y cambia el valor.

About the Firefox “memory leak”

Vía / mozillaZine

| |

Usar la API de Google para obtener bordes redondeados

ByLuis

Para aquellos que necesiten crear gráficos con bordes redondeados y no sepan de editores gráficos, la API de Google roundedcorners le puede venir muy bien para obtener las imágenes necesarias.
roundedcorners.png
Tan solo es necesario llamar a un URL para obtener la imagen. Teniendo en cuenta que el parámetro c de la url indica el color de la esquina (RGB o RRGGBB), bc el color de fondo, h la altura, w el ancho y a el tipo de esquina que debe generar (tl para arriba a la izquierda, tr para arriba a la derecha, bl para abajo a la izquierda, br para abajo a la derecha).
Google’s own cornershop
Vía / Ajaxian