Características del foro, BBCode y WYSIWYG

Información acerca del sitio.
Cerrado
Avatar de Usuario
Quim
Administrador
Mensajes: 249
Registrado: hace 1 año
País: España
WhatsApp: +34684217556
Line: QUIMLC
Telegram: QUIMLC
Discord: Quim#3389
Instagram: QUIMLC
Contactar:

Características del foro, BBCode y WYSIWYG

Mensaje por Quim » hace 1 año, editado el 31 Ene 2019 00:50 (36 veces)




BBCode es el código que utiliza el foro de phpbb y la mayoría de foros, que sirve para dar formato a los textos, para poner negrita, cursiva, subrayado, tamaños, colores, imágenes, vídeos y demás.

WYSIWYG es un editor de formato enriquecido, donde el formato de los textos aparece directamente, en lugar de ver el BBCode. Es el editor que aparece arriba en la imagen.

En Safari y Chrome para dispositivos móviles iOS el editor WYSIWYG no puede moverse verticalmente para desplazarse por el mensaje. En Firefox, Opera y Puffin funciona correctamente. Otra alternativa es usar directamente el código BBCode pulsando en el último botón, que sirve para cambiar del WYSIWYG al BBCode, entonces sí es posible desplazarse en Safari y Chrome.

La inserción de línea horizontal la he modificado y ahora aparece el código [.linea][/linea] (en adelante añadiré un punto delante de las letras de los códigos para que no sean reemplazados por el BBCode correspondiente). Este código insertará una imagen más estética que una línea por defecto. También se puede poner el código sin cierre, así [.linea]. Esta línea ocupará el 100% del ancho del foro. Si se prefiere una línea que ocupe el 85% del ancho el código es [.L85]. Para una línea del 50% del ancho el código es [.L50]. Si quiere usar la línea por defecto el código es [.hr]. La línea por defecto también tiene sus variantes [.hr85] y [.hr50]. Hay otra versión de línea que utilizo para los apartados, el código es [.separador]. También uso líneas gradiantes, los códigos son [.LG] y [.LGP2]. En el primero el gradiante es de azul oscuro a rojo claro, mientras que en el segundo es inverso, de rojo claro a azul oscuro. También tienen las variantes [.LGP=%] y [.LGP2=%] donde se puede indicar qué porcentaje del ancho del foro ocupará la línea gradiante, reemplazando el "%" por un número, sin poner el signo de porcentaje.

El código [.spoiler][/spoiler] permite ocultar texto, el cual se vuelve visible al pulsar en "Mostrar". Se puede poner un título al spoiler usando el formato [.spoiler=TÍTULO][/spoiler].

Puede usar el código [.titulo]Título[/titulo] pulsando en el botón "" para automáticamente poner un título centrado en negrita con un tamaño del 150% separado por líneas. El botón "" en rojo añade un título grandiante de rojo claro a azul oscuro.

Los botones "", "", "", "", "" y "" añaden un color gradiante al texto. El primero "g" de azul oscuro a rojo oscuro, el segundo "g2" de rojo claro a azul oscuro, el tercero "g3" de rojo oscuro a azul oscuro, el cuarto "g4" de azul claro a rojo oscuro, el quinto "g5" de azul claro a azul oscuro y el sexto "g6" de azul oscuro a rojo claro. Los iconos de los botones ya contienen colores que orientan sobre el tipo de gradiante. Además, poniendo el cursor del ratón encima del botón aparece una descripción detallada. Si quiere poner un título gradiante subrayado con 120% de tamaño de fuente, en modo subapartado, puede añadir una "U" al final de cualquiera de los 6 códigos gradiantes, por ejemplo así: [.g2u][/g2u]. Comentar que los subrayados no funcionan con los textos gradiantes, para ello hay que usar el código especial [.u2][/u2] que subrayará el texto en un leve gris claro .

