Laboratorio: control input selector para HTML

ByLuis August 29, 2006

Uno de los controles que he visto en alguna aplicaciÃ³n (sobre todo de tipo editor grÃ¡fico), es aquella en la que el valor numÃ©rico de una caja de texto se puede modificar mediante botones y mediante una barra de progreso.

La versiÃ³n que he realizado modifica los input type=”text” que haya en la pÃ¡gina que tengan el atributo rel el valor selector[min,max], siendo min y max los valores mÃnimos y mÃ¡ximos que permite el controlador.

Entre otras cosas, el controlador permite modificar el valor mediante la forma tradicional (usando la caja de texto), usando las flechas, pinchando en la barra de progreso o haciendo drag en la misma barra.

Lo mÃ¡s complicado es la creaciÃ³n de los elementos que forman el control (sobre todo que en IE aparezca correctamente). Tenemos que coger el input e introducir la barra de progreso antes de este y los botones despuÃ©s.

La barra de progreso consta de dos capas, una que tan solo es el recuadro y que es la que captura los eventos y otra que se haya debajo de esta y que es la que cambia de ancho para mostrar el progreso. Â¿Por quÃ© la barra tiene que estar antes que la caja de texto?, porque le pondremos el position con valor absolute y asÃ la caja de texto y la barra empezarÃ¡n en la misma posiciÃ³n horizontal, y tan solo tendremos que bajar la barra para que aparezca debajo de la caja de texto.

La barra de progreso tendrÃ¡ en cuenta cuatro eventos: onclick para cambiar el valor de la barra cuando se pinche sobre ella, tomando el ancho correspondiente teniendo en cuenta que el ancho total de la barra se divide entre el nÃºmero de valores posibles (max-min); y tambiÃ©n controlarÃ¡ los eventos onmousedown, onmouseup y onmousemove para conseguir cambiar el progreso de la barra arrastrando el ratÃ³n sobre ella.

Las flechas para aumentar o disminuir el valor no tienen mucha complicaciÃ³n, su colocaciÃ³n una sobre otra se realiza mediante estilos. La Ãºnica cosa un tanto “extraÃ±a”, es que los enlaces contienen imagenes transparentes, y que las flechas se muestran mediante el background del enlace, cambiando de color
de la flecha mediante el hover y la parte del background que queremos mostrar. Supongo que se podrÃa hacer de forma mÃ¡s limpia, pero esta es la que se me ha ocurrido y asÃ se puede controlar todo por estilos.

Cuando se cambia el valor de la caja de texto manualmente se actualiza la barra de progreso, cuando se usan las flechas se actualiza la barra de progreso y el valor de la caja de texto y cuando se cambia el valor de la barra de progreso se actualiza el valor de la caja de texto.

Los estilos necesarios son los siguientes:

span.contenedor-controles-input-selector {
position: absolute;
}
span.contenedor-input-selector {
position: relative;
width: 10px;
height: 12px;
background: red;
}
a.aumentar-input-selector {
position: relative;
top: 5px;
margin-left: 2px;
width: 10px;
height: 6px;
padding: 0px;
font-size: 1px;
margin-right: 4px;
}
a.aumentar-input-selector img {
width: 10px;
height: 6px;
background: url(aumentar.gif) no-repeat;
padding: 0px;
margin: 0px;
border: 0px;
vertical-align: top;
}
a.aumentar-input-selector:hover img {
background: url(aumentar.gif) no-repeat 0px -6px;
}
a.disminuir-input-selector {
position: absolute;
margin-top: 13px;
margin-left: -14px;
}
a.disminuir-input-selector img {
width: 10px;
height: 6px;
background: url(disminuir.gif) no-repeat;
padding: 0px;
margin: 0px;
border: 0px;
vertical-align: top;
}
a.disminuir-input-selector:hover img {
background: url(disminuir.gif) no-repeat 0px -6px;
}
div.barra-input-selector {
top: 0px;
height: 2px;
border: 1px solid #69AADD;
}
div.progreso-input-selector {
height: 2px;
border: 1px;
background: #69AADD;
font-size: 1px; /* IE necesita esto para que tenga el tamaÃ±o correcto */
}

