Creo que todos valoramos mucho una respuesta simple y efectiva a nuestros problemas. Ojalá todas fueran así.
En el mundo del desarrollo de software no siempre se pueden encontrar respuestas sencillas a problemas sencillos (mucho menos a problemas complejos). Muchos profesionales y entusiastas llegan a atomar el enfoque equivocado cuando se trata de resolver un problema de código. La mayoría de estos, buscan soluciones complejas y “robustas” que no siempre son fáciles de implementar.
Un problema persistente para los que construímos interfaces graficas de usuario son los bordes redondeados. Por alguna extraña (y muy molesta razón), CSS (Cascading Style Sheets) no tiene una instrucción para redondear a placer los border de una caja o de un botón en todos los navegadores; siendo Internet Explorer el más desgastante en este sentido.
Existen decenas (o tal vez miles) de tutoriales en línea para realizar esto pero casi todos requieren mucho más reingeniería del HTML o del CSS de la necesaria. Sin embargo, me encontré con una excelente solución en el blog de Hedger Wang.
En esta entrada títulada “Simple Round CSS Links (Wii Buttons)” explica como mediante 2 tags de HTML, 1 imagen PNG y un archivo CSS, puede hacer que un simple link se vea como un elegante butón redondeado, similar a los de la interfaz de Nintendo Wii.
Lo mejor de su aportación es la simplicidad. Lo que yo hice fue:
1. Crear un nuevo archivo CSS llamado buttons.css y pegar el código provisto por Wang.
2. Bajar la imagen provista por Wang (border.png) a mi computadora y referenciarla adecuadamente en buttons.css
3. Agregar la clase “button” a mis links (anchors) y botones (input type:submit)
4. Aseurarme de que el texto dentro de los anchors estuviera delimitado por <span> y que los botones por su parte estuvieran delimitados por <span>
5. Disfrutar
El éxito viene de la simplicidad. Analizando el código, lo que hizo Wang fue superponer dos elementos (SPAN y ANCHOR o SPAN e INPUT) y darles a cada uno el mismo fondo (una imagen del botón redondeado sumamente alargada). A uno de los elementos lo inicio por la izquierda y al otro por la derecha, logrando completar el botón sin necesidad de generar más de una imagen.
Además, para lograr los efectos necesarios al momento de hacer deslizar el mouse sobre el botón, lo que hace es simplemente cambiar las coordenadas donde inica la imagen y mostrar otra parte donde el color del borde y del fondo cambian).
Al utilizar este enfoque, logra que su solución se fácil de implementar porque no requiere de poner varias cajas con varias imagenes, ni alguna otra suerte como las que abunban en Internet.
October 14th, 2008 at 12:09 am #Juan Fuentes
Estimado Cesar, que curioso es leer tu nota, creo que muchos sino es que todos tenemos el mismo conflicto con los “bordes redondeados”, en la Web hay miles de soluciones que sino con JavaScript, con css, o con manejo de imagenes, ahora mismo yo podría citar la forma en que lo soluciono, pero creo lo importante aqui no es la forma de hacerlo, sino la manera en que nuestras ideas apuntan a las mismas tendencias, yo mismo pase por esta situación y en mi compu tengo al menos 3 archivos ZIP de diferentes opciones para conseguir los bordes redondeados, más lo interesante del caso es que en ningún momento tu y yo lo hemos platicado de esto y sin embargo hemos caído en la misma situación.
Cuantas veces no nos ha pasado que decimos algo como “ehm, voy a inventar un auto que funcione con agua” pero alguien ya lo hizo al otro lado del planeta… entonces que esta pasando con nuestro proceso creativo?, o es que alguien más lee nuestras mentes?… yo no se, pero al menos en mi caso muchas grandes ideas las he visto en mano de alguien más y lo peor, al otro lado del mundo (literalmente).
A lo que quiero llegar con este rollo es que si pensamos y realmente creemos que puede funcionar pues lo mínimo que podemos hacer es intentarlo, aunque siempre tenemos la opción de esperar a que el creativo sea el amigo del otro lado del mundo!
October 15th, 2008 at 10:26 am #César Salazar
Efectivamente, creo que muchas personas nos enfrentamos cotidianamente a los mismos problemas. Yo creo que lo más inteligente es buscar qué se ha hecho, cómo se ha resuelto previamente y ver si se puede hacer una mejora a eso que ya existe. Si en el proceso encontramos un área de oportunidad para algo radicalmente diferente, podemos hacerlo y ser pioneros en ese sentido.
Por mi parte, siempre intento buscar una solución sencilla a cualquier problema, y si alguien mas ya lo hizo me encanta. De esta forma, puedo dedicar mi tiempo a otras cosas que realmente generen valor y es ahí donde se desarrolla la parte más interesante del proceso creativo.
Desde mi punto de vista, la creatividad no consiste en “crear” cosas nuevas, sino en modificar, aumentar, disminuir o eliminar lo que ya existe para hacer que la dinámica cambie. Eso pasa con la materia, la energía y las ideas. O al menos eso pienso yo.
October 15th, 2008 at 10:27 am #César Salazar
Juan:
Se me olvidaba….muchas gracias por tus comentarios. Son muy valiosos para mí y para CIMA Labs.
October 21st, 2008 at 11:52 am #xbox360 games
I bookmarked your blog, thanks for sharing this very interesting post