AnythingSlider es un plugin jQuery que permite crear slides con cualquier elemento HTML. Permite ir hacia adelante y hacia atrás, enlaces a posiciones en concreto, autoplay, vueltas infinatas, … AnythingSlider jQuery Plugin
Una de las cosas que diferencia a YouTube de los demás es su API, la cual nos permite trabajar con los vídeos de forma muy sencilla. Y algo que echo en falta cuando me pasan videos de YouTube, ya sea en la propia web o en un videoblog, es tener que esperar a que llegue el momento destacado que querían que viera o tener que “jugar” con el controlador hasta que doy con el tiempo adecuado.
Por eso se me ha ocurrido que mediante la API se podría evitar esta situación facilmente, tan solo habría que indicar mediante un anchor la posición que queremos que se cargue el vídeo, ya sea mediante enlaces en la propia web o mediante la propia URL.
Se trata de un script muy sencillo, el cual he realizado sin frameworks como jQuery, porque a parte de intentar no olvidar el javascript normal, tampoco era necesario meterle jQuery o parecido. Eso sí, he utilizado swfobject porque es más sencillo trabajar con esta librería.
El script consta de dos partes: modificar los enlaces con anchors a partes del vídeo y acceder a una posición concreta del vídeo si se indica en la URL. Para ello es necesaria la función onYouTubePlayerReady, que es la que se ejecuta cuando el player de YouTube se carga y la API de javascript está activada.
var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/AaO1FzE6J9I&border=0&enablejsapi=1&playerapiid=ytplayer",
"ytapiplayer", "425", "344", "8", null, null, params, atts);
function onYouTubePlayerReady() {
// Calcula los segundos de un tiempo
var segundos = function(tiempo) {
var fact = 1;
var segs = 0;
for(var j=tiempo.length-1; j>=0; j--) {
segs += tiempo[j]*fact;
fact *= 60;
}
return segs;
}
// Modifico los anchors del video
var enlaces = document.getElementById('marcadores').getElementsByTagName('a');
for(var i=0; i<enlaces.length; i++) {
enlaces[i].addEventListener('click', function() {
var tiempo=this.href.substring(this.href.indexOf('#')+1).split(':');
var player = document.getElementById('myytplayer');
player.seekTo(segundos(tiempo), true);
player.playVideo();
return false;
}, true);
}
// Accedo al tiempo específico de la URL
var href = document.location.href;
if ((pos = href.indexOf('#')+1)) {
var player = document.getElementById('myytplayer');
player.seekTo(segundos(href.substring(pos).split(':')));
player.playVideo();
}
}
El formato del marcador tiene que ser #HH:MM:SS o #MM:SS o #SS
Yo creo que este script puede ser muy útil para los videoblogs para marcar momentos específicos y para que los visitantes puedan enviar a sus amigos los momentos que más le interesan.
Últimamente hablo mucho de jQuery, y no es para menos, ya que este framework de Javascript es muy bueno y la gente realiza grandes plugins que nos ayudan en nuestros desarrollos. En este caso se trata de varios consejos que nos serán muy útiles a la hora de desarrollar:
Carga la librería desde Google Code
Almacena en variables los selectors que vayas a usar en varias ocasiones
Evita la manipulación DOM lo máximo que puedas, es mejor realizar una llamada “gorda” que varias pequeñas
Usa preferiblemente IDs en vez de nombres de clase cuando realices búsquedas
Realiza la captura de eventos correctamente, muchas capturas suele ser ineficiente
Usa los nombres de clase para guardar el estado de un objeto
Incluso mejor que el anterior, usa el método data() para guardar datos en un objeto
Aprende a crear tus propios selectores
Usa noConflict() para renombrar el objeto jQuery y no tener problemas con otras librerías
Aprende a controlar cuando se cargan las imágenes
Usa .lenght en un selector para saber si un objeto existe
Realmente definir en el título el experimento javascript que han realizado en Dragon Labs es complicado. Se trata de un efecto de luces, glow, colores en un formulario de contacto (o cualquier otra capa). El usuario verá cómo el contorno de la capa cambia de color por zonas y varia la intensidad de la “luz”.
El efecto es expectacular, pero quizás haya que mejorarlo un poco, ya que entre otras cosas para crear el efecto de colores, usan una imagen de 133k de un tamaño de 3000×900. Admin panel demo de Dragon Labs
JS Bin es una aplicación que nos permite crear nuestros scripts y testearlos o hacerles debug de forma colaborativa. Su interfaz es muy sencilla, consta de tres pestañas: javascript, el html en el que se incluye el javascript y la salida del HTML y el Javascript.
Además, permite añadir librerías javascript con jQuery o YUI, y exportar el trabajo a una URL propia.
Algo bastante importante en un proyecto es la configuración y cómo se gestiona. Para facilitar la gestión usaremos dos librerías dotenv y confidence, la primera permite usar ficheros .env en nuestro entorno de desarrollo para simular variables de entorno. La segunda nos ayudará a recuperar las variables de un objeto permitiendo usar filtros, por ejemplo según de las variables de entorno.
Instalaremos los paquetes:
npm i dotenv
npm i confidence
Confidence necesitará un criterio que nos permitirá obtener distintos resultados según su valor. Imaginemos que tenemos el siguiente criterio:
Si queremos acceder al nivel de debug, al ser env igual a development, obtendíamos INFO.
Vale, ¿y cómo lo usamos en el proyecto? Primero creamos una carpeta config, donde crearemos el fichero index.js que tendrá toda la configuración del servidor:
const Confidence = require( 'confidence' );
const Dotenv = require( 'dotenv' );
Dotenv.config( { silent: true } );
// NODE_ENV is used in package.json for running development or production environmentconst criteria = {
env: process.env.NODE_ENV,
};
const config = {
port: 3001,
};
const store = new Confidence.Store( config );
exports.get = function( key ) {
return store.get( key, criteria );
};
exports.meta = function( key ) {
return store.meta( key, criteria );
};
Dotenv simplemente se usa para obtener de las variables de entorno de servidor el valor de NODE_ENV. Por ahora solo tendremos la variable port, pero ya estará preparado para poder añadir otras variables de configuración posteriormente.
Creamos un store de Confidence y exportaremos los métodos get y meta.
Haremos algo parecido para el manifest necesario para Glue, creando el fichero manifest.js dentro del directorio config:
Al iniciar mi blog, me demoré casi dos meses investigando para poder poner como Dios manda un carrusel,con herramientas como esta hubiera sido mas fácil.