Desde hace un tiempo que se viene hablando con mucha expectativa de las nuevas características del HTML 5.0, quizá uno de los aspectos mas visibles de la especificación es el soporte para “embedear” video y audio, además de las capacidades para almacenar datos en la computadora para poder usarlos por una aplicación, Web sockets para hacer “push” de datos periódicamente al navegador, Web workers para permitir el “multitasking”, y Canvas para mejor renderización de graficas de 2 dimensiones.

Es ahora cuando YouTube ha desarrollado un prototipo para su player de video utilizando HTML 5.0 y Vimeo ha seguido sus pasos.

El player beta de YouTube se encuentra disponible aquí, aun tiene varias limitantes, por ejemplo no son soportados videos con ads, subtítulos y anotaciones. Además de que requiere un navegador que soporte los tags de video y h.264 encoded video (Chrome, Safari e Internet Explorer con el plugin CromeFrame instalado).

Para utilizar el player de Vimeo solo hay que hacer click en el link “Switch to HTML5 player” que se despliega en todos los videos (en los navegadores mencionados anteriormente). El reproductor de Vimeo no funciona para todos los videos (aprox. 90%), y solo esta habilitado para reproducirse directamente en vimeo.com, los videos embedeados serán reproducidos con el player de flash. Tampoco soporta modo fullscreen por limitación de los navegadores.

Como ven quedan muchas cosas pendientes todavía, pero indudablemente el uso y aplicación del HTML 5.0 va madurando como alternativa a los contenidos Flash.

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

Tape Festival Carrusel App, es uno de nuestros últimos casos de estudio, en donde se mezcla la tecnología de la información con la industria del entretenimiento.

Esta aplicación consistió principalmente en la instalación de una red de pantallas de plasma en donde se requería transmitir en vivo lo que ocurría en el concierto, a la vez de desplegar la información actualizada acerca del line up de los artistas y mostrar spots publicitarios de los patrocinadores del evento a manera de carrusel, de tal forma de que se estuviera repitiendo cada trozo de información con su tiempo especifico.

Las tecnologías utilizadas para llevar a cabo este proyecto son Flash Media Server 3.5, Flex, HTML, CSS, PHP y MySQL, tanto para el panel de administración de la aplicación, así como para el carrusel desplegado en las pantallas.

El panel de control o administración consistió de diferentes módulos en los que se incluyen:

• Un modulo para dar de una cámara web o digital capaz de transmitir un stream de video en vivo. En donde se pudiera elegir diferentes parámetros para la transmisión como tamaño en pixeles del video, bitrate, calidad, bitrate del audio, etc.
• Modulo para realizar “switch de cámaras”, con capacidades para elegir el orden en que aparecerían las cámaras en la aplicación, activar o desactivar alguna en especifico e incluso poder asignar el tiempo que se estaría desplegando cada cámara en la pagina de frontend; todo esto funcionando en tiempo real.
• Un modulo de line up, en donde se podía capturar los artistas y los horarios en que realizarían su performance en el escenario, en este modulo se puede elegir el orden en que aparecen los artistas mediante mecanismo drag and drop.
• Un modulo para captura de spots publicitarios en formato flv para transmitirlos utilizando el modelo VoD (video on demand) mediante FMS y su rtmp y no el tradicional “progressive download” por http. En este modulo de igual manera, se podía activar o desactivar un spot en especifico, ordenarlos con drag and drop y previsualizarlos en cualquier momento incluso antes de mandarlos a la lista de reproducción en frontend.
• También contiene un modulo de “línea del tiempo” en donde se despliega la lista de los módulos existentes para este proyecto y contiene una sección donde se puede enviar en tiempo real los módulos que se desean desplegar en las pantallas de plasma, incluso reordenar los módulos mediante drag and drop y asignar los tiempos de ejecución que cada uno tendrá en dichas pantallas (con excepción de live cámaras y spots que manejan sus tiempos internos en su propio modulo).

Algunos de los modulos en la pagina de frontend que se desplegaron durante del evento lucieron de la siguiente manera:

Algunos asistentes al festival observando el espectaculo por medio de las pantallas de plasma:

Adobe ha anunciado el nuevo Open Source Media Framework que hará más fácil a los desarrolladores Web la creación de reproductores de multimedia (video, imagen, sonido) basados en la tecnología Flash. Este Framework ha evolucionado de la iniciativa de Adobe conocida como Strobe.

Uno de los ejemplos donde se muestra el uso de este Framework es el reproductor de video utilizado en Adobe TV.

Hasta este momento el Framework incluye el código fuente (licencia pública de mozilla MPL) con funcionalidades para implementar la interfaz de usuario, para cargar  video ya sea de manera progresiva o streaming mediante http, fms y cdn; cuenta tambien con otras partes necesarias para construir un reproductor de multimedia a la medida, incluso estas funcionalidades pueden ser ajustadas o escaladas utilizando los lenguajes ActionScript 3 o MXML.

También se ha elaborado un “roadmap” en el que se especifican las funcionalidades futuras y en que momento estarán disponibles.

Descarga el codigo de la versión 0.3 y API de referencia.

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

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:

El panel de administración: