hodavame

Comprimir videos a 3GP o MP4 para equipos móviles (Celular, PSP, IPod y otros)

2008-01-16T13:49:00.000-03:00

Después de buscar y probar muchos programas para "transformar" (comprimir) videos a 3GP o MP4, he llegado a la conclusión de que por lejos el mejor de todos es SUPER © de eRightSoft. A continuación explico un poco como usarlo.

Lo primero es bajar el programa desde esta pagina donde el link de descarga nos llevara a otra y otra pagina antes de poder bajar el programa (el autor seguramente lo hizo para marcar varios hits y ganar algo de dinero con la publicidad), es un poco latoso pero el programa lo vale.

Cuando ya tenemos el programa instalado, lo ejecutamos y veremos una ventana así:

Para el ejemplo, lo que voy a hacer es convertir un video en formato FLV (que bajé de YouTube) a formato 3GP para ponerlo en mi K550, así que lo primero que hago es seleccionar como formato de salida el 3GP. Si tu quieres un video para un IPod, PSP, DS o incluso una imagen GIF para usar de avatar, seleccionas la opción que corresponde.

Automáticamente se harán algunos ajustes en el programa, vemos que el codec de video es MPEG-4 y el de audio es AAC. Además es muy recomendable marcar la opción DirectShow Decode para asegurarnos de que podremos usar cualquier tipo de video como origen.

Ahora selecciono la escala del video (tamaño en pixeles) y la relación de aspecto, esto depende del equipo donde se vaya a reproducir el video, para mi K550 elijo 176x144, aunque también podría ser 220x176 y como relación de aspecto 4:3.

La cantidad de cuadros por segundo también depende del equipo, para un celular con 15 estaría bien...

Pero yo prefiero ponerle 20 para que quede una animación un poco mas suave. Como en la lista no aparece 20, selecciono More y escribo 20.

El bitrate o nivel de compresión por defecto son 144 (kbps) lo que no es malo, pero para mejor calidad podría ser 240 o incluso podrías poner 1200... si 1200 y no creas que te va quedar un video gigantesco ya que el compresor interno (en este caso FFmpeg) es lo suficientemente inteligente como para no asignar mas bitrate del necesario. Entonces si quieres la máxima calidad puedes poner 1200 sin temor a que el resultado sea un video exageradamente pesado. La opción Hi Quality no se exactamente que hace, pero la dejo marcada, y la opción Top Quality yo no la activo (por las pruebas que he hecho a veces se gana o se pierde calidad y tamaño).

En el audio, la frecuencia de muestreo por defecto es 22050 pero yo la subo a 44100 (si tienes un oído exigente notaras la diferencia). La cantidad de canales depende de si vas a escuchar con audifonos o parlantes estéreo (2) o si solo escucharas con el altavoz (1) del celular.

El bitrate de audio por defecto es 48, pero (en mi opinión) lo mínimo aceptable es 96, si vas a escuchar con audifonos tendría que ser 128. La otra opción no se aplica al formato 3GP así que no la tocamos.

A continuación, en la sección Output podemos ver un resumen de la configuración.

Teniendo la configuración lista, vamos a agregar el o los videos que queremos convertir, para eso hacemos click derecho en algún lugar de la ventana y seleccionamos Add Multimedia File(s).

Y abrimos el o los videos.

Teniendo el video cargado y seleccionado en el programa, hacemos click en el botón Encode (Active Files) y esperamos unos minutos a que se complete el proceso...

... y ya tenemos listo el video en formato 3GP para colocarlo en el equipo (celular en mi caso).

Para que se hagan una idea, el video de prueba tiene una duración de 4 minutos 44 segundos (4:44) y al comprimirlo con la configuración que indiqué, queda pesando 8,97Mb.

A los usuarios avanzados quizás les interese saber que este programa es un GUI de FFmpeg y MEncoder entre otros, y lo que acabamos de hacer se resume en una simple línea de comando:

ffmpeg -y -i "ARCHIVO ORIGEN" -bitexact -vcodec mpeg4 -fixaspect -s 176:144 -aspect 4:3 -r 20 -b 240k -g 15 -hq -trell -maxrate 240k -bufsize 450k -acodec aac -ac 2 -ar 22050 -ab 96k -f 3gp "ARCHIVO DESTINO"

Y el resultado...

Ahh que es linda Amy Lee, me recuerda a...

MySQL lento, demora al conectar (unauthenticated user)

2007-12-24T14:03:00.000-03:00

Uhhh mucho tiempo que no escribía nada... por falta de tiempo y porque no tenia ganas.

Hace un tiempo tuve un problema con MySQL que me quitó el sueño varios días porque no encontré ayuda fácilmente (seguramente estaba buscando mal).

