Ease Caddy: the missing flash panel.

Ease Caddy is a really cool Flash Panel that allows you to create an easing library. I did create a file with Penner equations so you can use them both in the IDE as you use them on Tweenlite/Tweener.

Just copy and paste the following code into an empty .xml file and then import it into Ease Caddy:


  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
  


How to use TweenNano for filters and frame animations

Sometimes, specially in Flash banners, we really need to bring down the file size.

One solution is to use programmatic animation, however if you are using TweenNano you might have experience 2 of its drawbacks:

  1. You can not use filters
  2. You can not use frame tweens

This is due to the fact that TweenNano does not support the TweenLite plug-ins.

However there is a very simple solution to incorporate both options without modifying the TweenNano code (you can even think of other solutions you can apply with this methodology).

Create some fake values you will apply every time the tween updates.

import com.greensock.TweenNano;
import com.greensock.easing.*;

//mc is the instance name of a movie (with 50 frames on it) on the stage
//Movieclips are dynamic classes therefore you can add any property you want
mc.frameValue = 1;
mc.blurValue = 0;
mc.strengthValue = 0;
applyGlow(); //init the movie

function applyGlow(){
        //round up since is not possible to pass floating values or zero
	mc.gotoAndStop(Math.ceil(mc.frameValue)); 
        //apply the values as they tween
	mc.filters = [new GlowFilter(0xFF0000, 1, mc.blurValue, mc.blurValue, mc.strengthValue)];
}
//call the custom function on every update
//you can combine actual properties with the fake ones on the tween
TweenNano.to(mc, 3, {x:300, delay:2, ease:Elastic.easeOut, frameValue:50, blurValue:60, strengthValue:1.5, onUpdate:applyGlow}); 



Squash and Stretch in Flex

Los números Fibonacci

Desarrollo de web apps para iOS: Guias de Interfaz

Números importantes para recordar

Resolución de los aparatos

  • iPhone: 320x480
  • iPhone 4: 640x960
  • iPad: 768x1024

Tamaño mínimo de un elemento interactivo: 44x44 pixels (88x88 en un retina display).

En pantallas táctiles no existe el click

Estos son los eventos que manejan los aparatos:

  • Tap: es lo más parecido a un click.
  • Drag: esto significa mover el dedo sobre la pantalla de lado a lado (arriba y abajo, izquierda a derecha).
  • Flick: hacer un "drag" rápido.
  • Swipe: pasar el dedo rápidamente sobre la pantalla.
  • Double tap: lo que su nombre indica.
  • Pinch open: para hacer un acercamiento (zoom in).
  • Pinch close: para hacer un alejamiento (zoom out).
  • Touch and hold: poner el dedo y esperar.
  • Shake: agitar el aparato.

Este video puede ayudar entender mejor los eventos (en inglés):

Conceptos generales a recordar

  • Manipulación directa es mejor que manipulación con controles.
  • Siempre provea retroalimentación.
  • Use metáforas.
  • Dado el tipo de interfaz debe darsele más control a la aplicación que al usuario para evitar errores (por ejemplo al presionar un botón de "borrar" se le pida al usuario confirmar su desición).

Diseñe para el dispositivo

  • Enfoquese en la tarea principal de la aplicación.
  • Considere en ocultar los controles cuando el usuario no los usa (como el video player de YouTube) o hacerlos transparentes.
  • Los botones deben verse "tapeables". Deles volumen con biselados, esquinas redondeadas, sombras y gradientes.
  • Provea una forma central y visible de navegación.
  • Provea retroalimentación sencilla pero clara. Use animaciones para pasar de un estado a otro de la aplicación.
  • No utilice los mismos artes para iPad y iPhone, los de iPad generalmente requieren mayor calidad y los de iPhone mayor claridad.
  • Diseñe para pantalla táctil, piense que tan dificil puede ser abrir un menu con click derecho o que aparezcan cosas solo cuando se pasa por encima.
  • A diferencia del diseño para browser es preferible que el usuario haga scroll a reducir el tamaño de las fuentes y las imagenes para meter todo el contenido en una pantalla.
  • Si la aplicación muestra muchos datos (graficos, tablas, etc.) diseñe lo mas simplista y limpio posible.
  • Cuando la aplicación sea para mostrar contenido asegúrese que la interfaz no compita con el contenido por la atención del usuario.
  • Si es un juego, las animaciones, los gráficos y los sonidos tienen que ser de la mejor calidad ya que el usuario espera sumergirse en un mundo diferente.
  • No invente el agua tibia: utilice controles conocidos (check boxes, radio buttons, sliders) para que asi el usuario no tenga que preguntarse como usarlos.
  • Sea consistente; si usa un checkmark para seleccionar una cosa no use un menu que diga SI/NO para otra parecida.
  • Lo más importante debe ir siempre arriba de la pantalla; mas que todo porque los pulgares tapan los lados y/o la parte de abajo.

Asistente de formularios

