En vista de que mucha gente tiene bastantes problemas y no se aclara a la hora de intentar insertar imágenes, hipervínculos o vídeos en sus mensajes, voy a intentar explicar aquí qué son los
BBCodes, cuáles son los fundamentales y cómo utilizarlos en nuestros mensajes sin volvernos locos. A ver si consigo que esta ayuda sirva para novatos totales :)
¿Para qué sirven o qué hacen los códigos BBcode que podemos teclear al redactar nuestros mensajes?
Cuando redactamos un mensaje, dentro del texto que escribimos podemos incluir una serie de "códigos" o "
palabras especiales" que el sistema es capaz de interpretar y sustituir por diferentes elementos, tales como imágenes, hipervínculos, objetos flash (Por ejemplo un vídeo que empieza a reproducirse ahí mismo al pulsar sobre él, etc..) o combinaciones de esos códigos como podría ser un hipervínculo que contenga una imágen en vez de un texto.
También hay otros códigos más sencillos que modifican el estilo en el que se mostrará el texto que escribimos, haciendo por ejemplo que aparezca
en negrita,
en cursiva, con un tipo de letra determinado o un color. Estos códigos habitualmente no los tecleamos, los teclean por nosotros los botones que tenemos en la barra de iconos que aparece al redactar un mensaje y automáticamente se nos ocultan para que el mensaje se vea 'bonito'. Gracias a esos botones podríamos continuar perfectamente sin necesidad de conocer la existencia de estos "códigos", salvo que queramos enriquecer los mensaje con imágenes y vínculos más sofisticados, o retocar el tamaño de una imagen sin necesidad de redimensionarla y volver a subirla.
Esta es la barra de iconos que nos aparece al redactar un nuevo mensaje. Salvo el último icono, el resto de botones lo único que hacen es teclear por nosotros esa serie de códigos:
(http://www.furgovw.org/galeria/fotos/marcotrotamu/iconosredactarmensaje0.jpg)
Mientras estemos en el editor de mensajes podemos pulsar el botón (http://www.furgovw.org/Themes/default/images/bbc/toggle.gif) para conmutar entre el modo para ver el mensaje tal y como quedará cuando lo publiquemos, sin mostrar los
bbcodes, o el modo de visualización de códigos, donde podremos ver y editar todos los comandos utilizados.
Todos estos códigos, sencillos o más complicados, reciben la denominación de
BBCODES. Los utiliza este foro basado en el software SMF (Simple Machines Forum) y otros muchos, es una especie de estándar.
Una regla general a la hora de emplearlos es que todos los códigos que tecleemos necesitan tener un principio y un final. Si en un punto de una frase cambiamos por ejemplo el color del texto a verde, en otro punto tendremos que decirle que el cambio de color ha terminado. En este caso y en todos los que modifican el estilo del texto es muy lógico, pero hay que respetarlo en todos los tipos de códigos.
Este sería uno de los ejemplos más simples. Si tecleamos lo que aparece a continuación:
Este texto está en negro, [color=green] pero este fragmento aparecerá en verde [/color] y desde aquí de nuevo en el color anterior.
Al publicar el mensaje o pulsar en previsualizar, obtendremos:
Este texto está en negro, pero este fragmento aparecerá en verde y desde aquí de nuevo en el color anterior. Los códigos más habituales que suelo utilizar son:
URL,
IMAGE,
FLASH,
QUOTE, y para este post he necesitado también el código
CODELos códigos más simples de estilo de texto son
B para Negrita,
I para italica,
S para subrayado,
COLOR para cambiar el color, y
SIZE para cambiar el tamaño del texto.
Nomenclatura de los códigos:
Cuando queremos utilizar un código
BBCode, lo tenemos que teclear siempre
entre corchetes para iniciarlo. También
entre corchetes y precedido del símbolo de la barra de división "/" para terminarlo. Si se nos olvida cerrarlo, por ejemplo comenzando un hipervínculo, veremos que el resto del mensaje nos aparecerá en azul subrayado y cuando pinchemos en cualquier lado nos abrirá ese supuesto hipervínculo. Suele ser frecuente ver que al responder un mensaje de otro usuario con la opción
citar y borrar parte de esa cita, se elimina sin querer el
BBCode que finaliza el código
quote y nos aparece todo el mensaje con el formato de la cita. Otras veces el editor puede parecer volverse loco o comportarse erráticamente, normalmente suele ser fallo nuestro por haber puesto mal algún código. Otras veces al entrar en el revisor de ortografía y previsualizar nos añade códigos para cambiar tamaño de texto o tipo de letra y nos 'descuajeringa' el formato, eso sí es culpa del editor de mensajes y no hay más remedio que arreglarlo a mano. :P
Es recomendable teclearlos en minúsculas, en mayúsculas también los reconoce, sin embargo si hay que agregarles algún parámetro tipo
width, estos parámetros sólo funcionan en
MINÚSCULAS.)
Ejemplos que nos puede interesa utilizar, luego describo de uno en uno lo que hacen:
1 - [url=https://www.furgovw.org/mapa_furgoperfecto/]Acceso a mapa de furgoperfectos[/url]
2 - [img]https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg[/img]
3 - [img width=800]https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg[/img]
4 - [img width=800 height=600]https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg[/img]
5 - [url=http://www.furgovw.org/mapa_furgoperfecto][IMG width=400]https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg[/IMG][/url]
6 - [flash=450,700]https://www.youtube.com/embed/XXXXXXXXX[/flash]
7 - [quote=Texto en el titulo]Esta es el texto que quiero que aparezca[/quote]
Ejemplo 1: Cómo insertar un hipervínculo (url).
Es decir, que al pinchar sobre un texto (aunque también puede ser una imagen u otro tipo de objetos), nos dirija a otra página web (URL). En este caso la dirección url es la del mapa de furgoperfecto del foro y el texto que nos muestra en el hipervínculo es "Mapa de furgoperfectos", luego el comando a teclear en el mensaje es:
[url=https://www.furgovw.org/mapa_furgoperfecto/]Acceso a mapa de furgoperfectos[/url]
Y el resultado: Acceso a mapa de furgoperfectos (https://www.furgovw.org/mapa_furgoperfecto)
Ejemplo 2: Insertar una imágen en cuatro pasos:1 - Redimensionar las fotos para que no ocupen mucho y no colapsen el foro.
2 - Subir las fotos a un servidor con acceso web. Podemos utilizar la propia galería de furgovw
3 - Identificar la URL de cada una de las fotos que queramos utilizar.
4 - insertar el código en el mensaje para cada fotografía.
El primer paso será redimensionar las fotos para que no ocupen mucho. En las normas del foro nos piden que las imágenes no superen los 800x600 puntos, aunque ahora muchas se suben en 1024x768. Más grandes suelen ser molestas para incluirlas en los mensajes y ocupan demasiado. Una foto de 12 megapixels ocupa unos 2500kb, mientras que redimensionada a 800x600 (0,5megapixels) ocupa solo 250kb, la decima parte y es una resolución más que suficiente para mostrarla en pantalla. Existen numerosas utilidades gratuitas para redimensionar fotos, aunque no voy a entrar en ellas. Yo utilizo desde hace más de una década un programa de pago llamado ACDSee, en mi opinión uno de los mejores si no el mejor organizador y visualizador de fotos que existe para Windows, que permite redimensionar todas las fotos de golpe, cambiarles los nombres, visualizarlas en mapa, etc..
El segundo paso consiste en subirlas a un servidor web para que sean accesibles y las pueda ver todo el mundo. Existen muchos servidores de fotos gratuitos, incluidos los de Microsoft y google, aunque yo prefiero utilizar la propia galería de furgovw. Aunque añade marcas de agua a las fotos, tenemos la seguridad de que no desaparecerán por arte de magia con los años como ocurre con muchos de los servidores gratuitos. Más información de como subir fotos a la galería
aquí (https://www.furgovw.org/index.php?topic=23789.0)Tercer paso: Una vez subidas a la galería para obtener su
url lo más sencillo es visualizarlas desde la propia galería de una en una y pulsar el botón derecho del ratón para poder acceder a la ventana de sus propiedades: (
Ojo! No en las miniaturas que nos muestra nada mas terminar de subirlas, hay que hacerlo visualizando la galería o nos quedaríamos con las urls de las miniaturas!)
(https://www.furgovw.org/galeria/fotos/marcotrotamu/galeria10.png)
En la ventana de propiedades de cada fotografía nos mostrará su
dirección url:(https://www.furgovw.org/galeria/fotos/marcotrotamu/galeria20.png)
Seleccionamos la dirección y copiamos en el portapapeles la url que nos muestra: https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg (https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg)
Si hemos subido varias fotos de golpe, lo normal es que el nombre sea casi el mismo y sólo varíe el número que le agrega al final, que suele ir en saltos de 10.
Utilizando el comando
IMG sin parámetros la imagen se mostrará en su tamaño original, podremos centrarla, separarla de otras imágenes con retornos de línea, espacios o tabuladores. Al fin y al cabo una imagen actúa dentro del editor como su fuese una letra pero en grande.
El comando tecleado ha sido:
[img]https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg[/img]
Y el resultado:
(https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg)
Si estamos vagos, para insertar la imagen rápidamente también podemos utilizar el botón (https://www.furgovw.org/Themes/default/images/bbc/img.gif), de la barra de iconos, que nos pedirá la dirección URL y nos ahorrará teclear el código.
Ejemplo 3: Insertar una imagen especificando la anchura o la altura que debe ocupar:Siguiendo el procedimiento del ejemplo anterior para insertar una imagen, si añadimos el texto
width=X detrás del comienzo del código
IMG, conseguiremos que la imagen se muestre ocupando la anchura
X indicada. Se encargará de agrandarla o reducirla según lo necesite manteniendo proporcional la altura
Ejemplos:
[img width=100]https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg[/img]
(https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg)
[img width=200]https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg[/img]
(https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg)
[img width=300]https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg[/img]
(https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg)
De esta misma forma podemos especificar la altura en vez de la anchura sustituyendo
width=x por
height=y, en ese caso el ancho lo hará proporcional de forma automática.
Ejemplo 4: Insertar una imagen especificando la anchura y la altura que debe ocupar:Repitiendo el procedimiento anterior, si completamos el comando IMG con los parámetros width=x height=y conseguiremos que la foto ocupe esas medidas exactas, deformando la imagen si fuese necesario para adaptarse a esa medida.
[img width=200 height=200]https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg[/img]
(https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg)
Así obtenemos la imagen cuadrada :D
Ejemplo 5: Insertar un hipervínculo empleando una imágen:Combinando los comandos que hemos visto en los ejemplos anteriores podemos crear fácilmente hipervínculos que contengan imágenes, algo parecido a un 'botón'.
Vamos a crear un hipervínculo utilizando la imágen del ejemplo anterior que nos abrirá el mapa de furgoperfectos, además lo vamos a mostrar centrado.
Esto es parecido a crear formulas en una hoja de cálculo, allí al final tenemos que dejar todos los paréntesis cerrados, aquí hay que cerrar todos los comandos iniciados:
El código bbcode para centrar es
center:
[center][url=https://www.furgovw.org/mapa_furgoperfecto][img width=150 height=150]https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg[/img][/url][/center]
(https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg) (https://www.furgovw.org/mapa_furgoperfecto)
Ejemplo 6: Insertar un vídeo de YouTube especificando la anchura y la altura que debe ocupar: Realmente este comando no sirve sólo para 'incrustar' cualquier vídeo de
youtube, sino cualquier vídeo en formato
flash. YouTube genera una copia automática de los videos subidos en formato flash, pero no es el único servidor que los genera,
vimeo y muchos otros también lo hacen en ese formato.
Lo primero que vamos a necesitar es saber el
código que ha asignado
YouTube al vídeo que queremos incrustar, y su
url.
En el caso de YouTube lo podemos obtener pinchando en
Compartir e
Insertar en la misma página de
YouTube donde se reproduce el vídeo o en la dirección web que muestre el navegador:
(https://www.furgovw.org/galeria/fotos/marcotrotamu/youtube0.jpg)
Este vídeo podemos ver que tiene el código
J5H4m8B4bLY en la ruta
http://www.youtube.com/embed (http://www.youtube.com/embed). Sin embargo, la ruta que tendremos que insertar al teclear el comando tendrá que ser
www.youtube.com/v (http://www.youtube.com/v). Esto es así al menos de momento aunque puede que algún día cambie.
Insertando en nuestro mensaje el código:
[flash=560,315]https://www.youtube.com/v/J5H4m8B4bLY[/flash]
Obtendremos una incrustación del vídeo en el tamaño 560x315 :
https://www.youtube.com/v/J5H4m8B4bLY
Existe otro comando BBCODE llamado
[youtube][/b], muy cómodo, pero todavía no está instalado en este foro el complemento necesario para que funcione. :(
Ejemplo 7: Insertar una citaTodos conocemos que al responder a un mensaje utilizando el botón
citar, nos aparece una copia de ese mensaje en un formato diferente, con el fondo en otro color y unas líneas divisorias, después continuamos tecleando nuestra respuesta. Eso se consigue mediante el código
quote. Se puede utilizar sin parámetros o agregándole el símbolo = y un texto, este se convertirá en el título de la cita.
Ejemplo:
Cita de: Título de mi cita
Este texto debe aparecer con el fondo diferente entre las líneas separadoras.
Esto lo hemos conseguido tecleando el código:
[quote=Título de mi cita]Este texto debe aparecer con el fondo diferente entre las líneas separadoras.[/quote]
Este código se utiliza bastante cuando se quiere responder en un mismo mensaje a múltiples citas, normalmente copiando y pegando, no es malo saber cómo funciona. Aparte de este uso, en la práctica yo sólo lo he utilizado para agregar una coletilla de furgovw al comienzo de unos furgoperfectos que publiqué, para que quedase en un formato diferente al texto del furgoperfecto: Ejemplo (http://www.furgovw.org/index.php?topic=274134)
Por supuesto todos estos comandos no sólo se pueden utilizar en los mensajes. Si se teclean
en cualquier texto que después se vaya a mostrar en pantalla,
como las firmas, también serán interpretados y nos mostrarán esas imágenes, vídeos, urls, etc..
Existen multitud de comandos más. Podéis consultar más referencias sobre otros muchos
bbcodes en:
http://www.bbcode.org/reference.php (http://www.bbcode.org/reference.php)
http://www.moreonfew.com/what-is-a-bulletin-board-code-or-bbcode/ (http://www.moreonfew.com/what-is-a-bulletin-board-code-or-bbcode/)
http://en.wikipedia.org/wiki/BBCode (http://en.wikipedia.org/wiki/BBCode)
http://docs.simplemachines.org/?topic=57.0 (http://docs.simplemachines.org/?topic=57.0)
https://www.phpbb.com/community/faq.php?mode=bbcode (https://www.phpbb.com/community/faq.php?mode=bbcode)
Espero que no os haya parecido muy complicado y os sirva de ayuda.
Estaría bien si alguien se anima y completa este tutorial con otro sobre cómo crear vínculos a coordenadas gps con el nuevo Google Maps, a Street view y cómo convertir el formato de coordenados, etc.. Hay bastante gente que se pierde un poco.
Un saludo!
Estupendo, te lo agradezco muchísimo porque lo necesito (no se hacer muchas cosas de estas) ;)
Un saludo!
Eres grande Marcotrotamundos... .ereselmejor .ereselmejor .ereselmejor
Muchas gracias. Me estaba volviendo loco intentando meter las fotos tras colgarlas en la galería y esto me ha venido al pelo.
Muchas gracias por invertir tu tiempo en explicarnos a todos como hacer MUY BIEN las cosas. Así no tendremos que ir abriendo hilos con preguntas que ya están contestadas.
Gracias de nuevo.
Un saludo.
Hola forote.
Si te fijas, al abrir la url que te propone youTube con tu vídeo: https://www.youtube.com/embed/g26GfR_2f18 (https://www.youtube.com/embed/g26GfR_2f18), ahora la página está en lenguaje HTML5, por eso no funciona el comando flash, que lo que espera es recibir un vídeo en formato flash desde esa dirección. Desconozco cuando han hecho el cambio en YouTube para los nuevos vídeos que se suben, porque los antiguos siguen en formato flash.
En este foro y por motivos de seguridad, los moderadores tienen desactivado que los usuarios puedan insertar código HTML, así que no se que solución le podrán dar. De momento creo que vas a tener que poner un vínculo a la url.
Un saludo.
Muy bueno. a ver si dura, porque flash tiene los días contados.
A día de hoy, el código y ruta para incrustar vídeos de YouTube y que funciona es:
[flash=ancho,alto]http://www.youtube.com/v/CÓDIGO DEL VIDEO[/flash]
[flash=800,600]http://www.youtube.com/v/6pVmolHxhYo[/flash]
Un saludo.
Buena explicación.
Gracias
Muy buen tutorial, me apunto para no perderlo que el otro día estaba practicando con los anchos de las fotos, lo cerré y no fui para encontrarlo
Aunque no sea de este hilo, ¿hay alguna manera de pinchar un hilo para tenerlo localizado sin necesidad de escribir en el?
Parece que finalmente YouTube ha dejado de dar soporte a la reproducción de videos en formato flash, por eso se han dejado de ver los vídeos insertados en mensajes con el BBCODE de flash. No sé si en un futuro será posible volver a inscrutar vídeos en el foro, porque tendrá que ser en HTML5 y eso entraña muchos riesgos.
Lo digo para que no os volváis locos intentando incrustar vídeos, ya que no os funcíonará :)
Efectivamente! No es que hayan desactivado flash, es que ahora hay que poner los enlaces exclusivamente con https en vez de http. Si se modifican los antiguos enlaces que no funcionan se soluciona. Antes ni siquiera era necesario incluir el http://
Por favor podéis explicar que código añado para eliminar el SUBRAYADO a un enlace tipo:
[url=https://www.mipaginaweb.com/][color=#000033]texto a incluir [/color][/url]
He conseguido cambiar el color pero el enlace aparece con subrayado cuando lo necesito sin subrayado. Desde las opciones no abre muchas opciones. Lo he intentado añadiendo { text-decoration: none; } pero no funciona
Me podéis explicar como se hace manual.
Muchas gracias
No se puede quitar en un hipervinculo.
El comando es "u", entre corchetes para comenzarlo y /u con sus corchetes para terminarlo. U=underline, pero sólo en texto nomral. Los hipervínculos por sistema son subrayados.
:) no tiene nada que ver con css. Los BBCodes son muy simples. Aunque después del comando de comienzo de url añadas uno de final de negrita no hace caso.
Manda webs!! Y yo tantas veces pensando cómo demonios se haría lo de que un texto te envié a un enlace (hipervínculo) y resulta que estaba explicadito aquí!!
Lo que no me queda claro es si hay tecla para hacerlo, como lo de negrita, subrayar...
Aquí mi primera prueba ☺️
acceso directo (https://www.furgovw.org/foro/index.php?topic=278338.0)
Por cierto..¿Es posible subir un vídeo de móvil?, no de YouTube, sino uno propio, como con las fotos.
Gracias por el curro!