Carpetas

Trabajo una carpeta por cliente, y sí hay varios proyectos del mismo cliente creo una carpeta por proyecto.

Proyecto (Sitio web, logo, etc)

Docs (Documentos): Uso esta carpeta para guardar todos los documentos generados: cotizaciones, brief, calendarización, etc.

Sources (Originales): Contiene todos los archivos originales (PSD, AI, Fla, etc.) o cualquier archivo creado desde cero.

Historial: Esta carpeta solo la uso cuando un archivo original fue descartado o es muy viejo, para no mezclarlo entre los archivos "importantes".

Resources (Recursos): Son todos los archivos que no he creado yo pero que me sirven para trabajar el proyecto, usualmente proporcionados por el cliente o descargados de Internet.  imágenes, fuentes, iconos, etc.

Mockups, borradores, wireframe o como prefieran llamarlos.

Output (Para entrega o impresión): En Output están todos los archivos que verá el cliente. Por ninguna razón debería haber un archivo sin terminar allí y los archivos tiene el número de versión o la fecha. Generalmente son PDFs, JPG, o incluso código (duplicado, si se hacen cambios se crea nuevos archivos).

Sí ya fue enviado al cliente no lo borró ni reemplazo, cualquier cambio se agregará con nuevo nombre indicando la versión o fecha. Cuando hay varias revisiones creo una carpeta por cada revisión:

Revisión 1.

Revisión 2 (etc.)

HTML: Cuando son proyectos web uso esta carpeta para guardar todo el código que se crea y los elementos que se usan.

imgs. Carpeta para las imágenes listas para publicación (optimizadas para web)

styles. Carpeta de estilos CSS.

scripts. Carpeta de scripts Javascript u otros.

Un tip bastante obvio (demasiado) pero que me ayuda a encontrar rápidamente el archivo que estoy trabajando o que debo presentar, a no perder ni reemplazar archivos por accidente y a saber de que cambios me habla el cliente en las revisiones.

¿Más fácil? ¿Qué tal automático?

Como crear esas carpetas se volvió parte habitual del trabajo decidí crear un script que automatiza la tarea.

Descarga

Puedes descargarlo en los enlaces de abajo, ambos archivos son iguales la diferencia es que uno crea las carpetas en inglés y el otro en español. Para usarlo copialo en la carpeta en donde guardas tus proyectos, doble click y listo.

Funciona en Windows (98 en adelante).

---

“Ha quedado de sobra demostrado que ejecutar en buen orden lo que se debe hacer es siempre la más sólida póliza de seguro contra los fantasmas del caos”
— José Saramago

Otros temas

• Integrar JSmin con PSPad
• Mejorar la velocidad de trabajo en equipo

Un comentario | Envialo a twitter

(cc) 2010 ivanmendoza (@dic7).

El tip consiste en integrar JSmin  a los comandos favoritos de PSpad para comprimir el código JS sin salir del programa.

Ingredientes

• PSPad instalado (sobre Windows).
• JSMin versión línea de comandos para Windows (Descarga directa aquí).
• Un código javascript para usar de ejemplo.

Preparación

Ejecuta PSpad y crea un nuevo documento de texto, este servirá para crear un archivo BAT (proceso por lotes) que se encargará de ejecutar JSMin. El archivo debe contener el siguiente código y lo guardas como jsmin.bat en la misma carpeta que jsmin.exe

jsmin.exe <%1 >%2

Se usa un BAT porque JSMin no funciona correctamente al llamarlo directamente desde PSpad.

Crear un favorito en PSPad

Los favoritos están en la pestaña de el panel lateral de PSpad (si no esta visible lo mostras con Ctrl+F2), tiene un icono de corazón.

Busca un espacio en blanco de la barra y haces click derecho para mostrar el menú y crear un nuevo enlace.

En la ventana de nuevo enlace escribí

