Explicación botones pantalla mensaje

[haujavi]

A continuación os voy a explicar los "bbcodes", es decir, los botones que aparecen encima del cuadro de texto de un mensaje nuevo o de una respuesta a un mensaje. Si se situa el puntero del ratón encima de cada opción aparecerá un texto explicativo de cada uno justo por debajo pero mejor explicarlo un poco más poniendo un ejemplo, primero de cómo se ve a la hora de escribir el mensaje y luego con el ejemplo de cómo quedaría una vez enviado el mensaje. Con estos códigos se pueden conseguir formatos diversos que pueden servir para ver un texto de forma más agradable o más ordenada. Se pueden combinar y poner uno dentro de otro.Por otra parte justo debajo del cuadro del texto del mensaje hay dos opciones más que automatizan ciertos procesos habituales como añadir imágenes o añadir texto de galería.

Primero os pongo una imagen de la pantalla de mensaje y los números de referencia de cada uno de los botones para que sepáis a qué se refiere cada uno. Si necesitais más ayuda pedidla y se os dará.

1. Negrita: Sirve para poner en negrita un texto. Se puede seleccionar el texto y luego pulsar este botón o bien pulsar el botón y luego escribir el texto entre los códigos que aparecen.

   • Código: Seleccionar todo

     [b]Ejemplo negrita[/b]

   • Ejemplo negrita
2. Cursiva: Sirve para poner en cursiva un texto. Se puede seleccionar el texto y luego pulsar este botón o bien pulsar el botón y luego escribir el texto entre los códigos que aparecen.

   • Código: Seleccionar todo

     [i]Ejemplo cursiva[/i]

   • Ejemplo cursiva
3. Subrayado: Sirve para poner subrayado un texto. Se puede seleccionar el texto y luego pulsar este botón o bien pulsar el botón y luego escribir el texto entre los códigos que aparecen.

   • Código: Seleccionar todo

     [u]Ejemplo subrayado[/u]

   • Ejemplo subrayado
4. Cita: Se puede usar para citar un texto que no ha sido escrito por uno mismo.

   • Código: Seleccionar todo

     [quote]Ejemplo texto citado[/quote] [quote="Persona citada"]Ejemplo texto citado con nombre[/quote]

   • Ejemplo texto citado

     Ejemplo texto citado con nombre

5. Código: Esta opción sirve para mostrar de forma literal cualquier texto sin tener en cuenta los códigos que se usan. Es lo que estoy usando yo a la hora de mostraros los ejemplos.

   • Código: Seleccionar todo

     [Code][b]Ejemplos de códigos de negrita[/b], [i]cursiva[/i] y [u]subrayado[/u]

     [/code]

   • Código: Seleccionar todo

     [b]Ejemplos de códigos de negrita[/b], [i]cursiva[/i] y [u]subrayado[/u]

6. Lista: Cuando se quieren mostrar datos en un formato de lista lo primero será poner este código o el de lista de números o letras. Después para cada uno de los elementos de la lista se tendrá que poner el código de asterisco. Si se ponen varios códigos de lista dentro de otros se pueden obtener sublistas, listas dentro de listas.

   • Código: Seleccionar todo

     [List][*]Un ejemplo de lista[*]Otro ejemplo de lista[*]Ejemplo de lista dentro de lista[List][*]Elemento de sublista 1[*]Elemento de sublista 2[/list][/list]

   • • Un ejemplo de lista
     • Otro ejemplo de lista
     • Ejemplo de lista dentro de lista
       • Elemento de sublista 1
       • Elemento de sublista 2
7. Lista de números o letras: Es similar al código de lista, pero después del signo de "=" se puede poner un número o una letra para que las listas queden ordenadas por números o letras. Después para cada uno de los elementos de la lista se tendrá que poner el código de asterisco. Si se ponen varios códigos de lista dentro de otros se pueden obtener sublistas, listas dentro de listas.

   • Código: Seleccionar todo

     [List=1][*]Un ejemplo de lista numerada[*]Otro ejemplo de lista numerada[*]Ejemplo de lista dentro de lista numerada[List=a][*]Elemento de sublista de letras[*]Elemento de sublista de letras[/list][/list]

   • 1. Un ejemplo de lista numerada
     2. Otro ejemplo de lista numerada
     3. Ejemplo de lista dentro de lista numerada
        1. Elemento de sublista de letras
        2. Elemento de sublista de letras
