JMiur [E]

Aunque la página principal de netzgesta.de suele estar temporalmente cerrada en protesta contra las patentes de software, aún así podemos ingresar a ver su páginas internas y encontrarnos con una serie de scripts que podemos descargar y utilizar y que nos permiten crear efectos especiales en las imágenes.


En todos los casos, usarlas es muy sencillo. Basta descargar el archivo ZIP, descomprimirlo y alojar el script en un servidor propio. Como si fuera poco, el ZIP contiene ejemplos diversos y toda la documentación necesaria.

Glossy nos permite agregar bordes redondeados y sombras: Descargar glossy.js 1.3.

El script podemos agregarlo a la plantilla o a cualquier post, mediante:
<script type="text/javascript" src="URL_glossy.js"></script>
Para utilizarlo en una imagen, debemos agregarle la clase a la etiqueta:
<img class="glossy" src="URL_imagen" />
Lo más interesante es que en todos estos scripts, podemos agregar más datos en la misma clase para personalizar el efecto; por ejemplo:
<img class="glossy iradius25" src="URL_imagen" />
Las clases extras aceptadas son:

iradius25 para variar el radio, desde un mínimo de 0 a un máximo de 50 (por defecto es 25 y es un valor expresado en pixeles)
ibgcolor000000 es el color de fondo en formato hexadecimal (000000 a FFFFFF)
igradient000000 es el color que define una gradiente (000000 a FFFFFF)
horizontal cambia la dirección de la gradiente
noshadow varía el tipo de sombra

Algunos ejemplos con una imagen cualquiera:


Otros dos ejemplo utilizando un GIF vacío, creando una barra separadora:



Corner es una variante de la anterior y puede descargarse aquí.

Instant crea un marco alrededor de la imagen. Descargar instant.js 1.2.

Insertamos el script en la página y, para usarla, agregamos class="instant" a la imagen, utilizando el efecto simple o con parámetros:
<script type="text/javascript" src="URL_instant.js"></script>

<img class="instant" src="URL_imagen" />

<img class="instant ishadow50" src="URL_imagen" />
Las posibles opciones son las siguientes:

ishadow33 modifica la opacidad de la sombra, varía entre 0 y 100 (por defecto es 33 y su valor es un porcentaje)
icolorF0F4FF es el color base del marco en formato hexadecimal (000000 a FFFFFF)
itiltleft | itiltnone | itiltright se utilizan para determinar la dirección del giro


Instant crea un marco alrededor de la imagen. Descargar slided.js 1.0.

Insertamos el script en la página y para usarla, agregamos class="slided" a la imagen, utilizando el efecto simple o con parámetros:
<script type="text/javascript" src="URL_slided.js"></script>

<img class="instant" src="URL_imagen" />

<img class="instant ishadow20" src="URL_imagen" />
Las posibles opciones son las siguientes:

ishade50 modifica la opacidad de la sombra, varía entre 0 y 100 (por defecto es 50 y su valor es un porcentaje)
ishadow40 modifica la opacidad de la sombra, varía entre 0 y 100 (por defecto es 40 y su valor es un porcentaje)
noshadow elimina la sombra
nocircles elimina los círculos decorativos
ibgcolor000000 es el color base del marco en formato hexadecimal (000000 a FFFFFF)
igradient000000 es el color del gradiente en formato hexadecimal (000000 a FFFFFF)
horizontal | vertical dirección del gradiente (por defecto es diagonal)


Filmed crea un marco alrededor de la imagen. Descargar filmed.js 1.0.

Insertamos el script en la página y para usarla, agregamos class="filmed" a la imagen, utilizando el efecto simple o con parámetros:
<script type="text/javascript" src="URL_filmed.js"></script>

<img class="filmed" src="URL_imagen" />

<img class="filmed ishadow50" src="URL_imagen" />
Las posibles opciones son las siguientes:

ishadow30 modifica la opacidad de la sombra, varía entre 0 y 100 (por defecto es 30 y su valor es un porcentaje)
icolor000000 es el color base del marco en formato hexadecimal (000000 a FFFFFF)
istrip100 modifica la transparencia, varía entre 0 y 100 (por defecto es 100 y su valor es un porcentaje)
ishine25 modifica el brillo, varía entre 0 y 100 (por defecto es 25 y su valor es un porcentaje)
softshadow se utiliza si la imagen es muy grande
noshadow elimina la sombra

33 comentarios:

ADMIN.  

Los script van antes de head o despues de head???
Es que los he probado de las dos formas y no me causan ningun efecto en las imagenes.
Gracias.

Responder
Nico  

De todos ellos, solo probé Instant y me encantó. Los demás los tendré como tarea pendiente. Es interesante esto de aplicar efectos a todas las imágenes de un sitio

Responder
JMiur  

Los scripts pueden ponerse en el head, o sea, entre <HEAD> y </HEAD>. Nunca se coloca nada antes de <HEAD>.

