Por otro lado, “xinterface” era un nombre ya usado para otros fines (que conste que cuando creamos el blog no lo sabíamos), y hace tiempo que necesitamos un nombre nuevo. También hemos querido darle un aire diferente a nuestra bitácora y replantearlo de manera que cumpla nuestros objetivos de mejor manera.

Es muy pronto para hacer promesas, pero lo que es seguro es que nuestro nuevo blog, que se llamará “fxinterface.com” será más específico y sobre todo más práctico. Todavía no nos quedan claras varias cuestiones que nos estamos planteando como por ejemplo:
- ¿Multi-idioma?, ¿solo inglés?, ¿solo español? Es muy pesado escribir cada post en dos idiomas. Mucha gente de habla hispana lee nuestro blog pero tambien anglosajona…
- Diseño
- Ponerle cara al blog (nuestra info personal)
- Enfoque general: ¿Tutoriales para dummies? ¿labs? ¿ejemplos de código? ¿aplicaciones? Nuestra preferencia tira más por el tema “labs”.

En cualquier caso, dejaremos online xinterface.net para aquellos que quieran visitar la info antigua, y avisaremos por aquí cuando esté listo el nuevo blog.

Un saludo a todos

1. Cargar idioma por defecto (mediante flashvars)
2. Cambio de idioma dinámico en tiempo de ejecución

A continuacíon explico el proceso completo para ponerlo todo en marcha:

Lo primero que debemos hacer es crear un archivo XML por cada idioma. Aquí van los archivos de ejemplo para “español” e “inglés”. Fíjate que lo único que cambia son los valores, y nunca las referencias, que se deberán mantener siempre igual en todos los idiomas que creemos (la referencia puede ser cualquier palabra que se te ocurra).

en.xml

<?xml version="1.0" encoding="utf-8" ?>
<data>
	<node ref="catalogo" value="Catalogue" />
	<node ref="criteriosBusqueda" value="Search parameters" />
	<node ref="genero" value="Genre" />
	<node ref="tipo" value="Type" />
	<node ref="estilo" value="Style" />
	<node ref="materiales" value="Materials" />
	<node ref="colores" value="Colors" />
	<node ref="colecciones" value="Collections" />
	<node ref="color" value="Color" />
	<node ref="imprimir" value="Print" />
	<node ref="enviar" value="Send" />
	<node ref="guardar" value="Save" />
	<node ref="buscar" value="Search" />
	<node ref="nuevaBusqueda" value="New Search" />
</data>

es.xml

<?xml version="1.0" encoding="utf-8" ?>
<data>
	<node ref="catalogo" value="Catálogo" />
	<node ref="criteriosBusqueda" value="Criterios de búsqueda" />
	<node ref="genero" value="Género" />
	<node ref="tipo" value="Tipo" />
	<node ref="estilo" value="Estilo" />
	<node ref="materiales" value="Materiales" />
	<node ref="colores" value="Colores" />
	<node ref="colecciones" value="Colecciones" />
	<node ref="color" value="Color" />
	<node ref="imprimir" value="Imprimir" />
	<node ref="enviar" value="Enviar" />
	<node ref="guardar" value="Guardar" />
	<node ref="buscar" value="Buscar" />
	<node ref="nuevaBusqueda" value="Nueva búsqueda" />
</data>

Luego, en cualquer parte de nuestra aplicación, instanciamos el componente “LanManager”:

<managers:LanManager 
		id="lanManager" 
		onXMLparsed="trace('lan xml parsed ok')"
		onXMLFault="trace('lan xml load error:', event.message)" />

Un ejemplo de botón para cargar un idioma:

<mx:Button x="346" y="10" label="English" 
click="lanManager.Source = 'lan/en.xml'"/>

Y ahora viene lo más interesante. Para que una caja de texto, adquiera el valor de por ejemplo, la referencia “catalogo”, lo haríamos así:

<mx:Text text="{lanManager.proxy.catalogo}" />

A través de la propiedad “proxy”, podemos hacer binding con cualquiera de sus referencias. Si os fijáis en la clase “LanManager.as”, los datos (referencias y valores) se almacenan en un simple “Object”. Pero no podemos bindar las propiedades de un Object, por lo tanto he usado la clase “ObjectProxy”, que hace que todas las propiedades (en este caso las referencias) sean bindables.

