Embeber webchat HTML

Publicado el 22/04/2016

Introducción

https://chathispano.com/webmaster

ChatHispano dos webchats programados en  HTML5, nuestro webchat principal, con diseño totalmente responsive y que se adapta a la perfección a cualquier tamaño de pantalla y el  KiwiIrc. Estos Chats en español tienen 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 Android o iOS. Nota: Deben ser sistemas actualizados pues es necesaria la compatibilidad plena con HTML5.

Indice

• Integrar el webchat responsive
  • Utilizar el configurador
  • Embeber el chat
  • Opciones
  • Consideraciones técnicas
• Integrar el webchat Kiwiirc
  • Incrustar elm kiwi

Integrar el webchat responsive

Este es el cliente de irc principal de Chat Hispano, es un desarrollo propio que en estos momentos se encuentra en constante evolución, está íntegramente programado en HTML5 y tiene lo que se conoce como diseño "responsive", eso quiere decir que se adapta a cualquier tamaño de pantalla, no solo cambiando su tamaño si no transformando totalmente su diseño y hasta su funcionalidad.

Esto hace que sean perfecto para ser visualizado tanto en una pantalla de un dispositivo móvil como en la de un PC con resolución 4K.

Utilizar el configurador

La forma más sencilla de embeber un chat personalizado en tu web es que uses el configurador automático que generará eñ código para incluir en tu web o bien, si utilizas Wordpress el plugin oficial. Ambos recursos se encuentran en la sección de webmasters,

Embeber el chat

Si deseas configurar manualmente el chat, pese a que no es la opción que recomendamos, puedes hacerlo enlazando dentro de un iframe o similar la siguiente url:

El resto de los datos de definen mediante parametros dentro de la url con la sintaxis /?parámetro1&parámetro2&etc. , El canal definido en la url, será el que se destaque en foco cuando finalice el proceso de conexión. Es recomendable dejar que el chat se abra en una ventana independiente, ya que la propia ampliación se adaptará a los móviles en el caso de que sean estos los dispositivos utilizados para visualizarlos.

Opciones

El webchat cuenta con distintas opciones configurables por medio de la url, para que el webmaster tenga un control adecuado sobre la aplicación para que le sea lo más sencillo posible adaptarlo a las necesidades de sus usuarios. Las opciones se añaden incluyendo una ? después de la url seguido por las opciones separadas por el carácter &.

• chan: Define el canal o sala donde entrará el chat. La sintaxis es chan=canal.
• Autojoin: Esta opción define el funcionamiento de la entrada automática en canales de la red, por defecto entra en un canal provincial y en el canal #irc-hispano, las opciones son "true" como activado (por defecto) y "false" como desactivado.
• autoload: Esta opción define si el chat entra de forma directa con un nick o alias por defecto pudiendo el usuario cambiarlo una vez conectado o se detiene en la ventana de selección de nick antes de conectarse para que el usuario escoja el suyo. Las opciones disponibles son true para entrar de forma directa y false (por defecto) para que el usuario escoja su propio apodo.
• Nick: Define el nick o apodo del usuario que conecta. Se puede poner un alias concreto o  un nick seguido de un patrón, o sea, si se añade nick=nick?, este ? se sustituirá por 5 caracteres aleatorios.
• load: Se utiliza en el caso de que en lugar del webchat cargue la url de la ficha del canal. La sintaxis es load=1 Esta opción solo es necesario en el caso de que se cargue la ficha.
• theme: Permite personalizar el aspecto de la aplicación con el fin de que se adapte a cualquier diseño de web, permitiendo escoger entre distintos temas de colores, incluir su propio logo, el titulo o el favicon. El parárametro con el que activar la personalización es theme=embebed, si no se incluye el webchat se cargará con los valores por defecto
• Style: Define el conjunto de colores entre los disponibles, por ejemplo style=yellow. Los estilos disponibles son:
  • indigo
  • purple
  • teal
  • yellow
  • green
  • orange
  • blue
• Title: Define el titulo que aparecerá en el webchat, por ejemplo Tittle=Webchat de mi web
• Logo: Define el logo y el favicon del webchat, incluyendo una url en los parámetetros, Por ejemplo logo=https://bancodeimagenes.com/logo.jpg AVISO: La imagen debe tener una url bajo https o no funcionará el webchat.

Nota: Las preferencias de los usuarios tendrán siempre prioridad ante las de las urls. Por ejemplo, si un usuario configura que se utilice determinado nick y se acceda a determinado canal, siempre prevalecerá esa configuración sobre la de la url, aunque entrará al canal que le indique la url.

Consideraciones técnicas

Este webchat está programado íntegramente en HTML5, por lo que solo es compatible con los navegadores compatibles con dicho lenguaje. Por ejemplo, el navegador propio de algunos terminales Samsung da problemas con el webchat, aunque esto se soluciona utilizando un navegador compatible como el Chrome.

Integrar el webchat basado en Kiwi irc

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. 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 kiwi

Los párametros que se pueden utilizar en el kiwi soN

• 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.
• 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.

Consideraciones técnicas

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.

La url para inyectar los datos debe tener el siguiente formato:

 https://kiwi.chathispano.com/?nick=elnick&theme=eltema&chan=#elcanal1

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

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.

KiwiIrc tiene licencia 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.

Las normas que gestionan los webchats incrutados en webs de terceros están en https://chathispano.com/normas/normas-para-webmasters-uso-de-webchats-incrustados

Ir atrás