Antes de empezar:
Para los que no sepan lo que es Comet, es una implementacion que al igual que Ajax, nos presenta una conexion con el servidor, pero he aqui el punto importante, lo hace de forma contraria a Ajax, ya que este hace pedidos al servidor y espera por su respuesta, lo que en aplicaciones grandes ( y sobre todo webs) consume mucho ancho de banda; en cambio comet crea una conexion abierta con el servidor, y este le va informado a la aplicacion sobre los cambios que ocurren.

Ayer, dando una vuelta por Ribosomatic, me encuentro con un par de posts que explicaban como utilizar Comet con Prototype, cosa que me llamo muchisimo la atencion y ya que ayer no tube tiempo de probar esos codigos, me voy a poner a hacerlo ahora, y para no dejarlos colgados, como si me hubiera olvidado del blog, les voy comentando que estoy por empezar a experimentar con Comet y una vez que le agarre un poco la mano, publicare sobre el tema.

Antes de terminar, les dejo los links de los posts de Ribosomatic y algunos mas que capaz que le sean de ayuda:

Como implementar Comet con PHP y Prototype I
Como implementar Comet con PHP y Prototype II

Comet en wikipedia (ES)
Despues de Ajax, Comet
Ajax Dojo Comet Tutorial by Martin Ankerl
How to implement COMET with PHP [Zeitoun.net]
Comet with PHP
Comet paso a paso: pizarra colaborativa para páginas web

Que empiece con esto no quiere decir que doy por terminada la encuesta, si no que para no dejar de postear, voy tirando de lo mas votado (y por el momento es Ajax).

Bueno, volviendo al post… Ajax, la tecnologia de la web 2.0, o eso es lo que dicen; pero la verdad es que la mayoria de los sitios categorizados como 2.0, implementan mucho el Ajax, para incluir archivos, para hacer elementos “draggeables“, etc.

Pasemos a lo importante: Prototype.js. No se si la mayoria lo conoce, pero es (para mi y muchos de mis conocidos) el mejor framework/libreria javascript hasta el momento, y es apartir de esto, que yo desarrollo en ajax, ya que prototype te brinda bastantes funciones y metodos que nos permiten un facil manejo de javacript/ajax.

Entonces, lo que veremos en este tutorial, son varias funciones de Prototype que estoy seguro que a mas de uno le sera util a la hora de incursionar en el mundo de la web 2.0.

Lee el resto de la entrada »

Como hoy no he tenido tiempo de desarrollar ninguna clase ni nada para postear, he decidido hacer un rejunte de varios codigos y aplicaciones ajax/javascript que me parece que deberian ser tenidas en cuenta a la hora de programar, por que por ahi, nos pueden sacar de varios inconvenientes en unas simples lineas, vamos al listado:

1 - Niceforms 1.0:

Si eres desarrollador web, estoy seguro que mas de una vez has discutido con un cliente por el hecho de que no podes aplicar estilos sobre los campos select, bueno, ahi es donde Niceforms 1.0, cambiando todo los controles de nuestros formularios

Demo - Pagina oficial

2 - FancyUploads (Mootools):

Este sistema es bastante completo y “lindo” a la vista, nos permite seleccionar varios archivos para subir al servidor y luego mandarlos todos de una sola vez, hasta incluye barra de progreso, para esos archivos que nunca terminan de subir:

Demo - Pagina oficial

Lee el resto de la entrada »

Hoy estaba viendo el Google Analytics y note que la mayor parte de las visitas de la semana pasada (lugo del download day) fueron por la clase de formularios con ajax, en respuesta a eso, me propuse seguir un poco mas con el tema y es por eso que ahora les traigo una clase para hacer includes de archivos mediante ajax, uno de los usos mas comunes que se le da a esta tecnologia.

Para aquellos que manejan ajax, estoy totalmente seguro que esto les parecera una tonteria, pero fijense que es no lo es tanto, cuando estaba terminando de escribir la clase me di cuenta de que es tan sencilla de usar, que hasta la usaria para sitios pequeños que no requieran un manejo monstruoso de ajax.

En fin... pasemos a la clase:

iGeekAjaxIncludes:

1- Incluimos la clase y creamos el objeto:

El primer parametro del constructor, es el div donde se incluiran los futuros archivo; y el segundo, que es opcional, es el div que muestra un mensaje mientras se genera el proceso de ajax (un simple "loading" en mi ejemplo).
Al igual que en la clase AjaxForm, tenemos el metodo "includePrototype" para llamarlo en caso de que no lo tengamos incluido:

Luego de crear el objeto y llamar a prototype(si no lo tenemos), generamos el javascript para los includes:

Eso seria todo para el primer paso, que en realidad es el TODO de la clase, lo proximo que vemos es como crear links para includes ajax.

2- Creamos un link para ajax:

Y listo! con eso ya estaria funcionando, en caso de querer cosas mas explicitas, el metodo "includex" tiene los siguientes parametros opcionales: $parameters="", $method="post",$return=false. En parametros podemos pasarle valores en cadena como en una url, por ejemplo:"parametro1=algo&parametro2=otracosa&parametro3=etc". El metodo es por donde quieras recibir la informacio, get o post; y por ultimo el "return", si quieres capturar la informacio o que salga directo por un "echo", por defecto sale con un "echo".

Para terminar les dejo una demo y su descarga, para que se sercioren de que la clase funciona perfectamente.

DEMO - DESCARGA

Antes de terminar, ademas de decir que pueden meter mano en el code, que solo me avisen para saber que alguien lo uso, si les interesa que siga mandando codigos como estos, mandenme un mensaje por la seccion contacto, o directamente dejenme un comentario aca, asi al menos se que estos codigos no estan siendo pasados por alto

Saludos y espero les sirva

Ultimamente son muchos los sitios que incorporan ajax debido a sus funcionalidades, su facil implementacion y obviamente su menor consumo de transferencia; bueno, para no ser dejados atras, seria interesante aprender un poco sobre el tema. Como no voy a hacer incapie directo en la definicion de ajax, ni sus pro y contras, les dejo el link de wiki para que lo vean ustedes.

Ahora, pasando a lo concreto, Prototype.js es uno de los frameworks mas utilizados en este momento para ajax (y javascript) debido a que solo se efoca en procesos, no tiene funciones graficas, ni efectos, solamente se dedia a las funcionalidades (si queres aplicar efectos visuales con Prototype, deberian de usar Script.aculo.us , una libreria desarrollada especialmente sobre y para Prototype).
Teniendo en cuenta que hay mucha gente que no tiene tiempo de sentarse y aprender ajax como se debe, es que he escrito esta pequeña clase en PHP para la facil implementacion de ajax en formularios (nos servira para formularios de contacto, de registro, de administracion, etc.).

Clase AjaxForm:

Primero que nada, la clase no posee constructor, pero si una funcion con la que podemos simular un constructor y setear todas las configuraciones (que son pocas) de una sola vez:

1- Descargamos la clase y ejemplo

Lee el resto de la entrada »

Mas del 60% de la web esta en idiomas que no son el español, por lo que la mayor parte del tiempo nos vemos obligados a recurrir a un traductor; bueno, he aqui el primer tutorial de iGeek, que presenta como objetivo crear tu propio traductor basandote en la API (del inglés Application Programming Interface - Interfaz de Programación de Aplicaciones) del traductor de Google (Google Translate).

1. Llamar a la libreria de Google:

2. Inicializar la API:

El primer parametro es el nombre de la API (language), y el segundo la version (1).

Una vez llevados a cabo los dos primeros puntos, ya tenemos nuestra conexion, ahora solo falta la funcion que traduzca, veamos un ejemplo simple teniendo en cuenta una textarea de id "msg" y que a la siguiente funcion la llama un boton de tipo button en su evento onClick() :

Si se llevan bien con javascript no creo que el ejemplo los haya confundido, pero para todos aquellos que posiblemente no esten tan familiarizados con la sintaxis, lo explicare:
La function google.language.translate viene del objeto que declaramos al incluir la api en los dos primeros puntos del tutorial. La funcion lleva 4 parametros, los cuales son: el texto a traducir, el idioma del texto, el idioma al que queremos traducrlo y una funcion resultante (callback function) que nos dira que hacer una vez que el proceso de traduccion haya terminado. Segun el codigo del ejemplo anterior, estamos traduciendo el contenido de la textarea "msg" de español a ingles y que una vez que termine, lo mostraremos en la misma textarea.
Pueden notar que en la funcion se especifica solo una abreviacion del nombre del lenguaje ("es" y "en"), esto es por que esa es la manera en que trabaja el traductor, ahora veamos los lenguages soportados:

• Árabe (ar)
• Chino (zh-CN)
• Aleman (de)
• Inglés (en)
• Francés (fr)
• Holandés (nl)
• Griego (el)
• Italiano (it)
• Japonés (ja)
• Coreano (ko)
• Portugues (pt)
• Ruso (ru)
• Español (es)

Lamentablemente no encuentro todavia la forma de traducir un sitio completo con esta api, posiblemente todavia no este hecho, pero si llego a encontar algo lo posteo por aca. Antes de terminar les dejo un link a una demo de un traductor que estaba haciendo en mis ratos libres y creeria que con estos pequeños ejemplos ustedes van a poder hacer algo un poco mas grande y complejo :).

DEMO

Ayer, Yahoo! libero la ultima version de su libreria YUI(Yahoo User Interface Library). Esta nueva version viene con bastantes nuevas mejoras, como un ColorPicker, validador de JSON, manejo de scripts y css on fly, etc. Hay que tener en cuenta que algunos de sus componentes todavia se encuentran en fase beta, lo que no quita que esten buenas.
Algunas de las cosas mas destacadas del changelog son:

• Actualizacion del control de slider.
• Control para subir archivos en flash (el de Flickr).
• Un nuevo administrador de layouts.
• El manejo de javascript ahora tendra un front-end grafico para hacer la informacion mas entendible.

Via | Ajaxian
Enlace | YUI 2.5

Jugando a "Stumblear" me encuentro con esto, que es un poco viejo, pero que no esta de mas para tener como referencia.
Scripteka es un completo directorio de librerias desarrolladas para funcionar con el famoso framework Prototype. Muy util para todos aquellos que utilizamos el framework.

Enlace | Scripteka

Este chat es mas que una simple pagina html con algo de css y algunos scripts. El lado que se ocupa del servidor es bastante pequeño y puede ser igualado con cualquier tecnologia disponible, como ser php y archivos txt.
Fuera de usarlo como chat, puede utilizarlo para cosas como: sistema de comentarios para tu blog y de inmediata comunicacion entre los usuarios, Shoutbox, servicio de tiempo real de publicacion de contenido, etc.

Via | WebAppers
Enlace | XHTML Chat

Spry Framework es un libreria javascript que te provee funcionalidades ajax de un modo sencillo para cualquier tipo de usuario. Esta diseñado para tomar toda la complejidad de Ajax y mostrarla de un modo facil, lo que ayuda a los desarrolladores a crear paginas web 2.0.
El Framework incorpora XML, JSON, HTML, CSS y un minimo javascript. Esta centralizado en HTML, CSS y Javascript. Aqui hay algunas demos y ejemplos.
Y por ultimo, el Spry Framework viene incorporado en la ultima version de Dreamweaver (CS3).

Via | Web Appers
Enlace | Spry Framework