AJAX y JS: Mini chat (fase 1)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

AJAX y JS: Mini chat (fase 1)

on

  • 1,174 views

 

Statistics

Views

Total Views
1,174
Views on SlideShare
703
Embed Views
471

Actions

Likes
0
Downloads
5
Comments
0

6 Embeds 471

http://fpkanarias.blogspot.com.es 451
http://fpkanarias.blogspot.com 11
http://www.fpkanarias.blogspot.com.es 6
http://fpkanarias.blogspot.in 1
http://fpkanarias.blogspot.jp 1
http://fpkanarias.blogspot.com.ar 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

AJAX y JS: Mini chat (fase 1) Presentation Transcript

  • 1. Crono: mini-chat
  • 2. 2/22Visión global En esta nueva versión de cRono vamos a añadirle un mini-chat Haremos uso intensivo de Javascript, CSS y AJAX
  • 3. 3/22Algunos requisitos del mini-chat Al hacer doble click sobre un jugador conectado se me abre una ventana de mini-chat con ese jugador NO puedo abrir un mini-chat conmigo mismo NO puedo abrir un mini-chat con un jugador con el que ya estoy chateando Solo se permite un máximo de 3 mini-chats simultáneos El servidor hará de almacén de conversaciones Comunicaremos los clientes con el servidor vía AJAX Cada jugador consultará de forma periódica si hay un mensaje para él vía AJAX Una vez ha descargado un mensaje, se marcará en el servidor como leído, de modo que NO se vuelva a enviar al jugador
  • 4. Fase 1: los 6 pasos
  • 5. 5/22PASO 1: Devolver lista de jugadores conectadosseparados por ; El servidor debe olvidarse de la capa de presentación, así que devolverá simplemente la lista de jugadores como una cadena de texto en la que separamos por ; los login Modifica los métodos Jugador.toString y JugadoresList.toString Asegúrate que este paso funciona
  • 6. 6/22PASO 2 – cliente: panel de conectados, una capa porcada jugador Desde el cliente, cuando recibes en AJAX la lista de jugadores conectados, vuélcala a un array Para ello utiliza el método split Crea una rutina crearUnaCapaPorJugador(vectorJugadores) que cree dinámicamente código HTML en el panel de jugadores conectados Esta rutina devuelve el código HTML que se inserta en el inner del panel de conectados Prueba este paso antes de seguir
  • 7. 7/22PASO 3: Evento doble click sobre jugador Captura el evento doble click sobre un jugador conectado Hazlo sobre la capa del jugador Asegúrate de que este paso funciona simplemente mostrando un alert
  • 8. 8/22PASO 4: registrar número de chats establecidos Llegados a este punto nuestro cRono ya reacciona a doble click sobre un jugador conectado La rutina que maneja el doble click llámala agregarVentanaChat(who) who representa el alias ó login del jugador contra el que he abierto el mini-chat Todos el código asociado al mini-chat alójalo en un fichero llamado chat.js Crea una nueva capa chats que alojará todas las ventanas de mini-chat. En este paso, esta capa contendrá simplemente el número de chats abiertos Crea una variable global nchats para llevar esta cuenta Actualiza esta cuenta en tu función que captura el doble-click sobre un jugador Muestra el valor de nchats en la capa de chats.
  • 9. 9/22PASO 5: controla la apertura de chats Evita que el jugador pueda abrir un mini-chat consigo mismo Evita que el jugador pueda abrir más de 3 mini-chats Evita que el jugador pueda abrir un chat con un jugador con el que ya está hablando Para ello, crea un array chats_with que contenga una entrada con el login (ó alias) del jugador con el que inicia un chat Antes de abrir un chat, comprueba que ese jugador NO esté ya en la lista de chats_with
  • 10. 10/22 PASO 6: Ventana de chat básica tituloChat <span <span tituloChat...> <DIV tituloChat...> botoneraChat...>conversacionChat ventanaChat chats mensajeChat
  • 11. Posicionamiento CSS en 10 pasos
  • 12. 12/22Fuente Este mini-tutorial es una traducción de BarelyFitz Designs En esta URL tienes la fuente original: Enlace al original
  • 13. 13/221. position: static Este es el posicionamiento por defecto de cualquier elemento Indica que NO se le asigna una posición, sino simplemente se ubica “donde le toque” Normalmente NO se indica explícitamente, salvo para modificar el posicionamiento de un objeto que previamente hemos establecido
  • 14. 14/222. position: relative Nos permite establecer top - bottom y left - right De esta manera lo desplazamos de la ubicación que le correspondería si no hubiéramos modificado/variado su posición El div-1 se ha desplazado a la izquierda de donde le tocaba El siguiente elemento (div-after) se coloca donde le hubiera tocado, de modo que queda detrás de div-1
  • 15. 15/223. position: absolute Cuando establecemos position: absolute, el elemento se elimina del documento y se ubica exactamente donde le indiquemos. Vamos a mover div-1a al top de la página: Hemos colocado el div-1a en una posición absoluta de la página Nos podría interesar en una posición absoluta dentro de otro div, y aquí es donde usaremos la combinación relative-absolute
  • 16. 16/224. position:relative + position:absolute Si establecemos position:relative para div-1, cualquier elemento dentro de él será posicionado de forma relativa a su posición Ahora, al div-1a, dentro de div-1, le indicamos position:absolute, lo podemos colocar en el top de div-1
  • 17. 17/225. dos columnas absolute Una ventaja del posicionamiento absoluto es que podemos definir los elementos en cualquier orden en la página y se ubicarán en la posición deseada... ...con independencia de cuál declaremos primero
  • 18. 18/226. dos columnas de altura absoluta Una posible solución puede ser estacer una altura absoluta para los elementos El problema está en que NO podemos saber a priori qué tamaño de letra van a contener los elementos ni cuánto texto van a albergar
  • 19. 19/227. float En caso de que la altura de las columnas sea variable, el posicionado absoluto NO nos vale Podemos hacer flotar un elemento lo máximo posible a la izquierda o a la derecha, y hacer que el texto se “encaje” alrededor de éste.
  • 20. 20/228. Dos columnas flotantes Si “flotamos” una columna hacia la izquierda, y la otra también a la izquierda, se colocará la una a continuación de la otra
  • 21. 21/229. columnas flotantes y clear Después de elementos flotantes, podemos “limpiar” el float y colocar el resto del contenido
  • 22. 22/2210. Cuidado con IE Todo lo visto aquí no se ha adaptado al funcionamiento particular de IE... ...de modo que un uso literal de este tutorial podría dar problemas en ese navegador