Mostrando entradas con la etiqueta Ajax. Mostrar todas las entradas
Mostrando entradas con la etiqueta Ajax. Mostrar todas las entradas

jueves, 27 de marzo de 2014

Arquitectura de aplicaciones web: Ruby on Rails



De nuevo coursera da en el clavo.
El lunes comenzaba un curso que de momento tiene muy muy buena pinta, absolutamente recomendable si quieres iniciarte con buen pie en el desarrollo web.
Ruby on Rails hace uso intensivo del patrón de diseño de software MVC (Modelo View Controller), un patrón que se ha extendido en la industria del software y que se ha consolidado como una muy buena práctica de diseño.

Este patrón ha sido adoptado también por  o imitado por grandes del desarrollo como Microsoft, en su framework MVC.NET, que sigue los pasos de Ruby on Rails.

En el curso se tocan otras herramientas clave para el desarrollo web:
  • Json
  • JQuery
  • Ajax
  • CSS
  • Javascript
  • SQLite
  • ...


Te dejo el enlace al curso en coursera: https://www.coursera.org/course/webapplications

jueves, 13 de diciembre de 2012

Mini chat: fase 1

En la siguiente presentación te muestro una serie de pasos básicos para iniciar el desarrollo de un chat en el proyecto del mini-juego.

En esta primera fase trabajaremos el lado del cliente. En próximas fases desarrollaremos el lado servidor y la base de datos:


martes, 4 de diciembre de 2012

Ajax: panel de jugadores conectados

Después de integrar con CSLA-- y con base de datos, es realmente sencillo agregar un nuevo panel en nuestro mini-juego que refleje en todo momento qué jugadores están conectados.

En la siguiente imagen mostramos un captura de pantalla en la que hay tres navegadores abiertos, cada uno con un jugador diferente:



Si cualquiera de los jugadores pulsa el botón Salir, automáticamente se refrescará este panel en el navegador de los otros dos jugadores. En la siguiente imagen, el jugador 3 pulsa salir:



Cómo lo hemos hecho.

  1. Refresco manual. Comienza haciendo el refresco del panel de jugadores de forma manual. Para ello, añade un hipervínculo Actualizar que, al pulsarlo, invoque a la función JS que se encarga de ello.
  2. Función JS refrescarJugadoresConectados(). Crea una función JS que lance una petición al servicio web getJugadoresConectados.php que viene implementado en CSLA--. Esta función, cuando obtiene la respuesta del servidor, debe actualizar el contenido del panel de jugadores conectados.
  3. Prueba el refresco manual. Prueba esta primera versión de tu solución y asegúrate que el refresco manaul va bien. Abre dos navegadores y prueba a abrir/cerrar sesiones en cada uno y comprueba que se refresca correctamente el panel de cada jugador.
  4. Variable timer. Ahora que ya funciona el refresco manual vamos a automatizarlo. Para ello, crea una variable global timerPlayersConnected que se encargará de gestionar el timer que se ejecutará cada X segundos para consultar qué jugadores están conectados en cada momento.
  5. Constante de tiempo. Crea una constante PLAYERS_CONNECTED_REFRESH_TIME en la que almacenes el tiempo que quieres que se refresque el panel de jugadores conectados. De esta manera resultará más fácil modificar el tiempo de refresco.
  6. Inicialización. Crea una función init(), que se ejecute en el evento onload del juego, y que se encargue simplemente de iniciar el timer del refresco de jugadores.
  7. Prueba el refresco automático. De nuevo, abre varios navegadores y conéctate con diferentes jugadores. Abre y cierra sesión desde cada uno de ellos y verifica que se actualiza correctamente el panel de jugadores en cada navegador.
  8. Actualizar el campo LastConnection de la base de datos. Cada vez que un jugador envía al servidor una petición de la lista de jugadores conectados, aprovecha para actualizar su valor en base de datos del campo LastConnection, de tal manera que si pasa más de 5 minutos jugado, no figure como que está desconectado. Para ello, te basta con invocar el método Actualizar_LastConnection() de la clase Jugador.

martes, 13 de noviembre de 2012

AJAX: ejercicio simple simplísimo

Entra en el siguiente enlace y observa el comportamiento: pulsar aquí


Este ejercicio muestra tu IP obtenida desde el servidor y la hora del servidor utilizando AJAX. Como has podido comprobar, NO SE HA REFRESCADO TODA LA PÁGINA, sino el panel de resultados.

Este ejemplo simple se divide en cuatro ficheros, todos alojados en el servidor:

simple1.css



simple1_browser.php


simple1.js



simple1_server.php