Cita:
Iniciado por kazafun ...yo suelo utilizarlos muy a menudo sustituyendo al habitual rollover...
A eso me refería con lo de "
algún otro uso práctico"
Para ser sincero, no ví la URL que nos dejó
Roland, ni tampoco los enlaces que hay en el tema de
manumaf.
Y quizá este mensaje debí ponerlo allí; pero como aquí ya participé, y es más nuevo, y el que lo encuentre va a encontrar también el otro (digo, por el
link), me parece que voy a hacer honor al presente tema y posteo acá.
Seguramente en los sitios donde promueven el uso de
sprites (¿por qué le habrán puesto así?) deben explicar las ventajas que tiene su uso. A mi se me ocurre que ayuda en la velocidad de bajada al cargar una sola paleta para "todas" las imágenes, y —como dice
daPhyre que es programador y entiende un poco más de esto
— reduce las peticiones de descarga al servidor.
Ahora, como ventajas, me parecen un poco pobres.
Hay algunas 'desventajas' que son muy evidentes, e insalvables.
A la ya mencionada imposibilidad de usarlas como fondo mosaico, y a la también mencionada dificultad para "acomodar" cada parte como un
puzzle si son de distintos tamaños, para que no sobre "fondo"; podemos agregar que no todas las imágenes de nuestras páginas tienen la misma extensión. Quiero decir : para las fotos medianas o grandes usamos un *.jpeg, para íconos o botones un *.gif, para un borde de capa que termine fundido con el
background un *.png ... y si tenemos que hacer una macroimagen para cada una de las extensiones ya deja de ser negocio. Ni hablar si usamos gif animados; son incombinables.
Otro problema es la actualización. Es muy fácil subir un nuevo formato de botón al sitio : simplemente reemplazamos su archivo de imagen original por el nuevo, con el mismo nombre. En cambio con este método, hay que editar la imagen sí o sí. Peor si los nuevos botones no tienen exactamente el mismo tamaño. O si queremos renombrar el viejo botón para no eliminarlo.
Un inconveniente adicional se da cuando nustro sitio tiene varias páginas con el mismo diseño, porque tenemos que decidir si hacemos una imagen con el logo, la botonera y los íconos que son comunes por un lado, y además cada una de las que son específicas para cada página por el otro; o metemos todas juntas en un mismo archivo.
En el primer caso, seguimos usando más de un archivo de imagen, en el segundo, estamos cargándole a cada página un peso que no vamos a usar.
Por otro lado, si la imagen única se arruina, se arruinan todas. Y nadie ve nada.
Todas estas objeciones son elementales, puro sentido común. Pero hay otras que quizá no sean tan evidentes.
Dependiendo de la configuración del usuario, las páginas pueden aparecer a medida que se cargan sus elementos, o mostrarse solamente cuando estén completas.
En este último modo (casi) podríamos decir que no hay diferencia con usar
sprite. Pero si alguien quiere ir viendo el contenido aún antes de estar totalmente bajado, le estamos retrasando los íconos y botones (generalmente livianos) que en principio se cargarían en "orden de petición" (del comienzo al final del documento); que es justamente como lo vamos leyendo.
Más arriba dije "casi", porque tenemos un problema con el
Internet Explorer y algunos antivirus o
antispyware. Resulta que 'revisan' las imágenes
una por una antes de bajarlas; pero según la petición del HTML o CSS. Quiero decir, que si ponemos una capa con la imagen 'recortada' adentro, la va a revisar una vez, y si ponemos una segunda capa con otra etiqueta de imagen o fondo adentro, la va a revisar de nuevo ... aunque tenga la misma ruta de archivo.
El tiempo que supuestamente ganamos por un lado, lo seguimos perdiendo por el otro, porque aunque muestre sólo una pequeña porción del dibujo, el peso es del total para todas.
Un caso aparte es el tema del diseño, la semántica y la compatibilidad.
Este truco es puramente visual; ¿y qué hacemos con la recomendación de usar
alt?. No se le debe poner a la imagen completa y tampoco se le puede poner a cada
div o lo que fuere que usemos de caja. Bueno, en realidad, sí. Podemos usar un 'comodin.gif' transparente, en cada caso le damos el tamaño de la porción que vamos a mostrar y de fondo le ponemos nuestra macroimagen (acomodada para que se vea sólo lo que queremos). Entonces sí podemos poner un
alt a cada gif transparente, que mencione lo que en realidad se ve de fondo.
Más de un purista se va a quejar de semejante chanchada, pero es lo que hay. Y aún así, no sirve.
Si alguien navega con imágenes dehabilitadas o usa un navegador aural, seguramente no va a notar la diferencia; pero si el problema es que alguna de las 2 imágenes no se carga : o no aparece el texto alternativo, o aparece encima de la imagen de fondo
Seguramente podríanos seguir, pero recordando un par de comentarios
Cita:
Iniciado por Roland ...la informacion disponible en castellano esta realmente escasa...
Cita:
Iniciado por daPhyre ...Supongo que no mucha gente de habla hispana habla de esta técnica...
se me ocurre citar a un xenófobo lingüista que dijo
"
Los Hispanoparlantes No Hablamos De Güevadas"
Porque a estas alturas ya imaginamos el motivo para que casi no haya sitios hechos con esta técnica. La banda ancha y los caños de internet cada vez más grandes, además de las máquinas cada vez más veloces, la hicieron obsoleta.
Recuerdo —para terminar— que
Mozilla tenía un código propietario que intentó funcionar como un
sprite; era
-moz-image-region. Lo llegué a probar en un
Firefox 0.x, pero me parece que en la versión 1.x ya no existía. No resolvió el asunto de poner el punto de origen de la "región" como si fuera el origen de la imagen. Y así se parecía mucho al
clip(), por lo que fue eliminado.
Y un comentario al margen de CSS : en PHP se pueden generar recortes de una imagen más grande, y mandarlos al código fuente como si cada uno fuera una foto individual. Por supuesto que para la máquina cliente van a ser todas imágenes distintas y sería lo mismo que así lo fueran también en el servidor, pero como posible ventaja del método está la de subir un sólo archivo a proveedores que nos pongan algún tipo de límite para guardar nuestras imágenes.
Les dejo algunos enlaces más, como para probar que el método es muy útil, pero para hacer efectos y aprovecharlo con imaginación. El primero es una animación interactiva y lo hizo
DIL (es claramente mucho mejor que mi ejemplo), el segundo refuerza la idea de
kazafun, el tercero es un "visor 360°" de
Carlitos, los otros 2 tienen que ver con un generador de recortes que creó
caricatos Celuloide virtual cargar una imagen del menu en css Visor de panorámicas Dibujar rectangulos #20
mapas y rollover #4
Saludos
furoya