unijimpe » Mootools http://blog.unijimpe.net Desarrollo Web, SEO, Adsense Mon, 28 Nov 2011 03:18:21 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Seguimiento de descargas con Google Analyticshttp://blog.unijimpe.net/seguimiento-de-descargas-con-google-analytics/ http://blog.unijimpe.net/seguimiento-de-descargas-con-google-analytics/#comments Mon, 31 Oct 2011 02:48:19 +0000 unijimpe http://blog.unijimpe.net/?p=1299 Google Analytics el popular servicio de estadísticas de visitas ofrece muchas características que permiten conocer al detalle la interacción que tiene el usuario con nuestra web. Una de ellas es hacer el seguimiento de todos los …

]]> Google Analytics el popular servicio de estadísticas de visitas ofrece muchas características que permiten conocer al detalle la interacción que tiene el usuario con nuestra web. Una de ellas es hacer el seguimiento de todos los archivos de descargas, esto no se hace de forma automática por lo que hay que agregar un código adicional.

Utilizando Google Analytics

El primer paso es utilizar el código de seguimiento en nuestra página, actualmente se utiliza la versión asincrona la cual se debe colocar justo antes de la etiqueta </head>

  1. <script type="text/javascript">
  2.   var _gaq = _gaq || [];
  3.   _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  4.   _gaq.push(['_trackPageview']);
  5.  
  6.   (function() {
  7.     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  8.     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  9.     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  10.   })();
  11. </script>

En donde UA-XXXXX-X es el código de seguimiento del sitio web el cual lo podemos obtener al registrar un sitio web en nuestra cuenta de Google Analytics.

Seguimiento de descargas con Google Analytics

Si en nuestra página tenemos archivos de descarga, en enlace de descarga es:

  1. <a href="/files/map.pdf">map</a>

Para que Google Analytics pueda registrar las descargas es necesario agregar una llamada al método _gaq.push en donde el segundo parámetro es un nombre con el cual se identificará la descarga.

  1. <a href="/files/map.pdf" onClick="_gaq.push(['_trackPageview','/files/map.pdf']);">map</a>

El código es muy sencillo y hay que colocarlo en cada enlace de descarga que se tenga.

Seguimiento de descargas con Google Analytics y Mootools

Si utilizas Mootools en tu página, entonces puedes utilizarlo para agregar el código de seguimiento de manera sencilla. Para ello a todos los enlaces de descarga le agregaremos un estilo llamado download.

  1. <a href="/files/map.pdf" class="download">map</a>

Luego podemos agregar el siguiente código con el cual se busca todos los enlaces con el estilo download y le agrega la llamada al método _gaq.push.

  1. window.addEvent('load', function() {
  2.    $$('.download').addEvent('click',function() {
  3.       _gaq.push(['_trackPageview', this.get('href').replace('http://','')]);
  4.    });
  5. });

Seguimiento de descargas con Google Analytics y jQuery

Si utilizamos jQuery podríamos modificar el código anterior el cual se convertiría en:

  1. $(document).ready(function () {
  2.    $('a.download').click(function() {
  3.       _gaq.push(['_trackPageview', $(this).attr('href').replace('http://','')]);
  4.    });
  5. });

Seguimiento de descargas automático

Si todas estas formas te parecen complicadas o ya tienes un sitio con muchas páginas y resulta complejo agregar el código de seguimiento, existe una solución llamada Entourage.js el cual agregará de forma automática el código de seguimiento a todos los enlaces que contengan archivos: .pdf, .zip, .doc, .xls, .ppt, .exe, .dmg, .mov, .avi y .mp3.

Para utilizar este método descargan los archivos y copian el archivo entourage.min.js y lo adjuntan a la página donde desean hacer el seguimiento, esto justo antes de colocar el código de Google Analytics.

  1. <script src="js/entourage.min.js"></script>

Esta pequeña librería con un tamaño de solo 579 bytes y que nos facilita de manera muy sencilla el trabajo de hacer el seguimiento de descargas en nuestra página.

Mas Información

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/seguimiento-de-descargas-con-google-analytics/feed/ 4 Validar Formularios con Mootoolshttp://blog.unijimpe.net/validar-formularios-con-mootools/ http://blog.unijimpe.net/validar-formularios-con-mootools/#comments Mon, 31 May 2010 04:34:07 +0000 unijimpe http://blog.unijimpe.net/?p=1178 En las ultimas versiones de Mootools se ha comenzado a incluir la clase Form.Validator la cual permite validar formularios de forma sencilla con muchas opciones predefinidas y con la posibilidad de extender con nuevas reglas de …

]]> En las ultimas versiones de Mootools se ha comenzado a incluir la clase Form.Validator la cual permite validar formularios de forma sencilla con muchas opciones predefinidas y con la posibilidad de extender con nuevas reglas de validación.

Preparando para Validar con Mootools

Lo primero es descargar e incluir el archivo mootools.js en nuestro documento, también se necesita descargar e incluir el archivo mootools-more.js que debe contener las clases: Form.Validator y Form.Validator.Inline.

  1. <script type="text/javascript" src="js/mootools.js"></script>
  2. <script type="text/javascript" src="js/mootools-more.js"></script>

