Hace unos días el CEV, Escuela Superior de Comunicación, Imagen y Sonido, ha anunciado su acuerdo con Codeoscopic para la ofrecer formación especializada en Adobe Flex. Os dejo el comunicado oficial.

A su vez es de esperar que Made In Flex y CEV aprovechen los conocimientos del equipo de MIF en estas tecnologías y las estupendas instalaciones del CEV para ofrecer nuevos eventos para beneficio de toda la comunidad.

Os dejo la nota de prensa:

CEV Y CODEOSCOPIC: ACUERDO DE COLABORACIÓN

Con este post comenzamos una serie de recomendaciones, tips y tutoriales enfocados a cubrir aquellos temas básicos de la tecnología Flex que esperamos sean de utilidad para los entusiastas de la plataforma.

Uno de los primeros tips que es importante conocer cuando hacemos aplicaciones con Flex utilizando Flex/Flash Builder es el manejo de los archivos de salida. De forma automática cuando generamos un proyecto nuevo con la herramienta se crean varias carpetas: bin-debug, html-template, src y libs.

Es común encontrar por la red aplicaciones Flex de desarrolladores que al compilar sus proyectos por descuido o desconocimiento suben las aplicaciones SWF generadas en la carpeta bin-debug, esta versión contiene información adicional que es utilizada cuando utilizamos el comando debug de la herramienta.

La forma correcta de subir nuestras aplicaciones al servidor sería aprovechando las versiones generadas a partir del comando “Export Release Build”, ya que al no incluir esa información adicional su peso es considerablemente menor que la versión de depuración.

Tomemos como ejemplo una aplicación sencilla que contiene 3 componentes: Button, TextInput y DataGrid. Al compilar estar aplicación el SWF generado en la carpeta bin-debug tiene un peso de 449 kb.

Ahora ejecutemos el comando Project > Export Release Build, el tamaño de la aplicación generada es de tan solo 276 kb, siendo el ancho de banda uno de los recursos más preciados en las aplicaciones de Internet es importante tener cuidado con estos pequeños detalles.

Hace tiempo en algún taller de Flex recuerdo que utilicé el hashtag #flex101 para hablar de los fundamentos de la tecnología, por lo que los invito a compartir sus mejores tips en Twitter a la cuenta de @madeinflex no duden que en una entrada posterior merecerá que hagamos una compilación de los mejores.

El día de hoy se anunció en Adobe Labs, AIR 2 beta 2. Es importante darle un vistazo puesto que las aplicaciones compiladas con beta 1 ya no podrán ejecutarse con el runtime de AIR 2 beta 2, así mismo hay algunas características importantes en esta versión entre las que destacan…

• Interacción Mejorada con la Impresora: Nuevo soporte de impresión que permite un control más fino sobre la manera en que el contenido se imprime desde una aplicación AIR, incluyendo la elección de impresora, tamaño del papel y número de copias.
  Una nueva API que permite recuperar información adicional de la impresión, como el área a imprimir, los colores y status de actividad. También es posible mandar a imprimir sin mostrar el diálogo de imprimir.
• Soporte para comunicación de sockets TLS/SSL: Ahora es posible conectarse a un servidor que requiere comunicaciones por socket tipo TLSv1 o SSLv3.
• API IME y Mejoras en la Entrada de Texto: Interesantes mejoras para soportar la entrada de texto con software IME mediante un API diseñada para utilizar el Flash Text Engine.

También hay algunas aplicaciones de ejemplo que podemos ir descargando para revisar a detalle estas características.

Seguramente alguna vez hemos oído o leído sobre los conceptos de “pool de objetos” o “cache de objetos”. En este artículo quiero darles un vistazo en profundidad. Son conceptos que pueden confundirse, es por esto que intentaré resaltar las diferencias entre ambos conceptos después de haber investigado un poco.

Definiciones

Son patrones orientados a objetos muy potentes y muy usados en diferentes tecnologías, sobre todo en J2EE.

Cuando hablamos de pool, ésta se concibe como una colección de objetos sin estado. Algunos ejemplos serían una pool de conexiones a base de datos o una pool de item renderers.

En cambio, la cache se define como una colección de objetos con estado definido, por ejemplo, cuando trabajamos con servicios con una capa como puede ser Spring, los servicios se cachean.

