Cómo agregar nuevos botones al ChatBox

por Wigazo Jue 02 Ene 2014, 04:12

Recuerdo del primer mensaje :

Hace mucho tenía que actualizar este post con lo de las categorías y smilies, pero no tenía muchas ganas. Al final decidí hacer esto (aunque tendría que rehacer todo el tutorial xD):

Así pueden crear los botones, categorías y smilies más fácilmente.

Les explico cómo funciona, ya que puede ser un poco confuso, aunque bastante intuitivo creo.

Botones

Éstos, cuando les hacés click, añaden al capo de escritura del ChatBox un texto determinado.

Nombre: Código:

En "Nombre" se ingresa el texto que querés que tenga el botón encima. En "Código" se ingresa el texto que querés que el botón agregue al campo de escritura del ChatBox.

[Tienes que estar registrado y conectado para ver este vínculo]

Al hacerle click, creás el botón con las características escogidas.

[Tienes que estar registrado y conectado para ver este vínculo]

Visible cuando hay botones. En la lista desplegable podés ver todos los botones (nombrados con el nombre elegido). Al seleccionar uno, en los campos "Nombre" y "Código" podrás ver cuáles fueron los escogidos. Si hacés click en "Eliminar" se borrará el botón seleccionado.

Categorías

Son listas desplegables que vendrían a ser como botones agrupados en una categoría. Al seleccionar una opción de éstas, se añade al campo de escritura del ChatBox un texto determinado.

Nombre	Código	Eliminar
		[Tienes que estar registrado y conectado para ver este vínculo]
		[Tienes que estar registrado y conectado para ver este vínculo]

[Tienes que estar registrado y conectado para ver este vínculo]

Con esta tabla podés definir cómo querés que sea tu nueva categoría. Cada fila representa un "botón". En la columna "Nombre" ponés el texto que aparecerá en la opción de la lista desplegable y en "Código" el texto que añadirá al campo de escritura del ChatBox. El botón de la columna "Eliminar" sirve para eliminar una fila (el mínimo de éstas es dos, ya que para 1 están los botones). Se puede agregar una nueva fila a la tabla con "Nueva Fila".

[Tienes que estar registrado y conectado para ver este vínculo]

Al hacerle click, creás la categoría con las características escogidas.

[Tienes que estar registrado y conectado para ver este vínculo]

Visible cuando hay categorías. En la lista desplegable podés ver todas las categorías (nombradas con el nombre elegido de la primera opción de la categoría). Al seleccionar una, en la tabla se cargarán los datos de élla. Si hacés click en "Eliminar" se borrará la categoría seleccionada.

Smilies

Son smilies personalizados. Aparecerán en una nueva categoría de la ventanita de smilies: "Smilies Personales". Se ingresan al ChatBox con los códigos IMG. Ahora también la categoría de "Smilies Personales" está disponible para usar en el foro. Smile

Smilies URL:

En este campo se ingrese el URL de la imagen que querés tener como smile personal.

[Tienes que estar registrado y conectado para ver este vínculo]

Al hacerle click, creás el smile de la imagen elegida.

[Tienes que estar registrado y conectado para ver este vínculo]

Acá se visualizan los smilies creados. Para eliminar uno, se le hace click y listo.

Cuando tengas todos los botones, categorías y smilies deseados, hacé click en . Se descargará el userscript con todo lo elegido.
El archivo se llamará botonesChaBox.user.js, y se instala como cualquier otro. Recuerden que en Chrome hay que ir a chrome://extensions y arrastrar el archivo descargado para instalarlo.

¿Y cómo modifico un userscript?

Cualquier userscript creado con esta aplicación (los que fueron creados con el viejo método solo se pueden modificar tocando el código) es muy fácil de modificar, ya que se cargan todos los datos de él (botones, categorías y smilies) en ella para modificarlo a gusto. Una vez hechos los cambios modificados, descarga el nuevo userscript e instálalo, pero antes borra el viejo.

Post viejo:

Viendo [Tienes que estar registrado y conectado para ver este vínculo], me pareció una lástima que no pudiese ser aplicada, ya que me parece una buena idea. Así que decidí hacer un sencillo "userscript" para poder agregar botones al ChatBox (funciona en todos los de Foroactivo).

¿Qué es un userscript?

Son códigos en JavaScript que sirven para modificar página webs. Originalmente corrían en Greasemonkey, una extensión de Firefox, pero hoy en día se pueden instalar en varios navegadores. Por ejemplo, ahora se puede instalar en Chrome como si fuese una extensión. Es por eso que decidí hacerlo en este formato, para que más usuarios puedan usarlo~~, y además así dekar no diga que Google nos borrará por esto~~.

