Tutorial simple para insertar imágenes,vídeos,vínculos,etc en tus mensajes.

Iniciado por MarcoTrotamundos, Noviembre 23, 2013, 19:58:50 pm

Tema anterior - Siguiente tema

0 Usuarios y 1 Visitante están viendo este tema.

MarcoTrotamundos

Noviembre 23, 2013, 19:58:50 pm Ultima modificación: Octubre 26, 2017, 23:15:52 pm por MarcoTrotamundos
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:



Mientras estemos en el editor de mensajes podemos pulsar el botón 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:

Código (Ejemplo:) [Seleccionar]
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 CODE
Los 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:

Código (Insertar Hipervínculo) [Seleccionar]
1 - [url=https://www.furgovw.org/mapa_furgoperfecto/]Acceso a mapa de furgoperfectos[/url]

Código (Insertar imágen) [Seleccionar]
2 - [img]https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg[/img]

Código (Insertar imágen especificando anchura) [Seleccionar]
3 - [img width=800]https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg[/img]

Código (Insertar imágen especificando anchura y altura) [Seleccionar]
4 - [img width=800 height=600]https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg[/img]

Código (Insertar Hipervínculo con imágen en vez de texto) [Seleccionar]
5 - [url=http://www.furgovw.org/mapa_furgoperfecto][IMG width=400]https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg[/IMG][/url]

Código (Insertar vídeo incrustado en formato flash) [Seleccionar]
6 -  [flash=450,700]https://www.youtube.com/embed/XXXXXXXXX[/flash]

Código (Insertar cita) [Seleccionar]
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



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í

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!)



En la ventana de propiedades de cada fotografía nos mostrará su dirección url:



Seleccionamos la dirección y copiamos en el portapapeles la url que nos muestra: 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:



Si estamos vagos, para insertar la imagen rápidamente también podemos utilizar el botón , 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]



[img width=200]https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg[/img]



[img width=300]https://www.furgovw.org/galeria/fotos/marcotrotamu/durmitor90.jpg[/img]



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]



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]



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:



Este vídeo podemos ver que tiene el código J5H4m8B4bLY en la ruta http://www.youtube.com/embed. Sin embargo, la ruta que tendremos que insertar al teclear el comando tendrá que ser 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 cita

Todos 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





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.moreonfew.com/what-is-a-bulletin-board-code-or-bbcode/
http://en.wikipedia.org/wiki/BBCode
http://docs.simplemachines.org/?topic=57.0
https://www.phpbb.com/community/faq.php?mode=bbcode

MarcoTrotamundos

Noviembre 23, 2013, 20:03:34 pm #1 Ultima modificación: Noviembre 24, 2013, 23:28:00 pm por MarcoTrotamundos
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!

+gvr

Estupendo, te lo agradezco muchísimo porque lo necesito (no se hacer muchas cosas de estas)  ;)

Un saludo!
Busco SEPARADOR / REJILLA DE CARGA para WV T4.  http://www.furgovw.org/index.php?topic=250557.0

Busco BARRAS de CARGA para WV T4. http://www.furgovw.org/index.php?topic=295774.0

Isakis


Ares1487

Los amigos son como los radares, aunque no los veas estan ahí.

patxe

Muchas gracias. Me estaba volviendo loco intentando meter las fotos tras colgarlas en la galería y esto me ha venido al pelo.

pauagullo

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.
CAMPAÑA POR UNA MEJOR ORTOGRAFÍA: 
- "Haber" es un verbo, " a ver" es mirar y "haver", NO EXISTE.
- "Hecho" es hacer y "echo" es echar, tirar algo.
- "Hay" es haber, "Ahí" es un lugar, "Ay" es una exclamación. "Ahy" y "ai", NO EXISTEN.
- "Haya"  es haber y también una especie de árbol, "Halla" es encontrar,  "allá" es un lugar y "Haiga", NO EXISTE

forote

Aupi
creo que algo ha cambiado a la hora de colgar videos...
lo he estado haciendo bien hasta ahora y hoy soy incapaz....

el video que quiero poner es este:
https://www.youtube.com/watch?v=g26GfR_2f18&feature=youtu.be
el código seria este:
https://www.youtube.com/embed/g26GfR_2f18
total que por mucho que lo intente me queda mal...
http://www.youtube.com/embed/g26GfR_2f18

Algo estoy haciendo mal fijo....

MarcoTrotamundos

Hola forote.
Si te fijas, al abrir la url que te propone youTube con tu vídeo: 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.


forote

Cita de: MarcoTrotamundos en Marzo 11, 2015, 16:42:07 pm
Hola forote.
Si te fijas, al abrir la url que te propone youTube con tu vídeo: 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.


ya he encontrado la solución¡¡¡
cambiar embed por v

con embed
http://www.youtube.com/embed/g26GfR_2f18

con v
http://www.youtube.com/v/g26GfR_2f18

MarcoTrotamundos

Muy bueno. a ver si dura, porque flash tiene los días contados.

forote

Cita de: MarcoTrotamundos en Marzo 11, 2015, 16:48:26 pm
Muy bueno. a ver si dura, porque flash tiene los días contados.


Eso he leído por ahí... aunque no se, el tiempo lo dira.

Gracias por la ayuda y el supertutorial¡¡¡

Elfossie

La resurrección de los mamuts conducirá, afortunadamente, a la revolución iconoclasta.
Gran porra Denunciados Cabo de Gata 2016 a pesar de las advertencias:
Elfossie +10 y subo otros +10
GLazcano +15