La diferencia más importante entre estos dos conceptos está en lo que contienen, es decir, usaremos una cache cuando nos interese guardar un estado de un objeto concreto. En cambio usaremos una pool cuando necesitamos guardar objetos de los cuales no nos importa perder su estado.

Otras consideraciones importantes son:

• Cuando pedimos un objeto de una pool, se nos puede servir cualquier objeto de esta pool.
• En cambio, cuando pedimos un objeto de una cache, esperamos un objeto específico de esta cache.
• Si todos los objetos de la pool están en uso cuando pedimos un elemento, esperaremos hasta que se libere cualquier objeto o se cree uno, si es necesario.
• Si todos los objetos de la cache están en uso cuando se pide uno, tocará esperar hasta que el objeto deseado esté libre, aunque hubiera muchos elementos disponibles en la cache, ya que nos interesa uno concreto.
• El tamaño de una pool puede variar según el número de recursos que necesitemos en un momento determinado.
• El tamaño de una cache suele ser fijo.

Implementación

Podemos decir que la manera más habitual una cache se representa como un diccionario, es decir, como una colección de parejas id-value, de manera que cuando necesitamos un recurso determinado, éste es buscado en el diccionario y se devuelve el valor.

Para representar una pool, también podemos hacerlo con un diccionario, pero se suele crear una clase que controle los recursos, con una lógica no tan sencilla como la de una cache.

Sobre las pools

Una pool de objetos puede ofrecer una mejora de rendimiento en una aplicación. Es adecuada en aquellas situaciones en la que nos puede penalizar el proceso de creación de objetos o en las que el número de objetos de un determinado tipo puede hacer degradar el rendimiento la aplicación.

En la siguiente imagen se muestra un ejemplo típico de Pool:

La pool está implementada como un singleton, el cual nos permite pedir un elemento, liberar un elemento o settear el valor máximo de elementos que la pool puede albergar.

Las pools se diferencian en tres tipos:

• Pool sin límite: tiene un tamaño ilimitado, de manera que nos asegura que siempre devolverá un objeto cuando lo necesitemos.
• Pool nivelada: tiene un tamaño constante. La pool se rellena durante su construcción, de manera que la carga de memoria la tenemos en tiempo de creación de la pool y no cuando se piden elementos.
• Pool en cola: La pool tiene un tamaño mínimo y se rellena durante la construcción. No tiene límite, lo que le permite crecer. La diferencia está en que cuando pedimos un recurso de la pool y éstos están todos ocupados, la petición se pone en cola.

Cada aproximación de las anteriores expuestas tiene sus beneficios y depende del contexto, el uso de una o de otra.

Conclusión

Espero que este post haya servido para aclarar ambos conceptos. A continuación os dejo unos links interesantes sobre este tema:
http://elromdesign.com/blog/2009/11/05/object-pooling-in-flex-actionsctipt/
http://www.lostinactionscript.com/blog/index.php/2008/10/30/object-pooling-in-as3/

]]> http://www.madeinflex.com/2010/02/01/object-pool-and-caching/feed/ 4 http://www.madeinflex.com/2010/01/29/devicedays/ http://www.madeinflex.com/2010/01/29/devicedays/#comments Fri, 29 Jan 2010 08:48:00 +0000 Joan Garnet http://www.madeinflex.com/?p=1154 Nuestros buenos amigos de BlocketPc han organizado del evento DeviceDays el cual está orientado al desarrollo Flash sobre dispositivos y terminales móviles. Si quieres aprender cómo se programa en ActionScript 3 para iPhone y Flash Player 10.1 sólo tienes que registrarte en la web oficial de DeviceDays. Por parte de MadeInFlex estaremos presentes varios integrantes del equipo [...]]]>

Nuestros buenos amigos de BlocketPc han organizado del evento DeviceDays el cual está orientado al desarrollo Flash sobre dispositivos y terminales móviles.

Si quieres aprender cómo se programa en ActionScript 3 para iPhone y Flash Player 10.1 sólo tienes que registrarte en la web oficial de DeviceDays.

Por parte de MadeInFlex estaremos presentes varios integrantes del equipo para no perdernos ni un bit de información de lo que los expertos del mundo del desarrollo Flash en dispositivos nos puedan contar.
No podemos obviar que el desarrollo Flash en dispositivos está entrando en su verdadera luna de miel y que en los próximos tiempos, con la salida del Flash Player 10.1 y la ejecución del Open Screen Project en todo su esplendor vamos a ver una explosión de contenido que vamos a tener que desarrollar… nosotros!

Las conferencias son totalmente gratuitas y cuentan con ponentes como Richard Galván, Mark Doherty o Enrique Duvós entre otros. Así que ya sabes, si el día 19 de Febrero estás por Barcelona, no dudes en ir a las oficinas de Adobe y disfrutar de unas buenas jornadas sobre la Flash Platform.

• Site del evento
• Inscripción
• Talleres
• Lugar
]]> http://www.madeinflex.com/2010/01/29/devicedays/feed/ 2 http://www.madeinflex.com/2010/01/28/fx4-viii-soporte-css-ampliado/ http://www.madeinflex.com/2010/01/28/fx4-viii-soporte-css-ampliado/#comments Thu, 28 Jan 2010 14:04:05 +0000 Joan Garnet http://www.madeinflex.com/?p=1106 En esta cuarta versión de Flex se han producido cambios considerables en la arquitectura de componentes así como en el lenguaje MXML. Esto se ha hecho para potenciar varios aspectos como son la productividad, facilitar el workflow designer / developer o la integración con herramientas externas. En esta entrada se verá en profundidad las novedades referentes [...]]]>

En esta cuarta versión de Flex se han producido cambios considerables en la arquitectura de componentes así como en el lenguaje MXML. Esto se ha hecho para potenciar varios aspectos como son la productividad, facilitar el workflow designer / developer o la integración con herramientas externas.
En esta entrada se verá en profundidad las novedades referentes al soporte CSS en Flex 4.

1. Espacios de nombre
2. Selector de clase múltiple
3. Selector por #id
4. Selectores descendientes
5. Pseudo selectores
6. Combinando
7. Conclusión
8. Notas

Espacios de nombre

A partir de Flex 4 todos los selectores CSS requieren de un espacio de nombres para evitar la ambiguedad entre nombres de clase definidos en halo y spark.
Un ejemplo de esta situación la podemos encontrar en la clase Button.
Para spark la clase Button se define en spark.components.Button, en cambio para halo se define en mx.controls.Button. Lo que se puede apreciar es que en ambos casos las clases se llaman igual. Si se hubiera mantenido el modelo CSS de Flex <= 3 tendríamos un problema de ambiguedad al querer redefinir los estilos de la clase Button como se puede ver.
El código que necesitamos para definir los estilos de Button para spark y halo a la vez sería el siguiente:

PLAIN TEXT
MXML:
1. <?xml version="1.0" encoding="utf-8"?>
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
3.                xmlns:s="library://ns.adobe.com/flex/spark"
4.                xmlns:mx="library://ns.adobe.com/flex/mx">
5.     <fx:Style>
6.         @namespace s "library://ns.adobe.com/flex/spark";
7.         @namespace mx "library://ns.adobe.com/flex/mx";
8.         s|Button{ lineThrough: true; }
9.         mx|Button{ icon: Embed('favorite.png'); }
10.         .botonRedondeado{ cornerRadius: 10; }
11.     </fx:Style>
12.    
13.     <s:layout><s:VerticalLayout paddingLeft="50" paddingTop="50" /></s:layout>
14.    
15.     <s:Button label="Spark Button 1" />
16.     <s:Button label="Spark Button 2" styleName="botonRedondeado" />
17.     <mx:Button label="Halo Button 1" />
18.     <mx:Button label="Halo Button 2" styleName="botonRedondeado" />
19.    
20. </s:Application>

Obtenemos esto:

Podemos observar dos peculiaridades con respecto a Flex3. La primera las declaraciones de espcios de nombre @namespace alias "URI"; y la segunda la forma de contextualizar las declaraciones con alias|ClassName.
Por otra parte vemos que podemos seguir utilizando los selectores de clase de siempre de la misma forma que antes y que son aplicables a componentes halo y spark indistintamente.

Selector de clase múltiple

Una forma muy potente de modularizar los estilos es definirlos de la forma más atómica posible. Cuanto más se especialice la declaración de un estilo más versatil será.
A partir de Flex 4 se pueden asignar múltiples selectores de clase a un mismo componente separados por un espacio:

