Wet floor
¡Damas y caballeros! ¡Niños y niñas de todas las edades! ¡Tengo el (dudoso) honor de presentarles a Wet floor!
Mi músculo de “diviertete mientras programas” se estaba anquilosando hasta niveles alarmantes y Wet floor es una especie de reacción “del mismo valor pero en sentido contrario”.
Al final no ha sido todo lo divertido que podría haber llegado a ser, sobre todo por el innombrable, pero quizá parte de la culpa fuera mía (mi manía de siempre decir “¿Y si ahora…?”). Aunque yo creo que ha quedado algo bastante decente (si no seguiría arreglando cosas).
¿De que va? Simple. Como su nombre indica crea el sobreutilizado efecto Wet floor en cualquier imágen que se proporcione (todos los formatos que ImageMagick soporta), pudiendo indicar el porcentaje de opacidad del reflejo y el tamaño del reflejo. Una vez generada la imagen deseada es posible ver en el mismo navegador el efecto sobre cualquier color de fondo que se desee.
El resultado final se consigue mediante un poco de Ruby, un poco de Javascript y algunas horas rompiendose la cabeza con los diferentes navegadores. Y a pesar de ello algunos se siguen resistiendo a mostrar el resultado perfecto.
Luego están los “monadas y pijadas” que se le ocurrian a uno: que en vez de introducir valores en los formularios se arrastren sliders (aunque existen cuadros de texto editables cuando el Javascript está desactivado), un selector de color de fondo de la imágen como el de los editores gráficos, selección del idioma (basandose en las preferencias del navegador o en una cookie)…
Lo único que a mi me parece malo es que tarda en cargar un poco, muy posiblemente debido a las librerías de Javascript, por lo demás a mi me parece que está lista para salir al campo. Que os divirtáis.
Bugs conocidos:
- IE6 no deja margenes en la imagen.
- IE6 no respeta el margen del final de la página.
- Safari (versión 419.3) no modifica la altura de las imágenes muy anchas (corregido en las versiónes nightly).
- Algunas versiones de Konqueror podrían tener el mismo problema.
- Opera 9.0.2 no actualiza el color de fondo “debajo” de la imágen (se mantiene negro).
- Los navegadores sin Javascript activado pierden la posibilidad de modificar el color de fondo (se mantiene negro).
- Navegadores comprobados: Firefox (1.5 y 2.0), Camino (1.0.3), Safari (419.3), Internet Explorer (6.0) y Opera (9.0.2).
6 de Noviembre de 2006 a las 10:19
Dos cosas:
Te lo curras, aunque el fondo negro no deja apreciar bien la imagen resultante.. quizá le podías poner un marco o algo.
¿Wet floor está relacionado con High Fidelity? Curioso…
6 de Noviembre de 2006 a las 11:44
El fondo negro funciona bien con imágenes claras, pero no funciona con todas las imágenes (por ejemplo una con azules). El fondo blanco funciona también bastante bien en muchas imágenes, pero no en las claras. Normalmente se puede arreglar modificando la opacidad, los valores por defecto de 30/30 funcionan bastante bien en muchos casos (para iconos, por ejemplo, es mejor más altura, entre 50% y 80%). Por cierto, creo que sí que tiene un marco gris pequeñito…
Y sí, yo también lo vi raro… pero como me encanta la película/libro pues no me importa mucho.
6 de Noviembre de 2006 a las 12:33
WetFloor: crea el efecto de suelo mojado en cualquier imagen…
WetFloor te permite crear el efecto ’suelo mojado’ para cualquier imagen directamente desde el navegador. Simplemente sube la imagen y selecciona altura y opacidad del efecto y listo. Más en el blog del autor (http://ruido-blanco.net/blog/archivos/2…
6 de Noviembre de 2006 a las 12:46
Como te lo curras! Iba a diggear, pero veo que ya han hecho el trabajo
6 de Noviembre de 2006 a las 12:51
¿Material para digg? Me voy a poner rojo como un tomate.
6 de Noviembre de 2006 a las 14:41
Muy currado maese Dani.
6 de Noviembre de 2006 a las 20:16
No te pongas rojo y pon los enlaces en el post para diggearlo….. ¬¬
6 de Noviembre de 2006 a las 20:40
Odio las ristras de “iconos sociales” al final de las entradas de muchos blogs. No voy a ir yo despotricando contra ellos y luego utilizar un doble rasero para mí.
(PD: No estoy desestimando que se haya enviado a digg o a menéame, cosa que agradezco, pero simplemente no me pierde la “fama”).
7 de Noviembre de 2006 a las 01:20
Tremendérrimo!
Material de diggeo, meneo, deliciouseo y deto’, sin duda.
Hasta lo voy a probar con el InnombrablE, solo por el curro que te ha llevado XD
Una peticion/sugerencia: seria posible añadir otro slider para manejar la altura “en tiempo real”? o es pedir demasiado?…. weno, ya vengo comprobando que contigo nunca es demasiado, pero vamos yo te lo sugiero por si no se te habia ocurrido y no es mucho curro (que tampoco te quiero explotar :P)
Muy, muy bueno. /clap para ti ;P
7 de Noviembre de 2006 a las 09:22
Demasiado. La imágen se genera a priori de la página por lo tanto no se puede modificar ni la altura ni la opacidad (y no creas que no lo pensé).
Hay otra solución, que es utilizar Javascript para crear el reflejo (reflect.js) y, supongo, que asi se le podría cambiar el tamaño y la opacidad dinámicamente, pero no podrías salvar el resultado (al menos no de manera sencilla) y sólo funciona en Safari/Firefox.
De cualquier forma creo que generar la imagen no es el problema, sino que una vez generada hay que mandarla por los tubos, que todos sabemos lo llenos que están.
7 de Noviembre de 2006 a las 10:54
Venga, tonto, no seas tímido. Ya hago yo el trabajo:
menéame, digg
Espero que no me censures el comentario
7 de Noviembre de 2006 a las 13:05
No te lo censuro, lo que pasa es que soy un vago, pero ahora he tenido que perder el tiempo corrigiendo tu comentario. A ver si aprendo a no ser tan vago, que a la larga conlleva más trabajo.
PD: También he corregido el problemilla que has visto con tu comentario.