Los 10 frameworks más populares de Javascript

0 - , , - 11/03/2009 06:42:04

Mi preferencia está clara, jQuery, pero si estáis pensando en iniciaros en un entorno de trabajo para Javascript "10 Most Popular JavaScript Frameworks" puede resultaros un artículo muy interesante. Analiza los 10 frameworks de Javascript más usados en este momento y ofrece una información en forma de ficha que abarca una serie de aspectos a considerar antes de decantarse por uno de estos entornos de trabajo: Documentación, Comunidad, Licencia, Tamaño, Interfaz, ... Los frameworks analizados son los siguientes: jQuery, Prototype, script.aculo.us, MooTools, ExtJS, Qooxdoo, Yahoo! UI Library (YUI), MochiKit, Midori y The Dojo Toolkit.

Javascript Tooltip

0 - , - 16/02/2009 14:00:00

Interesante script en javascript que permite mostrar tooltips a partir del atributo title de un elemento. En este caso la función está preparada para mostrar el tooltip en las imágenes. Para, por ejemplo, hacer lo mismo con los enlaces tan solo deberíamos cambiar la instrucción getElementsByTagName('img') por getElementsByTagName('a'). 

function showTT(el) {
  	var ttext=el.title;
  	var tt=document.createElement('SPAN');
  	var tnode=document.createTextNode(ttext);
  	tt.appendChild(tnode);
  	el.parentNode.insertBefore(tt,el.nextSibling);
  	 tt.className="tt";
  	el.title="";
  }
  function hideTT(el) {
  	var ttext=el.nextSibling.childNodes[0].nodeValue;
  	el.parentNode.removeChild(el.nextSibling);
  	el.title=ttext;
  }
  function tooltip() {
  var imgs=document.getElementsByTagName('img');
  for (i=0; i<imgs.length; i++) {
  	imgs[i].onmouseover=function() {showTT(this);}
  	imgs[i].onmouseout=function() {hideTT(this);}	
  	}
  }
  window.onload=tooltip;

La ventaja de esta función es que no hace uso de ninguna librería y nos permite personalizar el aspecto del texto en el tooltip haciendo el uso de la clase 'tt' que le asigna al tooltip. Por ejemplo:

.tt {
	position:absolute;
	border:1px solid gray;
	width:300px;
	margin:1em;
	padding:3px;
	background:#fff;
}

Visto en BonRouge » »

ZeroClipboard: Librería Javascript para copiar al portapapeles

0 - , - 08/02/2009 10:30:00

ZeroClipboard es una librería javascript que utiliza un swf para copiar contenido en nuestro portapapeles. Es totalmente compatible con Flash Player 10. Un ejemplo de uso muy sencillo sería:

<html>
<head>
<title>Zero Clipboard</title>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script language="JavaScript">
	var clip = null;
	function $(id) { return document.getElementById(id); }
	function init() {
		clip = new ZeroClipboard.Client();
		clip.addEventListener('mouseDown', click_de_raton);
		clip.glue( 'boton_copiar' );
	}
	function click_de_raton(client) {
		clip.setText( $('mi_caja').value );
	}
</script>
</head>
<body onLoad="init()">
<p><textarea id="mi_caja" cols=50 rows=5></textarea></p>
<input type="button" id="boton_copiar" value="Copiar">
</body>
</html>

Hay dos elementos fundamentales. "boton_copiar" es el elemento que al ser pulsado ejecutará la acción de copiar. Este elemento puede ser un texto, una imagen, un botón... El segundo elemento es "mi_caja" que es el textarea del que se copiará el texto. Lo demás, la inclusión de la librería, las funciones que asocian elementos con acciones y la inicialización a la carga del body: <body onLoad="init()">

Ver ejemplo en funcionamiento » »

Descargar ejemplo completo » »

jQuery vs Prototype

0 - , , , , - 21/01/2009 15:00:00

En Revelance Blog hacen un interesante análisis de las fortalezas y debilidades de estas dos librerías. Prototype parece ser más consistente, con una biblioteca mejor diseñada en conjunto y que permite realizar una programación de mayor complejidad. Sin conocer en profundidad Prototype y por lo leído en dicho análisis, lo que a priori podría parecer una desventaja de jQuery se ha convertido en su gran fortaleza: jQuery está pensado para hacer las cosas fáciles, lo que lo hace perfecto para gente sin grandes conocimientos de programación. Tan sólo hay que comparar la antigua manera de trabajar con DOM y la facilidad con la que con jQuery se pueden realizar búsquedas de elementos. Si a eso añadimos la posibilidad de utilizar selectores CSS en la búsqueda de elementos; poder realizar operaciones de forma implícita en todos los elementos encontrados y la capacidad de realizar operaciones en cadena, convierte a esta librería en la preferida por diseñadores y desarrolladores web.

Why I still prefer Prototype to jQuery » »