Búsqueda personalizada

API de bibliotecas AJAX de Google

Guía del desarrollador
El API de bibliotecas AJAX es una red de distribución de contenido y una arquitectura de carga para las bibliotecas JavaScript de software libre más populares. Al utilizar el método google.load(), tu aplicación tendrá un acceso global de gran velocidad a una lista cada vez mayor de las bibliotecas JavaScript de software libre más populares.

Introducción
El API de bibliotecas AJAX proporciona a tus aplicaciones un acceso estable, seguro, de alta velocidad y disponible para todas las bibliotecas de JavaScript de software libre. La aplicación puede utilizar el cargador flexible google.load() o el acceso directo a las secuencias de comandos basado en la ruta.
Uso de google.load()
La mejor forma de cargar bibliotecas es utilizar google.load() para asignar un nombre a una biblioteca y a tu versión preferida. Por ejemplo:

google.load(“jquery”, “1.3.2″); 

  google.load(“jqueryui”, “1.7.2“); 

  google.load(“prototype”, “1.6.0.3“); 

  google.load(“scriptaculous”, “1.8.2“); 

  google.load(“mootools”, “1.2.3“); 

  google.load(“dojo”, “1.3.1“); 

  google.load(“swfobject”, “2.2“); 

  google.load(“yui”, “2.7.0“); 

  google.load(“ext-core”, “3.0.0“);

Como puedes ver en los fragmentos de código anteriores, el primer argumento de google.load es el nombre de una biblioteca. El segundo argumento es una especificación de versión. La lista completa de bibliotecas AJAX es una recopilación cada vez mayor de las bibliotecas JavaScript de software libre más populares.

Creación de versiones con google.load()
Con el sistema de versiones, las aplicaciones pueden especificar la versión deseada con toda la precisión necesaria. Al insertar campos de versiones, se aplican caracteres comodín a los campos. Utilicemos como ejemplo un conjunto de versiones:

1.9.1

1.8.4

1.8.2

Al especificar una versión de “1.8.2″, se seleccionará la versión obvia. Esto se debe a que se ha utilizado una versión completamente especificada. Al especificar una versión de “1.8″, se seleccionará la versión 1.8.4 por ser la versión más alta de la rama 1.8. Por la misma razón, al solicitar “1″, se cargará la versión 1.9.1. Ten en cuenta que esta semántica de versiones funciona del mismo modo cuando se utiliza google.load y cuando se utilizan direcciones URL de secuencia de comandos de tipo directo.

Bibliotecas AJAX

Todas las bibliotecas están disponibles a través de google.load() y, directamente, a través de la etiqueta <script/>. El sistema google.load() ofrece el mayor número de funciones y un máximo rendimiento. En las siguientes secciones, se indican todas las bibliotecas disponibles. Se muestra el nombre de cada biblioteca (el nombre utilizado en google.load()), todas las versiones de la biblioteca disponibles, etc.

jQuery

nombre: jquery

versiones: 1.2.3, 1.2.6, 1.3.0, 1.3.1, 1.3.2

solicitud de carga: google.load(“jquery”, “1.3.2″);

elementos adicionales: uncompressed:true, por ejemplo, google.load(“jquery”, “1.3.2″, {uncompressed:true});

ruta: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

ruta(u): http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js

sitio: http://jquery.com/

nota: no se alojan las versiones 1.2.5 y 1.2.4 debido a su corta duración y a su inestabilidad…

jQuery UI

nombre: jqueryui

versiones: 1.5.2, 1.5.3, 1.6, 1.7.0, 1.7.1, 1.7.2

solicitud de carga: google.load(“jqueryui”, “1.7.2″);

elementos adicionales: uncompressed:true, por ejemplo, google.load(“jqueryui”, “1.7.2″, {uncompressed:true});

ruta: http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js

ruta(u): http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js

sitio: http://ui.jquery.com/

nota: esta biblioteca depende de jquery. Antes de cargar este módulo, debes cargar jquery. Por ejemplo:

  google.load(“jquery”, “1.3.2″); 

  google.load(“jqueryui”, “1.7.2″);

