Los CSS Sprites es una sencilla y efectiva técnica de CSS que nos permite ahorrar ancho de banda.

Realmente los sprites son imágenes que contienen varias imágenes y se muestran gracias a diversas técnicas que nos permiten recortarlas.

Inicialmente se utilizó en el desarrollo de videojuegos debido a su versatilidad a la hora de realizar animaciones, hoy también nos lo encontramos como una técnica CSS que nos permite ahorrarnos ancho de banda.

Gracias a esta técnica podemos reducir considerablemente el peso de nuestra aplicación web y lo que es más importante el número de peticiones HTTP, estas dos ventajas nos permiten reducir el tiempo de carga de nuestra aplicación web y reducir la carga en el servidor.

¿Cómo aplicar esta técnica?

Únicamente tenemos que utilizar las propiedades CSS que nos permiten alterar el alto y ancho (height, width), de este modo podemos recortar una imagen que mostraremos como background, además necesitaremos modificar las propiedades de background-position para desplazarnos por la imagen original y mostrar la zona deseada.

Pequeño tutorial para comenzar a utilizar esta técnica.

¿Cuándo utilizar esta técnica?

Debemos de tener en cuenta qque cada vez que nuestra aplicación web llama a imágenes, hojas de estilos, archivos javascripts lo que realmente estamos haciendo son peticiones HTTP que se solicitan de manera individual y aumentan la transferencia y el tiempo de carga.

En primer lugar debemos utilizarla si tenemos un número elevado de usuarios y nuestro servidor alcanza picos de carga altos, también sería conveniente su uso en aplicaciones web que tengan un gran número de imágenes de tamaño pequeño.

El concepto principal a tener en cuenta es que debemos tener cuidado con la suma del tamaño de los archivos externos, no es lo mismo cargar 15 elementos de 10 KB que un único elemento de 150 KB, en el segundo caso la carga sería considerablemente más ligera.

La explicación a esta última afirmación es que al cargar un alto número de elementos estamos realizando peticiones HTTP que incluyen cabeceras y que a su vez vienen acompañadas por cookies (las cookies son relativamente ligeras pero los usuarios navegan con conexiones asimétricas dónde la velocidad de subida es muy inferior).

Por lo tanto podemos llegar al caso en el que las cabeceras de los archivos pesen más que los propios archivos y a menudo la carga que ello representa en el servidor se duplica.

Ejemplos prácticos

Yahoo utiliza esta técnica para mejorar el rendimiento, el principal motivo es el gran número de pequeñas imágenes que utilizan para identificar cada uno de los servicios.

Se ha convertido en una funcionalidad común a un gran número de webs de noticias, pero a mi parecer es una funcionalidad más que prescindible, de hecho no sería necesario en aquellas páginas bien diseñadas y con un tamaño de letra por defecto adecuado.

Por otro lado navegadores como Firefox o Internet Explorer nos permiter modificar el tamaño de los textos de la página visitada, con estos dos navegadores abarcamos al 90% de los usuarios de Internet... vamos a ver como lo haríamos.

Internet Explorer

Si utilizas Internet Explorer y deseas cambiar el tamaño de la letra en una página realiza el siguiente procedimiento:

1. Seleccione del meú del navegador la pestaña Ver.
2. Luego dirígase a la opción Tamaño de texto y seleccione la presentación del texto que usted prefiera.
3. La opción por defecto del Tamaño de texto que se encuentra seleccionada es Mediana usted puede cambiarla según sus preferencias a Grande o Mayor y así aumentar el tamaño de la letra en la página.

Mozilla / Firefox

Si utilizas Mozilla / Firefox y deseas cambiar el tamaño de la letra en la página visitada realiza el siguiente procedimiento:

1. Seleccione del meú del navegador la pestaña Ver.
2. Luego dirígase a la opción Tamaño de texto y seleccione la opción que prefiera.
3. Usted puede seleccionar Incrementar para aumentar o Dismunir para reducir el tamaño de la letra en el portal.

Catull es la tipografia que se utilizó para la creación de uno de los logos más famosos del mundo "el logo de Google", la tipografia Catull fue diseñada por Gustav Jaeger en el año 1982 y desde Agosto del año 1999, Google la emplea para su logo.

El problema de esta fuente es que a pesar de poder encontrarla para descargar en algunos sitios es una fuente de pago por lo que deberías comprarla si no la encuentras para descarga en alguna página (aquí se puede descargar).

En esta direccion podemos encontrar una lista de formulas para convertir entre los diferentes espacios de color, RGB, XYZ, HSL, etc.

Para la correcta compresión de estas fórmulas debemos tener claro cada uno de los modelos de color.

Esta lista de funciones las podemos aplicar a cualquier aplicación que precise de operaciones para el cálculo y conversión de color, todas las funciones están escritas en un "lenguaje de programación neutral" fácil de transladar a cualquier lenguaje de programación (C, Java, Basic, Pascal, PHP, Perl etc.).

Conversión de colores

RGB: (del inglés Red, Green, Blue; "rojo, verde, azul") es un modelo que hace referencia a la composición de un color dependiendo de la intensidad de los colores primarios. Se asigna un valor a cada uno de los colores primarios frecuentemente se mide con valores que van del 0 al 255.

CMYK: (acrónimo de Cyan, Magenta, Yellow y Key) este modelo se basa en la mezcla de los colores Cian, Magenta, Amarillo y Negro es muy utilizado para la impresión a color.

