CSS clip property

Textos accesibles para lectores de pantalla con CSS

CSS clip property

¿Quién dice que no se puede tener sitios accesibles con sitios dinámicos? Bueno, en realidad, cuando se abusa del JavaScript y no hay una versión en texto plano que cualquier navegador puede entender (sí, hasta Internet Explorer), sí sufren usuarios con lectores de pantalla u otras problemáticas motrices o visuales. Muchas aplicaciones hoy en día no están pensadas en absoluto para todas las personas sino para pequeños nichos. Tal vez su modelo de negocio lo justifique, no voy a entrar en ese debate en este momento.

No obstante, si tu idea es compartir inspiración y conocimientos lo más ampliamente posible, evitando que tus artefactos discriminen a alguien con alguna desventaja (que no son la minoría), entonces sí que hay que esforzarse porque nuestras aplicaciones web incluyan pequeños artefactos especiales para que el contenido esté disponible para toda persona. En particular una de las áreas en que hay mayor investigación en la industria, es en los lectores de pantalla, aplicaciones que pueden sintetizar en voz, los textos de tus escritos y hasta pequeñas descripciones de tus imágenes (que tienes que escribir también).

Pero como son máquinas los lectores de pantalla no son muy buenos con los énfasis y otras inflexiones de la voz, y termina siendo un poco confuso a veces, especialmente en sitios cuyos diseñadores no tienen en absoluto en la cabeza, el que pueda haber gente que no tenga una visión de más de 10 dioptrías, por poner un caso. Así, se ha ido progresando hacia ciertos estándares en los que por ejemplo, la página web devuelve al navegador textos que hacen más explícita la información que se encuentra en una página, pero que terminaría siendo insufriblemente redundante para una persona que pudiese leerlos todos por sí misma. Estos textos, llamados de asistencia, se piensan para que el lector de pantalla facilite al escucha la comprensión de los diferentes menús, o secciones de un sitio o de un texto, pero deben ocultarse al usuario “promedio” porque tendrían el efecto contrario: saturar la cantidad de texto, haciendo más difícil la interacción con el sitio.

En los últimos años se han probado una serie de técnicas basadas en CSS , (es decir, 100% basado en estándares abiertos y no una tecnología exclusiva de algún monopolio), para lograr estos efectos, tanto textos legibles y que faciliten la comprensión de un texto leído por un sintetizador, como ocultos para usuarios que no requieren dichas facilidades.

Como nos cuentan en este blog, de temas para Drupal, algunas de las técnicas que datan de más tiempo funcionan en la mayoría de casos, pero algunas aplicaciones por ejemplo para Mac y iOS, no los entienden, o bien funcionan para los sintetizadores de voz, pero resultan en problemas para lectores de lenguas que se escriben de derecha a izquierda (como el árabe). Así, en fechas más recientes ha ido cobrando popularidad el uso de una propiedad que curiosamente es de las que mejor soporte tienen entre los navegadores (¡hasta Internet Explorer 4.0! eso es decir ¡mucho tiempo!), pero al ser pensada primordialmente para un uso visual, no se había contemplado originalmente como una alternativa para mejorar la accesibilidad de los sitios.

La propiedad en cuestión es la llamada clip, y permite lograr efectos visuales muy interesantes, como descubrir una imagen o hacer un “paneo”, entre otras. Pero funciona precisamente porque podemos ocultar el elemento que no queremos que aparezca en el sitio, sin que los sintetizadores lo pasen por alto (como cuando usamos la propiedad display:none) ni causando problemas de “saltos” en la lectura que confunden a las personas que leen visualmente.

Para una mayor referencia recomiendo visitar el enlace que les dejo más arriba de “Adaptive Themes”, aunque encuentro un tanto complicado su uso de hacks para diferentes navegadores (o sea, todos los problemas que siempre ocasionan los dinosaurios de Internet Explorer), cuando simplemente podemos atenernos al estándar.

Digamos que tenemos el siguiente encabezado:


<h2><span class="assistive-text">Sección:</span> Creatividad no es seguir siempre la misma senda</h2>

Para ocultarlo al lector que verá claramente destacado el título de apartado, pero al mismo tiempo mantenerlo disponible para que lo lea el sintetizador a la persona que así lo requiera, usaremos la siguiente regla de CSS:


.assistive-text { position: absolute;
clip: rect(1px 1px 1px 1px); //esto es para IE<8
clip: rect(1px, 1px, 1px, 1px); //para IE8+ y todos los demás navegadores
}

La razón de tener dos declaraciones de clip es la siguiente: la primera, sin comas entre los valores, la entienden los más viejos navegadores que Internet Explorer, la segunda los que respetan el estándar desde hace tiempo. Cuando un navegador no entiende una propiedad de CSS, simplemente la ignora y en este caso funciona perfecto para no hacer nuestro código ilegible lleno de hacks. Finalmente, notar que la propiedad clip no funciona salvo con el uso de position: absolute o position: fixed, tema para otra ocasión.

¿Tanto ruido por un texto que casi nadie va a ver?

Claro que no, también podemos sacar otra lección, del uso de una propiedad estándar para un uso visual, en otro ámbito muy distinto: usuarias con alguna discapacidad visual.