Un programa que yo hice (que trabaja con una base de datos MySQL), algunas veces demoraba entre 2 y 30 segundos en completar las consultas a la base de datos... después de hacer cambios en el equipo servidor, programa, red, equipos cliente el problema continuaba; incluso había días en que la demora se producía pocas veces y era muy corta y otros días era muy frecuente. Ni se imaginan la vergüenza que me daba al ver que mi programa "se quedaba pegado".

mysql> show processlist; ¡¡¡Eso es lo primero que debería haber hecho!!!. Cuando se producía la demora, se podía ver en la lista de procesos, una o varias líneas que como usuario ponía: "unauthenticated user"... esa fue la palabra mágica que me ayudo a encontrar el problema y la solución.

Cuando un usuario se conecta, MySQL además de comprobar el nombre de usuario y la contraseña también comprueba el host, osea, resuelve a través del servicio DNS (ya sea local o remoto) la IP y/o dominio desde donde se realiza la conexión... es aquí donde se produce el problema: si el servicio DNS no responde con la rapidez necesaria (algo muy común) se retrasa el login y todo lo demás (consulta, ejecución o lo que sea que se quiera hacer en el servidor).

Para evitar este problema (la "incompetencia" del servicio DNS) simplemente le decimos a MySQL que NO intente resolver IP y/o dominio, para esto agregamos "skip-name-resolve" al archivo de configuración de MySQL (/etc/mysql/my.cnf) o lanzamos el servicio mysqld con la opción --skip-name-resolve.

Es importante mencionar que solo se podrán usar IPs como host de usuarios.

Ahí por fin pude demostrarle al cliente que mis programas y un servidor Linux con MySQL son una maravilla jajaja...

Aquí hay mas información sobre como "tunear" MySQL:

How To: Optimize MySQL response time

10 tips para Optimizar consultas MySQL

Porqué MySQL es lento con grandes tablas?

Jugando con la Navbar 4 (ocultar/mostrar con Scriptaculous)

2007-05-30T17:12:00.000-04:00

Con los experimentos anteriores, se me ocurrió una manera mucho mas elegante para ocultar y mostrar la Navbar, usando dos Framework de JavaScript: Scriptaculous y Prototype.

Se deben agregar dos eventos al div del Navbar: MouseOver para detectar la presencia del mouse sobre (over) la Navbar, y MouseOut para detectar el momento en que el mouse se mueve fuera (out) del div de la Navbar. Estos dos eventos haran aparecer y desaparecer gradualmente la Navbar, quedando mas o menos así...

acerca el mouse aquí abajo para que aparezca la imagen y alejalo para que desaparezca.

El código para hacer esto con la Navbar, es el siguiente:

function navbarShow() {
  new Effect.Opacity('navbar-iframe', {duration:0.5, from:0.0, to:1.0});
}

function navbarHide() {
  new Effect.Opacity('navbar-iframe', {duration:0.5, from:1.0, to:0.0});
}

function navbarHack() {
  Event.observe('navbar-iframe', 'mouseover', navbarShow, false);
  Event.observe('navbar-iframe', 'mouseout', navbarHide, false);
  navbarHide();
}

Event.observe(window, 'load', navbarHack, false);

Aqui hay dos instrucciones clave: La Event.observe(ELEMENTO, EVENTO, ACCION, false) de Prototype, asigna la funcion ACCION al evento EVENTO del elemento u objeto ELEMENTO, osea cuando ocurra el EVENTO de ELEMENTO se ejecutará ACCION; y la Effect.Opacity(ELEMENTO, PARAMETROS) de Scriptaculous, que hace un fade o transformación gradual desde (from) un nivel de opacidad hasta (to) otro en un tiempo determinado (duration); la opacidad 1.0 significa 100% visible y 0.0 significa 0% visible, podrias cambiar el 1.0 por 0.5 para tener la Navbar semi-translúcida o lo dejas en 1.0 y agregas el codigo CSS que hay en Jugando con la Navbar 2 (opacidad); con respecto a la duración (duration) del efecto, se mide en segundos, osea ese 0.5 significa medio segundo.

Si no entendiste nada te lo doy fácil...

En el "panel" de tu blog vas a "Plantilla" y luego a "Edición HTML" y, en el recuadro donde esta el código de tu plantilla buscas la linea que dice "</head>" (casi al final) y, agregas el siguiente código justo arriba de esa linea (sin borrarla obviamente):

<script src='http://wiki.script.aculo.us/javascripts/prototype.js' type='text/javascript'/>
<script src='http://wiki.script.aculo.us/javascripts/scriptaculous.js?load=effects' type='text/javascript'/>

