2. 2/22
Visió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/22
Algunos 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
5. 5/22
PASO 1: Devolver lista de jugadores conectados
separados 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/22
PASO 2 – cliente: panel de conectados, una capa por
cada 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/22
PASO 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/22
PASO 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/22
PASO 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
12. 12/22
Fuente
Este mini-tutorial es una traducción de BarelyFitz Designs
En esta URL tienes la fuente original:
Enlace al original
13. 13/22
1. 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/22
2. 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/22
3. 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/22
4. 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/22
5. 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/22
6. 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/22
7. 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/22
8. 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/22
9. columnas flotantes y clear
Después de elementos flotantes, podemos “limpiar” el float y colocar el
resto del contenido
22. 22/22
10. 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