La verdad es que Firefox4 está de lujo, y las demos que ofrece Mozilla son increíbles. De una de ellas he sacado cómo hacer clipping en vídeos usando HTML5 y la posibilidad de incrustar SVG (sólo funciona en Firefox4).
El método es sencillo, tengo un SVG que muestra el contorno y los botones de play y pausa, además tiene un clipPath que se usará para el estilo clip-path del vídeo:
SVG
Vídeo
Javascript
var play = document.getElementById('play');
var pause = document.getElementById('pause');
var video = document.getElementById('video');
play.addEventListener('click', function() {
play.style.display = 'none';
pause.style.display = 'block';
video.play();
}, true);
pause.addEventListener('click', function() {
play.style.display = 'block';
pause.style.display = 'none';
video.pause();
}, true);
video.addEventListener("ended", function() {
play.style.display = 'block';
pause.style.display = 'none';
video.pause();
}, true);
El vídeo es el mismo que el de la demo de Mozilla, he puesto el borde semi-transparente para que se vea el clipping como va.
Mientras se sigue con el desarrollo de la versión 3 de Firefox, podemos ir viendo que novedades traerá la versión 1.8 de Javascript. Las novedades son muy interesantes, pero creo que necesitarán de un cambio de modo de pensar en Javascript, ya que es algo a lo que no estamos acostumbrados.
Notación Lambda
La notación Lambda nos permite declarar funciones que devuelvan datos sin necesidad de llaves ({..}), ni de devolver directamente el resultado con return.
Por ejemplo, la siguiente función:
function(x) { return x * x; }
pasarÃa a ser:
function(x) x * x
Generador de expresiones
Existente ya en Phyton, nos permite generar expresiones como arrays o matrices de forma rápida y elegante. Para una explicación con un poco de profundidad, el autor del artÃculo usa un solucionador de Sudokus para explicarnos paso a paso cómo funcionan. Quizás un ejemplo más sencillo sea el siguiente:
// Crea un array de 100 posiciones rellenas con cero
[ 0 for ( i in 100 ) ]
// Crea una matriz identidad de 10x10
[[ i == j ? 1 : 0 for ( i in 10 ) ] for ( j in 10 )]
Permite reducir iterativamente un array a un solo valor usando una función llamada de retorno.
La nomenclatura serÃa de la siguiente forma:
miArray.reduce( fn [, val_inicial] );
// La función serÃa de la siguiente manera
miArray.reduce(function(ultimo_valor, valor_actual){
return ultimo_valor + valor_actual;
});
Si combinamos los dos puntos anteriores, podemos obtener la suma de los cien primeros números de la siguiente manera:
Leyendo una entrada de Korsarios.net sobre la lista de países en SQL, recordé que no hace mucho yo también me tuve que crear una lista parecida, pero esta vez de idiomas. Por eso hemos pensado que no estaría mal ofrecer una serie de recursos sobre idiomas y países, que podamos usar en nuestras páginas web.
Suele ser muy útil cuando queremos mostrar un desplegable con los todos los países que existen. Existe el estándar ISO 3166 para definir los países y sus subdivisiones, codificados mediante dos letras, tres letras o de forma numérica.
También puede ser necesario disponer la lista de países en la base de datos, para eso nada mejor que lo que nos ofrece Korsarios.net, las sentencias sql para la lista de países en español y en inglés.
En otras ocasiones puede que necesitemos ir a distintas páginas según el idioma o país desde dónde se visite la página. El idioma se puede detectar mediante PHP o Javascript. Aunque el idioma no siempre es siempre lo más característico, porque puede tratarse de algo específico del país y no del idioma (por ejemplo, una tienda). Para ello lo mejor es detectar el país según la IP, habiendo dos formas, mediante acceso a BD o sin acceso a BD.
En el caso de que querer la lista de idiomas, tendremos que tener en cuenta el ISO 639, codificado con dos letras y tres letras. Como no, siempre es bueno también tener todos los datos de los idiomas en la BD, en este caso somos nosotros quienes os ponemos en disposición el sql necesario: Idiomas sql
Ahora solo falta crear el controlador para las rutas de usuarios, dos en este caso:
GET /user/[user] para recuperar un usuario
PUT /user para crear un nuevo usuario
Lógicamente aún no hay nada de autenticación, por lo que cualquiera puede crear un usuario realizando una llamada PUT a la URL indicando userName, email y password.
Para comprobar la validez de los datos introducidos, usaremos joi. Usando las opciones de la ruta, indicaremos las reglas que deberá cumplir cada parámetro introducido. Así, para recuperar un usuario, se comprobará que user sea string, alfanumérico y que tenga una longitud de 3 a 20 caracteres:
Por último mostrar el código para crear un nuevo usuario. Primero se comprueba si existe un usuario con ese nickname o email. Si es así, se devuelve error usando boom, si no, se genera la contraseña encriptada (aquí no me he molestado mucho en ello, ya lo haré más adelante), y se crea el usuario usando el método create de moongose:
Frame is a modular CSS framework that supports: Layout, Typography, Forms, Code, Table, Reset, and Print styling. It is HTML5 compatible, and provides default styles and support for HTML5 elements. Frame is accompanied by an online tool that allows you to easily generate your own build (in case you don’t need to use all the features). …
MooMonth es un calendario para MooTools que nos permite ver en nuestra aplicación los meses y las tareas o anotaciones de cada dÃa.
Altamente configurable, tiene efectos curiosos como las transacciones entre meses o la ampliación de un dÃa del mes. Aún está en fase alpha, pero por ahora tiene muy buena pinta. MooMonth