8. Elemento de la lista: Código que solo sirve dentro de un código de lista, sirve para indicar dónde empieza una de las opciones de la lista.

   • Código: Seleccionar todo

     [List][*]Elemento 1[*]Elemento 2[*]Sublista1[list=1][*]Subelemento 1[*]Subelemento 2[/list][/list]

   • • Elemento 1
     • Elemento 2
     • Sublista1
       1. Subelemento 1
       2. Subelemento 2
9. Imagen: Código para mostrar una imagen en el mensaje. Tienen que ser imágenes de internet, vínculos o links a imágenes que estén en algún servidor o sitio donde subir imágenes como imageshack, photobucket, flickr. Los links a imágenes del facebook no aparecerán. Las extensiones de los archivos tienen que ser de tipo imagen, es decir, "jpg", "bmp", "png", "gif", etc.

   • Código: Seleccionar todo

     [img]http://www.puzzleando.com/styles/subsilver2/imageset/Logoparapagina.gif[/img]

   • 
10. Link: Este código permite especificar un texto como un hipervínculo, un link al texto. Dicho texto tendrá que ser una dirección de internet, una dirección que contenga un contenido de algún tipo, sea un documento, una página web o incluso una imagen si es que no se quiere mostrar. Se puede especificar una "máscara", un texto que mostrar en vez del link propiamente dicho. Para ello hay que especificar después del "url" un signo "=" y el hipervínculo. Después del corchete de cierre se puede poner el texto que se quiere que aparezca resaltado. Si se pulsa se irá al destino en una página o pestaña nueva del navegador, dependiendo de la configuración del navegador. En vez de un texto también se puede poner una imagen con los códigos correspondientes a imagen.

    • Código: Seleccionar todo

      [url]http://www.puzzleando.com[/url] [url=http://www.puzzleando.com]Página principal de Puzzleando[/url][url=http://www.puzzleando.com][img]http://www.puzzleando.com/styles/subsilver2/imageset/Logoparapagina.gif[/img][/url]

    • http://www.puzzleando.com Página principal de Puzzleando
11. Flash: Este código permite introducir contenido flash. Por razones de seguridad está desactivado salvo para el administrador.
12. Tamaño de fuente: Cuando se escribe sin ningún código el tamaño de letra es el normal. Con esta opción se pueden elegir otros tamaños.
    • Diminuta
    • Pequeña
    • Normal
    • Grande
    • Enorme
    También se pueden especificar tamaños de fuente manualmente hasta el tamaño 200, que es el tamaño Enorme.

    • Código: Seleccionar todo

      [size=50]Diminuta[/size][size=85]Pequeña[/size]Normal[size=150]Grande[/size][size=200]Enorme[/size][size=20]Tamaño 20[/size][size=180]Tamaño 180[/size]

    • DiminutaPequeñaNormalGrandeEnormeTamaño 20Tamaño 180
13. Centrar: Puede centrarse un texto con esta opción. Se puede seleccionar el texto y luego pulsar este botón o bien pulsar el botón y luego escribir el texto entre los códigos que aparecen.

    • Código: Seleccionar todo

      [centrar]Ejemplo Texto Centrado[/centrar]

    • Ejemplo Texto Centrado
14. Columna: En combinación con el código de Tabla sirve para establecer una nueva columna en una tabla.
15. Derecha: Puede alinearse un texto a la derecha con esta opción. Se puede seleccionar el texto y luego pulsar este botón o bien pulsar el botón y luego escribir el texto entre los códigos que aparecen.

    • Código: Seleccionar todo

      [Derecha]Ejemplo texto a la derecha[/Derecha]

    • Ejemplo texto a la derecha
