profesorfrink
Usuario (Argentina)
En este post vamos a ver un pequeño ejemplo de como utilizar css sprites de forma efectiva. Para ello, primero vamos a utilizar algunas imágenes del pack de íconos gratis disponible en este link de Smashing Magazine. Una vez bajados, creamos la siguiente página en html (los íconos de social media del pack van a ser copiados a la carpeta images de nuestro proyecto para este ejemplo). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > <html lang="en"> <head> <title>Ejemplo sin sriptes</title> </head> <body> <img src="images/social_digg.png" alt="digg" /> <img src="images/social_facebook.png" alt="facebook" /> <img src="images/social_google.png" alt="google" /> <img src="images/social_skype.png" alt="skype" /> <img src="images/social_linked_in.png" alt="linkedin" /> <img src="images/social_twitter.png" alt="twitter" /> </body> </html> Esa sería nuestra página común y corriente, en donde cada imagen tiene su correspondiente archivo. El paso siguente es dirigirnos a Css sprites generator y seleccionar los archivos que queremos juntar ( en nuestro caso serán: social_digg.png, social_facebook.png, social_google.png, social_skype.png, social_linked_in.png y social_twitter.png). una vez seleccionadas todas las imágenes de nuestro sprite, generamos el archivo resultado con su css correspondiente haciendo click en el botón Generate! Ya estamos en condiciones de crear nuestra página utilizando sprites. Para ello baja el archivo png generado en el paso anterior y cópialo en la carpeta images del proyecto. El código de nuestra página utilizando css sprites será el siguiente: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > <html lang="en"> <head> <title>Ejemplo con sriptes</title> <style> .social { background-image: url(images/result.png); width: 48px; height: 48px; } /*es importante escribir los nombres sin espacios .social .digg no funciona*/ .social.digg {background-position: 0px 0px;} .social.facebook {background-position: 0px -58px;} .social.google {background-position: 0px -116px;} .social.skype {background-position: 0px -174px;} .social.linkedin {background-position: 0px -232px;} .social.twitter {background-position: 0px -290px;} </style> </head> <body> <img src="images/blank.gif" class="social digg" alt="digg" /> <img src="images/blank.gif" class="social facebook" alt="facebook" /> <img src="images/blank.gif" class="social google" alt="google" /> <img src="images/blank.gif" class="social skype" alt="skype" /> <img src="images/blank.gif" class="social linkedin" alt="linkedin" /> <img src="images/blank.gif" class="social twitter" alt="twitter" /> </body> </html> Como se puede apreciar, lo que estamos haciendo es poner una imagen en blanco y reemplazarla mediante el atributo class. El css que nosotros deberemos generar consta de dos partes: 1- El contenedor de la imagen (en nuestro caso es .social): tiene como atributos el background-image que descargamos y al ancho y alto de cada imagen, en nuestro caso eran íconos de 48px * 48px, pero pueden ser de cualquier tamaño e inclusive pueden ser imágenes de distintos tamaños con distintos altos y anchos. 2- Cada clase particular: comenzará con el nombre del contenedor (.social) y debería seguir con un nombre que sea representativo para nosotros (en este caso se utilizó el nombre de la red social a la cual representan). Las posiciones background-position fueron generadas por css sprites, por lo que debes copiarlas y pegarlas en tu estilo css. Como se puede apreciar, ahora para generar nuestra página web solo necesitamos bajar blank.gif y result.png. En el caso anterior fueron 6 archivos pero podrían haber sido 20 que agrupamos en uno solo. Las ventajas evidentes de usar esta técnica es que reducimos las llamadas al servidor y también creamos un archivo que es de menor tamaño que la suma de los archivos que fueron utlizados para generarlos (menos llamadas y menos ancho de banda utilizados). Si todavía quieres optimizarlo un poco más deberías hacer lo siguiente: 1- Sacar el estilo a un archivo css externo (estos archivos se guardan en el caché del navegador, por lo cual si un usuario entra varias veces la velocidad será mayor) 2- Transformar la imagen a un formato jpg. Hay que tener cuidado con este paso, sobre todo si se utilizan transparencias ya que jpg no es apto para guardar transparencias (png y gif si lo son). La reducción de tamaño suele ser notable, en este caso pasó de 18,9KB a 7,2KB. El código luciría de la siguiente forma <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > <html lang="en"> <head> <title>Ejemplo con sriptes mejorado</title> <link href="estilos.css" rel="stylesheet" /> </head> <body> <img src="images/blank.gif" class="social digg" alt="digg" /> <img src="images/blank.gif" class="social facebook" alt="facebook" /> <img src="images/blank.gif" class="social google" alt="google" /> <img src="images/blank.gif" class="social skype" alt="skype" /> <img src="images/blank.gif" class="social linkedin" alt="linkedin" /> <img src="images/blank.gif" class="social twitter" alt="twitter" /> </body> </html> y el archivo estilo.css sería la copia de lo que había dentro de la etiqueta .social { background-image: url(images/result.jpg); width: 48px; height: 48px; } .social.digg {background-position: 0px 0px;} .social.facebook {background-position: 0px -58px;} .social.google {background-position: 0px -116px;} .social.skype {background-position: 0px -174px;} .social.linkedin {background-position: 0px -232px;} .social.twitter {background-position: 0px -290px;} Se puede ver los ejemplos funcionando en el siguiente link: http://ejemplos.desarrolladorweb.net/csssprites/
Hola a todos, aprovechando este fin de semana friolento y aburrido me puse a programar un rato. Encontré un proyecto interesante en github para crear gifs animados a partir de fragmentos de videos (link) y decidí ponerme a programar una interfaz web para hacer un poco más amigable el proceso (la alternativa es crearlos desde la linea de comandos). Aquí algunos ejemplos de gifs creados El proyecto está programado en Node.js usando el framework Express y usa librerías interesantes como: AsyncKueGraphicsMagickGififyFfmpegNedb La idea es subir un video y seleccionar el tramo que queremos convertir en nuestro gif animado, también poder reusar los videos que subieron otros usuarios para generar nuevos gifs. Prerrequisitos: Para que funcione, debemos tener instalado el siguiente software Node.jsRedis Ffmpeg (con libass y fontconfig)ImageMagick ( con fontconfig )GraphicsMagickGiflossy Al ser una aplicación de prueba tiene validaciones básicas, pero si ven el código fuente, se hace uso de colas de mensajería (para manejar procesos de larga duración y poder distribuir el procesamiento), extracción de imágenes desde video, optimización y conversión de las mismas. Próximamente voy a crear posts nuevos explicando algunos aspectos que puedan resultar interesantes del código. El proyecto se puede encontrar en github También creé un pequeño vps para que se pueda ver una demo on line Link para demo online