• JSmin como nombre
• busca el archivo BAT que creaste en el primer paso en Ruta
• y como parámetros agrega la siguiente línea

"%File%" "%Dir%%Name%-min.js"

La línea anterior envía la ubicación del archivo javascript y la ubicación del nuevo archivo comprimido agregando "-min" al nombre, por ejemplo si el archivo se encuentra en C:/codigo.js el nuevo archivo se creara como c:/codigo-min.js

En la misma ventana de crear enlace busca la carpeta en donde se encuentra jsmin.bat y jsmin.exe, deberías de tener algo similar a esto

Active Capturar salida para que muestre los resultados en PSpad pero no es necesario. Presiona Aceptar y listo.

Ahora podes comprimir cualquier archivo JS que estes viendo en PSPad solo usando el enlace en los favoritos en la barra lateral. Nada extraordinario pero si muy útil para facilitar el trabajo.

Otros temas

• Herramientas de traducción
• Carpetas: cada diseño en su lugar

Un comentario | Envialo a twitter

(cc) 2010 ivanmendoza (@dic7).

Si te vas a desvelar toma esto en cuenta

• Hace un tiempo extra de comida porque estas gastando más energía. Yo suelo comer cereal con leche o yogurt, evita comida pesada como carne porque da sueño.
• Toma bastante agua, el cuerpo se deshidrata por estar activo.
• Usa ropa de trabajo, si usas ropa cómoda es más fácil dormirse (y no es el plan).
• Cúbrete. El frio da sueño, y si hay demasiado te hará sufrir tanto que vas a preferir dormir.
• Escucha música. Busca música que sea rápida, como trance o psytrance, también podes probar con rock. Si no te gusta busca música que podas cantar, no se trata de cantar pero si podes tararear seguro no te duermes. La peor situación es que necesites poner mucha atención y no podas escuchar música, no queda más que resignarte.
• Sprints. A veces desvelarse es fácil, otras veces es la tarea más difícil del mundo. En esos casos es mejor comenzar la noche haciendo una lista de todas las cosas que vas a hacer (sinceramente, sino se puede no se hace) y lanzarte a hacerlas una por una. Pone retos y hace lo imposible por cumplirlos, luego descansas un poco (puedes revisar facebook) y luego de regreso a trabajar. Depende el trabajo puedes lograr hasta 10 sprints en una noche y ni se siente el tiempo.
• Saber rendirse. Estoy acostumbrado a desvelarme y aprendí a hacerlo, pero como cualquier persona hay limites. A veces al tercer día de no dormir simplemente no puedes desvelarte, tenes que detenerte y considerar si vale más lo que estas trabajando que tu salud. ¿el cliente te mata sino entregas mañana? Considéralo una opción, ofrécele un descuento o suplica piedad, todo lo anterior es 100 veces mejor que terminar en un hospital.

Todos son consejos de un noctambulo que le ha tocado desvelarse muchas veces, mitad experiencia mitad superstición pero todos pensados en no dormir.

Recuerda: no te vayas a dormir sin tener que soñar
Feliz madrugada.

---
Advertencia: No dormir es dañino para la salud, intenta esto en casa bajo tu propio riesgo. El tiempo que no duermes no lo recuperas.

Otros temas

• Integrar JSmin con PSPad
• Mejorar la velocidad de trabajo en equipo
• Carpetas: cada diseño en su lugar

2 comentarios | Envialo a twitter

(cc) 2010 ivanmendoza (@dic7).

Anteriormente escribí sobre cómo crear búsquedas personalizadas en Winamp con detalles y todo, esta vez les compartiré cómo crear una lista con las mejores canciones de los ‘90s, en cierta forma es más de lo mismo jeje

Criterio: Canciones de 1990 a 1999 con puntuación de 4 a 5 estrellas (un poco exigente, lo sé u_u).

Crea la búsqueda en la Media library > Local media con el click derecho mostras el menú contextual y selecciones Add Smart View

