YouTube y su nueva forma de incrustar videos

Hace ya unos días, el portal de videos YouTube anunció un nuevo código para permitir la inclusión de los videos de la página en otros sitios. Este nuevo snippet utiliza un <iframe> que carga una página desde YouTube; esta página a su vez, contiene un reproductor Flash o HTML5, dependiendo del navegador del visitante y el video.

El código es algo similar a este:

<iframe type="text/html" width="640" height="385" src="<a href="http://www.youtube.com/embed/VIDEO_ID">http://www.youtube.com/embed/VIDEO_ID</a>" frameborder="0">
</iframe>

Hasta ahora, todo genial. Se puede incrustar video en HTML5 y no se pierde compatibilidad. Pero también leí que la gente tenía algunos problemas con el código nuevo; como que no validaba si usabamos xHTML Strict (el iframe no existe en ese doctype), y que no soportaba autoplay.

El primer problema se puede solucionar fácilmente si usamos <object> en lugar de <iframe>, con un código como el que sigue. De esta forma, logramos la misma compatibilidad con todos los navegadores, y nuestro código valida si es xHTML Strict.

<!--[if IE]>
<object width="640" height="385" classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="http://www.youtube.com/embed/VIDEO_ID">
<![endif]-->
<!--[if !IE]> <-->
<object width="640" height="385" type="text/html" data="http://www.youtube.com/embed/VIDEO_ID">
</object>
<!--> <![endif]-->

En cuanto al segundo problema, leyendo un poco el código descubrí que si agregamos ?autoplay=1 a la URL del <iframe> podemos activar el autoplay de los videos que agreguemos.

Para que puedan comparar los cuatro códigos que propongo, y verlos en funcionamiento, he preparado un pequeño archivo html que pueden ver aquí.

N’MP3 se mueve a un nuevo servidor

N'MP3Para poder soportar los crecientes aumentos de visitas que estabamos experimentando, y mejorar la velocidad de respuesta de la web, hemos cambiado de proveedor de hosting. Hace ya unas semanas que N’MP3 se ha mudado a un nuevo servidor VPS provisto por LiveYeah, y en este último período en 8D2 nos hemos empeñado en optimizar al máximo el servidor web y la base de datos, para poder ofrecer una velocidad mayor al buscar y reproducir canciones.

El nuevo servidor fue armado a medida para N’MP3, y posee 1GB de RAM, 4 cores virtuales, una IP propia, y prácticamente tráfico ilimitado. Corre Debian GNU/Linux 5.0 “Lenny” con Lighttpd, MySQL y PHP.

Queremos agradecer a la gente de LiveYeah que nos ha tratado excelentemente, y ha cubierto todas nuestras necesidades completamente. Desde 8D2 esperamos que este cambio sea bien bienvenido por los usuarios de N’MP3 y colabore para mejorar la experiencia de usuario.

Optimizar Internet Explorer 8 en PCs con poca RAM

NOTA: Este post no está muy enganchado con la temática del blog en general, pero me pareció interesante comentarlo, sobre todo para los diseñadores web que, de cierta forma, están obligados a usar este navegador. Si no te interesa, no sufres de este problema, o usas otro navegador mejor (yo recomiendo Mozilla Firefox), puedes simplemente dejar de leer, no me ofenderé :-) Si eres un usuario de Internet Explorer full-time, te recomiendo que pruebes otros navegadores, como Firefox. Ahora si, el post en cuestión:

El otro día me puse a limpiar un poco la PC que usa mi papá en mi casa. Esta PC es una linda Pentium 4 2.8Ghz con HT, y algo escasa de RAM (sólo 512MB). La PC nunca ha sido formateada (la instalación de Windows XP tiene como 7 años!) y tiene un antivirus/firewall pesado (Internet Security 2010 de Symantec).

Luego de realizadas todas las limpiezas normales y periódicas (que no vienen al caso para este post), quise leer el diario. Asi que abrí el explotador explorador de Internet que tiene por defecto la máquina, Internet Explorer 8. Le hice doble click al archiconocido ícono de la e azul, y me quedé esperando. Desde ese momento, hasta que pude tipear www.pagina12.com.ar, tardó mucho, muchísimo para mi gusto. Por eso, aprieto Ctrl+Shift+Esc, busco iexplore.exe en la lista de procesos, y veo como 5 procesos de IE. Esto me dejó medio sorprendido, ¿tendría algún virus?