La lección que nos deja esto es que entender los estándares no se trata de seguir una y otra vez los mismos caminos, no se trata de imitar tan solo lo bueno o malo, o pensar que las herramientas solo pueden usarse de las formas preconcebidas, sino que por el contrario, aplicar el conocimiento de forma creativa, no se trata exclusivamente de inventar algo que nadie haya visto, sino también combinar de formas nuevas lo ya sabido, adelantando nuevas soluciones a problemas reales.

Crédito de imagen de portada: http://demosthenes.info/blog/384/CSS-clip (también recomendada su visita para otras interesantes técnicas con esta propiedad estándar de diseño).

De hoyos en el sistema, cercos virtuales y cercos militares

Necesitamos volver a las pequeñas comunidades. Donde la gente no se encuentre perdida en los mediocres promedios de las grandes redes donde cabe todo. Allí donde las ideas florecen.

“We need to go back to smaller communities. Where people aren’t lost in the mediocre averages of large networks. That’s where ideas flourish.” The Facebook experiment has failed. Let’s go back.

Combinando esta crítica a FB (no se puede arreglar, es una característica fundamental), con la idea de los “Hoyos en el sistema“, deberíamos comenzar a desarrollar aplicaciones (sí de FB, no hay modo de hacer hoyos en la tierra si no te paras sobre ella, ni de hacer un hoyo a FB más que desde dentro), que acerquen a la gente por acá hacia nuestros sitios y seguir la discusión y la colaboración allí. No al revés, llevando a la gente de nuestros sitios hacia FB porque no hay modo en que puedan aportar nada allí.

Me acerqué a los medios libres después de la derrota llamada #atencazo donde falló la táctica y la estrategia: no se lleva a gente en camiones a donde el cerco ya está tendido, el chiste es romper cercos, no meternos en ellos. En los medios libres encontré el cyberpunk y el sentido de tratar con nuestro arte de abrir oasis en medio del desierto. Así que no lo veo lejos, en que podamos recuperar el dinamismo de los medios, en nuestros sitios en lugar de seguir alimentando la máquina de vender mentiras.

“Mientras Google proactivamente trata de reducir el alcance de estafadores que usan ‪#‎SEO‬ para vendernos basura, Facebook estimula conducta que reduce la calidad de los contenidos de la red en su conjunto”.

While Google actively tries to thwart SEO scamsters, Facebook encourages behavior that reduces the overall quality of content on the network.

https://www.youtube.com/watch?v=EGsuiPlNj3o

¿Donde estás Chava Flores? Para que nos hagan una nueva rola: “¿A qué le tiras cuando sueñas con privacidad Facebookero?

¿Y qué decir de las cuentas que cada rato les bloquean a organizaciones de compañeros? ¡Censura! Se apresuran a exclamar, pero no: está en las condiciones del contrato que firmaron. Eso nos pasa por seguir el camino “fácil” de que cada quién se rasque con sus uñas en lugar de apoyarnos en hacer medios integrados, medios que nos comuniquen, no que nos mediaticen.

Medios libres visitan medios lúdicos, parte I

Hay mucho que los medios libres necesitamos aprender para nuestros sitios de los videojuegos, y lo más importante no son sus colores o mecánicas de emulación de física de partículas o de puntos, ni mucho menos los estereotipos acerca de l@s gamers.

Me refiero a esa parte que mucho se dice de que necesitamos ser más lúdicos, pero como dicen los cómicos, eso cuesta mucho trabajo. Claro que no se trata de usar solamente las máquinas, pero si las vamos a usar, usémoslas lo más creativa y “gananciosamente” posible, y me refiero a las ganancias que puede obtener la gente al participar en un medio libre: psicoemotivas, sociales, que no económicas, sin duda. Y no me vengan con eso de la “nobleza desinteresada“, no hay nada desinteresado en los valores de la nobleza. El que siembra lo hace para cosechar, claro se puede regar la semilla sin ton ni son, pero ni la semilla ni el tiempo ni la energía de la gente son ilimitadas y quienes sostienen una base de apoyo lo saben perfectamente. De hecho el trabajo satisfactorio es de lo más lúdico que puede haber y así como no me refiero a los valores del feudalismo, tampoco a los burgueses de que “el trabajo es su propia recompensa”.

Entonces, no tiene ningún sentido a la larga, pensar solo en términos de eficiencia de los servidores, ni tampoco nada más de las funcionalidades que compartiríamos las usuarias de un sitio cuando no se trata principalmente de leer código, como subir imágenes, textos, saludar a las compas o entablar una discusión. Por eso son pocos los resultados (en términos de cuánta gente se siente parte y hace suyos los sitios), que se obtienen de cambiar cada rato de tema, y preocuparse muy poco o nada del input que la gente ofrece acerca de la experiencia de visitar los sitios, o de sus contenidos. Cuando la gente no se siente parte, el fenómeno suele ser “votar con el pie”.