El cÃ³digo javascript necesario es el siguiente:

var ancho_minimo = "20px"; // Del input type="text"
// Navegadores
var _IE_ = navigator.appName.toLowerCase().indexOf("microsoft") > -1;
var _MOZILLA_ = navigator.appName.toLowerCase().indexOf("netscape") > -1;
// Selecciona todos los input:text y les aÃ±ade
// un control para modificar el valor numÃ©rico
// que consiste en flechas arriba/abajo y
// una barra
function modificar_input_selector(evt) {
if (document.getElementsByTagName) {
// Obtengo los elementos INPUT
var objs = document.getElementsByTagName("INPUT");
// Los modifico para incluir el selector a los que tenga el atributo rel = "selector"
for (var i=0; i<objs.length; i++) {
if (objs[i].getAttribute("rel") != null &&
objs[i].getAttribute("rel").toLowerCase().match(/^selector(\[\-?\s*\d+\s*,\s*\-?\s*\d+\])?$/) &&
objs[i].type.toLowerCase() == "text") {
// Creamos id si no lo tiene
if (!objs[i].id) {
objs[i].id = Math.random();
}
// Si no hay ancho lo ponemos
if (!objs[i].style.width) {
objs[i].style.width = ancho_minimo;
}
// Hayamos el mÃ¡ximo y el mÃnimo
var params = objs[i].getAttribute("rel").replace(/(^selector\[)|(\]$)/g, "").split(",");
var min = parseInt(params[0]);
var max = parseInt(params[1]);
if (max<min) {
max = min;
}
objs[i].max = max;
objs[i].min = min;
// Le aÃ±adimos al objeto input el evento onchange
objs[i].onchange = function() {
if (!isNaN(parseInt(this.value))) {
// Si es numÃ©rico
if (parseInt(this.value) < this.min) {
// Si es mÃ¡s pequeÃ±o que el mÃnimo toma este valor
this.value = this.min;
} else if (parseInt(this.value) > this.max) {
this.value = this.max;
}
} else {
// Si no es un nÃºmero se devuelve el valor mÃnimo
this.value = min;
}
//this.barra.firstChild.style.width = this.barra.incremento*(parseInt(this.value)-min)+"px";
};
// Empezamos con la barra
// Lo incluimos dentro de una capa
var contenedor = document.createElement("SPAN");
contenedor.className = "contenedor-controles-input-selector";
var barra = document.createElement("DIV");
barra.className="barra-input-selector";
// Contiene otra capa que muestra el progreso
var progreso = document.createElement("DIV");
progreso.className="progreso-input-selector";
progreso.innerHTML = "&nbsp;"; // IE necesita esto para que tenga el tamaÃ±o correcto
progreso.style.width = "0px";
// Le aÃ±adimos atributos para luego poder hacer referencias
barra.max = max;
barra.min = min;
barra.cajaTexto = objs[i];
// AÃ±adimos el nodo con el progreso
barra.appendChild(progreso);
// El ancho de la barra depende del ancho de la caja de texto
barra.style.width = (parseInt(objs[i].style.width.replace("px", ""))+(_IE_?18:15))+"px";
// La posiciÃ³n vertical depende del navegador y el alto que le da por defecto a la caja de texto
// Se deberia configurar
barra.style.marginTop = (_IE_)? "22px":"21px";
// La proporcion de barra de progreso que le corresponde a cada unidad de la caja de texto
barra.incremento = parseInt(barra.style.width.replace("px", ""))/(max-min);
// Por si se modifica el valor arrastrando la barra de progreso
barra.drag = false;
// Al pinchar en la barra su valor cambia segÃºn la posiciÃ³n del ratÃ³n
barra.onclick = function(e) {
this.drag = false;
if (!e) {
e = window.event;
}
var x = (_IE_?e.offsetX:e.layerX);
pos = (x<3)? 0: parseInt(x*(this.max-this.min)/this.style.width.replace("px", ""))+1;
this.firstChild.style.width = (pos*this.incremento)+"px";
this.cajaTexto.value = pos+this.min;
}
// Si se estÃ¡ haciendo un drag, se actua igual que en el click
barra.onmousemove = function(e) {
if (this.drag) {
if (!e) {
e = window.event;
}
var x = (_IE_?e.offsetX:e.layerX);
pos = (x<3)? 0: parseInt(x*(this.max-this.min)/this.style.width.replace("px", ""))+1;
// No pasarnos del valor mÃ¡ximo
if (pos+this.min <= this.max) {
this.firstChild.style.width = (pos*this.incremento)+"px";
this.cajaTexto.value = pos+this.min;
}
}
}
// Empieza el drag
barra.onmousedown = function(e) {
this.drag = true;
}
// Acaba el drag
barra.onmouseup = function(e) {
this.drag = false;
}
// Se aÃ±ade la barra al contenedor
contenedor.appendChild(barra);
objs[i].barra = barra;
// Se aÃ±ade el contenedor antes de la barra
objs[i].parentNode.insertBefore(contenedor, objs[i]);
// Aumentar
// Se crea el enlace
var a = document.createElement("A");
a.id = objs[i].id+"_AUMENTAR";
a.href="#";
// Se le aÃ±aden atributos para luego poder hacer referencia
a.cajaTexto = objs[i];
a.max = max;
a.min = min;
a.barra = barra;
// No se usa click por si se quiere que vaya
// cambiando mientras se tiene pulsado el boton del raton
a.onmousedown = function() {
// Si es numero
if (!isNaN(parseInt(this.cajaTexto.value))) {
// Si es mas pequeÃ±o que el valor mÃ¡ximo
if (parseInt(this.cajaTexto.value) < this.max) {
// Si es menor que el valor minimo se pone este
if (parseInt(this.cajaTexto.value) < this.min) {
this.cajaTexto.value = this.min;
} else {
// Se incrementa el valor en 1
this.cajaTexto.value = parseInt(this.cajaTexto.value)+1;
}
} else {
// Se pone el valor mÃ¡ximo si es mayor que este
this.cajaTexto.value = this.max;
}
} else {
// Si no es numerico se pone el valor minimo
this.cajaTexto.value = this.min;
}
// Modificamos el progreso
var progreso = this.barra.firstChild;
progreso.style.width = this.barra.incremento*(parseInt(this.cajaTexto.value)-this.min)+"px";
// Se repite el evento mientras se tenga pulsado el raton
this.idEvento = setTimeout('document.getElementById("'+this.id+'").onmousedown()', 200);
};
// Se deja de repetir el evento al soltar el boton del raton
a.onmouseup = function() {
clearTimeout(this.idEvento);
}
// Las flechas usan una imagen transparente para
// poder usar un background y hacer el efecto hover
// usando una Ãºnica imÃ¡gen
a.innerHTML = '<img src="sp.gif" alt=""/>';
a.className="aumentar-input-selector";
// Incluyo la imagen despues de la caja de texto
objs[i].parentNode.insertBefore(a, objs[i].nextSibling);
// Me quedo con este objeto para luego
// incluir a continuaciÃ³n de este la otra flecha
var a_aumentar = a;
// Disminuir
// Se crea el enlace
a = document.createElement("A");
a.id = objs[i].id+"_DISMINUIR";
a.href="#";
// Se le aÃ±aden atributos para luego poder hacer referencia
a.cajaTexto = objs[i];
a.max = max;
a.min = min;
a.barra = barra;
// No se usa click por si se quiere que vaya
// cambiando mientras se tiene pulsado el boton del raton
a.onmousedown = function(evt) {
// Si es numero
if (!isNaN(parseInt(this.cajaTexto.value))) {
// Si es mas pequeÃ±o que el valor mÃ¡ximo
if (parseInt(this.cajaTexto.value) > this.min) {
// Si es menor que el valor minimo se pone este
if (parseInt(this.cajaTexto.value) > this.max) {
this.cajaTexto.value = this.max;
} else {
// Se incrementa el valor en 1
this.cajaTexto.value = parseInt(this.cajaTexto.value)-1;
}
} else {
// Se pone el valor mÃ¡ximo si es mayor que este
this.cajaTexto.value = this.min;
}
} else {
// Si no es numerico se pone el valor minimo
this.cajaTexto.value = this.min;
}
// Modificamos el progreso
var progreso = this.barra.firstChild;
progreso.style.width = this.barra.incremento*(parseInt(this.cajaTexto.value)-this.min)+"px";
// Se repite el evento mientras se tenga pulsado el raton
this.idEvento = setTimeout('document.getElementById("'+this.id+'").onmousedown()', 200);
};
// Se deja de repetir el evento al soltar el boton del raton
a.onmouseup = function() {
clearTimeout(this.idEvento);
}
// Las flechas usan una imagen transparente para
// poder usar un background y hacer el efecto hover
// usando una Ãºnica imÃ¡gen
a.innerHTML = '<img src="sp.gif" alt=""/>';
a.className="disminuir-input-selector";
// Incluyo la imagen despues de la primera flecha
objs[i].parentNode.insertBefore(a, a_aumentar.nextSibling);
}
}
}
}