En la ventana que se muestra elegís los siguientes filtros

No olvides marcar la opción de “and” abajo de cada filtro para que todas las condiciones se cumplan, por último agrega un nombre a la vista y listo. Tenes una selección de la mejor música de los ‘90s.

Por supuesto para que funcione tenes que tener bien etiquetada la música por año y rating ¿qué melómano que se respete no tiene esos datos?

Bonus: Auto-tag

Una forma fácil de etiquetar la música con todos los datos es usar la opción de auto-tag de Winamp que automáticamente busca la información en Internet y la completa en tu biblioteca. Para usarla presiona click derecho en cualquier canción o album y en el menú contextual elegí Send to > Auto-tag

al terminar tendrás la información, incluyendo el año de lanzamiento.

Funciona muy bien con albums completos o con canciones originales, evita usarla con discos variados, versiones en vivo o remixes porque tiende a confundir la música.

Otros temas

• 3 libras
• Blind Melon
• Herramientas de traducción

Un comentario | Envialo a twitter

(cc) 2009 ivanmendoza (@dic7).

Los ganadores

Entender a tu cliente es tan importante como entender a tu audiencia. -- @rainer3

Sumérgete en la creatividad fuera de tu trabajo. Verás todo diferente, sé un mejor solucionador de problemas. --@amyhillman

No intentes generar las ideas tú solo. Escucha y elige las ideas de un gran equipo. Sé un facilitador y no una diva. –@willsansbury

Aléjate de los bocetos digitales tanto como sea posible para estar abierto a nuevas direcciones. –@ebacon

Mi selección

Personalmente solo me gusto el primero de los ganadores oficiales pero igual logré capturar algunos que me gustaron y que aprovecho a compartirlos aquí

La usabilidad le ayuda a definir la experiencia de usuario, dese cuenta de lo que usted más necesita hacer y, lo más importante, de lo que no. –@bistrianiosip

Piense de afuera hacia adentro y de adentro hacia afuera. Diseñe para lo que su usuario (no su organización) quiere y necesita. –@lchisholm

Si quieres que la gente ame el producto que diseñaste, entonces dales algo que amar, involucrándolos en el proceso de diseño. –@SheetalDube

No todos los métodos funcionan para cada proyecto. Lee la situación y los resultados, y actua acorde a ellos. –@odannyboy

Deja la computadora, encuentra inspiración y nuevas perspectivas en lo táctil, el mundo real –@AmyHillman

En el mundo de UX no hay fallas, solo más oportunidades para iterar. –@burgertime

El camino más rápido para mejorar la experiencia de usuario de tus sitios web es mejor tus habilidades para escribir –@mryap

Sigue el consejo de Coco Chanel y quita una joya (característica) antes de salir de casa. –@chrisfahey

Lista completa de tips en UX Tips (inglés) | http://johnnyholland.org/ux-tips/ 

Aclaración tonta: Son consejos, la mayoría es puro sentido común y ninguno va a cambiar el mundo, pero es bueno que alguien te los recuerde, y mejor aún si alguien con experiencia te dice cuales importan.

Otros temas

• Integrar JSmin con PSPad
• Carpetas: cada diseño en su lugar

Comenta | Envialo a twitter

(cc) 2009 ivanmendoza (@dic7).

Si has usas Twhirl con al menos tres cuentas tendrás algo como esto cada vez que las usas

Para ordenarlas, ve al menú de inicio presiona la tecla [Ctrl] y sin soltarla haz click en cada ventana de Twhirl.

Luego presiona el click derecho y en el menú selecciona mosaico vertical.

Y listo, Windows te ordena las ventanas en tres columnas.

Un tip rápido y que quizás muchos conocían pero que no esta demás recordarlo.

Otros temas

• No amo Facebook, pero es útil
• 10 años después: marquee
• Herramientas de traducción

Comenta | Envialo a twitter

(cc) 2009 ivanmendoza (@dic7).