PLAIN TEXT
MXML:
1. <?xml version="1.0" encoding="utf-8"?>
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
3.                xmlns:s="library://ns.adobe.com/flex/spark"
4.                xmlns:mx="library://ns.adobe.com/flex/mx">
5.     <fx:Style>
6.         .iconoFavoritos{ icon: Embed('favorite.png'); }
7.         .botonRedondeado{ cornerRadius: 10; }
8.         .textoRojo{ color: #FF0000; }
9.         .texto25{ fontSize: 25; }
10.     </fx:Style>
11.    
12.     <s:layout><s:VerticalLayout paddingLeft="50" paddingTop="50" /></s:layout>
13.  
14.     <s:Button label="Spark Button 2" styleName="texto25 botonRedondeado textoRojo" />
15.     <mx:Button label="Halo Button 2" styleName="iconoFavoritos textoRojo" />
16.    
17. </s:Application>

Obtenemos esto:


Selector por #id

Otra característica añadida es el soporte para selectores por identificador, al más puro estilo HTML:

PLAIN TEXT
MXML:
1. <?xml version="1.0" encoding="utf-8"?>
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
3.                xmlns:s="library://ns.adobe.com/flex/spark"
4.                xmlns:mx="library://ns.adobe.com/flex/mx">
5.    
6.     <fx:Style>
7.         #favoritos{
8.             icon: Embed('favorite.png');
9.             cornerRadius: 10;
10.             fontSize: 25;
11.         }
12.     </fx:Style>
13.    
14.     <s:layout>
15.         <s:VerticalLayout paddingLeft="50" paddingTop="50" />
16.     </s:layout>
17.  
18.     <mx:Button id="favoritos" label="Favoritos" />
19.    
20. </s:Application>

Obtenemos esto:


Selectores descendientes

Los selectores descendientes nos ofrecen la posibilidad de contextualizar las declaraciones de nuestros estilos dentro del ámbito de una clase determinada.
Por ejemplo, si queremos declarar un estilo que afecte a todos los campos de texto que estén dentro de un formulario lo haríamos de la siguiente forma:

PLAIN TEXT
MXML:
1. <?xml version="1.0" encoding="utf-8"?>
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
3.                xmlns:s="library://ns.adobe.com/flex/spark"
4.                xmlns:mx="library://ns.adobe.com/flex/mx">
5.    
6.     <fx:Style>
7.         @namespace s "library://ns.adobe.com/flex/spark";
8.         @namespace mx "library://ns.adobe.com/flex/mx";
9.  
10.         mx|FormItem s|TextInput{ color: #FF0000; }
11.         mx|FormItem mx|TextInput{ color: #00FF00; }
12.     </fx:Style>
13.    
14.     <s:layout>
15.         <s:VerticalLayout paddingLeft="50" paddingTop="50" />
16.     </s:layout>
17.    
18.     <s:TextInput text="TextInput fuera de Form"/>
19.     <mx:Form>
20.         <mx:FormItem label="Dentro FormItem">
21.             <s:TextInput text="Spark TextInput"/>
22.             <mx:TextInput text="Halo TextInput"/>
23.         </mx:FormItem>
24.     </mx:Form>
25.    
26. </s:Application>

Obtenemos esto:


Pseudo selectores

Los pseudo selectores permiten aplicar estilos sobre un componente teniendo en cuenta el skin state en el que está. Para ello se debe tener conocimiento de los estados de skin disponibles para el componente en cuestión.
Por ejemplo, la clase spark.components.Button dispone de los estados up, over, down y disabled (cada componente tiene especificados sus skin states en la documentación ASDoc), por lo tanto podemos sacar partido de los pseudo selectores CSS del siguiente modo:

PLAIN TEXT
MXML:
1. <?xml version="1.0" encoding="utf-8"?>
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
3.                xmlns:s="library://ns.adobe.com/flex/spark"
4.                xmlns:mx="library://ns.adobe.com/flex/mx">
5.    
6.     <fx:Style>
7.         @namespace s "library://ns.adobe.com/flex/spark";
8.         @namespace mx "library://ns.adobe.com/flex/mx";
9.  
10.         s|Button:up{ fontSize: 10; }
11.         s|Button:over{ fontSize: 20; }
12.         s|Button:down{ fontSize: 30; }
13.     </fx:Style>
14.    
15.     <s:layout>
16.         <s:VerticalLayout paddingLeft="50" paddingTop="50" />
17.     </s:layout>
18.    
19.     <s:Button label="Spark Button"/>
20.    
21. </s:Application>

Obtenemos esto:
Up:

Over:

Down:


Combinando

Por supuesto lo más interesante de todo es que todas estas funcionalidades las podemos combinar:

PLAIN TEXT
MXML:
1. <?xml version="1.0" encoding="utf-8"?>
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
3.                xmlns:s="library://ns.adobe.com/flex/spark"
4.                xmlns:mx="library://ns.adobe.com/flex/mx">
5.    
6.     <fx:Style>
7.         @namespace s "library://ns.adobe.com/flex/spark";
8.         @namespace mx "library://ns.adobe.com/flex/mx";
9.  
10.         mx|Panel mx|ControlBar s|Button:up{ color: #FF0000; fontSize: 6; }
11.         mx|Panel mx|ControlBar s|Button:over{ color: #00FF00; fontSize: 30; }
12.        
13.         mx|Panel mx|Form #formItem2 s|TextInput{ color: #0000FF; }
14.        
15.     </fx:Style>
16.    
17.     <s:layout>
18.         <s:VerticalLayout paddingLeft="50" paddingTop="50" />
19.     </s:layout>
20.    
21.     <mx:Panel title="Ejemplo">
22.         <mx:Form width="100%" height="100%">
23.             <mx:FormItem label="Label">
24.                 <s:TextInput text="Lorem Ipsum"/>
25.             </mx:FormItem>
26.             <mx:FormItem id="formItem2" label="Label">
27.                 <s:TextInput text="Lorem Ipsum"/>
28.             </mx:FormItem>
29.         </mx:Form>
30.         <mx:ControlBar horizontalAlign="right">
31.             <s:Button label="Spark Button"/>
32.         </mx:ControlBar>
33.     </mx:Panel>
34.    
35. </s:Application>

Obtenemos esto:
Up:

Over:


Conclusión

Con Flex4 se dispone de una mayor versatilidad y control en lo que a declaración de estilos se refiere. La implementación CSS de Flex <= 3 dejaba bastante que desear y este paso sin duda está apuntando hacia el buen camino.
Cabe destacar que se dipone de una API AS3 para asignar todos estos estilos de forma programática y que no dudo se cubrirá en una futura entrada así que, manteneos atentos!

Notas

• Los selectores de clase son los que llevan punto '.' antes del identificador. Por ejemplo .botonRedondeado{}, los selectores de tipo son los que se asocian con una clase. Por ejemplo s|Button

]]> http://www.madeinflex.com/2010/01/28/fx4-viii-soporte-css-ampliado/feed/ 2 http://www.madeinflex.com/2010/01/02/geostratum-2-0/ http://www.madeinflex.com/2010/01/02/geostratum-2-0/#comments Sat, 02 Jan 2010 17:21:11 +0000 Carlos Rovira http://www.madeinflex.com/?p=1076 Nos complace presentar un nuevo producto para nuestra sección de Casos de Uso. Se trata de GeoStratum 2.0, un nuevo producto RIA de ultimísima generación basado en Flex y Java y construido sobre la plataforma avanzada de producción RIA llamada RIAlity. Ambos productos, GeoStratum y RIAlity son obra de Codeoscopic. GeoStratum es un sistema de información [...]]]>

Nos complace presentar un nuevo producto para nuestra sección de Casos de Uso. Se trata de GeoStratum 2.0, un nuevo producto RIA de ultimísima generación basado en Flex y Java y construido sobre la plataforma avanzada de producción RIA llamada RIAlity. Ambos productos, GeoStratum y RIAlity son obra de Codeoscopic.

GeoStratum es un sistema de información basado en un visor cartográfico sobre el que podemos desarrollar diferentes aplicaciones basadas en visualización georeferenciada.

La usabilidad de una aplicación de estas características alcanza niveles excelentes gracias a la sencillez de navegación, basada principalmente en clicks y movimientos del ratón, en contraposición a los típicos formularios de las aplicaciones de gestión tradicionales y la exposición de la información de foma espacial sobre localizaciones geográficas en vez de las tablas de datos normales en estos casos.

Este es sin duda un buen ejemplo de aplicación RIA, desarrollada sobre Flex y JEE, por uno de los equipos de producción de Codeoscopic. El concepto principal detrás del producto es el poder extender la base GIS para añadir información propia de un negocio concreto. En ese aspecto, GeoStratrum 2.0 es la herramienta apropiada para gestionar infraestructuras de suministro (agua, electricidad, etc), planes urbanísticos, líneas de transporte (metro, autobus,...), servicios de logística, polígonos industriales, parques naturales, etc...

]]> http://www.madeinflex.com/2010/01/02/geostratum-2-0/feed/ 3 http://www.madeinflex.com/2009/12/14/essential-actionscript-3-0-para-iphone/ http://www.madeinflex.com/2009/12/14/essential-actionscript-3-0-para-iphone/#comments Mon, 14 Dec 2009 20:32:53 +0000 Edgar Parada http://www.madeinflex.com/?p=1070 Son pocos los libros que se vuelven referencia en el medio y Essential ActionScript 3.0 de Colin Moock para los desarrolladores Flash/Flex es uno de ellos. Ahora podemos disponer de todo este material en una fracción del peso y del costo para nuestro iPhone. Aquí algunos datos interesantes: el libro en versión impresa pesa 1270 [...]]]>

