Ayuda BBcode para gadget Google.sites
BBcode es un conjunto de instrucciones, llamadas etiquetas, que se introducen en el texto, con el fin de dar formato al mismo, enlazar con otras páginas, cambiar la apariencia, añadir emoticonos y otras muchas utilidades. Se caracteriza, porque dichas etiquetas son introducidas entre corchetes ([ y ]) y no entre signos mayor y menor como ocurre en HTML. El lenguaje BBcode se originó con el fin de que los usuarios de los foros pudieran introducir formato a sus textos de una forma sencilla y más clara que con html. Además, su implantación mediante php garantiza que no quedan etiquetas abiertas, quedando así a salvo la estructura de la página (tablas, zonas, etc) Para este Gadget se ha adoptado bbcode, por ser una forma sencilla de editar texto, no siendo necesario recurrir a etiquetas html. Además de contar de un editor para facilitar la tarea. No obstante, por motivos de rapidez y al ser por el momento de uso único para el administrador de la web, no se ha implementado mecanismo que compruebe el cierre de etiquetas, por lo que es necesario que este acción sea realizada al editar el texto por el redactor,
Sobre las etiquetas
La mayoría de las etiquetas tienen el fin de dar formato o aplicarse a un texto delimitado, por tanto hay que introducir una etiqueta de inicio y otra para fin.
La etiqueta de fin es igual que la etiqueta de inicio con la salvedad de que se le antepone la barra "/", ejemplo:
[b] : A partir de aquí se modifica el texto
[/b] : Una vez llegado aquí se termina la modificación del texto
Si deseamos aplicar el formato a todo el texto introducido, colocaremos la etiqueta de inicio al principio del texto y la de fin en último lugar.
Modificar el formato
Etiquetas para negrita, cursiva y subrayado
Texto en Negrita
Para delimitar texto en negrita utilizamos la etiqueta [b].
Introdución
¿ Qué es BBcode?
Texto Subrayado
Para delimitar texto subrayado utilizamos la etiqueta [u].
Texto en Cursiva
Para delimitar texto en cursiva utilizamos la etiqueta [i].
Combinar formatos
Otro detalle, es que las etiquetas se pueden anidar unas en otras, de esta forma podemos tener por ejemplo texto en negrita y además subrayado.
Etiquetas para la fuente (nombre, color y tamaño)
Fuente de texto
Se puede modificar la fuente de texto con la etiqueta [font=Nombrefuente], donde Nombrefuente es el nombre de la fuente utilizada.
Color de texto
Para modificar el color del texto usamos la etiqueta [color=COLOR], donde COLOR es el color introducido.
Podemos introducir el color usando el nombre del color en html (red,blue,yellow...) o bien, utilizar el valor hexadecimal representativo del color. Existen multitud de páginas web en las que puedes obtener los valores hexadecimales de cualquier color, por ejemplo http://html-color-codes.info/codigos-de-colores-hexadecimales/.
Tamaño del texto
Se puede modificar el tamaño del texto con la etiqueta [size=Tamaño], donde Tamaño es el tamaño a usar.
Etiquetas para crear Subindices y Superindices
Subíndice
Se puede crear un Subindice con la etiqueta [sub]
Superíndice
Se puede crear un Superíndice con la etiqueta [sup]
Creando Bloques de texto (Citar y Codigo)
Citar texto
Sin nombrar al emisor
Se puede delimitar una porcion de texto, con la etiqueta [quote].
Dicho texto, normalmente es una cita a otro mensaje obtenido de otra fuente.
Nombrando al emisor
Para nombrar al emisor de un texto, delimitamos con la etiqueta [quote=Emisor]. Donde Emisor es el nombre de la entidad originaria del texto.
Mostrar Código
Para mostrar códigos, se puede delimitar una porcion de texto, con la etiqueta [code].
Dicho texto, normalmente es un fragmento de código de algún lenguaje de programación.
En dicho fragmento no se interpreta ni las etiquetas bbcode ni las html.
Alineación del texto
Podemos alinear el texto, bien a derecha, a izquierda, centrado o justificado, para ello empleamos las etiquetas [right], [left], [center] o [justify], respectivamente. Ahora se muestran unos ejemplos:
Creando Listas
Podemos crear listas con la etiqueta [list]. Para ello situamos al inicio de la lista una etiqueta [list] y al final de la lista el correspondiente [/list]. Cada componente de la lista debe ser precedido por [*].
Tenemos dos formas de crear listas, o bien ordenada o bien sin ordenar. En la ordenada cada componente va precedido de una letra o un número que aumenta. En la desordenanda, cada componente va precedido de un punto o símbolo.
Lista Sin Ordenar.
La lista sin ordenar se crea mediante la etiqueta [list]. Opcionalmente, podemos seleccionar la viñeta que precederá a los componentes de la lista, para ello podemos optar entre [list=c] dibuja un circulo, [list=d] dibuja un disco o [list=s] cuadrado.
Lista Ordenada.
La lista ordenada se crea indicando el tipo de orden que llevará la lista, podemos optar entre los siguiente métodos: [list=1] para orden numerico, [list=a] alfabeto minúscula, [list=A] alfabeto mayúscula, [list=i] número romanos minúscula o [list=I] números romanos mayúscula..
Creando Enlaces
Los enlaces se crean mediante la etiqueta [url], El enlace introducido, se abrirá en la misma ventana del explorador si pertenecen al mismo dominio o en una ventana aparte si pertenece a otro dominio. No obstante, se puede forzar la apertura del enlace en la misma ventana con el sufijo -in o en ventana externa con el sufijo -out.
Existen las siguientes posibilidades para incluir enlaces:
Sólo indicando el enlace.
Si solo queremos indicar el enlace utilizaremos la etiqueta [url] enlace [/url]
Indicando el enlace y un texto descriptivo:
Si queremos indicar el texto a mostrar en lugar del enlace usaremos la etiqueta de la siguiente forma [url=enlace]texto[/url]
Usando los sufijos -in o -out para abrir en la misma ventana o en una nueva:
Añadiendo imágenes
Para añadir imágenes utilizamos la etiqueta [img] opcionalmente, podemos usar [img=left], [img=right], [img=center] [img=middle] [img=top] [img=bottom] para indicar la alineación de las imágenes con respecto al texto que la rodean.
También se pueden indicar las dimensiones de la imagen con sentencias como [img=w120,h50] donde el numero al lado de la letra w indica la anchura y el que se encuentra al lado de la letra h indica la altura. Estos valores se pueden concadenar con los descritos anteriormente quedando como ejemplo [img=middle,w50,h40]
Emoticonos
bbcode para gadget dispone de los siguientes emoticonos:
[:)]
[:(]
[:x]
[bien]
[mal]
[si]
[no]
[aplausos]
[mejorable]
[a ver]
[pensando]
[flipe]
[sin palabras]
[:o]
[;)]
[:P]
Salto de Linea
Para saltar de linea utilizaremos la etiqueta [br], esta etiqueta no necesita etiqueta de cierre. Podemos emplear también [p] para saltar línea, pero de esta forma comenzaremos un bloque nuevo, si existen imágenes envueltas por texto se continúa después de las mismas.
Facilitar Copiar Texto
Cuadro de texto para copiar
Podemos colocar un cuadro de texto que muestra texto para copiar, con la etiqueta [copy]. Al hacer click el usuario en el cuadro de texto se selecciona automáticamente el mismo, por lo que solo debe hacer click derecho y seleccionar copiar.
Copiar al Portapapeles
Podemos colocar un botón para copiar el texto entre las etiquetas [clipboard]. En algunos navegadores, como Firefox, por motivos de seguridad, puede ser engorroso pues el usuario debe activar el copiado en el navegador, se recomienda usar mejor [copy]
Otras utilidades
Linea horizontal.
Podemos colocar una linea horizontal para separar contenidos, con la etiqueta [hr]:
Ir a Google o Wikipedia.
Podemos, escribir una frase que al hacer click sea buscada en Google o en Wikipedia, con las etiquetas [google] y [wikipedia] respectivamente.
Designar Bloques (recurso obsoleto)
Puedes designar bloques con [block]. Pensado para colocar imágenes con texto al lateral.
Probar Bbcode
Puedes probar Bbcode con este editor: