Diferencia entre revisiones de «Instrucciones del webchat HTML»

De ChatHispano
Saltar a: navegación, buscar
(Página creada con «== Introducción == ChatHispano utiliza el webchat programado en HTML5 [https://kiwiirc.com/ KiwiIrc]. Este Chat tiene varias ventajas respecto a sus equivalentes en Flash...»)
 
Línea 1: Línea 1:
== Introducción ==
+
El nuevo webchat HTML5 de Chat hispano está basado en Kiwiirc y hemos tenido especial cuidado en hacerlo compatible con prácticamente cualquier dispositivo del mercado, desde los clásicos ordenadores, pasando por móviles hasta Videoconsolas o SmartTvs.
  
ChatHispano utiliza el webchat programado en HTML5 [https://kiwiirc.com/ KiwiIrc]. Este Chat tiene varias ventajas respecto a sus equivalentes en Flash pudiéndose destacar la posibilidad de definir el tamaño a voluntad del webmaster, la menor carga de recursos en los equipos de los usuarios o la total compatibilidad con las últimas versiones de sistemas operativos móviles como [http://es.wikipedia.org/wiki/Android Android] o [http://es.wikipedia.org/wiki/IOS iOS].
+
Esta aplicación es extremadamente flexible y al estar basada en código abierto puede ser modificada y personalizada sin problemas por parte de cualquier usuario que quiera incluirla en su WEB
''Nota: Deben ser sistemas actualizados pues es necesaria la compatibilidad plena con HTML5 ''.
+
  
== Integrar el webchat ==
+
== Conexión ==
  
 +
La ventana de conexión del chat es funcional y con un diseño claro. Podemos encontrar las siguientes opciones:
 +
* '''Nick:''' Aquí se introduce el nick o alias con el que queramos conectar, en caso que el alias escogido se encuentre ocupado, el sistema nos pondrá uno aleatorio
 +
* '''Tengo contraseña:''' Si nuestro nick está registrado debemos marcar esta opción y se desplegará un formulario donde introducir nuestra contraseña.
 +
* '''Contraseña''': Este formulario solo aparece si marcamos la casilla anterior y es donde se introduce la contraseña de nuestro nick registrado.
 +
* '''Canal:''' Aquí hay que poner el canal al que queramos entrar en primer lugar, eso no  impide entrar en canales adicionales una vez hayamos establecido la conexión.
 +
* '''Comenzar:''' Al pulsar este botón se establecerá la conexión y entraremos al canal seleccionado. En unas pocas ocasiones no se establece la conexión, si sucede se soluciona recargando la página.
  
Existen dos sistemas de integración para el webchat HTML de ChatHispano. La primera es incrustar o embeber el webchat dentro de la página web mediante un iframe lo que tiene como ventaja la posibilidad de chatear sin abandonar la web de origen y la segunda es la de generar un enlace directo con los datos de nick y canal por defecto definidos. Las ventajas de este sistema son que el entorno del chat es más grande y por lo tanto más cómodo para el usuario y que de esta forma el chat se adaptará siempre a la resolución del dispositivo desde el cual se chatee.
+
[[Archivo:Kiwilogin.JPG|miniaturadeimagen|centro|Login del kiwi]]
''Nota: Se recomienda encarecidamente utilizar el sistema del enlace si el servicio de chat está orientado a dispositivos móviles, ya que de esta forma se integra a la perfección con el terminal, adaptándose a la posición del mismo.''
+
  
=== Incrustar el webchat ===
+
== Interfaz ==
  
Para generar el código del iframe para incrustar o enlazar el webchat en una página web, disponemos de un formulario que lo genera de forma automática y transparente que puedes encontrar en http://www.chathispano.com/generador-de-iframe. En este formulario existen los siguientes campos:
+
Kiwiirc se maneja desde se menú superior, aunque es compatible con todos los comandos típicos de cualquier red de chat basada en IRC. Así mismo tiene una estructura similar a la de cualquier aplicación de chat, Una gran superficie donde se muestra el contenido de la ventana activa, ya sea un canal o un mensaje privado, una columna a la derecha en la que aparecen todos los nicks presentes en un canal (en dispositivos móviles esta columna solo aparece en posición apaisada) y el espacio de escritura en la parte inferior. En la parte superior se encuentra el menú y la lista de canales o salas abiertas que puede ser situada a la izquierda desde la configuración.
  
*'''Canal:''' Se trata del canal al que acceder desde el webcht de la web, si se quiere que haya varios canales en una lista desplegable para escoger uno, se pueden poner separados poner comas. La # es necesaria. Por ejemplo poniendo el canal #opers_help es usuario entrará a dicho canal.
+
=== Barra de menús ===
*'''Nick:''' Se trata del nick o alias por defecto. Dado que distintos usuarios se van a conectar desde el mismo webchat y sólo se puede utilizar un nick al mismo tiempo, recomendamos encarecidamente utilizar el formato nick? lo que hará que el ? sea sustituido por 5 cifras aleatorias. Por ejemplo si se pone miweb? el usuario entrará al chat con un nick similar a miweb12345.
+
*'''Tema:''' Se trata del aspecto visual que tendrá el webchat. Existen 4 opciones
+
**'''Default o relaxed''': Se trata del tema normal con lista de nicks en los canales, en tonos verdes y ocupando todo el  espacio disponible. Este es el tema recomendado en la mayoría de las situaciones.
+
**'''Mini:''' Se trata de un tema compacto, ocupa una altura de aproximadamente un 25% de la pantalla, y no muestra la lista de usuarios en los canales.
+
**'''CLI:''' Es similar al tema Relaxed, ocupando todo el espacio disponible y con lista de nicks en los canales pero de color negro.
+
**'''Basic:''' Es similar al tema Relaxed, ocupando todo el espacio disponible y con lista de nicks en los canales pero de color gris neutro.
+
*'''Ancho:''' Se trata del ancho en pixels que tendrá el webchat incrustado (si se enlaza no es necesario). Se recomienda asignar el máximo posible para garantizar una buena experiencia a los usuarios del webchat.
+
*'''Alto:''' Se trata del ancho en pixels que tendrá el webchat incrustado (si se enlaza no es necesario).
+
  
Tras cubrir todos los datos y a medida que se introducen se van generando tanto el código del iframe com el enlace o link que habrá que copiar y pegar donde proceda en función del sistema escogido.
+
[[Archivo:Kiwimenu.JPG|miniaturadeimagen|centro|menu]]
  
== Consideraciones técnicas ==
+
La barra de menú del webchat cuenta con las siguientes opciones:
  
Este formulario ha sido implementado con el fin de facilitar la inclusión de nuestro webchat en las páginas webs de cualquier webmaster independientemente de su nivel técnico, pero no existen limitaciones por nuestra parte a la hora de generar vuestros propios sistemas de acceso en función de vuestras necesidades particulares, para ello os vamos a proporcionar la sintaxis de los parámetros que acepta el KiwiIrc.
+
==== Configuración ====
  
La url para inyectar los datos debe tener el siguiente formato:
+
'''Configuración:''' Está representada por tres ruedas dentadas, pulsando se accede a la configuración del chat, que se quedará guardada en una cookie de nuestro navegador y que en esta versión se aplica “en vivo”
  
  http://kiwi.chathispano.com/?nick=elnick&theme=eltema&chan=#elcanal1
+
Una vez accedemos a la configuración podemos encontrar los siguientes apartados:
  
Si se quiere inyectar un nick registrado, la url acepta el formato nick:contraseña o nick!contraseña pero hay que tener en cuenta que en este caso, dichos datos se mostrarán en la barra de direcciones del navegador del usuario, lo cual es inseguro.
+
'''Theme:''' Define el aspecto visual del webchat, una vez definido será el tema que se aplique cada vez que se abra el navegador hasta que las cookies sean borradas. Existen las siguientes opciones.
''Nota: estamos trabajando en implementar un cifrado sencillo que enmascare estos datos en la url generada, cuando esté disponible lo anunciaremos y actualizaremos este documento.''
+
* :'''Relaxed:''' Es el tema por defecto, tiene columna de nicks, un fondo gris muy claro y tonos de color verde en botones y menús.
 +
* :'''Mini:''' Se trata de un tema compacto mucho más estrecho y sin columna de nicks en canales.
 +
* :'''CLI:''' Es un tema con el fondo negro y las letras de color gris. Es el tema que mejor se visualiza en dispositivos móviles debido a que su tamaño de letra es algo más pequeño.
 +
* :'''Basic:''' Tiene columna de nicks, pero menos colores y un formato de texto más sencillo.
  
KiwiIrc dispone de otros parámetros como el cotejamiento, el servidor o el puerto, pero por diversos motivos técnicos estos están fijados en el archivo de configuración del webchat por lo que no pueden ser modificados.
+
'''Channels:''' Define como se muestran los canales abiertos, en pestañas (por defecto) o en vertical a la izquierda.
  
KiwiIrc tiene licencia [http://www.gnu.org/licenses/agpl.html AGPL] y puede ser modificado y mejorado, el código fuente se encuentra en https://github.com/prawnsalad/KiwiIRC y si te gustaría disponer de un tema personalizado a tus gustos o a la imagen de tu canal o web, te animamos a diseñarlo y si es estable y cumple con la licencia, lo publicaremos en la lista de temas para que pueda ser utilizado por el resto de los webmasters y por vosotros mismos.
+
'''Chat Window:''' Define lo que se muestra en la ventana de chat. Las notificaciones de entrada y salida de otros nicks en el canal, Incluir mensajes de entrada y salida como actividad (el número que aparece en el nombre del canal cuando alguien escribe), Marcas de tiempo (la hora antes de cada evento), Usar timestamps 24-horas, Silenciar notificaciones sonoras y mostrar emoticonos.
 +
 
 +
'''Mensajes en historia de desplazamiento''' o el número de lineas de que se muestran en el canal.
 +
 
 +
'''Privados establecidos simultáneamente''': El nº de privados que se pueden recibir al mismo tiempo. Por seguridad está fijado en 7, los mensajes que superen este número aparecerán en la ventana de estado.
 +
 
 +
'''Cliente irc por defecto:''' Abre los enlaces irc://
 +
 
 +
'''Notificaciones de escritorio:''' Activa las notificaciones cuando se reciben mensajes.
 +
 
 +
[[Archivo:Kiwiconfig.JPG|miniaturadeimagen|centro|config]]
 +
 
 +
=== Logotipo ===
 +
 
 +
'''Logotipo de Chathispano:''' Abre la página principal de ChatHispano en una nueva ventana o pestaña del navegador.
 +
 
 +
=== Selector de colores ===
 +
 
 +
'''Selector de colores''': Despliega el selector de color de escritura, marca el color seleccionado actualmente, para seleccionar un color, hay que hacer click en el mismo y desde ese momento escribiremos en ese color, tanto en las ventanas de privados como en las de canales.
 +
 
 +
[[Archivo:Kiwicolores.JPG|miniaturadeimagen|centro|colores]]
 +
 
 +
=== Buscar usuarios ===
 +
 
 +
'''Buscar Usuarios:''' Busca los usuarios que coincidan con el texto que introduzcamos mostrándolos en la ventana activa, para abrir un mensaje privado a uno de los nicks encontrados, debemos hacer click sobre dicho nick.
 +
 
 +
[[Archivo:Kiwibuscanick.JPG|miniaturadeimagen|centro]]
 +
 
 +
=== Buscar canales ===
 +
 
 +
Buscar Canales: Busca canales que coincida con el texto introducido mostrando los resultados en una ventana dedicada: Muestra el nombre del canal, el número de usuarios que se encuentran dentro y su tema. Para entrar en un canal, solo debemos hacer click en el mismo.
 +
 
 +
[[Archivo:Kiwibuscacanal.JPG|miniaturadeimagen|centro]]
 +
 
 +
=== Cambiar nick ===
 +
 
 +
'''Cambiar nick:''' Abre un formulario en la esquina inferior izquierda que permite cambiar el nick. Si el nick a cambiar está registrado hay que introducirlo con el sisguiente formato nick:contraseña. Por ejemplo, si nuestro nick es pepito y nuestra contraseña 123456789 hay que poner en se formulario pepito:123456789.
 +
 
 +
[[Archivo:Kiwicambianick.JPG|miniaturadeimagen|centro]]
 +
 
 +
=== Ignorar ===
 +
 
 +
'''Ignorar:''' Bloquea los mensajes del usuario de la venta de privado activa. En el caso de no tener ninguna ventana activa pulsar este botón no tendrá ningún efecto.
 +
 
 +
== Columna de nicks ==
 +
 
 +
Desde la columna de nicks podemos administrar tanto el canal en el que nos encontremos si somos moderadores del mismo como diversas opciones sobre los nicks presentes.
 +
 
 +
=== Configuración de canal ===
 +
 
 +
En la parte superior hay dos botones, el de la derecha abre las opciones del canal para moderadores en el que encontramos las siguientes opciones:
 +
* '''Moderated chat:''' Pone en el canal el modo +m lo que impide hablar a todos los usuarios que no tengan op (@) o voz (+).
 +
* '''Invite only:''' Pone el canal con el modo +i impidiendo entrar a los usuarios.
 +
* '''Only opertor can change the topic:''' Bloquea el topic para que solo los ops puedan cambiarlo.
 +
* '''Block messahes fron outside this chanel:''' Impide que se pueda hablar desde fuera del canal.
 +
* '''Password:''' Cierra el canal con una contraseña.
 +
* '''Show banlist:''' Muestra la lista de bans y permite borrarlos pulsando la x que se encuentra a la derecha de cada ban.
 +
 
 +
[[Archivo:Kiwimodera.JPG|miniaturadeimagen|centro]]
 +
 
 +
=== Salir de un canal ===
 +
 
 +
El botón de la izquierda es para abandonar la sala.
 +
 
 +
=== Opciones sobre los nicks de una sala ===
 +
 
 +
Si pulsamos en un nick concreto se despliega un menú contextual con las siguientes opciones:
 +
* '''Mensaje:''' Abre un mensaje privado a ese nick
 +
* '''Información:''' Muestra información de ese nick en la ventana activa.
 +
* '''¡Bofetear!''' Gasta una broma a ese nick.
 +
* '''Ignorar:''' Bloquea ese nick impidiendo leer nada de lo que diga.
 +
* '''Dejar de ignorar:''' Desbloquea ese nick
 +
 
 +
[[Archivo:Kiwimenunick.JPG|miniaturadeimagen|centro]]
 +
 
 +
En el caso de ser moderador del canal aparecen las siguientes opciones adicionales:
 +
* '''Op:''' Da op o @ a ese usuario.
 +
* '''De-op:''' Quita op o @ a un usuario.
 +
* '''Voz:''' Da voz + a un usuario.
 +
* '''De-voz:''' Quita voz + a un usuario.
 +
* '''Expulsar:''' Expulsa a un usuario del canal.
 +
* '''Prohibir:''' Pone un ban en el canal.
 +
 
 +
== Solución de problemas ==
 +
 
 +
=== No se ven las nuevas características ===
 +
 
 +
El lenguaje HTML5 se apoya en los archivos temporales del navegador por lo que es necesario en estos casos borrar dichos archivos, las instrucciones para hacerlo están en los sitios de los respectivos navegadores.
 +
Para limpiar el caché disponéis de información en las webs de ayuda de los respectivos navegadores.
 +
 
 +
* [https://support.google.com/chrome/answer/95582?hl=es Chrome]
 +
* [https://support.mozilla.org/es/kb/limpia-la-cache-y-elimina-los-archivos-temporales- Firefox]
 +
* [http://support.microsoft.com/kb/936213/es Microsoft Internet Explorer]
 +
* [http://help.opera.com/Windows/12.00/es-ES/cache.html Opera]
 +
 
 +
=== Se ven desencajados parte de los componentes del chat ===
 +
 
 +
El chat utiliza cookies para guardar las preferencias del aspecto visual. En ocasiones al actualizar cambian dichos temas por lo que es necesario generar una nueva cookie, esto se consigue aplicando un nuevo tema en la sección de configuración del webchat.

Revisión del 11:57 13 abr 2014

El nuevo webchat HTML5 de Chat hispano está basado en Kiwiirc y hemos tenido especial cuidado en hacerlo compatible con prácticamente cualquier dispositivo del mercado, desde los clásicos ordenadores, pasando por móviles hasta Videoconsolas o SmartTvs.

Esta aplicación es extremadamente flexible y al estar basada en código abierto puede ser modificada y personalizada sin problemas por parte de cualquier usuario que quiera incluirla en su WEB

Conexión

La ventana de conexión del chat es funcional y con un diseño claro. Podemos encontrar las siguientes opciones:

  • Nick: Aquí se introduce el nick o alias con el que queramos conectar, en caso que el alias escogido se encuentre ocupado, el sistema nos pondrá uno aleatorio
  • Tengo contraseña: Si nuestro nick está registrado debemos marcar esta opción y se desplegará un formulario donde introducir nuestra contraseña.
  • Contraseña: Este formulario solo aparece si marcamos la casilla anterior y es donde se introduce la contraseña de nuestro nick registrado.
  • Canal: Aquí hay que poner el canal al que queramos entrar en primer lugar, eso no impide entrar en canales adicionales una vez hayamos establecido la conexión.
  • Comenzar: Al pulsar este botón se establecerá la conexión y entraremos al canal seleccionado. En unas pocas ocasiones no se establece la conexión, si sucede se soluciona recargando la página.
Login del kiwi

Interfaz

Kiwiirc se maneja desde se menú superior, aunque es compatible con todos los comandos típicos de cualquier red de chat basada en IRC. Así mismo tiene una estructura similar a la de cualquier aplicación de chat, Una gran superficie donde se muestra el contenido de la ventana activa, ya sea un canal o un mensaje privado, una columna a la derecha en la que aparecen todos los nicks presentes en un canal (en dispositivos móviles esta columna solo aparece en posición apaisada) y el espacio de escritura en la parte inferior. En la parte superior se encuentra el menú y la lista de canales o salas abiertas que puede ser situada a la izquierda desde la configuración.

Barra de menús

menu

La barra de menú del webchat cuenta con las siguientes opciones:

Configuración

Configuración: Está representada por tres ruedas dentadas, pulsando se accede a la configuración del chat, que se quedará guardada en una cookie de nuestro navegador y que en esta versión se aplica “en vivo”

Una vez accedemos a la configuración podemos encontrar los siguientes apartados:

Theme: Define el aspecto visual del webchat, una vez definido será el tema que se aplique cada vez que se abra el navegador hasta que las cookies sean borradas. Existen las siguientes opciones.

  •  :Relaxed: Es el tema por defecto, tiene columna de nicks, un fondo gris muy claro y tonos de color verde en botones y menús.
  •  :Mini: Se trata de un tema compacto mucho más estrecho y sin columna de nicks en canales.
  •  :CLI: Es un tema con el fondo negro y las letras de color gris. Es el tema que mejor se visualiza en dispositivos móviles debido a que su tamaño de letra es algo más pequeño.
  •  :Basic: Tiene columna de nicks, pero menos colores y un formato de texto más sencillo.

Channels: Define como se muestran los canales abiertos, en pestañas (por defecto) o en vertical a la izquierda.

Chat Window: Define lo que se muestra en la ventana de chat. Las notificaciones de entrada y salida de otros nicks en el canal, Incluir mensajes de entrada y salida como actividad (el número que aparece en el nombre del canal cuando alguien escribe), Marcas de tiempo (la hora antes de cada evento), Usar timestamps 24-horas, Silenciar notificaciones sonoras y mostrar emoticonos.

Mensajes en historia de desplazamiento o el número de lineas de que se muestran en el canal.

Privados establecidos simultáneamente: El nº de privados que se pueden recibir al mismo tiempo. Por seguridad está fijado en 7, los mensajes que superen este número aparecerán en la ventana de estado.

Cliente irc por defecto: Abre los enlaces irc://

Notificaciones de escritorio: Activa las notificaciones cuando se reciben mensajes.

config

Logotipo

Logotipo de Chathispano: Abre la página principal de ChatHispano en una nueva ventana o pestaña del navegador.

Selector de colores

Selector de colores: Despliega el selector de color de escritura, marca el color seleccionado actualmente, para seleccionar un color, hay que hacer click en el mismo y desde ese momento escribiremos en ese color, tanto en las ventanas de privados como en las de canales.

colores

Buscar usuarios

Buscar Usuarios: Busca los usuarios que coincidan con el texto que introduzcamos mostrándolos en la ventana activa, para abrir un mensaje privado a uno de los nicks encontrados, debemos hacer click sobre dicho nick.

Kiwibuscanick.JPG

Buscar canales

Buscar Canales: Busca canales que coincida con el texto introducido mostrando los resultados en una ventana dedicada: Muestra el nombre del canal, el número de usuarios que se encuentran dentro y su tema. Para entrar en un canal, solo debemos hacer click en el mismo.

Kiwibuscacanal.JPG

Cambiar nick

Cambiar nick: Abre un formulario en la esquina inferior izquierda que permite cambiar el nick. Si el nick a cambiar está registrado hay que introducirlo con el sisguiente formato nick:contraseña. Por ejemplo, si nuestro nick es pepito y nuestra contraseña 123456789 hay que poner en se formulario pepito:123456789.

Kiwicambianick.JPG

Ignorar

Ignorar: Bloquea los mensajes del usuario de la venta de privado activa. En el caso de no tener ninguna ventana activa pulsar este botón no tendrá ningún efecto.

Columna de nicks

Desde la columna de nicks podemos administrar tanto el canal en el que nos encontremos si somos moderadores del mismo como diversas opciones sobre los nicks presentes.

Configuración de canal

En la parte superior hay dos botones, el de la derecha abre las opciones del canal para moderadores en el que encontramos las siguientes opciones:

  • Moderated chat: Pone en el canal el modo +m lo que impide hablar a todos los usuarios que no tengan op (@) o voz (+).
  • Invite only: Pone el canal con el modo +i impidiendo entrar a los usuarios.
  • Only opertor can change the topic: Bloquea el topic para que solo los ops puedan cambiarlo.
  • Block messahes fron outside this chanel: Impide que se pueda hablar desde fuera del canal.
  • Password: Cierra el canal con una contraseña.
  • Show banlist: Muestra la lista de bans y permite borrarlos pulsando la x que se encuentra a la derecha de cada ban.
Kiwimodera.JPG

Salir de un canal

El botón de la izquierda es para abandonar la sala.

Opciones sobre los nicks de una sala

Si pulsamos en un nick concreto se despliega un menú contextual con las siguientes opciones:

  • Mensaje: Abre un mensaje privado a ese nick
  • Información: Muestra información de ese nick en la ventana activa.
  • ¡Bofetear! Gasta una broma a ese nick.
  • Ignorar: Bloquea ese nick impidiendo leer nada de lo que diga.
  • Dejar de ignorar: Desbloquea ese nick
Kiwimenunick.JPG

En el caso de ser moderador del canal aparecen las siguientes opciones adicionales:

  • Op: Da op o @ a ese usuario.
  • De-op: Quita op o @ a un usuario.
  • Voz: Da voz + a un usuario.
  • De-voz: Quita voz + a un usuario.
  • Expulsar: Expulsa a un usuario del canal.
  • Prohibir: Pone un ban en el canal.

Solución de problemas

No se ven las nuevas características

El lenguaje HTML5 se apoya en los archivos temporales del navegador por lo que es necesario en estos casos borrar dichos archivos, las instrucciones para hacerlo están en los sitios de los respectivos navegadores. Para limpiar el caché disponéis de información en las webs de ayuda de los respectivos navegadores.

Se ven desencajados parte de los componentes del chat

El chat utiliza cookies para guardar las preferencias del aspecto visual. En ocasiones al actualizar cambian dichos temas por lo que es necesario generar una nueva cookie, esto se consigue aplicando un nuevo tema en la sección de configuración del webchat.