Ultimamente me he encontrado con unas muy buenas fuentes sobre cosas y recursos sobre Ajax, Javascript, o programacion en general.

En estos lugares me he encontrado cosas muy padres como es el caso de el blog Six Revisions, que en este caso nos muestra una lista con 20 Tutoriales y ejemplos sobre Mootools y de cosas que se pueden hacer con Mootools.

Bien copio y pego unos cuantos para que si gustan pueden visitar dicho blog y ver todas las opciones.

1.- Formulario de contacto seguro.

Mediante este tutorial se vera como hacer formularios con Mootools, de una forma segura, ya que recordemos que usar formularios sobre ajax puede suponer un riesgo si no se maneja adecuadamente.

2.- Creacion de barras deszilantes tipo Facebook

En este tutorial nos presentan una forma de crear unos controles deslizantes tipo Facebook,los cuales nos pueden ser muy útiles para controlar un elemento de una manera mas precisa y ver los cambios instantáneamente.

3.-Video Tutorial  de introduccion a Mootools.

En este caso lo que tenemos es un vídeo de una introducción, al trabajo con Mootools y a tomar aspectos del desarrollo con esta librería, y bueno para no dejarles el link completo y que pierdan el tiempo, les dejo el vídeo de una vez, ya que esta en youtube.

Solo puse 3 ya ven como ando cargado de chamba, y pues si quieren ver los otros 17 restantes lean .

Learning MooTools: 20 MooTools Tutorials and Examples

Leyendo el blog de Andrés Nieto veo una nueva iniciativa de Google, se llama:

Google Ajax Libraries API

Que viene siendo una especie de lugar donde se almacenaran librerías Ajax, (como Jquery, Mootools, Prototype, Etc..), y las cuales estarán accesibles a todo el publico.

Las librerias/Frameworks disponibles en este momento son

• jQuery
• prototype
• script.aculo.us
• MooTools
• dojo
• Google Maps
• Google Ajax Search
• Google AJAX Feed API
• Google data APIs

Las ultimas 4 no son Librerias JS, sin embargo tambien forman parte de este abanico de posibilidades.

Su implementación/uso es simple y de la siguiente forma:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Esto es para cargar Jquery, para cargar alguna de las otras librerías JS, debemos cambiar la ruta del script(SRc) por alguna de las siguientes:

//jQuery

http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

// Prototype

http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js

//Script.aculo.us

http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js

//MooTools

http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js

//Dojo

http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dojo/dojo.xd.js

También se pueden agregar dichas librerías usando funciones de la api de Google, para ello, necesitaremos cargar la api de google y llamar lo que deseemos como el siguiente ejemplo

<script src="http://www.google.com/jsapi"></script>

<script type="text/javascript"><!--
// Load jQuery
google.load("jquery", "1");

// on page load complete, fire off a jQuery json-p query
// against Google web search
google.setOnLoadCallback(function() {
$.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&;v=1.0&;callback=?",

// on search completion, process the results
function (data) {
if (data.responseDate.results &&
data.responseDate.results.length>0) {
renderResults(data.responseDate.results);
}
});
});
// --></script>

Como pudimos ver la carga se realizo usando la función google.load, la cual funciona de la siguiente forma:

google.load(name, version, opt);

Como podemos observar se utilizan 3 parámetros, los cuales son, el nombre de la librería, la versión de dicha librería, y el ultimo parámetro, que es opcional es para indicar algunas opciones para personalizar mejor la carga de dicha librería, por ejemplo si la deseamos comprimida o no, entre otras opciones mas.

Tendré que hacer una comparación para ver cual framework es la que trabaja mejor, y es que viendo bien a Mootools me he quedado encantado.

Tal vez siga usando Jquery por que realmente me gusta la forma en la que uno la puede usar digamos en pocas palabras es simple, pero la única pega que a veces tenemos es el peso, y recordemos que el peso tiene que ver con la experiencia del usuario, y a veces unos cuantos Kbs de Javascript, puede transformase en alejarse de nuestro sitio web/Blog.

Ahora bien veamos como usarla para poder hacer peticiones XMLHttpRequest osea Ajax.

Como primer paso necesitaremos Descargarnos Mootools de Aquí:

http://mootools.net/download

Ahí hay que elegir los componentes que deseamos bajar, ya que esta librería esta como segmentada.

Debemos elegir solamente Ajax, ya que una vez eligiendo este componente, Mootools carga sus dependencias de componentes automaticamente.

Una vez que hemos bajado el Framewokr vamos a proceder a usarlo “en caliente” o sea sin tanta explicación y saben por que, bueno pues por que su uso es muy fácil, en cuanto tenga un poco mas de tiempo explicare mejor como funciona el core de esta libreria

Primero incluiremos la Librería Mootools

<script type="text/javascript" src="mootools-release-1.11.js"></script>

Posteriormente necesitaremos nuestro código html

<h3>Ejemplo Ajax</h3>
<p><a id="peticion" href="#">Click Aqui</a> para procesar la peticion ajax</p>
<div id="resultado">
	<p>Esperando respuesta.......</p>
</div>

El funcionamiento de este ejemplo es el siguiente, al darle click a el elemento con el ID “peticion”, nos hará una petición ajax y el resultado de este proceso lo mostrara en la capa(div) identificada con el id “resultado”

Como ya tenemos el HTML que usaremos ahora nos falta el Javascript, que actuara en conjunto con Mootools

$('peticion').addEvent('click', function(e) {
	e = new Event(e).stop();

	var url = "pagina2.php";

	/**
	 * la url en cuestion
	 */

       /*
 	* nuevo objeto ajax
	*/
	new Ajax(url, {
		method: 'get',
		// metodo ajax get o post
		update: $('resultado')
		// donde se va  a insertar el resultado
	}).request();
});

Y listo

Creo que no hay mucho mas que explicar, de todos modos si tiene dudas ya saben por algo están los comentarios.

Prometo mas manuales/ayudas sobre el Framework Mootools, que seguro sera de gran ayuda en nuestros desarrollos.

Con información | Mootools Ajax

Buscando un script que me facilitara poner unas tabs para el próximo theme de el blog, el cual por cierto al parecer usara Mootools para unas tabs, las cuales luego verán, Me tope con este Framework.

Se llama mooHP, el cual como su nombre lo indica es una mezcla entre Mootools y Php.

La ventaja reside en que su sintaxis es muy similar a la de Mootools , por lo cual si estas acostumbrado a usar esta librería la implementación sera fácil y las ventajas muchas mas, como gestionar la gran mayoría de código vía Php.

A continuación les pongo un ejemplo de código y posteriormente un link para que vean el demo.

< ?php
include("mooHP2/dom.class.php");
include("mooHP2/element.class.php");
include("mooHP2/css.class.php");
include("mooHP2/utility.class.php");

//New instance of the dom class
$t = new dom();

//Loads a template from file
$t->loadFile("base.html");

//Gets element by css selector  and sets it's HTML content.
$t->SE("body")->setHTML("");

//Selected ellement: body adopts  new element
$t->SE("body")->adopt( $t->element("div", array("id"=>"header") ,"Hello world!") );

//Body adopts  <br />
$t->SE("body")->newLine();

$picked = "";
if (isset( $_GET["cd"] )) {
 $picked = " you have selected #".$_GET["cd"];
}

//Body adopts new element div: with assigned properties as second argument and text as content;
$t->SE("body")->adopt( $t->element("div", array("style"=>"margin:10px; padding:10px; border:1px solid #444;"), "Counting down:".$picked) );

// $select  = new Element()
$select = $t->element("select", array("name"=>"cd"), "");

//Body adopts new element of type form
$t->SE("body")->adopt( $t->element("form", array("id"=>"newForm","method"=>"get") ) );
//Selects new element by ID and adopts previously defined element $select
$t->S("newForm")->adopt( $select );
// #newForm adopts new Element input
$t->S("newForm")->adopt( $t->element("input", array("type"=>"submit", "value"=>"CLICK!") ) );

for ($i=1; $i< =20; $i++) {
	//$newOption is new option element
	$newOption = $t->element("option", array("value"=>$i), "Count down: " . $i );
	//$select adopt as it's first child the $newOption element
	$select->adoptTop( $newOption );
	if ( isset($_GET["cd"]) && $_GET["cd"] == $i ) {
		//Setting an attribute to an element
		$newOption->setProperty("selected","selected");
	}
}

//Body accepts  new style rules
$t->SE("body")->setStyle("margin","10px");

//Body adopts <br />
$t->SE("body")->newLine();

//Appending text to the body
$t->SE("body")->appendText("and here comes the appended text");

//Body is adopting the inc.html contents
$t->SE("body")->adopt( $t->includeFile("inc.html") );

if (!isset( $_GET["cd"] )) {
	//Make simple alert with javascript
	$t->alert("Hello and welcome to mooHP");
}

//Setting the <title> tah innerHTML
$t->setPageTitle("..:: Hello and welcome to mooHP ::..");

//Creating new instance of the css class
$newCss = new css();
//Setting rule in css
$newCss->setStyle("color","#ff9900");
//Setting rules in css
$newCss->setStyles(array("font-weight"=>"bold","font-size"=>"24px" ));
//Writing the defined css to element
$newCss->writeToElement( $t->S("header") );

//Creating new instance of the css class
$newCss2 = new css();
//Setting rule in css
$newCss2->setStyle("border","10px solid #DDD");
//Setting rule in css
$newCss2->setStyle("padding","10px");
//Writing the defined css as #newForm selector in $t dom instance
$newCss2->writeToDom("#newForm", $t);

//Writing the page   if true is passed as argument the page will be compresed
$t->writePage(true);

?>

El resultado de esto seria lo siguiente.
http://www.devpartment.com/testdrive/mooHP/

Creo que Mootools, me esta ganando, y eso se debe a una gran ventaja que ofrece ante otras Frameworks, como JQuery o Prototype, y eso es su peso, que es extremadamente pequeño, bueno aun sigo defendiendo a Jquery, pero si no se compacta un poco mas quiza tenga que darle un vistazo a Mootools.

Por cierto fui la Flisol, no participe casi en nada y es por que no me dio tuve mucho tiempo, eso si me compre una nueva playera muy chida de Debian Linux, tome unas fotos y me queria traer la de Php, pero pues no habia mas Varo($), asi que sera para la próxima, en cunato baje las fotos les platicare como estuvo la cosa.

Via | mootools + PHP = mooHP
Descarga | Descargar MooHP
Mas información en | http://www.devpartment.com/posts/mootools-php-moohp/

Antes de que me digan ¿y donde esta la encuesta? dejeneme decirles que esta encuesta no la hice yo, si no la hiciceron en http://www.nitobi.com/survey/.

Y lo encontre visitando ajaxian, y bueno les cuento sobre esto:

Se hizo una encuesta sobre algunos gustos y preferencias sobre desarrollo web y ajax, los resultados muestran varias tendencias sobre los frameworks ajax mas usados asi como el lenguaje de script del lado del servidor tambien mas usado o talvez preferido.

Hubo varias preguntas y respuestas pero las que sin duda me interesaron mas fueron:

¿Que Plataformas de desarrollo que está usando?

La respuesta con grafica y con numeros.

• PHP: 296
• Just HTML and CSS: 289
• Java (other): 177
• .Net: 163
• Cold Fusion: 105
• JSP: 105
• Servlets: 89
• Other (please specify): 57
• Struts: 51
• Python: 46
• Rails: 42
• Flex: 27
• JSF: 23

¿Qué herramientas de desarrollo usas (seleccione todos los que correspondan)?

En este caso el resultado es:

• Eclipse: 289
• Dreamweaver: 241
• NotePad: 156
• Visual Studio: 154
• Aptana: 105
• Other (please specify): 80
• Textmate: 42
• Flex Builder: 39
• BBEdit: 36
• NotePad++: 33

Aqui un detalle, muchos usan eclipse y otros mas usan dreamweaver, yo uso rapidphp y es excelente aunque solo esta disponible para windows, pero sin duda su flexibilidad y caracteristicas lo hacen fenomenal, ojala y fuera opensource, pero aun asi lo uso por encima de dreamweaver, no es un post patrocinado ni nada, pero deberian probarlo.

Y una sobre el uso de ajax (la que mas nos interesa)

En el blog de Mootools, comentan la nueva version beta de esta libreria ajax la cual ya nos traera a Swiff.

Esta herramiento nos permitira conectar Javascript y archivos swf, cosa que se complicaba bastante al hacerla manualmente usando Fscommand.

Para poder empezar a trabajar con esta herramienta, la haremos de la siguiente forma.

Primero bajaremos Mootools 1.2 Beta de la siguiente Direccion http://mootools.net/download/tags/1-2b2

Desde ahi podemos elejir que plugins o complementos deseamos bajar, junto con el nucleo de Mootools, obviamente elejiremos las que uno desea pero tambien incluiremos Swiff la cual se localiza dentro de la seccion Utilities.

Ahora crearemos un archivo Flash, en este caso nuestro archivo flash estara vacio, lo unico que pondremos estara en una accion ahora escribiremos el ActionScript que permita crear la interfaz con Swiff.

//(ActionScript) achivo mySwf.swf
import flash.external.*;

function echoText(text) {
    ExternalInterface.call('alert', "This message is from Flash: "+text);
}

//Fires the 'onLoad' event within the Swiff object.
ExternalInterface.call(onLoad);

Ahora lo publicamos, y podremos cargarlo mediante Mootools Swiff.