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.

Pero que opciones hay cuando tienes que depurar en Chrome, Internet Explorer, Safari o cualquier otro navegador, para este caso existe FireBug Lite.
FireBug Lite no es más que un archivo JavaScript que te permite simular muchas de las funcionalidades de la extensión FireBug en cualquier navegador diferente a FireFox, es tan sencillo como insertar en la página que estas desarrollando el siguiente código:

<script type=”text/javascript” src=”http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js”></script>

Si necesitas trabajar offline para tu proceso de desarrollo, solo es necesario descargar el siguiente archivo firebug-lite-compressed.js o firebug-lite.js e insertarlo en algún directorio de tu sitio y hacer la llamada al script:

<script type=”text/javascript” src=”/ruta/firebug-lite-compressed.js”></script>

En caso que después no desees regresar a tus archivos y eliminar estas llamadas cuando vas a publicar tu sitio final, hay una opción más fácil, que es arrastrar a tu barra de bookmarks el siguiente link, y listo lo tendrás disponible para mandarlo llamar en cualquier pagina

Firebug Lite

FireBug Lite en Chrome

Este nuevo IDE tiene muchas características y mejoras nuevas, la principal en mi punto de vista es que facilita muchisimo la integración del diseño con el desarrollo de la aplicación. Ya que en conjunto con Flash Catalyst se pueden crear cosas muy interesantes en muy corto tiempo. Tambien esta mejor integrado para trabajar con componentes de Flash, ahora sera tan facil como decir “New Flash Component” o “New Flash Container” y no los sufrimientos que hemos pasado al tratar de hacer trabajar todo este entorno a pie, jeje.

La importación de datos tambien es mas sencilla y el depuración se ha vuelto más robusta. Aquí les dejo el video que muestra las principales características de este nuevo IDE:

http://labs.adobe.com/technologies/flashbuilder4/tutorials/intro/

Para descarga Flash Builder 4 Beta 1 en adobe labs

happy coding =)

El sistema también incluye un motor manejador de banners, en donde se desarrollo un algoritmo de rotación de banners para asegurar que en determinado número de impresiones siempre aparezcan de manera rotativa los banners y proporcionar el mismo numero de impresiones a cada uno.

Detalles técnicos:

• El sitio fue desarrollado utilizando PHP, MySQL, AJAX y XHTML.
• Se utilizo el Framework Adobe Spry para implementar AJAX en la pagina.
• Se realizo un hack para conectar PHP con AJAX por medio de AMFPHP  y transmitir la información mediante el formato JSON.

Unos screenshots de la pagina:

El panel de administración:

Artistas de diversos paises mostraron sus obras en esta especie de galeria del siglo XXI, en donde el arte y la tecnologia se dieron la mano para deleite de la asistencia que acudio copiosamente al evento, en el pudimos observar gran cantidad de propuestas que escapaban de los convencionalismos y protocolos que muchas veces ciñen en el ambito artístico , ademas de talleres de todo tipo a los que acudieron mayormente estudiantes, entusiastas de la ilustracion digital y afines.

La sala web 2.0 atrajo a gran cantidad de curiosos que realizaron todo tipo de preguntas que intentamos clarificar de la mejor manera, ademas de personas que hicieron uso de los portales que se habian expuesto, en fin, el evento supero las espectativas que se tenian con creces, al mismo tiempo que deja abierta la posibilidad de realizar futuros eventos de proporciones aun mayores =D.

InDatcom formara parte de la primera edicion del Festival Internacional de Tecnologias Digitales, MOD 2008, el cual se llevara a cabo del 6 al 9 de noviembre en el ExConvento del Carmen en Guadalajara, Jalisco.

En el marco del MOD participaremos en la coordinacion de la Sala Web 2.0, donde estaremos exponiendo un poco de lo que es esta nueva generacion de la Web.

Contaremos con 20 equipos de computo conectados a internet a traves de un patrocinio de Megacable en los que estaran habilitados accesos a sitios como Facebook, MySpace, Flickr, Last.fm, Blogger, Wikipedia, hi5, Metroflog, YouTube, entre otros. Todos estos sitios considerados como parte de la segunda genereacion de la web, ya que en todos sus casos el contenido es generado por el usuario y aplican tecnologias que son caracteristicas de la web actual, como AJAX, Flash, Flex, etc.