¿Qué hace exactamente este userscript?

Añade dos botones a cualquier ChatBox de Foroactivo:

Cómo agregar nuevos botones al ChatBox - Página 2 Large

Cómo agregar nuevos botones al ChatBox - Página 2 Large

-> Añade los códigos de spoiler al final del cuadro de texto del ChatBox.

-> Añade los códigos de img al final del cuadro de texto del ChatBox.

Sin embargo, el userscript es fácilmente personalizable para que el usuario haga sus propios botones.

¿Cómo se instala?

El userscript se encuentra en la siguiente dirección:

[Tienes que estar registrado y conectado para ver este vínculo]

La forma de instalar depende del navegador usado.

Firefox

Se requiere la extensión Greasemonkey:

[Tienes que estar registrado y conectado para ver este vínculo]

Una vez instalada, ir a la página del userscript, hacer click sobre el botón "Install" y poner "Instalar" en la ventana emergente.

Chrome

Ir a la página del userscript, hacer click sobre el botón "Install" y clickear el botón "Continuar" en la barra de descargas.

Luego hay que ir a chrome://extensions y arrastrar el archivo .user.js para instalarlo.

También se puede instalar en otros navegadores, pero todavía no lo testeé.

¿Cómo modifico el userscript?

Firefox

Con Greasemonkey es muy fácil.

Lo explico con imágenes:

Spoiler:

Nota: Antes de hacer el paso 5 hay que hacer los cambios necesarios en el código (más adelante explico cómo).

Chrome

En este caso hay que editar el archivo .user.js descargado, usando un programa de edición de texto como el bloc de notas o alguno más sofisticado. Luego de hacerle las modificaciones al código, guardar el archivo. Una vez guardado, arrastrar el archivo .user.js a chrome://extensions para instalarlo.

Todo muy lindo, ¿pero cómo hago mis botones?

Pues, en el código hay una explicación, pero de todos modos lo explico acá.

Los botones se crean en el bloque "tus botones", que por defecto viene así:

Código:: //===BLOQUE TUS BOTONES===// botones.push(new boton("[spoiler][/spoiler]","spoiler")); botones.push(new boton("[img][/img]","img")); //===BLOQUE TUS BOTONES===//

Para crear un botón, hay que insertar una línea de código dentro de ese bloque, de la siguiente forma:

Código:: botones.push(new boton("<codigo>","<texto>"));

Código:: <codigo>

Hay que reemplazarlo por el código que querés que se inserte al clickear el boton. NOTA: No es necesario que sea un codigo, puede ser cualquier texto.

Código:: <texto>

Hay que reemplazarlo por el texto que querés que se vea en el botón.

Ejemplo

Para añadir un botón que inserte códigos quote, el bloque "tus botones" quedaría de la siguiente forma:

Código:: //===BLOQUE TUS BOTONES===// botones.push(new boton("[spoiler][/spoiler]","spoiler")); botones.push(new boton("[img][/img]","img")); botones.push(new boton("[quote][/quote] ","Cita")); //===BLOQUE TUS BOTONES===//

También se pueden borrar los botones que vienen por defecto ("spoiler" e "img"):

Código:: //===BLOQUE TUS BOTONES===// botones.push(new boton("[quote][/quote] ","Cita")); //===BLOQUE TUS BOTONES===//

Como dije, no hace falta que los botones inserten códigos. Podés hacer botones para insertar rápidamente smilies, y también comandos del chat. Por ejemplo, un botón que inserte el smile :chino:y el botón para banear a DG, dejando el bloque "tus botones" de la siguiente forma:

Código:: //===BLOQUE TUS BOTONES===// botones.push(new boton("[quote][/quote] ","Cita")); botones.push(new boton(":chino:","Chino")); botones.push(new boton("/ban Imperatrum DG","Entretenimiento")); //===BLOQUE TUS BOTONES===//

Y lo mejor de todo: escribir fórmulas destructivas con solo un click. :awwyea:
No, en serio, no se toleran las fórmulas destructivas, dentro o fuera del foro (ya que pueden venir usuarios vengativos). Usarlas puede traer el ban permanente del ChatBox. what is this racket

Otro buen uso que pueden darle es poner códigos para insertar imágenes que usaría como smilies que no están en el foro. Wink

Eso fue todo, espero que les sirva. Smile

Si no entienden algo, no duden en preguntar. Very Happy