Cuando un usuario está escribiendo sobre un campo de texto de un formulario en Internet, el iPhone abrirá el "Asistente de formularios". Estos son los tamaños para el asistente de formularios:

Status bar, 20 pixeles de alto
URL Text field, 60 pixeles de alto
Espacio restante, 140 pixeles de alto
Asistente de formularios, 44 pixeles de alto
Teclado, 216 pixeles de alto

Cuando son vistos en iOS los drop-down menus o combo-boxes se convierten en pickers y las listas se convierten en listas de lado a lado o dentro de rectangulos con esquinas redondeadas.


Desarrollo para iOS: web apps.

Voy a ir documentando poco a poco mi aprendizaje sobre como desarrollar sitios web para iPad/iPod/iPhone.

La buena noticia es que todos los dispositivos Apple utilizan como motor de rendereo el webkit, por lo que básicamente lo que vemos es lo mismo que se vería en el browser Safari mobile (por supuesto que lo mejor es desarrollar en el dispositivo).

Primero bajamos e instalamos el browser Safari: http://www.apple.com/safari/download/

Una vez que lo tenemos instalado y corriendo vamos al menu de preferencias:

En la opción de "avanzado" chequeamos la opción "Show develop menu in menu bar":

Ahora simplemente escoja la opción de cambiar el "User Agent", de esta forma el sitio creerá que está siendo visto a través de un iPad y mostrará la versión mas recomendable para ese browser:

Si quiere ver su página web como se vería en un iPad, puede usar cualquiera de los siguientes links (siempre y cuando este viendo mi página usando Safari):

Por último hay algunas páginas que se optimizan al ser vistas por un browser de iOS, por ejemplo abra en Safari la siguiente página usando como "user agent" el iPhone 4: http://help.apple.com/iphone/4/interface/ como verá en el browser normal es redireccionado a otra página pero en con el user agent de iPhone 4 nos muestra una navegación de iPhone.

Esta es una forma barata y rápida de revisar un diseño orientado para un iPad (o un iPhone).

Algunas páginas interesantes de visitar con el user agent cambiado:


Diatraba sobre el servicio al cliente.

Cuando empecé a estudiar publicidad allá por 1997, nunca olvidaré una frase de un profesor de mis primeros cursos (el cual era un curtido publicista de vieja escuela): "El cliente es un hijueputa hasta que demuestre lo contrario".

Como buen párvulo de 20 años dicha frase me impresionó (escandalizó) mucho. Aunque nunca reaccioné contra ella, vi en muchos trabajos que dicha frase casi la daban por sentado mis compañeros de trabajo (tanto en las industrias de la publicidad como de sistemas de información).

Mi única experiencia manejando clientes hasta ese entonces fue trabajar como mesero en Pollos del Monte y Pollos Papucho en San Antonio de Belén. Nunca tuve ninguna formación en "servicio al cliente" pero me funcionó muy bien aplicar sentido común y las reglas de cortesía que me habían enseñado en casa. Lo que aprendí mientras fui mesero me ha servido a lo largo de mi vida profesional con clientes de compañías de Fortune 500 de diferentes partes del mundo:

Un mal servicio no afecta solo a la empresa, me afecta a mí. Recuerdo que los domingos siempre llegaban los mismos grupos familiares y si yo los había "chineado" el domingo anterior, pedían que yo los atendiera personalmente. Recuerdo una vez que un compañero les dijo que yo no los podía atender porque no me tocaba el "salón de arriba" ese día, pues el padre de familia movió a su esposa, suegra y 3 hijos hacia el "salón de abajo" para que yo los atendiera. Igual que el jefe de Proplax que invitaba a sus compañeros a comer pollo cada quincena y decía "eso si que me atienda el machillo porque escoge los 'tucos' de pollo mas grandes". Al final dicho servicio al cliente se reflejaba en visitas continuas al restaurante y mayores propinas o la estima de mis jefes. Me sorprende como en muchos lados, hay profesionales (graduados de universidades) que no tienen este sentido común y desligan sus ingresos y estabilidad de trabajo de los resultados de la empresa.

Satisfacer al cliente es un esfuerzo de todos. Otro día me pusieron en "batidos" (la sección donde se preparaban los frescos naturales), a un muchachito recién salido de no se que pueblo cerca de la frontera. Llamemoslo "Mario" para personificarlo de alguna forma. Mario era lento, hasta decir basta. No diferenciaba entre "urgente" e "importante". Mis dos batidos de guanábana en leche de hace 15 minutos no salían porque acababa de llegar otro mesero hace 2 minutos y le pidió 5 "cases en agua" (había que lavar la licuadora, buscar hielo, acomodar vasos y abrir cajas de leche o galones de pulpa entre una operación y otra). Eventualmente mejoró y empezó a trabajar bien. La lección que aprendí es que no importa que tan limpio estuviese el restaurante, que tan bueno estuviera el pollo o que tan rápido los atendí, el cliente lo único que recuerda es que estuvo comiendo en seco durante 15 o 20 minutos, fue hasta que empezamos todos a trabajar coordinadamente (para ayudar a Marito) como un equipo que el cliente empezó a salir satisfecho.

El cliente tiene todo el derecho a no saber. Había un señor que llegaba todos los viernes y compraba 2 porciones de pollo. Notaba que era peón por su ropa manchada de tierra, pintura y cemento. Era un tipo hosco de pocos modales. Una vez estando yo encargado de la caja registradora, después de pedir su pollo de los viernes me preguntó en su hablar brusco que donde estaba el baño. Yo ese día no andaba de buenas. Le dije sin volver a verle o señalarle nada: "pues es la puerta que dice 'CABALLEROS'." Cuando alcé la vista vi que se había metido en el de 'DAMAS'. Carmen una compañera cubana que era quien generalmente atendía la caja me dijo: "Oye Emmanuel tu si eres cruel, mira tú que ese señor no sabe leer." Nunca había conocido a alguien que tuviera la mala fortuna de no saber leer, me parecía algo de otros tiempos. Desde ese día procuré ayudar al señor a leer el menú luminoso que colgaba sobre la caja registradora para que viera que otras cosas podía llevarle a su familia (una o dos veces compró papas y a veces llevaba refrescos, la mayoría de las veces le regalé una cajeta para los chiquillos). Muchos compañeros de trabajo a veces se molestan o se ofenden cuando el cliente pide un cambio. El cliente tiene derecho a no saber o entender porque una aplicación que se ve muy bien en Firefox con el Flash Player, no funciona en el iPad. Es nuestro deber explicarle de la forma más sencilla lo que implica un cambio solicitado y señalarle cuál es la solución mas asequible.

Aunque el cliente sea el responsable de un problema, el va a esperar que nosotros se lo podamos resolver. No importa cuantas veces un cliente botó un refresco o quebró un plato, nunca hubo uno que se parara y buscara la escoba o un trapo para limpiar. Simplemente se me quedaban viendo con ojos de culpabilidad o furiosos consigo mismos. Como San Martín de Porres tenía uno que llegar estoicamente con la escoba, sonreirle y decir: "No se preocupe, yo lo limpio." Talvez no sea mi responsabilidad los problemas que un cliente en su torpeza cometió, pero es mi responsabilidad ayudarle a limpiar el reguero si quiero ganarme la confianza de ese cliente.

Y ahora una regla de servicio al cliente con la que NO estoy de acuerdo: "El cliente siempre tiene la razón." Eso es válido sólo cuando el cliente lo trata a ud. y sus empleados con el respeto y la cortesía con que ud. lo trata a él. Muchas veces me tocó lidiar y sacar (a lo Moe de los Simpsons) borrachos, chavalos bulliciosos y cretinos de todo tipo que pensaban que sólo porque tenían dinero podían tratar mal a cuánta persona (cliente o empleado) con quien se topaba. Si ud. deja que maltraten su imagen, sus empleados o a ud. mismo "para no perder la cuenta"; probablemente está en el negocio equivocado y la prostitución se adecue más a su estilo de adquirir dinero.


Diatraba sobre el liderazgo.

Mientras me preparo para regresar a trabajar, me puse a pensar sobre las cosas que he aprendido sobre ser líder y de quienes las he aprendido (tanto líderes buenos como líderes malos que he tenido).

A continuación mis conclusiones:

  • Tres cualidades del líder hacia su equipo (y viceversa): honestidad, confianza y respeto.
  • El liderazgo no se otorga, ni se concede o se delega. El liderazgo se toma.
  • El buen líder asume toda la culpa y reparte toda la gloria.
  • Nunca será líder quien busque su beneficio personal antes que el del equipo.
  • Ser líder a veces significa tener menos amigos.
  • Un buen líder sabe cuando llegó el momento exacto de "doblar las reglas".
  • La principal pregunta que un líder debe hacer no es "¿qué estás haciendo?", sino "¿en que necesitas que te ayude?"
  • Un líder se alegra cuando dentro de su equipo encuentra a alguien mejor que él.
  • Cuando un líder debe señalar culpables el primer dedo debe indicar a sí mismo.
  • El 95% del tiempo el líder debe estar sonriendo, el 5% por ciento restante debe tener el ceño fruncido. Pero nunca debe tener las dos expresiones al mismo tiempo.
  • Los 5 sentidos del buen líder: orejas grandes, vista borrosa, buen olfato, lengua atrofiada, y un tacto rápido y sensible.
  • El sexto sentido: sentido del humor.
  • ¿Y el sétimo? Sentido común.
  • La mayoría de la gente preferirá tener un mal líder que no tener líder del todo.

Liderazgo significa que un grupo, grande o pequeño, está dispuesto a confiar la autoridad a una persona que ha demostrado capacidad, sabiduría y competencia. Walt Disney