Así que me pongo a investigar un poco en el lentísimo IE, y averiguo que IE8, al igual que Chrome, implementa un sistema de “proceso por pestaña”, para (supuestamente) mayor estabilidad y performance. Esto es, sin embargo, una de las peores cosas para usar en una PC con poca RAM. Investigando un poco más, veo que esto es desactivable con un valor del registro de Windows (una cosa buena al fin, Microsoft! :P )

Asi que, para que no se tengan que morir buscando, les dejo dos archivos .reg para que apliquen el cambio y puedan tener un IE más rápido en esas PCs o máquinas virtuales escasas de memoria. Uno es para usar en Windows XP, y el otro es para Vista y 7.

Espero que les sirva y puedan testear sus webs algo más rápido!

Más música, menos stress

Tras un largo período sin posts, vuelvo a compartirles algo de música que me gusta. Con un diseño nuevo más dospuntocerista celeste, y bajo el slogan de una famosa emisora de radio de Buenos Aires, les presento algunas canciones nuevas (comparadas con las que les presenté anteriormente):

Runaway Train, por Soul Asylum
My December, por Linkin Park
Get Off, por The Dandy Warhols
Restless Heart Syndrome, por Green Day
Hairy Bumpercress, por Mr. Scruff

Espero pronto poder postear más cosas; en mi mente ya tengo un post con un truco que descubrí y otro de novedades en N’MP3.

Como compartir carpetas con Ubuntu corriendo dentro de Virtualbox

Ya varias personas me habían preguntado la forma de compartir archivos entre Windows y un Ubuntu virtual, asi que paso a explicarlo para el que lo necesite. La situación base es esta:

  • Tenemos Ubuntu, Xubuntu, Kubuntu o derivados (u otras distribuciones) corriendo sobre Virtualbox
  • Necesitamos compartir archivos entre el Sistema Operativo real (host) y el virtualizado (guest)
  • Queremos lograrlo mediante Virtualbox (con esto me refiero a no usar Samba, NFS u otras formas de compartir archivos en red)

¿Cómo podemos hacer? Fácil, en Linux, al instalar las Aplicaciones del Huésped (“Guest Additions”), obtendremos un nuevo sistema de archivos virtual: vboxsf. Este sistema nos permitirá montar los directorios que agreguemos en la interfaz de Virtualbox.

Pasos para agregar una carpeta

Siguiendo los pasos en la imagen, agregamos una carpeta compartida; hay que recordar el “Folder Name” que es lo que luego usaremos en nuestro Ubuntu virtualizado para montar el sistema de archivos. (No se preocupen por el Sistema Operativo de la máquina virtual de la foto, es Jolicloud, pero los pasos de agregar una carpeta no varían)

Luego, abrimos una consola en nuestro sistema virtualizado, creamos un directorio y montamos el sistema de archivos:

sudo mkdir /media/compartido
sudo mount.vboxsf ‘Escritorio’ /media/compartido

En el segundo comando, “Escritorio” vendría a ser el “Folder Name” de cuando agregamos la carpeta en Virtualbox. También podemos hacer sudo mount -t vboxsf Escritorio /media/compartido en lugar del segundo comando, es otra forma de hacer lo mismo. Luego, abrimos una consola en nuestro sistema virtualizado, creamos un directorio y montamos el sistema de archivos:

Con eso ya tenemos el directorio montado en nuestro sistema, y lo podemos utilizar para leer/escribir archivos.

Nota: En teoría estos pasos funcionan también para Debian y otras distibuciones Linux, yo los he hecho nombrando a Ubuntu sólo porque me preguntan como hacerlo en Ubuntu :) Si lo pruebas en otra distribución virtualizada y funcionan, ¡deja un comentario!

Curiosidad: No viene al tema del post, pero si se fijan en la imagen, pueden notar como la gente que hace Jolicloud le ha errado en la traducción y ha escrito “Rojo” en lugar de “Red”, que en inglés es “Network” (y a su vez, “Red” en inglés significa “Rojo”).

Ventanas Gelatinosas con Javascript y CSS Transforms

El otro día estaba viendo ejemplos de CSS Transforms. Y entre tantos ejemplos que vi, de repente se me ocurrió: ¿por que no hacer ventanas gelatinosas? Busqué un poco en Google, y como no encontré nada del tema, me puse a trabajar.

Como base, utilizé el framework Javascript Mootools, y la interfaz de ventanas MochaUI. Modifiqué el sistema de Drag de Mootools, para que haga gelatinosos los elementos que se mueven. Y cargando el “Drag” modificado antes de MochaUI, podemos obtener ventanas gelatinosas. Tengo que aclarar que los efectos son un poco irreales: yo no soy físico ni se como calcular para donde debería moverse la ventana, o cuanto debería agrandarse. Pero de todas formas, me parece que sirve para ilustrar que esto es totalmente posible de implementar, para alguien con los conocimientos necesarios.

Para probarlo, van a necesitar Firefox 3.5, o algún navegador basado en Webkit reciente (Safari 4, Chrome 2?). Al entrar, verán una ventana: si la mueven, notarán que es gelatinosa. En el resto de los navegadores, deberían ver la ventana, pero no tendría el efecto.

El link: http://labs.turl.com.ar/gelatinosas/

¡Espero comentarios!

Actualización: Las ventanas gelatinosas han sido probadas y están funcionando en Firefox 3.5 y 3.6, Chrome 2 y 3, Safari 4 y Midori 0.1.2.

Procrastinación

bsntin7fejblya8iuzwsrnnoo1_400Este post era para compartir con ustedes una imagen que encontré navegando por la red, y de paso hablar de la Procrastinación. Debo decir que es algo muy común en la gente de hoy en día, a mi me suele pasar. Para el que no sepa que es la Procastinación, paso a pegarles la definición de Wikipedia:

La procrastinación (del latín: pro, adelante, y crastinus, referente al futuro) es la acción (o hábito) de postergar actividades o situaciones que uno debe atender, por otras situaciones más irrelevantes y agradables.

En mi vida, por ejemplo, suele pasar en muchos ámbitos: Pospongo los writings de inglés para algún día que tenga más ganas, la tarea de la escuela la hago el día antes, pongo poco entusiasmo en ciertas cosas (léase como “no se avanza con el diseño de Lineup“).

Buscando en Google, encontré dos formas de combatir este fenómeno. Otro post bueno del tema es este, con 10 cosas que hay que saber sobre esta “forma de ser”, si se quiere. Espero que le sirva a alguno, yo intentaré poner en práctica lo mencionado en el primero.

De paso, este post se lo dedico a todos los que alguna vez les prometí ayuda y tardé mucho en dársela, a modo de disculpa. Ya se que mucha de la gente no lo va a leer, pero lo que cuenta es la intención,  ¿o no? :)

Nota: Si se ponen a pensar un poco, este post es una forma de procastinar otras cosas :P

April Fool’s en la TV

Nunca me imaginé que fueran a festejar el April Fool’s day en la TV, pero aquí hay prueba de ello. ¡Y hasta trae un RickRoll y todo!

Imagen de previsualización de YouTube

Aquí hay otro video, pobre presentadora, lo que le hacen decir :P

Imagen de previsualización de YouTube

¿Qué les parece? ¿Conocen si esto se celebra en radio, por ejemplo? No tengan miedo y comenten!

Música que me gusta

Como había hecho ya en otra oportunidad, les dejo algunos temas que escucho frecuentemente:

Espero les gusten!

Compiz no arranca luego de usar un monitor externo

Hoy un amigo me contó de un problema que tenía. Teniendo recién instalado Jaunty, Compiz funcionaba perfectamente. Pero luego de haber utilizado un monitor externo, Compiz no arrancaba y se quejaba de que el sistema tenía un rasterizador de software.

Luego de googlear un poco, encontré un thread en UbuntuForums, en el que exponían el mismo problema. La solución es sencilla, hay que editar /etc/X11/xorg.conf y cambiar, dentro de la sección “Screen”, subsección display, el valor de la resolución virtual para que encaje de nuevo con la resolución que estamos usando. Para editar el archivo podemos usar en una consola sudo gedit /etc/X11/xorg.conf (cambiar gedit por otro editor si asi lo desean: nano, geany, kate, …)

Por ejemplo, una configuración errónea para una pantalla de 1366×768 podría decir:

[...]
Section “Screen”
Identifier “Configured Screen Device”
Device “Configured Video Device”
SubSection “Display”
Virtual 2390 768
EndSubSection
EndSection
[...]

Arreglado para esa resolución quedaría:

[...]
Section “Screen”
Identifier “Configured Screen Device”
Device “Configured Video Device”
SubSection “Display”
Virtual 1366 768
EndSubSection
EndSection
[...]

Este problema esta causado porque algunas tarjetas de intel no soportan renderizado 3D en tan altas resoluciones, por lo que se utiliza el renderizador de software y compiz se niega a arrancar. ¡Espero que toda esta explicación le sirva a alguien!