Micaela 13 de septiembre de 2009 a las 09.04
   Imprimir artículo
elWebmaster.com

Optimizando la velocidad de tu web con sprites CSS


cssUtilizar im谩genes sprites CSS en tu sitio web es la mejor forma de acelerar el tiempo de carga de las mismas y es tambi茅n, la mejor manera de mantenerse al d铆a con las nuevas pr谩cticas de dise帽o web.

Los sprites CSS disminuyen el tiempo de carga de las im谩genes de tu p谩gina y pueden bajar significativamente el n煤mero de pedidos que tu sitio realiza, lo que puede significar una dr谩stica disminuci贸n del tiempo total de carga de la web.

Si necesitas m谩s motivos para implementar sprites, ten en cuenta que la mayor铆a de los sitios m谩s populares los utilizan: Apple, Amazon, Yahoo… 隆por algo ser谩!

Materiales Necesarios:

Paso 1: Programa cada uno de los estados de las im谩genes del men煤 de navegaci贸n

11

驴Necesitas una barra de navegaci贸n bonita?

Descarga los archivos fuente aqu铆.

En los archivos fuente hay 3 archivos separados para el estado normal de la barra de navegaci贸n, el estado hover/rollover 聽y el estado clickeado.

En el pr贸ximo paso te ense帽aremos c贸mo combinarlos t煤 mismo. Pero igualmente puedes utilizar la imagen combinada de estos 3 estados que se encuentra en los archivos fuente.

Paso 2: Combina las 3 im谩genes de estado de la barra de navegaci贸n en una sola

2

Ahora, tenemos 3 archivos PNG separados para los 3 estados diferentes. Es tiempo de copiarlos/pegarlos junto en una sola imagen, como se mostr贸 arriba.

Consejo personal:

Usualmente, en este paso hago invisible el fondo (en Photoshop) para que s贸lo queden los botones de esta forma:

3

Luego voy a Image > Trim:

4

Selecciono Pixeles Transparentes y controlo todos los lados que hay arreglar:

5

Asi que ahora, tienes una imagen concisa de los botones, nada m谩s.

6

Ahora que hemos recortado correctamente todos los 3 estados, vamos a fusionarlos en 1 imagen.

No hay ninguna manera est谩ndar de hacer esto, puedes estar acostumbrado a tu propia forma de copiar-pegar, pero por el bien del ejemplo, empieza por la apertura del estado normal, a continuaci贸n, pulsa Ctrl o Cmd + A (seleccionar todo) y Ctrl o Cmd + a (copia) al igual que a continuaci贸n:

7

Crea un documento nuevo (CTRL or CMD + n):

8

Pueden ver en el panel del nuevo documento que la altura de una barra de navegaci贸n es de 52. Como nos gustar铆a poner 3 estados en este documento, esto es 52 * 3 = 156. As铆 que vamos a cambiar la altura de este nuevo documento a 156.

9
Luego, pega el estado normal de la barra de navegaci贸n en el nuevo documento.
10
Mu茅velo a la parte superior del documento.
111
Repite este proceso 2 veces m谩s o de acuerdo a la cantidad de estados de barra de navegaci贸n que tengas.

Pegar y alinear el estado hover de la barra de navegaci贸n justo debajo del estado normal.

12
Por 煤ltimo, pegar y ajusta el estado clickeado de la barra de navegaci贸n debajo del estado hover.
13
Si se han sumado los 3 estados correctamente, deber谩n caber en el nuevo documento de 489 x 52 perfectamente justo, as铆:

14

Paso 3: Mide la altura de cada bot贸n

Importante: Toma algo para escribir, ya sea un nuevo archivo de texto en la pantalla o un trozo de papel para este nuevo paso porque tendremos que escribir el ancho y altura para cada bot贸n.

Para determinar f谩cilmente la altura de los botones, podemos mirar hacia atr谩s en la altura de cada barra de navegaci贸n por razones obvias.
Consejo para la medici贸n en Photoshop

Utiliza la herramienta de Regla en Photoshop para medir f谩cilmente las cosas en tu documento.

15

En la pantalla de abajo, la herramienta de regla se utiliza para medir la altura del bot贸n de Inicio.

16

Adem谩s, mueve la barra de navegaci贸n debajo de la barra de navegaci贸n que desea medir un p铆xel hacia abajo para ver sus bordes.

