criztianfx

AVISOS SI NO QUERES LEER TODO EL POST ! Usos prácticos: - Notificaciones instantáneas como las de Taringa, - Chat - Monitoreo de sensores - Usuarios online/offline - y todo lo que esté al alcande de tu imaginación. Si conoces la tecnología y solamente quieres usar el código dirígete al final del post para descargarlo ! Uno de los grandes problemas de las páginas WEB tradicionales, es que son estáticas. ¿Quién no quiso hacer alguna vez un chat en PHP o un sistema de mensajería y se encontró con la desagradable tarea de refrescar el navegador cada cierto tiempo? En éste artículo trataré de explicar como resolver éste asunto con la tecnología de AJAX. Antes de empezar de lleno con el post, me gustaría hablar de algunos términos que se trataran en el mismo. TECNOLOGÍA PUSH Wikipedia: La tecnología push es una forma de comunicación a través de internet en la que la petición de envío tiene origen en el servidor. Si se quedaron como Mr. Bean, no se preocupen. Mejor nos quedamos con la explicación de GenBeta: En transacciones push es el servidor quien inicia la transacción. Un ejemplo de esto es cuando disponemos de push mail, es decir, cuando somos notificados de nuevos correos electrónicos en el momento de recibirlos, y no tras una comprobación periódica por parte del cliente (es decir, sin actualizar el navegador). Es el servidor quien envía un mensaje al cliente para avisarle de que hay nuevos e-mails. http://www.genbeta.com/a-fondo/tecnologia-push-asi-funciona ¿Ahora si? Bueno me alegro. Lo que pretendo hacer es "EMULAR" una notificación push, para evitar que tengamos que actualizar nuestro navegador para ver los cambios realizados en la base de datos. Le emulacion mas simple consiste en refrescar al browser cada un cierto periodo de tiempo de forma tal que el mismo "busque" información nueva a intervalos regulares. Esto puede hacerse en forma sencilla usando JavaScript o bien un meta-tag de refresh de la forma: En JavaScript: window.setInterval("location.reload()",5000); El problema del script anterior, así como está, es en primer lugar, que al refrescar la pagina es desagradable para el usuario que ve que la pagina desaparece y vuelve a cargarse o bien que la página "flashea" si la pagina es muy pequeña. En segundo lugar porque es necesario regenerar toda la pagina cuando habitualmente solo se quiere actualizar una porcion de la misma. No es ésta la forma en que vamos a emular nuestro sistema. Recién les nombre la tecnología AJAX, Pero ¿Qué es? Volvemos a recurrir a Wikipedia, pero ésta vez es un poco más claro: AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas. Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones. Es justo lo que necesitamos!! Se puede ultilizar otras alternativas a AJAX como se explica en el siguiente artículo, muy interesante por cierto: http://blog.continuum.cl/comet-y-web-socket-un-enfoque-diferente-a-ajax/ Bueno habiéndoles dado éste pantallazo podemos empezar con el código comprendiendo mejor su base : 1. script.hp https://goo.gl/cxmPp2 2. index.php https://goo.gl/YHht9Q 3. div1.php https://goo.gl/N4kFbn 4. div2.php https://goo.gl/yHx570 5. div3.php https://goo.gl/QQ4PwJ Descargar código fuente completo: Descargar - https://goo.gl/5S5NuP El resultado es el siguiente : Print 1: Print 2: Ésta es una excelente herramienta para nuestras próximas aplicaciones WEB. El ejemplo dado es bastante trivial, pero se puede desarrollar casos más complejos. Y como siempre, espero que les haya servido. Cualquier duda pueden consultarme. Saludos! Fuente: El post es una recopilación de diferentes páginas web. La fuente primaria del código es del siguiente artículo: vcomputadoras.com QUIZÁS TE INTERESE MIS OTROS POST'S: Desarrolla tu aplicación web en 5 pasos http://www.taringa.net/post/ebooks-tutoriales/19332180/Desarrolla-tu-aplicacion-web-en-5-pasos-CakePhp.html Descargar Aplicación WEB en PHP http://www.taringa.net/posts/downloads/19255863/Descargar-Aplicacion-WEB-en-PHP-Aporte.html Reportes y CRUD con Java [MySQL+JasperReport] http://www.taringa.net/posts/downloads/19493659/Reportes-y-CRUD-con-Java-MySQL-JasperReport.html Comunicación Java con Arduino vía Puerto Serial http://www.taringa.net/posts/links/19350089/Comunicacion-Java-con-Arduino-via-Puerto-Serial.html