Son pocos los libros que se vuelven referencia en el medio y Essential ActionScript 3.0 de Colin Moock para los desarrolladores Flash/Flex es uno de ellos. Ahora podemos disponer de todo este material en una fracción del peso y del costo para nuestro iPhone. Aquí algunos datos interesantes: el libro en versión impresa pesa 1270 gramos y cuesta $54 usd, un iPhone pesa 135 gramos y la aplicación cuesta $5 usd.



La experiencia de usuario es algo que se agradece mucho, dentro de las funciones principales están:

• Navegación Gestual de Páginas.
• Graduación del Brillo.
• Anotaciones.
• Diccionario de Referencia.
• Fucnión de Búsqueda Inteligente.
• Cambio de alineación y tamaño del texto.

Cabe destacar que hay otros títulos disponibles como el Flex Cookbok, Search Engine Optimization for Flash, AIR for Javascript Developers, etc.

]]> http://www.madeinflex.com/2009/12/14/essential-actionscript-3-0-para-iphone/feed/ 5 http://www.madeinflex.com/2009/11/17/disponibles-las-betas-de-air-2-y-flash-player-10-1/ http://www.madeinflex.com/2009/11/17/disponibles-las-betas-de-air-2-y-flash-player-10-1/#comments Tue, 17 Nov 2009 09:37:37 +0000 Sergi Dote Teixidor http://www.madeinflex.com/?p=1063 Esta noche se han hecho públicas las betas de AIR 2 y de Flash Player 10.1 en Adobe Labs. Es la primera vez que simultáneamente se publica una versión de runtime para Desktop (AIR) y para browser (Flash Player), además disponible para las tres plataformas (Mac, Windows y Linux) . Comentemos un poco las mejoras en [...]]]>

Esta noche se han hecho públicas las betas de AIR 2 y de Flash Player 10.1 en Adobe Labs. Es la primera vez que simultáneamente se publica una versión de runtime para Desktop (AIR) y para browser (Flash Player), además disponible para las tres plataformas (Mac, Windows y Linux) .


Comentemos un poco las mejoras en ambos productos:

Flash player 10.1

Se han añadido nuevas APIs y optimizaciones que nos aportan muchos beneficios. Destacamos entre otras:

• Handler global de errores
• Soporte globalizado
• Soporte para text inputs no físicos (dispositivos móbiles)
• Multi-touch y gestures
• Soporte para sensores de tipo accelerometer
• Control optimizado de los SWF para móbiles
• Sleep mode para reducir el consumo de la bateria en los dispositivos móbiles
• Aceleración gráfica por hardware
• Decodificación del formato H.264
• Frame rate adaptativo
• Mejor integración del browser
• HTTP streaming
• Acceso al micrófono

