Entre los nuevos atributos de html 5, hay algunos muy importantes como los , , etc.. Pero sin duda, la estrella de este nuevo estándar, es el tag . Este tag, podrá revolucionar el mundo multimedia muy pronto. No obstante, hasta Youtube tiene una versión preparada para desprenderse del flash.

Hasta ahora

El método de visualizar un video web actualmente, es similar a la que muestro en el siguiente código. Mediante el elemento </object>

Con html 5

Con HTML5, además de poder dejar más claro que este contenido es un archivo de formato video, nos permite informar de una alternativa a los usuarios que no posean un navegador compatible o incluso insertando el <object>

<video src=”mirutaalvideo” >formatos alternativos</video>
Si tu navegador acepta html 5, veras el reproductor

Conclusiones

Es un avance, pero parece haber problemas con el que será el códec estándar, parece que finalmente no habrá un códec estándar y cada navegador usara el suyo. Actualmente en firefox, hay que subir videos .ogg, y en webkit .mp4. IE no se ha pronunciado aún.

Con esto sincronizamos todo el directorio remoto de un equipo en el directorio local que queramos.
Util para que compare los dos directorio y solo compie lo que ha sufrido cambios, respetando los permisos del archivo:

rsync -rvlpz root@<host remoto>:/<directorio remoto>/ /<directorio local>/
los parametros rvlpz son para:

-r = recursivo – procesa sub-directorios y archivos encontrado el la ubicación del fuente o SRC.
-v es utilizado para aumentar la verbosidad desplegado. Después, cuando estamos seguro que esta respaldando lo que deseamos, puede quitar el ‘v’. Sigue incluido en este ejemplo porque el proceso esta ejecutado desde una tarea ‘cron’, y prefiero ‘ver’ lo que hizo. Es por cada individuo a decidir.
-l = links (acoplamientos) – cuando los acoplamientos simbólicas (symlinks) se encuentro, recrearlo en el sistema destinaría.
-p = permisos – dice a rsync a fijar los permisos en el destinaría igual que el fuente (SRC).
-z se utiliza para comprimir los datos que serán transferido o copiado, con el resulto que el proceso de copiado se realizo más rápido, porque los datos siendo transferido es más pequeño que el tamaño verdadero.

La mayoría de los proyectos en los que he trabajado, siempre han tenido bases de datos mysql o oracle en su defecto, pero ultimamente estoy trabajando con PostgreSQL. Esta tiene ventajas como Triggers, herencias y demás que son motivos de por si solas para un nuevo artículo. Lo que voy a comentar en este, es que en oracle tenía la posibilidad de hacer una unión externa con el simbolo (+) en los elementos seleccionados.  Así consigo seleccionar los elementos que no tienen un reciproco en otra tabla. Mi duda era como hacer esto tanto en mysql como en postgreSQL aquí la respuesta

SELECT d.departamento, e.empleado
FROM dept d
LEFT JOIN emp e ON e.departamento = d.departamento

Lo que se hace, es invertir las para que la de la “izquierda” (LEFT join) se convierta en la más importante. También, la claúsula WHERE se encuentra eliminada y ahora el criterio de unión está en la claúsula “ON” del LEFT JOIN.

El problema que planteo es el siguiente: tu creas tu layout con tres columnas y luego quieres que tus columnas, aunque dos de ellas no tengan contenido, lleguen siempre hasta la altura de la que más contenido tenga. Normalmente obtienes algo así:

¡No se alargan las columnas como quieres!, es debido a que lo normal, es que las columnas se expandan según el contenido que tengan. Una opción rápida y chapuzas, sería poner un display:block a cada columna con el height deseado. Pero ¿Y si este es el layout general?, ¡entonces tendríamos que cambiarlo a todas nuestras páginas internas!, vamos una locura y algo muy feo..

¿La solución?

Asignar a las tres columnas, un padding bajo muy grande (32768px es el número máximo de pixeles posibles) y a su vez un margin negativo igual de grande. A su vez, deberemos crear un contenedor global que oculte lo que sobra.

#izquierda, #central, #derecha {
padding-bottom: 32768px;
margin-bottom: -32768px
}
#contenedor {overflow: hidden}

Desventajas

• Requiere de un contenedor div extra
• Si vas a usar anclas en la misma página ( <a name=”seccion”></a> ) y este ancla estiviera dentro de esta columna, el contenido que esté antes de ese ancla desaparecerá y permanecerá invisible.
• Me da un poco de rabia no haberlo encontrado antes

Con la llegada de los estándares CSS3, han surgido nuevas opciones para diseñar nuestras páginas. Entre ellas, las más interesantes que encuentro están, las transparencias, los degradados y las esquinas redondeadas.

Voy a hablar de estas últimas, es algo que los diseñadores siempre han conseguido insertando imágenes redondas al borde y listo. Actualmente, y gracias a los estándares css3 también lo podemos realizar mediante código css con estas instrucciones:

border-radius (estándar css)
-moz-border-radius (cuando se trataba de mozilla, aunque desde la versión 3.0 ya lo hacemos con la instrucción anterior)
-webkit-border-radius (safari y chrome)

El problema de hacerlo de este modo, es el de siempre, el maldito Internet Explorer, que ni en su versión 8 implementa estos estándares.
Una solución para tener las esquinas redondeadas en todos los navegadores, incluido Internet Explorer es usar JQuery Corners.
jQuery Corners es un plugin que nos permite realizar esquinas redondeadas de una manera bastante sencilla, sin imágenes o maquetación adicional y engorrosa en el código. Simplemente se define una clase y se aplica a un elemento HTML. Veamos como hacerlo:

• Primero descarga jQuery y jQuery corners y haz el llamado dentro de las etiquetas y :

• Luego define la clase la cuál creará las esquinas redondeadas de la siguiente forma:

• Y por último simplemente aplica la clase a cualquier elemento HTML, como por ejemplo a un típico selector DIV:

Esta es la forma más básica de usar el script aunque posee varias opciones de configuración, como puede ser el radio de curvatura general o para cada una de las esquinas o también podemos aplicar el script a botones de un formulario. Todas estas las podemos consultar en el sitio oficial de jQuery Corners
Es soportado por la mayoría de los navegadores e inclusive por el iPhone.

Links | jQuery – jQuery Corners

Esta es una instrucción sencilla que quería compartir, y es que muchas veces me ha salvado incluso la vida, o por lo menos me ha quitado un dolor de cabeza, puesto que cambiar una palabra en un fichero es fácil, pero cuando se tratan de 100 ficheros…

grep -rlZ 'textoareemplazar' /ruta/ | xargs -r0 perl -pi -e 's/textoareemplazar/textonuevo/g'

Sirve sobre todo en servidores con mucha “morralla histórica” en la que queramos cambiar una frase/instrucción que se repite. Eso si, cuidado con su uso, si reemplazamos algo que no debemos podemos tener un caos!

Aunque no usar videos de youtube para el blog, este video me ha traído muchos recuerdos. Está protagonizado por muchos de los miembros de los Antrifrikis, y comento. Los Antifrikis, en la facultad fueron los eternos rivales de los Sanakas, de donde yo era miembro. Dos buenos grupos de amigos, dos tipos de vidas paralelas y dos equipos de futbol que competían en la Liga Interna de la Facultad de informática.
Ellos estudiaban ITIS, nosotros ITIG, en algunas optativas, como en IAG donde hicimos algunas prácticas en OpenGl muy divertidas. Destaco que esta optativa fue la mejor de todas, tanto en FIG (Fundamentos de Interfaz Gráfica) como en IAG (Informática Gráfica Aplicada) se profundiza mucho en programación y son muy interesantes.

Navegando por YouTube, los he encontrado de casualidad en este video, y la verdad es que es original y muy bueno. Aquí dejo mi granito de arena haciéndolo un poco más público si cabe.

ACTUALIZACION: También salían miembros de los emoticonos, ellos ganaron la liga interna un año. Saludos a Ángel (compañero desde bachillerato y miembro de ese equipo), que crack!.

Link | Prácticas OpenGL

Quien no ha tenido alguna vez que crear una miniatura (Thumbnails), de sus imágenes automáticamente. Una opción puede ser añadirle el tamaño por css, o en la misma etiqueta <img, pero las imagenes se verían mal, puesto que están redimensionadas a tamaño completo.

Una opción muy buena, sin usar php y sin hacerlo manualmente, sería usar JQuery u JThumbs. Mediante el siguiente script tendremos las deseadas miniaturas:

<script type="text/javascript">
$(document).ready(function() {
// aquí realmente hacemos la miniatura
$("a.thumb, img.thumb").jThumb();
// Posicionar imagen (opcional)
$("a.thumb img, img.thumb").jThumbImg();
});
</script>

Lo unico que necesitamos es en enlace previo a nuestro framework favorito jquery:

<script type="text/javascript" src="jquery.js"></script>

Ventajas:

• No sobrecargamos el servidor con otro script php.
• Es un proceso automático.

Desventajas

• La imagen carga entera (aunque visualmente satisfactoria).

Descarga | JQuery - JThumb

Microsoft ha lanzado Oxite, una gestor de contenidos de código abierto (como joomla, wordpress, oscommerce, etc) de producción propia. Las fuentes las podemos conseguir en la web de CodePlex bajo Microsoft Public License.
Este Gestor de Contenidos (GMS), está desarrollado C#, y se puede integrar con algunas herramientas de desarrollo tales como ASP.Net o Visual Studio. Todavía se encuentra en un estado alfa, por lo que por el momento, está destinado todavía a programadores interesados en depurarlo.
Oxite esta pensado para albergar tanto blogs, como sites más complejos como MIX Online, y pese a no estar finalizado, permite a los usuarios ya realizar comentarios, disponer de RSS y también permite a los los webmasters realizar pingbacks y trackbacks. También posee editores WYSIWYG.

Link | Oxite
Descargar | CodePlex – Oxite

Llevo bastante tiempo intentando lograr hacer el efecto de arrastrar y soltar de las cajas de igoogle, hay poquísima información en la red respecto a cómo se consigue crear este efecto, a pesar de que es algo muy interesante a nivel de diseño.

¿Como he conseguido lograr el efecto? La base de todo es la clase prototype que podeis descargar desde ese link. Prototype es un framework hecho en JavaScript que se sirve para ayudar a un desarrollo sencillo y dinámico de aplicaciones web (como cualquier framework) con el uso de técnicas Ajax.
Luego mediante CSS, y definiendo las capas en el init() de javascript (se encuentr todo en el fichero index.html) podremos adaptarlo como queramos.

Enlaces |Demo – Prototype