Crear o rediseñar un nuevo sitio no debería ser como diseñar un cartel o la portada de un libro o la caja del juego. Con todo y lo valioso que son estos diseños de forma al presentar una idea, las webs o aplicaciones pueden llegar a ser conjuntos de experiencias, no solo de la gente que produce el medio, sino también la diversidad de gente que queremos se involucre. Claro, si pensamos en diversidad de gente y en involucrarlas y no solo tener los sitios como “autopublicarnos sin pedir permiso”. Para lo último ni sitios faltan, con un blog en tumblr basta, y es algo válido y necesario pero no lo único ni lo más tejedor de complicidades, como una amiga estudiosa de los medios libres dice.

Crear un sitio para un medio libre y comunitario, debería ser más como la producción de un videojuego, el diseño del concepto, la historia y la experiencia general son lo principal y de ahí se desprende donde van los botones o que colores le ponemos. El éxito es cuando todas las partes de la función y la forma colaboran y crean un conjunto de experiencias memorables y valiosas: diseño visual, diseño de interacciones, el flujo que experimentará cada usuaria y por supuesto, eso a fin de cuentas lo más importante en términos de educación popular: que la gente tome parte y no solo reproduciendo mis materiales, sino que todos compartan sus experiencias y sus saberes. Por esto nos encanta Facebook, en contraparte, es dramática la falta de aportaciones de gente que no sea el admin del blog, en muchas de las páginas de wordpress.com regadas por ahí. Claro, las redes de todas maneras se tejen por aquí y por allá, pero creo que los afanes de los encuentros y las adscripciones tienen que ver con la necesidad de la gente de unirse y ponerse de acuerdo, de que no andemos todos desperdigados, como dice León Chávez Teixeiro.

Entonces, en el diseño de un sitio lo más importante es como estimular a que la gente contribuya, ¿qué elementos en nuestros sitios harían que la gente regrese y se comprometa a seguir “jugando su papel” o incluso “subir de nivel”?

Hermanos trabajando juntos en resolver un Puzle de GCompris.

A orillas del lago de Texcoco…

… o lo que queda de este: http://goo.gl/maps/fZBZT en Chimalhuacán, Estado de México. Tengo muchas expectativas del trabajo que comienza con ASBIS, como profesor del aula de informática, aunque espero ir impulsando el trabajo del centro comunitario y la asociación de forma más amplia.

Hasta el momento, la visión de la asociación me parece muy coincidente con los propios objetivos del proyecto Educar en Libertad. Muy importante sobre todo la idea de la directora de impulsar el centro no como una escuelita de regularización sino a través del aprendizaje significativo, incidir en el mejoramiento cabal de las perspectivas y planes de vida de los chavos con los que trabajamos.

Y bueno esto está como un quelite recién salido de la tierra, tiernito y en ciernes mucho por venir, pero ya iré compartiendo todo lo que pueda por acá, de momento les dejo algunas fotos de mis niñ@s explorándonos mutuamente, conociendo nosotros lo que les interesa y ell@s de mí el trabajo con software libre con un estilo de trabajo más o menos dialógico (no diría pedagogía, eso ya lo aprenderé con una nueva colaboración que vendrá en próximas semanas).

Sin más palabras, conociéndonos con ayuda del GCompris, nótese la expresión de los rostros de l@s chavit@s:

Drupaleando con Open Atrium

Puff! Casi un año sin nuevas notas! OMG! Ha sido un año bastante movido, desde que realicé los últimos ajustes a un sistema de macros de SQL Server y Visual Basic (sí, como se oye :D). Y luego trabajando con Saltos Cuánticos y la Fundación Rosa Luxemburg en México en el proyecto Saberes Libres (que antes se llamó Código Abierto, que a mí la verdad me gustaba más, aunque me parece que se perdió mucho de la reflexión en la falacia de la propiedad intelectual). También tuve la oportunidad de impartir dos talleres de blogs y galerías web a estudiantes de la UACM (que gracias a la necedad de Esther Orozco, todavía no me pagan el segundo) y gente de la comunidad del barrio de la Merced.

En fin, fue un año de mucho aprendizaje, y le doy muchas gracias a los compas de Saltos Cuánticos por haberme dado la oportunidad de trabajar con ellos y a Enrique Rosas de la Fundación Rosa Luxemburgo en México por aguantarme todo el tiempo que duró el proyecto en este año ¡y por invitarme a MayFirst! Puff! Muchísimas experiencias que ir desgranando y sobre todo seguir desenvolviendo nuevos conocimientos y compartiéndolos con la gente que no deja de visitar mi blog aunque sea de vez en cuando.

En fin, volvamos al tema de este post, siempre recordando que escribo porque no tengo tiempo que perder. Drupaleando, ja. Quien me viera. Lo cierto es que no es tan fácil Drupal pero que también siempre me ha parecido mucho más robusta la arquitectura y la dedicación que sus equipos de desarrolladores ponen en la seguridad.

Aunque, quién va a negar que WordPress es más user-friendly y es una plataforma que da trabajo a muchísima gente… diseñadores, programadores, webmasters, escritores de contenidos… pero no hace de todo, aunque a fuerza de pluginazos haya gente que se aferre a convertirlo en las más singulares estructuras  jerárquicas de contenidos y presentaciones visuales.

Y así, WordPress es una plataforma fantástica, pero con Drupal se construyen también sitios muy bien organizados y extensibles, permiten pensar en soluciones de contenidos muy variadas a los desarrolladores. Sin embargo, en realidad todavía no conozco mucho de Drupal, apenas que los productos que he visto desarrollados como los de Phase2, me han atraído a esta plataforma.

Así, buscando una solución para documentación, basada en PHP y con un framework robusto. Encontramos en Saltos Cuánticos a Open Atrium, un sistema que promete una Intranet “tan sólo con sacar de la caja”. Ya lo habíamos utilizado pero pasamos por un ciclo de regreso a mecanismos más conocidos como el correo electrónico y en el proyecto Saberes Libres, en que estuvimos trabajando, documentamos todo a través de Trac, un gestor muy potente de tareas y reportes para el trabajo en equipo, con wiki integrado y funcionalidad que se presta para estructurar muy fácilmente el soporte técnico en formato de foros.

Pero me quedé con la espinita de seguir conociendo Drupal y a todos nos gustó más el diseño pulido y las posibilidades del trabajo en grupos y proyectos con las herramientas de Open Atrium. Así, volvimos a las andadas a través del Mandala Amatitlán.

Pero no fue del todo fácil, la interfaz viene mejorada en esta versión, la 1.5, aparentemente última estable antes del lanzamiento del próximo Open Atrium 2 que ya estará basado en Drupal 7; pero se han dejado de lanzar actualizaciones de seguridad y el core de Drupal y sus módulos ya exigían en su gran mayoría actualizaciones de seguridad.

So… hubo que lanzarse a estudiar como se actualizan los módulos en Drupal 6 porque en Drupal 7 es más sencillo desde el propio backend (una característica soportada por WordPress desde hace mucho tiempo). El como mas concreto y sencillo que encontré fue este de O’Reilly: http://answers.oreilly.com/topic/501-how-to-upgrade-drupal/

Así,  después de la respectiva copia de seguridad de la base de datos antes de intentar algo drástico (como -casi- resultó), y cambiar el core de Drupal, de inmediato empezaron los problemas de incompatibilidades diversas en el código. Diantres, yo esperaba poder actualizar únicamente el Drupal por las vulnerabilidades de seguridad que se han presentado desde el útlimo lanzamiento de Open Atrium: http://drupal.org/SA-CORE-2012-004

Para evitar estar dándole vueltas a la manzana una y otra vez me decidí ya a actualizar de una vez todos los módulos que tuviesen actualización disponible. Actualicé todo lo disponible, traducciones incluso y quería ya poner de nuevo en línea el sitio para empezar a invitar a los amigos de Saltos Cuánticos a bautizar el niño, pero ¡oh no! Más errores:

Primero la falta de una clase en el módulo de Mensajería: Fatal error: Class ‘Messaging_Store’ not found. Solución: Habilitar módulo Autoload. Pero ¡oh no! no lo trae la distribución de Open Atrium, allá vamos, descargamos el módulo y lo activamos… WTF? no puedo activarlo? Diantres otra vez… bueno, a buscar la solución en los foros… ok, tengo que deshabilitar los módulos que solicitan Autoload… pfff, ahora no puedo deshabilitar este otro módulo sin desactivar otros 8 más… no por Dios! Tiene que haber otra solución… ¡Sí! Activar módulo Devel… pfff lástima que no guardé la URL donde lo leí, no importa los foros de Drupal no están llenos de consejos confusos como en los foros para hacer root tu android (próximo post). ¡Y se hizo la luz! Devel se encargó de activar Autoload, actualizar las traducciones pendientes del módulo token y un par más (previamente había intentado activar Autoload “a fuerza” en la base de Drupal y lo había inscrito entre los módulos a activar en los módulos requeridos además de core…). Bien, primer problema resuelto.

Pero no, ahora alguna parte del código me daba una advertencia bien visible:“Division by zero in [...]/includes/pager.inc on line …” Esto fue fácil, sólo incluir un saneo de una variable en la función indicada en el parche, y eso fue todo.

Finalmente, al tratar de poner en línea el sitio nuevamente, otro Fatal Error! Pero sólo visible si no estaba como user/1, hmmm… tal vez alguien más conocedor en Drupal llegue al colmo al leer esto, pero seguí simplemente el consejo de este asunto: Call to undefined method views_plugin_display_block::get_cache_plugin() cambiar get_cache_plugin por get_cache(‘plugin’) aunque no hay todavía garantías de que funciones todo correctamente pues Open Atrium parece haber sido pensado para Views 2 antes que para Views 3.

En fin, fin de los errores de sintaxis, realicé unos chequeos más y ya seguiremos viendo en siguientes días como funciona la plataforma, comenzando a utilizarla para documentar los siguientes Saltos Cuánticos en el desarrollo de nuestra red de Multisitios con WordPress.

Ya estaremos explorando los siguientes errores semánticos y esperando con ansias el lanzamiento de Open Atrium 2. Mientras tanto, ya estaremos reportando por acá las experiencias en el desarrollo de una red de sitios con WordPress y porque para Saltos Cuánticos este es un proyecto de gran relevancia ya que nos permitirá apoyar a diversas organizaciones sociales y construir una comunidad de aprendizaje de software libre para la comunicación alternativa, como venimos impulsando con el proyecto Saberes Libres.

Operaciones básicas con videos para Windows con FFMPEG

Esperando que pueda ser de utilidad para otras compas en la misma situación, comparto como FFMPEG me ayudó a resolver un problema ¡rapidísimo! (mientras que otros programas -incluso de pago- fracasaron miserablemente).

¡Saludos a todos los hackers multiplataforma!

El problema original

Grabar un vídeo de una captura en tiempo real, que se utilizará para una capacitación.

Restricciones: no se puede instalar programas (con el “método” normal de Aceptar, Aceptar, Aceptar…:$) ya que las políticas del dominio no permiten acceso ¡ni siquiera a guardar cosas en Escritorio o Mis documentos! Esta es una restricción muy específica, tal vez tú puedas aprovechar más tu máquina sin restricciones (salvo la de tener Windows instalado ;D).

Vámonos por partes

  1. Grabar el vídeo
  2. Prepararlo para su uso en una capacitación

Ya que no podemos instalar programas, no pudimos usar el programa crackeado de nuestro administrador de sistemas :D de modo que mi supervisor me pidió “intentarle con una de tus herramientas” -obviamente, cuando menos OpenSource, o de preferencia software libre-. ¡Y es cuando el magnífico trabajo de los empaquetadores de portableapps.com viene al rescate!

Y sí, pudimos grabar el vídeo, pero, tal vez por error mío con algo de los códecs*, el vídeo no se pudo reproducir, y tampoco transcodificar a vídeo Flash (ahí, tal vez un error del empaquetado de la aplicación portátil). Otro problema es que el archivo completo abarcaba ¡más de 2.5 GB, para sólo 28 minutos!

De modo que entramos en materia de este post, como FFMPEG me salvó de buscar que aplicación crackeada o shareware podría:

  1. Recortar y escalar el vídeo original
  2. Eliminar la parte inicial y final en que se arranca la aplicación de captura y se detiene la grabadora de pantalla (fallas de origen creo que le dicen los técnicos).
  3. No introducir molestas marcas de agua en el vídeo que interfiriesen con la captura
  4. Dejarlo en un formato que hasta el Reproductor de Windows Media pueda entender, sin instalar plugins
  5. Acelerar la velocidad de reproducción desde el vídeo transcodificado, para no tener que ajustarlo manualmente al abrir el vídeo en diferentes estaciones

Paso a paso, pues.

Lo primero, obviamente es conseguir el binario de FFMPEG para Windows, en Zeranoe FFMPEG. Al venir comprimido en formato 7z (mejor que WinZip o cualquier otro), necesitarás un programa que lo reconozca, en particular te recomiendo: la versión portable de 7zip.

Una vez que decidas en que carpeta descomprimir los binarios (la carpeta bin del paquete), te encontrarás cuando menos con ffplay (reproductor) y ffmpeg (transcodificador), en mi caso probé con ffplay si por lo menos la captura realizada había quedado reconocible.

Paso 1. Realizar una prueba con unos pocos segundos, de cambio de formato.

Si buscaste por “ffmpeg howto”, tal vez llegaste a esta página (en inglés), muy buena pero algo desactualizada (sobre todo en la parte del cropping y el escalado). En la cual me basé para probar esto:

ffmpeg -i EJEMPLO.avi -ss 10 -t 30 -b 600k -an -vcodec mpeg4 -f avi prueba1.avi

Explico las opciones:

-i EJEMPLO.avi
- input: video de entrada, EJEMPLO.avi
-ss
- start second, segundo de inicio, 10
-t
- duración en segundos, 30
-b
- tasa de bits del video por segundo, 600k<- admite sufijos
-an
- audio no, puesto que después agregaremos sonido al vídeo original
-vcodec
- códec de video, mpeg4 <- hasta aquí todavía estaba copipegando del howto arriba referido
-f avi
- formato (mejor dicho contenedor) de salida, avi<- nativo de Windows
prueba1.avi
- el archivo de salida, no requiere prefijo de opción alguna

Y resultó, salvo que todavía no puede reproducirse en el Windows Media Player, además de que nos hace falta mejorar la calidad sin aumentar mucho el tamaño del archivo, recortar el tamaño y aumentar la velocidad de reproducción, que abordaremos a continuación.

Paso 2. Recortar y escalar el vídeo para ajustarlo a pantallas más pequeñas.

Desde aquí ya no pude basarme en las “howto pages”, pues la versión de ffmpeg utiliza una nueva biblioteca, libavfilter, en particular me interesaban sólo las de escalado y recorte.

Siguiendo con las pruebas, transcodificamos el vídeo recortado a 1024×820 (el vídeo original era de 1280×1024), agregando la opción de avfilter correspondiente:

ffmpeg -i EJEMPLO.avi -vf "crop=1024x820" -ss 10 -t 30 -b 600k -an -vcodec mpeg4 -f avi prueba2.avi

-vf "crop=1024:820" Permite aún más ajustes que las opciones anteriores crop{top, bottom, left, right}, pero para esta prueba fue suficiente, todavía no hemos escalado el vídeo.

Ahora vamos a escalarlo con las opciones de avfilter, ya que la opción nativa de -s WIDTHxHEIGHT, se conflictúa con el recorte;

ffmpeg -i EJEMPLO.avi -vf "crop=1200:960, scale=920:736" -ss 10 -t 30 -b 600k -an -vcodec mpeg4 -f avi prueba3.avi

-vf "crop=1200:960, scale=920:736" Cambié el tamaño después de ver en la prueba de recorte, que estaba dejando fuera demasiado de la pantalla, y el escalado lo ajusté para que no cambiase el aspecto del vídeo original. No olvides incluir las comillas en las opciones de avfilter.

Paso 3. Acelerar la velocidad de reproducción.

Al tratarse de un vídeo para capacitación, necesitamos que sea breve y el vídeo original requiere que dure máximo 8 minutos. Algunos tutoriales por ahí se complican mucho (tal vez por versiones anteriores de FFMPEG), requiriendo el uso de otras herramientas, pero no hace falta en absoluto, pues también la biblioteca avfilter incluye otra opción para cambiar el timestamp de cada cuadro (es decir, que si un frame aparecía en el segundo 15, por ejemplo, ahora se reproduzca en el segundo 5, haciendo así la reproducción más rápida).

ffmpeg -i EJEMPLO.avi -vf "crop=1200:960, scale=920:736, setpts=0.3*PTS" -r 8 -ss 10 -t 30 -b 600k -an -vcodec mpeg4 -f avi prueba4.avi

-vf "crop=1200:960, scale=920:736, setpts=0.3*PTS" setpts es lo que nos permite cambiar (set) el timestamp, en este caso lo reducimos, para disminuir el tiempo total de reproducción, si quisiéramos aumentar el tiempo (reproducir a velocidad lenta), lo multiplicas por un número mayor a 1 el PTS (timestamp de los cuadros originales).

-r 8 cambiamos con -r la tasa (rate) de cuadros por segundo, en este caso lo reduje a 8 cuadros por segundo, lo que me permitirá después subir la calidad sin aumentar demasiado el tamaño, al dejar de lado cuadros que no afectan la sensación del vídeo, de modo similar a como se comprime el audio de un CD a un MP3, reduciendo las muestras por segundo.

Paso 4. Utilizar un códec que el reproductor de Windows Media entienda sin plugins.

¿Recuerdan que dije que no se reproducía el vídeo en el Media Player? Pues encontré en la FAQ de FFMPEG el códec adecuado para Windows: -vcodec msmpeg4v2, y corregí la opción del bitrate, para recuperar lo más posible de la calidad del vídeo original: -b:v 2000k

Para finalizar (en siguiente post mezclaremos con sonido), les dejo la línea final que utilicé:

ffmpeg -i V:\EJEMPLO.avi -vf "crop=1200:960, setpts=0.3*PTS, scale=920:736" -ss 4 -vcodec msmpeg4v2 -b:v 2000k -r 8 -an -f avi v:\VideoCapacitacion.avi

Notas

En concreto sobre los códecs soportados nativamente por el reproductor de Windows Media, ya que es importante acceder desde cualquier PC de la empresa al vídeo. OJO: Si tienes preguntas sobre algún códec en específico, deberías leer de nuevo el título de este post.

Haskell para niños: Lección 1.

¡Y arrancamos!

Gracias de nuevo a toda la gente que apoyó este proyecto y se acercó a ser parte. El día de hoy, impartí mi primera clase presencial de Haskell, ¡y ha sido una maravilla! Esta es mi primer relatoría semanal.

Primero: presentaciones.

Ya que hay varios niños en esto, ¡lo primero es presentarnos!

* Yo. Mi nombre es Chris Smith, y estoy impartiendo la clase de programación en la pequeña escuela de Vermijo donde todo esto comenzó. Soy un gran fan de Haskell, ¡y estoy emocionado de compartirlo con gente nueva!

Chris Smith

* Sue. Sue Spengler es “fundadora, maestra principal, supervisora, custodia, secretaria y señora del comedor” de la pequeña escuela de Vermijo. La escuela es su proyecto, y está haciendo cosas realmente sorprendentes. Tuve que hurgar para encontrar una foto, ¡así que espero que a ella le guste esto!

Sue Spengler

* Mis estudiantes locales. Los chicos de la clase de hoy son Grant, Sophia, Marcello e Evie (espero escribirlo bien). Voy a pedirles que se presenten en los comentarios en este blog, de modo que pueden buscarlos allí.

* Todos los demás. Cualesquier otros niños que estén tomando la clase, por favor preséntense en los comentarios también. Pueden decir ¡Hola! y si les gustaría, pueden enlazar un video o una imagen.

Espero que todos tomen el tiempo para dejar sus comentarios y saludar a los demás. Aprender cosas es mucho más divertido cuando se habla con otras personas.

El plan

Vamos a hablar de hacia donde vamos, a saber:

  1. Escribir programas de computadora para trabajar.
  2. Hacer cambios a nuestros programas para darles movimiento a las imágenes.
  3. Crear un juego de su propia elección.

¡Esto se llevará el año entero! Porque esta clase no se trata solamente de memorizar algo acerca de un programa específico: se trata de ser creativas, probar cosas y lograr algo de lo que te sientas orgulloso. Por lo que habrá un montón de tiempo libre para jugar y probar ideas diferentes en tus programas. Estamos aprendiendo con el lenguaje de programación Haskell, pero en realidad, la clase es más sobre estar en control de tu computadora y diseñar y construir algo realmente bueno desde el principio, no solo recordar algunas cosas acerca de Haskell.

Estructura de las computadoras y la programación.

Lo primero de lo que se habló es sobre que es un programa de computadora, y como las cosas encajan entre sí. Esta es la pizarra en la que estuvimos trabajando:

pizarra de clase 1

Algunas de las ideas de que hablamos:

  • Cómo funciona una computadora. La parte principal del equipo se compone de un dispositivo que sigue las instrucciones (la “CPU”) y un dispositivo que recuerda información (“memoria”).
  • El lenguaje de la máquina. ¡El equipo no habla inglés, por supuesto! Sigue las instrucciones en un lenguaje llamado “lenguaje de máquina”. Este idioma lo entiende muy fácil el equipo, pero es muy, muy difícil escribir programas en este lenguaje.
    (La “CPU” tampoco entiende español, portugués, etc. lenguajes “naturales” para el caso pues. -N. del T.)
  • Compiladores. En lugar de escribir nuestros programas en lenguaje de máquina, las escribimos en otros idiomas, y luego la computadora los traduce para nosotros[, al lenguaje que éstas pueden entender]. El programa que hace esto se llama compilador.
  • Algunos lenguajes de programación. ¡Tenemos varias opciones al elegir el lenguaje de programación que podemos utilizar para escribir programas de computadoras! Hablamos en la clase de algunos lenguajes de los que los niños han oído hablar: Java, C, C++, Objective C, JavaScript, Java y Smalltalk -¡sí, Marcello había oído hablar de Smalltalk! Quedé muy impresionado. El idioma que estamos aprendiendo en esta clase se llama Haskell.
  • Bibliotecas. Las bibliotecas son piezas para los programas, que otras personas han escrito para nosotros, y así no tenemos que empezar de cero. Pasamos algún tiempo imaginando todos los pasos necesarios para lo que podríamos considerar cosas muy fáciles de hacer con un ordenador. Por ejemplo, de todos los pequeños pasos en la presentación de una ventana en la pantalla… ¿Cuántos círculos, rectángulos, líneas, letras, etcétera; pueden encontrarse en una ventana en la computadora? Las bibliotecas le permiten a alguien describir cosas más directamente para no hacerte repetir todos los pasos cada vez.

[En esta primera clase] hablamos de como vamos a utilizar:

  1. Un lenguaje de programación llamado Haskell.
  2. Una biblioteca llama Gloss (“brillo” -N. del T.).

A jugar

En este momento, todos utilizaremos un sitio web para escribir algunos programas simples de computadora usando Haskell y Gloss. El sitio web es:

http://dac4.designacourse.com:8000/

Empezamos con algunos programas muy simples, como las siguientes:

¡Tu primer círculo!


import Graphics.Gloss
picture = circle 80

¡Ahora un rectángulo!


import Graphics.Gloss
picture = rectangleSolid 200 300

¡Muestra unas palabras!


import Graphics.Gloss
picture = text "¡Hola!"

Todos estos programas tienen algunas cosas en común:

  • La primera línea de cada uno de estos es import Graphics.Gloss.
    Esto le dice al compilador que desea utilizar la biblioteca Gloss para crear imágenes. Sólo se tiene que escribir una vez y debe estar al comienzo de tu programa.
  • Todos ellos dicen picture = ... .
    Esto se debe a que el trabajo de nuestros programas es hacer una imagen y lo llaman así (picture es imagen, en inglés). El sitio web que estamos utilizando crea esta imagen, del modo como definimos que debe ser y la presenta para nosotros. Hablamos de como en el futuro, podemos definir otras cosas, con otros nombres, pero por ahora, estamos bien con sólo decirle al compilador lo que la imagen debe ser.
  • Después de el signo de “igual a”, describimos la imagen que queremos dibujar. Hay varios tipos de dibujos ¡y hemos visto ya tres de ellos! Todos los tipos de dibujos que podemos crear son parte de la biblioteca Gloss.
  • A excepción de la última, todos utilizan medidas. Por ejemplo, el 80 en el primer ejemplo es el radio del círculo (la distancia desde el centro hasta el exterior). Puedes crear un círculo más grande con un número mayor y un círculo más pequeño con un número menor. Y es igual con la base (el ancho) y la altura del rectángulo.

Hubo problemas para algunas personas utilizando el sitio web. Si estás teniendo problemas, puede que tengas que asegurarte de que tienes una nueva versión de tu navegador web. Además, el sitio web no funciona con Internet Explorer… de modo que mejor trata con Chrome, Firefox, Opera o Safari. No te preocupes demasiado con el hecho de que un navegador no entiende bien, pronto instalaremos el compilador de Haskell en tu propia computadora, y ¡ya no tendrás que ir al sitio web para ejecutar tus programas! Sólo estamos por ahora con el sitio web para empezar a experimentar inmediatamente.

¡Dibujando más de una cosa a la vez!