Las imágenes se insertarán en formato [.imagen][/imagen], en otros foros se suele usar el formato [.img], pero había incompatibilidades con alguno de los mods del foro, así que lo he modificado. Al presionar el botón aparecerá en formato [.imagen], luego sólo hay que escribir el enlace de la imagen justo después y cerrarlo con [/imagen].

He añadido el código [.image=ANCHOxALTO][/image] que sirve para cuando hay que especificar el ancho y alto de la imagen. Fíjese que este código usa la palabra "image", en lugar de "imagen", pues no se puede usar la misma palabra. Estos códigos tienen una variante que añade un borde negro de 1 píxel a la imagen, sería añadiendo "b" al final de la palabra, es decir, [.imagenb][/imagenb] e [.imageb=ANCHOxALTO][/imageb]. También hay la opción de añadir un borde de 2 píxeles usando "b2". Las imágenes están configuradas para que se redimensionen a un máximo del 100% del ancho de su dispositivo. Cuando se quiere poner 3 imágenes consecutivas en la misma línea ocupando todo el ancho del foro se puede usar el código [.imagen33][/imagen33], lo que significa que cada una ocupará un máximo del 33% del ancho. Si se quiere hacer lo mismo con 2 imágenes el código es [.imagen50][/imagen50]. En estos códigos también pueden añadirse bordes de 1 o 2 píxeles. También está disponible el código [.imagen25][/imagen25] para cuando se quieren poner 4 imágenes de máximo 25% del ancho cada una o bien añadir una del 50% y dos del 25% para que la primera sea el doble de grande que las otras dos. Todos estos códigos tienen sus variantes "b1" y "b2". Comentar que los anchos indicados son solamente un límite, son un máximo, no son un mínimo, si la imagen tiene un ancho inferior a ese límite se mostrará el ancho menor. Otros códigos son [.imagen20], [imagen66] e [.imagen75]. Normalmente lo mejor es usar porcentajes en lugar de dimensiones exactas, para que se visualice correctamente en dispositivos móviles. Puede usar los porcentajes de 20%, 25%, 33%, 50%, 66%, 75% y 100%, con sus variantes de "b1" y "b2", con estos 7 tamaños debería ser suficiente para cualquier tipo de diseño.

Otro código de imagen es [.imagenp=%][/imagenp] que sirve para redimensionar una imagen en relación a su propio tamaño, a diferencia de los códigos imagen50, imagen33 e imagen25 que redimensionan la imagen en relación al ancho del foro según el dispositivo. Tanto el ancho como el alto se redimensionarán a ese porcentaje, el cual hay que ponerlo sin el signo % de porcentaje. Este código tiene sus variantes "b1" y "b2".

Por último, en cuanto a códigos de imagen, el código [.imagenh=ALTURA][/imagenh] sirve para redimensionar una imagen en relación a su altura, en lugar de redimensionarla en relación a su anchura como en los anteriores códigos. Esto sirve para cuando, por cuestiones estéticas, se quiere que dos imágenes de distinta anchura tengan la misma altura. Este código también tiene sus variantes "b1" y "b2".

Hay la posibilidad de subir imágenes a Imgur directamente desde el editor y automáticamente se publican con el BBCode. Es el botón de una "i" con fondo negro, al lado derecho de los botones de emoticonos. Para que las imágenes no se eliminen nunca es mejor usar esta opción que adjuntar imágenes, ya que los adjuntos se borran al alcanzar una antigüedad de 3 meses.

Cuando se pega una imagen copiada desde una página web se pegará sin las dimensiones. Si se quiere redimensionar la imagen habrá que usar el formato [.image=anchoXalto] o el de [imagep=%], pero normalmente no será necesario, pues automáticamente ya se redimensiona la imagen a un máximo del 100% del ancho del dispositivo, en caso de que la imagen original sea más grande.

Cuando se pega un texto copiado desde una página web, al publicarlo se verá sin separación en los párrafos. Para que esto no suceda hay que pegarlo usando el último botón, para visualizar el texto en formato BBcode, y pegar ahí el texto, de ese modo no tendrá formato y los espacios entre párrafos serán correctos. Si se quieren mantener los formatos y usted escribe desde un PC, aparecerán unas líneas horizontales rojas que ayudan a detectar los espacios entre párrafos, pulsando en el botón rojo de la tecla intro añadirá un espacio, cuando no aparezcan más líneas rojas significará que el texto ya está bien separado párrafo por párrafo.

Si utiliza un PC o un teclado inalámbrico, puede poner negrita, cursiva o subrayado a sus textos directamente seleccionándolo y pulsando CTRL+B, CTRL+I o CTRL+U respectivamente.

El foro contiene una extensión que automáticamente convierte los enlaces de sitios multimedia. Se aplica en los contenidos de muchos sitios, tales como YouTube, Dailymotion, Vevo, Vimeo, Twitter, Facebook, Instagram, Flickr, Imgur, Tumblr, Twitch, Spotify y otros. Si quiere que sólo aparezca el enlace, sin el reproductor, utilice las etiquetas [.url] y [/url] antes y después del enlace.

Acerca de las características del foro, comentar que no hay límite de caracteres por mensaje y hay un límite de tiempo de edición y eliminación del mensaje de 1 día (24 horas). Si posteriormente quiere editar o eliminar el mensaje haga la petición en una nueva respuesta en ese mismo tema y yo mismo lo haré.

Cuando un usuario está conectado se mostrará un icono verde al lado del avatar. Cuando esté desconectado se mostrará de color rojo. Hay un tiempo de 30 minutos desde la última actividad para que el usuario aparezca como desconectado.


Sólo yo puedo ver cuándo un usuario ha visitado el foro por última vez, públicamente no se puede ver. También eliminé la lista de usuarios conectados y distintas estadísticas relacionadas con la actividad, todo ello se mantiene oculto para una mayor privacidad.

Las firmas están deshabilitadas para evitar el gasto extra de datos y cargas más lentas.

Si quiere añadir información personal puede añadir su WhatsApp, Facebook, Line, Telegram, Discord, Skype, página web y otras redes sociales en su perfil y la información aparecerá debajo del avatar. Si no quiere que esta información aparezca elimínela de su perfil.

Los avatares pueden tener unas dimensiones máximas de 125 píxeles de ancho y 300 píxeles de alto, con un tamaño máximo de 350 KB. En caso de subir una imagen con unas dimensiones superiores automáticamente se redimensionará a estos límites, no es necesario redimensionar la imagen antes de subirla.

Se pueden hasta 4 archivos adjuntos por mensaje con un límite de 2 MB por archivo. Le recomiendo subir las imágenes mediante el botón de Imgur en lugar de adjuntarlas, para no gastar espacio en el servidor. Cada 3 meses los archivos adjuntos más antiguos serán eliminados.

Este foro tiene un doble sistema de guardado automático. Cuando se cierra de forma inesperada el navegador se puede volver a cargar el texto pulsando en el último botón que aparecerá al final de todos los botones. Este botón desaparecerá automáticamente si se pulsa dentro del editor. Puede pulsar en "Guardar borrador" si usted está escribiendo un nuevo tema o una nueva respuesta y quiere continuar en otro momento.

Hay un sistema de revisión de ediciones anteriores sólo visible para mí, así que en caso de que cometa algún error en la edición del mensaje puede ponerse en contacto conmigo y restauraré la edición anterior que usted me indique.

Es posible mencionar usuarios escribiendo @ seguido del sobrenombre, tipo así @Quim, al usarlo se rodeará el nombre de usuario por la etiqueta [.mention][/mention] y el usuario recibirá una notificación en el foro. Se puede configurar que la notificación sea también por e-mail.

Este foro utiliza los emoticonos de WhatsApp. Los que aparecen al lado del editor son en formato imagen, los que aparecen en el listado completo son en forma de carácter y tienen menos calidad. Próximamente añadiré más emoticonos de WhatsApp en formato imagen.


Hasta aquí las particularidades de este foro. En caso de añadir alguna más la anunciaría en "Novedades".

Cerrado