17

Despu茅s de medir la altura de los botones, ahora sabemos que la altura de cada bot贸n es 52px.

Y puesto que todos los botones tienen la misma altura, todos los botones ser谩n de 52px.

Paso 4: Medir el ancho de cada bot贸n

Ahora, medir el ancho de cada bot贸n es un poco m谩s complicado.

Como se mencion贸 anteriormente, el espacio horizontal entre cada uno de los botones de preferencia debe ser uniforme para que al dividir el ancho del rango en 2, uno de los lados no ser谩 m谩s ancho que el otro. Esto es opcional, sin embargo.

Aqu铆, el ancho de la brecha entre cada bot贸n es 16px.

18

Cuando se divide en 2 partes, cada lado de la brecha ser谩 8px.

19
Consejo para mantener las medidas en Photoshop

Aseg煤rate de tener las Reglas activadas (cmd + r) o ir a Ver> Reglas.

A continuaci贸n, haz clic en la regla vertical y arrastra una gu铆a para el punto en el que se desea que el bot贸n finalice.

20

Ahora que sabes cuan ancho ser谩 tu bot贸n de Inicio, vamos a medirlo.

Utiliza la herramienta Regla de nuevo y mide desde el borde izquierdo del bot贸n de Inicio hasta la gu铆a que hemos hecho como se muestra en el 煤ltimo consejo, como este:

21

Puedes ver el ancho en el panel de herramientas Ruler:

22

Repita el mismo proceso para todos los otros 2 botones.

Paso 5: Ancho y altura de cada bot贸n

23

Paso 6: CSS – programando la barra de navegaci贸n

Aqu铆 viene la codificaci贸n.

Primero creemos un DIV para nuestra barra de navegaci贸n en nuestro documento HTML y llam茅moslo “navBarContainer”.

  1. <div id="navBarContainer"></div>

Ahora, d茅mosle estilo al DIV es una hoja de estilos CSS externa.

Linkeando una hoja de estilos CSS externa a un documento HTML

Coloca esta l铆nea de c贸digo en la etiqueta <head> de tu documento:

  1. <link rel="stylesheet" type="text/css" media="screen" href="stylesheet_name.css" />

De esta forma:

  1. <html>
  2.     <head>
  3.         <link rel="stylesheet" type="text/css" media="screen" href="stylesheet_name.css" />
  4.     </head>
  5. </html>

Continuando con el estilo del DIV “navBarContainer”.

En el CSS externa, vamos a escribir el ancho, la altura y el margen del DIV que contiene esta barra de navegaci贸n. Es muy f谩cil hacerlo, ya que ya hemos determinado la anchura y la altura antes.

  1. #navBarContainer{
  2. width: 489px;
  3. height: 52px;
  4. margin: 0 auto;
  5. }

Nota: la altura de la barra de navegaci贸n es de 52 p铆xeles de alto, no 156 p铆xeles. Esto es porque queremos mostrar 煤nicamente una barra de navegaci贸n a la vez.

A continuaci贸n, le mostraremos c贸mo utilizar las listas de HTML para mostrar los enlaces. Esta es una manera mucho m谩s estructurada para los links.

Paso 7: CSS – Usando listas HTML (ul tags) para los links de la barra de navegaci贸n

Continuemos para codificar nuestro archivo HTML:

Ahora a帽adiremos la lista para cada link:

  1. <div id="navBarContainer">
  2. <ul id="navBar">
  3.     <li id="navBarHome"><a href="#">Home</a></li>
  4.     <li id="navBarServices"><a href="#">Services</a></li>
  5.     <li id="navBarAboutus"><a href="#">About us</a></li>
  6. </ul>
  7. </div>

Por defecto, las listas HTML se muestran en la pantalla como bullets verticales.

Para hacer que fluyan horizontalmente, usaremos “none” para el atributo “list-style”. Tambi茅n tendremos que usar “inline” para el atributo “display”.

  1. ul#navBar{
  2. width: 489px;
  3. height: 52px;
  4. margin: 0 auto;
  5. list-style: none;
  6. }
  7.  
  8. ul#navBar li{
  9. display: inline;
  10. }

As铆, en lugar de esto:

24

Tendremos esto:

25