Ejemplo

CÃ³digo

API | How to | PHP

Convirtiendo XML a JSON con PHP5 DOM y XSL

ByLuis January 17, 2007

JSON es un formato de datos de intercambio de Javascript que el auge de AJAX ha hecho muy popular. En javascript es mucho mÃ¡s cÃ³modo trabajar con JSON frente a XML ya que podemos analizarlo rÃ¡pidamente utilizando eval().


Cuando queremos trabajar con APIÂ´s como las de Amazon, Technorati, del.icio.us o Ficrk vía REST nos encontramos con que todas ellas devuelven los datos en XML. Gracias a PHP5 y utilizando sus extensiones DOM y XSL podemos transformar un documento XML en JSON de forma muy sencilla.
Veamos un ejemplo de cÃ³mo hacer esto con una consulta a la API de Technorati:
En primer lugar vamos a componer la URL con la que haremos nuestra consulta:

$technoratiApiKey = "introduceTuAPIdeTechnorati";
$url = "http://api.technorati.com/tag";
$tag = "usabilidad";
$request=$url."?key=".$technoratiApiKey."&tag=".urlencode($tag);

Y ahora creamos un nuevo objeto DOM y cargamos nuestro el fichero XML que nos devuelve la consulta:

$inputdom = new DomDocument();
$inputdom->load($request);

