Video: Programando de a pares con Diogenes Moreira

En esa sesión mi par es Diogenes Moreira, amante de la Orientación a Objetos que a pasado por múltiples tecnologías desde Cobol y PowerBuilder hasta Java y C#, siempre con su corazón cerca de Smalltalk.

Diogenes trabaja actualmente para Ilon SA y aunque tiene múltiples responsabilidades no deja de programar junto a su equipo. Participó en varios proyectos de código abierto, incluyendo colaboraciones para Pharo.

Nos conocemos por amigos comunes y por el grupo Agiles de Buenos Aires, y casualmente durante una de las reuniones mensuales de éste nos escapamos un rato a grabar este video en que hacemos algunos ejemplos con Seaside, un framework web para Smalltalk.

Como acompañamiento del video, dejo esta presentación de Esteban Lorenzano, en la que se recorren varias de las características que Diogenes comenta mientras escribimos los ejemplos:

Sin más preámbulos, el video, que dura aproximadamente 35 minutos. Estoy usando un servicio que brinda mucho mejor calidad de video (sobre todo para el código), pero tengan paciencia porque el reproductor puede tardar varios segundos (a veces casi un minuto) en empezar.

 

Heroku vuelve a la consola para sumar Node.js

El infatigable equipo detrás de Heroku (la plataforma como servicio recientemente adquirida por Salesforce.com) está sumando a su infraestructura, creada inicialmente para simplificar el despliegue de aplicaciones Ruby (Rails, Sinatra u otros frameworks) la capacidad de alojar aplicaciones para Node.js

Ya hablé antes sobre Node.js, y como esperaba, este es el año en que el modelo de aplicaciones JavaScript del lado cliente y servidor comienza a consolidarse. El que una plataforma madura y robusta como Heroku facilite la ejecución de este tipo de arquitecturas potenciará muchísimo su uso.

Algo interesante que están haciendo en Heroku, siguiendo su estilo de pensar no sólo la solución sino el flujo de trabajo completo de desarrollo, es agregar mayor nivel de soporte a operaciones desde la línea de comandos, que es el ámbito donde los desarrolladores tienen mayores posibilidades de interacción desde el principio de los tiempos.

Como describen en este post, están agregando soporte a operaciones desde la consola de comandos, que permiten ejecutar procesos aislados (cada una de las líneas siguientes inicia un proceso en una instancia virtual, llamadas dyno, totalmente nueva, ejecuta el comando y baja la instancia):

$ heroku run date
$ heroku run curl http://www.google.com/
$ heroku run rails console
$ heroku run rake -T
$ heroku run rails server

Por supuesto que levantar un servidor de Rails para que inmediatamente después termine no tiene gracia en la mayoría de los casos, por lo que existe una manera de empaquetar procesos en un archivo Procfile, que simplemente declara los componentes necesarios, como por ejemplo:

web:     node web.js
worker:  node worker.js

Que crea una aplicación Node.js con dos componentes (un servidor web escuchando tráfico externo y un servicio interno para procesos intensivos, un modelo clásico en aplicaciones en la nube).

La gracia de este modelo es el mecanismo de escalamiento. Una vez que una aplicación está desplegada de esta manera, para escalarla basta usar un comando como:

$ heroku scale web=10 worker=50
Scaling web processes... done, now running 10
Scaling worker processes... done, now running 50

Como siempre, esto es un resumen, y recomiendo leer el post original, seguido de la segunda parte (dos más están por llegar) donde se presenta en más detalle el soporte para Node, incluyendo también una excelente descripción de que es y que no es Node para los recién llegados.

 

MediaElement.js: el mismo player de audio/video para todos

Uno de los objetivos de HTML5 es unificar el manejo de media para todos los navegadores y plataformas, pero hasta ahora, por cuestiones de indefinición de estándares, por temas de apertura, licenciamiento o comodidad tecnológica entre los jugadores del mercado, esto no ha sido sencillo.

Para solucionar este problema, el prolífico John Dyer escribió (y liberó bajo licencia GPL v2/MIT) MediaElement.js

Se trata de un reproductor de audio/video en JavaScript, como su nombre indica, que soporta una multitud de navegadores (los que soportan HTML5 y los que no) y unifica mucho más el soporte de codecs para diferentes formatos de video.

Para simplificar el uso manteniendo el soporte entre plataformas, el reproductor utiliza el mismo API en todas, basado en los tags <audio> y <video> de HTML5, implementándolos en los navegadores que no los reconocen, delegando el soporte a reproductores en Flash o Silverlight, pero que emulan exactamente el reproductor nativo.

De esta manera, el uso de estos elementos es idéntico en todos los navegadores para el productor del contenido, y la adecuación se produce en el cliente, que probablemente ya tenga los complementos necesarios descargados. La ventaja principal es que la manera de interactuar con los activos de audio o video es siempre igual.

El siguiente cuadro muestra el soporte para todos los navegadores, y la manera en que se soportan dependiendo de la plataforma:

Como siempre, el soporte se limita más en los dispositivos móviles, sobre todo en iOS, pero nótese que los navegadores de escritorio están cubiertos por completo.

La instalación de MediaElement es muy sencilla y está bien descripta en el sitio. Del lado del cliente, básicamente se reduce a incluir esta biblioteca y hoja de estilos:

<script src="jquery.js" />
<script src="mediaelement-and-player.min.js" />
<link rel="stylesheet" href="mediaelementplayer.css" />

Y para incluir el reproductor, utilizando el caso más extremo para dar soporte completo a todo, este es el marcado HTML (obviamente sin necesidad de incluir todos los comentarios):

<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">
    <!-- MP4 en Safari, IE9, iPhone, iPad, Android, y Windows Phone 7 -->
    <source type="video/mp4" src="myvideo.mp4" />
    <!-- WebM/VP8 en Firefox4, Opera, y Chrome -->
    <source type="video/webm" src="myvideo.webm" />
    <!-- Ogg/Vorbis en versiones viejas de Firefox y Opera -->
    <source type="video/ogg" src="myvideo.ogv" />
    <!-- Opcional: Agregar subtitulos para diferentes lenguajes -->
    <track kind="subtitles" src="subtitles.srt" srclang="en" />
    <!-- Opcional: Agregar capítulos -->
    <track kind="chapters" src="chapters.srt" srclang="en" /> 
    <!-- Ante-último recurso: sólo para navegadores sin HTML5 ni JavaScript -->
    <object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf">
        <param name="movie" value="flashmediaelement.swf" />
        <param name="flashvars" value="controls=true&poster=myvideo.jpg&file=myvideo.mp4" />
        <!-- El peor de los casos: dejo una imagen -->
        <img src="myvideo.jpg" width="320" height="240" title="No tiene manera de reproducir video" />
    </object>
</video>

El reproductor en si soporta diferentes estilos, puede controlarse programáticamente desde JavaScript, tiene montones de opciones como tamaño para el marco de video o audio, volumen, reproducción en bucle, subtítulos (incluyendo traducción automática via Google translate), y más.

Creo que para cualquiera trabajando seriamente en media en este momento este reproductor es una de las soluciones más completas disponibles.