También pueden colocarse en un post. En este caso, no los he dejado porque eran muchos scripts juntos y la carga se hacía muy pesada pero, las imágenes son las generadas durante las pruebas individuales.

Cualquier cosa, deja la URL del blog para verlo, si es que está colocado.

Nico, no hace falta aplicarlas a todas, como son clases, pueden aplicarse individualmente.

Responder
Toni  

Muy bueno el post, me quedo con el tema para probarlo en cuanto pueda, muchas gracias JMiur. Salud.

Responder
KiLotr  

Vaya, estan bastante utiles, veremos que buen uso podria darles... ultimamente he estado jugando con el template de 2 de mis blogs y quiza esto me sirva bastante.

Muy bueno, gracias.

Responder
JMiur  

Gracias, Tony, acabo de ver el backlink y te lo agradezco.

KiLotr: lo mejor es tener un blog de pruebas para "juguetear" sin riesgos. Por lo que he visto, son muy sencillas de implementar aunque algunos efectos difieren en IE y Firefox.

Responder
ADMIN.  

Algo debo estar haciendo mal, no consigo aplicar ningun efecto.
Me podrias explicar de forma mas detallada como los aplico para que salgan?
Gracias.

Responder
JMiur  

He dejado funcionando un ejemplo en mi blog de pruebas: AQUI

El ejemplo está en un post.

El código de ese efecto es el siguiente:

<script type="text/javascript"
src="http://vagabundia.googlepages.com/glossy.js">
</script>

<div>
<img src="http://vagabundia.googlepages.com/VagaTecla.jpg" class="glossy iradius50" />
</div>

por supuesto, aquí lo escribo en varias líneas pero se escribe sólo en una.

La imagen superior es la del efecto y la de abajo es la imagen sin efecto. Espero que te ayude. Sino es así, dime dónde lo estás probando para poder revisar el código.

Responder
Gem@  

Está visto que tengo que venir a diario de no ser así luego tengo el trabajo acumulado.
Y hablando del scripr vi algo parecido el otro día en xyberneticos guardé el enlace para verlo otro día y ahora veo aquí tu explicación.
Pero por qué eres así hombre... si sabes que me gusta probar todo esto y aún no he descansado de una cuando me meto en otra.
Eres mi pesadilla :)

Responder
Gem@  

¡Prueba superada¡ lo añadí en el logo ;)

Responder
JMiur  

Jajaja, si, vi ese post; en realidad ya lo había visto antes y lo había guardado en mis marcadores pero el sitio tenía muchos scripts interesantes y me llevó tiempo probarlos y resumirlos :)

No puedes quejarte, estos son simples de usar, ahora voy a ver cómo te ha quedado.

Se te extrañaba :D

Responder
Gem@  

No sé si se me extrañaba lo que sé que estaba deseando venir a tu "casa" y recrearme en cada detalle, tienes algo que embruja y nos hace tener dependencia cuando no podemos venir y hablo en plural porque a lo mejor los demás no lo describen así pero lo sienten de igual manera.
Hablando del tema que nos trae...
Si has visto mi logo comprobarás que la imagen tiene un efecto como de tardar en cargarse, mientras lo hace aparece la imagen sin el efecto.
Seguramente el efecto durará unos días (me gusta probar todo y todo a la vez no puede ser) así que quizás lo deje tal como estaba con la imagen, pero me gustaría saber el por qué de ese error.
Gracias genio ;)

Responder
JMiur  

El error no es tal, funciona de esa manera. Tal vez sea posible modificar el script para precargar la imagen y mantenerla oculta hasta que el efecto esté terminado pero, es algo que excede mis conocimientos.

Como bien dices, son cosas para probar, ver y su uso práctico es "relativo". Son experimentos interesantes que muestran las posibilidades que tiene la web y que están en constante desarrollo.

Lo de las "añoranzas" y tus bellas palabras iniciales no las contesto porque me hacen sonrojar :$

Las agradezco desde lo más profundo del corazón.

Responder
Gem@  

Busco la forma de añadir un marco a las imágenes J.Miur, algo parecido a Instant pero con un efecto diferente.
Un ejemplo
¿Puede ser creado con scriptaculous ?
Me gustaría como aparece en la imagen con el texto de previenw o ampliar.
Gracias ;)

Responder
JMiur  

Gem@:

El ejemplo que me muestras es bastante sencillo de implementar, es una tabla conde cada celda tiene como fondo los bordes del marco. Tiene el inconveniente de requerir que las imágenes sean todas iguales o bien que el marco sea lo suficientemente simple como para poder hacer un fondo repetitivo. Si quieres te envío el modelo de código.

Con scriptaculous no sé. Hasta ahora no he visto nada parecido pero, es muy probable que haya algo. O mas que nada, mediante prototype. Seguiré buscando.

Responder
Quique  

Hola de nuevo Jmuir. Por favor olvida mi comentario anterior, ahora he descubierto esto de glossy y me tiene hechizado... :)

De todas maneras no consigo que funcione. He colocado el js en google pages pero al aplicar el scrpt a una foto no me hace nada.
Incluso he copiado el tuyo que pegas en los comentarios con tu propio spcrit y me aparece la foto cuadrada sin glossy...

Hay que meter algo en la template? parece algo tan sencillo como colgar el archivo y aplicar el script, no lo entiendo...
Tengo el post en portada configurado asi pero no sale por si le quieres echar un vistazo

Gracias!

Responder
JMiur  

Pués yo tampoco le encuentro explicación, lo que has hecho es correcto y no requiere nada más. El script está y la imagen es correcta.

Sólo se me ocurre probar una cosa. En lugar de agregar el script en la plantilla, colócalo al inicio de ese post.

<script type="text/javascript"
src="http://......../glossy.js"></script>

Lo demás, lo dejas igual.

Es para probar si hay algún otro script que interfiere.

Responder
Quique  

no me sale ni metiendolo directo en el post. Debe haber algun script que interfiere. Lo probé en un blog de pruebas y me sale. Asi que tocara darle vueltas a los scripts que tengo por ahi y hacer limpieza

Gracias y saludos!

Responder
Quique  

Increible! es el script de statcounter! estoy flipando...

Responder
JMiur  

Una alternativa más: poner el script de Glossy justo antes del la etiqueta </body>, al final de la plantilla.

Responder
Quique  

Al final me salio. El tema era que tenia el script en la template y en una foto de un post. No puedes tener el script repetido o te sale un stack overflow error en explorer, vamos que ninguna foto con class lo reconoce y no hacian nada.
Ya esta arreglado, ahora pasando el rato aprendiendo el tema. Por cierto el bevel tambien se sale!

Saludos!

Responder
JMiur  

Me alegro que todo terminara en paz :D

Responder
LuzdeLuna  

JMiur, exactamente es esto!!:)pero baje Instant para empezar.
Me encontré dentro a 3 archivos js, solo tengo que subir instant o las otras librerias también?

Responder
JMiur  

Por lo que leo, debes alojar: cvi_text_lib.js e instant.js

Responder
Balthazar!  

Hola JMiur!! Tengo una duda existencial que no he podido solucionar por mi mismo... Me a gustado el efecto del glossy, pero me gustaría saber si es posible dejarlo en forma general para toda imagen que se ponga (por ejemplo) en los post's... ya que con mas de 2000 entradas se me hace un poco difícil agregarlo entrada por entrada...

Espero explicarme bien...

Saludos!! ^^

Responder
JMiur  

Supongo que se podría pero debeía modificarse la librería y eso, no tengo idea de cómo hacerlo.

Responder
Balthazar!  

xD!! Bueno, gracias de todas formas ^^! Y te agradezco en lo que me has ayudado en muchas cosas gracias a tu blog ^^!

Saludos!! =P

Responder
jαvιєя_ɢ  

Hola JMiur,

instalé el Glossy y el Corner en mis tres blogs, pero hay uno en el que no funciona.. he probado escribiendo el script en distintos lados de la plantilla y en el post, y no pasa nada. Lo raro es que los otros scripts instalados son los mismos en los tres blogs, lo único que cambia es la plantilla.

Estos son:
http://futbol-institutonacional.blogspot.com (aqui es donde no funciona)
http://clockwork-tangerine.blogspot.com
http://javier-g.blogspot.com

Ojalá me puedas ayudar..
Saludos.

Responder
jαvιєя_ɢ  

No he dicho nada, xD
Acabo de descubrir el script que me estaba molestando.. afortunadamente era uno que ya no ocupo.

Anyway, gracias por los datos =)

Responder
Albus Dumbledore  

Hola JMiur espero te encuentres bien, me gustaría hacerte una pregunta: quisiera hacer un menu para mi blog con imagenes en formato .png con fondo transparente, obviamente eso lo se hacer, el problema para mí es el siguiente, me gustaría que al colocar el cursor sobre alguna de las imagenes esta tuviera un contorno luminoso azulado parpadeante, no se si eso será posible usando HTML/JavaScript... Espero tu respuesta, espero puedas ayudarme... Te adjunto una imagen para que entiendas a lo que me refiero Imagen

Responder
JMiur  

Es probable que para eso puedas usar alguna clase de sprite.

Responder
Albus Dumbledore  

JMiur buscando y buscando por la web, me he encontrado este código que supuestamente agrega alrededor de las imágenes un borde luminoso de color blanco, pero no se como usarlo ni donde colocarlo, es más no se si funciona porque en la página no dan ninguna demostración... Espero por favor le eches un ojo a ver que tal...

Responder
JMiur  

Ese código utiliza algunos de los filtros de Internet Explorer así que, el efecto, sea cual sea, sólo será visible en ese navegador pero, difícilmente haga eso que mostrabas en tu ejemplo ya que las imágenes como todo lo que hay en una página web son rectágulos, transparentes u opacos pero rectángulos así que sombras, gradientes u otros efectos, afectan al rectángulo en si mismo.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR