aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Un par de cosillas que he encontrado y que pueden interesantes tener presentes:

1. SMT (Simple Mouse Tracking): Sistema basado en Javascript para guardar el rastro del ratón del usuario al pasear por tus páginas.
2. <MyTableGrid />: Librería que usa Prototype + Script.aculo.us para conseguir unas tablas dinámicas muy interesantes.
3. Wordpress Configuration Tips: Trucos de optimización durante la configuración de Wordpress.
4. wordwrap en Javascript: James Padolsey crea una pequeña función que emula la función wordwrap() de php.
5. Trucos de Gmail: Conviertete en un Gmail Ninja!!
6. Haz Dra&Drop en tablas: Javascript para realizar drag & drop con el contenido de las tablas.
7. $fx: Librería Javascript especializada en animaciones.
8. jsAnim: Otra librería Javascript especializada en animaciones.
9. Gx: Y una más, otra librería Javascript para realizar animaciones (tan solo 10kb sin comprimir).

Via email he recibido un par de artículos interesantes que me parece interesante compartir:

1. Pautas de diseños en Photoshop [peivem.com]
2. Ventanas gelatinosas con Javascript y CSS Transformations [Turleando.com.ar]
3. Honda Insight [Vimeo] (Via Hans Christian)

Si quieres compartir algo, solo tienes que hacermelo saber

Script.aculo.us, la librería gráfica de Prototype se ha lavado la cara y de que manera.

(Ver Imagen)

Scripty2 se ha reescrito completamente desde 0 para suplir a la antigua librería, consiguiendo reducir su tamaño considerablemente, ideal para aplicarle efectos gráficos, enriquecer el interface del usuario de tus páginas en tan solo 20kb (gzzipped).

Como usarlo

Para disponer de las funcionalidades que la librería nos ofrece deberemos incluir la llamada al fichero correspondiente.

<script src="prototype.js" type="text/javascript"></script>
<script src="s2.js" type="text/javascript"></script>

Como podemos ver, necesitaremos prototype.js para que esta librería funcione. Además requiere la versión 1.6.3_rc3 de Prototype o superior.

Una vez añadido este código, podremos hacer uso de las funcionalidades que Scripty2 nos ofrece, funcionalidades que están divididas en 3 categorías:

1. Core: Funciones básicas usadas en el resto de la librería.
2. Fx: Colección de métodos para aplicarle efectos a los elementos de la página.
3. Ui: Funciones para el parseo de CSS

Descargar y demos

Para ver las posibilidades que ofrece, se han desarrollado un par de ejemplos. Puedes descargarlo directamente (con documentación) aquí.

Pocas son las cosas que no podamos hacer con Javascript, y la de hacer gráficas no es una de ellas.

(Ver Imagen)

Gracias a alguna de estas librerías, hacer nuestras gráficas más elegantes para nuestros usuarios es realmente sencillo:

1. Flot [jQuery]
2. fgCharting [jQuery]
3. jQuery Sparklines [jQuery]
4. jqPlot [jQuery]
5. TufteGraph [jQuery]
6. jQuery Google Charting [jQuery]
7. ProtoChart [Prototype]
8. JSXGraph [Prototype o jQuery]
9. Protovis [Native JS]
10. PlotKit [Nativa JS]

Me ha parecido muy raro que no hubiera nada para MooTools, así que he estado buscando algo para los que desarrollamos con este framework.

1. MooChart
2. TabletoChart
3. MooWheel

¿Me he dejado alguna que valga la pena conocer?

Un desarrollador web cada día debe lidiar, para hacer compatibles sus aplicaciones, con los diferentes navegadores que hay actualmente en Internet, con las diferentes versiones de cada uno de los navegadores y además con las diferentes versiones de las tecnologías que usa. Ya sea CSS2, CSS3 o Javascript 1.6, 1.7 … al fin y al cabo siempre tenemos que ir condicionando nuestras aplicaciones para todas las posibles combinaciones. Como sabemos que es nuestro trabajo y que si no lo hacemos nosotros no lo hará nadie, nuestra mejor herramienta es estar bien informado de todo lo relacionado a estas incompatibilidades y así poder acotarlas antes de que el problema nos haga correr.

(Ver Imagen)

Para ello, páginas como estas nos ayudarán en el día a día. Se trata de una recopilación de diferencias entre las diferentes versiones de Javascript, desde la 1.6 hasta la 1.8.1, en la que podemos ver la compatibilidad con los principales navegadores disponibles. ¿Conoces alguna más?

