Sobre el uso de los sprites

JMiur [E]

¿Será más rápido cargar una imagen grande o varias imágenes pequeñas?

No es una pregunta retórica, durante mucho tiempo, siempre se ha creido lo segundo y de hecho, la técnica del slice, partir una imagen en pedazos y cargar cada parte por separado, es algo que incluso poseen varios editores de imágenes como Photoshop o Fireworks.

Sin embargo, de un tiempo a esta parte, la idea ha ido cambiando y en estos momentos, hay una tendencia a lo contrario, al uso de los llamados sprites, es decir combinar varias imágenes en un solo archivo y luego, utilizar CSS para mostrarlas (más información)

¿Cómo hacemos esto? Es simple, sólo necesitamos un poco de aritmética.

Por ejemplo, supongamos que tengo tres íconos de 16x16 que quiero mostrar como enlaces y cada uno de ellos, tiene un efecto hover; necesitaría seis imágenes individuales. Las combino con un editor, poniendo una al lado de la otra y creo una sola imagen que tendrá 48x32:


En la fila superior tengo los tres íconos en estado "normal" (los que veré por defecto) y abajo los tres que mostraré cuando pase el mouse sobre ellos.

La propiedad background nos permite colocar una imagen de fondo y posicionarla, es decir, que si dimensionamos algo, podemos agregarle un fondo de mayor tamaño y  sólo mostrar una parte de esa imagen. Creamos unas clases CSS para que se vea el ejemplo:
/* las propiedades generales */
a.iconos {
  background:transparent url(URL_IMAGEN) no-repeat 0px 0px;
  display: block;
  height: 16px;
  width: 16px;
}

/* las propiedades de cada uno de los íconos */
a.icono1 {background-position: 0px 0px;}
a.icono2 {background-position: -16px 0px;} /* desplazamos la imagen 16 pixeles a la izquierda */
a.icono3 {background-position: -32px 0px;} /* desplazamos la imagen 32 pixeles a la izquierda */

/* las propiedades de los íconos con efecto hover */
/* de manera similar, desplazamos la imagen a la izquierda y 16 pixeles hacia arriba */
a.icono1:hover {background-position: 0px -16px;}
a.icono2:hover {background-position: -16px -16px;}
a.icono3:hover {background-position: -32px -16px;}


Lo mismo podemos hacer inline, escribiendo el estilo en la etiqueta HTML. Ene ste ejemplo usamos una imagen de 96x170 pixeles donde se combinan dos, una debajo de la otra:

En este ejemplo, usamos dos imágenes de 96x85 combinadas:
<div 
  style="background: transparent url(URL_IMAGEN) no-repeat 0px 0px; cursor:pointer; height: 85px; margin: 0 auto; width: 96px;"
  onmouseover="this.style.backgroundPosition='0px -85px';"
  onmouseout="this.style.backgroundPosition='0px 0px';"
></div>


La posición se define en pixeles, primero la coordenada horizontal y luego la coordenada vertical. La posición 0px 0px es la esquina superior izquierda, y el desplazamiento lo calculamos sumando los anchos y/o los altos de cada parte y colocándo ese valor como un número negativo.

¿Cuál es la ventaja? Fundamentalmente, cuando se trata de íconos con efectos hover, evitamos la demora que se produce cuando se carga la segunda imagen; al ser una sola, siempre está disponible y eso agiliza la visualizacion de las páginas.

Obviamente, no es algo para aplicar en cualquier caso y siempre hay que tener en cuenta que el tamaño de las imágenes es un detalle a tener muy en cuenta cuando se trata de velocidades de carga pero, es un método efectivo y muy recomendable.

5 comentarios | Backlinks ir arriba

El widget traductor de Bing

Microsoft Translator es el servicio de traducción de Bing. Allí, podemos encontrarnos con algunas herramientas que podemos agregar a nuestros sitios.

La más simple es una lista desplegable que nos lleva a la página principal del traductor:


Pero, más interesante, es el widget que podemos incorporar y que realizará traducciones en tiempo real sin salir de nuestro sitio.



Entramos en la página, escribimos la dirección URL de nuestro sitio, el lenguaje base; seleccionamos el ancho y los colores; aceptamos las condiciones y se generá el código que deberemos copiar y pegar donde querramos mostrarlo, por ejemplo, en un elemento HTML:

REFERENCIAS:Pizcos Blog

FontEffect: Efectos en textos con jQuery

FontEffect es un script para JQuery que permite crear textos con cuatro efectos gráficos diferente que a su vez, pueden combinarse entre si.

Agregamos la librería antes de </head>:
<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.3.2");
</script>
Y luego el script en si mismo, ya sea alojándolo en un servidor:
<script type='text/javascript' src='URL_jquery-FontEffect-1.0.0.min.js' />
o copiando y pegando su contenido:
<script type='text/javascript'>
//<![CDATA[
  ... aquí pegamos el contenido del archivo ...
//]]>
</script>
Los efectos se crean de manera individual, indicando el ID de la etiqueta o de manera más general, usando clases.

Por ejemplo:
<div id="miEfecto" style="color:#000; font-family: Impact; font-size: 60px;"> Efecto Outline</div>
<script> $('#miEfecto').FontEffect({ outline:true }) </script>
Todos se contruyen igual, una etiqueta con un estilo personal y luego la llamada a la función:
<script> $('#nombreID').FontEffect({ ....... el efecto ....... }) </script>


Algunos ejemplos:
Sombras
<script>$('#miEfecto').FontEffect({ shadow:true })</script>

Gradiente
<script>$('#miEfecto').FontEffect({ gradient:true, gradientColor:'#FFF' })</script>

Mirror
<script>$('#miEfecto').FontEffect({ mirror:true,mirrorColor:'#f3f2f2',mirrorTLength:80,mirrorTSTart:.8  })</script>

Outilne + Sombras
<script>$('#miEfecto').FontEffect({ outline:true, shadow:true })</script>

Gradiente + Mirror
<script>$('#miEfecto').FontEffect({ gradient:true, mirror:true, mirrorColor:'#00FFFF',mirrorTLength:80,mirrorTSTart:.8 })</script>

Varios efectos combinados
<script>$('#miEfecto').FontEffect({ outline:true, outlineColor1:'#fc0', outlineColor2:'#f00', gradient:true, gradientColor:'#f00', gradientPosition:10, gradientLength:60, gradientSteps:10 })</script>
Del mismo modo, puede crearse una clase CSS y usarla varias veces; por ejemplo, podemos definir una para los encabezados H2:
<h2 class='miClase'> un texto  </h2>
<h2 class='miClase'> otro texto  </h2>
.......
<script>$('.miClase').FontEffect({ shadow:true })
Estos son los parámetros que pueden usarse:

outline: true activa el efecto
outlineColor1:"#rrggbb" color del ángulo superior izquierdo
outlineColor2:"#rrggbb" color del ángulo inferior derecho
outlineWeight :1|2|3 indica light | normal |bold (por defecto es 1)

mirror: true activa el efecto
mirrorColor:"#rrggbb" color del reflejo
mirrorOffset:valor distancia al texto (por defecto es -10)
mirrorHeight:valor porcentaje altura del reflejo (por defecto es 50)
mirrorDetail:1|2|3 indica el detalle high | medium | low (por defecto es 1)
mirrorTLength:valor porcentaje de esfumado (por defecto es 50)
mirrorTStart:0/1 opacidad inicial (por defecto es 0.2)

shadow: true activa el efecto
shadowColor:"#rrggbb" color de la sombra
shadowOffsetTop:valor posición superior en pixeles (por defecto es 5)
shadowOffsetLeft:valor posición inferior en pixeles (por defecto es 5)
shadowBlur:1|2|3 indica el esfumado none | low | high (por defecto es 1)
shadowOpacity:valor opacidad de la sombra (por defecto es 0.1)

gradient: true activa el efecto
gradientColor:"#rrggbb" color del gradiente
gradientPosition:valor porcentaje posición inicial (por defecto es 20)
gradientLength:valor porcentaje gradiente (por defecto es 50)
gradientSteps:valor variación (por defecto es 20)

REFERENCIAS:jQuery Gallery

Las vocales

Un lipograma es un texto en que, adrede, se evita utilizar alguna letra.



Oscar de la Borbolla es un escritor mexicano, profesor de metafísica y, su libro Las vocales malditas (1991), está considerado como uno de los más extraordinarios de la lengua española justamente por tener esa particularidad, cada uno de sus cinco cuentos está escrito exclusivamente con palabras que emplean la misma vocal.

Recientemente, la agencia publicitaria Ogilvy ha iniciado una campaña con uno de ellos.


ACantata a Satanás [+]



EEl hereje rebelde [+]



IMimí sin bikini [+]



OLos locos somos otro cosmos [+]



UUn gurú vudú [+]

Huje Tower

Click en la imagen para jugar.

El elemento Header (4)

Para terminar con esta serie de posibilidades del header, un script de Dynamic Drive llamado Neon Lights Text y que podemos aplicar a cualquier texto como este:


Para usarlo en el header vamos a expandir los artilugios y buscar esto:
<b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
Lo reemplazaremos por esto:
<b:includable id='title'>
<script type='text/javascript'>
//<![CDATA[

//Neon Lights Text II by http://www.dynamicdrive.com/dynamicindex10/neontext2.htm
var message = "el texto que queremos usar ";
var neonbasecolor = "#FFFFFF"; 
var neontextcolor = "#00FFDD";
var neontextcolor2 = "#DDFF00";
var flashspeed = 150; // velocidad en milisegundos
var flashingletters = 1; // cantidad letras del efecto neontextcolor
var flashingletters2 = 1; // cantidad letras del efecto neontextcolor2
var flashpause = 1; // pausa entre ciclos

var n=0;
if (document.all||document.getElementById){
  document.write('<font color="'+neonbasecolor+'">');
  for (m=0;m<message.length;m++)
    document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>');
  document.write('</font>');
}
else
  document.write(message);

function crossref(number){
  var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number);
  return crossobj;
}
function neon(){
  if (n==0){
    for (m=0;m<message.length;m++)
      crossref(m).style.color=neonbasecolor;
  }
  crossref(n).style.color=neontextcolor;
  if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2 
  if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor;
  if (n<message.length-1)
    n++;
  else{
    n=0;
    clearInterval(flashing);
    setTimeout("beginneon()",flashpause);
    return;
  }
}
function beginneon(){
  if (document.all||document.getElementById)
    flashing=setInterval("neon()",flashspeed);
}
beginneon();
//]]>
</script>
</b:includable>
El ejemplo online puede verse aquí.

|

Suscribirse a la entradas