Para mitad del 2010 se esperan otras mejoras que ya iremos comentando.
Otra particularidad de Flash Player 10.1 es la optimización. Según Adobe es muy importante, ya que sin tener que añadir código extra, se experimenta un mejor rendimiento. En la imagen siguiente podemos ver una comparativa con la versión anterior de Flash Player:



AIR 2.0

Muchas mejoras aporta esta nueva versión del runtime. Podemos destacar:

• Multi-touch y gestures
• Apertura de ficheros con la aplicación por defecto
• Detección de volúmenes de almazenaje
• Comunicación con procesos nativos
• Drag and Drop de ficheros no existentes que se generan on demand
• Server Sockets: tenemos Datagram Sockets, Encrypted Sockets, soporte IPv6 y acceso a la información de la red a bajo nivel.
• Resolución DNS
• Encoding local de audio
• Handler global de errores
• Optimizaciones de CPU y memory

No están citadas todas las características de ambos productos, si quereis verlas todas, podeis ir a Adobe Labs donde podreis consultarlas y descargar los runtimes y SDK's.

Iremos informando al respecto.

]]> http://www.madeinflex.com/2009/11/17/disponibles-las-betas-de-air-2-y-flash-player-10-1/feed/ 2 http://www.madeinflex.com/2009/11/11/usabilidad-en-la-interaccion-persona-aplicacion/ http://www.madeinflex.com/2009/11/11/usabilidad-en-la-interaccion-persona-aplicacion/#comments Wed, 11 Nov 2009 18:00:38 +0000 Sergi Dote Teixidor http://www.madeinflex.com/?p=1028 Una de las últimas asignaturas que cursé en la carrera y una de las más importantes desde mi punto de vista, trataba sobre interficies de usuario. Agradezco al profesor Jordi Regincós, un experto en este ámbito, que me haya permitido usar sus apuntes para este artículo. A los developers de aplicaciones, en especial a nosotros, los [...]]]>

Una de las últimas asignaturas que cursé en la carrera y una de las más importantes desde mi punto de vista, trataba sobre interficies de usuario. Agradezco al profesor Jordi Regincós, un experto en este ámbito, que me haya permitido usar sus apuntes para este artículo.
A los developers de aplicaciones, en especial a nosotros, los desarrolladores de RIA's, nos tiene que sonar el concepto de usabilidad, para los que no, me complace compartir con vosotros este post.


Introducción

A menudo se piensa que sólo el buen diseño de una aplicación hará que ésta sea atractiva; y no es así: si ésta no es usable, el usuario acabará por aborrecerla, por muy bueno que sea el diseñador.

La usabilidad se define en la wikipedia como la facilidad con la cual las personas pueden utilizar un objeto con el fin de alcanzar un objetivo concreto. La usabilidad también puede referirse al estudio de los principios que hay tras la eficacia percibida de un objeto.

En el ámbito de la interacción persona - aplicación, la usabilidad se refiere a la claridad y la elegancia con que se diseña la interacción con una aplicación. No debemos confundir la usabilidad con la experiencia de usuario: están relacionadas de alguna forma, pero no son lo mismo, ya que la experiencia de usuario se refiere al conjunto de factores y elementos relativos a la interacción del usuario, con un entorno o dispositivo concretos, cuyo resultado es la generación de una percepción positiva o negativa de dicho servicio.

La usabilidad tiene en cuenta estos aspectos:

• El tipo o tipos específicos de usuario/s
• La tarea o tareas para las cuales el sistema se ha diseñado
• El contexto en el que se da la interacción

Los conceptos de usabilidad y de modelo de interacción persona / aplicación están relacionados, ya que el grado de usabilidad facilitará o no esta interacción.

Interacción persona / aplicación

Hay distintos estilos de interacción entre persona y aplicación, pero todos quedan reflejados en el siguiente diagrama:



En el diagrama anterior se describe la interacción como un proceso cíclico que sigue las siguientes etapas:

1- El usuario introduce datos mediante un dispositivo de entrada.
2- El dispositivo de entrada envía datos a la aplicación para que ésta realice una acción en el sistema.
3- La aplicación da una respuesta a la acción solicitada y refleja los cambios en el dispositivo de salida, el más común es el monitor.
4- El usuario interpreta la salida como resultado a la acción solicitada.

En el diagrama se observa que hay dos conceptos que pueden sorprender, los precipicios de ejecución y de evaluación. Vamos a explicar a continuación en que consisten.

