martes, 8 de noviembre de 2011

Scriptaculous - Efecto DropOut

El efecto DropOut de Scriptaculous es un efecto de cierre y es la combinación de dos efectos Drop y Fade. El elemento afectado experimenta una "caída" al tiempo que se desvanece. Este efecto funciona bien con los elementos html de bloque como DIV,P,H1,H2,etc.. a excepción de las tablas.


Effect.DropOut('id_del_elemento');
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.DropOut('id_del_elemento',{duration: 3.0});
Observe que los atributos como duration se escriben en fomato JSON.

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

Ver ejemplo

domingo, 6 de noviembre de 2011

MÉTODO Succ

El método Succ() de Prototype devuelve el sucesor del número actual, según la definición devuelve actual + 1.

-123.51.succ(); --> -122.51
123.51.succ(); --> 124.51
-123.succ(); --> -122
124.succ(); --> 125

Veamos algunos ejemplos de como utilizar este método:

<script>
 var numero = 127;
 var numero_succ = numero.succ();
 alert(numero_succ);
--> 128
</script>

Podriamos utilizarlo en combinación con otros métodos:

<script>
 var numero = -127.79;
 var numero_succ = numero.floor().abs().succ();
 alert(numero_succ);
--> 129
</script>

viernes, 4 de noviembre de 2011

MÉTODO Round

El método Round() de Prototype redondea el número dado al valor entero más cercano. El número dado puede ser positivo, negativo o decimal.

123.round(); -->123
123.2.reound(); --> 123
123.49.round(); --> 123
123.5.round(); --> 124
123.879.round(); --> 124






-123.round(); --> -123
-123.2.reound(); --> -123
-123.49.round(); --> -123
-123.5.round(); --> -123
-123.879.round(); --> -124

Veamos algunos ejemplos de como utilizar este método:

<script>
 var numero = -123.51;
 var numero_round = numero.round();
 alert(numero_round);
--> -124
</script>

Podríamos utilizarlo en combinación con otros métodos:

<script>
 var numero = -123.51;
 var numero_round = numero.ceil().abs().round();
 alert(numero_round);
--> 123
</script>

miércoles, 2 de noviembre de 2011

MÉTODO Floor

El método Floor() de Prototype devuelve el mayor entero menor o igual al número dado. El número dado puede ser positivo, negativo o decimal.

-123.ceil(); --> -123
123.ceil(); -- 123
-123.56.ceil(); --> -124
123.56.ceil(); --> 123

Veamos algunos ejemplos de como utilizar este método:

<script>
 var numero = -123.56;
 var numero_floor = numero.floor();
 alert(numero_floor);
--> -124</script>


También podríamos utilizarlo en combinación con otros métodos:

<script>
 var numero = -123.56;
 var numero_floor = numero.abs().floor();
 alert(numero_floor);
--> 123</script>

lunes, 31 de octubre de 2011

MÉTODO Ceil

El método Ceil() de Prototype devuelve el menor entero mayor o igual al número dado. El número dado puede ser positivo o negativo y puede contener decimales.

-123.ceil(); --> -123
123.ceil(); -- 123
-123.56.ceil(); --> -123
123.56.ceil(); --> 124

Veamos algunos ejemplos de como utilizar este método:

<script>
 var numero = -123.8;
 var numero_ceil = numero.ceil();
 alert(numero_ceil);
--> -123
</script>


También podríamos utilizarlo en combinación con otros métodos:

<script>
 var numero = -123.8;
 var numero_ceil = numero.abs().ceil();
 alert(numero_ceil);
-->124</script>

sábado, 29 de octubre de 2011

MÉTODO Abs

El método Abs() de Prototype devuelve el valor absoluto de un número dado.

123.abs() --> 123

-123.abs() --> 123

Veamos un ejemplo de como utilizar este método:

<script>
 var numero = -123;
 var valor_absoluto_numero = numero.abs();
 alert(valor_absoluto_numero);
--> 123
</script>

También podríamos utilizarla de la siguiente manera:

<script>
 var numero1 = -123;
 var numero2 = 123;
 var suma = numero1.abs() + numero2.abs();
 alert(suma);
--> 246
</script>

jueves, 27 de octubre de 2011

MÉTODO Empty

El método Empty() de Prototype comprueba si una cadena está vacía. Entendiendo que una cadena es vacía cuando no contine ningún caracter. El resultado de empty es booleano. True si la cadena es vacía o False si no lo es.

''.empty(); --> true

'  '.empty(); --> false
 'a'.empty(); --> false

' 12 '.empty(); --> false

Veamos un ejemplo de como utilizar este método

<script>
 function comprobar(){
  if ($('textbox').value.empty())
   alert ('caja vacía');
  else
   alert ('caja con texto');
 }
</script>

<body>
 <input type="text" id="textbox">
 <input type="button" value="Comprobar" onclick="comprobar()">
</body>

martes, 25 de octubre de 2011

MÉTODO Dasherize

El método Dasherize() de Prototype reemplaza cualquier caracter "_" (guión bajo) existente en una cadena por "-" (dash o guión medio).

'border_bottom_width'.dasherize(); --> 'border-bottom-width'

Veamos un ejemplo de como utilizar este método:

<script>
var texto = "frase_separada_por_guiones";
var texto_dashes = texto.dasherize();
alert(texto_dashes);
-->frase-separa-por-guiones
</script>

El método reemplaza cualquier guión bajo que encuentre en la cadena, sin importar el lugar o la cantidad por un guión medio.

"_casa   _nueva".dasherize(); --> "-casa  -nueva"

"_casa   ____nueva".dasherize(); --> "-casa  -----nueva"

"_______________".dasherize(); --> "------------------"

"casa nueva ___".dasherize(); --> "casa nueva ---"

domingo, 23 de octubre de 2011

MÉTODO Blank

El método Blank() de Prototype se utiliza para comprobar si una cadena de texto  esta " en blanco"  es decir que está vacía (longitud de 0) o que sólo contiene espacios en blanco. Blank devuelve true en caso de hallar vacía la cadena y false en caso contrario.

"".blank(); --> true
"     ".blank(); --> true
" a " .blank() --> false

Veamos como utilizar este método: por ejemplo verifiquemos si una caja de texto (textbox) tiene o no contenido:

<script>
function comprobar(){
if ($('textbox').value.blank())
    alert ('caja vacía');
else
    alert ('caja con texto');   
}
</script>


<body>
            <input type="text" id="textbox">
            <input type="button" value="Comprobar" onclick="comprobar()">
</body>

Pudes ver más detalles de este método en este link

viernes, 21 de octubre de 2011

MÉTODO Camelize

El método Camelize() de Prototype recibe una cadena de texto separada por guines (cadena-de-texto) y la convierte en un equivalente del tipo camelCase (cadenaDeTexto).

'background-color'.camelize();  -> 'backgroundColor'

'-moz-binding'.camelize();  -> 'MozBinding'

Veamos un ejemplo de como utilizar este método:

<script>
     var texto =  "la-casa-del-lago";
     var texto_camelizado = texto.camelize();
         alert (texto_camelizado); -->laCasaDelLago
      });
</script>

Otra manera en que podríamos utilizarlo sería:

<script>
     var texto = $w('casa-pequeña auto-grande avión-alto barco-largo').each(function(transporte){
         alert (transporte.camelize());
-->casaPequeña autoGrande aviónAlto barcoLargo
      });
</script>

Para ver más detalles acerca de este método haz clic aquí

miércoles, 19 de octubre de 2011

MÉTODO Capitalize

El método Capitalize() de Prototype actúa sobre una cadena de texto transformando en mayúscula la primer letra de la cadena y en minúsculas todas las demás.

"hola".capitalize(); --> Hola
"HOLA MUNDO".capitalize() --> Hola mundo

Veamos un ejemplo de como usar este método:

<script>
     var texto = "CAPITALIZAR ESTA CADENA";
     var texto_capitalizado = texto.capitalize();
     alert(texto_capitalizado);
--> Capitalizar esta cadena</script>

Otra forma podría se esta:

 
<script>
     var texto = $w('casa auto avión barco').each(function(transporte){
          alert (transporte.capitalize());
--> Casa Auto Avión Barco      });
</script>



En este link hallarás más información acerca de este método

lunes, 17 de octubre de 2011

FUNCIÓN $W

La función $W de Prototype convierte una cadena de texto en una matriz o array, tratando a todos los espacios en blanco como delimitadores y reemplazandolos por comas. No importa la cantidad de espacios en blanco que haya entre las palabras, se cuentan como uno y se reemplazan por una coma.

$w('fruitillas manzanas  peras       bananas') --> ['fruitillas','manzanas','peras','bananas']

Conociendo la sintáxis de $W, veamos algunos ejemplos:

<script>
var frutas = $w('fruitillas manzanas peras bananas');
alert (frutas[1]) --> manzanas
</script>

Puedo aplicar el método each a $W de la siguiente manera:

<script>
$w('fruitillas manzanas peras bananas').each(function(frutas){
alert (frutas) ;
});
</script>

También podría utilizarla de esta manera:
$w('fruitillas manzanas peras bananas').each(Element.hide);

En definitiva $W nos permite crear un array sin preocuparnos por las comillas y las comas que deberíamos escribir en la construcción tradicional de un arreglo. Con $W es suficiente escribir los valores separados por un espacios y listo.

Si quieres conocer más detalles acerca de $w visita este link 

sábado, 15 de octubre de 2011

MÉTODO Insert

El método Insert de Prototype permite insertar contenido a un elemento dado (por ejemplo un DIV). Si el elemento no contiene contenido insert actualizará el elemento. Si el elemento ya tiene contenido insert le agregará el contenido pudiendo indicarle si debe hacerlo por encima o por debajo del contenido existente. Insert permite la inserción de cadenas de texto,  cadenas HTML o cualquier elemento del DOM.

Opciones de Insert:
Top: Inserta el contenido indicado dentro del elemento por encima del contenido existente.
Bottom: Inserta el contenido indicado dentro del elemento por debajo del contenido existente.
After: Inserta el contenido debajo del elemento
Before: Inserta el contenido por encima del elemento

Veamos algunos ejemplos para comprender mejor este método. Supongamos este contenido en nuestra página web, un div con id=caja con los estilos convenientes.

<body>
     <div id="caja"></div>
</body>

Usando el método insert puedo puedo agregarle contenido HTML de la siguiente manera:

<script>
      $('caja').insert("<p>Nuevo contenido para caja</p>");
</script>

Es posible insertar un elemento del DOM nuevo: en este caso insertamos la etiqueta img y le asignamos la imagen logo.png con un ancho de 100. Top le indica a insert que si existe contenido en 'caja' la imagen la coloque encima de éste.

<script>
      $('caja').insert({ top: new Element('img', {src: 'logo.png', width: '100'})});
</script>

 Si querés conocer más detalles acerca de este método pulsá aquí

jueves, 13 de octubre de 2011

Tabla con CSS

La idea de este ejercicio fue generar una tabla sin utilizar la etiqueta <table> de HTML. Dado la complejidad que representa el uso de esta etiqueta a la hora de dar formato.

En este caso utilizamos etiquetas DIV y puro CSS para construir una tabla, lo que la hace totalmente configurable en tamaño, color, fuentes, overflow, etc. Además la tabla esta contenida por un DIV lo que la hace fácil de incorporar. Ideal para generar contenido server-side.

Incorporamos un poco de Prototype para generar un cambio de color en la fila al momento de pasar el mouse por encima de ella.

martes, 11 de octubre de 2011

Panel contraible

Nos propucimos hacer un panel que se oculte a pedido del usuario. Utilizando Prototype y Scriptaculous logramos el efecto.

La idea se trata de dos paneles (izquierdo y derecho), a través de un link el usuario puede ocultar el panel izquierdo para ver mejor el contenido del panel derecho. Del mismo modo puede pedir la apertura del panel oculto.

Es simple de implementar y de estilizar. Como siempre lo hemos contruido dentro de un DIV de modo que resulte fácil de incorporar en cualquier sitio.


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

lunes, 19 de septiembre de 2011

Slideshow de imágenes con Scriptaculous

En este ejercicio creamos un slideshow de imágenes muy simple utilizando Prototype y los efectos Appear y Fade de Scriptaculous.

Ideal para hacer un slide continuo. No tiene controles. Es muy fácil de implementar y de agregarle imagenes al slide. Dado que está dentro de un contenedor DIV es totalmente configurable desde CSS. Podemos adaptarlo a cualquier tamaño de imagen y colocarlo en cualquier lugar de nuestro sitio.

sábado, 17 de septiembre de 2011

¿Cómo incluir Scriptaculous en un documento HTML?

Scriptaculous utiliza Prototype para el desarrollo de sus herramientas, por tanto para poder utilizar Scriptaculous en necesario previamente haber incluído la librería de Prototype en nuestro documento HTML. En este enlace se explica como incluir Prototype.

Ya tenemos incluida la librería de Prototype, ahora veamos como incluir la librería de Scriptaculous:

1) Descargar la librería de Scriptaculous. Es recomendable descargarla regularmente para mantenernos actualizados respecto de las mejoras y correciones que recibe la librería.

La descarga consiste en un archivo .zip que contiene 3 carpetas ( lib - src - test ) y algunos archivos fuera de éstas. Bien, para trabajar nos basta con la carpeta SRC el resto se utiliza para los ejemplos, así que podemos borrar todo excepto la carpeta SRC. Digo esto para no ocupar espacio con archivos innecesarios.

La carpeta SRC contiene estos archivos:
  • builder.js
  • controls.js
  • dragdrop.js
  • effects.js
  • scriptaculous.js
  • slider.js
  • sound.js
  • unittest.js
2) Veamos la forma más habitual de incluir Scriptaculous:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="src/scriptaculous.js"></script>
</head>

<body>
</body>
</html>
 
En negrita aparece el código necesario y en ese orden. Observe que declaramos un doctype, incluimos prototype y luego incluimos scriptaculous.js
La función de scriptaculous.js es la de incluir el resto de los archivos js que compenen la librería de Scriptaculous. Es decir que no es necesario incluir uno a uno todos los archivos. De esta manera tenemos disponibles todas las herramientas de Scriptaculous.

Pero no siempre se utilizan todas las herramientas de la librería, así que está bien si solo incluimos el archivo que necesitamos en nuestro proyecto. Por ejemplo, si solo utilizamos los efectos de Scriptaculous podemos hacer la inclusión de la siguiente manera:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="src/effects.js"></script>
</head>

<body>
</body>
</html>

jueves, 15 de septiembre de 2011

Scriptaculous - Efecto SwitchOff

SwitchOff es otro efecto de cierre que nos ofrece Scriptaculous. El simple pero atractivo, trata de emular el apagado de una TV.

Para invocarlo desde javascript

Effect.SwitchOff('id_del_elemento');

SwitchOff acepta el uso del atributo duration, pero al utilizarlo se pierde un poco el sentido del efecto.

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

Puedes ver más detalles de este efecto aquí

martes, 13 de septiembre de 2011

Scriptaculous - Efecto BlindUp

BlindUP es el opuesto a BlindDown, el efecto tipo persiana hacia arriba que nos permite ocultar un contenedor DIV de nuestro DOM. Funciona con la mayoría de los elementos del DOM de tipo bloque a excepción de las tablas.

El efecto se invoca desde javacript de la siguiente manera:

Effect.BlindUp('id_del_elemento');

Podemos utilizar el atributo duration para manipular la duración del efecto
Effect.BlindUp('id_del_elemento', { duration: 3.0 });

