2. 2/22Visin global En esta nueva versin de cRono vamos a
aadirle 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 ventanade 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 estoychateando Solo
se permite un mximo de 3 mini-chats simultneos El servidor har de
almacn de conversaciones Comunicaremos los clientes con el servidor
va AJAX Cada jugador consultar de forma peridica si hay un mensaje
para lva AJAX Una vez ha descargado un mensaje, se marcar en el
servidor comoledo, 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
presentacin, as quedevolver simplemente la lista de jugadores como
una cadena detexto en la que separamos por ; los login Modifica los
mtodos Jugador.toString y JugadoresList.toString Asegrate 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 jugadoresconectados, vulcala a un array Para ello utiliza el
mtodo split Crea una rutina
crearUnaCapaPorJugador(vectorJugadores)que cree dinmicamente cdigo
HTML en el panel de jugadoresconectados Esta rutina devuelve el
cdigo HTML que se inserta en el inner delpanel 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 Asegrate de que este paso funciona
simplemente mostrando unalert 8. 8/22PASO 4: registrar nmero 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 llmala agregarVentanaChat(who) who representa el alias
login del jugador contra el que he abierto el mini-chat Todos el
cdigo asociado al mini-chat aljalo 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 nmero de
chats abiertos Crea una variable global nchats para llevar esta
cuenta Actualiza esta cuenta en tu funcin 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 ms de 3 mini-chats Evita que el jugador pueda abrir un
chat con un jugador con el queya est hablando Para ello, crea un
array chats_with que contenga una entrada conel login ( alias) del
jugador con el que inicia un chat Antes de abrir un chat, comprueba
que ese jugador NO est ya enla lista de chats_with 10. 10/22PASO 6:
Ventana de chat bsica tituloChat
botoneraChat...>conversacionChatventanaChat
chatsmensajeChat 11. Posicionamiento CSS en 10 pasos 12.
12/22Fuente Este mini-tutorial es una traduccin 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 posicin, sino
simplemente seubica donde le toque Normalmente NO se indica
explcitamente, salvo para modificar elposicionamiento 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 ubicacin que le correspondera sino hubiramos
modificado/variado su posicin El div-1 se ha desplazado a la
izquierda de donde le tocaba El siguiente elemento (div-after) se
coloca donde le hubiera tocado, demodo que queda detrs de div-1 15.
15/223. position: absolute Cuando establecemos position: absolute,
el elemento se elimina deldocumento y se ubica exactamente donde le
indiquemos. Vamos a mover div-1a al top de la pgina: Hemos colocado
el div-1a en una posicin absoluta de la pgina Nos podra interesar
en una posicin absoluta dentro de otro div, y aqu esdonde usaremos
la combinacin relative-absolute 16. 16/224. position:relative +
position:absolute Si establecemos position:relative para div-1,
cualquier elemento dentro del ser posicionado de forma relativa a
su posicin Ahora, al div-1a, dentro de div-1, le indicamos
position:absolute, lo podemoscolocar en el top de div-1 17. 17/225.
dos columnas absolute Una ventaja del posicionamiento absoluto es
que podemos definir loselementos en cualquier orden en la pgina y
se ubicarn en la posicindeseada... ...con independencia de cul
declaremos primero 18. 18/226. dos columnas de altura absoluta Una
posible solucin puede ser estacer una altura absoluta para
loselementos El problema est en que NO podemos saber a priori qu
tamao de letravan a contener los elementos ni cunto texto van a
albergar 19. 19/227. float En caso de que la altura de las columnas
sea variable, el posicionadoabsoluto NO nos vale Podemos hacer
flotar un elemento lo mximo posible a la izquierda o a laderecha, 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 tambin a laizquierda, se colocar la una a continuacin de la
otra 21. 21/229. columnas flotantes y clear Despus de elementos
flotantes, podemos limpiar el float y colocar elresto 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 podra dar problemas en esenavegador
