Este componente temático añade una marca de agua a la página.
Es posible añadir cualquiera de la siguiente información:
un mensaje de texto corto
el nombre de usuario actualmente conectado
la marca de tiempo de cuando se renderizó la página
Varios ajustes permiten personalizar cómo y cuándo se mostrará la marca de agua:
show_watermark_in_background: Si está habilitado, generará y mostrará una marca de agua en la página.
scroll_enabled: Si está habilitado, la marca de agua se desplazará con la página.
only_in_categories: Lista de categorías en las que se debe mostrar la marca de agua.
except_in_categories: Lista de categorías en las que no se debe mostrar la marca de agua.
only_in_tags: Lista de etiquetas en las que se debe mostrar la marca de agua.
except_in_tags: Lista de etiquetas en las que no se debe mostrar la marca de agua.
if_site_title_matches: Muestra la marca de agua solo si el título del sitio coincide con esta expresión regular. Véase Discourse Web Page Watermark - #5 by pfaffman para un caso de uso.
or_if_url_matches: O muestra la marca de agua si la URL coincide con alguna de las expresiones regulares de la lista. Tenga en cuenta que la URL probada no incluye el nombre del host.
tile_width: El ancho (en px) de la celda que contiene la información de la marca de agua.
tile_height: La altura (en px) de la celda que contiene la información de la marca de agua.
color: El color del texto de la marca de agua.
text_align: Cómo debe alinearse el texto en relación con las coordenadas x,y al dibujarlo.
text_rotation: El ángulo en el que el texto debe rotarse en relación con las coordenadas x,y al dibujarlo.
display_text: Texto que se mostrará en la marca de agua.
display_text_font: La fuente utilizada para mostrar el texto (analizada como valor de fuente CSS).
display_text_x: La coordenada del eje x del punto en el que se debe empezar a dibujar el texto en el lienzo de la celda, en píxeles.
display_text_y: La coordenada del eje y del punto en el que se debe empezar a dibujar el texto en el lienzo de la celda, en píxeles.
display_username: Si está habilitado, la marca de agua mostrará el nombre de usuario actual.
display_username_font: La fuente utilizada para mostrar el nombre de usuario (analizada como valor de fuente CSS).
display_username_x: La coordenada del eje x del punto en el que se debe empezar a dibujar el nombre de usuario en el lienzo de la celda, en píxeles.
display_username_y: La coordenada del eje y del punto en el que se debe empezar a dibujar el nombre de usuario en el lienzo de la celda, en píxeles.
display_timestamp: Si está habilitado, la marca de agua mostrará la marca de tiempo de cuando se renderizó la página.
display_timestamp_format: Cómo se formateará la marca de tiempo. Para obtener información sobre los formatos válidos, consulte Moment.js | Docs.
display_timestamp_font: La fuente utilizada para mostrar la marca de tiempo (analizada como valor de fuente CSS).
display_timestamp_x: La coordenada del eje x del punto en el que se debe empezar a dibujar la marca de tiempo en el lienzo de la celda, en píxeles.
display_timestamp_y: La coordenada del eje y del punto en el que se debe empezar a dibujar la marca de tiempo en el lienzo de la celda, en píxeles.
Advertencias
Si tiene la intención de añadir una marca de agua a su instancia de foro, probablemente querrá etiquetar las capturas de pantalla tomadas de ella. Ya sea para que puedan rastrearse hasta usted o para disuadir a sus usuarios de tomar capturas de pantalla y publicarlas en las redes sociales, por ejemplo. Pero es importante tener en cuenta que añadir la marca de agua perjudicará la legibilidad. Hay que hacer un compromiso entre la experiencia de usuario y tenerla.
La marca de agua se renderiza en un div debajo de la página. Dependiendo de su tema, los componentes de arriba pueden cubrirla, por lo que si elige añadirla a su página, su tema debe tener mucha transparencia. Sin embargo, es posible colocarla sobre todos los componentes cambiando z-index con CSS. También debe ajustar mix-blend-mode para mejorar la visibilidad.
Este componente viene con valores predeterminados sensatos que deberían funcionar bien con la mayoría de los temas claros. Sin embargo, añadir una marca de agua a temas oscuros es complicado, ya que probablemente tendrá un mayor impacto en la legibilidad. Le animo encarecidamente a ajustar la configuración y el CSS para encontrar lo que mejor funcione en su caso.
Dado que la marca de agua se renderiza en un div, cualquier usuario que sepa cómo usar las Herramientas de Desarrollador del navegador puede ocultarla. Cumplirá su función prevista para probablemente el 99% de los usuarios no técnicos, pero es importante tener en cuenta que no es una solución infalible.
Ah, ya veo, lo confundí con las marcas de agua para imágenes. Editaré el título para que sea más claro. Un caso de uso bastante inusual… No conozco ningún sitio web que ponga marca de agua en todas las páginas web.
Estoy de acuerdo en que es un caso de uso inusual. Tal como está ahora, creo que es útil principalmente para foros privados en empresas con un departamento de seguridad paranoico, como empresas del sector financiero.
Fue un primer MVP. Añadiré funcionalidad basándome en los comentarios recibidos de la comunidad.
Espero poder añadir pronto el filtro basado en categorías que sugirió el Sr. X y que lo hará más útil para una audiencia más amplia.
Esto agrega una configuración de tema include_if_title_matches, que está vacía por defecto. Si la configuración está vacía, no se cambia nada.
Si la configuración tiene un valor, SiteSetting.title debe coincidir para que se muestre la marca de agua.
El caso de uso es tener la marca de agua visible en un sitio de staging, pero no en producción, sin necesidad de realizar cambios en la base de datos. Al establecer include_if_title_matches en “staging” y tener “staging” en SiteSetting.title del sitio de staging (establecido en una variable de entorno para que persista cuando la base de datos de producción se restaure en él), la marca de agua se muestra en el sitio de staging pero no en producción.
Con este cambio, lo instalaré en cada sitio que tenga un sitio de staging.
Puedo confirmar que funciona tanto en mi sitio de producción como en el de staging; el primero funcionaba con Discourse.siteSettings.xxx cuando estaba trabajando en esto (estoy a punto de hacer una actualización que creo que podría cambiar eso).
Es de gran ayuda ver mi sitio de staging con la marca de agua. ¡Gracias por el tema!
¿Es posible añadir una opción para crear una marca de agua (funcionalmente) invisible? Por ejemplo, uno o dos valores de color de diferencia con el fondo, y debajo de todo lo demás. Podríamos entonces mirar cualquier captura de pantalla y buscar esos valores de color para descubrir el texto del nombre de usuario.
El caso de uso no es disuadir las capturas de pantalla, sino averiguar qué usuario está haciendo capturas de pantalla y distribuyendo publicaciones de un foro privado.
Alternativamente, dado que nuestro foro utiliza el cambio automático de claro/oscuro, ¿es posible ejecutar dos copias del tema para codificar los valores de color? ¿O quizás hacer que el color de la marca de agua sea una configuración por tema?
Gracias por esto. Podría ser una solución perfecta para nosotros.
¿Quizás si puedes disuadirlos, entonces se detendrán y no importará quién fue?
Creo que hacer que cambie de color según el tema actual será difícil. Si lo que quieres es intentar atrapar a alguien poniendo una marca de agua secreta, entonces tu mejor opción sería deshabilitar el otro tema.
[quote=“baylands, post:8, topic:214108”]
¿Es posible agregar una opción para crear una marca de agua (funcionalmente) invisible? Por ejemplo, uno o dos valores de color de diferencia con el fondo, y debajo de todo lo demás? Podríamos entonces mirar cualquier captura de pantalla y buscar esos valores de color para descubrir el texto del nombre de usuario.
El caso de uso no es disuadir las capturas de pantalla, sino averiguar qué usuario está capturando y distribuyendo publicaciones de un foro privado.
[/quote]Teóricamente, es posible. Pero lo probaría cuidadosamente antes de usarlo en producción. Dado que en tu caso de uso casi no habrá contraste entre la marca de agua y el color de fondo, existe una buena posibilidad de que esta información se pierda en la compresión dependiendo del formato y la configuración aplicada al subirla.
El caso de uso principal de este componente es disuadir las capturas de pantalla, pero puedes probar tu enfoque y ver si funciona. Ese sería un caso de uso en el que nunca había pensado.
Es posible usar este componente con temas claros y oscuros simultáneamente. Es un caso de uso en el que pensé al desarrollarlo. Ni siquiera necesitas ejecutar varias copias del mismo componente.
La configuración color admite el uso de una variable CSS. Por ejemplo, el valor predeterminado para esta configuración es var(--primary-low).
Así que, siempre que se utilice una variable CSS configurada con los colores adecuados en todos los temas que desees marcar con agua, ¡estarás listo!
Si lo intentas, por favor, hazme saber si funciona como esperabas.
Me encontré con un problema al probar la ruta de las variables.
Nuestro único tema es el tema claro, que utiliza las paletas de colores claro y oscuro para su modo oscuro automático.
Puedo agregar una variable “–secondary-watermark” al CSS del tema claro, pero no cambia cuando se usa la paleta de colores oscura en el tema claro.
No puedo averiguar cómo agregar la variable a la paleta de colores en lugar del tema, por lo que, como resultado, la anulación del tema claro solo funciona con la paleta de colores clara, y cuando la paleta de colores cambia automáticamente a oscura, la marca de agua se vuelve instantáneamente visible.
Es una peculiaridad extraña en la que tuve que pensar durante un tiempo. De inmediato, ¿sabes si puedes realizar cálculos con una variable? ¿Tal que pudiera definir --secondary-watermark como --secondary menos 10? ¿O algo así? Si es así, creo que eso lo solucionaría.
Nuestro caso de uso es, admitámoslo, un poco nicho. Dudo que una marca de agua visible disuada porque la gente intentaría averiguar cómo evitarla. Somos un grupo de membresía cerrada y necesitamos poder expulsar a las personas que difunden capturas de pantalla. Eso es más importante para nosotros.
Esto es realmente genial para nosotros, recibíamos publicaciones de foros privados en redes sociales por personas que se infiltraban en nuestro grupo para intentar hacernos quedar mal, así que tener esto evitaría eso o nos permitiría bloquear fácilmente a los usuarios infractores. Gracias @saquetim por desarrollar esto.
deprecate-shim.js:33 DEPRECACIÓN: [THEME 15 'discourse-watermark'] El uso del Global de Ember está obsoleto. Deberías importar el módulo de Ember o la API específica en su lugar. [id de deprecación: ember-global] Consulta https://deprecations.emberjs.com/v3.x/#toc_ember-global para más detalles.
DEPRECACIÓN: [THEME 15 'discourse-watermark'] El uso de `run.schedule` ha sido obsoleto. En su lugar, importa el valor directamente desde @ember/runloop:
import { schedule } from '@ember/runloop'; [id de deprecación: deprecated-run-loop-and-computed-dot-access]
Intentaría ayudar, pero estoy apagando mis propios
No funciona muy bien en el tema que estoy usando, más opciones personalizables serían geniales, como poder decidir cuánto de la página ocupa la marca de agua (para que solo ocupe el contenido de la publicación/fondo de la página, no, por ejemplo, la cabecera al navegar por las secciones).
Con respecto a mi tema, no importa qué selector de color CSS use y sin importar cuán brillante sea el color, el texto/SVG aparece oscuro/negro.
Buen componente, ¿pero no es compatible con Ember 5?
Obtengo el error: ReferenceError: Ember is not defined,
mi versión de Ember de instancia es v5.5.0. @saquetim