Tambien estaremos haciendo la presentacion de nuestra nueva plataforma de Webcasting, con la que a traves de 4 camaras distribuidas alrededor del ExConvento estaremos transmitiendo en tiempo real todo lo que suceda en el festival. Janet la responsable del departamento de RIA en InDatcom aplicara algunos elementos innovadores en el manejo de esta plataforma como el enviar texto publicitario a los streams de tiempo real, cuenta con un panel de control para los streams con el que puede intercambiar camaras, insertar spots de video en tiempo real, desactivar algun stream, etc. La transmision de estos feeds se llevara a cabo en el link de nuestra plataforma de video: http://indatcom.tv

Las camaras estaran interconectadas ya que tendremos una implementacion con mas de 6 equipos wi-fi, entre access points y repetidores distribuidos en todo el inmueble, como lo hemos hecho en otros eventos, lo que inclusive nos permitira la movilidad de las camaras.

Para los que no nos puedan acompañar a las presentaciones en vido de los VJs Eclectic Method y D-Fuse tendran la oportunidad de acceder a estas imagenes ya que conectaremos nuestra plataforma a las camaras de circuito cerrado que instalara el Canal 7 del Gobierno del Estado.

Y como la cereza en el pastel tambien estaremos presentando un ciclo de videos que consideramos entran el espectro de la Web 2.0, ya que son generados por el usuario, ya sea que los videoastas crean estos videos y los suben a sitios como YouTube asi como los que logran graban situaciones de la vida cotidiana interesantes, e inclusive los que utilizan sitios como estos para exponer sus ideas y visiones de todo tipo de temas.

No se pierdan este ciclo de videos que se presentaran en la vitrina del ExConvento.

Los esperamos a partir de este jueves 6 de noviembre, y no se les olvide pasar a saludar!

Informacion oficial del MOD:

festival internacional de tecnologías digitales

Las tecnologías digitales han transformado la forma de comunicarnos: celulares, internet, satélites; de entretenernos: videojuegos, DVD players, video conciertos; de generar productos audiovisuales: intervenciones, video instalaciones, paisajes sonoros, arte digital interactivo; de educarnos: tiene nuevas posibilidades con las bibliotecas digitales, revistas en línea, el conocimiento colectivo que se da en la web 2.0, redes profesionales y sociales.

Las tecnologías digitales han permeado la vida cotidiana donde encontramos pantallas interactivas digitales, pantallas para informar, entretener, comunicar, conectar, hacer transacciones, controlar, pantallas para todas las necesidades y en la medida que su empleo se extiende, se hace patente que hay que usarlas con destreza y creatividad.

El Centro de Medios Audiovisuales, CAAV y la Dirección General de Actividades Culturales de la Secretaría de Cultura del Gobierno del Estado de Jalisco, hemos trabajado conjuntamente para mostrar al público, una selecta muestra de las posibilidades que ofrece la tecnología digital.

El propósito de este festival es presentar el uso, tendencias y desarrollo de las nuevas tecnologías en el arte, la educación, el entretenimiento y las comunicaciones.

Durante cuatro días, el Ex convento del Carmen será intervenido digitalmente: videos, arte y paisajes sonoros, instalaciones, videoconciertos, talleres y arte digital interactiva son algunos de los campos de vanguardia artística que ofrece el monitor digital.

En Guadalajara del 6 al 9 de noviembre del 2008, en el Ex Convento del Carmen se celebra por primera vez el festival Internacional de tecnologías digitales: monitor digital, mod.

El mod está dirigido a las personas que quieran conocer y disfrutar el arte digital interactivo, que quieran aprender más acerca de la digitalización y aquellas que quieran escuchar nuevas propuestas de arte sonoro o divertirse con videojuegos en espacio real.

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

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:

Esta es una excelente noticia ya que el proceso de “Encoding” es crucial para cualquier empresa que requiere preparar videos para publicarlo en la Web, aplicaciones de escritorio, incluso en dispositivos móviles, ahora con FMES y su plataforma de nivel “Enterprise” es una muy buena opción para compañías con estas necesidades. Solo falta esperar el release final que será publicado a finales del 2008 y se estima que tendrá un costo de $6,000 USD. Para mas información haz click aqui.