Stanford Javascript Crypto Library es una librería Javascript que permite encriptar y desencriptar de forma muy segura, potente, rápida, sencilla, ligera y compatible con navegadores.
Usa el algoritmo estándar AES de 128, 192 o 256 bits, la función hash SHA256, el código de autenticación HMAC, PBKDF2, y los modos CCM y OCB… vamos, todo muy seguro.
jQPie es una interfaz ligera en PHP para jQuery, permitiendo muchos modos de interactuación.
A parte de ser ligero, maneja XML, HTML y JSON y tiene una API sencilla. Incluye un plugin para autocompletado, y está pensado para ofrecer otros plugins usar o como ejemplos.
Con jQPie podemos obtener y procesar datos de forma sencilla desde PHP, incluir código HTML generado mediante PHP en elementos de la página, llamar a funciones PHP directamente desde las páginas y más funcionalidades interesantes. jQPie
VÃa / PHPDeveloper.org
FancyZoom es un script que nos permite realizar zoom de nuestras imágenes mediante Javascript. Hace aparecer la imagen mediante un zoom progresivo y transparencia. Además muestra el title del enlace en un recuadro.
Las imágenes ser precargan automáticamente cuando el ratón pasa por encima de la imagen, por lo que se reduce la demora en la persentación. El único fallo que encuentro es que hay que añadir un onload en el body, pero bueno, podemos cambiar la librería para que se haga automáticamente. FancyZoom
Interesante javascript que nos permite crear PDFs sin necesidad de aplicaciones en el servidor, sino usando únicamente una librería PDF. Su uso es muy sencillo, devolviendo una URL con Content-type y codificada en Base64:
var doc = new jsPDF();
doc.setFontSize(22);
doc.text(20, 20, 'This is a title');
doc.setFontSize(16);
doc.text(20, 30, 'This is some normal sized text underneath.');
// Output as Data URI
doc.output('datauri');
A mí en Firefox no me ha funcionado, pero en Chrome sí.
En algunas ocasiones es necesario añadir contenido al calendario que te ofrecer el datepicker de jQuery UI, por ejemplo añadir un combo que indice “horario mañanas/tarde”. Para conseguirlo será necesario ‘toquetear’ un poco el objeto jQuery.datepicker.
Tendremos que hacer dos cosas: primero deberemos evitar que cuando se selecciona un día se cierre automáticamente el popup con el calendario y después tendremos que modificar el HTML que devuelve la clase.
Para evitar el auto-cierre tenemos que añadir la opción showButtonPanel ya que nos ofrecerá el botón “Close” que nos permitirá cerrar el popup cuando hayamos indicado todos los campos necesarios. También es necesario modificar la función jQuery.datepicker._selectDate tal y como lo indican en StackOverflow:
// Añadimos datepicker al input que queremos
jQuery('.fecha')
.datepicker({
showButtonPanel: true,
dateFormat: "DD, d MM, yy"
});
// Modificamos la funcion _selectDate
jQuery.datepicker._selectDateOverload = jQuery.datepicker._selectDate;
jQuery.datepicker._selectDate = function(id, dateStr) {
var target = jQuery(id);
var inst = this._getInst(target[0]);
inst.inline = true;
jQuery.datepicker._selectDateOverload(id, dateStr);
inst.inline = false;
this._updateDatepicker(inst);
// Usar el .html() para luego usar el .text() es porque si usas el regional de datepicker, te salen entidades html en vez de letras acentuadas
// Se le añade el valor del nuevo campo select que hemos incluido
target.val(jQuery('').html(dateStr).text()+' @ '+jQuery('#horario').val());
}
Bien, ya tenemos el evento onSelect modificado, ahora nos falta cambiar el HTML que se dibuja, para ello modificaremos la función jQuery.datepicker._generateHTML:
jQuery.datepicker._generateHTMLExtended = jQuery.datepicker._generateHTML;
jQuery.datepicker._generateHTML = function(inst) {
var html = jQuery.datepicker._generateHTMLExtended(inst);
var div = jQuery('').html(html);
div.find('table:first').after('
Horario:
');
return div.html();
}
// Incluimos tambien un evento para que cuando se seleccione el horario, se modifique el campo input
jQuery('#horario').live('change', function() {
var $obj = jQuery('.fecha');
$obj.val($obj.val().replace(/@.*/, '@ '+jQuery(this).val()));
});
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:
No soy muy amigo de los CAPTCHAS (aunque son necesarios) y menos aún si no son accesibles, pero no quita que este captcha sea interesante y que a alguien le pueda gustar.
El CAPTCHA funciona de la siguiente manera: aparece unas imágenes aleatorias y unas instrucciones que indican que una de las imágenes debes ponerlo en una capa. Ajax Fancy Captcha – jQuery plugin
Vía / WebAppers
One Comment
Comments are closed.