tag:blogger.com,1999:blog-33571139.post2549253204254559336..comments2023-11-05T08:41:52.609-03:00Comments on Vagabundia: Un poco más allá de las imágenes (1ª parte)JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.comBlogger33125tag:blogger.com,1999:blog-33571139.post-52176632857618217212009-05-31T17:01:02.319-03:002009-05-31T17:01:02.319-03:00Perfecto Anahí. Es cierto eso de la clase :D Error...Perfecto Anahí. Es cierto eso de la clase :D Error mio :$JMiurhttps://www.blogger.com/profile/16731144451681787753noreply@blogger.comtag:blogger.com,1999:blog-33571139.post-85092170777804974522009-05-31T01:23:45.291-03:002009-05-31T01:23:45.291-03:00Uhhhhhh, ahora sí, resultó!!!!! Gracias JMiur.
Un ...Uhhhhhh, ahora sí, resultó!!!!! Gracias JMiur.<br />Un detalle: en vez de a#home- puse a.home- porque en el link dice class y con # no me aparecía, pero entonces me acordé de la diferencia entre uno y otra (la mejor forma de aprender es practicar, y preguntar, claro) :D<br />Saludos.Anahíhttps://www.blogger.com/profile/17651693639455955157noreply@blogger.comtag:blogger.com,1999:blog-33571139.post-76732321636996131892009-05-31T00:49:07.118-03:002009-05-31T00:49:07.118-03:00Sí. tienes un error, algo que sobra.
#blog-pager ...Sí. tienes un error, algo que sobra.<br /><br />#blog-pager es el rectángulo general, va de lado a lado y es el que contiene todo lo demás. Las propiedades background, height y width se eliminan de allí; la única propiedad que debe tener es text-align:center:<br /><br />#blog-pager {<br />text-align:center;<br />}<br /><br />Apenas quites esas propiedades, verás que una flecha se coloca a un lado y la otra al otro.<br /><br />Las definciones de #blog-pager-newer-link y #blog-pager-older-link son correctas.<br /><br />Ahora, faltaría una más, la del HOME porque no está definida así que agrega esto:<br /><br />a#home-link {<br />margin: 0pt auto;<br />width: 40px;<br />height: 40px;<br />display: block;<br />background:transparent url(http://img529.imageshack.us/img529/986/spritemad.png) no-repeat -80px 0;<br />}<br /><br />Esta, no flota, debemos convertirla en bloque y centrarla.JMiurhttps://www.blogger.com/profile/16731144451681787753noreply@blogger.comtag:blogger.com,1999:blog-33571139.post-62391448343176771412009-05-30T22:42:24.996-03:002009-05-30T22:42:24.996-03:00Gracias por la paciencia, JMiur. Eso que me dice e...Gracias por la paciencia, JMiur. Eso que me dice es lo que yo le entendí desde un principio, y así es cómo lo hice. Pero el caso es que se me amontonan las imágenes en el medio.<br />Saludos.Anahíhttps://www.blogger.com/profile/17651693639455955157noreply@blogger.comtag:blogger.com,1999:blog-33571139.post-48669461967494767492009-05-30T15:07:40.870-03:002009-05-30T15:07:40.870-03:00A ver si puedo explciarlo de otro modo. El enlace ...A ver si puedo explciarlo de otro modo. El enlace queda como está, no hay que modificar nada, sólo quitar la etiqueta IMG y poner el background en #blog-pager-older-link<br /><br />Así que, esta parte empieza con la etiqueta A<br /><br /><a ... y aquí no tocamos nada, queda todo igual ... ><br /><B><img ... aquí está la imagen en una etiqueta que es lo que quitamos ... ></B></a><br /><br />Eso en negrita, que es donde ahoras has colocado una imagene transparente, es lo que quitamos. Poniendo el fondo en el enlace, no hace falta.<br /><br />Queda así:<br /><br /><a LO QUE HAYA ESTO NO LO CAMBIAMOS ></a>JMiurhttps://www.blogger.com/profile/16731144451681787753noreply@blogger.comtag:blogger.com,1999:blog-33571139.post-19826358440646584352009-05-30T14:08:28.904-03:002009-05-30T14:08:28.904-03:00Había escrito un comentario pero no se publicó.
JM...Había escrito un comentario pero no se publicó.<br />JMiur, no entiendo dos cosas: ¿qué va en "xxxx"?, y en el código de la plantilla ya hay esto -id="blog-pager-older-link" class="blog-pager-older-link"- , ¿lo repito, lo reemplazo?<br />Lo probé y se me descuajeringa.<br />Saludos y gracias.Anahíhttps://www.blogger.com/profile/17651693639455955157noreply@blogger.comtag:blogger.com,1999:blog-33571139.post-16115303664228028822009-05-30T00:34:38.854-03:002009-05-30T00:34:38.854-03:00Entiendo. lo que has hecho. Está bien porque funci...Entiendo. lo que has hecho. Está bien porque funciona pero, lo razonable es eliminar la etiqueta IM y colocar el background en el enlace:<br /><br />#blog-pager-older-link {<br />background:transparent url(http://img529.imageshack.us/img529/986/spritemad.png) no-repeat scroll 0 0;<br />float:right;<br />height:40px;<br />width:40px;<br />}<br /><br /><a id="blog-pager-older-link" class="blog-pager-older-link" title="xxxx" href="xxxx"></a><br /><br />Fijate que el enlace, está vacio, no tiene nada; de esa manera, optimizas todo al no tener que cargar una imagen transparente.<br /><br />Los otros tres son iguales.JMiurhttps://www.blogger.com/profile/16731144451681787753noreply@blogger.comtag:blogger.com,1999:blog-33571139.post-13348425116375403992009-05-29T22:08:30.721-03:002009-05-29T22:08:30.721-03:00Ya lo solucioné con un transparent.gif y quedó pip...Ya lo solucioné con un transparent.gif y quedó pipí-cucú.<br />Saludos y gracias.Anahíhttps://www.blogger.com/profile/17651693639455955157noreply@blogger.comtag:blogger.com,1999:blog-33571139.post-19096226238883028702009-05-29T19:10:34.904-03:002009-05-29T19:10:34.904-03:00Si mal no entendí, la idea en este caso es poner l...Si mal no entendí, la idea en este caso es poner la imagen en el blog-pager en lugar de hacer una clase aparte, ¿no? <br />Ahora, las imágenes aparecen, pero se me amontonan en el medio :o<br />http://pruebasdeanahi.blogspot.com/search?updated-max=2009-05-27T08%3A22%3A00-07%3A00&max-results=2<br />(dejé las letras de guía xq si no me pierdo)Anahíhttps://www.blogger.com/profile/17651693639455955157noreply@blogger.comtag:blogger.com,1999:blog-33571139.post-63389013726176896272009-05-29T15:22:08.197-03:002009-05-29T15:22:08.197-03:00A ver si puedo explicarlo.
En el ejemplo que tien...A ver si puedo explicarlo.<br /><br />En el ejemplo que tienes, hay un enlace A y una imagen en una etiqueta IMG. En realidad, la idea es no usar la imagen en una etiqueta IMG sino, dejar el enlace sin nada, vacio y colocar la imagen como fondo de la etiqueta A<br /><br /><A HREF="" REL="nofollow"> </A>Si normalmente hago eso, en realidad, no veré nada pero, ahí entra el CSS. Primero, convierto el enlace en un bloque, de esa manera, puedo dimensionarlo. Ya está convertido en bloque porque tiene una propiedad float:left;. Lo que me falta es darle medidas. Así que se las agrego:<br /><br />blog-pager-newer-link {<br />float:left;<br />height:40px;<br />width:40px;<br />}<br /><br />¿Por qué 40x40? porque voy a mostrar un pedacito de una imagen más grande y voy a posicionar el fondo de tal manera de ubicarlo en módulos de 40, hacia arriba, hacia abajo o hacia los lados. Es como tener un cuadradito de 40x40 e irlo ubicando en alguna parte de una hoja más grande. Así que a lo anterior, le agrego el fondo:<br /><br />blog-pager-newer-link {<br />background: transparent url(http://img529.imageshack.us/img529/986/spritemad.png) no-repeat -40px 0;<br />float:left;<br />height:40px;<br />width:40px;<br />}<br /><br />Muevo la imagen de fondo a la izquierda con -40px y veo la flecha hacia la izquierda.<br /><br />Si pusiera:<br />background: transparent url(http://img529.imageshack.us/img529/986/spritemad.png) no-repeat 0 0;<br />veria la flecha hacia la derecha<br /><br />Si pusiera:<br />background: transparent url(http://img529.imageshack.us/img529/986/spritemad.png) no-repeat -80px 0;<br />veria la casita de home (la muevo mucho más a la izquierda)<br /><br />Lo que estoy moviendo es lo que está "debajo" El enlace siempre es el mismo, un cuadrado de 40x40 y desplazo el fondo para ubicarlo en alguna parte.<br /><br />El resto de esa imagen tiene otras mediadas y no es de 40x40 así que si se quiere usar, hay que cambiar el tamaño del enlace, por ejemplo si es de 30x30:<br />background: transparent url(http://img529.imageshack.us/img529/986/spritemad.png) no-repeat 0 -40px;<br />muestra una flecha hacia abajo<br />y<br />background: transparent url(http://img529.imageshack.us/img529/986/spritemad.png) no-repeat -30px -40px;<br />una flecha hacia abajo<br /><br />¿Se entiende algo?JMiurhttps://www.blogger.com/profile/16731144451681787753noreply@blogger.comtag:blogger.com,1999:blog-33571139.post-44541088482388635002009-05-29T08:50:52.583-03:002009-05-29T08:50:52.583-03:00Recién recién caigo en esta entrada... ¡¡de hace 2...Recién recién caigo en esta entrada... ¡¡de hace 2 años!! :P<br />JMiur, hace días que estoy intentando hacer esto de los sprites y no me sale: ya vi como ochenta tutoriales diferentes, en 35 idiomas diferentes, todos aplican 47 técnicas parecidas pero diferentes, y me conseguí como 7 programitas que fabrican la imagen y que funcionan diferente, de uso libre o trial... ahhhhhhhhhh (suspiro).<br />Lo quiero aplicar a varias imágenes "standard" del blog, x ej. el post-pager... y así, ¿me ayuda?<br />Le muestro:<br />http://pruebasdeanahi.blogspot.com/search?updated-max=2009-05-27T08%3A22%3A00-07%3A00&max-results=2<br />Las que aparecen son img indiv.<br />la de entradas recientes está puesta con el sprite.<br />Bueno, espero que esta carta se publique y le llegue, porque tardé un buen rato en escribirla. ¦)Anahíhttps://www.blogger.com/profile/17651693639455955157noreply@blogger.comtag:blogger.com,1999:blog-33571139.post-9963130748599266862009-05-27T18:34:20.592-03:002009-05-27T18:34:20.592-03:00Turko:
background no permite redimensionar las imá...Turko:<br />background no permite redimensionar las imágenes, sólo posicionarlas. una forma de posicionar es colocar algo así (eso lo centra):<br /><br />background: transparent url(imagen) no-repeat 50% 50%;<br /><br />El problema que tienes es que al usar width y height en la etiqueta IMG, lo que haces es, deformarlas ya que la proporción ancho/alto varia con respecto al original. El resultado, siempre será un poco aleatorio.JMiurhttps://www.blogger.com/profile/16731144451681787753noreply@blogger.comtag:blogger.com,1999:blog-33571139.post-26185866276760986122009-05-27T16:41:39.175-03:002009-05-27T16:41:39.175-03:00Tengo una duda JMiur. En el elemento background ur...Tengo una duda JMiur. En el elemento background url(imagen), existe algún parámetro para redimensionar la imagen?<br /><br />La cosa está así: En mi blog tengo un widget con las ultimas entradas, justo debajo de la barra donde esta el link de "Inicio". Aparecen las imágenes del post, si no hay ninguna, aparece una imagen al azar previamente definida. El Gadget es <A HREF="http://elescaparatederosa.blogspot.com/2009/03/ultimas-entradas-con-miniatura-de.html" REL="nofollow">este</A>.<br /><br />Lo que no me gusta, es que al redimensionar la imagen a 60 x 50, se desfigura. He visto en <A HREF="http://lafaviconera.blogspot.com/" REL="nofollow">La Faviconera</A>. que tienen un script mostrando por medio del Feed las ultimas entradas de algunos blogs. En ellas se muestra un thumbnail de la imagen que corresponde al post.<br /><br />La diferencia es que, la imagen se redimensiona un poco, y después se corta, apareciendo una imagen más pequeña y mostrando solo una parte de toda la imagen completa. La mitad. <A HREF="http://img43.imageshack.us/img43/4982/imagencortada.png" REL="nofollow">Algo así</A>.<br /><br />Neceseitaria saber cual es el código normal, para despues arreglarmela en el archivo del script que <A HREF="http://www.fileden.com/files/2008/8/19/2055830/opz-Ultimas_entradas_Horizontal.txt" REL="nofollow">es este</A>.<br /><br />Espero haber podido explicarlo. :PTurkohttps://www.blogger.com/profile/17167118195976373112noreply@blogger.comtag:blogger.com,1999:blog-33571139.post-45047520865066676982009-01-31T15:41:00.000-02:002009-01-31T15:41:00.000-02:00El ejemplo es algo primitivo, habría que hacerle v...El ejemplo es algo primitivo, habría que hacerle varios agregados. Por ejemplo, la lógica es deshabilitar el reinicio cuando se está ejecutando porque sino, pasará eso, habrá muchos loops simultáneamante. En realidad INCIAR/DETENER debería ser sólo un botón y no dos.<BR/><BR/>Imagino que para el reinicio, lo que te debe faltar es poner en cero el valor de xPos.JMiurhttps://www.blogger.com/profile/16731144451681787753noreply@blogger.comtag:blogger.com,1999:blog-33571139.post-19770222549190035092009-01-31T09:41:00.000-02:002009-01-31T09:41:00.000-02:00Ah una cosita mas, me gustaria agregar un boton ex...Ah una cosita mas, me gustaria agregar un boton extra para que la imagen vuelva al principio, si no es mucha molestia, intente hacerlo yo solo, pero cuando llamo a la funcion doLoop de nuevo, el movimiento no empieza desde el principio, empieza desde donde se quedo cuando detuve el moimiento.Shark_Bloodyhttps://www.blogger.com/profile/00014403888767987726noreply@blogger.comtag:blogger.com,1999:blog-33571139.post-92016164844643594032009-01-31T09:33:00.000-02:002009-01-31T09:33:00.000-02:00Hola JMiur, si se ejecuta mas de una vez la funcio...Hola JMiur, si se ejecuta mas de una vez la funcion doLoop, la funcion stopLoop no detiene el movimiento, ¿como hago para que sin importar cuantas veses se ejecute se detenga igual?, espero haberme expresado bien :$<BR/><BR/>Por las dudas te dejo un ejemplo practico de mi problema, fijate que si apretas iniciar mas de una vez, al apretar detener el movimiento sigue, bueno yo querria que se detuviese igual.<BR/><BR/>Todo esto referido al ultimo ejemplo de este post.Shark_Bloodyhttps://www.blogger.com/profile/00014403888767987726noreply@blogger.comtag:blogger.com,1999:blog-33571139.post-19821773018880036702007-09-24T14:42:00.000-03:002007-09-24T14:42:00.000-03:00Me alegro que funcionara. Fijate en el Paint, debe...Me alegro que funcionara. Fijate en el Paint, debe haber alguna opcion para GIFS y las transparencias.JMiurhttps://www.blogger.com/profile/16731144451681787753noreply@blogger.comtag:blogger.com,1999:blog-33571139.post-60494568724246910842007-09-24T11:59:00.000-03:002007-09-24T11:59:00.000-03:00Gracias JMiur, ahora si quedaron bien, muchas grac...Gracias JMiur, ahora si quedaron bien, muchas gracias!<BR/>No, no voy a bajar el programa es muy pesado para mi poco espacio en el disco, 200 mg para mi es mucho.<BR/>Pero después voy a hacer una prueba y te cuento sobre un código para los gif, una pabada, pero si resulta te digo.<BR/>Otra vez graciaaaaasssss...Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-33571139.post-76693217879009850932007-09-23T15:43:00.000-03:002007-09-23T15:43:00.000-03:00Te había enviado un mail con la imagen pero, viend...Te había enviado un mail con la imagen pero, viendo este comentario, ya te he enviado un segundo mail con ambas imágenes corregidas.JMiurhttps://www.blogger.com/profile/16731144451681787753noreply@blogger.comtag:blogger.com,1999:blog-33571139.post-42939199452734090642007-09-23T12:29:00.000-03:002007-09-23T12:29:00.000-03:00Hay no :(, JMiur, acabo de poner la imagen en el b...Hay no :(, JMiur, acabo de poner la imagen en el blog y, si podés mirala, se ven las letras rojas como el fondo y no se puede leer nada, queda fea, yo ya había obtenido el mismo resultado cuando la achiqué en gif.<BR/>Ya te mandé el mail, fijate si se te ocurre alguna otra cosa, con la imagen que te mandé creo que eso no pasa, pero la primera es diferente, no se porque... Si te fijas el original está en uno de los post que está en la primera pagina del blog.<BR/>Gracias igual.Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-33571139.post-61115797900033635182007-09-23T11:25:00.000-03:002007-09-23T11:25:00.000-03:00Gracias JMiur, una de las imagenes era esa, la que...Gracias JMiur, una de las imagenes era esa, la que pusiste, y esas son las medidas, ahora te mando al correo la otra que es la redonda, pero en su tamaño original que es gif.<BR/>Lo del Paint.net no pude bajarmelo, no entiendo nada de ingles, y tendría que bajarlo en zip que es lo único que se abrir.<BR/>Y el Fauxto no funciona, o no se como es.<BR/>Yo te mando al correo la imagen, pero no es que quiera que hagas todo el trabajo solo explicame como bajar el Paint.net en zip, soy totalmente nula con el ingles, burra...<BR/><BR/>Un saludo y mil gracias!Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-33571139.post-52228215269915009792007-09-23T00:13:00.000-03:002007-09-23T00:13:00.000-03:00k_nelita:Las únicas imágenes transparentes que pod...k_nelita:<BR/><BR/>Las únicas imágenes transparentes que podés usar en una página web son en formato GIF, también sería posible en formato PNG pero Internet Explorer no las muestra transparentes, así que queda sólo el GIF como seguro.<BR/><BR/>Para eso, hay que indicarle al software de edición de imágenes que lo haga. Es largo de explicar pero, en general, uno indica que cierto color (blanco, por ejemplo) es transparente y ese, es un dato que guarda el archivo.<BR/><BR/>En resumen, si es un JPG, jamás será transparente.<BR/><BR/>El proceso lógico no es convertilas a JPG ya que este formato modifica los colores. Fijate: <A HREF="http://img229.imageshack.us/img229/9683/blog1pw7.gif" REL="nofollow">esta</A> la he tomado de tu blog, y, como es un GIF, lo he hecho transparente, la otra, es JPG y al convertirla queda mal porque el blanco no es uniforme.<BR/><BR/>No recuerdo si Paint tiene estas opciones.<BR/><BR/>Resumo:<BR/><BR/>Podés tratar de buscar un software adecuado para editar imágenes, por ejemplo <A HREF="http://www.getpaint.net/" REL="nofollow">Paint.Net</A>.<BR/><BR/>Podés intentar utilizar un editor online como <A HREF="http://www.fauxto.com/" REL="nofollow">Fauxto</A><BR/><BR/>Podés enviarme las dos imágenes por correo, decirme en que tamaño las querés redimensionar y las convierto, es algo muy sencillo pero se necesita tener el programa que lo haga.JMiurhttps://www.blogger.com/profile/16731144451681787753noreply@blogger.comtag:blogger.com,1999:blog-33571139.post-7330607856985235442007-09-22T21:23:00.000-03:002007-09-22T21:23:00.000-03:00Hola JMiur, otra vez yo buscando ayuda, ya me qued...Hola JMiur, otra vez yo buscando ayuda, ya me quedé bizca leyendo todo sobre las imagenes pero parece que no encuentro lo que busco, pero seguro que lo sabés, como lo sabés todo...<BR/>Mirá tengo una imagen, que es gif, necesité achicarla, no se manejar mas que el Paint y hasta por ahí nomás, el que saben hasta los chicos.<BR/>Al meterla en Paint para achicarla tengo que cambiarla a jpg sino la pixela y se deforma, bueno hasta ahí vamos bien, pero después que le pongo la medida que necesito me queda con fondo blanco, cuando la imagen original lo tenía transparente o no tenía fondo ninguno.<BR/>La imagen no es simétrica, sino la podría recortar y listo, pero no, no puedo, tiene una forma un tanto difícil de explicar.<BR/>Necesito algún código para que se funda el fondo con el color de la sidebar, no se si me explico, debe haberlo no?<BR/>Si no me entendés y tenés ganas pasate por mi blog y vas a ver las imagenes, porque son dos, que tienen un cuadrado blanco de fondo.<BR/>Ayudame porfi, ya no se a quien mas pedirle ayuda, nadie sabe... snif, snif<BR/>Y vos sos un GENIO!!!<BR/>Un saludo :)Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-33571139.post-67368460673304322042007-05-19T00:37:00.000-03:002007-05-19T00:37:00.000-03:00¡Qué visita increible! espero que te diviertas :)¡Qué visita increible! espero que te diviertas :)JMiurhttps://www.blogger.com/profile/16731144451681787753noreply@blogger.comtag:blogger.com,1999:blog-33571139.post-10661918668173992912007-05-18T23:52:00.000-03:002007-05-18T23:52:00.000-03:00woaaaaaaa!!!!! cuanta data. que buen blog amigo. y...woaaaaaaa!!!!! cuanta data. que buen blog amigo. y yo que largue el .net para ver mas PHP y Java (me lo debo desde hace tiempo) ya te tengo en mis Marcadores...El Señor de las Anecdotas (pero sin elfos)https://www.blogger.com/profile/02650177343036911736noreply@blogger.com