Archive for the ‘ Utilidades ’ Category

El tip del martes, con Eurofurence

Testado con LibreCAD 1.0 (Daily Build de 6 de Octubre de 2011) y escrito con Eurofurence.

El tip del martes con Quicksand

Testado en Blender 2.60RC1 y escrito con Quicksand

KompoZer y Blueprint CSS Framework: Maquetación sencilla a cuatro columnas

En mi navegación por internet buscando temas relacionados con Inkscape me topé con un recurso del que no tenía la más remota idea de su existencia y con el que he quedado maravillado en mi primer contacto.

Blueprint CSS Framework no es un software aunque en la carpeta de descarga incluye algunos javascript a los que en este primer contacto no vamos a prestar atención.

La carpeta llamada blueprint incluye unos CSS prediseñados que debemos enlazar en nuestro HTML. Después tendremos que ocuparnos de crear los contenedores DIV y de darles el class necesario acorde al comportamiento que deseamos.

Lo primero es descargar el ZIP o el TAR.GZ desde la web oficial BlueprintCSS  que una vez descomprimido incluye estos archivos

De todos ellos, tal y como muestra la imagena anterior, sólo nos interesa la carpeta blueprint. La colocamos dentro de la carpeta que tengamos destinada a los CSS de la web que estemos diseñando. Damos por supuesto que esa carpeta se llama css y que está junto al index.html que es la página que vamos a editar

Este orden en la colocación y nombre de los archivos y carpetas es importante para que funcionen las rutas relativas que enlazarán con las hojas de estilo.

Abrimos (o creamos) en KompoZer la página index.html y desde el modo de edición Código fuente insertamos entre <head> y </head> la llamada a la hoja de estilo acorde a las ruta relativa antes mencionada:

<link rel=”stylesheet” href=”css/blueprint/screen.css” type=”text/css” media=”screen, projection”>

Tras guardar (incluso es posible vernos obligados a salir y volver a entrar en KompoZer) para que los cambios tengan efecto y las llamadas a los CSS queden operativas añadimos un simple contenedor genérico

El contenedor se extiende de lado a lado de la interfaz como es lógico. Echando mano del potencial de Blueprint CSS framework nos dirigimos a la parte inferior y con clic derecho sobre la etiqueta <div> nos dirigimos al apartado Clases y escogemos container

Al darle ese class al DIV se le aplican automáticamente varias ediciónes: queda centrado y su ancho es de 950px (muy habitual). Una de las caracteráiticas de Blueprint CSS Framework es que está destinado a webs de ancho fijo y no de ancho líquido. Como esto es un tutorial no me dirijo a Cascades para cambiar el ancho… pero si accedo a su información me encontraré con esto:

Dentro de ese div podemos crear otro con algo de texto…

Y antes de comenzar a editar el ancho de ese nuevo div le aplicamos al div container un class extra de tipo showgrid del mismo modo de antes. Eso se traduce en que aparecen una serie de columnas para ayudarnos visualmente en la maquetación. podemos aplicar este class a cualquiera de los divs.

De nuevo vuelve a aparecer la comodidad de trabajar con Blueprint CSS Framework para elegir el ancho de la columna para el texto. Queremos que ocupe 6 de las 24 columnas; así que sólo tenemos que aplicar a ese div el class span-6

Una de las ventajas de esto es que el div ya queda preparado para añadir contenido flotando por la derecha

Elimino ese texto que he puesto de ejemplo y repito la operación de antes para conseguir cuatro columnas de texto como la primera; es decir con class span-6

¿Qué ha ocurrido?, ¿Por qué la cuarta columna no queda flotando a la derecha de la tercera?. Muy sencillo. Los espaciós que se generan entre columna y columna son consecuencia de que esos divs tienen un margen derecho de 10px. Si el contenedor general midiera 960px todo habría salido bien pero se puerde la esencia de la ayuda visual de las columnas. Para hacer que la última columna se coloque correctamente es necesario decirle al contenedor que tenga un margen derecho de 0px anulando lo anterior.
Para eso le aplicamos un nuevo class a ese contenedor de tipo last con el método que ya conocemos. Si vamos a Cascades podemos ver que last incluye ese valor.

Ahora la maquetación queda así:

Podemos quitar el class showgrid del contenedor en cualquier momento.

El tip del martes con Quattrocento

Testado con KompoZer 0.8b3 y escrito con Quattrocento

El tip del martes con 232MSKD Round Light

Testado en Gimp 2.6 y escrito con 232MSKD Round Light

Blender addon: Screencast Key Status Tool

No tenía la menor idea de que se hubiera desarrollado un addon con la finalidad de mostrar las referencias a las teclas que estamos pulsando durante un videotutorial sobre Blender. Siempre pensé que se trataba de una opción del capturador de pantalla. Se trata de Screencast Key Status Tool (clic derecho y guardar)

No sólo muestra esa información sino que la relativa al ratón puede ser sustituida por un gráfico que lo representa.

La manera más fácil de hacerlo funcionar es meterlo dentro de la carpeta . blender/2.59/scripts/addons para que nos aparezca en File/User Preferences Add-Ons (sección 3dView) y poder activarlo.

Tras regresar al entorno 3D, en el panel de propiedade “N” nos aparecen sus opciones

Todas ellas son elementales por lo que no se requiere explicación.

Sin duda un gran aporte para los creadores de contenido en forma de videotutoriales.

FFmpeg: de seguencia de imágenes a vídeo

Esta es una nota personal que tenía en un documento de Google Docs y que prefiero pasar aquí para encontrarla mejor y así de paso que le pueda servir a más de uno.

WinFF se supone que es una interfaz gráfica para FFmpeg, pero no hace lo más importante para mi: convertir una secuencia de imágenes en un vídeo (también puede ser que sí sea posible y yo no haya sido capaz de descifrar el enigma)

Desde mi mentalidad 100% gráfica yo no comprendo por qué no se programa un software directamente con interfaz. Habrá motivos técnicos, no lo sé, pero se convierte en un escollo para el usuario medio.

Vamos entonces con el proceso que es muy sencillo si se conoce la línea de comando necesaria y para la que necesitamos tener instalada en nuestro sistema el software FFmpeg.

El comando

Desde el terminal…

ffmpeg -f image2 -i pref%04d.png -r 29,97 -s ANCHOxALTO resultado.avi

Donde:

  • ffmpeg. Llama al software.
  • -f. Force.
  • image2. Comando para convertir imágenes a video (algo así como image to).
  • -i. Input.
  • pref%04d. Hace referencia al prefijo común a todas las imágenes (pref), y al número de diígitos que definen la seguencia (%o4d). en el ejemplo se trata de 4 dígitos, como por ejemplo, imagen0001.
  • .png. Es el formato de las imágenes. En el ejemplo se usa PNG pero puede ser cualquier otro.
  • -r. Frames per seconds (framerate).
  • 29,27. Numero de frames por segundo. Si se usa con decimales tiene que usarse “coma” y no “punto”. Si prescindimos dela opción -r la exportación se hace a 25fps.
  • -s. Size.
  • ANCHOxALTO. Son los píxeles que determinan el ancho por el alto del vídeo final. 1920×1080 es sólo un ejemplo para un HD de 30 pulgadas (FFmpeg hubiera reconocido la expresión hd1080 en lugar de 1920×1080). Esta opción puede obviarse si el tamaño del vídeo va a ser el mismo que el de las imágenes de la importación porque FFmpeg lo reconoce y lo copia.
  • resultado. Nombre del archivo final. Por supuesto, lo elegimos nosotros
  • .avi. Formato del archivo final. Se admiten otros muchos como OGG…

Las rutas de entrada y de salida

Al decir que los archivos input (-i) son prefijo%04d estamos dando por hecho qu eestas imágenes se encuenran directamente en la carpeta usuario (hablo de GNU/Linux Ubuntu); pero esto es muy improbable. Lo normal será tener todas las imágenes en una carpeta llamada, por ejemplo, video y que esta se encuentre en usuario. En ese caso el comado sería

ffmpeg -f image2 -i video/pref%04d.png -r 29,97 -s ANCHOxALTO resultado.avi

Para la salida ocurre lo mismo, por lo que si queremos que el video final se guarde junto a las imágenes que lo generan la línea sería

ffmpeg -f image2 -i pref%04d.png -r 29,97 -s ANCHOxALTO video/resultado.avi