El documento describe los pasos para implementar un mini-chat en una versión actualizada de Crono. Se detallan 10 pasos para posicionar elementos usando CSS, incluyendo posicionamiento estático, relativo, absoluto y flotante. El objetivo final es permitir que los jugadores abran ventanas de chat con otros jugadores de forma simultánea.

1. Crono: mini-chat

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

4. Fase 1: los 6 pasos

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

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/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