<script type='text/javascript'>
function navbarShow() {
  new Effect.Opacity('navbar-iframe', {duration:0.5, from:0.0, to:1.0});
}

function navbarHide() {
  new Effect.Opacity('navbar-iframe', {duration:0.5, from:1.0, to:0.0});
}

function navbarHack() {
  Event.observe('navbar-iframe', 'mouseover', navbarShow, false);
  Event.observe('navbar-iframe', 'mouseout', navbarHide, false);
  navbarHide();
}

Event.observe(window, 'load', navbarHack, false);
</script>

Has una "Vista Previa" y si esta todo bien guardas los cambios.

Viene desde: Jugando con la Navbar 3 (ocultar/mostrar)

Jugando con la Navbar 3 (ocultar/mostrar)

2007-05-24T15:40:00.000-04:00

Para ocultar y mostrar la Navbar automáticamente según la posición del mouse; o mejor dicho, mantener oculta la Navbar y mostrarla cuando se coloca el mouse en parte superior de la pagina, conozco dos métodos, uno con CSS puro y otro con Javascript y CSS

El método CSS puro lo aprendí en Recursos Blog & Web, en el artículo Ocultar la barra Blogger (navbar) automáticamente. Es muy fácil, solo tienes que agregar el siguiente código en tu plantilla (Edición HTML) justo antes de la linea que dice "</head>" (casi al final).

<style type="text/css">
#navbar-iframe {
  opacity: 0.0;
  filter: alpha(Opacity=0)
}

#navbar-iframe:hover {
  opacity: 1.0;
  filter: alpha(Opacity=100,FinishedOpacity=100)
}
</style>

Este código fija la opacidad del div cuyo id es "navbar-iframe" en un 0%, osea “invisible” y cuando el mouse esta sobre (hover) este div, le da una opacidad de 100%, osea “totalmente visible”. Puedes usar este código junto con el que hay en Jugando con la Navbar 2 (opacidad) para tener una Navbar semi-translúcida que se oculta/muestra automáticamente; o mejor aun, le puedes hacer una modificación para conseguir el mismo efecto:

<style type="text/css">
#navbar-iframe {
  opacity:0.0;
  filter:alpha(Opacity=0)
}

#navbar-iframe:hover {
  opacity: 0.5;
  filter: alpha(Opacity=50,FinishedOpacity=50)
}
</style>

El otro método, con Javascript y CSS es bastante mas complejo, pero quiero mencionarlo de todas maneras. Este código lo extraje de Blogger Hacked y le hice pequeñas modificaciones. Con este método se consigue lo mismo que con el anterior, pero este lo consigue agregando eventos mouseover y mouseout al div “navbar”, para detectar la presencia del mouse y aplicar un estilo CSS que hace visible o invisible el div según corresponda.

<style type="text/css">
.navbar-show {
  filter:alpha(opacity=50);
  opacity:.5;
  -moz-opacity:0.5;
}

.navbar-hide {
  filter:alpha(opacity=0);
  opacity:0;
  -moz-opacity:0.0;
}
</style>

<script type='text/javascript'>
function show_navbar() {
  var nbar=document.getElementById ("navbar");
  nbar.className="navbar-show";
}

function hide_navbar() {
  var nbar=document.getElementById("navbar");
  nbar.className="navbar-hide";
}

function navbar_hack() {
  var nbar=document.getElementById ("navbar");
  nbar.className="navbar-hide";
  if (nbar.addEventListener) {
    nbar.addEventListener ("mouseover",show_navbar,false);
    nbar.addEventListener ("mouseout",hide_navbar,false);
  } else if (nbar.attachEvent) {
    nbar.attachEvent ("onmouseover",show_navbar);
    nbar.attachEvent ("onmouseout",hide_navbar);
  } else {
    nbar.onmouseover = show_navbar;
    nbar.onmouseout = hide_navbar;
  }
}

function addLoadEvent(func) {
  var old = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      old();
      func();
    }
  }
}

addLoadEvent(navbar_hack);
</script>

Aaaahhhhh!!! es muuucho mas complejo!!! pero quise mencionarlo porque este código me dio la idea para el siguiente método, que es le mejor de todos y es mucho mas elegante...

Viene desde: Jugando con la Navbar 2 (opacidad)
Continua en: Jugando con la Navbar 4 (ocultar/mostrar con scriptaculous)

Jugando con la Navbar 2 (opacidad)

2007-05-18T18:49:00.000-04:00

Después de pensarlo bien, encontré que era demasiado drástico "eliminar" la Navbar ya que puede ser bastante útil si se sabe ocupar, así que me puse a buscar ideas sobre como podría hacer que la Navbar se adaptara al estilo del blog o que por lo menos no fuera tan llamativa... fue así como llegue a un blog del que extraje dos métodos, hacerla semi-translúcida y ocultarla/mostrarla según la posición del mouse.

Hacer semi-translúcida la Navbar consigue un efecto que logra asemejar el color de la Navbar al color de fondo del blog. En mi caso, con la Navbar negra y fondo del blog verde, al definir una opacidad media para el div de la Navbar, esta se vera de un color verde oscuro.

Antes

Después

Para lograr esto se debe agregar el siguiente código css a la plantilla.

#navbar {
  filter: alpha(opacity=50);
  opacity: .5;
  -moz-opacity: 0.5;
}

El "filter", "opacity" y "-moz-opacity" intentan fijar la opacidad del div cuyo id es "navbar" en un 50%, osea que la Navbar sera un 50% translúcida.

Si no entendiste nada te lo doy fácil...

Para hacer la Navbar semi-translúcida, en el "panel" de tu blog vas a "Plantilla" y luego a "Edición HTML" y, en el recuadro donde esta el código de tu plantilla buscas la linea que dice "</head>" (casi al final) y, agregas el siguiente código justo arriba de esa linea (sin borrarla obviamente):

<style type="text/css">
#navbar {
  filter: alpha(opacity=50);
  opacity: .5;
  -moz-opacity: 0.5;
}
</style>

Has una "Vista Previa" y si esta todo bien guardas los cambios.

Viene desde: Jugando con la Navbar 1 (ocultar)
Continua en: Jugando con la Navbar 3 (ocultar/mostrar)

Jugando con la Navbar 1 (ocultar)

2007-05-18T16:12:00.000-04:00

Este es el primero de varios Tips para la Navbar.

Mientras creaba este blog, revisé las plantillas de blogger y la que mas me gusto fue "Rounders 4" por el color verde... me gusta el color verde en todos sus tonos.

Teniendo todo listo, pude ver al fin mi blog funcionando y note que arriba había una barra negra que desentonaba completamente con los verdes de la plantilla... la Navbar.

En la "Configuración de Navbar" solo habían 4 "temas" disponibles; Azul, Canela, Negro y Plateado. Después de probarlos todos me pareció que ninguno se veía relativamente bien.

Mi primer impulso fue... "hay que sacarla!", entonces revisé el código fuente de la página y encontré una linea que decía:

<div class='navbar section' id='navbar'>

Entonces en la pagina de configuración del blog, fui a "Plantilla", "Edición HTML" y en la sección donde esta el css (entre <b:skin> y </b:skin>) agregué:

#navbar {
  display: none;
}

Para los que no saben css, ese "display: none" significa que no se mostrara el div cuyo id es "navbar". Investigando mas sobre el asunto, encontré muuuchos otros blog que también han eliminado la Navbar y la mayoría usan:

#navbar-iframe {
  height:0px;
  visibility:hidden;
  display:none;
}

Ese código da mayor compatibilidad con navegadores. El "height", "visibility" y "display" intentan ocultar el div cuyo id es "navbar-iframe" (este div esta dentro del div "navbar").

Si no entendiste nada te lo doy fácil...

Para quitar (ocultar) la Navbar, en el "panel" de tu blog vas a "Plantilla" y luego a "Edición HTML" y, en el recuadro donde esta el código de tu plantilla buscas la linea que dice "</head>" (casi al final) y, agregas el siguiente código justo arriba de esa linea (sin borrarla obviamente):

<style type="text/css">
#navbar-iframe {
  height:0px;
  visibility:hidden;
  display:none;
}
</style>

Has una "Vista Previa" y si esta todo bien guardas los cambios.

Continúa en: Jugando con la Navbar 2 (opacidad)

Por que?

2007-05-11T12:45:00.000-04:00

Por que un blog?

Muchas veces he querido hacer esto.

Muchas veces he necesitado decir al mundo lo que me esta pasando, lo que quiero hacer, lo que me gusta, lo que odio. Muchas veces he querido tener un espacio en alguna parte para hablar sobre mis pequeños logros, y dar la receta completa de como lo he conseguido para que otros también puedan hacerlo.

Soy un completo ignorante en lo que se refiere a blogs y necesito aprender... me gusta por lo menos tener nociones básicas sobre cada cosa, me angustia no saber nada sobre algún tema, pero mas me angustia no tener tiempo suficiente para aprender todo sobre todo.

No esperen grandes y poéticos mensajes, ni fabulosas historias con moraleja incluida; soy un hombre de pocas palabras, cuando digo algo es por que me parece realmente importante.

H.