El Futuro del video en Internet

En algún momento Youtube fue la revolución. La posibilidad de subir o ver videos por Internet entusiasmó a músicos, documentalistas, usuarios caseros que podían mostrar sus videos, políticos que encontraban nuevas vías de comunicación, movimientos sociales que podían contar sus experiencias, artistas que podían llevar su arte a la web sin intermediarios, por poner algunos ejemplos. Y también a miles de usuarios que podían encontrar prácticamente todo lo que buscaran. Youtube no es el único sitio que permite subir videos, pero con el apoyo que le brinda ser parte de Google se convirtió en el más usado.

Pero este formato tiene límites y la imaginación, no. ¿Por qué resignarse a ver videos de la misma manera que en la TV, encerrado en un cuadrado? ¿Por qué quedar cautivos de un recurso privativo como el Flash?

Sobre este segundo punto van a hacer hincapié los promotores del software libre y quienes trabajan por una web más inclusiva para quienes tienen algún tipo de disminución visual. ¿Por qué? Porque tiene un formato privativo (es decir que no se conoce su código ni se puede modificar), porque tiene muchos “busgs” o errores y porque impide la accesibilidad, ya que aquellos programas que leen en la web y, por ejemplo, traducen a un ciego no saben qué hacer frente un archivo flash salvo decir “esto es una película”.
Todo esto fue planteado por Guillermo Movia (“hack”) y Felipe Lerena (“hacker”) de la Fundación Mozilla en el Hack/Hackers BA Media Party que se realizó el fin de semana en el Centro Cultural Konex, quienes además mostraron que es lo que se viene en la materia. Lerena lo sintetizo en la frase “sacar el video de la página y poner la página en el video”.

Lo que está permitiendo pensar y avanzar hacia una nueva integración entre video y web es la aparición del HTML5 que permite agregar interactividad al video, que ya no tiene que “cargarse” sino que está integrado al código y por lo tanto puede “codearse” (neologismo usado por quienes manejan códigos).

¿Para qué nos puede servir esto a quienes tenemos más conocimiento en cómo generar contenidos que en escribir “códigos”? Para pensar en nuevas maneras de comunicación más interactivas, en formas de presentar las noticias más dinámicas, en la posibilidad de nuevas estrategias educativas.

¿Cómo? Agregando “meta información” a los videos tal cuál hoy conocemos. Esto permitiría por ejemplo que cuando alguien hable se agregue un subtítulo, se habrá un globito como los de las historietas con lo que está pensando, o que si nombra una ciudad aparezca un Google Maps que nos permita ubicarla en un mapa, si menciona un personaje histórico se abra una ventana con su biografía en Wikipedia, si habla de un músico se abra otro video de dicho intérprete o una galería de fotos de la banda en Flickr, si nombra a un periodista aparezca su usuario de twitter o su cuenta de Facebook. Y así muchas cosas más.

Esa información, al no estar en el video sino en la web, se actualiza automáticamente cuando la fuente se actualiza (por ejemplo cambios en una biografía) por lo que no hay que modificar nada.

Cuesta imaginarlo sin verlo. Por eso podemos recomendar que visiten el proyecto que Chrome realizó con la banda canadiense Arcade Fire experimentando con esta nueva tecnología para su tema “We use to wait”:http://www.thewildernessdowntown.com/.

Allí podrás soñar con que estás corriendo por la ciudad en la que naciste utilizando Google Maps, sonidos y herramientas de dibujo mientras escuchás el tema que ganó en la categoría “Cyber” del Festival de Internacional de Publicidad de Cannes. Se recomienda usar el navegador Crhome o Firefox, ya que no se llevan bien con Explorer o Safari.

Empezar a trabajar en proyectos de este tipo no requiere demasiados conocimientos, salvo un poco de HTML. En el taller del Hacks Hackers se presentó Popcorn.js librería Javascript que permite sincronizar vídeo y contenido en HTML5 y para quienes no saben de programación Popcorn Maker, una herramienta desarrollada por Mozilla que está en fase de prueba pero ya se puede usar entrando en http://maker.mozillapopcorn.org/, que trae algunas plantillas pre armadas para arrancar. A dejar volar la imaginación.

Pascual Calicchio para la revista MU
.

Desactivar o Activar botón en formulario con JQUERY y Validate

Cuando validamos un formulario usando JQUERY y el plugin VALIDATE quizás necesitemos que el botón de ENVIAR esté desactivado hasta que el formulario esté completo y valide correctamente. Lo podemos lograr con el siguiente script:

<script type="text/javascript">

$('#formulario').bind('change keyup', function() {

    if($(this).validate().checkForm()) {

        $('#boton_enviar').attr('disabled', false);

    } else {

        $('#boton_enviar').attr('disabled', true);

    } });

</script>

 

Recuerden reemplazar #formulario por la ID de su formulario  y #boton_enviar por la ID de su botón.

 

 

El acordeón no acordeona

Terminé de diseñar un sitio, en el cual una de las secciones, más precisamente la de enlaces, posee un hermoso acordeón que permite dividir los mismos en categorías.  Como desarrollo basándome en Firefox, ya sabía que en ese navegador funcionaba.  Decidí probar el sitio en Chrome, y descubrí que el sitio se veía como corresponde.

Luego, y para finalizar el trabajo, le pedí a un amigo una amiga que probara el sitio en Internet Explorer.  Obviamente, y como te estás imaginando, el sitio explotaba completamente, todo se veía corrido y fuera de lugar y las tipografías horribles.

Comencé el proceso de hack de la hoja de estilos CSS.  Luego de media hora, el sitio se veía bien en todos los navegadores. Hasta que descubrí una falla, que se producía solo en IE y no en los demás.  El acordeón, (realizado en JavaScript mediante Mootools) no funcionaba.

Luego de revisar varias veces el código buscando algún conflicto con otro JS, probar una docena de modificaciones, volver a bajar el framework, etc, etc ,etc  pude dar con la falla que provocaba el error: el Document Type.  Alcanzó con cambiar el mismo por el que pongo a continuación para que todo funcionara a la perfección.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

La librería OverLib

ejemplo_overlib

Un excelente recurso web.  Se trata de una librería JS que nos permite mostrar «pops» o
«globitos» al pasar sobre hipervínculos. En su sitio web podemos ver como funciona
con varios ejemplos. Además, se puede customizar los colores e inclusive modificar
el estilo del popup.

Para instalarla, tenemos que seguir estos pasos:

1- Copiamos la librería a nuestra carpeta JS en la raíz del sitio. Si no tenés una, creala.

2- Agrego una línea en el <head> para linkear a la librería (no te olvides de modificar la ruta):

<script type=»text/javascript» src=»js/overlib.js»><!– overLIB (c) Erik Bosrup –></script>
3-Inmediatamente despues de la apertura de la etiqueta <body> insertamos esta línea:
<div id=»overDiv» style=»position:absolute; visibility:hidden; z-index:1000;»></div>
con esto definimos una DIV que ocupará todo el sitio y estará por
encima de cualquier otro elemento.

4-Finalmente, modificamos los links en los que queremos que aparezca el globo para
que queden de esta manera:
<a href=»javascript:void(0);» onmouseover=»return overlib(‘Esto es gracias a OverLib.’);»
onmouseout=»return nd();»>LINK</a>