También es necesario agregar tres estilos para indicar al usuario el resultado de la validación, estos estilos los creamos en la hoja de estilos de nuestro sitio web donde obviamente los colores y estilos los haremos para que se integren con nuestra web.

  1. .validation-passed { border-color: blue; } /* campo valido */
  2. .validation-failed { border-color: red; } /* campo invalido */
  3. .validation-advice { color: #C00; font-size: 10px; } /* mensaje de error */

Validaciones Disponibles

Lo primero es conocer todas las formas de validación disponibles

  • IsEmpty: devuelve verdadero si el campo esta vacío.
  • required: el campo debe ser obligatorio o no debe estar vacío.
  • minLength: verdadero si campo tiene mas de cierta cantidad de caracteres.
  • maxLength: devuelve verdadero si el campo tiene menos de cierta cantidad de caracteres.
  • validate.numeric: verdadero si el campo es un número
  • validate.integer: verdadero para números enteros, decimales no esta permitidos.
  • validate.digits: verifica si el campo contiene números, espacios y caracteres de puntuación.
  • validate.alpha: verdadero si el campo solo contiene letras.
  • validate.alphanum: el campo es verdadero si contiene unicamente letras y números.
  • validate.date: es verdadero si el campo contiene una fecha (mm/dd/yyyy).
  • validate.email: verifica que el campo contenga un dirección de email.
  • validate.url: verifica que el campo contenga una dirección URL.

Utilizando Form.Validator

Para utilizar las formas de validación antes mencionadas estas se deben agregar como si fueran estilos. Si deseamos aplicar mas de una regla podemos hacerlo dejando un espacio en blanco. Veamos un ejemplo de un formulario de registro.

  1. <form id="frRegister" method="post" action="">
  2. Name:
  3. <input name="name" type="text" id="name" class="required" />
  4. Username:
  5. <input name="user" type="text" id="user" class="required validate-alphanum minLength:5" />
  6. Password:
  7. <input name="pass" type="text" id="pass" class="required validate-alphanum" />
  8. Email:
  9. <input name="email" type="text" id="email" class="required validate-email" />
  10. Phone:
  11. <input name="phone" type="text" id="phone" class="validate-digits" />
  12. <input type="button" name="btsend" id="btsend" value="Registro" />
  13. </form>

En el código mostrado hemos creado un formulario con 5 campos, a los cuales hemos aplicado las siguientes reglas:

- name: debe ser obligatorio y se acepta todos los caracteres.
- user: es obligatorio, solo se aceptan letras y números y deber de 5 caracteres como mínimo.
- pass: es obligatorio y solo se aceptan letras y números.
- email: el texto ingresado debe ser una dirección de email válida y no puede ser vacía.
- phone: campo opcional, pero si se llena solo acepta números, espacios y caracteres de puntuación.

Luego creamos una instancia del objeto Form.Validator que recibe como parámetro el identificador del formulario que deseamos validar, en seguida agregamos un evento al botón 'btsend' el cual procederá a la validación cuando se haga click para enviar el formulario.

  1. window.addEvent('domready', function() {
  2.     var validate = new Form.Validator("frRegister");
  3.     $('btsend').addEvent('click', function() {
  4.         validate.validate();
  5.     });
  6. });

Uniendo estos bloques de código tenemos nuestro primer ejemplo de validación con Mootools, podemos ver el resultado en Mootools: Form.Validator - Basic.

Utilizando Form.Validator.Inline

Si deseamos que al validar el formulario este muestre los mensajes de error junto a cada campo, de esta forma el usuario sabra exactamente cual es el error que tiene en el formulario. Para ello utilizaremos la clase Forma.Validator.Inline la cual tiene la misma sintaxis que el ejemplo anterior:

  1. window.addEvent('domready', function() {
  2.     var validate = new Form.Validator.Inline("frRegister");
  3.     $('btsend').addEvent('click', function() {
  4.         validate.validate();
  5.     });
  6. });

Pueden ver el ejemplo funcionando en Mootools: Form.Validator.Inline y como se puede apreciar esta validación es mucho mas intuitiva para el usuario.

Mostrando la validación en nuestro Idioma

Por defecto los mensajes de la validación se muestran en Ingles, si deseamos cambiar de idioma por ejemplo a Español a estos mensajes entonces debemos incluir la clase Form.Validator.Spanish y luego inicializar en Mootools de la siguiente forma:

  1. window.addEvent('domready', function() {
  2.     MooTools.lang.setLanguage("es-ES");
  3.     validate = new Form.Validator.Inline("frRegister");
  4.     $('btsend').addEvent('click', function() {
  5.         validate.validate();
  6.     });
  7. });

Pueden ver el resultado del ultimo ejemplo en Mootools: Form.Validator.Spanish en donde las validaciones se muestran en Español.

Si estas opciones de validación no son suficientes puedes utilizar una clase adicionar con mas opciones de validación las cuales están documentadas en Additional InputValidators.

Resumiendo: para validar formularios con Mootools se deben descargar las clases adicionales Form.Validator y Form.Validator.Inline, crear los tres estilos para mostrar las validaciones, aplicar las reglas de validación como si se trataran de estilos. Finalmente se agrega una instancia de la clase Form.Validator para realizar las validaciones.

Mas Información

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/validar-formularios-con-mootools/feed/ 16 Publicar Archivos Flash con Mootoolshttp://blog.unijimpe.net/publicar-archivos-flash-con-mootools/ http://blog.unijimpe.net/publicar-archivos-flash-con-mootools/#comments Mon, 17 May 2010 04:37:25 +0000 unijimpe http://blog.unijimpe.net/?p=1165 Mootools la popular librería javascript a partir de su versión 1.2 incluye una nueva clase llamada Swiff la cual permite incluir archivos Flash en documentos HTML, además permite agregar eventos y facilita la comunicación Flash-Javascript.…

]]> Mootools la popular librería javascript a partir de su versión 1.2 incluye una nueva clase llamada Swiff la cual permite incluir archivos Flash en documentos HTML, además permite agregar eventos y facilita la comunicación Flash-Javascript.

