Pues empezamos el año con el pie derecho, este 1° de Enero salió al aire (por así decirlo) la nueva página de Trino Camacho, reconocido monero e ilustrador tapatío, la cual tuvimos el placer de diseñar y programar aquí en casa.

Fue una labor en la cual tuvimos la fortuna de participar las 3 capas de desarrollo sobre las que está basada nuestra metodología de trabajo (Multimedia-RIA-Desarrollo). En todos los sentidos fue un reto para todas las capas, primero para Multimedia la cual me honro en dirigir pues había que conceptualizar los deseos de trino, un artista, lo cual no es labor sencilla como podrán imaginarse; se intentó darle un ambiente basado en el diseño que predominaba en los años 50´s , adaptado de cierta manera a una propuesta que facilitara la navegación del sitio, que si bien rompe con algunas reglas de la usabilidad creo que está bien logrado.

Para RIA y Desarrollo el reto técnico fue grande también, había que cumplir con realizar y convertir los caprichos del diseño y del sistema en realidad.

Esta, mas que una simple web, es un CMS hecho a la medida, utilizando Flex, Flash, PHP se logró crear un FrontEnd prácticamente sin limitaciones en lo creativo y un poderoso motor para la administración de contenidos, además de una tienda en línea que en breve comenzará a operar. Crear un MashUp de tecnologías de este tamaño nos permitió expresar abiertamente cuales son las metas y alcances de InDatcom con respecto a nuestros productos y servicios, fue también una gran oportunidad de aprender y especializarnos en uso de herramientas diversas que son puntas de flecha en lo que se refiere a diseño y desarrollo web, como ejemplo la implementación de Web Services, la creación de componentes flash/flex ( swc ), el entendimiento de AMFPHP.

Entre los múltiples features, retos y contratiempos y logros que se resolvieron y nos enorgullece compartir están los siguientes:

* El backend está realizado con MySQL y PHP; la conexión con frontend se realiza mediante AMFPHP

* Todo el frontend se creó en Flex mediande módulos individuales que componen cada seccion, dentro de este se realizó la programación necesaria para que las animaciones y cortinillas de entrada solo se reproduzcan la primera vez que ingresa a cada sección y de esta manera contribuir con una navegación más ágil y evitando así el hartazgo del usuario con los elementos decorativos.

* Todas las animaciones fueron generadas en Flash pero se implementaron en Flex y se logró controlarlas mediante estados específicos insertados en la línea de tiempo de cada animación, de esta manera se controla su comportamiento.

* Se crearon players a la medida para reproducir todo tipo de contenido multimedia (audios, videos, animaciones e imágenes).

* Desarrollamos un avanzado método par crear “skins” a la medida todos los componentes (botones, scrollbars, inputs, etc) de cada sección.

* La tienda se conectó con FMS para poder crear reproducciones limitadas por tiempo (30 segundos) de elementos multimedia como videos y audios.

Fue y sigue siendo una gran experiencia trabajar con visionarios como Trino, que siempre al igual que InDatcom buscan estar a la vanguardia en cualquier aspecto profesional en el que incurran.

Una tarea muy importante en Flex es la de incluir fuentes en tu aplicación. Esta se puede realizar de diferentes maneras, la mas común es utilizando el tag @font-face por medio de CSS, ya sea desde una hoja de estilos externa o empleando el tag mx:Style dentro de tu MXML.
Nota:Este método lo puedes utilizar solamente para fuentes del tipo True Type (ttf) y Open Type (otf). Para utilizar fuentes en otro formato, es necesario incluir las fuentes en un archivo .swf.

Ejemplo:

<mx:Style>

@font-face {

src: url(“fonts/Futura-Condensed-Bold.ttf”);

fontFamily: futuraB;

advancedAntiAliasing: true;

font-weight:bold;

font-style:normal;

}

</mx:Style>

Es muy importante asignar el fontWeight y fontStyle adecuado. Por ejemplo si en el código anterior asignáramos un fontStyle:italic, el debbuger nos arrojaría el siguiente error, donde indica que ese estilo no se encuentra en la fuente:

exception during transcoding: Font for alias ‘futuraB’ with italic style was not found at: file:/E:/Flex Projects/Fonts/src/fonts/Futura-Condensed-Bold.ttf …

El manejo de fuentes en flex puede ser en ocasiones una tarea muy frustrante, porque te puedes topar con errores que no te brindan ni una pista de lo que puede estar mal y no hay mucha documentación al respecto; uno muy común con el que nos hemos encontrado es el siguiente:

