Lista de ofuscadores para Javascript

ByLuis

Para aquellos que necesiten ofuscar su código Javascript para que sea más difícil de entender a los usuarios, les vendrá bastante bien esta lista de aplicaciones que modificarán nuestro código:

Vía / Ajax Digest

Similar Posts

|

Tiled Based Vector & Raster Maps using SVG and Javascript

ByLuis

Polymaps is a display and interaction library for tile-based vector and raster maps using SVG and Javascript. Their intent is to provide a minimal, extensible, customizable, and free display library for discriminating designers and developers who want to use interactive maps in their own projects.Polymaps provides speedy display of multi-zoom datas …

Post original

|

IT Mill Toolkit: framework para crear GUIs

ByLuis

IT Mill Toolkit es un framework open source para crear interfaces de usuario, ofreciendo widgets y herramientas para desarrollar aplicaciones web de alta calidad. Podrás crear RIAs sin tener que preocuparte por imcompatibilidades de navegadores o el DOM de Javascript, tan solo usando herramientas Java.
itmill.png
Además ofrece varios widgets con soporte para AJAX, seguridad para evitar ataques mediante Javascript, está basado en Google Web Toolkit, faclidad para cambiar los estilos y muchas cosas más.
IT Mill Toolkit
Vía / WebAppers

Librería Javascript para crear un escritorio

ByLuis

Una buena librería Javascript para crear un entorno de escritorio en nuestra página web.
Permite crear ventanas, con sus opciones más comunes (maximizar, minimizar, mover, redimensionar, bloquear el tamaño, …). A parte una barra de tareas con las ventanas abiertas y un menú. Y por último la posibilidad de añadir iconos en el escritorio.
jsdesktop.png
Widget Environment
Vía / dzone

Sugerir búsquedas con Javascript no obtrusivo

ByLuis

Ya hace tiempo explicamos como hacer un autocompletado en cajas de texto, pero claro, no todo el mundo tiene ganas o tiempo de hacerlo uno mismo. Por ello, no hay nada mejor que usar scripts de otras personas que nos facilitan el trabajo.
searchfield.png
SearchField es un javascript no obtrusivo que nos permite añadir sugerencias de búsqueda en nuestras cajas de texto de forma rápida y sencilla. Tan solo hay que añadir un javascript y enlaces a las librerías y a los estilos, para que funcione.
La única pega que le veo es que las palabras de sugerencia están dentro de una variable Javascript y no se realizan mediante llamada Ajax para poder así obtener datos dinámicos, pero bueno, no parece complicado modificarlo para que permita esta opción.
Style Your Website’s Search Field with JS/CSS
Vía / WebAppers

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

Controlar el número de teclas de un textarea

ByLuis

Algo que hay que tener en cuenta muchas veces cuando trabajamos con formularios es la longitud del texto que introducimos en los textarea, ya que en muchos casos esa información se almacena en la BD y puede que el campo en dónde se guarda tenga un límite de tamaño.

textarea.png

No tengo muy claro según lo que dicta la accesibilidad y la usabilidad, si el ejemplo que muestro es del todo correcto. Lo normal es que si se supera la longitud de texto máximo, no deje introducir ningún carácter más. Pero en este caso simplemente vamos a avisar mediante una barra de progreso cuánto texto hemos introducido y cuánto nos queda. ¿Por qué? pues porque personalmente me ha pasado que muchas veces, al escribir mirando el teclado, ni me fijo en lo que pasa en la pantalla, por lo que me he podido pasar pulsando teclas un buen rato y no fijarme en que no se escribía nada. O también, cuando se hace un copy/paste, el texto puede ser mayor que lo permitido. En ambos casos es mejor tener el texto completo e ir reduciéndolo.

Como creo que quizás pueda serle útil a alguien este ejemplo, el desarrollo va a ser muy sencillo, ya que algunas veces los comentarios que recibimos de scripts antiguos son de gente con poco conocimiento. Luego, quien quiera usar JSON o Ajax (no sé para qué) o lo que quiera, que lo haga.

El procedimiento es sencillo, disponemos de un textarea, con un ancho definido mediante estilos. También existe una capa del mismo ancho que el textarea, y que se situará debajo del textarea. En el textarea se capturará el evento onkeyup, para que cuando se pulse una tecla, podamos ver la longitud del texto y modificar la barra de progreso.

<textarea onkeyup="progreso_tecla(this)" value=""></textarea>
<div id="progreso">(0 / 250)</div>
textarea {
width: 300px;
height: 200px;
}
#progreso {
background: url(textarea.png) no-repeat;
background-position: -300px 0px;
width: 300px;
height: 14px;
text-align: center;
color: #000000;
font-size: 8pt;
font-family: Arial;
text-transform: uppercase;
}

La barra de progreso funciona de la siguiente manera, el fondo es una imagen con el progreso, inicialmente estará desplazada a la izquierda el tamaño de la barra. Por ejemplo, si la barra tiene un ancho de 300px, la posición izquierda del fondo será -300px. Cuando se pulse una tecla, se recalculará la posición izquierda, según la longitud del texto. Si la longitud supera el máximo, el fondo no será la imagen, sino de color rojo para avisar del error.

var max=250;
var ancho=300;
function progreso_tecla(obj) {
var progreso = document.getElementById("progreso");
if (obj.value.length < max) {
progreso.style.backgroundColor = "#FFFFFF";
progreso.style.backgroundImage = "url(textarea.png)";
progreso.style.color = "#000000";
var pos = ancho-parseInt((ancho*parseInt(obj.value.length))/250);
progreso.style.backgroundPosition = "-"+pos+"px 0px";
} else {
progreso.style.backgroundColor = "#CC0000";
progreso.style.backgroundImage = "url()";
progreso.style.color = "#FFFFFF";
}
progreso.innerHTML = "("+obj.value.length+" / "+max+")";
}

Ejemplo