Llegamos al final del primer proyecto dediez y toca dar un repaso a lo que hemos hecho en esta parte final.
Teníamos un formulario desde el que subir imágenes y un script php que a partir de una imagen generaba el css necesario para usarlo como css-sprite. En esta última parte hemos juntado el formulario de la imagen, con los datos que necesitábamos para la segunda parte (numero de iconos verticales y horizontales) para obtener una salida con todos los iconos mostrados uno a uno con su clase correspondiente.
Pero queríamos ir un poco más allá así que añadimos los nombres de las clases como input type text y permitimos recalcular todo el css con esos nombres para obtener unos nombres fáciles de recordar y por tanto fáciles de usar. Hasta aquí lo que ya teníamos previsto.
Pero como en cualquier proyecto una vez metidos en faena se nos ocurren mil y una formas de mejorarlo y resulta que muchos sets de iconos vienen con los iconos recortados individualmente por lo que modificamos el formulario de subida para permitir subir muchos iconos a la vez y detectando esto creabamos una imagen con todas los iconos subidos sobre el que ejecutamos el código generador de css y obteniamos así tanto la imagen como el css necesario.
Para endulzarlo un poco añadimos “bootstrap from twitter” para hacerlo un poco resultón y jquery para mejorar levemente la interfaz. Nada de esto modifica la esencia del proyecto ya que solo requiere el uso de ciertas clases en el maquetado por lo que pueden obviarse al leer el código.
Si queréis ver el resultado el código esta colgado en el repositorio de github de dediez del proyecto
¿Y ahora que?
El proyecto es mejorable en muchos aspectos: podemos añadir funcionalidades o reorganizar el código a voluntad (hemos obviado el uso de patrones de diseño como MVC). Os proponemos como mejora generar una imagen en la que se incluyan los nombres de las clases y sus iconos correspondientes de modo que se pueda recordar fácilmente como acceder a uno u otro icono.
¿Como lo haríais vosotros?
Comentarios recientes