iUI: librería Javascript/CSS para emular iPhone

ByLuis July 31, 2007

iUI es una librerÃa Javascript/CSS creada por Joe Hewitt, co-fundador de Firefox y creador de Firebug, que permite emular el lenguaje nativo visual del iPhone.

Entre las caracterÃsticas que nos ofrece encontramos:

Controles UI
Enlaces a pÃ¡ginas externas vÃa Ajax
EnvÃo de formularios vÃa Ajax
Soporte para historial del navegador

iUI

VÃa / Ajaxline

Desarrollo web | How to | Javascript | PHP

Rotar imágenes aleatoriamente

ByLuis April 5, 2006

Vamos con otra situación típica que nos solemos encontrar en el momento de desarrollar una web: rotar imágenes al azar cada vez que ingresamos o actualizamos una URL, y de la que José Román escribía hace unos días.

Lo probaremos mediante 3 casos en Javascript y mediante un script en el servidor (PHP, JSP, ASP, …). A parte, se pueden hacer distintos usos de ellas, según sea nuestra forma de programar o la imaginación o necesidades que tengamos.

Javascript | Quicklinks

PaintbrushJS – Browser Based Image Processing Library

ByLuis August 20, 2010

PaintbrushJS is a lightweight, browser-based image processing library that can apply various visual filters to images within a web page.You use it by applying a class to an element on the page and setting a few parameters with some extra HTML attributes. If the element is an img or it has a background-image set in your CSS, PaintbrushJS will create …

Post original

Javascript

FancyBox: zoom de imágenes mediante Javascript

ByLuis April 3, 2008

Buen script creado en jQuery que permite añadir zoom a imágenes. Está testado en IE6, IE7 y Firefox. Entre las características muestra en una ventana lightbox la imagen en un tamaño mayor, pudiendo ajustarse al tamaño de la ventana y mostrando un marco alrededor de la imagen. Además permite mostrar un grupo de imágenes de forma común.

Un ejemplo de uso sería el siguiente:

$(function() {
$("div#test_zone a").fancybox();
});

FancyBox

Desarrollo web | Javascript | Laboratorio | XHTML

Laboratorio: indicador de calidad de password

ByLuis July 16, 2007

Cuando un usuario se registra en una aplicaciÃ³n web, suele haber casos que cuando se estÃ¡ introduciendo la contraseÃ±a, el sistema indica si la password cumple unos mÃnimos de seguridad o no. En algunas ocasiones suele darnos solo un aviso informativo, pero en otros o cumple todos los requisitos o no admite la contraseÃ±a.

En este caso vamos a crear un script que modificarÃ¡ los input password para aÃ±adirle una funcionalidad que indique la calidad de la contraseÃ±a que se va introduciendo.

El script aÃ±adirÃ¡ el evento de control de tecla pulsada (onkeyup) y realizarÃ¡ una serie de comprobaciones para conocer la calidad de la contraseÃ±a, una contraseÃ±a vÃ¡lida serÃ¡ la que cumpla todas las condiciones. Las condiciones que incluimos en el ejemplo son las tÃpicas que suelen pedir: que existan mayÃºsculas y minÃºsculas, algÃºn nÃºmero, caracteres especiales y una longitud mayor de 6.

Para chequear cada condiciÃ³n usaremos expresiones regulares y llevaremos un contador para saber cuÃ¡ntas se cumplen. Cuando hayamos finalizado las comprobaciones calcularemos el porcentaje de calidad y lo indicaremos con una barra de progreso. Esta barra se crecerÃ¡ segÃºn aumente la calidad de la contraseÃ±a e irÃ¡ cambiando de color desde un color rojo para la poca calidad hasta un color verde que indique mucha calidad.

El efecto de barra de progreso lo vamos a realizar de la siguiente manera, tenemos una imagen que va a funcionar como mÃ¡scara, tendrÃ¡ dos partes, de igual tamaÃ±o y cada parte del mismo tamaÃ±o que el ancho del input. Cada mitad tendrÃ¡ una funcionalidad, la mitad de la derecha servirÃ¡ para ocultar y la de la izquierda para mostrar, segÃºn queramos que se vaya mostrando la barra de progreso, iremos desplazando el fondo hacia la derecha para que se vaya viendo la barra de progreso. Inicialmente la lÃnea discontinua de la imagen que mostramos como ejemplo estarÃ¡ en el lado izquierdo del input.

El cÃ³digo serÃa el siguiente:

var __PASSWORD__ = {
colorKO: [255, 0, 0], // Color de contraseÃ±a no vÃ¡lida
color50: [127, 127, 0], // Color para el 50% para que no haya un cambio tan brusco
colorOK: [0, 255, 0], // Color de contraseÃ±a vÃ¡lida
width: 150,
// AÃ±ade el evento onkeyup a la caja input:password y le aÃ±ade el evento checkpassword
init: function() {
var inputs = document.getElementsByTagName("INPUT");
for (var i=0; i<inputs.length; i++) {
if (inputs[i].type == 'password') {
inputs[i].addEventListener("keyup", __PASSWORD__.checkPassword, false);
inputs[i].className = 'password';
}
}
},
// Obtiene el color porcentual entre un color inicial y otro final, teniendo en cuenta un color intermedio
getColor: function(porc) {
var color = new Array();
var color1 = porc < 50? __PASSWORD__.colorKO:__PASSWORD__.color50;
var color2 = porc < 50? __PASSWORD__.color50:__PASSWORD__.colorOK;
color[0] = parseInt(color1[0]-((color1[0] -color2[0])*porc/100));
color[1] = parseInt(color1[1]-((color1[1] -color2[1])*porc/100));
color[2] = parseInt(color1[2]-((color1[2] -color2[2])*porc/100));
return color;
},
// Comprueba la calidad de la contraseÃ±a
checkPassword: function() {
var valor = this.value;
var cont = 0;
var comprobaciones = new Array(
/[A-Z]/, // mayÃºsculas
/[a-z]/, // minÃºsculas
/\d/,    // nÃºmeros
/.{6}/,  // mÃ¡s de 6 caracteres
/(\s|\\|\/|!|"|Â·|\$|%|&|\(|\)|=|\?|Â¿|\||@|#|Â¬|â‚¬|\^|`|\[|\]|\+|\*|Â¨|Â´|\{|\}|\-|_|\.|:|,|;|>|<)/ // Caracteres especiales
);
// Miro todas las condiciones
for (var i=0; i<comprobaciones.length; i++) {
if (valor.match(comprobaciones[i])) {
cont++;
}
}
// Valores posibles en caso de 5 condiciones: 0, 20, 40, 60, 80, 100, pero el valor mÃnimo tiene que ser 20 para que coincida con el colorKO, ya que si no, al pulsar una tecla ya cambia de color a un paso colorKO+1
var porc = parseInt((cont*100/(comprobaciones.length-1))-(1/(comprobaciones.length-1)*100));
// Desplazo el background tratÃ¡ndolo como una mÃ¡scara
this.style.backgroundPosition = (parseInt(cont*__PASSWORD__.width/comprobaciones.length)-(__PASSWORD__.width))+"px 0px";
// Cambio el color de fondo
var color = __PASSWORD__.getColor(porc);
if (porc < 0) {
this.style.backgroundColor = '';
} else {
this.style.backgroundColor = 'rgb('+color[0]+', '+color[1]+', '+color[2]+')';
}
}
};
window.addEventListener("load", function() {__PASSWORD__.init();}, false);

Demo

Javascript

Select Box Factory: combos con diseño y funcionalidades

ByLuis September 9, 2008

Select Box Factory es un script que nos permite añadir combos en nuestra página web con un estilo propio y que además añade funcionalidades:

Usa divs en vez de options
Añade funcionalidades al desplegable
Los contenedores pueden contener lo que necesitemos
Las opciones pueden estar activas o inactivas
Los estilos se pueden modificar con facilidad
Distintos tipos de combos
Filtros

Select Box Factory

Javascript

Hapi.js+Vue.js reorganizar la configuración del servidor

ByLuis April 29, 2019April 29, 2019

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:

const criteria = {
	env: 'development',
};

Y estos datos de configuración:

{
	debugLevel: {
		$filter: 'env',
		development: INFO,
		production: ERROR,
	},
}

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 environment
const 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:

const Confidence = require( 'confidence' );
const Config = require( './index' );

const criteria = {
	env: process.env.NODE_ENV,
};

const manifest = {
	server: {
		port: Config.get( '/port' ),
	},
};

const store = new Confidence.Store( manifest );

exports.get = function( key ) {
	return store.get( key, criteria );
};

exports.meta = function( key ) {
	return store.meta( key, criteria );
};

Como se puede apreciar fácilmente obtenemos el valor de port de forma bastante simple.

Y por último modificamos el fichero index.js para hacer eso de estos nuevos ficheros:

const Glue = require( '@hapi/glue' );
const Manifest = require( './config/manifest' );

const options = {
	relativeTo: __dirname,
};

const startServer = async function() {
	try {
		const manifest = Manifest.get( '/' );
		const server = await Glue.compose( manifest, options );
		await server.start();
		console.log( 'hapi days!' ); // eslint-disable-line
	} catch ( err ) {
		console.error( err ); // eslint-disable-line
		process.exit( 1 );
	}
};

startServer();

Puedes bajarte el código aquí

Similar Posts