En Winamp solucionas ese problema haciendo una búsqueda personalizada para filtrar cierta música y luego puedes usar Shuffle sin riesgo de encontrar sorpresas.

Filtrar un genero de la lista de música

Para mostrar toda la música excepto Hip-Hop la búsqueda es:

?!(genre has hip-hop)

• ? para hacer la búsqueda personalizada.
• ! para decir NO.
• (genre has hip-hop) para seleccionar toda la música del genero Hip-Hop.

En resumen le dices NO a toda la música de HIP-HOP. Solo funciona si tu música esta bien etiquetada, en este caso con genero hip-hop.

Selecciona una era

No será la primera vez que lo mencionó pero soy un fanático de la música grunge y justo así fue como llegue a las búsquedas personalizadas: Creando una playlist de toda la música grunge del 89 al 98.

?(genre has grunge) AND (year >1989) AND (year < 1998)

Seleccionar la mejor música

Para elegir la mejor música solo basta seleccionar toda la música con 3 o más estrellas en el Rating. Para que funcione debes tener algunas canciones con rating.

?(rating >=3)

Smart View

Una smart view, o vista inteligente en español, no es más que una búsqueda personalizada guardad, eso quiere decir que al crearse queda fija dentro del panel lateral de Winamp, bajo Local Media.

Para crear una smart view solo haz click con el botón derecho del mouse sobre Local Media en el panel lateral de Winamp y selecciona Add smart view… en el menú.

Luego presiona el botón de [+] para ir creando tus propios filtros. Si prefieres hacerlo escribiendo en lugar de usar las el asistente selecciona Advanced mode.

Cuando este listo podrás ver tu smart view y usarla cada vez que quieras. Ahora sé por qué me gusta tanto Winamp

Otros temas

• 3 libras
• Blind Melon
• Integrar JSmin con PSPad

Comenta | Envialo a twitter

(cc) 2009 ivanmendoza (@dic7).

Para hacerlo tuve que modificar el código un poco y aprovechando les dejo el tip de cómo lo hice para que se ahorren unos minutos cuando tengan que hacerlo. Antes de empezar, easySlider es esto:

y este tip es para tener un registro de cuantas veces han hecho click en el botón de siguiente o anterior (las flechas a los lados).

¿Qué necesitas?

• Una cuenta de Google Analytics y el código instalado en la página web. Importante: tienes que usar el “nuevo” código ga.js y no urchin.js
• Tener instalado easySlider en la página, eso incluye jQuery para que easySlider funcione. Para poder modificar easySlider debes usar la versión sin comprimir (el archivo de descarga incluye dos versiones).
• Un editor de texto para modificar código javascript de easySlider.

¿Cómo conseguir que Analytics detecte eventos?

Lo primero es averiguar cuál es el nombre del objeto que esta usando Google Analytics. Si usaste el código que Google te ofrece por defecto tendrás algo como esto:

y el objeto es pageTracker. La forma de avisarle a Analytics que se activo un evento es usando la función _trackEvent que tiene tres parámetros básicos aunque puedes añadir más.

pageTracker._trackEvent(“categoria”, “accion”, “etiqueta”, “valor”);

En resumen los tres primeros parámetros son para clasificar el evento: categoría es el más general, seguido de la acción (qué evento es) y por último etiqueta con la información del elemento. El resto de parámetros son valores que se pueden enviar como información extra.

Para easySlider solo use los tres primeros y la función queda así:

pageTracker._trackEvent("Homepage_Slider", "Navigate", "Next");

Modificar easySlider para disparar los eventos

Modificar easySlider para lanzar el evento de siguiente y anterior es bastante sencillo, solo debes buscar el siguiente código en el archivo easySlider.js y añadir algunas líneas.

$("a","#"+options.nextId).click(function(){
animate("next");
if (t>=ts) $(this).fadeOut();
$("a","#"+options.prevId).fadeIn();
});
 
$("a","#"+options.prevId).click(function(){
animate("prev");
if (t<=0) $(this).fadeOut();
$("a","#"+options.nextId).fadeIn();
});

Ese código es el que usa easySlider para hacer el cambio de información, justo debajo de la función de animate debes agregar la llamada a _trackEvent para  que Analytics registre el evento. Como precaución incluí la función dentro de un If que revisa el objeto pageTracker.

$("a","#"+options.nextId).click(function(){
animate("next");
if(pageTracker){
pageTracker._trackEvent("Homepage_Slider", "Navigate", "Next");
}
if (t>=ts) $(this).fadeOut();
$("a","#"+options.prevId).fadeIn();
});
 
$("a","#"+options.prevId).click(function(){
animate("prev");
if(pageTracker){
pageTracker._trackEvent("Homepage_Slider", "Navigate", "Previous");
}
if (t<=0) $(this).fadeOut();
$("a","#"+options.nextId).fadeIn();
});

Listo, con esos cambios Google Analytics registrará cada click que hagan tus visitantes en los botones de siguiente y anterior.

Revisar los registros

Esta es la parte aburrida porque tenes que esperar a que Google Analytics actualice sus datos. Cuando esto suceda podrás ver las estadísticas en la pestaña de Content > Event tracking (Contenido > Seguimiento de eventos) y te mostrará algo como esto

Gráfica de la interacción de los visitantes con easySlider

Tabla del total de eventos y la cantidad de eventos por elemento (label). Como era de esperarse la gente usa más el botón Next (17 clicks) que el botón Previous (5 clicks).

El seguimiento de eventos de Google Analytics se puede utilizar para muchas cosas más, este es solo un pequeño ejemplo, y puedes aprovechar esta opción para llevar registro de cómo usan los visitantes una página web más allá de las paginas visitan.

Encuentras más información de Event Tracking en la guía oficial de Google Analytics: Event Tracking Guide (inglés).

Aclaración: Las modificaciones de este ejemplo son de la última versión publicada de easySlider y no los he probado, en mi caso trabaje con la versión anterior 1.5 de easySlider que varia un poco.

Otros temas

• Integrar JSmin con PSPad
• Carpetas: cada diseño en su lugar

Comenta | Envialo a twitter

(cc) 2009 ivanmendoza (@dic7).

La línea que se ve arriba, llamada outline, no debería ser tan extensa. Este error ocurre cuando a través de CSS queremos ocultar el texto de un elemento enviándolo lejos del área visible con text-indent. En el código de abajo se puede ver el text-indent a –9999em (lo enviaron muy lejos jeje).

Para corregirlo solo hay que añadir una regla más al CSS: overflow:hidden;

Con esto la línea se ajusta de nuevo al elemento porque ya no “busca” al texto fuera del área visible.

Otros temas

• 10 años después: marquee
• Integrar JSmin con PSPad
• Carpetas: cada diseño en su lugar

3 comentarios | Envialo a twitter

(cc) 2009 ivanmendoza (@dic7).

La solución, fue improvisar un mousepad con un filtro de papel para café, de los desechables, y funciono mejor de lo que pensaba, ese mismo día meti un par de filtros más en la mochila y no volví a tener problemas con el mouse. Incluso en mi casa mantengo un filtro para cuando tengo que trabajar en la mesa o en el tablero de dibujo.

Mousepad improvisado

Ventajas: Es pequeño y delgado, totalmente portátil, justo para llevar en la bolsa del pantalón o billetera, también es barato (prácticamente gratis) y lo mejor de todo es fácil de encontrar en hoteles.

Nota: Funciona y se ve mejor si lo planchan

Otros temas

• Me gustan los widgets en Google Calendar
• Integrar JSmin con PSPad
• Carpetas: cada diseño en su lugar

8 comentarios | Envialo a twitter

(cc) 2008 ivanmendoza (@dic7).