Si necesitamos añadir referencias manualmente, tambien lo podemos hacer a través del proxy:

lanManager.proxy.otraReferencia = "loquesea";

Siempre que carguemos un idioma, todas las cajas de texto que estén vinculadas al objeto “proxy” se actualizarán automáticamente.

Ahora, para cargar un idoma por defecto, he añadido un parámetro en el “flashvars” del html, que luego uso en el inicio de la aplicación Flex. Esto tiene un motivo muy concreto: usar el mismo swf para mostrar distintos idomas. Mediante un script de servidor, podemos modificar el “flashvars” con el idoma adecuado. El HTML quedaría así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>Título</title>
		<meta name="title" content="Site title" />
		<meta name="Description" content="" />
		<meta name="Keywords" content="" />
		<meta name="date" content="2008-10-01" />
		<meta name="sitecode" content="es" />
 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
        <script type="text/javascript" src="js/swfobject.js"></script>
        <script type="text/javascript" src="js/swfaddress.js"></script>
		<script type="text/javascript" src="js/swffit.js"></script>
 
	<script type="text/javascript">
			var flashvars = {lan:"es"};
			var params = {allowFullScreen:"true"};
			var attributes = {id:"Application"};
 
			var ale = new Date().getTime();
			swfobject.embedSWF("LanManagerTest.swf?a="+ale, "AlternativeContent", "500", "290", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
			swffit("Application", 500, 290, null, null, true); 
		</script>
	</head>
	<body>
 
		<div id="AlternativeContent">
			<a href="http://www.adobe.com/go/getflashplayer">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
			</a><br />
            Necesita Adobe Flash Player 9 o superior y Javascript activado para ver los contenidos de esta página.<br />
			Nombre del sitio o lo que sea
		</div>
</body>
</html>

Y la aplicación Flex completa:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
	xmlns:managers="net.xinterface.xflex.managers.*" 
	width="500" height="290"
	applicationComplete="AppComplete()" viewSourceURL="srcview/index.html">
 
	<mx:Style>
		Application
		{
			background-color: #ffffff;	
		}
 
		Text
		{
			font-size: 12;
			font-family: "Verdana";
			font-weight: bold;	
		}
	</mx:Style>
 
	<mx:Script>
		<![CDATA[
			private function AppComplete():void
			{
				lanManager.Source = 'lan/' + Application.application.loaderInfo.parameters.lan + '.xml';
			}
		]]>
	</mx:Script>
 
	<managers:LanManager 
		id="lanManager" 
		onXMLparsed="trace('lan xml parsed ok')"
		onXMLFault="trace('lan xml load error:', event.message)" />
 
	<mx:Text text="{lanManager.proxy.catalogo}"  x="70" y="77"/>
	<mx:Text text="{lanManager.proxy.criteriosBusqueda}"  x="283" y="233"/>
	<mx:Text text="{lanManager.proxy.genero}"  x="283" y="181"/>
	<mx:Text text="{lanManager.proxy.tipo}"  x="283" y="207"/>
	<mx:Text text="{lanManager.proxy.estilo}"  x="70" y="233"/>
	<mx:Text text="{lanManager.proxy.materiales}"  x="283" y="155"/>
	<mx:Text text="{lanManager.proxy.colores}"  x="283" y="129"/>
	<mx:Text text="{lanManager.proxy.colecciones}"  x="283" y="103"/>
	<mx:Text text="{lanManager.proxy.color}"  x="283" y="77"/>
	<mx:Text text="{lanManager.proxy.imprimir}"  x="70" y="207"/>
	<mx:Text text="{lanManager.proxy.enviar}"  x="70" y="181"/>
	<mx:Text text="{lanManager.proxy.guardar}"  x="70" y="155"/>
	<mx:Text text="{lanManager.proxy.buscar}"  x="70" y="129"/>
	<mx:Text text="{lanManager.proxy.nuevaBusqueda}"  x="70" y="103"/>
 
	<mx:Button x="324" y="25" label="English" click="lanManager.Source = 'lan/en.xml'"/>
	<mx:Button x="398" y="25" label="Español" click="lanManager.Source = 'lan/es.xml'"/>
	<mx:HRule x="24" y="56" width="446" height="3"/>
 
</mx:Application>

Ver ejemplo

Descarga el código fuente

Y después de todo esto, lo ideal sería crear una referencia estática de la instancia “lanManager” para hacerla accesible desde cualquier parte de la aplicación.

Parece que por fin nos aseguran que en el 2010 los teléfonos móviles avanzados con s.o. Android, Windows Mobile y Symbian dispondrán de una versión de Flash player 10 similar a la de los ordenadores. Con Apple las negociaciones van por separado, pero está claro que en el mercado español esta noticia tan esperada nos dará por fin la oportunidad de desarrollar aplicaciones compatibles con la mayor parte de los terminales “avanzados” del mercado y los ordenadores, lo cual si es acompañado por una estandarización de mejores tarifas de datos supondrá por fin un salto importante a la creación de un mercado de navegantes multiplataforma.

Un mercado con una población realmente grande como para desarrollar aplicaciones y publicidad al mismo nivel que la que existe en internet para los ordenadores pero con las personas conectadas en todo momento, geoposicionadas y dispuestas a ofrecer contenidos en “vivo” desde el lugar donde se encuentren. Las posibilidades, como ya hemos comentado tantas veces, son espectaculares.

En fin, sólo puedo decir que…, ya era hora.

Vía | Reuters.

Código fuente
Ejemplo

Código fuente
Ejemplo

Os queria enseñar un nuevo trabajo que acabamos de terminar en mi actual (por poco tiempo) empresa.
Se trata de http://www.viceroy.es/, una web realizada intregramente en ActionScript 3.0 (en cliente) y Coldfusion 8 (servidor).

Es un catálogo de productos y datos sobre la marca con diseño muy sencillo y limpio, sin demasiados efectos ni fuegos artificiales. Simplemente va al grano. Uso masivo de remoting.
Aquí van algunas herramientas que hemos usado a parte de nuestras propias librerías:

- SWF Adress
- SWFFit
- Tweener (caurina)
- Rosa (remoting)
- Flex Builder
- Flash CS3 (generación de assets)

“El Consejo de la Comisión del Mercado de las Telecomunicaciones (CMT) ha aprobado las medidas definitivas que regirán el despliegue de las nuevas redes de fibra óptica (o redes de nueva generación) y que marcarán el desarrollo regulatorio de la banda ancha durante los próximos años.”

Lo que en la práctica viene a decir que la gente tendrá mucha más velocidad en su conexión pronto, que será más barata, lo que implica más gente conectada, más mercado. Y todos los que tenemos que hacer cosas para público en general nos veremos beneficiados pudiendo meter en esas aplicaciones que han de cargarse en menos de 15 segundos más contenido o de mayor impacto. 

Aunque a primera vista pueda no parecer la panacea sólo debemos recordar el cambio en nuestra profesión que supuso el paso del modem de 56 kbs al ADSL de 256 kps y unirlo a la creciente demanda de aplicaciones online (RIAS) que hasta no hace mucho sólo existían sólo como aplicaciones de escritorio y muchas de ellas ni eso. Este año el concepto para algunos nuevo y para otros ya de sobra conocido de vivir y/o trabajar en la nube o cloud computing se perfila mucho más en un país como el nuestro hasta ahora con la banda ancha más cara y más lenta de Europa. La pregunta que primero me viene a la cabeza es: ¿Están las empresas españolas preparadas para aprovechar el cambio? 

Muy pronto lo veremos.

En general los perfiles de dirección de arte de las agencias interactivas suelen olvidarse de esta pieza que a mi entender es la encargada de retener al usuario mientras su “lenta” conexión consigue cargar nuestro sensacional website “ajustadísimo de pesos” hasta donde los “creativos” permitieron reducir. Si estáis cansados de hacer siempre el mismo loader y buscáis un sitio interesante donde inspirarse con semejante entuerto os recomiendo (como siempre a los que no lo conozcáis ya) prettyloaded, una extensa recopilación en la que encontraréis todo tipo de creaciones en múltiples estilos.

Personalmente echo muy en falta la posibilidad de navegar entre los ejemplos, poder volver a ver alguno, o comparar varios, así como un link al website al que pertenecen para poder verlo en su contexto. Esperemos que incorporen más funcionalidades y evolucionen el proyecto en futuras versiones.

La verdad es que el focusRect (rectángulo amarillo que muestra el foco de los objetos en pantalla cuando pulsamos tabulador) desentona mucho con el diseño del site.
Estaba intentado averiguar la manera de que no apareciera en ningún objeto, pero claro, deshabilitar esto de uno en uno podía ser una tarea infernal. Hasta que miré las propiedades del stage y me encontré con esto:

stage.stageFocusRect = false;

Ala, ya te puedes olvidar del maldito rectangulito

http://www.scribd.com/doc/2606327/subversion-spanish

Hace unos días buscando una forma rápida y sencilla de elaborar un contrato de confidencialidad me encontré con Tractis. Una aplicación online que tiene todo tipo de contratos y te permite hacer negocios nacionales e internacionales con una comodidad increíble, ya que presumen de estudiarse las legislaciones de cada país ahorrándote ese esfuerzo. Su versatilidad es tan amplia que puedes hacer todo tipo de papeleos en muy poco tiempo sin tener ni idea de temas legales usando sus múltiples plantillas.

Me parece muy útil para los profesionales que estamos más ocupados en la profesión que el las burocracias adyacentes y para ahorrarnos costes en consultorías legales aunque sea para realizar un primer acercamiento a las necesidades legales que tengamos.

Los dias 6, 7 y 8 de Abril de 2009 Carlos Ulloa impartirá un curso avanzado intensivo en Londes para progamadores con experiencia previa en ActionScript y Papervision3D.
Según nos comenta Carlos en Espapervision3D:

“Este es un curso que tenia ganas
de hacer desde hace tiempo, dirigido a gente que ya sabe para asi
poder meternos en cosas realmente interesantes”

Las plazas son limitadas (20 en total). Por lo que si estás pensando en ir ya sabes…

http://k2xl.com/wordpress/eventmanagerclass/

http://www.flashgamesponsorship.com/

https://admin.na3.acrobat.com/_a204547676/p87587214/

De esta manera podremos crear un interfaz a nuestro gusto para mostrar un repo. Supongo que alguien le dará más utilidad pronto. Hace poco me comentaba un compañero de trabajo que usaban las revisiones de svn para controlar el trabajo de cada uno, a parte de un gestor de tareas, etc. Quizá ésto les pudiera servir para crear una vista más amena.

La pega: de momento es de solo lectura, solo sirve para ver las últimas revisiones.

Visible vs alpha vs removeChild()
Ventajas y desventajas de cada uno de los métodos, y situaciones prácticas de cada uno
http://www.insideria.com/2008/11/visible-false-versus-removechi.html

Caracteres “\n” y “\r” en un String de ActionScript
http://www.moock.org/blog/archives/000281.html

Descarga (unload) de contenidos cargados en Flash Player.
A veces es un infierno. Aquí entendereis el por qué y cómo solventarlo
http://www.moock.org/blog/archives/000279.html

Más sobre descarga de contenidos
http://www.gskinner.com/blog/archives/2008/04/failure_to_unlo.html

La manera más rápida de copiar un array
http://agit8.turbulent.ca/bwp/2008/08/04/flash-as3-optimization-fastest-way-to-copy-an-array/

Operaciones matemáticas más rápidas. Optimización mediante operadores de bit
http://lab.polygonal.de/2007/05/10/bitwise-gems-fast-integer-math/

Comparativa de rendimiento de los distintos loops de AS3
http://lab.polygonal.de/2006/10/08/as3-loops-performance-comparison/

Comparativa de rendimiento entre Flash Player Debugg y Flash Player Release
http://lab.polygonal.de/2006/10/08/as3-loops-performance-comparison/

Optimización de operaciones con seno y coseno
http://lab.polygonal.de/2007/07/18/fast-and-accurate-sinecosine-approximation/

Optimización de cálculo
http://rockonflash.wordpress.com/2007/08/11/optimizations-for-as3-calculations/

Técnicas generales de optimización. Pdf muy completo
http://je2050.joa-ebert.com/files/misc/as3opt.pdf

Optimización de operaciones de cálcula básicas y uso de la clase Math
http://osflash.org/as3_speed_optimizations

Comparativa entre métodos “manuales” y la clase Math
http://www.calypso88.com/?cat=7

Loops y variables. Un ejemplo muy concreto
http://www.bit-101.com/blog/?p=1271

Int, uint, Number
http://www.gskinner.com/blog/archives/2006/06/types_in_as3_in.html