Octubre 17th, 2008

Cajas de Igoogle

Llevo bastante tiempo intentando lograr hacer el efecto de arrastrar y soltar de las cajas de igoogle, hay poquísima información en la red respecto a cómo se consigue crear este efecto, a pesar de que es algo muy interesante a nivel de diseño.

Cajas Igoogle

¿Como he conseguido lograr el efecto? La base de todo es la clase prototype que podeis descargar desde ese link. Prototype es un framework hecho en JavaScript que se sirve para ayudar a un desarrollo sencillo y dinámico de aplicaciones web (como cualquier framework) con el uso de técnicas Ajax.
Luego mediante CSS, y definiendo las capas en el init() de javascript (se encuentr todo en el fichero index.html) podremos adaptarlo como queramos.

Enlaces |DemoPrototype

Mayo 29th, 2008

Ajax en php

Hoy en día resulta algo feo ver una página que no utiliza ajax, a los usuarios no nos gusta mucho ver como nuestras páginas vuelven a cargar a la hora de enviar un formulario, subir una imagen etc, etc.

La manera más sencilla de empezar a utilizar ajax si no controlamos javascript (javascript es el lenguage del futuro, intenta aprenderlo!), es con la clase xajax, que nos trae un cumulo de funciones que simplifican nuestra tarea. Está bastante bien implementada, y no le falta de nada. A continuación explicaré por qué resulta tan sencillo:

<?php
    include './xajax/xajax_core/xajax.inc.php';$xajax = new xajax();
    $rqstAdd =& $xajax->
                            register(XAJAX_FUNCTION, 'doAdd');

    $rqstReset =& $xajax->register(XAJAX_FUNCTION, 'doReset');
    // set the parameters$rqstAdd->
                                setParameter(0, XAJAX_JS_VALUE, 39);
    $rqstAdd->setParameter(1, XAJAX_JS_VALUE, 571);

    $xajax->processRequest();

    function doAdd($a, $b)
    {
        $response = new xajaxResponse();

        $response->assign('answer', 'innerHTML', $a + $b);
        $response->assign('reset', 'style.display', 'block');

        return $response;
    }

    function doReset()
    {
        $response = new xajaxResponse();

        $response->clear('answer', 'innerHTML');
        $response->assign('reset', 'style.display', 'none');

        return $response;
    }

?>

Las funciones doreset y do add son las que proximamente podremos llamar desde cualquier parte de la pagina, sin necesidad de volver a cargarla!

<form action="#" method="post">
    <input type="button" onclick="<?php $rqstAdd->printScript();
                                ?>" id="btnAdd" value="Click Me" />
    <input type="button" onclick="<?php $rqstReset->printScript();
                                ?>" id="btnReset" value="Reset" />
    <p id="answer"></p>
</form>

ahí esta el truco,  llamamos a las funciones en javascritp pero gracias a el objeto XmlHttpRequest, podemos interactuar con los ficheros php.

Link  | xajaxproject