Paso 8: CSS – a帽adiendo im谩genes para cada link

Este primer paso es 煤til para mostrar los links como texto cada vez que CSS haya sido desactivado en los navegadores y las im谩genes no est谩n disponibles. A帽ade este c贸digo para lograrlo:

  1. ul#navBar li a{
  2. height: 52px;
  3. float: left;
  4. text-indent: -9999px;
  5. }

El “-9999px” no es un error, esto es para mantener los enlaces de texto fuera de la pantalla, si CSS est谩 activado. Si no, los enlaces de texto se superpondr铆an a las im谩genes de la barra de navegaci贸n.

Ahora bien, 隆Mostremos una imagen para el enlace de inicio!

  1. ul#navBar li#navBarHome a{
  2. width: 126px;
  3. background: url(neonBlackNavBar.png) no-repeat 0px 0px;
  4. }

Listo, nuestro primer link est谩 programado.

26

Por cierto, hemos cambiado el fondo de nuestro cuerpo a #131313.

Para los otros dos botones, aplicamos los mismos c贸digos pero cambiamos las posiciones de sus fondos y los anchos.

Aqu铆 est谩 el c贸digo para el bot贸n “Services”:

  1. ul#navBar li#navBarServices a{
  2. width: 179px;
  3. background: url(neonBlackNavBar.png) no-repeat -126px 0px;
  4. }

驴De d贸nde salieron los “-126px”?

Dado que usamos una imagen sprite, necesitamos “recortar” las im谩genes dentro del sprite.

Logramos esto especificando la posici贸n del fondo.

Dado que el bot贸n “Home” x-axis estaba en 0px, el bot贸n “Services” debe comenzar donde termin贸 el bot贸n “Home”. Y esto es 126 p铆xeles.

27

Ahora, aqu铆 est谩 el c贸digo para el bot贸n “About us”:

  1. ul#navBar li#navBarAboutus a{
  2. width: 184px;
  3. background: url(neonBlackNavBar.png) no-repeat -179px 0px;
  4. }

28

Como el bot贸n “About us” no empieza en-179px s贸lo porque el bot贸n “Services” termin贸 all铆.

El c谩lculo correcto es (ancho de bot贸n “Home”) + (ancho de bot贸n “Services”). Por lo tanto, el bot贸n “About us” comienza en-305px.

Ahora s铆 隆Listo!

29

Paso 9: CSS – a帽adiendo estados hover a la barra de navegaci贸n

A帽adir los estados hover se hace bajo los mismos principios que a帽adir los otros dos links. Simplemente movemos la posici贸n del fondo.

Para el bot贸n “Home”, simplemente movemos la posici贸n del fondo del eje y hacia donde termina el estado normal de la barra de navegaci贸n, de esta forma:

  1. ul#navBar li#navBarHome a:hover{
  2. background-position: 0 -52px;
  3. }

Ahora, al hacer hover sobre el bot贸n “Home”, ver谩s su estado hover:

30

Apliquemos los mismos principios al bot贸n “Services”.

  1. ul#navBar li#navBarServices a:hover{
  2. background: url(neonBlackNavBar.png) no-repeat -126px -52px;
  3. }

Obtendremos esto:

31

Finalmente, al bot贸n “About us”.

  1. ul#navBar li#navBarAboutus a:hover{
  2. background: url(neonBlackNavBar.png) no-repeat -305px -52px;
  3. }

Previsualizaci贸n:

32

Paso 10: CSS – a帽adiendo estados clicked/active a la barra de navegaci贸n

Dada la palabra clave “active” para los estados de link cliqueados, es esperable que puedan hacer esta parte por ustedes mismos.

Aqu铆 est谩n los c贸digos para los estados hover de los 3 links:

  1. ul#navBar li#navBarHome a:active{
  2. background-position: 0 -104px;
  3. }
  4.  
  5. ul#navBar li#navBarServices a:active{
  6. background: url(neonBlackNavBar.png) no-repeat -126px -104px;
  7. }
  8.  
  9. ul#navBar li#navBarAboutus a:active{
  10. background: url(neonBlackNavBar.png) no-repeat -305px -104px;
  11. }

Fuente: Tutorial 9


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. Alejo dice:

    Gracias!!! Tu lecci贸n me ha ayudado bastante. Un abrazo fraternal!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder