Ideas, vivencias y demás :: HTML || JS || Others

April 10, 2007

Acordeón con JQuery

Filed under: HTML || JS || Others, Programación

Aquí va un pequeño eemplo del uso de JQuery. Trata sobre un acordeón, que aunque simple puede resultar útil en cuestiones de presentación, utilización de espacio y servirá para demostrar lo fácil que es utilizar JQuery. Aún me queda mucho por aprender con JQuery, pero espero que este ejemplito sirva a alguien.

Para visualizarlo mejor, copiar el código y ponerlo en tu editor favorito. Aún no me he dado tiemp de agregar algún editor de formatos par ael código de mis post emoticon . AH!, y tambien, no olvidar que se debe descargar la última versión de JQuery e incluirla en el mismo directorio que el ejemplo.

<HTML>
<HEAD>
    <TITLE>Ejemplo</TITLE>
    <SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>
    <SCRIPT type="text/javascript">
        $(document).ready(function()
        {
            // oculta todos los div que se encuentren visibles y esten en el tercer subnivel dentro de la jerarquida de div.
            // En nuestro caso, tenemos un div general, luego los div contenedores, y dentro de cada uno, los div que contienen el texto según cada bloque.
            // Esta acción se realiza sólo la primera vez, cuando la página está cargada
            $("div > div > div:visible").hide();

            // Cada vez que se haga click sobre cualquier enlace que pertenezca a la clase cabecera_bloque, se realizara la función de a continuación
            $("a.cabecera_bloque").click(function()
            {
                // enrolla los div de tercer nivel que se encuentren visibles
                $("div > div > div:visible").slideUp();

                // obtiene el div inmediato superior al enlace sobre el cual se pulso, es decir, el div que contien al enlace pulsado
                var div_medio = $(this).parent();

                // construimos la cadena de busqueda que representa a los div ocultos que se encuentren dentro del div inmediato superior al enlace sobre el cual se ha pulsado
                var div_inferior_oculto = "div#" + div_medio.attr("id") + " > div:hidden";

                // con la cadena construida, procedemos a desenrollar los div respectivos.
                $(div_inferior_oculto).slideDown();

                // para interrumpir y eliminar el comportamiento del enlace, hacemos que retorne false. De esta manera ya no nos redirigira a index1.html#
                return false;
            });
        });
    </SCRIPT>
    <style>    a{ font-weight: bold; } </style>
</HEAD>

<BODY>
<div style="width: 250px">
    <div id="contenedor1" style="background: #FFAAAA">
        <A href="#" class="cabecera_bloque" >Algo de rojo</A>
        <BR />
        <div>
            Contenido del Primer Bloque.
            <BR />
            Contenido del Primer Bloque. Contenido del Primer Bloque.
        </div>
        <div>
            <B>Otro párrafo de</B> Contenido del Primer Bloque.
            <BR />Contenido del Primer Bloque. Contenido del Primer Bloque.
        </div>
    </div>

    <div id="contenedor2" style="background: #AAAAFF">
        <A href="#" class="cabecera_bloque" >Algo de azul</A>
        <BR />
        <div>
            Contenido del Segundo Bloque. Contenido del Segundo Bloque.
            <BR />
            Contenido del Segundo Bloque. Contenido del Segundo Bloque.
        </div>
    </div>

    <div id="contenedor3" style="background: #AAFFAA">
        <A href="#" class="cabecera_bloque" >Algo de verde</A>
        <BR />
        <div>
            Contenido del Tercer Bloque. Contenido del Tercer Bloque.
            <BR />Contenido del Tercer Bloque. Contenido del Tercer Bloque.
        </div>
        <div>
            <B>Otro párrafo de</B> <I>Contenido del Tercer Bloque. Contenido del Tercer Bloque.</I>
        </div>
    </div>
<div width="120px">
</BODY>
</HTML>

Comments (0)

March 22, 2007

Imprimir email anti spammers

Filed under: PHP, HTML || JS || Others, Programación

Smarty es un sistema de templates que te ayuda en la guerra contra el código tallarín. Leyendo sobre configuración, cache (ya vendrán post sobre ésto), encontré una función que puede resultar útil cuando requerimos del "mailto". En realidad más que Smarty, o PHP mismo, es la utilización de javascript para codificar la dirección de email, de tal manera que permanece oculta para los spammers sedientos de direcciones. Sin embargo, leer la advertencia: "Este metodo no es 100% a pueba de fallas. Un spammer podría crear un programa para recolectar el e-mail y para decodificar estos valores, mas no es muy común."

Bueno, y que se necesita?. Pues anda más que el Smarty puesto y configurado, y poner en el template que deseas, la línea:

{mailto address=pepelucho@gmail.com encode="javascript"}

Así de simple, así de sencillo. Si lo probamos,veremos en el código fuente donde se vería comunmente el email, esto:

Moraleja: revisar la ayuda del Smarty, es una gran guía para descubrir sus ventajas.

Comments (0)

En exploración

Filed under: Proyectos, PHP, HTML || JS || Others, Programación

La mejor forma de aprender sobre algo es con la práctica. Pasa con los lenguajes de programación, y también con las metodologías de desarrollo de sofware. Dado que me interesaba aprender XP y dado que tengo un proyecto entre manos que se adecúa al perfil del "proyecto XP", me decidí a utilizala.

Una parte de la etapa de exploración en la metodologia XP es la revisión de las lenguajes y herramientas a utilizar para el desarrollo del software. En mi caso, las herramientas a usar son MySQL 5, PHP 5, ORM.php, AdoDB, Smarty y JQuery. En las primeras 4 me defiendo, a Smarty ya lo he utilizado pero aprovecho para revisar un poco más, y JQuery es la novedad.

Mas tiempo me tomará el revisar JQuery, puesto que como dije es novedad para mi (tiene tiempo de existir, pero recien lo vengo a utilizar), y aunado a eso, no suelo utilizar mucho javascript.

Producto de todo este proceso de revisión y aprendizaje, saldrán algunas cosas que podría compartir mediante algún post (como que refuerza mi aprendizaje, y queda apuntado para cuando lo olvide ). De hecho, ahora hay un par de cosas que deseo escribir. Manos a la obra.

Salu2.

Comments (0)