Para transformar los datos utilizaremos un xml2json.xsl, un fichero XSLT que tiene las instrucciones para transformar XML en JSON. Lo cargamos en un nuevo objeto DOM:

$xslt = "xml2json.xsl";
$xsl = new DomDocument();
$xsl->load($xslt);

Â¿QuÃ© nos falta? pues: crear un procesador de XSLT en PHP, cargar nuestra xslt, realizar la transformaciÃ³n y generar el documento:

$proc = new XsltProcessor();
$xsl = $proc->importStylesheet($xsl);
$newdom = $proc->transformToDoc($inputdom);
print $newdom->saveHTML();

PrÃ³ximamente veremos cÃ³mo utilizar esta tÃ©cnica para procesar informaciÃ³n de diversas APIÂ´s REST mediante AJAX.



		
		

			
			
				Javascript			
		

		3D mediante Javascript

	ByLuis					
						November 3, 2006					
					


	
		No sÃ© si es por ser rebuscado o por otra cosa, pero me gusta hacer cosas con Javascript algo fuera de lo comÃºn, aunque no sirvan para mucho. Por eso, este script para crear render en 3D en tiempo real me ha parecido impresionante.

Mis conocimientos de 3D son los de una asignatura de la universidad, por eso quizÃ¡s me dejo impresionar con poco, pero el modo de hacerlo, una vez que ves como es, te parece lo mÃ¡s sencillo del mundo.



Real-Time 3D in Javascript

VÃa / Ajaxian



		
		

			
			
				css | Grafismo | XHTML			
		

		Recursos para crear bordes redondeados

	ByLuis					
						March 30, 2006					
					


	
		Para aquellos que quieran usar bordes redondeados y no se vean capaces de hacerlo, pueden usar varias herramientas.
Una de ellas, es Nifty Corners Cube. Sólo se necesita importar un script, importar una hoja de estilos y realizar una llamada Javascript.
Otra opción, quizá más sencilla y que nos gusta especialmente,  es el generador de cajas de bordes redondeados de los catalanes de Neurotic Web. Solo tienes que elegir los colores y te genera automáticamente el código CSS y XHTML. Después subes las imágenes a tu servidor cuidando que la ruta del código de las imágenes en la CSS coincida y listo.
Y por último, Spiffy Corners, el más reciente en aparecer. Otro generador que te lo da todo con la novedad de que no incluye javascript ni imágenes para los bordes redondeados.
Para conocer otras opciones, un post a estas alturas ya muy leído pero que quizá no conozcas: CSS Rounded Corners ‘Roundup’.



		
		

			
			
				css | Javascript			
		

		GlassBox: bordes transparentes mediante Javascript y CSS

	ByLuis					
						February 28, 2008					
					


	
		GlassBox es una librería Javascript que permite añadir bordes transparentes, con transparencias y con sombreado. Es muy sencillo de usar, admite skins, bien documentado y funciona en IE 6, Firefox 2, Opera 9 y Safari 3.

GlassBox
Vía / CSS Globe



		
		

			
			
				PHP			
		

		Obtener información de páginas remotas con PHP

	ByLuis					
						September 15, 2006					
					


	
		En ciertos momentos nos puede ser Ãºtil obtener informaciÃ³n de pÃ¡ginas remotas, por ejemplo si tenemos un listado de pÃ¡ginas favoritas, pues obtener las palabras clave que tengan en el metatag, para poder clasificarlas con tags propias.
El proceso es sencillo mediante PHP, el problema es que algunos servidores, creo que pasa con DreamHost, no permiten el abrir ficheros de forma remota.
Primero debemos leer el fichero:
$url = "http://www.pagina.com/";
$fp = fopen( $url, 'r' );
$cont = "";
while( !feof( $fp ) ) {
$buffer = trim( fgets( $fp, 4096 ) );
$content .= $buffer;
}
DespuÃ©s podemos mirar cual es el tÃtulo de la pÃ¡gina:
$start = '<title>';
$end = '<\/title>';
preg_match( "/$start(.*)$end/s", $content, $match );
$title = $match[1]; 
Y por Ãºltimo obtener las metatags, usando para ello la funciÃ³n de PHP get_meta_tags, lo cual nos facilita el trabajo:
$metatagarray = get_meta_tags( $url );
$keywords = $metatagarray[ "keywords" ];
$description = $metatagarray[ "description" ];
Puedes verlo con una explicaciÃ³n mÃ¡s extensa en el artÃculo original.
Get Remote Web Page Information Using PHP



		
		

			
			
				Javascript			
		

		jsMSX: emulador de MSX con Javascript y Canvas

	ByLuis					
						June 25, 2009					
					


	
		MSX es un ordenador de hace la tira de años que cuando eramos pequeños nos parecía increíble y que ahora nos parece paleolítico. jsMSX es un emulador realizado en Javascript y Canvas que permite ejecutar juegos para ese sistema.



En sí la aplicación no tiene mucha utilidad, pero es interesante desde el punto de vista de lo que se está consiguiendo mediante Javascript y Canvas.

jsMSX

Via / @lardissone

Similar Posts

Veamos un ejemplo de cÃ³mo hacer esto con una consulta a la API de Technorati: