Credit image

Cómo usar ffmpeg para editar video

FFmpeg es una potente herramienta con la que podemos convertir entre formatos de video, rotar, reducir tamaño, calidad o resolución, y muchas otras operaciones, todo ello automatizado desde una terminal.

Una de mis herramientas preferidas para conversión multimedia es ffmpeg. Se trata de una herramienta de línea de comandos que permite realizar multitud de tareas relacionadas con video, audio o incluso imágenes.

Aunque su uso no es excesivamente complejo, la gran cantidad de parámetros, combinaciones y el inmenso abanico de formatos y sus características, hacen que el uso de ffmpeg sea poco intuitivo cuando empezamos a utilizarlo (o incluso más tarde, si no lo tenemos bien claro).

En este artículo vamos a explicar como utilizar esta herramienta de forma sencilla, dando un repaso a las tareas de edición de video más comunes y prácticas, viendo ejemplos prácticos para aplicar.

Instalación de ffmpeg

La herramienta ffmpeg es multiplataforma, por lo que puede instalarse en cualquier sistema, ya sea GNU/Linux, Windows o Mac. En el caso de Windows, la página tiene varias versiones (static, shared y dev). Aconsejo instalar la versión static de 64 bits (si nuestro sistema es de 64 bits), que contiene una carpeta bin con el archivo ffmpeg.exe que nos interesa. Dicho archivo puede colocarse en una carpeta que esté en el PATH del sistema, o simplemente colocarlo en una carpeta del sistema como C:\windows, por ejemplo.

Si acostumbras a trabajar en una terminal de texto bajo windows, mira primero el artículo Cómo mejorar la terminal de Windows donde encontrarás algunos consejos para instalar ConEmu y Chocolatey y tener una potente terminal de texto.

En el caso de GNU/Linux puedes utilizar el comando apt-get install ffmpeg. En Windows, si tienes ya instalado Chocolatey, puedes usar choco install ffmpeg.

Obtener información de un video

Una vez instalado, podemos ver información sobre nuestros videos de la siguiente forma:

ffmpeg -i video.mp4

El parámetro -i indica que se va a indicar un archivo de entrada (en nuestro caso, el video) y a continuación, dicho archivo. Obtendremos que ffmpeg nos devuelve gran cantidad de información. La parte clave es la que resalto a continuación:

  • Naranja: Se trata del comando que escribimos en la terminal de texto para lanzar ffmpeg y realizar alguna acción. En este caso, obtener información del video.
  • Verde/Amarillo: Características del archivo en general (duración y bitrate del video+audio, por ejemplo).
  • Azul: Información sobre el canal de video: codec, resolución, proporción de aspecto, calidad de video, fps, etc...
  • Rojo: Información sobre el canal de audio: codec, frecuencia de muestreo, calidad de audio, etc...

Con esto puedes obtener información sobre un archivo de video y sus características.

Conversión entre formatos de video

Uno de los puntos fuertes de ffmpeg es que permite realizar practicamente cualquier tipo de conversión entre los diferentes formatos de video y audio (que no son pocos). El único requisito es tener una idea general de los diferentes codecs que existen, por lo que recomiendo altamente leer Formatos de video: todo lo que deberías saber y Formatos de audio: todo lo que deberías saber antes de comenzar a utilizar ffmpeg. De esa forma, teniendo clara la diferencia de un contenedor y un codec, de los diferentes formatos que existen y otras cuestiones, es muy sencillo utilizar ffmpeg.

Podemos realizar conversiones aprovechándonos de las extensiones comunes de ciertos formatos de video, ya que ffmpeg los detecta automaticamente. Por ejemplo:

ffmpeg -i video_original.avi video_destino.mp4

En este ejemplo, le indicamos a ffmpeg que el formato de entrada es video_original.avi (mediante el parámetro -i) y que lo convierta a un archivo de destino al cuál le hemos indicado la extensión .mp4. De esta forma, ffmpeg busca los codecs de video y de audio apropiados para este formato (automáticamente selecciona h264 para video y aac para audio).

Veamos otro ejemplo haciendo una conversión de MP4 a MKV (matroska):

No obstante, podemos ser más específicos y personalizar los formatos que queremos utilizar. Por ejemplo, especificando el codec de video y el codec de audio que queremos en el archivo de destino:

ffmpeg -i video_original.mp4 -vcodec libx264 video_264.mkv
ffmpeg -i video_original.mp4 -vcodec libx265 video_265.mkv

En ambos ejemplos anteriores estamos creando un archivo de video Matroska (MKV), con canal de audio vorbis en ambos casos. Sin embargo, en el primer ejemplo, estamos utilizando el codec de video h264 (mediante la librería libx264), mientras que en el segundo ejemplo utilizamos el codec de video h265 (mediante la librería libx265), aún en desarrollo y futuro sucesor de H264.

Los resultados son bastante interesantes, puesto que el primer archivo resultante ocupa 120MB, mientras que el segundo 69MB. Ambos a 1080p (HD) y con la misma aparente calidad (eso sí, el segundo tarda más en comprimir y crearse).

También podemos hacer lo mismo con los canales de audio:

ffmpeg -i video.mp4 -vcodec copy -acodec mp3 h264_mp3.mkv
ffmpeg -i video.mp4 -vcodec copy -acodec aac h264_aac.mkv
ffmpeg -i video.mp4 -vcodec copy -acodec libvorbis h264_vorbis.mkv

Observa que en estos casos, hemos especificado copy en el codec de video, lo que obliga a ffmpeg a no hacer conversión de formatos de video, sino utilizar el que ya tiene (ahorrando mucho tiempo porque no hay que recomprimir el video), mientras que le especificamos el codec de audio mediante acodec.

Tanto en vcodec como en acodec tenemos que especificar la librería de codec a utilizar. En el caso de especificar el formato (como por ejemplo, «mp3»), el ffmpeg se encarga de seleccionar la librería más apropiada (libmp3lame, en este caso).

[...]

Queda el 69% del artículo
Leer artículo completo

Cómo configurar Atom Editor (y sus mejores plugins)

Atom es un editor de código open source desarrollado por GitHub. Su mejor característica es su alta personalización. Aquí tienes algunos de sus mejores paquetes (plugins).

Hace algún tiempo, escribí esta guía de Sublime Text (que te aconsejo que repases, ya que la mayoría de las funciones que comento se aplican exactamente igual en Atom). En dicha guía, hablaba de uno de mis editores de código para desarrollo web favoritos: Sublime Text. Sin embargo, con el paso del tiempo GitHub ha mejorado sustancialmente su editor de código Atom, un editor open source con el objetivo de convertirse en la alternativa libre de Sublime Text, clonando la mayoría de sus características estrella, y mejorándolo en muchos otros aspectos.

En la actualidad, Atom es el editor que más utilizo. Hay varias opciones interesantes encima de la mesa, cada una de ellas con sus ventajas e inconvenientes: Atom Editor, Adobe Brackets, Sublime Text y Visual Studio Code son las que creo que merecen los 4 primeros puestos. Existen otros editores para programar, incluso si prefieres programar en terminal de texto, pero personal y subjetivamente, creo que Atom es la opción ideal por un sólo detalle: su alta capacidad de personalización. Es cierto que Atom es notablemente más lento que Sublime Text, pero confío en que sea algo que se vaya solucionando con el tiempo. No obstante, recomiendo siempre que cada usuario pruebe cada uno de ellos y saque sus propias conclusiones.

Recientemente, Atom ha anunciado que, de forma similar a como hace Google Chrome u otros navegadores, ha establecido varios canales diferentes para su editor: un canal beta, un canal estable y un canal de desarrollo. Con esto podremos utilizar la versión que más nos interese, dependiendo si buscamos estabilidad o las últimas novedades disponibles.

