punypng: Compresor de PNGs

Esta es una herramienta realmente muy eficiente en cuanto a la compresión de archivos PNG.

Anteriormente usaba smush.it, pero he probado recientemente punypng y la verdad es que los resultados son superiores.

Incluir fuentes en un proyecto Flex

Esta es una de esas tareas que suenan sencillas pero que tienen sus vueltas: ¿cómo incluir una fuente en un proyecto Flex?

Lo primero que debe hacerse es declarar una variable en la clase principal de proyecto. La variable es usada solamente con el fin de que el compilador vincule a la fuente. Veamos el código:

[Embed(source="C:\\Windows\\Fonts\\framd.ttf", fontFamily="Franklin Gothic Medium Normal", mimeType="application/x-font")]
private var fontFranklin:String;


Lo siguiente es definir un TextFormat y aplicarlo al campo de texto sobre el cual queremos aplicar la fuente.

En este caso se creó un campo de texto de nombre "txt" al cual se le aplicó el TextFormat:

//Creamos el TextFormat
var myFormat:TextFormat = new TextFormat("Franklin Gothic Medium Normal", 12, 0x000000);

//Creamos el campo de texto
var txt : TextField     = new TextField();
txt.text                = "Hola mundo!";
txt.embedFonts          = true;
txt.setTextFormat(myFormat);

//Agregamos el campo de texto al documento
addChild(txt);

Listo! Si compilamos el proyecto deberíamos ver el campo de texto suavizado con la fuente incluida.

Para mayor información puede consultarse el artículo Using embedded fonts en el sitio de Adobe

Obtener la clase de un objeto en Actionscript 3

Este es uno de esos tips que siempre vienen bien tener a mano (visto en el sitio de Dave Keen)
Una forma rápida y útil de obtener la clase de un objeto en actionscript es la siguiente:

static function getClass(obj : Object) : Class {
  return Class(getDefinitionByName (getQualifiedClassName(obj)));
}

Esto es muy útil por ejemplo para comparar los tipos de dos objetos:

if (firstObject is getClass(secondObject)) {
    trace("Ambos objetos son del mismo tipo!");
}


Para obtener la clase padre de la clase de un objeto puede usarse:

static function getSuperClass(o : Object) : Object {
  var n: String = getQualifiedSuperclassName(o);
  if(n == null) {
    return(null);
  }
  return(getDefinitionByName(n));
}


Patrones de diseño para registro y fidelización

Muy buen material creado por adaptivepath sobre patrones de registro y fidelización de usuarios.

También es posible descargarlo como PDF previo registro en adaptivepath.

Microsoft se une seriamente al estandar HTML 5

Recientemente el program manager de Internet Explorer Adrian Bateman comentó:

"Como parte de nuestra planificación para el trabajo futuro, el equipo de IE está revisando el actual bosquejo de la especificación de HTML5 y reunir nuestros pensamientos. Queremos compartir nuestras opiniones y hablar de ello en el grupo de trabajo."

He aquí la información oficial sobre la participación del equipo de IE

Como anécdota, es muy pintoresco ver en la página mencionada comentarios (al respecto de ciertos tags propuestos) cómo:

¿Realmente necesitamos esto?

Tests heurísticos

¿Qué son los tests heurísticos de usabilidad?

Para resumirlo y explicarlo de forma sencilla podemos definirlos como una serie de pautas (o principios) aplicables al diseño de interfases gráficas.

Permiten hacer evaluaciones de las interfases gráficas sin la participación del usuario.

Esta evaluación detecta aproximadamente el 42% de los problemas graves de diseño y el 32% de los problemas menores, dependiendo del número de evaluadores que revisen el sitio. Posteriormente se recomienda realizar un test de usuarios para completar la evaluación.

Jakob Nielsen identificó diez de estos principios:

1. Visibilidad del estado del sistema
   

   El sistema debe siempre mantener al usuario informado acerca de que es lo que está sucediendo a través de feedbak en un tiempo razonable.



2. Encaje entre el sistema y el mundo real
   

   El sistema debe hablar el lenguaje del usuario, con palabras, frases y conceptos familiares al usuario, más que términos orientados al sistema. Siga convenciones, haciendo que la información aparezca en un órden lógico y natural.



3. Libertad y control por parte del usuario
   

   Los usuarios a menudo seleccionan funciones del sistema por error y necesitarán una salida de emergencia claramente marcada para dejar el estado no deseado sin necesidad de pasar por un diálogo extendido. Soporte de "hacer" y "deshacer" ("Undo" y "Redo").



4. Consistencia y estándares
   

   Los usuarios no tiene que adivinar entre diferentes palabras, situaciones o acciones que significan lo mismo. Siga convenciones de la plataforma.



5. Prevención de errores
   

   Aún mejor que buenos mensajes de error es un cuidadoso diseño que previene un problema que ocurra en primer lugar.



6. Reconocimiento antes que recuerdo
   

   Minimizar el uso de la carga de memoria del usuario al hacer objetos, acciones, y opciones visibles. El usuario no debería tener que recordar información de una parte del diálogo a otra. Instrucciones para usar el sistema deberían ser visible o fácilmente recordables siempre que fuere apropiado.



7. Flexibilidad y eficiencia en el uso
   

   Aceleradores -- no vistos por el usuario novicio -- pueden a menudo acelerar la interacción del usuario experto. Permita a los usuarios perzonalizar acciones frecuentes.



8. Diseño estético y minimalista
   

   Los diálogos no deberían contener información que es irrelevante o raramente necesitada. Cada unidad extra de información en un diálogo compite con las unidades relevantes de información y disminuye su visibilidad relativa.



9. Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de los errores
   

   Los mensajes de error deberían ser expresados  en lenguaje plano (sin códigos), indicando precisamente el problema, y sugiriendo constructivamente una solución.



10. Ayuda y documentación
    

    Aunque es mejor si el sistema puede ser usado sin documentación, puede ser necesario proveer ayuda y documentación. Cualquiera de esa información debería ser fácil de buscar, enfocada en la tarea del usuario, listar pasos concretos a seguir y no muy largos.

Drag and Drop en Firefox 3.5 basado en HTML 5

Aquellos que hayan tratado de implementar un drag and drop via Javascript sabrán de lo que hablo: esto si que era todo un tema!

Si bien hoy día esas arduas tareas habían sido mitigadas gracias a frameworks de javascript, aunque todos ellos usarían "de fondo" javascript y debían utilizar de una u otra forma los clásicos eventos mousedown, mousemove, y mouseup.

Por suerte HTML 5 ha aparecido al rescate con una especificación de los nuevos eventos de drag and drop y Firefox 3.5 ya brinda soporte!

Aquí dejo otro artículo acerca del Drag and Drop en Firefox 3.5 basado en HTML 5.

Encuentra y destaca elementos HTML de tu documento con FireFinder

Todos los que trabajamos con algún framework de Javascript o bien aquellos que utilizamos CSS muchas veces hemos necesitado visualizar como se ven los elementos que estamos seleccionando del docuemento.

Por ejemplo, que tal si quisieramos ver todos aquellos links que contengan una imagen en nuestro documento?

La forma más sencilla es utilizar FireFinder una extensión para firefox (requiere previamente instalar Firebug).

FireFinder no solo permite seleccionar elementos usando selectores CSS, sino que además soporta expresiones XPath.

Simplemente introducimos la expresión y FireFinder destacará esos elementos de la expresión en nuestro documento.

Por mayor información puedes ver el blog de Robert Nyman.

An internal build error has occurred. Right-click for more information.

Hace tiempo ya que vengo trabajando en una aplicación desarrollada con Flex Builder 3.

Se trata de un proyecto Actionscript.
Si bien el IDE tiene todas las ventajas y comodidad de trabajar con Eclipse, también tiene su lado oscuro.

Hemos tenido toda suerte de problemas a la hora de compilar, básicamente por falta de experiencia al comienzo.
Una vez fuimos ganando en experiencia (hace casi un año que estamos trabajando) nos hemos topado con esos errores que a uno lo dejan con ganas de arrancarse uno a uno todos los pelos.

En particular hablaré de este tan poco descriptivo error que nos tuvo en jaque casi dos días:

An internal build error has occurred. Right-click for more information.

Luego de buscar y buscar en internet no tuvimos mayor suerte.
Hasta que luego de prácticamente revisar cada bloque de código encontré esto:


    switch (value) {
       /*case "first":
             trace ("first item");
         break;*/   
     }

Al parecer, Flex enloquece con este comentario dentro del bloque del switch.

Al descomentarlo, el error desapareció y nos permitió por fin compilar!

Espero pueda servirte este dato!
Hasta la próxima.