16. Fila: En combinación con el código de Tabla sirve para establecer una nueva fila en una tabla.
17. [BOTÓN ELIMINADO]Imagen redimensionada: Al igual que el código de imagen sirve para mostrar imágenes pero en este caso se puede evitar que se salga de las dimensiones de la pantalla. Es útil si se quiere poner una imagen muy grande, por ejemplo de 1600x1200 pixeles cuando el máximo que se especifica en las normas del foro es de 800x600 o como mucho 800 de ancho. En ese caso se elegiría el "img3" y se redimensionará automáticamente aunque sea más grande. Más información en este tema.

    • Código: Seleccionar todo

      [img3]https://public.sn2.livefilestore.com/y1pGsymvYmNPPZ1PYpdV0-qynRKGYpYhGhFvvAYqZWPk1sEEMnu_i_DFpQcWmagoN5ciubqXNUNmkFJOHyPaKaBOQ/DSCF9943.JPG[/img3]

    • 
18. Justificar: Puede alinearse un texto a los dos lados con esta opción. Se puede seleccionar el texto y luego pulsar este botón o bien pulsar el botón y luego escribir el texto entre los códigos que aparecen.

    • Código: Seleccionar todo

      [Justificar]Ejemplo texto justificado, que como solo se nota bien cuando es una fila completa al menos hay que extender un poco más, puesto que solo poner lo de "ejemplo de texto justificado" no iba a valer para que se viera bien.[/Justificar]

    • Ejemplo texto justificado, que como solo se nota bien cuando es una fila completa al menos hay que extender un poco más, puesto que solo poner lo de "ejemplo de texto justificado" no iba a valer para que se viera bien.
19. Spoiler: Spoiler significa "que estropea", "que destripa", en el lenguaje de cine se llaman también se le llama "destripe" a aquello que nos puede estropear una película, como contar el final. Cualquier texto, imágen, código que vaya dentro de este código solo aparecerá si se pincha en la palabra Spoiler. En el foro se puede usar por ejemplo para no mostrar una gran cantidad de imágenes salvo para quien le interese o por ejemplo no mostrar directamente algo que pese a no ser ilegal pueda llegar a sentar mal a alguien desde el punto de vista del que escribe.

    • Código: Seleccionar todo

      [Spoiler]Ejemplo texto que destripa[/Spoiler]

    • Spoiler

      Mostrar

      Ejemplo texto que destripa
20. Tabla: Esta opción sirve para crear una tabla. Se puede especificar el tipo de borde y el ancho del borde de las separaciones entre celdas de la tabla. Es necesario poner los códigos de fila y columna para poder establecer nuevas celdas. Más información en este tema.

    • Código: Seleccionar todo

      [tabla=0;1][fila][col]Columna 1[/col][col]Columna 2[/col][col]Collumna 3[/col][/fila][fila][col]Texto columna 1 fila 2[/col][col]Texto columna 2 fila 2[/col][col]Texto columna 3 fila 2[/col][/fila][/tabla]

    • Columna 1	Columna 2	Collumna 3
      Texto columna 1 fila 2	Texto columna 2 fila 2	Texto columna 3 fila 2

21. Youtube: Se pueden insertar videos de youtube para poder verlos directamente en el foro. Para hacerlo hay que coger correctamente el link de youtube. La verdad es que youtube cambia de vez en cuando de codificación pero la norma es copiar la dirección que empiece por "http://youtube.com", que suele aparecer en la barra del navegador, no el link que suele dar al insertar.

    • Código: Seleccionar todo

      [youtube]http://www.youtube.com/watch?v=7HKoqNJtMTQ[/youtube]
22. Emoticonos: Son los iconos que se pueden insertar en el mensaje. Cada uno generará un código que aparecerá en el texto y que al enviar el mensaje se convertirá en la imagen que se había seleccionado.

    • Código: Seleccionar todo

       :D  8)  :wink: 

    • 
