domingo, 9 de octubre de 2011

Sistema de Noticias con Prototype y Scriptaculous

En este ejercicio implementamos un sistema de novedades utilizando Scriptaculous y Prototype. Inicilamente se muestra un resumen de las noticias publicadas y a pedido del usuario se expande la noticia completa.

Es una función muy simple y fácil de implementar dado que se encuentra embebida en un DIV, por lo que puedes ubicarla donde más te guste. Además desde CSS puedes modificar todos los aspectos, tamaño, fuentes y colores.

viernes, 7 de octubre de 2011

Scriptaculous - Efecto SlideUp

El efecto SlideUP de Scriptaculous es el opuesto a SlideDown. Es un efecto de cierre que nos permite ocultar elementos de nuestro DOM como si fuese una persiana que se levanta.

Para invocar el efecto desde Javascript utilizamos la siguiente sintáxis:

Effect.BlindUp('id_del_elemento');

Esta es la forma predeterminada de utilizarlo, así utilizamos las opciones por defecto. A continuación la lista de opciones configurables de SlideUp:

scaleX                       boolean, defaults to false
scaleY                       boolean, defaults to true
scaleContent            boolean, defaults to true
scaleFromCenter     boolean, defaults to false
scaleMode               string, defaults to ‘box', can also be ‘contents‘
scaleFrom                integer value, percentage (0%–100%), defaults to 100
scaleTo                    integer value, percentage (0%–100%), defaults to 0
duration                   float value, in seconds, defaults to 1.0

Se podría invocar el efecto para que cultar el elemento más despacio de la siguiente manera:

Effect.BlindUp('id_del_elemento' , {duration:3.0});

Puedes ver más detalles de este efecto aquí

Ver ejemplo

miércoles, 5 de octubre de 2011

Scriptaculous - Efecto SlideDown

SlideDown es un efecto de scriptaculous que permite mostrar un elemento del DOM que se encuentra oculto. Esta es la sintáxis para invocar esta función desde javascript:

Effect.SlideDown('id_del_elemento');

De esta forma utilizamos el efecto con sus valores por defecto, a continuacuón la lista  opciones de SlideDown:

scaleX boolean, defaults to false
scaleY boolean, defaults to true
scaleContent boolean, defaults to true
scaleFromCenter boolean, defaults to false
scaleMode string, defaults to ‘box', can also be ‘contents‘
scaleFrom integer value, percentage (0%–100%), defaults to 100
scaleTo integer value, percentage (0%–100%), defaults to 0
duration float value, in seconds, defaults to 1.0

Podriamos invocar el efecto de modo que dure más tiempo

Effect.SlideDown('id_del_elemento' , {duration:2.0});

Puedes ver más detalles acerca de este efecto aquí

Ver ejemplo

lunes, 3 de octubre de 2011

FUNCIÓN $A

La función $A de Prototype genera una array a partir de una colección de valores. Veamos algunos ejemplos para comprender mejor su funcionamiento.

En este ejemplo convertimos en un array a la secuencia de valores generada por la función $R

<script>
     var valores = $R(  'a' , 'e' );
     var array_de_valores = $A(valores);
     alert (array_de_valores [3]); --> d
</script>

El código anterior también podríamos escribirlo de la siguiente manera:

<script>
     var valor = $A($R(  'a' , 'e' ));
     alert (valor[2]);
--> c
</script>

Veamos ahora como $A nos permite crear un arreglo a partir de una colección de elementos del DOM

<script>
    var valores = $A(document.getElementsByTagName('input'));
    var mostrar = valores[2].value;
    alert (mostrar); --> texto3
</script>

<body>
   <input type="text" value="texto1">
   <input type="text" value="texto2">
   <input type="text" value="texto3">
   <input type="text" value="texto4">
</body>

También podríamos acceder a los elemntos del DOM a través de su id o clase

<script>
    var valores = $A($$('.caja'));
    var mostrar = valores[3].value;
    alert (mostrar); --> texto4
</script>

<body>
   <input type="text" value="texto1" class="caja">
   <input type="text" value="texto2" class="caja">
   <input type="text" value="texto3" class="caja">
   <input type="text" value="texto4" class="caja">
</body>

Una vez construido el array con $A, podemos acceder a cada elemento y aplicarle las distintas funciones de Prototype, por ejemplo, siguiendo el ejemplo anterior, podríamos cambiar el value de unos de los input y luego mostrar el nuevo valor:

<script>
    var valores = $A($$('.caja'));
    valores[3].value = "nuevo valor";
    var mostrar = valores[3].value;
--> nuevo valor
</script>

sábado, 1 de octubre de 2011

FUNCIÓN $R

La función $R de Prototype se utiliza para generar una secuencia de valores consecutivos, ya sean numéricos, textuales o de otro tipo que semánticamente sean compatibles con rangos de valores. Para ilustrar un poco el funcionamiento y salvando la distancia $R es más o menos como la función "Rellenar serie de Excel".

La sintáxis básica es muy simple: $R(start, end) donde start y end serán los valores donde debe comenzar y terminar la serie de valores respectivamente, por ejemplo:

$R( 0 , 5 ) --> 012345
$R( 'a' , 'e' ) --> abcde
$R( '1a' , '1e' ) --> 1a1b1c1d1e
$R( 'a1' , 'a5' ) --> a1a2a3a4a5

Con $R podemos utilizar el método join, con éste incorporamos el separador deseado a la lista de valores generada, (join contempla los espacios en blanco al momento de definir el separador) por ejemplo:

$R( 0 , 5 ).join(',') --> 0,1,2,3,4,5
$R( 'a' , 'e' ).join(' ;... ') --> a ;... b ;... c ;... d ;... e
$R( '1a' , '1e' ).join(' / ') --> 1a / 1b / 1c / 1d / 1e
$R( 'a1' , 'a5' ).join(' separador ') --> a1 separador a2 separador a3 separador a4 separador a5

$R tiene un tercer parámetro en su sintáxis con el cual podemos indicar si el valor definido como final se incluye o no en la secuencia. Es un valor booleano: false --> incluye y true --> excluye. Por defecto es false.

$R( 0 , 5 ).join(',') --> 0,1,2,3,4,5
$R( 0 , 5 , false).join(',') --> 0,1,2,3,4,5
$R( 0 , 5, true ).join(',') --> 0,1,2,3,4

Podemos consultar a $R si dentro de la secuencia que generó existe un determinado valor, para ello utilizamos el método include. Este método devuelve true si encuentra el valor dentro de la secuencia y false si no lo encuentra:

$R( 0 , 5 ).include(5) --> true
$R( 0 , 5 , true ).include(5) --> false
$R( 0 , 5 ).include(15) --> false

Podemos utilizar el método each para recorrer los valores de la secuencia generada por $R

$R( 0, 5, true ).each(function(valor){
      alert (valor);
});

jueves, 29 de septiembre de 2011

Slideshow con Prototype y Scriptaculous

Hace un tiempo publicamos un slideshow de imágenes, pero notamos que tenía cierta dificulad a la hora de agregar imagenes, había que retocar el código javascript para que funcione y eso no está bien. Así que, corregimos ese ejercicio para salvar este inconveniente y acá les dejamos un slideshow de imágenes múltiples más sensillo y más fácil de implementar. Seguimos utilizando Prototype y Scriptaculous pero de una forma más eficiente.

Como en el caso anterior, este slideshow no tiene controles, simplemente muestra las imagenes indicadas en un ciclo continuo, utilizando el efecto fade de Scriptaculous para iteración entre las imágenes.

martes, 27 de septiembre de 2011

Formulario de acceso estilo Blogger

En esta ocación les traemos un fomulario de acceso o login similar al utilizado por Blogger. Lo interesante es que todos los efectos se basan en CSS. Google no utiliza en este caso ninguna librería o Framework extra simplemente líneas de CSS.

Se utilizan varios comandos de CSS3, esto significa que funciona "a pleno" en los navegadores que interpreten CSS3, de no ser así no se desvirtúa el formulario simplemente no se apreciarán algunos efectos de sombras.

Todo el contenido está encerrado en un DIV por lo que resulta muy fácil de implementar en cualquier proyecto.

domingo, 25 de septiembre de 2011

Scriptaculous - Efecto Grow

Grow es un efecto de apertura de Scriptaculous. Este efecto nos permite mostrar un contenido oculto. Para invocarlo desde javascript:

Effect.Grow('id_del_elemento');

De esta forma utilizamos el efecto con sus valores por defecto. Pero Grow nos ofrece 3 atributos:
  • Duration - nos permite controlar el tiempo que dura el efecto. Por defecto 1.0
  • Direction - Nos permite controlar desde que dirección comienza el efecto, 'top-left', 'top-right', 'bottom-left', 'bottom-right'. Por defecto "center".
Entonces podríamos hacer esta llamada:

Effect.Grow('id_del_elemento',{duration:3.0 , direction:'top-left'});

Si quieres ver más detalles sobre este efecto pulsa aquí

Ver ejemplo

viernes, 23 de septiembre de 2011

Scriptaculous - Efecto Fade

Fade es el efecto opuesto de Appear. Es un efecto de cierre por tanto nos es útil para ocultar contenido que se encuentre visible. Tenemos dos maneras de invocar este efecto desde javascript:

Effect.Fade('id_del_elemento');

$('id_del_elemento').fade();

En este caso estamos utilizando el efecto con sus valores por defecto. Pero Fade incluye el atributo duration (entre otros) que nos permite controlar la duración del efecto: 

Effect.Fade('id_del_elemento',{duration: 3.0});

$('id_del_elemento').fade({duration: 3.0});

Aquí puedes ver más detalles acerca del efecto Fade

Ver ejemplo

miércoles, 21 de septiembre de 2011

FUNCIÓN $F

La función $F de Prototype se utiliza para obtener directamente el valor de un campo de formulario. Esta función simplifica el uso de document.getElementById("elemento").value de javascript. Veamos un ejemplo:

Tenemos este formulario:

<form>
   <input type="text" id="texto">
   <textarea id="area"></textarea>
   <select id="lista"></select>
</form>

Si quisieramos obtener el valor de cada uno de los elementos de este formulario con javascript sería:

texto = document.getElementById("texto").value
area = document.getElementById("area").value
lista = document.getElementById("lista").value

Con Prototype sería:

texto = $F("texto")
area = $F("area")
lista = $F("lista") 

Otra forma de obtener el valor de un campo de formulario con prototype sería utilizando la función $:

texto = $("texto").value
area = $("area").value
lista = $("lista").value

O bien de esta forma

valores = $("texto","area","lista").value