Sprites, tips y mejores prácticas

No es una técnica nueva, pero el uso de sprites CSS, en lugar de un conjunto de imágenes sueltas/individuales más pequeños, acarreara como beneficio, una mejora en el rendimiento de las páginas web y mantendrá las cosas más organizadas. Veamos algunas de las mejores prácticas y algunas herramientas útiles para el flujo de trabajo con sprites.

new-google-sprite-november-2009

En términos de CSS, sprite es un archivo grande que contiene varias imágenes para ser utilizados en distintos lugares del sitio web, el ahorro de tiempo de carga y espacio web, es muy significativo con el uso de esta técnica.

La característica principal de la utilización en las hojas de estilo CSS la técnica Sprite es que el servidor sólo tiene que enviar un archivo de imagen que contiene todas las imágenes, y no una serie de imágenes individuales – ya través de CSS puede mostrar cualquier pequeño segmento de ese archivo como fondo de un elemento, evitando de esta manera, las peticiones HTTP al servidor por cada una de las imágenes separadas.

Es importante mantener el número de peticiones HTTP de un sitio lo más bajo posible, ya que los navegadores sólo pueden hacer un número limitado de solicitudes de cualquier servidor al mismo tiempo.

35-social-icons-sprites

Combinando las imágenes en un solo archivo, no sólo se va a disminuir considerablemente el número de peticiones HTTP, pero también disminuirá el tamaño total del archivo de las imágenes.

Enfoques

Hay dos enfoques “comunes” al utilizar la técnica sprites: hacerlo antes o después de la creación del sitio.

La primera: comenzando a la par con el proyecto, es decir de abajo hacia arriba, para ello se va a tener que actualizar el CSS para adaptarse, a medida que avanza el proyecto.

La segunda: como alternativa , se puede crear todas las imágenes como archivos separados, lo que hace a la edición de ellos mucho más sencillo. Una vez que el sitio este construido con todas las imágenes por separado, lo que queda es compilar de forma manual, (o utilizar una herramientas para ello)

Basado en mi experiencia, yo recomendaría utilizar siempre la segunda opción, ya que es más escalable.

images

Tips

Mantener todo organizado

Al colocar las imágenes en Photoshop (o cualquier otra herramienta que se este utilizando) es una buena idea tratar de organizar las cosas con la mayor claridad y facilidad posible. el redondeo (en tamaño) de las imágens a ser utilizadas es importante. Otro punto importante es el espacio entre imágenes, se debe intentar una cierta cantidad uniforme de espacio entre imagen e imagen. Esto ayudara al momento de escribir todo el CSS que lo acompaña, ya que no se tendrá que mantener la medida desiguales ni recordar coordenadas complejas.

Esperar hasta el final para definir todas imagenes con la técnica Sprite

Si se pone todas las imágenes en sprite, pasando bastante tiempo escribiendo el CSS y luego se decide/necesita una edición de imágenes, esto puede puede causar serios problemas, sobre todo si las imágenes necesitan un cambio de tamaño o redimencion, lo que significa que se tendrá que invertir mucho tiempo y esfuerzo en volver a definir posiciones.

El nombre de las etiquetas es fundamental

Si se utiliza Photoshop u otros editores de imágenes, entonces es una buena idea para mantener las capas de cada uno de sprites muy bien etiquetados y agrupados, así todo está muy claro si se tienen que modificar más adelante.

Esto debería ser una regla general para la mayoría de los diseñadores. Esto ahorra tiempo en el etiquetado si se ha tenido una hoja de estilos con sprites muy grande.
Por el lado del código CSS las etiquetas son definitivamente necesarias para confirmar que la imagen sprite se está seleccionado por el código/nombre respectivo.

grid

Algunas herramientas que nos van a ayudar al realizar imágenes Sprites:

http://www.spritecow.com/
http://es.spritegen.website-performance.org/
http://spriteme.org/
http://wearekiss.com/spritepad
http://csssprites.com/
http://www.spritebox.net/

Anuncios

enbolivia.com srl. diseña, desarrolla e implementa Plataforma Tecnológica para el Ministerio de Transparencia y Lucha Contra la Corrupción

transparenciaEl Ministerio de Transparencia Institucional y Lucha Contra la Corrupción (MTILCC) ha considerado beneficioso el desarrollo de una Plataforma Tecnológica que coadyuve a prevenir los hechos de corrupción mediante el acceso a la información para ejercer el control social informado y responsable en la gestión pública.

enbolivia.com srl. es la empresa elegida para llevar a cabo el proyecto  “Diseño, desarrollo e implementación de una Plataforma Tecnológica, Aplicaciones e Identificación de Brechas”  esta importante herramienta que será de ayuda para a todos los bolivianos servirá para que las entidades identificadas hagan rendición pública de cuentas y potencien el control social de la gestión pública en el marco de la “Política Nacional de Transparencia y Lucha Contra la Corrupción” contribuyendo a reducir los daños producidos al estado por retrasos y sobre-costos resultantes de actos de corrupción, mediante acciones dirigidas a transparentar los procesos de diseño, licitación, contratación y ejecución de proyectos públicos estratégicos de inversión pública, servicios y adquisiciones.screenshot_transparencia_02

En el diseño de la plataforma se aplicaron las siguientes tecnologías:

  • Symfony,
  • Google Maps,
  • XML,
  • JSON,
  • jQuery,
  • CSS3,
  • Font Awesome,
  • Twitter Bootstrap,
  • AJAX,
  • HTML5,
  • Exportar a Excel,
  • PHP,
  • MySQL.

Además es necesario mencionar que la plataforma cumple les requerimientos técnicos exigidos por el MTILCC y por organismos internacionales, entre dichas requerimientos técnicos están los siguientes:

  • La plataforma cuenta con métodos automatizados de recuperación en el menor tiempo posible, sin pérdida de información
  • Cumple con las mejoras prácticas internacionales (como las iniciativas CosT, EITI y OCDE-DAC)
  • Tiene capacidad de interacción con otros sistemas desarrollados bajo la estrategia de Web Services e integración de procesos.
  • Está basado en la Normativa del MTILCC.
  • Posee sistemas de seguimiento y monitoreo a la ejecución de los proyectos.
  • Cuenta con traducción fija del español al Quechua, Aymara, Guarani e Ingles además de otros idiomas.
  • Versátil interconexión con los sistemas y aplicaciones web del MTILCC.
  • Web georeferencial, multimedia e interactivo.

screenshot_transparencia_01