Prototype

nombre: prototype

versiones: 1.6.0.2, 1.6.0.3

solicitud de carga: google.load(“prototype”, “1.6.0.3″);

ruta: http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js

sitio: http://www.prototypejs.org/

script.aculo.us

nombre: scriptaculous

versiones: 1.8.1, 1.8.2

solicitud de carga: google.load(“scriptaculous”, “1.8.2″);

ruta: http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js

sitio: http://script.aculo.us/

nota: Esta biblioteca depende de Prototype. Antes de cargar este módulo, debes cargar Prototype. Por ejemplo:

  google.load(“prototype”, “1.6″); 

  google.load(“scriptaculous”, “1.8.2″);

MooTools

nombre: mootools

versiones: 1.11, 1.2.1, 1.2.2, 1.2.3

solicitud de carga: google.load(“mootools”, “1.2.3″);

elementos adicionales: uncompressed:true, por ejemplo, google.load(“mootools”, “1.2.3″, {uncompressed:true});

ruta: http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js

ruta(u): http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools.js

sitio: http://mootools.net/

Dojo

nombre: dojo

versiones: 1.1.1, 1.2.0, 1.2.3, 1.3.0, 1.3.1

solicitud de carga: google.load(“dojo”, “1.3.1″);

elementos adicionales: uncompressed:true, por ejemplo, google.load(“dojo”, “1.3.1″, {uncompressed:true});

ruta: http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js

ruta(u): http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js.uncompressed.js

sitio: http://dojotoolkit.org/

SWFObject

nombre: swfobject

versiones: 2.1, 2.2

solicitud de carga: google.load(“swfobject”, “2.2″);

elementos adicionales: uncompressed:true, por ejemplo, google.load(“swfobject”, “2.2″, {uncompressed:true});

ruta: http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js

ruta(u): http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject_src.js

sitio: http://code.google.com/p/swfobject/

Yahoo! Biblioteca de interfaz de usuario (YUI)

nombre: yui

versiones: 2.6.0, 2.7.0

solicitud de carga: load request: google.load(“yui”, “2.7.0″);

elementos adicionales: uncompressed:true, por ejemplo, google.load(“yui”, “2.7.0″, {uncompressed:true});

ruta: http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yuiloader/yuiloader-min.js

ruta(u): http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yuiloader/yuiloader.js

sitio: http://developer.yahoo.com/yui/

Ext Core¡Nuevo!

nombre: ext-core

versiones: 3.0.0

solicitud de carga: load request: google.load(“ext-core”, “3.0.0″);

elementos adicionales: uncompressed:true, por ejemplo, google.load(“ext-core”, “3.0.0″, {uncompressed:true});

ruta: http://ajax.googleapis.com/ajax/libs/ext-core/3.0.0/ext-core.js

ruta(u): http://ajax.googleapis.com/ajax/libs/ext-core/3.0.0/ext-core-debug.js

sitio: http://extjs.com/products/extcore/

 fuente: google

Compartir :FacebookGoogle+LinkedInTwitter
Publicado en Ajax | Responder

MANUAL DE PROTOTYPE

introdución al Javascript
Hola a todos, me gustaría antes de comenzar este cursito utilizar este pequeño párrafo a modo de introducción para así poder presentarme y presentaros en que consistirán los artículos que por entregas iré subiendo a “esta nuestra comunidad”.

Bueno antes de empezar deciros que se me ocurrió crear este curso para dar a conocer mas a fondo el lenguaje de programación web Javascript, conocer ya no solo lo que la mayoría de los que esteis leyendo sabréis si no adentrarnos mas a fondo en la metodología de JavaScript Notation Object (JSON) y por lo tanto en la OOP utilizando JS para así después tratar las librerías que muchos de los lectores habrán visto y    conocerán como prototype, Ruby on Rails, etc…., librerías
desarrolladas en JSON, de las cuales se intentará dar un pequeño glosario o guía de referencia de los metodos, clases u objetos desarrollados y además tras el conocimiento de esta metodología poder implementar nosotros mismo estas librerías para nuestro uso e incluso crearnos nuevas librerías que nos hagan la vida mas sencilla.