Por que usar Mootools en lugar de SWFObject?

SWFObject es el método mas popular para embeber archivo SWF, pero si por alguna necesitad ya estas utilizando Mootools, entonces es preferible utilizarlo para incluir archivos Flash y evitarse llamar a diferentes archivos Javascript externos.

Utilizar Swiff

La primera forma es descargar Mootools o también puedes utilizarlo directamente desde Google Ajax Libraries, de esta forma ni siquiera necesitar tener el archivo en tu hosting. Luego de incluir Mootools podremos utilizar la clase Swiff, el cual tiene la siguiente sintaxis.

  1. var myswf = new Swiff('path-swf', { width: ancho, height: alto, container: 'id'});

Donde se tienen los siguientes parámetros:

  • path-swf: es la ruta al archivo SWF a incluir
  • ancho: es el ancho del SWF expresado en pixels.
  • alto: es el alto del SWF expresado en pixels.
  • id: el identificador del elemento html donde se mostrará el SWF.

Entonces por ejemplo si deseamos incluir un vídeo player de 500x320 pixels, entonces el código a utilizar para mostrar el SWF sería de la forma:

  1. <div id="player">&nbsp;</div>
  2. <script type="text/javascript">
  3. var myswf = new Swiff('tubeplayer.swf', { width: 500, height: 320, container: 'player'});
  4. </script>

Utilizando Parámetros con Swiff

Para pasar parámetros al archivo SWF que estamos incluyendo, podemos utilizar la propiedad params el cual contiene una lista de los parámetros a incluir. Entonces si por ejemplo deseamos permitir que el archivo flash pueda ejecutarse en pantalla completa y que el color de fondo sea negro tendríamos el siguiente código.

  1. <div id="player">&nbsp;</div>
  2. <script type="text/javascript">
  3. var myswf = new Swiff('tubeplayer.swf', {
  4.       width: 500,
  5.       height: 320,
  6.       container: 'player',
  7.       params: {allowFullScreen: 'true', bgcolor: '#00000'}
  8. });
  9. </script>

Pasando Variables con Swiff

Para pasarle variables al archivo SWF, es necesario hacerlo utilizando flashvars, ello lo podemos hacer con la propiedad vars, entonces si deseamos pasar dos variables a nuestro player tendríamos el siguiente código.

  1. <div id="player">&nbsp;</div>
  2. <script type="text/javascript">
  3. var myswf = new Swiff('tubeplayer.swf', {
  4.       width: 500,
  5.       height: 320,
  6.       container: 'player',
  7.       params: {allowFullScreen: 'true', bgcolor: '#00000'},
  8.       vars: {autoPlay: 'true', videoId: 'FNQowwwwYa0'}
  9. });
  10. </script>

Uniendo estos elementos tendremos el código completo para incluir archivo SWF en páginas HTML.

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <title>Swiff Demo - unijimpe</title>
  5. </head>
  7. <div id="player">&nbsp;</div>
  8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools.js"></script>
  9. <script type="text/javascript">
  10. var myswf = new Swiff('tubeplayer.swf', {
  11.       width: 500,
  12.       height: 320,
  13.       container: 'player',
  14.       params: {allowFullScreen: 'true', bgcolor: '#00000'},
  15.       vars: {autoPlay: 'true', videoId: 'FNQowwwwYa0'}
  16. });
  17. </script>
  18. </body>
  19. </html>

Como pueden ver el código para mostrar archivos Flash, sencillo y sin utilizar librerías adicionales con lo cual ahorramos en velocidad de carga para nuestra web. Pueden ver el resultado del ejemplo funcionando en http://samples.unijimpe.net/swiff-swf/.

Mas Información

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/publicar-archivos-flash-con-mootools/feed/ 0 MooEditable: Editor HTML con Mootoolshttp://blog.unijimpe.net/mooeditable-editor-html-con-mootools/ http://blog.unijimpe.net/mooeditable-editor-html-con-mootools/#comments Thu, 08 Oct 2009 18:45:04 +0000 unijimpe http://blog.unijimpe.net/?p=1097 MooEditable es un editor de texto escrito en Mootools. Con esta librería podemos convertir nuestras cajas de texto o textareas en editores HTML con solo utilizar pocas líneas de código javascript.

Este editor es compatible …

]]> MooEditable es un editor de texto escrito en Mootools. Con esta librería podemos convertir nuestras cajas de texto o textareas en editores HTML con solo utilizar pocas líneas de código javascript.

Este editor es compatible con Internet Explorer 6/7/8, Firefox 2/3, Opera 9/10 y Safari 3/4, es ligero comparado con otras librerías como TinyMCE, se pueden personalizar los iconos y con una interfaz limpia.

mooeditable

Tiene las opciones básicas para formatear texto como: negrita, cursiva, subrayado, tachado, listas además soporte para incluir, imágenes, enlaces, archivos flash y finalmente se pueden incluir las acciones para deshacer y rehacer.

