codebites

Habilitando los traces de Flash en Firebug:

Ya he hablado en un par de ocasiones sobre las virtudes de Flash Tracer (aquí y aquí también). Flashbug es extensión para Firefox (complementaría de Firebug) que he descubierto hace unos pocos días y sirve para hacer exactamente lo mismo.

Me ha gustado mucho su facilidad de instalación, sin tener que configurar la ruta del archivo flashlog.txt, y también la opción de poder consultar el Policy Log muy útil a la hora de utilizar proyectos que requieren crossdomain.xml. Así que Flashbug es una opción a tener muy en cuenta para nuestros desarrollos Flash.

Comparando con Flash Tracer, he echado de menos la opción de filtrar los traces; suelo poner un nombre identificativo de cada Class en los traces de proyectos grandes, en ocasiones podemos querer centrarnos en una parte concreta del proyecto y el filtro nos ayuda a descartar el resto de información generada.

Siguiendo con la documentación de los cambios en el blog, voy a explicar como poner botones sociales en wordpress de manera manual. He de decir que estuve mirando plugins que automatizaran el proceso, pero no encontré ninguno que me acabara de convencer, así que opte por documentarme e incluir los botones de los servicios y redes que (de momento) consideraba realmente útiles, los botones son de:

(Parte de las definiciones son de Wikipedia)

• Facebook
  No podía faltar, Facebook es la red social más usada en el mundo.
• Twitter
  Servicio de microblogging que permite a sus usuarios enviar micro-entradas basadas en texto, denominadas “tweets”
• Delicious
  Es un servicio de gestión de marcadores sociales en web. Es muy útil, yo lo uso muchísimo, puesde compartir tus marcadores y los puedes consultar desde cualquier lugar
• Buzz
  Es un servicio que permite a los usuarios el uso de herramientas como el intercambio de hipervinculos, fotos, videos y actualizaciones por medio de Gmail.

Continuar leyendo…

Hola, he pensando que sería buena idea explicar aquí algunas de las cosas que estoy haciendo para mejorar el blog, así que voy a explicar como usar un acortador de urls propio en el blog (gracias al plugin Pretty Link).

Este artículo esta enfocado a facilitar el compartir nuestras url en Twitter, en concreto lo que vamos a hacer es crear una función que genere automáticamente el short url de cada artículo, en el siguiente post veremos como añadir botones sociales (compartir en: facebook, twitter, etc.…) manualmente a nuestros post.

Continuar leyendo…

Hola! El próximo día 10 de diciembre minnim está invitado a la tertulia que organiza el Club de Creativos. El Club de Creativos es una organización sin ánimo de lucro que promueve la calidad del trabajo creativo en España fomentando la formación y organizando de actividades, exposiciones, debates, conferencias, etc. Estas tertulias están enmarcadas en el programa de conferencias del Disseny Hub Barcelona (DHUB), centro del Institut de Cultura de Barcelona que promueve el diseño y la creación a partir de distintas iniciativas, gran parte de ellas con base neurológica en la red.

Así pues, el jueves que viene nos vemos en Montcada 12, junto con Cocobongo, Aerstudio y Pornographics. La entrada es gratuita, ¡espero veros por allí!

¿De qué va? Más info en la web del Club de Creativos
¿Dónde? DHUB c/Montcada, 12 Barcelona.
¿Cuándo? Jueves 10. 20h.
Entrada libre. Para confirmar asistencia enviar mail a barcelona@clubdecreativos.com

Quería presentaros una utilidad que programe hace un tiempo y utilizo bastante en mis desarrollos: ObjectUtil, he revisado, pulido y documentado los métodos de la clase para la ocasión, además la podemos ir utilizando en futuros post. Aunque no me he basado en el código, algunos de sus métodos están directamente basados en las ideas del estupendo Prototype Javascript Framework (¡otra vez!!!!), se trata de una clase estática con una serie de funciones que ayudan a copiar, extender y obtener valores/claves de Objetos en Actionscript.

descargar código fuente: objectutil.zip (3.2 kb)

Continuar leyendo…

Hola, a petición de un lector he creado una pequeña guía para instalar Flash Tracer y Flash Switcher en Windows (aunque ya aviso que la instalación en Mac varía muy poco), quien no sepa para que sirven estas magnificas extensiones de Firefox puede consultar un post que escribí hace algunos meses Herramientas que hacen la vida más fácil a la hora de trabajar con Flash ¡espero que os sea de utilidad!

Aquí van los detalles para la instalación a la hora de realizar este tutorial:

• Sistema Operativo: Windows XP
• Navegador: Firefox 3.5.3, se puede descargar aquí
• Extensión: Flash Switcher 2.0.2, se puede descargar aquí
• Extensión: Flash Tracer 2.3.1, se puede descargar aquí
• Flash Debug Player 10, se puede descargar aquí

Continuar leyendo…

Hoy en día, cuando creamos enlaces en html (mediante <a href... ), el usuario tiene control sobre los mismos, al usar el botón derecho sobre uno de ellos, se despliega un menú contextual con varias opciones, que nos permiten, entre otras posibilidades, abrir el enlace en la misma ventana, o en una pestaña o ventana nueva si lo preferimos, también podemos copiar este enlace al portapapeles, y se puede acceder a estas opciones mediante atajos del teclado.