En este momento, los niños se preguntaban si se puede dibujar más de una forma a la vez. ¡Sí puedes! Para dibujar más de una cosa, utilizamos la palabra pictures (el plural de picture -imagen-, es decir, imágenes). Por ejemplo:


import Graphics.Gloss
picture = pictures [
circle 80,
rectangleWire 200 100]

Observa lo que hicimos:

  • La palabra ahora es “pictures” (imágenes).
  • Abrimos con un corchete una lista.
  • La lista de imágenes, separando con una coma cada imagen de la siguiente.
  • Cerramos con un corchete la lista.

Hablamos de como ayuda separar en líneas distintas el programa de vez en cuando. Lo único de lo que se debe tener cuidado es que cuando colocas una nueva línea, tienes que poner unos pocos espacios al inicio (una sangría). ¿Ves como en la segunda y tercera líneas de la parte de donde definimos las “imágenes” -pictures- se aplica un poco de sangría?

Cambiando tus imágenes

La biblioteca Gloss te ofrece también algunas maneras en que puedes cambiar las imágenes.

Puedes cambiar los colores con la palabra “color”.


import Graphics.Gloss
picture = color red (circleSolid 80)

Observa que escribimos “color”, el nombre del color que queremos y luego la imagen que se dibujará, entre paréntesis. ¡Los paréntesis son importantes! Sirven para lo mismo que en matemáticas, se toma esa parte entera, como una sola “cosa” (en este caso, una imagen).

Hablamos de que colores conoce Gloss. Esta es la lista: negro, blanco, rojo, verde, azul, magenta, amarillo, cian, rosa, naranja, amarillo verdoso, aguamarina, azul y violeta. Sue recordó un color de nombre extraño, preguntó -¿Conoce el chartreuse? Sí, lo conoce. ¡Vaya suerte!

También podemos trasladar los dibujos (trasladar, o sea, cambiar de lugar).


import Graphics.Gloss
picture = translate 100 50 (rectangleSolid 50 50)

Trasladar (o translate en inglés), quiere decir que algo se mueve a la izquierda, derecha, arriba o abajo. El primer número es hacia donde se mueve a izquierda o derecha; los números positivos significan cuantos pasos a la derecha, los negativos a la izquierda. El segundo número es la distancia hacia arriba o hacia abajo; números positivos hacia arriba, números negativos hacia abajo.

Ten en cuenta que en Haskell, tienes que escribir los números negativos entre paréntesis. Si escribes “translate -100″, Haskell entiende que intentas restar 100 de “translate”. No sabe como se puede restar un número de un verbo -ni lo sé yo tampoco- por lo que se da por vencido. Tienes que escribir “translate (-100)”; encerrando el número negativo entre paréntesis.

También se pueden voltear de lado las cosas. El verbo que se usa es “rotar”. Veamos como dibujar un rombo.


import Graphics.Gloss
picture = rotate 45 (rectangleWire 100 100)

Gira las formas los grados que indiquemos. Recuerda que 360 grados quiere decir lo mismo que dar una vuelta entera quedando igual que en el punto de partida, ¡de modo que no hace nada! 45 grados es la mitad de un ángulo recta. ¿Ves por qué ahora queda como un diamante?

Y lo último que puedes hacer es estirar la imagen. El verbo es “escalar” (scale en inglés).


import Graphics.Gloss
picture scale 2 1 (circle 100)

Dibujamos así, una elipse, que es como un círculo, pero de diferente ancho que de alto.

¡No te preocupes si todo esto no tiene sentido todavía! Vamos a pasar mucho tiempo jugando con la forma de poner todo esto junto. Ahora mira como quedo la pizarra después de todo esto.

Hora de los experimentos.

Pasamos un montón de tiempo con cada uno haciendo sus propias formas y dibujos o cualquier cosa que se les antojase. La mejor forma de estar más cómodos con todo esto es jugar con ello. ¡Haz montón de pequeños cambios y mira que ocurre! Intenta adivinar que pasará, y luego haz la prueba de si acertaste o no.

Éstas son algunas de las fotos de las chicas con sus proyectos:

Sophia e Evie muestran dos círculos lado a lado. ¡Estos en algún momento se convirtieron en los ojos de una cara!

Este es Grant con su rombo, aunque se vio aún mejor después de que lo estiró un poco por ambos ejes.

Este fue el dibujo de Marcello, ¡centrando la palabra en el círculo tomó mucho tiempo! Si lo intentas, notarás que el texto no queda centrado automáticamente como las otras figuras, de modo que Marcello lo intentó y falló muchas veces con “tranlate” para lograr poner la palabra en medio del círculo.

¡Y ésta es Sophia muy emocionada de lograr poner los dos ojos en los lugares correctos!

Tu misión

Tu misión, si decides aceptarla… ¡es planear y crear un dibujo de algo que te interese! Tal vez es solo un pez, un jardín, una estación espacial, un dragón… sólo asegúrate que puedes dibujarlo con rectángulos y círculos de diferentes colores, y moviéndolos, girándolos o estirándolos. Aquí en la pequeña escuela (de Vermijo) estaremos trabajando en esto por algunas clases más de ésta y la próxima semana.

¡De modo que pasa algún tiempo con ello y ven con algo de lo que te sientas orgullosa la semana siguiente!