El núcleo de Atom

Atom está desarrollado mediante Electron, un framework que utiliza NodeJS y Chromium para crear aplicaciones de escritorio, por lo que la propia plataforma está construída con tecnologías web como HTML y CSS. Esa es una de las razones por la que es tan personalizable (y no tan rápida como otras nativas).

Si vamos al menú View / Developer / Toggle Developer Tools o pulsamos CTRL+ALT+I, podemos abrir las herramientas de desarrollo de Chromium, pudiendo ver la estructura interna del programa. Esto es muy interesante, puesto que si tenemos conocimientos de HTML y CSS, en el menú File / Open your stylesheet podremos modificar una hoja de estilo LESS para personalizar estilos del propio editor y así personalizar su aspecto a nuestro gusto mediante propiedades de CSS.

Los paquetes de Atom, su funcionalidad estrella

Como comentabamos, la mejor característica de Atom es su alta personalización. Practicamente puedes configurar cualquier detalle del editor, que tiene ya una gran comunidad detrás que desarrolla y crea cada vez más paquetes y plugins para extender el funcionamiento del programa base.

Para buscar e instalar paquetes, sólo tenemos que ir al menú File / Settings / Install y escribir el nombre de lo que queremos buscar en la caja del buscador que nos aparece. A la derecha de dicho buscador apreciaremos que podemos marcar Packages o Themes. En el primer caso buscaremos paquetes, o lo que es lo mismo, plugins para añadir funcionalidades extra al editor. En el segundo caso estaremos buscando temas, o sea, paquetes diseñados para cambiar la apariencia visual del editor.

Más adelante observaremos que Atom tiene los paquetes categorizados en varias secciones: Core, que son los paquetes que vienen incorporados de serie, mientras que Community engloba los paquetes que descargamos y que están desarrollados por miembros externos a los desarrolladores de Atom.

La filosofía de Atom es tener un editor totalmente modular, de modo que si hay alguna funcionalidad de serie del editor que no utilizamos, podemos desactivarla en los paquetes core, y así descargar de trabajo al editor.

Por ejemplo, yo no suelo utilizar el árbol de directorios de la izquierda, por lo que suelo desactivar paquetes como tree-view o lenguajes en los que no programo como language-clojure, language-objective-c o language-ruby-on-rails, entre otros. Observa que puedes desactivar temporalmente (Disable) o desinstalar permanentemente (Uninstall) los paquetes, dependiendo del uso que vayas a darle a dicha característica.

Soporte para lenguajes

Estos últimos paquetes que mencioné en el punto anterior, que comienzan su nombre por language-, son unos paquetes especiales que incorporan la sintaxis de un lenguaje de programación para ser reconocido por el editor. Atom incorpora varios de estos paquetes de serie, como por ejemplo, language-css, language-csharp, language-html o language-java, entre muchos otros.

Sin embargo, otros lenguajes como language-jade, language-latex o language-postcss no vienen incorporados de serie, y pueden instalarse mediante paquetes de la comunidad, que son creados para extender y añadir más características.

Una de las características que siempre solemos buscar en un buen editor es la función de autocompletado del lenguaje que estamos utilizando, para así mostrarnos sugerencias al escribir una o varias letras, por si no recordamos exactamente la palabra clave que ibamos a escribir.

En Atom, es aconsejable tener el paquete autocomplete-plus para dotar de un motor de autocompletado, y luego, los paquetes del lenguaje en cuestión, como podrían ser autocomplete-css, autocomplete-python o autocomplete-php, para CSS, Python y PHP, respectivamente.

[...]

Queda el 70% del artículo
Leer artículo completo

¿Navegador lento? Guía para acelerar Chrome

¿Chrome va muy lento? ¿Tienes problemas con el navegador? En este artículo damos un repaso a una serie de consejos para mejorar su rendimiento.

Si te hicieran la pregunta «¿Cuál es el programa que utilizas con más frecuencia?», muy probablemente la respuesta sería el navegador web. Aunque Mozilla Firefox le suele seguir en el segundo puesto, Google Chrome es el navegador más utilizado con gran diferencia.

Las razones suelen ser muy variadas: funcionalidades, velocidad, estabilidad, implementación y actualización constante con mejoras y características técnicas, gran comunidad de extensiones, facilidad de uso e integración con servicios web y un largo etcétera.

¿Navegador muy lento? Guía para acelerar Google Chrome

De hecho, si también preguntáramos cuál es el principal problema de Google Chrome, es muy probable que obtuvieramos la misma respuesta: su alto consumo de memoria RAM. Lejos quedaron los días en los que los navegadores eran sencillas aplicaciones para mostrar una simple página web. Actualmente tienen soporte de pestañas para abrir múltiples páginas a la vez, extensiones que modifican el comportamiento del navegador (o de la página que visitas), posibilidad de reproducir audio y video nativamente, o incluso de generar contenido multimedia 3D para crear animaciones o juegos en los que se utiliza la tarjeta gráfica del sistema. Todo esto, se refleja en el consumo de recursos del sistema, por lo que podemos necesitar un equipo potente dependiendo del uso que le estemos dando.

Comportamiento habitual de Google Chrome

Resumiendo: una de las principales preocupaciones de los usuarios al utilizar Google Chrome es que el navegador puede ser bastante lento. En gran parte, esto es tarea de los desarrolladores de Chrome, aunque nosotros también podemos ajustar al máximo ciertos detalles del navegador para que funcione lo mejor posible. En este artículo hablaremos precisamente de eso: Cómo conseguir que nuestro Chrome sea más rápido.

Gestión de memoria: Chrome consume demasiado

Como habíamos mencionado, uno de los mayores problemas de Chrome suele ser que consume demasiada memoria RAM. Esto normalmente ocurre porque tenemos sobrecargado el navegador con muchas características que puede que no estemos utilizando. El primer paso debería ser analizar e investigar cuanto consume Google Chrome y que partes son las que más RAM están utilizando.

Pulsando CTRL+SHIFT+ESC, podemos acceder al Administrador de tareas de Windows (o usar el del sistema que estemos utilizando) y veremos lo que consume cada ventana del navegador (proceso chrome.exe), pero no cada parte individual. Sin embargo, Google Chrome tiene su propio administrador de tareas, donde se puede diferenciar y ver la memoria que está utilizando cada pestaña o página abierta y cada extensión cargada en el navegador.

Administrador de tareas de Google Chrome

Para ello, simplemente pulsamos SHIFT+ESC (o botón derecho sobre la barra de título del navegador y seleccionar Administrador de tareas). En esa ventana podemos ver el consumo de RAM (Memoria), el uso de procesador (CPU) o el uso de conexión (Red). También podemos pulsar con botón derecho sobre la cabecera y activar columnas como Memoria de Javascript, Memoria de la GPU o Caché de imagen entre otros, para saber cuanto están consumiendo en cada sección concreta, lo que puede ser especialmente útil para los desarrolladores.

Mediante este panel, podremos averiguar que páginas son las que más memoria consumen, ya que como podemos ver, no es lo mismo abrir Spotify que abrir Twitter. También podemos abrir una nueva pestaña y escribir el siguiente texto: chrome://memory-redirect. Esto no es más que una página interna especial de Chrome que nos muestra información técnica e incluso la opción de comparar la memoria que consumen otros navegadores, respecto a Google Chrome.

Deshabilitar extensiones prescindibles

El lector habrá llegado a la conclusión más evidente de esta guía, quitar extensiones que no utilice de Chrome. En el punto anterior, se reflejaban dichas extensiones y cuanta memoria RAM consumía cada una. Esto nos puede servir para detectar si existe alguna extensión que esté consumiendo demasiado, o simplemente para revisar y desactivar temporalmente.

Puedes desactivar temporalmente extensiones de Google Chrome

Podemos pulsar en el botón de las 3 líneas (hamburguesa) y seleccionar Más herramientas / Extensiones, o simplemente escribir chrome://extensions/ en una nueva pestaña. Con esto llegaremos a un panel de configuración donde podemos eliminar o deshabilitar temporalmente las extensiones, para que no consuman memoria RAM.

Cada usuario debe considerar las extensiones que son necesarias para sus hábitos de navegación y cuales puede desactivar temporalmente o eliminar por completo.

Y hablando de hábitos... Aunque no esté directamente relacionado con la velocidad del navegador, adquirir buenos hábitos con el método geek conseguirá aumentar nuestra productividad y ahorrar tiempo.

Desactivar pestañas inactivas

En este punto, el usuario podría pensar que cuantas más extensiones desactive o elimine, más memoria ahorrará. Y es cierto, salvo con una excepción: The Great Suspender. Si eres de los que tiene el hábito de dejar múltiples pestañas abiertas, probablemente para revisar después aunque al final no lo hagas por cuestiones de tiempo (no estás sólo, te entendemos), esta extensión te vendrá muy bien.

Se trata de una extensión que vigila nuestro navegador y suspende las pestañas que llevan más de cierto tiempo sin utilizarse. Cuanto más tiempo pasa, menos probable es que volvamos a esa extensión que tenemos pendiente en el navegador, por lo que con esta extensión seguimos teniendo las pestañas en nuestro navegador, pero no consumen memoria RAM en absoluto.

The Great Suspender: Suspende las pestañas que no estés utilizando

The Great Suspender | URL

La extensión es muy personalizable y nos permite reanudar la pestaña simplemente pulsando encima. También nos permite indicar una lista blanca de sitios que no queremos que se suspendan, especificar el tiempo para empezar a suspender pestañas, recuperar automáticamente pestañas cuando se pulse en ellas, suspender pestañas sólo cuando estés con una batería y muchas otras opciones más.

Si por alguna razón, esta extensión no te convence, tienes otras alternativas como Tab Hibernation, Tab Memory Purge o Tab Mem Free. También tienes Tabs Outliner, un poco más orientada a la organización de pestañas.

[...]

Queda el 60% del artículo
Leer artículo completo

CodePen: la mejor plataforma front-end

CodePen es, probablemente, la mejor herramienta/plataforma de front-end, donde puedes practicar con HTML5, CSS3, Javascript y muchas herramientas relacionadas. En este artículo les damos un repaso.

Este mes cumplo un año desde que comencé a dar clases de Diseño y Desarrollo web mediante la Oficina del Software Libre de la Universidad de La Laguna (divulgación de desarrollo web utilizando estándares abiertos desde equipos con GNU/Linux... un paraíso para un friki como yo). Después de más de 15 ediciones y más de 350 alumnos formados, tengo claro que CodePen es la mejor plataforma que pude haber elegido para comenzar a dar los cursos de front-end.

CodePen es una plataforma de desarrollo creada por Chris Coyier donde puedes publicar pequeñas páginas donde hacer ejemplos y trastear con fragmentos de código con una experiencia muy agradable. Suelo equipararlo a una «especie de Youtube para diseñadores y desarrolladores web», ya que puedes usarlo tanto para ver que han hecho miembros de la comunidad o para crear tu propia cuenta de usuario y hacer tus propias publicaciones.

Codepen, la mejor plataforma front-end (HTML5, Javascript, CSS3)

Lo bueno de CodePen es que es ideal para usuarios que están aprendiendo, pero a la misma vez es estupendo para usuarios que ya tienen experiencia, porque tiene una gran cantidad de características avanzadas a nuestra disposición, listas para utilizar de forma cómoda y práctica.

1. Separación de presentación, contenido y programación