Como Utilizar MooEditable
Para su funcionamiento se requiere primero Mootools, entonces primero se debe incluir el archivo mootools.js y MooEditable.js, también es necesario incluir la hoja de estilos MooEditable.css el cual incluirá los estilos e imagenes necesarias para el funcionamiento de la librería.

  1. <link rel="stylesheet" href="css/MooEditable.css" />
  2. <script type="text/javascript" src="js/mootools.js"></script>
  3. <script type="text/javascript" src="js/MooEditable.js"></script>

El siguiente paso es crear nuestro formulario en el cual debemos insertar un tag textarea, es necesario aplicarle un estilo a este tag para definir el ancho el cual se utilizará para crear el editor.

  1. <textarea name="content" id="content" rows="10" style="width: 400px;"></textarea>

Finalmente asignamos el método mooEditable al elemento que contendrá el editor de texto. En nuestro caso se lo asignamos al elemento content que el textarea que hemos creado.

  1. window.addEvent('domready', function(){
  2.     $('content').mooEditable();
  3. })

Con lo cual obtenemos nuestro editor funcionando, pueden ver el resultado en mooeditable. Hay muchas opciones para personalizar al detalle este editor, para conocer mas acerca de las opciones pueden leer la documentación que viene en el archivo de descarga.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/mooeditable-editor-html-con-mootools/feed/ 4 Mootools Image Croppinghttp://blog.unijimpe.net/mootools-image-cropping/ http://blog.unijimpe.net/mootools-image-cropping/#comments Tue, 23 Sep 2008 01:31:04 +0000 unijimpe http://blog.unijimpe.net/?p=911 MooCrop es una utilidad para cortar imágenes de forma visual en web utilizando Mootools. Esta librería te permite seleccionar parte de una imagen de forma gráfica, esto unido a un script de servidor te permitirá …

]]> MooCrop es una utilidad para cortar imágenes de forma visual en web utilizando Mootools. Esta librería te permite seleccionar parte de una imagen de forma gráfica, esto unido a un script de servidor te permitirá cortar imágenes sin necesidad de programas adicionales.

Caracteristicas
MooCrop es altamente personalizable, entre las cualidades mas destacables tenemos:

  • Completamente personalizable con CSS
  • Permite enmascarar la imagen a cortar.
  • Facilidad para escalar y mover las zonas a cortar.
  • Eventos personalizables.
  • Rápido, código limpio
  • Funciona en IE 6 & 7, FF 2+, Opera 9.2 y Safari 2 & 3..

Utilizando MooCrop
Lo primero es descargar las librerías: mootools.js y MooCrop.js. Luego de ello procedemos a incluir estas librerías en el header del HTML.

  1. <script type="text/javascript" src="mootools.js"></script>
  2. <script type="text/javascript" src="MooCrop.js"></script>

El siguiente paso es colocar una imagen al cual hay que agregarle un identificador para luego llamarlo con esta librería.

  1. <img src="image.jpg" id="imgcrop" />

Luego llamamos a la clase MooCrop el cual recibe como parámetro el identificador de la imagen al cual deseamos mostrar la opción para cortar la imagen, con esto ya tenemos la opcion para seleccionar la parte de la imagen que deseamos cortar.

  1. window.addEvent('load',function(){
  2.     var crop = new MooCrop('imgcrop');
  3. });

Ahora el siguiente paso es enviar los datos del bloque seleccionado a un script PHP el cual es el encargado de cortar la imagen original. Entonces lo que hacemos es agregar una función en el evento Doble Click el cual envía los datos al script crop.php.

  1. window.addEvent('load',function(){
  2.     var crop = new MooCrop('imgcrop');
  3.     crop.addEvent('onDblClk', function(img, crop, bound){
  4.         $('cropped').src = "crop.php?action=crop&w="+crop.width+"&h="+crop.height+"&x="+crop.left+"&y="+crop.top;
  5.     });
  6. });

Entonces uniendo estos elementos, tenemos listo nuestra aplicación para cortar imágenes al vuelo el cual puedes ver en MooCrop Demo. Este script lo puedes utilizar por ejemplo cuando tus usuarios suben sus fotos para darles la posibilidad de cortarlas antes de subirlas.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/mootools-image-cropping/feed/ 4 AutoClear en Formularios HTMLhttp://blog.unijimpe.net/autoclear-formularios-html/ http://blog.unijimpe.net/autoclear-formularios-html/#comments Tue, 19 Aug 2008 05:44:22 +0000 unijimpe http://blog.unijimpe.net/?p=881 Uno de los métodos mas prácticos para indicar a los usuarios que tipo de información debe ingresar en los formularios es incluir un valor inicial. El siguiente ejemplo ayudará a mostrar valores por defecto los cuales …

]]> Uno de los métodos mas prácticos para indicar a los usuarios que tipo de información debe ingresar en los formularios es incluir un valor inicial. El siguiente ejemplo ayudará a mostrar valores por defecto los cuales se limpiarán al acceder al campo y volverán a mostrar el valor iniciar si no se ha ingresado información.

Preparando el Formulario
Lo primero es crear nuestro formulario, lo hacemos de la manera normal donde incluimos los valores iniciales que utilizaremos para indicar al usuario que valores ingresar.

  1. <strong>Registro de Usuarios:</strong><br />
  2. Nombre: <input type="text" id="name" value="Nombre" /><br />
  3. Email: <input type="text" id="name" value="Email" /><br />
  4. Web: <input type="text" id="web" value="Direccion Web" /><br />
  5. <input name="btsend" type="button" value="Enviar" />