Modelo de color para HTML; utiliza también los colores primarios, pero estos colores primarios , en HTML, están representados por tres pares hexadecimales del tipo 0xHH-HH-HH según el siguiente formato: #RRGGBB = #RRVVAA

Como hemos comentado antes en esta direccion dispondremos de las fórmulas necesarias para cualquier tipo de conversión de color.

Si necesitaramos integrar un selector de color en nuestra página mi recomendación es esta (Color Picker) | ver Demo.

CSS Color Generator

Mikko Koppanen publicó hace unos meses el código de una interesante utilidad (CSS Color Generator) en su blog.

Este código / utilidad será realmente interesante para aquellos que carecemos del sentido del gusto para crear hojas de estilos de la nada.

Con esta utilidad podemos crear una pequeña paleta de colores partiendo de una imagen dada (un logotipo por ejemplo sería un buen comienzo) | Código de la utilidad

A pesar de que flash es uno de los elementos más activos en las páginas webs hoy en día, la gran mayoría de los diseñadores no saben cómo corregir el extendido problema de insertar flash en un documento HTML, el concepto de estándar propagado por Macromedia es absolutamente incorrecto.

...
embed src="movie.swf" quality="high" bgcolor="#ffffff" width="550" height="400"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
...

Atributos como object son necesarios en Internet Explorer y no funcionan en otros navegadores, estos otros utilizan el elemento "embed" para el mismo propósito, pero este no está listado en las especificaciones de HTML o XHTML.

Soluciones

¿Que es lo que deseamos?

* Que funcione en la mayoria de los navegadores
* Que muestre contenido alternativo si el usuario no tiene Flash Player

Solución 1

Se han probado distintas soluciones en las cuales siempre uno de los dos grandes navegadores sale perdiendo (Mozilla o IE), pero hay una solución en la que mediante distintas condiciones podemos combinar ambos scripts para que funcione de manera correcta en la mayoría de los navegadores, haciendo especial hincapié en los más populares (Mozilla,IE).

Esta es la solución.

Quizás no sea la más elegante pero es funcional.

* Valida
* Es funcional en todos los navegadores que conozco
* Muestra contenido alternativo si Flash Player no esta instalado
* No requiere el uso de Javascript

Solución 2

Se trata de no validarlo. Es decir, si el único problema en la página es el código para flash, y no hay ningún estándar, entonces lo que hay que hacer es sacar ese código de la página y validarla, pero manteniendo el funcionamiento de la página.

Este proceso es sencillo y práctico, y depende de Javascript. Ya sé que si Javascript es deshabilitado entonces simplemente no se desplegará nada, pero esta opción es valida porque:

* Valida
* Es funcional en todos los navegadores
* Muestra contenido alternativo si Flash Player no esta instalado
* En el caso extremo de que Javascript esté deshabilitado, la animación no se muestra, pero simple código HTML puede hacer la función de soporte, explicando qué había ahí.

Mikko Koppanen ha publicado el código de una interesante utilidad (CSS Color Generator) en su blog.

Este código / utilidad será realmente interesante para aquellos que carecemos del sentido del gusto para crear hojas de estilos de la nada.

Con esta utilidad podemos crear una pequeña paleta de colores partiendo de una imagen dada (un logotipo por ejemplo sería un buen comienzo) | Código de la utilidad

Esta es una interesante e inútil web en la cual podemos convertir cualquier imagen a código HTML.

La verdad es que hay que estar aburrido para hacer una aplicación que convierta imágenes a código HTML, el funcionamiento es sencillo se cre una tabla de 1x1 píxeles por cada pixel de una imagen asignando a la tabla el color del pixel convertido.

Obviamente se trata de algo curioso pero nada útil... si tenemos en cuenta que una imagen de un tamaño de 3KB al convertirla a HTML nos quedará en 274KB.

Prueba IMG2HTML, este es el resultado por ejemplo del logo de TuFunción en HTML (Ver Código Fuente).

Genial este video que veo en Microsiervos:

Se ha convertido en una funcionalidad común a un gran número de webs de noticias, pero a mi parecer es una funcionalidad más que prescindible, de hecho no sería necesario en aquellas páginas bien diseñadas y con un tamaño de letra por defecto adecuado.

Por otro lado navegadores como Firefox o Internet Explorer nos permiter modificar el tamaño de los textos de la página visitada, con estos dos navegadores abarcamos al 90% de los usuarios de Internet... vamos a ver como lo haríamos.

Internet Explorer

Si utilizas Internet Explorer y deseas cambiar el tamaño de la letra en una página realiza el siguiente procedimiento:

1. Seleccione del meú del navegador la pestaña Ver.
2. Luego dirígase a la opción Tamaño de texto y seleccione la presentación del texto que usted prefiera.
3. La opción por defecto del Tamaño de texto que se encuentra seleccionada es Mediana usted puede cambiarla según sus preferencias a Grande o Mayor y así aumentar el tamaño de la letra en la página.

Mozilla / Firefox

Si utilizas Mozilla / Firefox y deseas cambiar el tamaño de la letra en la página visitada realiza el siguiente procedimiento:

1. Seleccione del meú del navegador la pestaña Ver.
2. Luego dirígase a la opción Tamaño de texto y seleccione la opción que prefiera.
3. Usted puede seleccionar Incrementar para aumentar o Dismunir para reducir el tamaño de la letra en el portal.