De este modo durante el tiempo que dure este pequeño manual, nos meteremos con la creación de Objetos, Objetos globales, metodos y variables publicas y privadas, creación de clases, herencia entre ellas, y en definitiva mostrar todo el poder y la energía que tiene un lenguaje de programación que durante tantos años y por diversos motivos se ha visto relegado a un simple conocimiento y abandonado a programadores amateurs debido a la falta o la mala documentación que se ha desarrollado sobre el.

En cada entrega de las nuevas lecciones se adjuntaran ejemplos que servirán de ayuda a la hora de comprender lo que se intenta explicar, y digo intenta porque a veces aunque se procure explicar algo correctamente no se consigue llegar con claridad a los oyentes o en este caso lectores. De todos modos si en alguna lección hay algo que aun así no se consigue
explicar correctamente se podrá dejar comentarios para así todos ayudarnos mutuamente.

Y ahora ya comenzaremos con el primer tema en el que introduciremos al lector al lenguaje JS y en cierta medida a la OOP en base al JavaScript.

Introducción al Javascript orientado a objetos.
Para comenzar diremos que Javascript es uno de los lenguajes mas conocidos y utilizados del mundo, aun así su conocimiento y desarrollo se ha dejado para amateurs, de echo es
bastante común el comentario de que un programador que se precie no se dedica a Javascript. ¿Y a que es debido esta “leyenda urbana”?. Pues bien entre otras muchas cosas es debido a que:

  1.  Principalmente la especificación publicada por ECMA es de una calidad un tanto mala, ya que es difícil de leer y de comprender, y esto ha ocasionado por ejemplo, que algunos autores de libros de JavaScript no hayan podido utilizarlo para actualizar y mejorar los contenidos de sus publicaciones y el conocimiento sobre este lenguaje, y para el que se haya decidido a bajar las especificaciones de ECMA como fue mi caso, se hayan perdido un poco en la búsqueda de nuevos conocimientos
  2. Las primeras versiones de Javascript eran bastante débiles, ya que carecían de herencia, funciones internas….
  3. ECMA se preocupa mas en crear nuevas versiones en vez de dar a conocer y desarrollar una versión completa y facil de entender, lo cual agrava mas aún el problema que es la existencia de infinidad de versiones.
  4. La existencia de Errores de diseño, como la sobrecarga de “+” para encadenar o anexionar, la política de palabras reservadas demasiada extricta y la inserción del punto y coma al final de las sentencias.
  5. Y por supuesto los malos libros que contienen errores, poco ejemplos y promueven malas práticas.

Una vez definidos los problemas encontrados en el aprendizaje y divulgación del JavaScript entraremos a explicar por encima la OOP en Javascript.

Javascript Orientado a Objetos:
Se que en este preciso instante algunos pensareis ¿para qué complicarnos la vida programando javascript orientado a Objetos?, pues la respuesta es tan sencilla como eficiente:

  1. Robustez.
  2. Simplificación de código
  3. Reutilización.
  4. Encapsulamiento.

Entre otros muchos beneficios.

Además olvidaremos las archiconocidas y utilizadas variables globales, que una vez que el código va creciendo realmente no sabes de donde han salido ni en donde se utilizan. Se que, y lo digo por experiencia, a veces las novedades nos asustan, o simplemente nos negamos a aprender porque lo que conocemos es muy eficiente y nos sirve, En resumen, toda esta nueva metodología de programación existe y se utiliza por algo……….asi que, ¿por qué negarnos a conocerla y ponerla en práctica?

Ahora ya, decir que Javascript no es Java y tampoco es java interpretado; Java es Java y javaScript es Javascript. También deciros que sí esta orientado a Objetos, de echo tiene objetos que contienen datos y métodos que interaccionan con los datos de estos u otros objetos. Algo de lo que no dispone Javascript es de clases, pero si que existen constructores que nos resultan muy útiles al a hora de desarrollarlas.

