Trino.com.mx

Categories: Desarrollo Web InDatcom Integracion Tecnologica Multimedia RIA Web 2.0

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.

FireBug en otros navegadores

Categories: Desarrollo Web InDatcom RIA

Una de las herramientas mas utilizadas en el mundo del desarrollo Web es sin duda FireBug, la extensión de FireFox que te permite depurar el código HTML/CSS/JavaScript en cualquier pagina Web.

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.jsfirebug-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

FireBug Lite en Chrome

Taller Nuevas Tecnologías en Torno a Internet

Categories: Desarrollo Web InDatcom Integracion Tecnologica Multimedia Proyectos

En conjunto con el CAAV se desarrolló un proyecto muy interesante que consiste en dar un taller que ayude a sus estudiantes a acercarse a una rama empresarial que está creciendo y desarrollándose a pasos agigantados y que reclama cada vez más a nuevos profesionales cuya formación educativa incluya a la web como campo formal de desarrollo.


Que onda pues lo prometido es deuda, el día de ayer vimos html básico en el taller, etiquetas que si bien no te convierten el el mejor diseñador web, son los primeros pasos en ese largo camino.

Encontré algunos tutoriales en español, uno en especial se acerca mucho a lo que vimos y me parece que es claro, conforme avancemos o vaya encontrando más de estos, los iré posteando así no dejen de revisar este post.

Saludos

Links:


HTML Básico

Los Primeros Pasos

Algo de Tablas

El Power Point de Las Primeras Sesiones


Flash Builder 4 Beta 1

Categories: Desarrollo Web InDatcom Integracion Tecnologica RIA Web 2.0

Ya esta disponible el nuevo Flash Builder 4 Beta 1 antes conocido como Flex Builder. El nombre ha cambiado completamente para no crear una confusión entre el Flex Framework open source con el IDE comflash_builder_logoercial para desarrollar las aplicaciones Flex.

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 =)

Google Wave

Categories: Desarrollo Web InDatcom Web 2.0

Mario me paso este link del nuevo producto de Google, mas bien lo acaban de anunciar, porque ya llevan un par de años en desarrollo.

Es una especie de herramienta de colaboracion, con mezclas de mail, wiki, media aggregator, algo asi.

Los puntos que a mi mas me sorprendieron es la comunicacion bidireccional y en tiempo real, wow!, tengo años queriendo ver eso en una aplicacion 100% web. Claro tienen un backend de servidor que esta recibiendo esos paquetes y a su vez haciendo push a los demas clientes conectados, no es nueva la tecnologia, con Adobe puedes hacer ese tipo de componentes pero la manera en la que lo implementaron esta fabulosa.

Y encima de eso lo van a hacer opensource y el protocolo de comunicacion lo van a abrir para que otros desarrolladores puedan crear aplicaciones que hablen directamente con instancias del software de manera estandarizada. Ah y claro, un API para desarrolllar apps que hablen directo a la aplicacion… en fin una gran cantidad de features interesantes que se ven muy prometedores.

Aqui el video de la presentacion, algo largo, mas de 1 hora, pero vale la pena verlo.

Registrense en la pagina de Google Wave para enterarse cuando lo liberan al publico.

http://wave.google.com

Nuevo sitio – Periódico Mujer Hoy

Categories: Desarrollo Web InDatcom Integracion Tecnologica Multimedia Proyectos RIA Web 2.0

Esta nueva página que hemos desarrollado es una versión digital del periódico Mujer Hoy. Se trata de un sitio dinámico y autoadministrable que permite insertar artículos nuevos en las diferentes secciones del periódico. Tiene la habilidad de enviar a correo electrónico determinado artículo, realizar comentarios a los artículos, ver el histórico de las últimas noticias dadas de alta y la creación de encuestas dinámicas.

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:

mujerhoy01 mujerhoy02 mujerhoy03

El panel de administración:

panel04 panel02 panel03