exception during transcoding: Unexpected exception encountered while reading font file ‘/E:/Flex Projects/Fonts/src/fonts/Futura-Condensed-Bold.ttf’ …

Las causas de este error pueden ser varias, por ejemplo, si se asigna un valor de advancedAntiAliasing:true, cuando la fuente que estas tratando de incluir no lo soporta. Para descartar que alguna propiedad este causando conflicto, hay que poner en el tag @font-face solamente el src y fontFamily.

Otra causa a este error es que el manejador de fuentes de actionscript no interpreta tu fuente correctamente. Hay 3 manejadores que trascodean fuentes: flash.fonts.JREFontManager, flash.fonts.AFEFontManager y flash.fonts.BatikFontManager.
En teoría, estos manejadotes tienen capacidades diferentes y dependiendo del tipo de fuente automáticamente se selecciona el que “mejor” haga el trabajo, pero en ocasiones no sucede de esta manera; así que una alternativa es forzar al compilador a usar un manejador AFEFontManager que parece ser el que tiene mejor soporte para fuentes. Para esto es necesario hacer lo siguiente:

Clic en Project -> propiedades.
Una vez abierto la ventana, seleccionar la sección de Flex Compiler.
En la caja de texto additional compiler arguments agregar
-managers=flash.fonts.AFEFontManager

3erPiso Records en un sitio dinámico en la que se presenta la información de la disquera, los eventos que realizaran pronto, noticias, asi como todos los datos de los artistas que forman parte de la disquera. Toda esta información decimos que es dinámica, debido a que se desarrolló un manejador de contenidos unificado, en el que ellos pueden introducir, modificar o borrar la información que desean que aparezca en su página.

El sitio también es proveedor de contenido multimedia, ya que se pueden subir imágenes, audios y videos, que de igual manera pueden ser accedidos por medio de la página y reproducirlos dependiendo del caso.

Los detalles:

• El sitio fue desarrollado utilizando Flex, PHP y MySQL.

• Se utilizó amfphp para “hablar” directamente desde flex a php de manera binaria, optimizando de esta manera el sitio y evitar el uso de xml o json que requieren el “parseo” de datos haciendo las aplicaciones más lentas.

• Se puso en práctica la integración entre Flash y Flex para realizar animaciones entre secciones, utilizando estados y eventos, para controlar desde flex las animaciones hechas en flash. También se empleó flash para generar el skinning de los componentes utilizados.

• El framework de flex se utiliza como RSL (remote shared library), con la finalidad de hacer las aplicaciones mas livianas, ya que el código que proporciona el framework es guardado en el cache del navegador o en el del flash player dependiendo de la versión que se tenga de este ultimo, por lo tanto el framework se carga una sola vez y la aplicación es la única que se carga al momento de ejecución.

Una probadita de la pagina:

El manejador de contenidos:

Lynda.com ha presentado su nuevo curso de entrenamiento online “AIR para desarrolladores Flex” que es la continuación al curso AIR Essential Training.

En las proximas semanas estaremos presentando el nuevo sitio de la disquera con base en Guadalajara 3erPiso Records, que cuenta con un catalogo de artistas creciente.

Para este desarrollo aplicamos una vez mas las 3 capas de nuestra plataforma, y a nivel frontend el sitio es 100% componentes de Flex.

Los departamentos de RIA y Multimedia se toparon con todo el proceso de desarrollo en Flex con estados para las acciones. En el siguiente link pueden ver una de las fases de desarrollo en donde se “hilan” (como le digo yo) todas las secciones del sitio con sus estados y transiciones entre cada una.

escenario

Una aplicacion mas implementada en nuestro Panel de Control Unificado, lo cual nos da una gran flexibilidad, control y manejo sobre los desarrollos.

Panel de Control 3erPiso

Concluimos el proceso de desarrollo de un catalogo dinamico para nuestros amigos de Beemistic.

El objetivo de esta aplicacion es que puedan administrar en tiempo real los articulos presentados en su catalogo, organizados por categorias, linea, sexo, temporadas, precios, etc.

Este desarrollo hace uso de nuestro nuevo Panel de Control Unificado para facilitar la administracion de contenidos, el cual le permite a nuestro cliente accesar de manera central todos los elementos de su catalogo en linea.

Catalogo en linea:

Para este producto hacemos uso de varias tecnologias:

• PHP para el manejo de datos y comunicacion entre las capas
• MySQL para el almacenamiento de datos
• Flex para la creacion de la interfaz dinamica

Un ejemplo mas en la implementacion de nuestro modelo tecnologico de 3 capas.

http://beemistic.com/catalogo