IceBeat

Ya tenemos versión oficial de mootools, con rediseño, documentación y sistema de descarga personalizada.

Ahora si que pueden portar los plugins a la nueva versión sin tener miedo a que una propiedad sea eliminada o renombrada.

http://mootools.net/

He vuelto a retomar CSSing. el proyecto es demasiado grande y me es imposible cumplir mis expectativas, CSSing consiste en generar CSS y Javascript solamente escribiendo código CSS.

Como últimamente esta de moda Javascript estoy adaptando el proyecto, Iván me ayudo en aclarar algunas partes (para que complicarse la vida creando un semilenguaje cuando puedes usar la sintaxis de CSS) y ahora en vez de generar CSS solo se podrá usar para crear Javascript.

Estoy usando Mootools para generar la salida, pero se podrán usar otras librerías (jQuery, Prototype):

//selector:pseudoclass
a#form:mouseover {
    color: #000;
    background-color: effect(#fff);
}

//macro del selector, para no repetir
$:click {    
    send: #form_option;
}

//código generado por el parser
$$('a#form').each(function(el) {
    el.addEvent('mouseover', function(e){
        e.setStyles('color: #000;');
        e.effect('background-color').start(#fff);
    });
    el.addEvent('click', function(e){
        $$('#form_option').send();
    });
});

Obviamente esto es solo un boceto, así que estoy abierto a sugerencias :P.

Es un plugin en pruebas para la versión 1.0 de mootools, añade un nuevo evento llamado backbutton para gestionar los enlaces con anclas y para el botón de retroceso del navegador. Esta basado en statemanager y funciona en la mayoría de los navegadores (en opera estoy intentando arreglar un pequeño fallo.).

http://icebeat.bitacoras.com/mootools/backbutton/#blog

Después de un largo testeo (bugs tontos que no te das cuenta) saco a la luz la nueva versión de postEditor2.0, una versión muy mejorada ya que todo el código esta escrito desde 0. Se acerca mas a lo que debería ser una textarea de edición de código (ojo que no un WYSIWYG que de esos ya tenemos).

Novedades que puedes encontrar en esta versión:

• Auto-Indent en snippets, selecciones y enter, mas que nada para no perder el autotab
• Snippets con tabposition para poder tabular sobre un snippet
• Snippets con autocompletado, la joya de la casa, en un tabposition tienes la opción de tabular hasta el infinito buscando la opción que más te convenga.
• Snippets dinámicos, quien dijo miedo?.
• Auto-pair para comillas, corchetes y todo lo que quieras.
• Sistema de scope
• Aplicar funciones a una selección, o poder elegir que rango seleccionar (útil si quieres buscar una frase o la ultimposicionón de un tag)

Y lo mejor de todo configurable 100% ya que tu defines el lenguaje y las variables.

Mucha gente cree que usar AJAX es difícil pero en realidad es facilísimo, lo que es difícil es aprender javascript para poder usar AJAX en condiciones.

Con mootools tenemos resueltas muchas dificultades, con muy pocas lineas podemos conseguir cosas muy curiosas.

Antes de ponernos hacer algo, hay que tener en cuenta 2 conceptos básicos sobre AJAX.

La codificación: Es lo mas jodido que tenemos nosotros (los que no escribimos en ingles), si usamos acentos o similar suelen aparecer caracteres raros, lo que pasa es que el navegador no sabe que tipo de codificación tiene que devolver ya que no es una pagina entera y no contiene el encode-type (<meta http-equiv="content-type" content="text/html; charset=UTF-8" />).

<?php header('Content-Type: text/html; charset=utf-8'); ?>

El cache: Nuestro amigo el IE suele cachear todas las paginas y en el caso de AJAX si usas datos dinámicos no te servirá de nada, ya que mantiene el cache de la ultima carga. Para ello tienes dos opciones, enviar un argumento con algún parámetro dinámico (una fecha o un random) o enviar una cabecera de respuesta diciendo que no cachee el tema.

<?php header ("Cache-Control: no-cache, must-revalidate "); ?>

Y dicho esto vamos a crear un cargador de paginas.

//mootools.js + cargar.js
//Pasamos 2 argumentos, el div donde cargaremos los datos y la ruta a cargar.
var cargar = function(el,ruta) {
    el = $(el);
    //mientras este cargando no enviamos mas peticiones
    if(el.pg.hasClass('loading')) return false;
    el.toggleClass('loading');
    //estamos cargando
    el.setHTML('Cargando datos...');
    new Ajax(ruta, {
        onComplete:function(e) {
            el.toggleClass('loading');
            //actualizamos contenedor
            el.setHTML(e).effect('opacity').custom(0,1);
        }
    }).request();
    return false;
}

Con esta función tenemos resuelta toda la parte javascript que necesitamos. Ahora toca la parte del servidor, como ya mencione antes hay que tener en cuenta las dos cabeceras (codificación y cache) y para enviarlas usaremos PHP.

<?php 
//mi_pagina.php
header('Content-Type: text/html; charset=utf-8');
header ("Cache-Control: no-cache, must-revalidate ");
?>
<p>Este es el texto html que queremos cargar.</p>

Por ultimo la parte de interacción con el usuario.

<a href="enlace_en_caso_de_no_usar_AJAX.html" 
onclick="return cargar('box','mi_pagina.php');" title="Cargar">Cargar</a>
<!-- Donde cargaremos los datos -->
<div id="box"></div>

Para mantener un poco de paz con aquellos que no tienen javascript activado usamos este tipo de enlaces. Con este ejemplo ya podrás usar AJAX en tus paginas web, con opacidad y todo :P.