Alfredo Artiles vuelve a regalarnos una nueva herramienta para MooTools que nos permite controlar el scroll que hacemos accionando un evento a medida que lo estamos haciendo, e24ScrollEvents.

(Ver Imagen)

Muy similar al desarrollado por David Walsh (ScrollSpy) que vimos hace unos días, pero enfocado para ser más fácil de usar y de implementar en nuestras aplicaciones. Para ello, usa un sistema basado en eventos asociados a elementos, de este modo los elementos podrán tener los eventos “visible” y “hidden” que serán lanzados a medida que vamos haciendo scroll y el elemento esté “visible” o “hidden” (oculto).

Ejemplo

// Definimos el monitor del scroll
new e24ScrollEvents({
	container: window,
	mode: 'vertical',
	elements: ['el1', 'el2'] // Elementos relacionados al scroll.
});

// Eventos que serán accionados en el scroll
var el1 = $('el1');
el1.addEvents({
	'visible': function() {
		el1.setStyle('border', '4px solid #000');
	},
	'hidden': function() {
		el1.setStyle('border', 'none');
	}
});

// Eventos que serán accionados en el scroll
var el2 = $('el2');
el2.addEvents({
	'visible': function() {
		el2.setStyle('border', '4px solid #000');
	},
	'hidden': function() {
		el2.setStyle('border', 'none');
	}
});

Demo y Descargar

Puedes echarle un vistazo a las dos demos que Alfredo nos ha dejado y descargar código directamente desde su página.

Doodle.js es una librería que nos permite trabajar fácilmente con el elemento <canvas /> y todo lo que ello conlleva. Con una estética similar a jQuery, dibujar sobre el lienzo que es <canvas /> es tan sencillo como esto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <!-- CANVAS PARA IE -->
  <!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script><![endif]-->

  <!-- SCRIPT DOODLE -->
  <script src="./doodle-0.1.js" type="text/javascript"></script>
  <!-- JAVASCRIPT -->
  <script type="text/javascript">
    function init() {
			(function(oo) {
			 oo.canvas('#my_canvas');
			 var box = oo.rect({x:25, y:25,width:50, height:50, fill:"#ff0000"});
			 box.draw(); //draw a red box with initial parameters

			 box.modify({fill:'rgb(0,255,0)'}).translate(50,0).draw();
			 box.modify({fill:'purple'}).rotate(-45).draw();
			 box.modify({fill:'yellow'}).translate(50,0).scale(1.5).draw();
			 box.modify({fill:'blue'}).transform(1.5,0,0,1.5,50,0).draw();

			})($doodle);
    };
  </script>
  </head>
  <body onload="javascript:init();">
  <!-- ELEMENTO CONTENEDOR CANVAS -->
    <canvas id="my_canvas" width="600" height="400">
      <p>Error: El elemento canvas no está disponible para este navegador.</p>
    </canvas>
  </body>
</html>

Ejemplos

No os perdais algunos de los ejemplos disponibles en la página de la librería:

• Espiral multicolor
• Rebotes múltiples

Creo que acabo de descubrir un bug, para mi un problemón, en Wordpress 2.8. Se trata de la insercción de código mediante copia/pega en el editor visual de Wordpress (TinyMCE).

Según las pruebas que he realizado, me he encontrado con que al intentar copiar este código:

<div class="cube">
    <div class="face top">
    </div>
    <div class="face left">
    </div>
    <div class="face right">
    </div>
</div>

Directamente desde UltraEdit (es el que uso en Windows, aunque supongo que usando TextMate o cualquier otro ocurrirá lo mismo). Obtengo este resultado:

<div>
 <div>
 </div>
 <div>
 </div>
 <div>
 </div>
</div>

Creo que he encontrado el problema en el fichero wp-includes/js/tinymce/wp-tinymce.js, sobre la línea 14-15. Pero aún no he tenido tiempo de solventarlo. Esta tarde le echaré un vistazo. ¿A alguien más le pasa?

Solución temporal

Por el momento he visto que podemos solucionarlo editando el fichero en cuestión (wp-includes/js/tinymce/wp-tinymce.js)

Buscamosen la línea 14-15 este código:

...if(c.getParam("paste_auto_cleanup_on_paste",true))...

Y reemplazamos el valor true por false para evitar que nos limpie estos parámetros.

...if(c.getParam("paste_auto_cleanup_on_paste",false))...

Esto puede deshabilitar todos los filtros aplicados al pegado de código y quizás con contenido de documentos Word sea necesario, lo mejor es hacer pruebas antes de dejarlo funcionando definitivamente.