23. Color de fuente: Por defecto el color del texto es negro pero para destacar alguna cosa se puede usar un color diferente de entre los que aparecen.

    • Código: Seleccionar todo

      [color=#FF0000]Ejemplo de color rojo[/color]

    • Ejemplo de color rojo
24. Añadir imágenes: Al pinchar esta opción aparece la web de postimage para subir imágenes y al acabar de subirlas aparecerá el código de inserción en el foro. Más información en este tema.
25. Añadir texto galería: Cuando se pulsa esta opción se inserta la plantilla de texto para los datos de la gaería, esto puede ser útil cuando se hace una respuesta a un puzle ya existente en la galería y se quieren poner los datos propios. Más información en este tema.

[Paguirolo]

Muchas gracias haujavi. A mi me viene bien pero sigo teniendo una duda. COmo haceis para poner sólo parte de una cita????

[haujavi]

Muchas gracias haujavi. A mi me viene bien pero sigo teniendo una duda. COmo haceis para poner sólo parte de una cita????

Eso en el siguiente tutorial Es broma en parte. Tengo intención de hacer esto mismo pero con las acciones de otros sitios. A ver, te explico dos formas de hacerlo, que quizás hay más. Quizás cuando citas lo que haces es darle al botón de citar del mensaje que quieras citar y entonces se te crea un mensaje de respuesta con el código de citar ya metido. Pues bien, la primera forma es borrar la parte del texto citado que quieras. Supongo que esto ya se te habría ocurrido pero si hay más texto que quieras citar parte por parte no sirve. Aquí viene la segunda forma. Tú cuando estás escribiendo un mensaje si vas a la parte de abajo ves los mensajes anteriores más recientes. Si viene ahí puedes seleccionar el texto del mensaje que quieres citar y darle al botón de citar y verás que solo te cita esa parte. Por ejemplo, voy a hacerlo con esta segunda forma con tu mensaje, primero voy a seleccionar la primera frase y darle al botón citar que viene a la derecha.

Código: Seleccionar todo

[quote="Paguirolo"]Muchas gracias haujavi.[/quote]

Muchas gracias haujavi.

Ahora la segunda:

Código: Seleccionar todo

[quote="Paguirolo"]A mi me viene bien pero sigo teniendo una duda.[/quote]

A mi me viene bien pero sigo teniendo una duda.

Y la tercera:

Código: Seleccionar todo

[quote="Paguirolo"]COmo haceis para poner sólo parte de una cita????[/quote]

COmo haceis para poner sólo parte de una cita????

Espero que me haya explicado suficientemente bien, si no pues lo comentas que no hay problema Como digo voy a hacer alguna explicación más del funcionamiento de otros botones para que por ejemplo permeables pueda obtener el link a un mensaje concreto, pero eso es ya parte de las opciones que aparecen en la lectura de temas(perme, para que no te quedes con la intriga el icono que hay en un mensaje arriba a la derecha como si fuera una hoja muy pequeña es el link al tema en concreto ).

[permeables]

Pues hombre...que menos que darte las gracias,no? ya imagino que lo haces encantado,pero tiene su curro,claro.
Ahora empiezo a probar cosas ,negrita,subrayado y tamaño.
Un abrazo y gracias

[Dogo Tom]

A continuación os voy a explicar los "bbcodes", es decir, los botones que aparecen encima del cuadro de texto de un mensaje nuevo o de una respuesta a un mensaje....

Muchas gracias haujavi

Spoiler

Mostrar

Aprovecho para hacer prácticas

• fácil
• claro
• conciso

da	gusto	que
te	den	las
cosas	tan	mascaditas

[Paguirolo]

Muchas gracias Haujavi. Es que me cuesta un poco todo esto....

Tengo intención de hacer esto mismo pero con las acciones de otros sitios

[Paguirolo]

ME HA SALIDO

[haujavi]

De nada, si en verdad seguramente hubiera sido mejor haber hecho esto hace muuuuuucho. Muchas veces el hecho de manejar más o menos los ordenadores y todo lo que rodea a internet(aunque mi sobrino de 9 años ya casi me gana ) hace que se olvide uno de estos detalles y la intención es que la gente a la que le gusten los puzles puedan participar independientemente de su destreza con el ordenador. O sea que nadie se detenga por ello, quién necesite ayuda que la pida, que no hay problema. Y siempre que me acuerdo lo comento, si echáis en falta algo o tenéis dudas me lo comentáis o lo comentáis en el foro, que muchas veces se me adelantan a responder dudas con la gente tan maja que hay.

Por cierto, al hilo de esto a ver si también creo un tema para explicar más o menos lo que es un foro, así la gente que entra de principio se puede hacer una idea. Y de nuevo, cualquier idea que se os ocurra la comentáis, aunque tarde acabo revisandolas para ver si se pueden poner(no os creais que me olvido de ciertas cosas que tengo en "la agenda" ).

[Casius]

Magnífica guía haujavi . Estoy seguro que a muchos les será muy útil .

[Eldi]

Magnífica guía haujavi . Estoy seguro que a muchos les será muy útil .

Por ejemplo a mí.. Hay un par de cosillas que no tenía tan claras como yo creía jeje

Muchas gracias jefe!

[Nesert]

Buf!! , me vas a hacer estudiar... eeeeeeeeeeeeeeeeeeeeeeeeeee!!
Pero yo como siempre, para última hora, cuando necesite hacer algo... tiro de chuleta!! jajaja!!

AAAAAAAAAAAAA y Gracias por la info!

[Alhana]

Y como se hace para que una imagen sea un link????

[Casius]

Y como se hace para que una imagen sea un link????

En vez de usar:

Código: Seleccionar todo

[img][/img]

Usa:

Código: Seleccionar todo

[url][/url]

[Eldi]

Casius, no habría que utilizar uno dentro de otro? Algo así:

Código: Seleccionar todo

[url][img]DIRECCIÓN DE LA IMAGEN EN CUESTIÓN[/img][/url]

Yo nunca lo he hecho pero si lo fuera a hacer lo haría así..

[haujavi]

Y como se hace para que una imagen sea un link????

Como se suele decir "me alegro de que me hagas esa pregunta" porque la verdad es que no lo he puesto. Todo lo que vaya referenciado entre "url=dirección de la página" y el "/url" queda vinculado a esa dirección, es decir, que se puede pinchar encima e ir a esa página. He añadido el ejemplo en el primer mensaje.

Código: Seleccionar todo

[url]http://www.puzzleando.com[/url] [url=http://www.puzzleando.com]Página principal de Puzzleando[/url][url=http://www.puzzleando.com][img]http://www.puzzleando.com/styles/subsilver2/imageset/Logoparapagina.gif[/img][/url]

http://www.puzzleando.com Página principal de Puzzleando

Como se puede ver la imagen ahora se convierte en una imagen con un link que le quieras poner en la primera parte. La verdad es que por eso decía que se pueden combinar, porque se pueden combinar como se quiera. Igual que dentro de una lista se pueden poner imagenes, dentro de un link se pueden poner imagenes o lo que se quiera, por ejemplo:

Código: Seleccionar todo

[url=http://www.puzzleando.com][color=#BF0000][b][i][u][list][*][centrar]Ejemplo de lio monumental[/centrar][*][derecha]Con Listas y todo[/derecha][/list][/u][/i][/b][tabla=0;1][fila][col]Y mas lio[/col][col]Y masssss[/col][/fila][fila][col]Otra por si era poco[/col][col] :mrgreen:  :mrgreen:  :mrgreen:[/col][/fila][/tabla][/color][img]http://www.puzzleando.com/styles/subsilver2/imageset/Logoparapagina.gif[/img][/url]

• Ejemplo de lio monumental
• Con Listas y todo

Y mas lio	Y masssss
Otra por si era poco

[/color][/url]

Como veis todo al completo está linkado a esa url, a esa dirección, a esa página que es la principal de puzzleando. Pero estas combinaciones son menos usuales y no quiero asustar a nadie jajaja Eso sí, si se os ocurren preguntas de como hacer algo seguid que si puedo las respondo