Precipicios de ejecución y evaluación

El concepto de precipicio de ejecución se define como la dificultad que tiene el usuario para traducir las intenciones en acciones sobre el sistema. Por ejemplo, en una web de compras online, sería la dificultad que encuentra para tomar cada decisión sobre el sistema que le llevará a comprar un producto.

En cambio, el precipicio de evaluación se define como la dificultad que tiene el usuario para decidir si las acciones que ha realizado sobre el sistema han servido para conseguir sus objetivos, en función de la interpretación de la respuesta que la aplicación da sobre el dispositivo de salida. Siguiendo con el ejemplo anterior, sería la dificultad que tiene el usuario para ir entendiendo los diferentes estadios del proceso de compra a partir del feedback de la aplicación.

Se considera que cuanto mayores son estos precipicios peor usabilidad tiene la aplicación; por lo tanto, uno de los objetivos de la interficie gráfica debe ser reducir al máximo estos precipicios.

Beneficios de la usabilidad

Los más destacados son:

• Reducción de los costes de aprendizaje
• Disminución de los costes de asistencia y ayuda al usuario
• Optimización de los costes de diseño, rediseño y mantenimiento
• Aumento de la tasa de conversión de visitantes a clientes de un sitio web
• Mejora la imagen y el prestigio
• Mejora la calidad de vida de los usuarios, ya que reduce su estrés, incrementa la satisfacción y la productividad

Principios básicos del diseño centrado en la usabilidad

Entre la multitud de expertos en usabilidad, me gustaría destacar a Donald A. Norman , ya que considero que los principios que difunde, son principios esenciales y universales que definen un buen diseño para conseguir una mejor usabilidad. Sus principios son:

• Visibilidad: las funcionalidades del sistema deben ser claramente visibles.
• Realimentación: Debemos mostrar el resultado de las acciones que hemos realizado sobre el sistema.
• Restricciones: Se deben determinar restricciones sobre que se puede y que no se puede hacer. Estas restricciones pueden depender de diferentes aspectos como por ejemplo de cómo la aplicación determina su uso, de qué modelo mental se ha hecho el usuario sobre el sistema o de las convenciones que el usuario tiene preconcebidas.
• Correspondencias: Norman lo define como la relación entre los controles y como afectan al sistema.
• Consistencia: Acciones similares sobre el sistema deben realizar resultados similares sobre el sistema.
• Affordances: lo podemos traducir como “pistas” sobre los atributos de los elementos en pantalla, que nos ayuden a deducir como utilizarlos.

Principios de la usabilidad

Jakob Nielsen es considerado el creador del concepto de usabilidad. Él la definió como “atributo de calidad que mide lo fáciles de usar que son las interfaces”; es decir una aplicación usable es aquella en la que los usuarios pueden interactuar de la forma más fácil, cómoda, segura e inteligentemente posible.
Jakob Nielsen dijo que es muy importante que una interfaz sea entendible, novedosa, comprensible, inteligente y atractiva.

Además definió sus propios principios de usabilidad que a continuación enumero:

• Visibilidad del estado del sistema
• Correspondencia entre el sistema i el mundo real
• El usuario debe ver consistencia entre acciones y resultados
• Ayudar a los usuarios a reconocer errores y cómo recuperarse de ellos
• Evitar errores
• Aplicar la máxima de: “reconocer es mejor que recordar”
• Flexibilizad y eficiencia
• Diseño y estética adecuados
• Ayuda disponible para el usuario

Para concluir…
Para los que no vean la importancia de la usabilidad, decir que está reconocida como un importante atributo de calidad del software, habiéndose ganado un espacio entre aspectos más tradicionales como el rendimiento y la fiabilidad. De hecho ya se habla de ingeniería de la usabilidad. En los últimos tiempos han surgido muchas consultorías sobre usabilidad debido a la importancia que ha adquirido.
Para finalizar, si os interesa el ámbito de la usabilidad, os recomiendo que leais a Nielsen y a Norman; podeis encontrar información en la página web de su consultoría de usabilidad la Nielsen Norman Group.

]]> http://www.madeinflex.com/2009/11/11/usabilidad-en-la-interaccion-persona-aplicacion/feed/ 5