La primera ventaja de CodePen (al igual que otras plataformas del mismo género) es la de marcar claramente la diferencia entre cada tecnología: HTML para contenido, CSS para presentación y Javascript para programación. Esto ayuda a los usuarios nóveles a diferenciar bien cada lenguaje y acostumbrarse a utilizarlo en una capa diferente de otra, sin mezclarlo.

Separación de presentación (CSS3), contenido (HTML5) y programación (JS)

A medida que vas escribiendo código, la plataforma actualiza automáticamente el contenido y lo va mostrando en la parte inferior (en blanco, en la imagen), donde se ven los resultados al combinar el HTML, CSS y Javascript escrito. Esto es lo que CodePen llama pen (equivale a los videos de Youtube).

2. Soporte de preprocesadores

Probablemente, una de las funcionalidades estrella por las que me encanta CodePen es su amplio abanico para utilizar los preprocesadores más famosos. Los preprocesadores son lenguajes independientes (generalmente, más amigables, potentes y prácticos) que son capaces de traducir el código al lenguaje de destino (HTML, CSS, Javascript...), que es el único lenguaje que el navegador es capaz de «entender» de forma nativa.

Actualmente, CodePen soporta preprocesadores de HTML enfocados a la programación como HAML, Jade (de mis preferidos), Slim o Markdown, este último más orientado a publicación rápida de contenidos. Por su parte, también soporta preprocesadores de CSS como LESS, SASS (tanto SASS como SCSS), Stylus o PostCSS, este último una auténtica navaja suiza para el preprocesado de estilos.

Soporte de preprocesadores

Por último, Codepen también admite seleccionar preprocesadores de Javascript como CoffeeScript, LiveScript o TypeScript, lenguajes más amigables que transforman en código Javascript válido, aunque quizás la mejor opción es Babel (antes conocido como 6to5) que permite escribir código Javascript ECMAScript6 y traducirlo a Javascript ECMAScript5 (el que soportan la mayoría de navegadores actualmente). De esta forma podemos escribir código con las últimas mejoras de Javascript y estar preparados para el futuro.

3. Características avanzadas

Al margen del soporte de los preprocesadores mayores comentados anteriormente, CodePen también va integrando herramientas muy útiles. Por ejemplo, una de ellas es un preprocesador menor llamado Autoprefixer, que se encarga de añadir (de forma transparente al usuario) los prefijos de las propiedades CSS que lo requieran en el momento de escribir el código. De esta forma no tenemos que preocuparnos de esos prefijos que son tan engorrosos (y difíciles de mantener).

Autoprefixer, añade prefijos CSS de forma transparente

Internamente, Autoprefixer se conecta a la base de datos de CanIUse y utiliza los prefijos oportunos según la situación actual de los navegadores. Actualmente, Autoprefixer forma parte de PostCSS donde puedes configurarlo y personalizarlo muy facilmente.

Por otra parte, también tenemos integrado Tidy, una herramienta que nos permite limpiar, indentar y organizar nuestro código HTML de una forma rápida y sencilla. Ojo, aunque esta característica es muy interesante, no es la solución mágica a todos nuestros problemas de organización, pero viene muy bien para usuarios que están aprendiendo. Además, en las opciones de CodePen puedes especificar si prefieres tabuladores o espacios.

Tidy, limpia el código HTML

Por último, en las capas de CSS y Javascript tenemos la opción de utilizar Linters (botones Analyze CSS o Analyze JS), que no son más que herramientas que analizan nuestro código e intentan darnos recomendaciones para mejorar nuestro estilo de codificación. A pesar de ser una gran herramienta, aconsejo utilizarlo con precaución y sólo por usuarios experimentados. Usuarios nóveles pueden encontrarse con dudas de conceptos, ya que muchas de estas herramientas dan consejos subjetivos o que dependen del contexto, y que podrían confundir al usuario.

[...]

Queda el 63% del artículo
Leer artículo completo

1 2 3 4 ... 389 #