BlindUp provee otros atributos que permiten personalizar muy bien el efecto, puedes ver más aquí

domingo, 11 de septiembre de 2011

Efectos de cierre de Scriptaculous

Cuando hablamos de efectos de cierre, no referimos a la forma en que "se ocultará" un objeto contenedor en nuestra web. Entendemos por objeto contenedor a la etiqueta <DIV></DIV>.

La idea es que inicialmente "el contenedor"  se muestre hasta tanto el visitante solicite "ocultarlo", en ese momento le cerramos "el contenedor" y todo su contenido aplicando alguno de los efectos de cierre que ofrece Scriptaculous.

Entonces comenzamos por crear un objeto contenedor, identificándolo mediante el atributo id:

<div id="contenedor"></div>

Luego incluimos algún contenido a nuestro contenedor, un texto, una tabla, un formulario, una imagen, etc.

<div id="contenedor">
 Este es el contenido de mi contenedor
</div>

Ahora debemos mostrar nuestro contenedor, para esto utilizamos el atributo display:block de css. Es importante aplicar este atributo en la definición del contenedor. Si lo hacemos desde una hoja de estilos el efecto de Scriptaculous no funcionará.

<div id="contenedor" style='display:block;'>
 Este es el contenido de mi contenedor
</div>

Podemos utilizar una hoja de estilo o definir estilos para darle forma a  nuestro contenedor

#contenedor{
width: 200px;
height: 200px;
background-color: #CCCCCC;
}

Ahora demos la oportunidad al visitante de cerrar nuestro contenido oculto, por ejemplo utilizando un botón. La función de éste es llamar a una función javascript que se encargará de ocultar nuestro contenedor. Supongamos que la función se llama ocultar_contenido:

<div id="contenedor" style='display:block;'>
 Este es el contenido de mi contenedor
</div>
<input type="button" value="Ver contenido" onclick="ocultar_contenido()">

Ahora veamos nuestra función javascript:

<javascript>
function ocultar_contenido(){
$('contenedor').hide(); 
}//fin ocultar_contenido
</javascript>

$('contenedor') es la función Prototype que nos permite identificar a nuestro contenedor dentro del DOM de nuestra página y hide() es el efecto Scriptaculous que se aplica al contenedor identificado. Show es el efecto más básico, más adelante mostraremos efectos de apertura más interesantes.

Lo único que nos falta para que esto funciones es definir correctamente nuestro encabezado HTML e incluir las librerías de Prototype y Sriptaculous

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="scriptaculous/scriptaculous.js"></script>
</head>

Finalmente el código de este ejemplo nos quedaría así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous/scriptaculous.js"></script>

<javascript>
function ocultar_contenido(){
$('contenedor').show(); 
}//fin ocultar_contenido
</javascript>

<style>
#contenedor{
width: 200px;
height: 200px;
background-color: #CCCCCC;
}
</style>
</head>

<body>

<div id="contenedor" style='display:block;'>
 Este es el contenido de mi contenedor
</div>
<input type="button" value="Ver contenido" onclick="ocultar_contenido()">

</body>
</html>

viernes, 9 de septiembre de 2011

Scriptaculous - Efecto BlindDown

BlindDown es un efecto de scriptaculous que permite mostrar un elemento del DOM que se encuentra oculto. Este efecto simula una persiana de ventana, donde el contenido del elementos afectados permanecer en su lugar.

Para aplicar el efecto, el bloque DIV debe estar oculto, para ello debes utilizar la propiedad display:none;  dentro del atributo style de la etiqueta, y no en la clase CSS para el div.

La forma de invocar el efecto desde javascript es la siguiente:

Effect.BlindDown('id_del_elemento');

El efecto tiene varios atributos que puedes ver aquí, el ejemplo que sigue a continuación muestra las opciones por defecto del efecto y la utilización del atributo duration.

miércoles, 7 de septiembre de 2011

Scriptaculous - Efecto Appear

Venimos hablando de los efectos de apertura de Scriptaculous. En este caso traemos a la mesa el efecto Appear.

Éste se aplica desde javascript sobre una objeto contenedor DIV identificado por una ID y que debe tener asignado el estilo style='display:none;'.

Por ejemplo: si nuestro DIV oculto con display:none tiene id='caja', podemos invocar el efecto Appear para mostrarlo, de dos maneras distintas:

$('#caja').appear();

Effect.Appear('caja');

Podemos usar cualquiera de estas dos formas, ambas son correctas y muestran el efecto con sus valores por defecto. Pero Appear nos ofrece el atributo Duration que nos permite manipular la duración del efecto.

$('#caja').appear({duration:3.0});

Effect.Appear('caja',{duration:5.0});

Appear incluye algunas opciones de uso que puedes ver aquí

lunes, 5 de septiembre de 2011

Efectos de apertura de Scriptaculous

Cuando hablamos de efectos de apertura, no referimos a la forma en que "aparecerá" un objeto contenedor en nuestra web. Entendemos por objeto contenedor a la etiqueta <DIV></DIV>.

La idea es que inicialmente "el contenedor" no se muestre hasta tanto el visitante solicite "verlo", en ese momento le mostramos "el contenedor" y todo su contenido aplicando alguno de los efectos de apertura que ofrece Scriptaculous.
Entonces comenzamos por crear un objeto contenedor, identificándolo mediante el atributo id:

<div id="contenedor"></div>

Luego incluimos algún contenido a nuestro contenedor, un texto, una tabla, un formulario, etc.

<div id="contenedor">
 Este es el contenido de mi contenedor
</div>

Ahora debemos ocultar nuestro contenedor, para esto utilizamos el atributo display:none de css. Es importante aplicar este atributo en la definición del contenedor. Si lo hacemos desde una hoja de estilos el efecto de Scriptaculous no funcionará.
<div id="contenedor" style='display:none;'>
 Este es el contenido de mi contenedor
</div>

Podemos utilizar una hoja de estilo o definir estilos para darle forma a  nuestro contenedor

#contenedor{
width: 200px;
height: 200px;
background-color: #CCCCCC;
}

Ahora demos la oportunidad al visitante de ver nuestro contenido oculto, por ejemplo utilizando un botón. La función de éste es llamar a una función javascript que se encargará de mostrar nuestro contenedor oculto. Supongamos que la función se llama mostrar_contenido:

<div id="contenedor" style='display:none;'>
 Este es el contenido de mi contenedor
</div>
<input type="button" value="Ver contenido" onclick="mostrar_contenido()">

Ahora veamos nuestra función javascript:

<javascript>
function mostrar_contenido(){
$('contenedor').show(); 
}//fin mostrar_contenido
</javascript>

$('contenedor') es la función Prototype que nos permite identificar a nuestro contenedor oculto dentro del DOM de nuestra página y show() es el efecto Scriptaculous que se aplica al contenedor identificado. Show es el efecto más básico, más adelante mostraremos efectos de apertura más interesantes.

Lo único que nos falta para que esto funciones es definir correctamente nuestro encabezado HTML e incluir las librerías de Prototype y Sriptaculous

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="scriptaculous/scriptaculous.js"></script>
</head>

Finalmente el código de este ejemplo nos quedaría así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous/scriptaculous.js"></script>

<javascript>
function mostrar_contenido(){
$('contenedor').show(); 
}//fin mostrar_contenido
</javascript>

<style>
#contenedor{
width: 200px;
height: 200px;
background-color: #CCCCCC;
}
</style>
</head>

<body>

<div id="contenedor" style='display:none;'>
 Este es el contenido de mi contenedor
</div>
<input type="button" value="Ver contenido" onclick="mostrar_contenido()">

</body>
</html>

sábado, 3 de septiembre de 2011

Formulario estilo Wordpress

En este ejercicio nos propucimos replicar un formulario con estilos similares a los utilizados por Wordpress. Dado que está basado completamente en CSS resulta muy fácil de configurar o adaptar a cualquier proyecto.

Incluimos una ayuda al usuario que se activa cuando un elemento del formulario recibe foco. Para ello nos valimos de algunas de funciones de Prototype y Scriptaculous.

Los efectos de bordes redondeados se basan en definiciones de CSS3, los navegadores que no admitan estas reglas mostraran las puntas cuadradas.

jueves, 1 de septiembre de 2011

Menú desplegable con Prototype y Scriptaculous

Hoy les ofrecemos un menú vertical desplegable. Es un script muy fácil de incorporar ya que todo el contenido del menú está "encerrado" en un DIV y sencillo de adaptar a nuestras necesidades. Utiliza Prototype, Scriptaculous y algunas definiciones de CSS3 para lograr ciertos efecto. Aclaramos que estos efectos no son indispensables, así que los navegadores que no acepten CSS3 no desvirtuarán el menú.

El cencepto es muy sencillo, inicialmenente se muestran las opciones del menú con una flechita que al clikearla despliega las opciones de ese menú, permitiendo contraer dichas opciones. Se pueden agregar los menús y opciones de menú sin límite.

martes, 30 de agosto de 2011

¿Cómo incluir Prototype a nuestro documento HTML?

Para poder utilizar Prototype es necesario hacer unos cambios en nuestro encabezado HTML y por supuesto incluir la librería en nuestro documento HTML. A continuación mostramos la estructura de un documento que admite el uso de Prototype.

Como primera medida debemos descargar la librería de Prototype. Es recomendable hacer esta descarga periódicamente para aprovechar las nuevas versiones que se van publicando en el sitio oficial.

La descarga consiste en un único archivo con extensión js y nombre prototype con su numero de version, por ejemplo prototype1.6.0.3.js. Este es el archivo que debemos incluir en nuestro documento.

Bien, veamos un ejemplo concreto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="prototype1.6.0.3.js"></script>
</head>

<body>
</body>
</html>

En negrita aparece el código necesario que debemos incluir en nuestro documento HTML para poder utilizar la librería de Prototype.

domingo, 28 de agosto de 2011

MÉTODO Observe

El método observe de prototype, como su nombre lo indica, observa el compartamiento de algún elemento o grupo de elemtos del DOM a la espera de algún suceso o evento previamente definido. De esta manera cuando ocurre el evento esperado observe lo detecta y ejecuta una función definida por el usuario.

Veamos un ejemplo

Supongamos que queremos ejecutar una función cuando el usuario hace click en un boton. Si usasemos javascript sería algo así:

<javascript>
    function mi_funcion(){
       alert("Esta es mi función");
   }
</javascript>

<input type="button" value="Ejecutar función" onClick="mi_funcion()" />

De esta forma al clickear (evento onClick) el botón "Ejecutar función" invocamos a la función javascript mi_función.

Ahora veamos el mismo ejemplo utilizando Prototype:

<javascript>
   $('mi_boton').observe('click',function(){
        alert("Esta es mi función");
   });
</javascript>

<input type="button" value="Ejecutar función" id="mi_boton" />

Vea que cuando definimos el botón no incluimos el evento onClick, en su lugar definimos una ID para el botón. Ahora desde javascript utilizamos la función $ para "atrapar" nuestro botón y le agregamos el método observe, indicando que "observe" a nuestro botón a la espera del evento "click". Cuando el evento sucede observe ejecuta la función que hemos definido.

Vea que que en javascript utilizamos el evento Onclick mientras que en Prototype lo denominamos simplemente click. En general todos los eventos de javascript son referenciados en Prototype sin el on y en minúsculas. 

Evento javascript            Referencia en Prototype

onClick                              click
onFocus                             focus
onBlur                                blur
onChange                           change
onSubmit                           submit

Ahora, si queremos observar por ejemplo una caja de texto con id="caja1" y ejecutar una función cuando esta reciba foco, podemos definir el siguiente código Prototype:

$('caja1').observe('focus',function(){
       cuerpor de la función
});