Código Script del constructor de clases

//Construimos el objeto
function constructorObjeto(idObj) {   
   //Como variable publica del objeto definimos el innerTexto, que recibira el argumento que se le pasa a la funcion que es el id del link pulsado y extraemos el innerHTML.   
   this.innerTexto = document.getElementById(idObj).innerHTML;
  //Me creo un metodo público que me saca por medio de un alert el string que le pase
   this.sacarInnerTexto =function(strTexto) {
       alert(strTexto);
    }
 }
function LlamarAlObjeto(paramValue) {    
   // Definimos un nuevo objeto por medio de nuestro constructor, asi en la siguiente linea podemos acceder a todos sus      metodos y variables     
   var miObjeto = new constructorObjeto(paramValue);     
   //Ahora llamamos al metodo sacarInnerTexto de nuestro objeto y le pasamos la variable innerTexto que hemos definido en el interior del objeto       miObjeto.sacarInnerTexto(miObjeto.innerTexto);
}

Código HTML del constructor de clases

<div>
 <div>
  <h1>Ejemplo de constructor de un Objeto</h1>
     <a href=”#” onclick=”LlamarAlObjeto(this.id) ;return false” id=”link1″>Llamar al Objeto</a>
 </div>
</div>

Ademas en los objetos que creemos también podemos dotarlos de métodos y variables privadas que no podrán ser utilizadas desde ningun otro objeto o metodo de la aplicación fuera de su contexto, osea su objeto.

 //Construimos el objeto
function constructorObjeto(idObj) {
  //Como variable publica del objeto definimos el innerTexto, que recibira el argumento que se le pasa a la funcion que es el id del link pulsado y extraemos el innerHTML. 
  this.innerTexto = document.getElementById(idObj).innerHTML;
 //Me creo un metodo público que me saca por medio de un alert el string que le pase
  this.sacarInnerTexto = function(strTexto) {
  alert(strTexto);
 }
}
function LlamarAlObjeto(paramValue) {
 // Definimos un nuevo objeto por medio de nuestro constructor, asi en la siguiente linea podemos acceder a todos sus metodos y variables
 var miObjeto = new constructorObjeto(paramValue);
 //Ahora llamamos al metodo sacarInnerTexto de nuestro objeto y le pasamos la variable innerTexto que hemos definido en el interior del objeto  miObjeto.sacarInnerTexto(miObjeto.innerTexto);
}

Código HTML del creador de métodos y variables públicas

<div>
 <div>
  <h1>Ejemplo de creación de metodo y variables
públicas</h1>
  <a href=”#” onclick=”LlamarAlObjeto(this.id) ;return false” id=”link1″>Llamar al Objeto</a>
 </div>
</div>

 Código Script del creador de métodos y variables privadas

 //Construimos el objeto
function constructorObjeto(idObj) {
 //Defino metodos y variables privadas que no pueden ser accesibles desde fuera del objeto
 var texto = “Texto privado”;
 var metodoPrivado = function () {
  alert(texto+”—-Esto es un metodo privado que utiliza una variable privada y que se accede a el solo desde dentro del objeto”)
 }
 metodoPrivado();
}
function LlamarAlObjeto(paramValue) {
 // Definimos un nuevo objeto por medio de nuestro constructor, asi en la siguiente linea podemos acceder a todos sus metodos y variables
 var miObjeto = new constructorObjeto(paramValue);
}

Código HTML del creador de métodos y variables privadas

<div>
 <div>
  <h1>Ejemplo de creación de metodo y variables privadas</h1>
  <a href=”#” onclick=”LlamarAlObjeto(this.id) ;return false” id=”link1″>Llamada correcta a un metodo privado</a>
 </div>
</div>

Y ya para finalizar este tema en el que se trata el lenguaje JS a modo de introducción hablaremos de la herencia entre clases. En relación a este aspecto he de decir que tras buscar por internet la posibilidad de Herencia, me he encontrado con algunos ejemplos que principalmente no funcionan, como es el caso del ejemplo de herencias que nos muestra “Douglas Crockford”.