En Flash, es el propio programador el que se tiene que encargar de añadir estas opciones a los enlaces que se usen en una película, UrlMenu es una pequeña utilidad con la que podemos añadir estas opciones a botones o movieclips, y así damos algo más de control al usuario a la hora de saber hacia donde esta navegando y de escoger donde decide abrir el enlace.

Un enlace en HTML:

:) Como se puede ver, al poner el cursor sobre un enlace se muestra el destino del mismo en la barra de status, y si usamos el botón derecho del ratón aparece un menú contextual con múltiples opciones, podemos abrir el enlace en la misma ventana o en una nueva, también podemos copiar el destino en el portapapeles.

Un enlace en Flash:

:’( Cuando hemos creado un botón para abrir un enlace, por defecto, flash no muestra nada de nada (deja esto a manos del programador)

Un enlace en Flash con UrlMenu:

:) Con UrlMenu podemos mostrar un menú contextual con las opciones sobre el enlace que vemos en la imagen , además podemos hacer uso de atajos de teclado para abrir la ventana.

descargar ejemplo: urlmenu.zip (30.8 kb)

ver ejemplo

Continuar leyendo…

Este es el primero de una serie de post bajo el título Flash SEO, aunque, en principio la palabra SEO (sigla en inglés de Search Engine Optimization) significa “optimización para motores de búsqueda” (más info en wikipedia), explicare varias técnicas para recuperar la funcionalidad que se supone perdida en aplicaciones Flash, tanto en usabilidad como en indexación de contenidos por parte de los buscadores, para mí estas técnicas están estrechamente relacionadas, y la implementación de las mismas se puede considerar encadenada, de tal manera que, por ejemplo, es muy sencillo utilizar Google Analytics o imaginar una estructura para mostrar contenidos alternativos a flash, una vez se ha implementado la posibilidad de navegar mediante los botones de historial de nuestro navegador en nuestra aplicación Flash.

1. ¿Qué es un deep link?

Si bien en la wikipedia definen un deep link como un enlace que permite llegar a una página concreta de un sitio web en vez de a su página princial (Deep linking) En este caso nos referimos a un enlace que nos permite acceder a una posición concreta dentro de un mismo documento (anclas, anchors en inglés)

un ejemplo:

2. ¿Qué es SWFAddress?

Es una librería Javascript/Actionscript que nos permite acceder a un contenido determinado dentro de nuestro SWF mediante deeplinks, además habilita la navegación mediante los botones de historial de nuestro navegador.

descargar ejemplo: introduccion_swfaddress.zip (106 kb)

ver ejemplo

Continuar leyendo…

Pequeña utilidad que he adaptado de Prototype Javascript Framework permite realizar sustituciones en textos de manera rápida y clara.

La principal diferencia con Template de Prototype se encuentra en la manera de establecer la sintaxis del tag a reemplazar:

Prototype:

var syntax = /(^|.|\r|\n)(\<%=\s*(\w+)\s*%\>)/;
//matches symbols like "<%= field %>"
Requiere usar expresiones regulares

Actionscript:

var syntax = "<%= %>"
¡Nos olvidamos de las expresiones regulares!

Ejemplo:

import net.codebites.text.Template;
 
var t:Template = new Template("Hola #{name}, has ganado un viaje a  #{ciudad}, ¡puedes pasar a recoger el premio en nuestras oficinas de #{sucursal} cuando quieras!");
t.evaluate({name:"Marcos", ciudad:"New York", sucursal:"Barcelona"});
//devuelve: Hola Marcos, has ganado un viaje a  New York, ¡puedes pasar a recoger el premio en nuestras oficinas de Barcelona cuando quieras!
 
t.syntax = "<%= %>";
t.text = "Hola <%=name%>, has ganado un viaje a  #<%=ciudad%>, ¡puedes pasar a recoger el premio en nuestras oficinas de #<%=sucursal%> cuando quieras!";
t.evaluate({name:"Julia", ciudad:"Tokio", sucursal:"Madrid"});
//devuelve: Hola Julia, has ganado un viaje a  Tokio, ¡puedes pasar a recoger el premio en nuestras oficinas de Madrid cuando quieras!

descargar código fuente: Template.as (4.04 kb)

Aunque no estoy contando nada nuevo, me gustaría explicar que herramientas hacen mí vida más fácil a la hora de trabajar con Flash:

1. FlashDevelop

Mi editor de Actionscript favorito para proyectos desarrollados en Flash Professional (mi caso). La posibilidad de crear animaciones por línea de tiempo, la disposición visual de los elementos y su facilidad de uso, convierte Flash IDE como el favorito de muchos diseñadores, desafortunadamente, el editor de Actionscript se queda muy corto para nuestras necesidades, en este caso FlashDevelop es perfecto.

Entre sus ventajas tenemos:

• Autocompletado de código
• Snippets (código reutilizable, se puede generar automáticamente)
• Generación automática de funciones, eventos, variables…
• Panel de proyectos completísimo
• Comprueba que el código sea válido (Check Syntax)
• Es gratuito
• Lo encuentro más liviano que los entornos basados en Eclipse

Se puede descargar en:
http://www.flashdevelop.org/community/viewforum.php?f=11

Continuar leyendo…