css – cetta

Dummy Image

Buenos días.

Hoy os traigo una utilidad que me pasó un compañero de trabajo y que descubrió gracias a la entrega de una de nuestras maquetas del proyecto.

Se trata de una utilidad para desarrolladores/diseñadores/maquetadores con las que podremos generar imagénes dummy.

La aplicación es web y podemos encontrarla en http://dummyimage.com/.

En esta página, podemos encontrar un “wizard” para la creación de nuestra imagen dummy:

Como veis es muy sencillo de usar, son 5 campos que podemos o no rellenar a nuestro antojo.

Además y si tenemos alguna duda sobre su uso, tenemos un apartado de documentación donde se explica:

Por ejemplo:

Habremos generado la imagen que veis anteriormente.

Ahora bien, si bien el “wizard” es útil, la principal utilidad que le veo a esta herramienta es la generación de imágenes directamente desde una URL.

Por ejemplo: si generamos la siguiente URL, obtendremos la imagen anterior:

http://dummyimage.com/600×400/758dd9/2630b5.jpg&text=Cuando+el+tiempo+te+atrapa

Así mismo, podremos generar nuevas imágenes variando los parámetros de esta URL:

http://dummyimage.com/300×300/067d2c/f7f7f7.jpg&text=Cuando+el+tiempo+te+atrapa

Bastante útil, ¿verdad?
Espero que le saquéis provecho.

Uso de Sprites CSS

¿ Sabes lo que es un Sprite cuando hablamos de CSS?

Si alguna vez has tenido que maquetar o modificar ciertos aspectos visuales de una página web es probable que hayas oido hablar de Sprites. Básicamente se trata de una técnica CSS que aprovecha una sola imagen para mostrar múltiples imágenes a partir de ella dentro del sitio. Es decir, junta en la misma imagen aquellas que vayamos a mostrar en la web.

¿Para que sirve?

Mejoramos el rendimiento del sitio porque se hace sólo una petición HTTP en vez de que se pidan una por cada imagen. Si tenemos por ejemplo 50 imágenes pequeñas dentro del sitio, cuando un visitante abre la página se consultan en el servidor toda esta cantidad de imágenes. ¿No sería mejor que se pida solo una vez?. Pues es mejor, porque la imagen es cargada solo una vez por el navegador y el CSS (que actúa en el cliente y no en el servidor) se encarga de mapear la imagen.

¿Cómo podemos crear estos Sprites?

Pues simple, podemos unificar estas imágenes mediante algún programa de edición (ej: Photoshop). Lo que tendremo que hacer más tarde, será adaptar el CSS para que lo que muestre sea un fragmento de la imagen, en vez de la imagen completa (sólo la parte que nos interesa).

Pero si sólo pudieramos hacerlo de esta forma tan manual, este artículo no se encontraría aquí, en www.cuandoeltiempoteatrapa.es

Aplicaciones de Creación de Sprites

Existen numerosas aplicaciones web que nos ayudan a generar estos sprites. Estas aplicaciones no sólo nos crean la imagen unificando las que queramos sino que nos generan el código CSS que podemos usar; o al menos una base para que luego podamos adaptarla. Genial !

Algunas de las que he probado son:

SpritePad: Genial. A diferencia de otras tú situas las imagenes donde quieras para despues unificarlas.

InstantSprite: Sencilla y funcional.

CSS Sprite Generator: Hay que subir las imagenes en zip.

Otras: SpriteCow SpriteMe

Origen de los Sprites:

Si quieres conocer cómo surgieron los sprites y en base a qué problema, te recomiendo que te pases por http://web.ontuts.com/tutoriales/introduccion-comprension-y-utilizacion-de-los-css-sprites-parte-i/ y le eches un vistazo a su artículo, así como a otros que tiene. Muy recomendable.

¿Y tu? ¿usas Sprites?

Referencias:
Artículo basado en http://www.documentoweb.com/Guia/CSS/Sprites-CSS

http://www.pixelovers.com/css-sprites-mejora-rendimiento-web-i-37249

http://web.ontuts.com/tutoriales/introduccion-comprension-y-utilizacion-de-los-css-sprites-parte-i/

jsFiddle – editor online (HTML, CSS, JavaScript)

jsFiddle es una herramienta online de máxima utilidad para los que desarrollamos páginas web, se trata de un editor de shell para programar fácilmente en JavaScript. Se trata de un entorno de desarrollo basado en los frameworks más populares.

Se divide en cuatro secciones, un editor de HTML, CSS, JavaScript, y una sección que muestra la salida de todo ese código. De entre los frameworks que podemos elegir están los más usados: MooTools, jQuery, Dojo, Prototype, YUI, Glow y Vanilla.Viendo esta lista parecería que no necesitamos más, pero incluso nos permite añadir jQuery UI y MooTools.
Pero no se queda ahí, también nos encontramos con la posibilidad de guardar y compartir el código con una simple URL. Por su puesto, también te ofrece directamente código para incrustarlo en cualquier sitio.

Se trata de una versión alpha, por lo que aparte de posibles fallos aun faltarían varias implementaciones.

De momento se echa en falta la posibilidad de registro de usuarios y así poder tener registrado lo que vamos haciendo, como por ejemplo versiones distintas de un mismo proyecto. Además pensando en las posibles aplicaciones futuras, se podría añadir soporte para bases de datos y poder trabajar con un mismo framework en el mismo proyecto.

Os dejo esta maravillosa herramienta:

http://jsfiddle.net/