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

yFiles es una librería javascript o una aplicación el flash que nos permite realizar sistemas de diagramas bastante potentes.

No he podido probarlo, pero si alguien se anima que comente lo que le ha parecido.

[Descargar][Demo]

Un listado rápido de herramientas muy útiles en Javascript.

1. jsScrolling (v1 y v2), añade un scroll a tus divs mediante javascript [e][e][e][e]
2. Image Rotation, una curiosa herramienta que te permite girar imagenes de forma cómoda.
3. KeyLib, control de las teclas pulsadas.[e][e][e]
4. JSMP / JS Media Player, reproductor de video (flash) mediante Javascript.
5. Javascript Optimizer, otro optimizador de código que hará más liviano tu código.

Quizas añada alguna más a lo largo del día.

¿Quien será ese cap… que se me ha colado encima en la lista de Twitter? xDDDD

Es que mira que soy avaricioso 😀

Despues de ver VideoBox me han asaltado las ganas de darle una utilidad en el mundo WordPress, y recuperando el lightbox plugin he adaptado el código para que VideoBox se integre con WordPress de forma fácil y rápida. Permitiendote así conseguir que la inclusión de videos sea aún más fácil en tu wordpress.

Instalación

1. Descargar el fichero
2. Descomprimir y subir a la carpeta wp-content/plugins/
3. Activar desde el panel de administración.
4. Disfrutarlo.

Modo de uso

Para usar el plugin he tenido en cuenta que los usuarios que se estén arriesgando a usar el WYSIWYG de WordPress no queden descartados de este plugin, por este motivo he pensado que una estructura definida concretamente sería más optimo. Así que si quieres añadir un video simplemente tendrás que añadir la siguiente línea en el contenido de tu post. Exactamente donde quieras que aparezca el enlace al video.

[videobox url="URL_DEL _VIDEO" title="TITULO_DEL_VIDEO"]ENLACE_O_IMAGEN[/videobox]

Ejemplo válido

[videobox url="http://www.youtube.com/watch?v=uhi5x7V3WXE" title="300"]Trailer de 300[/videobox]

Descargar

Versión 1.0

Mootools además de aportar una gran cantidad de efectos y soluciones a problemas contidianos en javascript nos permite hacer de forma muy fácil que nuestra página gane en dinamismo y que aporte un valor extra a ese contenido que ya disponemos.

Una de las formas de aportar información de forma elegante es el uso del famoso acordeón de Moo.fx. Ya que generalmente es un elemento bastante usable, o así lo veo yo, y permite ordenar la información de la web de una forma bastánte eficiente.

El problema radica generalmente en como hacer que esto funcione, ahi es donde entra MooTools… MooTools lo hace solo 😀 Es muy simple y veremos como tengo razón.

Preparando el código

Inicialmente hemos de preparar nuestro código para albergar el contenido que deseamos «acordeonizar» (me tienen que matar xDD).

<div id="mi_acordeon">
	<h2 class="trigger">Click para abrir</h2>
	<div class="slider">
		<p>Aqui ponemos el texto grande y largo que deseemos</p>
	</div>
	.....
</div>

En este ejemplo este vemos que hemos creado un <div></div> que albergará nuestro acordeón. Nuestro acordeón se compone de un <h2></h2> que hará de elemento que recibirá el click y desplegará el <div> con clase slider. Podremos repetir los elementos <h2></h2> y <div class="slider"></div> las veces que deseemos, siempre en esta posición, para hacer que nuestro acordeón sea más o menos grande.

El javascript

Aqui es donde entra MooTools y la magia de la facilidad. Simplemente tendremos que indicar los elementos que deseamos que se comporten como accionadores (no encontraba una palabra mejor) y los que serán los que contengan el contenido y se deslicen.

Para ello usaremos la función $$(), que te permite recoger un array de elementos mediante una pequeña expresión CSS.

var trig = $$('.trigger'); // Array de elementos que accionan.
var box = $$('.slider'); // Array de elemenos que se deslizan.

Una vez hecho esto solo tendremos que hacer que el objeto Accordion haga el resto.

new fx.Accordion(trig, box);

Como habeis visto es realmente fácil, aunque aún nos queda una cosilla.

Puliendo la ejecución

Las páginas web se van cargando, para entendernos de arriba a abajo, por ese motivo si añadimos esta llamada en el <head></head> de nuestra página o en un fichero que se incluya arriba tendremos un problema para acceder a lo que se encuentre por debajo. Para entenderno, si yo defino algo encima del elemento <body></body> no puedo hacer referencia a él por que aún no está cargado, entonces el javascript nos causa un error. Además el tag que queremos usar debe estar cerrado, por lo tanto para el <body></body> tendremos que esperar a que se haya cargado la página entera.

Por este motivo javascript tiene un sistema de eventos que facilitan la tarea. Mediante el objeto window podremos añadir funcionalidades al evento onload del mismo objeto. Y de esta forma podremos asegurarnos que nuestro acordeón funciona coloquemos el código jasvascript donde queramos.

Código final

En definitiva, el código resultante sería algo asi.

window.onload = function() {
	var trig = $$('.trigger');
	var box = $$('.slider');
	var ac = new fx.Accordion(trig, box);
	// En una línea
	//var ac = new fx.Accordion($$('.trigger'), $$('.slider'));
}

Pero además MooTools dispone de unas modificaciones sobre el objeto window que nos fácilita aún más la tarea, ya que nos permite, en este caso, apilar funcionalidades al onload de la página.

Window.onDomReady(function() {
	var trig = $$('.trigger');
	var box = $$('.slider');
	var ac = new fx.Accordion(trig, box);
	// En una línea
	//var ac = new fx.Accordion($$('.trigger'), $$('.slider'));
});

El objeto Accordion dispone de muchas opciones para modificar su apariencia, podrás verlas en la documentación oficial.

Conclusión

Algo a tener en cuenta en este formato de acordeón es que si por cualquier cosa el usuario no dispone de javascript en su navegador, podrá disfrutar del contenido de la página perfectamente. De esta forma conseguimos que PDA’s, móviles y lectores de pantalla nos puedan continuar leyendo y disfrutando de nuestros contenidos. 

Código completo

Gracias Eberth! 😀

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<script type="text/javascript" src="mootools.js"></script>
	<script type="text/javascript">

Window.onDomReady(function() {
	var trig = $$('.trigger');
	var box = $$('.slider');
	var ac = new Fx.Accordion(trig, box);
	// En una línea
	//var ac = new Fx.Accordion($$('.trigger'), $$('.slider'));
});
</script>

</head>

<body>

<div id="mi_acordeon">
	<h2 class="trigger">Click para abrir</h2>
	<div class="slider">
		<p>Aqui ponemos el texto grande y largo que deseemos</p>
	</div>
	<h2 class="trigger">Click para abrir</h2>
	<div class="slider">
		<p>Aqui ponemos el texto grande y largo que deseemos</p>
	</div>
	<h2 class="trigger">Click para abrir</h2>
	<div class="slider">
		<p>Aqui ponemos el texto grande y largo que deseemos</p>
	</div>
	<h2 class="trigger">Click para abrir</h2>
	<div class="slider">
		<p>Aqui ponemos el texto grande y largo que deseemos</p>
	</div>
	<h2 class="trigger">Click para abrir</h2>
	<div class="slider">
		<p>Aqui ponemos el texto grande y largo que deseemos</p>
	</div>
	<h2 class="trigger">Click para abrir</h2>
	<div class="slider">
		<p>Aqui ponemos el texto grande y largo que deseemos</p>
	</div>

</div>

No es que sea el ranking de los más queridos, pero queda mejor que los más … ¿añadidos? ¿Los que más han añadido?.

Twitter es la aplicación 2.0 del momento, pero ¿por que? ¿por el morbo? ¿por la novedad?… nadie lo sabe pero hoy por hoy está subiendo como la espuma.

Top 10

1. Eduardo Arcos: 316

2. manu contreras: 222

3. Hector Garcia: 162

4. Diego Lafuente: 151

5. Enrique Dans: 108

6. furilo: 98

7. ALT1040: 97

8. Hugo Londoño: 93

9. Arturo J. Paniagua: 91

10. David Ochoa B.: 78

Sacarme del 13!!!!

  13. Andrés Nieto: 75