iJab: chat javascript usando XMPP/Jabber

ByLuis

iJab es una librería javascript que nos permite añadir chat en nuestras aplicaciones web, con la característica que usa XMPP/Jabber para realizar las comunicaciones.

Entre las características encontramos:

  • Basado en el protocolo XMPP: lo cual permite usar servidores basados en ese protocolo
  • Soporte para MSN y AIM, añadiendo transports al servidor XMPP
  • Totalmente Javascript
  • Compatible con Firefox, IE, Chrome y Safari
  • Themes
  • Modos de aplicación: stant-alone, web chat y live
  • Sin pop-ups
  • Notificaciones de nuevos mensajes
  • Sonido
  • Múltiples usuarios en el chat (MUC)
  • Búsqueda de usuarios
  • Administración: permite añadir y borrar usuarios y administrar grupos
  • Smileys

iJab

Vía / WebAppers

Similar Posts

|

Laboratorio: marcadores en los vídeos de YouTube

ByLuis

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.

Ejemplo

“Se leer pero no tan de cerca”

“Segundas partes nunca fueron buenas”

Evita el uso de eval en Javascript

ByLuis

Buen truco, o mejor dicho, implementación, para crear un objeto en Javascript en el que las funciones son referenciadas mediante un string. Puede ser muy útil cuando tenemos en un string el nombre de la función que queremos ejecutar, pero no queremos usar eval.

Para ello lo que creamos es un array de funciones, y el array, implementado como una tabla hash (los indices son strings), hace referencia a una función.

var obj = {
funciones : new Array(),
creaMetodo : function(nombre, fn) {
this.funciones[nombre] = fn;
},
ini : function() {
this.creaMetodo("prueba", function(){alert(1);});
}
}

Ahora podremos referenciar a la función ejecutando:

obj.funciones['prueba']();

Vía / Scriptia

CodeMirror: consola Javascript para tus páginas web

ByLuis

CodeMirror es una librería realizada con MochiKit que nos permite incluir una consola de Javascript en nuestras aplicaciones web. Un ejemplo perfecto para el funcionamiento es el libro de Javascript online Eloquent Javascript, el cual muestra ejemplos javascript y usa la consola para poder ejecutarlos.

codemirror.png

Nos muestra el código parseado y resaltado, además nos permite modificarlo y ejecutarlo, viendo los resultados en una ventana diferente.

Además es sencillo de utilizar:

var editor = new CodeMirror(CodeMirror.replace("inputfield"), {
parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
path: "lib/codemirror/",
stylesheet: "lib/codemirror/jscolors.css"
});

CodeMirror

Hapi.js + Vue.js avatar

Hapi.js + Vue.js avatar

ByLuis

En esta nueva versión se ha añadido el poder subir el avatar, recortando la imagen usando la librería Cropper.js y para ello también se usará Vuex para guardar el avatar y que se actualice en toda la app.

Para subir la imagen se usará el siguiente método.

this.cropper
	.getCroppedCanvas( this.outputOptions )
	.toBlob( blob => {
		new ApiFectch()
			.updateAvatar( blob )
			.then( response => {
				if ( response.response ) {
					success( response.message );
					this.avatar = avatar + '?cache=' + new Date();
					this.$store.commit( `user/${ USER_SET_AVATAR }`, new User().getAvatarURL( userData.username ) + '?cache=' + ( new Date() ) );
				} else {
					error( response.message );
				}
			} );
	} );

Para manejar todo habrá que usar Vuex con módulos, por ejemplo, para el módulo user:

import { USER_SET_AVATAR, USER_SET_USERNAME } from '../mutation-types';

const state = {
	avatar: null,
	username: null,
};

const mutations = {
	/**
	 * Sets avatar
	 *
	 * @param {Object} mutationState Vuex state.
	 * @param {String} avatar Avatar string.
	 */
	[ USER_SET_AVATAR ]( mutationState, avatar ) {
		mutationState.avatar = avatar;
	},

	/**
	 * Sets username
	 *
	 * @param {Object} mutationState Vuex state.
	 * @param {String} username User name.
	 */
	[ USER_SET_USERNAME ]( mutationState, username ) {
		mutationState.username = username;
	},
};

export default {
	namespaced: true,
	state,
	mutations,
};

Aquí está el código

Manejar y generar excepciones en Javascript

ByLuis

Los que hemos trabajado con Java estamos acostumbrados a tratar y lanzar excepciones para controlar los errores, algo que en Javascript no es muy común, pero en librerías algo elaboradas podría ser muy útil.

// Clases de errores
function DivisionByZeroError() {
    this.name = "DivisionByZeroError";
}
function DivisionByStringError() {
    this.name = "DivisionByStringError";
}
// Funcion que devuelve un error
function divisionCanFail(a, b) {
    if (b == 0) {
        throw new DivisionByZeroError();
    }
    if (typeof b == "string") {
        throw new DivisionByStringError();
    }
    return a / b;
}
// Funcion de test
function decoratedDivision(a, b) {
    try {
        alert(divisionCanFail(a, b));
    } catch (error if (error.name == "DivisionByZeroError")) {
        alert("A division by zero...");
        alert("Exception class: " + error.name);
    } catch (error if (error.name == "DivisionByStringError")) {
        alert("Exception class: " + error.name);
    }
}

decoratedDivision(5, "isThisANumber?!");
decoratedDivision(5, 0);

Exceptional JavaScript

Guía de estilos de Javascript de Google

ByLuis

Google tiene una guía de estilos para programar en Javascript. Yo no soy muy partidario de ello, ya que cada cual programe como quiera siempre que sea código legible, es decir, ¿por qué usar variables con nombres así: nombreVariable y no así: nombre_variable?. Está claro que en un proyecto o una empresa sí tiene sentido usar guías de estilo, pero que una guía de estilo sea generalizada, no le veo sentido.

De todas formas los consejos están bastante bien y ante la duda de cómo hacerlo, podemos echarle un vistazo a cómo lo hacen en Google. Claro, que luego lo ofuscan y no hay quién entienda sus librerías.

Google JavaScript Style Guide

Vía / DZone

2 Comments

  1. una pregunta amigo, sabes como lo instalo en mi pagina web?
    e buscado algun manual pero no lo encuentro.
    saludos!!

Comments are closed.