En este caso y tras probar las posibilidades de herencia me di cuenta de que o no sabia exactamente como funcionaba o es que realmente no se soporta este tipo de herencia, yo he llegado a la conclusión de que no lo soporta.

Posteriormente vi que la librería prototype ha desarrollado un metodo por el cual se pueden realizar herencias entre clases. Pero aún así seguí buscando la forma de tener una metodología propia para poder implementar las herencias en nuestro propia librería de JS. Y así llegué a un post en el que se trataba el tema en cuestión y en el cuál “Harry Fuecks” nos ha abierto la puerta a dotar a nuestrar propias librerías de herencia entre clases. ¿Y como es esto?, pues es tan sencillo como crearnos un objeto que lo que haga sea recorrer cada par “nombre:variable” del objeto que pasamos como original y asignárselo a nuevos pares “nombre:variable” del objeto al que deseamos copiar la herencia.

Bueno por si no me he explicado bien vamos a ver unos ejemplos para así ver su funcionamiento.

constructor de un objeto creador de herencias

function creaHerencia(objDestino, objOrigen) {
 var sConstructor = objOrigen.toString();
 var aMatch = sConstructor.match( /\s*function (.*)\(/ );
 if ( aMatch != null ) {
  objDestino.prototype[aMatch[1]] = objOrigen;
 }
 for (var m in objOrigen.prototype) {
  objDestino.prototype[m] =objOrigen.prototype[m];
 }
};
Código Script del creador de herencias

//Funcion que copia las clases
function creaHerencia(objDestino, objOrigen) {
 var sConstructor = objOrigen.toString();
 var aMatch = sConstructor.match( /\s*function(.*)\(/ );
 if ( aMatch != null ) {objDestino.prototype[aMatch[1]] = objOrigen; }
 for (var m in objOrigen.prototype) {
  objDestino.prototype[m] =objOrigen.prototype[m];
 }
};
// Funcion que crea las variablespropias de cada objeto
function creaciondeIdentificadores(obj) {
 this.id = document.getElementById(obj)};
// metodo del objeto “creaciondeIdentificadores” que saca el mensaje de alerta
creaciondeIdentificadores.prototype.identificador = function() {
 alert(“el valor del campo es:”+this.id.value);
};
function datosCampo(obj) {
// Llamamos al objeto de referencia
 this.creaciondeIdentificadores(obj);
};
// Llamamos a la funcion que hara que datosCampo herede de creaciondeIdentificadores creaHerencia(datosCampo, creaciondeIdentificadores); function verValordeCampos(obj) {
 var obj = new datosCampo(obj.id);
 obj.identificador();

Código HTML del creador de herencias

<div>
 <div>
  <h1>Ejemplo de creación de herencias</h1>
  < input type=”text” value=”" name=”campo1″ id=”campo1″ onblur=”verValordeCampos(this)”>
 </div>
</div>
FUENTE: ajax hispano

Compartir :FacebookGoogle+LinkedInTwitter
Publicado en Ajax | Responder

Menú de navegación estilo acordeón

La navegación al estilo acordeón es muy útil cuando quieres mostrar mucha información en un espacio muy limitado. Existen varios Scripts basados en Frameworks de Javascript tales cómo mootools, scriptaculous o jQuery, pero estos resultan muy pesados para nuestros sitios web sobre todo si solamente queremos un simple acordeón.

Simple Javascript Accordions es uno de los Scripts más ligeros, simples y fáciles de usar para crear menús de navegación de acordeón, además no requiere ningún frameworks y es funcional en todos los navegadores de PC’s, Mac y Linux.

Características de Simple Javascript Accordions
■Script muy pequeño ( 1,149 bytes )
■Integración muy sencilla.
■No requiere un Framework.
■Puede ser usado cómo un sistema de pestañas animadas (tab system)
■Compatible con Internet Explorer, Mozilla Firefox, Safari y Opera.

fuente: carlos leopoldo

Compartir :FacebookGoogle+LinkedInTwitter
Publicado en Ajax | Responder

Novedades