Capy.net
Drupal, Ubuntu, jQuery, CSS
Cuando lo veas vas a darte cuenta que muchas veces te ahogas en un vaso de agua por no tener en claro los pasos que tenes que seguir. Personalmente suelo ser muy desorganizado, bueno mi cabeza en realidad, y este tipo de ayudas son inestimables.
Pincha en la imagen para ver el articulo completo.
PD: si sos un loco de la usabilidad proba a ver e link que te dejé sin los estilos, para que veas lo que es la USABILIDAD! 
Buenas practicas para maquetar con sprites
hace 1 año
Esta es una practica que no he visto que sea muy extendida pero que es de las mas eficientes para un maquetador por la buena organización que presenta.
La idea es simple. creas un selector para el sprite, un selector por imagen del sprite y por ultimo vas asignándole el par class=”un-elemento-x sprite icono-del-sprite”
Pongo un ejemplo de como armaríamos la base CSS:
/*Primero defino el sprite*/
.sprite {
background: url(sprite.png) #transparent no-repeat;
}
/*Ahora los class de las imagenes contenidas en el sprite*/
.sprite .destacado { background-position: 0 -462px; }
.sprite .aceptado { background-position: 0 0; }
.sprite .cancelado { background-position: 0 -66px; }
.sprite .editado { background-position: 0 -132px; }
.sprite .eliminado { background-position: 0 -198px; }
.sprite .rss { background-position: 0 -264px; }
.sprite .me-gusta { background-position: 0 -330px; }
.sprite .bloqueado { background-position: 0 -396px; }
Para terminar un ejemplo practico:
<ul>
<li class="sprite destacado">Elementos destacados 50</li>
<li class="sprite cancelado">Elementos cancelados 10</li>
<li class="sprite eliminado">Elementos eliminados 200</li>
</ul>
Chau.
Cuando me ponía a hacer un sprite de iconos y/o bullets para una web, solía darme con un problema:
Cuando creaba un sprite con iconos en forma vertical, y los aplicaba a una lista HTML me pasaba lo que ven en la siguiente imagen.
Explicado en 1000 palabras que valen mas que una imagen, lo que me pasaba es que al hacerse mas altos los que el espacio que había entre los iconos de la imagen, la siguiente imagen del sprite quedaba expuesta.
La solución seria dejar mas espacio, es lo mas lógico, pero nunca se sabe cuando te vas a volver a quedar corto.
La siguiente deducción que habrán hecho es la de “bueno, mucho mas espacio entre iconos”, y yo te digo que para eso no hagas un sprite porque pierde sentido. Si para meter 10 iconos en un sprite voy a tener que hacer una imagen de 3000px de alto, y no hablemos de 50… Además de que el espacio en “blanco” ocupa espacio en KB también.
LA SOLUCION PERFECTA
Antes de seguir y como nobleza obliga aclaro que la idea original es del blog aaronbarker.net.
La solución perfecta para este tipo de sprites es hacer que los iconos estén en posición diagonal. ASI DE SIMPLE.
Por si todavía no ves el beneficio te lo comento. Viene a ser que aunque un elemento de una lista se estire 5000px hacia abajo y 3000px hacia la derecha, no va a colisionar (dejar ver) ninguna otra imagen.
Una vez mas ejemplo, mil palabras, y eso
En la imagen se aprecia como los iconos restantes del sprite no se van a exponer nunca (están mas tenues porque se supone que no se ven en la practica)
Les dejo el respectivo ejemplo ya maquetado para que lo toqueteen con Firebug y sucedáneos:
Personalmente felicito al que se le ocurrió una solución tan simple pero eficiente.
Cahu.
Algo raro que me paso hace unos días fue que el usuario que crea Ubuntu cuando haces una instalación nueva dejo de ser miembro del grupo de administradores, y por consiguiente dejo de poder ejecutar sudo.
Para solucionarlo al final resulto ser mucho mas simple de lo que pensaba:
Info: mi usuario se llama “capy” en este ejemplo.
- Pone el disco (CD / DVD) de Ubuntu en la maquina.
- Reiniciala
- Cuando se presente el menú del CD de Ubuntu selecciona “Recuperar un sistema dañado”:
- Como lo anterior te va a entregar una consola de root, ya podemos tocar el archivo de grupos
- Ejecuta en consola: nano /etc/group
- Busca la linea “admin:x:119:” (el 119 puede ser otro numero, lo que interesa es que el grupo sea “admin”) y agregale tu usuario como se ve acá: “admin:x:119:capy“
- Guarda los cambios y reinicia.
A partir de ahora deberías volver a poder hacer uso de sudo con tu usuario predeterminado.
(Antes de que leas los primeros párrafos, que sepas que hay dos soluciones así que lee todo)
Un problemita con el que me di hoy es que tenía que cambiar la estructura de las URL de un Content-type, conservando las creadas anteriormente…. ¿y saben que? no hay una opción en la configuración de Pathauto que haga justamente eso:
No dije que no existe, solo que no esta ahí. por raro que parezca, los creadores de Pathauto en lugar de poner entre las opciones generales esta opción, como todas las demás, la han puesto un poco escondida. Y la encontré, estaba escondida en la gestión de contenido (admin/content/node) entre las opciones de acciones masivas:
Ahora que sabemos donde esta solo tenemos que aplicar un filtro para para que solo se vean los nodos de un determinado Content-Type, marcar todos los de esa pagina, seleccionar la acción “Update url alias“, y así en todas las paginas subsiguientes (si es que las hay).
Hasta acá la solución mas “ligera” porque no hace falta ningún modulo especial para esta tarea siempre y cuando no tengas miles de nodos.
En el caso de que SI tengas un huevo montón de nodos, vas a necesitar de la ayuda de “Views” y del modulo “Views Bulk Operations“.
Views trae habilitada por defecto una vista llamada “admin_content” (admin/content/node2) que viene a ser la versión mejorada del gestor de contenidos que viene por defecto en Drupal (el que usamos en la primera solución).
Lo anterior sumado a que “Views Bulk Operations” nos da la capacidad de aplicar acciones masivas a todo lo que views pueda listar…
A la solución: Seguí estos pasos para configurar “Views Bulk Operations” / Pathauto y Views para que operen armoniosamente:
Eso claramente nos va a ahorrar una ingente cantidad de tiempo a la hora de actualizar si tenemos miles de nodos.
Chau.