AutoClear Utilizando Javascript
La primero forma es utilizar solamente Javascript, para ello nos hemos basado en el script propuesto en Unobtrusive JavaScript: Auto-Clear and Restore Multiple Form Inputs on Focus, este script se ejecuta al cargarse la página y recorre todos los elementos input text y guarda el valor inicial del formulario en la propiedad rel, luego agrega los eventos a ejecutarse en onfocus, onblur y ondblclick, en donde se verifica si se ha ingresado algún valor para mostrar la ayuda.

  1. function init(){
  2.     var inp = document.getElementsByTagName('input');
  3.     for(var i = 0; i <inp.length; i++) {
  4.         if(inp[i].type == 'text') {
  5.             inp[i].setAttribute('rel', inp[i].defaultValue);
  6.             inp[i].onfocus = function() {
  7.                 if(this.value == this.getAttribute('rel')) {
  8.                     this.value = '';
  9.                 } else {
  10.                     return false;
  11.                 }
  12.             }
  13.             inp[i].onblur = function() {
  14.                 if(this.value == '') {
  15.                     this.value = this.getAttribute('rel');
  16.                 } else {
  17.                     return false;
  18.                 }
  19.             }
  20.             inp[i].ondblclick = function() {
  21.                 this.value = this.getAttribute('rel')
  22.             }
  23.         }
  24.     }
  25. }
  26. if(document.childNodes) {
  27.     window.onload = init
  28. }

Este script los colocamos en el header de nuestro HTML y ya tenemos el efecto AutoClear en nuestro formulario, podemos ver el resultado de este ejemplo en autoclear-javascript.html y si desean pueden ver el código fuente para ver como si incluyo el script.

AutoClear Utilizando Mootools
Si estamos utilizando Mootools, podemos reescribir esta función, utilizando los selectores de elementos y llamando a la función en el evento domready el cual es llamado cuando se ha cargado la página.

  1. window.addEvent('domready', function() {
  2.     inp = $$('input[type=text]');
  3.     inp.each(function(inp) {
  4.         inp.setProperty('rel', inp.value);
  5.         inp.addEvent('focus', function(){
  6.             if (this.value == this.getProperty('rel')){
  7.                 this.value = '';
  8.             }
  9.         });
  10.         inp.addEvent('blur', function(){
  11.             if (this.value == ''){
  12.                 this.value = this.getProperty('rel');
  13.             }
  14.         });
  15.         inp.addEvent('dblclick', function(){
  16.             this.value = this.getAttribute('rel');
  17.         });
  18.     });
  19. });

Nótese que hemos utilizado la función each de Mootools que nos permite recorrer todos los elemento del array que contienen los campos de texto, lo siguiente es agregar los eventos para detectar el focuso blur. Pueden ver el resultado de esta versión en autoclear-mootools.html

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/autoclear-formularios-html/feed/ 8 JSON con Mootoolshttp://blog.unijimpe.net/json-con-mootools/ http://blog.unijimpe.net/json-con-mootools/#comments Mon, 21 Jul 2008 00:21:24 +0000 unijimpe http://blog.unijimpe.net/?p=868 JSON (JavaScript Object Notation) es un formato basado en Javascript para intercambio de datos. JSON es una alternativa a XML pues brinda sencillez al momento de leer los datos, en Javascript puede ser analizado …

]]> JSON (JavaScript Object Notation) es un formato basado en Javascript para intercambio de datos. JSON es una alternativa a XML pues brinda sencillez al momento de leer los datos, en Javascript puede ser analizado utilizando eval(), además provee sencillez para manipular los datos. Para mas información acerca de las diferencias con XML además de sus virtudes en: JSON.

Obteniendo los datos
Para nuestro ejemplo vamos a utilizar Google AJAX Search API, el cual es un servicio que nos utilizar los resultados de búsqueda de Google. No utilizaremos la funciones que provee Google si no que lo haremos utilizando JSON, para ello encontramos documentación en Flash and other Non-Javascript Environments.

Si deseamos obtener los resultado de la búsqueda de la palabra Google, lo podemos hacer accediendo al siguiente URL:

http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Google

Este URL devolverá un objeto conteniendo los resultados de la búsqueda en un array ademas de estadísticas de resultados:

  1. { "results": [
  2.   {
  3.    "GsearchResultClass": "GwebSearch",
  4.    "unescapedUrl": "http://en.wikipedia.org/wiki/Paris_Hilton",
  5.    "url": "http://en.wikipedia.org/wiki/Paris_Hilton",
  6.    "visibleUrl": "en.wikipedia.org",
  7.    "cacheUrl": "http://www.google.com/search?...",
  8.    "title": "\u003cb\u003eParis Hilton\u003c/b\u003e",
  9.    "titleNoFormatting": "Paris Hilton",
  10.    "content": "In 2006, she released her debut..."
  11.   },
  12.   {
  13.    "GsearchResultClass": "GwebSearch",
  14.    "unescapedUrl": "http://www.imdb.com/name/nm0385296/",
  15.    "url": "http://www.imdb.com/name/nm0385296/",
  16.    "visibleUrl": "www.imdb.com",
  17.    "cacheUrl": "http://www.google.com/search?...",
  18.    "title": "\u003cb\u003eParis Hilton\u003c/b\u003e",
  19.    "titleNoFormatting": "Paris Hilton",
  20.    "content": "Self: Zoolander. Socialite..."
  21.   },
  22.   ...
  23.  ],
  24.  "cursor": {
  25.   "pages": [
  26.    { "start": "0", "label": 1 },
  27.    { "start": "4", "label": 2 },
  28.    { "start": "8", "label": 3 },
  29.    { "start": "12","label": 4 }
  30.   ],
  31.   "estimatedResultCount": "59600000",
  32.   "currentPageIndex": 0,
  33.   "moreResultsUrl": "http://www.google.com/search?..."
  34.  }
  35. }, 200, null)

Creando un Proxy
Normalmente cuando se accede a datos JSON se hacen sobre el mismo dominio, pero como nosotros deseamos acceder a los datos de Google necesitamos crear un proxy para cambiar de dominio los datos recibidos. Esto por que nos browsers no permites acceder a datos de otros dominios. Entonces creamos el archivo proxy.php.

  1. $apiQue = "Google"; // variable a consultar
  2. $apiKey = "tu_key_google"; // key para acceder al servicio
  3. $apiUrl = "http://ajax.googleapis.com/ajax/services/search/web";
  4. if (isset($_GET['query'])){
  5.    $apiQue = urlencode($_GET['query']);
  6. }
  7. readfile($apiUrl."?v=1.0&key=".$apiKey."&q=".$apiQue);

Cargando los datos con Mootools
La nueva versión de Mootools trae el método Request.JSON que permite cargar y parsear automáticamente datos JSON, para nuestro caso cargaremos los datos del proxy recién creado y lo mostraremos utilizando la función alert. Primero incluimos la librería Mootools en el header de nuestro html y luego obtenemos los datos JSON.

  1. <script type="text/javascript" src="mootools.js"></script>

  1. window.addEvent('domready', function() {
  2.     var path = "proxy.php?query=unijimpe";
  3.     var json = new Request.JSON({url: path, onComplete: onLoad});
  4.     json.get();
  5.     function onLoad(obj){
  6.         var results = obj.responseData.results;
  7.         for (i=0; i<results.length; i++) {
  8.             var tmp = results[i];
  9.             alert(i + " --> " + tmp.title + "\n" + tmp.url)
  10.         }
  11.     }
  12. });

Pueden ver el resultado en: /json/index.html.

Como pueden observar, la función onLoad se ejecuta cuando se ha completado la carga de los datos, dentro de esta función podemos acceder a los datos recién cargados como si fueran objetos es decir podemos acceder a todas sus propiedades utilizando el operador punto (.).

Entonces si deseamos mostrar la cantidad total de resultados podríamos hacer mediante obj.estimatedResultCount, entonces para acceder a los resultados de la búsqueda accedemos a obj.responseData.results el cual contiene un array con los resultados de la búsqueda por lo cual utilizamos un FOR para acceder a cada elemento.

Ahora si deseamos mostrar estos resultados como HTML y no como alerts, lo primero es crear un div en donde escribiremos los resultados y modificar brevemente nuestro script.

  1. window.addEvent('domready', function() {
  2.     var path = "proxy.php?query=unijimpe";
  3.     var json = new Request.JSON({url: path, onComplete: onLoad});
  4.     json.get();
  5.     function onLoad(obj){
  6.         var tmpHTML = "";
  7.         var results = obj.responseData.results;
  8.         for (i=0; i<results.length; i++) {
  9.             var tmp = results[i];
  10.             tmpHTML+= "<a href='"+tmp.url+"'>"+tmp.title+"</a>";
  11.             tmpHTML+= "<br />"+tmp.content+"<br/>";
  12.             tmpHTML+= "<i>"+tmp.url+"</i><br /><br />";
  13.         }
  14.         $("results").set("html", tmpHTML);
  15.     }
  16. });

  1. <div id="results">Loading...</div>

Pueden ver el resultado en: /json/json.html.

Finalmente, agregamos un campo te texto y un botón para crear un formulario de búsqueda para mostrar la potencia de JSON. Esto lo hacemos con el siguiente código.

  1. window.addEvent('domready', function() {
  2.     var path = "proxy.php?query=unijimpe";
  3.     var json = new Request.JSON({url: path, onComplete: onLoad});
  4.     json.get();
  5.     function onLoad(obj){
  6.         var tmpHTML = "";
  7.         var results = obj.responseData.results;
  8.         for (i=0; i<results.length; i++) {
  9.             var tmp = results[i];
  10.             tmpHTML+= "<a href='"+tmp.url+"'>"+tmp.title+"</a>";
  11.             tmpHTML+= "<br />"+tmp.content+"<br/>";
  12.             tmpHTML+= "<i>"+tmp.url+"</i><br /><br />";
  13.         }
  14.         $("results").set("html", tmpHTML);
  15.     }
  16.  
  17.     function sendSearch() {
  18.         $("results").set("html", "Loading...");
  19.         path = "proxy.php?query=" + $("q").value;
  20.         json = new Request.JSON({url:path, onComplete: onLoad});
  21.         json.get();
  22.     }
  23.    
  24.     $("bt").addEvent("click", sendSearch);
  25. });

  1. <div id="search">
  2. Buscador JSON
  3. <input type="text" id="q" name="q" />
  4. <input type="submit" id="bt" name="bt" value="Buscar" />
  5. </div>
  6. <div id="results">&nbsp;</div>

Pueden ver el resultado en: /json/search.html.