por Dumdon Jue 02 Ene 2014, 21:40

Wig,acuerdate..."Imaginate la cabeza de una persona,bien,ahora comparala con mi cabeza...Veras que mi cabeza es el tamaño de un cacahuate..." o algo así era (?

Bueh,ya me enseño totoi xD.Puse codigos de smilies (de un dragón) así no tengo que poner siempre img y el link y así (?.Aunque también pondre codigos....Como la letra spore Very Happy

o...que salgan un emoticon de helados :megusta: pero bueno,luego voy probando,aunque hasta ahora estoy llena con el dragón... xD

por Glumyglu Vie 03 Ene 2014, 05:16

Hay que avisar que si pones muchos el chat se te corta (?)

Wig, tranquilo, no eres el único DX Yo tengo:

Chorifug: Manda a Chorifug

Kick: /kick

Ban: /ban

Unban: /unban

Quote

Spoiler

Img

Emergencia: /ban bato1234

por Wigazo Vie 03 Ene 2014, 05:20

Ahora podés poner categorías.

[Tienes que estar registrado y conectado para ver este vínculo]

Luego actualizo el post. Yao Ming

Emergencia.

por Lechuza Vie 03 Ene 2014, 18:34

No me funciona. Me aparece un error que dice: "User script must be UTF8 encoded".
P.D:
YA FUNCIONA: :awwyea:
He puesto el código de USERNAME.
Pero no me deja añadir más. Solo me deja 1, si no me sale el error.

por Dumdon Vie 03 Ene 2014, 19:18

me pasa lo mismo que lechu,solo puse 5 categorías xD a no ser que solo me deje 4.

Pero...Aún no entiendo lo de poner el "//" xD

por Emd4600 [ASR] Vie 03 Ene 2014, 19:31

El // permite hacer comentarios en el texto sin que afecten al código.
Sobre lo de UTF-8, al poner Guardar Como, debajo del nombre sale: CODIFICACIÓN: ANSI. Cámbialo a UTF-8.

por Lechuza Vie 03 Ene 2014, 19:52

A mí me sigue sin funcionar, solo que ahora el error es que ya no aparecen los botones Neutral

por Vinnie Sift [ASR] Sáb 04 Ene 2014, 01:58

Wow, que útil.
5/5

:+10:

por Wigazo Sáb 04 Ene 2014, 04:34

Ya cambié la codificación, el archivo que subí originalmente estaba ANSI, pero a la mayoría no les tiraba error porque solo con algunos caracteres lo hace ("¿","¡","ñ","á", etc.). Gracias por el aviso. Smile

por Lechuza Sáb 04 Ene 2014, 08:29

¿Sería por eso? Es que yo acostumbro a poner tildes.
Veamos si me funciona, gracias por el aviso.

por Totoi Sáb 04 Ene 2014, 10:23

Yo tengo:
img
spoiler
OoY: ¡¿ORIVADI O YUBO?! Responde sin preguntar what is this racket

templo: Lo de digi, que me lo ha plagiado
DIGI: DIGI DIGIWORLD

por Eleanor Drapeaux Sáb 04 Ene 2014, 13:06

estaria guay que en vez de solo texto se pudiera poner imagenes (en los botones y las categorias digo) para verlos mas rapido (como los emoticonos)

por Wigazo Sáb 04 Ene 2014, 18:50

A pedido de Rhine, ahora se pueden poner smilies personales en la [Tienes que estar registrado y conectado para ver este vínculo] de smilies del. Aparecen en una categoría llamada "Smilies Personales". ¡Viene con los smilies de Maya de regalo gratis! Very Happy

xD

Para crear uno:

Código:: smilies.push("<smile>");

Miren que ahora los botones y categorías se crean de otra forma:

Código:: botones.push(["<codigo>","<texto>"]); categorias.push([["<codigo1>","<texto1>"],["<codigo2>","<texto2>"],["<codigo3>","<texto3>"]]);

Y sí, ya sé que debo actualizar el post. Yao Ming

[Tienes que estar registrado y conectado para ver este vínculo]

por Lisander Jue 09 Ene 2014, 11:55

Que útil

Ojalá se pudiera en tableta Okay

por Vinnie Sift [ASR] Jue 09 Ene 2014, 12:00

Vamos a ver...
Yo le puse un boton de exit (/exit SOY HAWLEY GRIFFIN), le agregue el blur en la categoria y puse un par de smyleys (Una bolita verde con ametralladoras, un Bender bailando, mi Userbar e Icon of Sin)
Cuales eran los codigos de los flip?