Como pueden ver utilizando Mootools para manejar JSON es muy fácil el implementar aplicaciones con acceso remoto a datos o también llamado AJAX solo que no estamos utilizando XML y además tenemos la posibilidad de formatear a nuestro antojo los resultados obtenidos.

Mas Información

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/json-con-mootools/feed/ 3 Mootools Calendarhttp://blog.unijimpe.net/mootools-calendar/ http://blog.unijimpe.net/mootools-calendar/#comments Wed, 25 Jun 2008 03:37:57 +0000 unijimpe http://blog.unijimpe.net/?p=856 Hoy les presente un plugin para Mootools el cual les permitirá insertar rápidamente un calendario en nuestros formularios y con un resultado altamente atractivo y profesional. Se trata de Calendar una clase que permite incluir un …

]]> Hoy les presente un plugin para Mootools el cual les permitirá insertar rápidamente un calendario en nuestros formularios y con un resultado altamente atractivo y profesional. Se trata de Calendar una clase que permite incluir un selector de fecha no-obstrusivo y accesible.

Como usar Mootools Calendar
Lo primero es descargar la ultima versión de esta librería en calendar.js, además de ello es necesario tener Mootools el cual lo pueden descargar desde mootools.js, luego de ello debes crear un archivo CSS con los estilos que se aplicarán al calendario.

El siguiente paso es adjuntar las librerías Javascript a nuestro HTML y posteriormente los archivos CSS que contienen los estilos para nuestra página y nuestro calendario.

  1. <!-- Incluimos el HTML -->
  2. <link href="styles.css" rel="stylesheet" type="text/css">
  3. <link href="calendar.css" rel="stylesheet" type="text/css">
  4. <!-- Incluimos los Javascript -->
  5. <script type="text/javascript" src="js/mootools.js"></script>
  6. <script type="text/javascript" src="js/calendar.js"></script>

El siguiente paso es crear nuestro formulario en el cual debemos incluir un campo de texto el cual contendrá a nuestro selector de fechas.

  1. <input type="text" name="fecha" id="fecha" size="16">

Finalmente inicializamos el Calendario con una llamada al objeto Calendar el cual recibe como parámetros el identificador del campo al cual deseamos asignar el calendario y luego el formato en el cual deseamos se muestren las fechas.

  1. <script type="text/javascript">
  2. window.addEvent('domready', function() {
  3.       myCal = new Calendar({ fecha: 'd/m/Y' });
  4. });
  5. </script>

Luego unimos todos los elementos para obtener el código final para mostrar un selector de fechas en nuestros formulario, todo de forma rápida y sencilla. Esta inicialización lo hacemos en el evento domready que es cuando se ha terminado de interpretar el html de nuestro web.

  3. <title>Mootools Calendar</title>
  4. <link href="styles.css" rel="stylesheet" type="text/css">
  5. <link href="calendar.css" rel="stylesheet" type="text/css">
  6. <script type="text/javascript" src="js/mootools.js"></script>
  7. <script type="text/javascript" src="js/calendar.js"></script>
  8. <script type="text/javascript">
  9. window.addEvent('domready', function() {
  10.    myCal = new Calendar({ fecha: 'd/m/Y' });
  11. });
  12. </script>
  13. </head>
  15. <h3>AGREGAR GASTO </h3>
  16. <form method="post" name="registro">
  17. ...
  18. Fecha:
  19. <input type="text" name="fecha" id="fecha" size="16">
  20. ...
  21. </form>
  22. </body>
  23. </html>

Desde luego lo que queda en adelante es agregarle los estilos de acuerdo al diseño de nuestro web y adecuarlo al formulario que tenemos. Les dejo un ejemplo en moocalendar y finalmente los archivos fuente de este ejemplo para que lo descarguen.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/mootools-calendar/feed/ 21 Swiff: Mootools Flash Pluginhttp://blog.unijimpe.net/swiff-mootools-flash-plugin/ http://blog.unijimpe.net/swiff-mootools-flash-plugin/#comments Sat, 01 Mar 2008 05:48:13 +0000 unijimpe http://blog.unijimpe.net/swiff-mootools-flash-plugin/ Swiff es una clase de Mootools que permite embeber archivos Flash en páginas html a semejanza de SWFObject. Este clase fue desarrollada originalmente por Harald Kirschner para la librería FancyUpload el cual permite hacer upload …

]]> Swiff es una clase de Mootools que permite embeber archivos Flash en páginas html a semejanza de SWFObject. Este clase fue desarrollada originalmente por Harald Kirschner para la librería FancyUpload el cual permite hacer upload de archivos con barra de progreso de manera sencilla y ahora se esta incluyendo en la nueva versión de Mootools 1.2 que aun esta en estado beta.

Obteniendo Swiff
Para utilizar Swiff hay dos opciones. La primera es descargar la versión beta Mootools 1.2beta2 en el cual podemos seleccionar Swiff de la lista de componentes y luego la incluimos en el header de nuestra página:

  1. <!-- Si utilizamos mootools 1.2beta2 -->
  2. <script type="text/javascript" src="mootools.js"></script>

La segunda forma es para cuando se utiliza Mootools 1.1, podemos descargar sólo la librería Swiff.Base.js el cual es parte de la librería FancyUpload.

  1. <!-- Si utilizamos mootools 1.1 -->
  2. <script type="text/javascript" src="mootools.js"></script>
  3. <script type="text/javascript" src="Swiff.Base.js"></script>

Utilizando Swiff
Para utilizar Swiff podemo utilizar la siguiente sintaxis, donde 'path' es la ruta al swf a incluir, w es el ancho, h es la altura y 'iddiv' es el identificador

  1. new Swiff('path', {width: w, height: h, container: 'iddiv'});

Luego si deseamos incluir un swf llamado header.swf en nuestra página en el div llamado main, tendríamos el siguiente código:

  3. <title>Demo Swiff - unijimpe</title>
  4. <script type="text/javascript" src="mootools.js"></script>
  5. <script type="text/javascript">
  6. window.addEvent('load', function() {
  7.     var myswf = new Swiff('swffull.swf', {
  8.         width: 600,
  9.         height: 450,
  10.         container: 'main'
  11.     });
  12. });
  13. </script>
  14. </head>
  16. <div id="main">Flash Movie</div>
  17. </body>
  18. </html>

El resultado de este ejemplo lo pueden ver en: Demo Swiff - unijimpe. Obviamente hay muchas mas opciones al momento de insertar un swf como el color del fondo, pasarle flashvars e incluso agregarle eventos, esto lo pueden encontrar de forma detallada en la documentación en Mootools Class: Swiff.

Este método de inclusión de SWFs es muy practico cuando ya estamos utilizando Mootools y no deseamos utilizar una librería adicional para ejecutar flash en nuestra página. Pero si es que deseas controlar el swf al detalle (Por ejemplo la versión de Flash Player) siempre estará SWFObject el cual es el estándar para inclusión de SWFs.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/swiff-mootools-flash-plugin/feed/ 3 Introducción a Mootoolshttp://blog.unijimpe.net/introduccion-a-mootools/ http://blog.unijimpe.net/introduccion-a-mootools/#comments Thu, 28 Feb 2008 02:37:26 +0000 unijimpe http://blog.unijimpe.net/introduccion-a-mootools/ Mootools es un framework Javascript muy potente que nos facilitará el desarrollo de interfaces visuales, efectos, manipulación del DOM, manejo de AJAX, entre otras muchas opciones. Además de ser muy ligera, tiene soporte para OOP y …

]]> Mootools es un framework Javascript muy potente que nos facilitará el desarrollo de interfaces visuales, efectos, manipulación del DOM, manejo de AJAX, entre otras muchas opciones. Además de ser muy ligera, tiene soporte para OOP y además tiene multitud de plugins que te permitirán implementar variedad de aplicaciones fácilmente.

mootools.gif

Empezando con Mootools
Lo primero es descargar la librería, para ello puedes acceder a Download Mootools, donde seleccionas los módulos a utilizar y el método de compresión, para nuestro caso seleccionamos todos los módulos. Descargaremos un archivo con el nombre mootools-release-x.xx.js.txt (Donde x.xx es la versión), el cual lo renombrados a mootools.js y lo colocamos al directorio de nuestro proyecto web.

El siguiente paso es incluir la librería en nuestro html, para poder utilizarlo, para ello colocamos en el header lo siguiente.

  1. <script type="text/javascript" src="js/mootools.js"></script>

Detectando los Eventos de Carga
Lo siguiente que debemos hacer el crear un detector de eventos para ejecutar nuestras acciones una vez que se ha cargado la página. Si se llama a las funciones cuando aun no se ha completado la carga se generar errores pues aun hay elementos que no están disponibles.

Para ello existen dos eventos: domready que se ejecuta cuando todos los elementos de la página están listos, pero no espera por las imágenes y load que se ejecuta cuando toda la página incluyendo las imágenes se ha cargado, entonces tendríamos:

  1. <script type="text/javascript">
  2. window.addEvent('domready', function() {
  3.      // código - carga sin imágenes completa
  4. });
  5. window.addEvent('load', function() {
  6.      // código - carga con imágenes completa
  7. });
  8. </script>

Obviamente es mas rápido domready pues no espera que se carguen las imágenes pero ya se tiene disponible todos los elementos de la página para manipularlos.

La función $ (dolar)
La función $() es equivalente a document.getElementById() con el cual se puede acceder a un elemento mediante su identificador. Veamos los siguientes ejemplos:

  1. document.getElementById('myDiv'); // accede a mydiv
  2. $('myDiv'); // accede al elemento con id=mydiv

La función $$ (doble dolar)
La función $$() es equivalente a document.getElementsByTagName(), pero mas potente pues devuelve un array con los elementos que cumplen la condición.

  1. $$('div'); // Array de elementos Mootools
  2. $$('a.external'); // Array de enlaces con la class=external
  3. $$('a[href=#]'); // Array de enlaces con href=#

Nuestro Primer Ejemplo
Una vez que tenemos los conceptos básicos, podemos implementar nuestro primer ejemplo, haremos que al cargar la página se aplique el estilo link a todos los enlaces de nuestro html, además pintamos de color rojo al div con nombre diverror, para ello tendríamos el siguiente código:

  1. <script type="text/javascript">
  2. window.addEvent('domready', function() {
  3.     $$('a').addClass('link');
  4.     $('diverror').setStyles('color: #CC0000');
  5. });
  6. </script>

Mas Información
Obviamente este es una pequeña introducción con los conceptos más básicos, mas adelante iremos desarrollando mas temas que nos ayudarán a comprender mas las capacidades de Mootools. Para mas información pueden les dejo una pequeña lista con recursos:

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/introduccion-a-mootools/feed/ 6