Categorías
Estrategias para Empresas

Optimiza tu negocio con Portales de Proveedores: La clave del éxito en la gestión de compras

Introducción Un portal de proveedores es una plataforma en línea que permite a las empresas gestionar y optimizar sus procesos de adquisición y comunicación con los proveedores. Proporciona una interfaz centralizada donde los proveedores pueden enviar cotizaciones, realizar seguimiento de pedidos, enviar facturas y comunicarse con la empresa de manera eficiente. Los beneficios de utilizar […]

Categorías
Estrategias para Empresas

El papel de la diversidad en el éxito del trabajo en equipo

Introducción La diversidad en el lugar de trabajo es un tema cada vez más relevante en el mundo empresarial actual. La diversidad se refiere a la variedad de características y perspectivas que existen entre los miembros de un equipo o una organización. Estas características pueden incluir diferencias culturales, de género, de edad, de habilidades y […]

Categorías
Estrategias para Empresas

Cómo administrar tu tiempo para ser más productivo

Introducción La gestión del tiempo es un aspecto fundamental en nuestras vidas diarias. El tiempo es un recurso limitado y valioso, por lo que es importante aprender a administrarlo de manera efectiva para poder aprovechar al máximo cada día. La gestión del tiempo nos ayuda a ser más productivos, reducir el estrés y lograr un […]

Categorías
Estrategias para Empresas

La importancia de la planificación en la gestión de proyectos

La gestión de proyectos es una disciplina que se encarga de planificar, organizar, dirigir y controlar los recursos y actividades necesarios para alcanzar los objetivos de un proyecto. Es una práctica fundamental en cualquier tipo de proyecto, ya sea en el ámbito empresarial, de construcción, tecnológico, entre otros. La gestión de proyectos es esencial para […]

Categorías
Estrategias para Empresas

Cómo elegir el mejor Sistema ERP para tu negocio

Introducción Un sistema ERP (Enterprise Resource Planning) es una herramienta de gestión empresarial que integra y automatiza los procesos y operaciones de una empresa en un solo sistema. Estos sistemas son fundamentales para las empresas, ya que les permiten mejorar la eficiencia, la productividad y la toma de decisiones, al proporcionar una visión completa y […]

Categorías
Estrategias para Empresas

¿Por qué deberías considerar un software ERP para tu empresa?

Introducción En el mundo empresarial actual, la gestión eficiente de los procesos y la toma de decisiones estratégicas son fundamentales para el éxito de una empresa. Para lograrlo, es necesario contar con herramientas tecnológicas que faciliten estas tareas. Una de estas herramientas es el software ERP (Enterprise Resource Planning, por sus siglas en inglés), que […]

Categorías
Estrategias para Empresas

SAP Business One: la herramienta esencial para una gestión eficiente de tu cadena de suministro

Introducción SAP Business One es una solución de software de gestión empresarial diseñada específicamente para pequeñas y medianas empresas. Esta plataforma integral ofrece una amplia gama de funciones y características que pueden ayudar a las empresas a optimizar y mejorar su gestión de la cadena de suministro. Desde la planificación de la demanda hasta la […]

Categorías
Estrategias para Empresas

Cómo optimizar tus procesos empresariales con Odoo Open ERP

Introducción En el mundo empresarial actual, la eficiencia y la optimización de los procesos son fundamentales para el éxito de una empresa. Una forma de lograr esto es a través de la implementación de un sistema ERP (Enterprise Resource Planning, por sus siglas en inglés). Odoo Open ERP es una de las opciones más populares […]

Categorías
Estrategias para Empresas

El 94% de los directivos quiere datos más valiosos: así se consiguen

Madurez de los datos: Donde los datos se encuentran con el valor. Esta es la clave para que las organizaciones den en el clavo con las tendencias actuales en IA.

Categorías
Estrategias para Empresas

Cómo la consultoría de AWS puede maximizar el ROI de adopción

Cada vez más organizaciones de todos los sectores están considerando la migración a AWS para aprovechar los beneficios de una mayor flexibilidad, seguridad avanzada y una gama de sólidos servicios de AWS. Según Statista, el segmento de AWS crece al menos un 20% cada año. A pesar de todas las ventajas potenciales de la plataforma en la nube de AWS, su implementación tiende a llevar tiempo […]

The post Cómo la consultoría de AWS puede maximizar el ROI de la adopción appeared first on Salesforce Ben.

Categorías
Estrategias para Empresas

IA para TI: los nuevos lanzamientos de IA de Dreamforce 2023

Con la IA como prioridad para todos los líderes de TI, descubra cómo estos nuevos lanzamientos de IA están impulsando la productividad y la eficiencia de los equipos de TI.

Categorías
Estrategias para Empresas

3 consejos de atención al cliente para ofrecer siempre una experiencia excelente

¿Cómo puede ofrecer siempre un servicio al cliente increíble? Aprenda cómo las personas, los procesos y la tecnología trabajando juntos pueden ayudarle a obtener constantemente reseñas de cinco estrellas.

Categorías
Estrategias para Empresas

Vender es Humano: ¿Que tan buen vendedor eres?

Seamos empleados por cuenta propia que exponemos una nueva idea a nuestros clientes, emprendedores que tratamos de atraer a nuevos inversores, o padres o maestros que tratamos que los niños estudien más, estamos siempre tratando de convencer a los demás. Es por eso que hoy más que nunca, hay que revisar todo lo que creemos […]

Categorías
Estrategias para Empresas

El Poder de Saber lo que no Sabes y Cómo Reinventarte

La inteligencia es por lo general vista como la habilidad para pensar y aprender, pero en un mundo rápidamente cambiante puede importar mas aquello que podamos repensar y desaprender. El psicólogo empresaria Adam Grant es un experto en abrir las mentes de otras personas y la propia. En el siguiente articulo basado en el libro […]

Categorías
Estrategias para Empresas

Sé una mente brillante, capaz de transformar a los demás

Ya sea que estés tratando de cambiar a una persona, transformar una empresa, o cambiar el modo en el que una industria en su totalidad opera, este es el articulo para ti, ya que te brindara un modo poderoso de pensar y ciertas técnicas que pueden conducirte a resultados extraordinarios, convirtiéndote en un catalizador. Todos […]

Categorías
Estrategias para Empresas

Como atacar y Eliminar la Injusticia Laboral y Transformar Nuestras Carreras y Empresas en el Proceso

Todos nosotros excluimos, subestimados a un gran numero de personas en el trabajo incluso mientas sobrestimamos y promocionamos a otros, por encima de su novel de competencia. No solo es esto inmoral e injusto sino que es malo para la empresa. En este articulo encontraras la solución, en donde aprenderás el marco practico para la […]

Categorías
Estrategias para Empresas

Lecciones de Negocios desde Lugares Improbables (Se Exitoso con Inteligencia, coraje y creatividad)

La dirección y motivación en este artículo te ayudará a encontrar a un mentor, construir una red, establecer una reputación, destacarte de tu competidor e ir más allá para llegar a una carrera profesional y rentable. No necesitas tener un MBA para llevar adelante una empresa. No necesitas un título universitario. Todo lo que necesitas […]

Categorías
Estrategias para Empresas

El Secreto de los Equipos Mas Exitosos del Mundo

La cultura de grupo es una de las mayores fuerzas que existen. Podemos percibir su presencia en los negocios de éxito, en los equipos que lideran los campeonatos y en las familias más prósperas, y enseguida notamos cuándo falta y cuándo se ha vuelto tóxica. Todos queremos implantar una cultura fuerte en nuestras respectivas organizaciones, […]

Categorías
Estrategias para Empresas

El Secreto No Oculto de los Equipos Mas Exitosos del Mundo

¿Qué hacen concretamente los mejores equipos, y qué hacen los responsables de dichos equipos para precisamente liderar y conseguir sostener esos altos niveles de rendimiento? Daniel Coyle, autor del libro The Culture Code, es uno de esos expertos, investigadores, asesores y divulgadores que acierta especialmente en la forma de concebir un modelo de trabajo. Daniel […]

Categorías
Estrategias para Empresas

Como Tomar Mejores Decisiones En la Vida y en El Trabajo

¿Como podemos tomar mejores decisiones?. ¿Porque es que nos puede agradar o desagradar alguien mucho antes de llegar a conocerlo? ¿Porque desconfiamos de los extraños sin saber la razón? ¿Porque por otro lado damos mucho peso a la información que está frente nuestro mientras que no logramos considerar la información que está fuera de nuestro […]

Categorías
Estrategias para Empresas

101 Tácticas Para Una Negociación Exitosa

En un estudio de investigación realizado por alumnos universitarios una década atrás, más de un tercio de los participantes contestaron que casi nunca o nunca negociaban con otras personas. Sin embargo, la verdad es  completamente diferente. Todo en la vida es negociable, bajo cualquier condición, en todo momento, argumentan Peter B. Stark y Jane Flaherty. […]

Categorías
Estrategias para Empresas

Claves Para Manejar Equipos Globales Con Exito

A medida que crece la economía mundial más empresas están ayudando a la expansión internacional. Esto se refiere a la confianza en la fuerza de trabajo dispersa. Se ha transformado en algo muy común el tener empleados remotos en diferentes lugares. La mayoría de los empleados prefieren trabajar con empresas que ofrezcan trabajo remoto. Considerando […]

Categorías
Estrategias para Empresas

Cómo Convertirte En El Lobo De Los Negocios

¿Recuerdas a la persona que Leonardo Dicaprio interpretó en la película de Hollywood The Wolf of Wall Street’? Aquel que ayudaba a miles de jóvenes niños a convertirse en hombres de ventas mundiales? En Way of the Wolf, revela lo que se trata su sistema de entrenamiento mágico The Straight Line, y cómo puede brindarte […]

Categorías
Estrategias para Empresas

Desmitificando Light DOM y sus casos de uso ☁️

Esta es una traducción que desde EGA Futura ofrecemos como cortesía a toda la Ohana y comunidad de programadores , consultores , administradores y arquitectos de Salesforce para toda Iberoamérica .

El enlace a la publicación original, lo encontrarás al final de este artículo.

…

Desmitificando Light DOM y sus casos de uso | Blog de desarrolladores de Salesforce

Light DOM es una función de Lightning Web Components que ha estado disponible de forma general en Lightning Experience, Experience Cloud, LWC OSS (código abierto) y todas las versiones de la aplicación móvil Salesforce desde Summer '23 .

Los componentes web Lightning, de forma predeterminada, se representan en DOM oculto , lo que proporciona una encapsulación y seguridad sólidas para sus componentes. Sin embargo, al mismo tiempo, evita el estilo global y bloquea las integraciones de terceros que introspeccionan el interior de sus componentes. Light DOM es una característica que se puede habilitar de forma granular en componentes seleccionados, de modo que Shadow DOM no los afecte.

¿Cómo funciona el DOM ligero?

Usemos un componente web Lightning muy simple como ejemplo.

holaCodey.html

<dx-code-block title language="html" code-block="

Hello Codey!

«>

holaCodey.js

En el ejemplo anterior, el DOM oculto predeterminado del componente evita que una regla CSS definida en el componente principal o el host alcance el elemento <p> . Además, no permite que el código JavaScript externo al componente consulte el elemento <p> mediante las API de consulta del navegador.

Para activar el DOM ligero para un componente, debe especificar el renderMode ligero en su archivo JavaScript y la directiva de plantilla lwc:render-mode en la etiqueta <template> del componente. Ambos cambios son necesarios debido a la forma en que se compilan los componentes web Lightning.

holaCodey.html

<dx-code-block title language="html" code-block="

Hello Codey!

«>

holaCodey.js

Cuando activa el DOM claro en un componente, el marcado del componente se adjunta al elemento anfitrión en lugar de a su árbol de sombra. Luego puede acceder al marcado desde otros componentes de la página como cualquier otro contenido en el host del documento que no esté protegido por Shadow DOM.

Los componentes DOM ligeros permiten el uso de API de consulta de navegador estándar como querySelector y querySelectorAll . En este caso, en lugar de usar this.template.querySelector , debes usar this.querySelector .

holaCodey.js

O más simplemente, a menudo puedes usar la directiva lwc:ref en ambos casos (componentes DOM sombreados y claros) y omitir el querySelector .

holaCodey.html

<dx-code-block title language="html" code-block="

Hello Codey!

«>

holaCodey.js

Cuándo usarlo y cuándo no usarlo

Light DOM es una opción para cada componente individual. Sus efectos no se aplicarán a otros componentes a menos que también opten por participar. Tenga en cuenta que los componentes base siempre se representan en DOM oculto.

Recomendamos habilitar DOM ligero si tiene bibliotecas que necesitan acceder a los componentes internos mediante API de consulta de navegador estándar, aplicar estilos globales o necesita más flexibilidad para implementar las mejores prácticas de accesibilidad, siempre y cuando el componente no exponga datos confidenciales. Cubriremos estos casos de uso con más profundidad en la siguiente sección.

No recomendamos habilitar DOM ligero para un componente si ese componente aparece o funciona con datos confidenciales. El uso de DOM ligero elimina la encapsulación de DOM en sombra y expone los componentes al raspado de DOM. Por lo tanto, tenga en cuenta esta importante consideración.

Casos de uso habilitados por DOM ligero

Light DOM permite varios casos de uso que anteriormente no eran compatibles.

1) Soporte de bibliotecas que necesitan acceso a las partes internas de un componente

Light DOM permite el uso de bibliotecas que necesitan acceso a los componentes internos. Un buen ejemplo de esto son las bibliotecas de análisis utilizadas en los sitios de Experience Cloud, como Google Analytics, ya que necesitan acceso a los componentes internos para obtener mejores resultados.

Podemos probar este caso de uso, incluido el componente helloCodey anterior, en un componente principal mascotChanger de la siguiente manera.

mascotChanger.html

<dx-code-block title language="html" code-block="
«>

mascotChanger.js

Tenga en cuenta que, aunque el párrafo consultado pertenece al componente helloCodey , podemos acceder a él con this.template.querySelector , porque pertenece al DOM ligero secundario. Sin embargo, si el componente helloCodey no tuviera habilitado el DOM ligero, querySelector habría devuelto null .

También puede acceder a los componentes internos del DOM ligero desde un script que se carga como un recurso estático en la página, siempre y cuando todos los componentes ancestros estén habilitados para el DOM ligero. Por ejemplo, en un sitio LWR Experience Cloud, que es DOM completamente ligero, puede agregar un recurso estático de JavaScript que encuentre los componentes internos helloCodey de la siguiente manera.

myJSResource.js

2) Implementación más sencilla de componentes profundamente anidados

Otro ejemplo en el que esto puede resultar útil es implementar componentes complejos y profundamente anidados. En ese caso, es posible que prefiera tener un único componente DOM de sombra en el nivel superior y componentes DOM claros dentro para evitar gastos generales. Por ejemplo, un componente de tabla de datos personalizado puede tener solo un gran componente DOM de sombra alrededor de todo, en lugar de una sombra para cada fila y celda de la tabla.

Esta implementación facilita la consulta de sus propios elementos desde el componente de nivel superior de su jerarquía y también la implementación de la accesibilidad. Además, hay una ligera mejora en el rendimiento en algunos casos de uso al usar DOM claro sobre DOM sombreado, lo que se debe principalmente a la sobrecarga de simplemente crear nodos de sombra adicionales.

3) Estilo global

Light DOM también facilita el estilo global, ya que permite que los estilos CSS caigan en cascada en el marcado del componente. Por ejemplo, un componente DOM ligero puede establecer un estilo que se carga y luego se aplica una vez para todos los componentes DOM ligeros de la página. La inyección de estilos globales a través de DOM ligero solo se admite en sitios de Experience Cloud, editor de contenido CMS o Sales Enablement.

Por ejemplo, definamos un componente colorChanger de la siguiente manera.

colorChanger.html

<dx-code-block title language="html" code-block="
«>

colorChanger.js

colorChanger.css

El color de fondo azul se aplicará a los párrafos de todas las instancias del componente helloCodey en la página, ya que está habilitado para DOM claro.

En la mayoría de los casos, no querrás que tu estilo se filtre a otros componentes. Eso todavía es posible para componentes DOM ligeros. Solo necesita colocar esas reglas de estilo en un archivo *.scoped.css , para que tengan como alcance el componente DOM ligero. El CSS con alcance está escrito exactamente igual que el CSS normal, pero solo se aplicará a ese componente sin filtrarse.

Tenga en cuenta que si las reglas de estilo se cargan globalmente como recursos estáticos en una página de Lightning Experience o un sitio de Experience Cloud, se les quitará el alcance y se aplicarán tanto a los componentes DOM claros como también a los componentes DOM de sombra, ya que la sombra sintética no evitará que se filtren. Esta es una limitación que se solucionará una vez que la sombra nativa sea totalmente compatible (actualmente en Developer Preview ). Cuando la sombra nativa está habilitada, solo los componentes habilitados para DOM claro heredarán los estilos globales.

4) Implementación más flexible de las mejores prácticas de accesibilidad

Light DOM permite que un componente haga referencia a la i d un elemento que vive en otro componente separado habilitado para Light DOM. Esto le permite vincular dos elementos utilizando los atributos i d y aria , lo que le otorga flexibilidad adicional para implementar las mejores prácticas de accesibilidad en sus proyectos. Mejoremos nuestro componente mascotChanger para demostrar esto.

mascotChanger.html

<dx-code-block title language="html" code-block="

«>

mascotChanger.js

mascotaNombreInput.html

<dx-code-block title language="html" code-block="

«>

mascotaNombreEtiqueta.html

<dx-code-block title language="html" code-block="

«>

Tenga en cuenta que Salesforce está trabajando actualmente con el W3C para agregar nuevos estándares, de modo que el DOM oculto nativo pueda participar en estos patrones de accesibilidad. Esto significa que, en el futuro, este caso de uso ligero de DOM no será necesario. Como parte de nuestros esfuerzos de accesibilidad, también patrocinamos a Igalia para implementar parcialmente ARIA Element Reflection , que ahora es totalmente compatible con Safari y parcialmente con Chrome. Si quieres saber más sobre este tema, echa un vistazo a nuestra propuesta cross-root-aria , el repositorio para el grupo de trabajo Modelo de objetos de accesibilidad .

La siguiente tabla resume los casos de uso y dónde se admiten.

Experiencia en la nube Experiencia relámpago Aplicaciones móviles de Salesforce LWC OSS/LWR en Node.js*
Soporte de bibliotecas que necesitan acceso a las partes internas de los componentes. Sí Sí Sí Sí
Implementación más sencilla de componentes profundamente anidados Sí Sí Sí Sí
Estilo global Sí No No Sí
Implementación más flexible de las mejores prácticas de accesibilidad Sí Sí Sí Sí

*Si se utiliza DOM de sombra nativo en lugar de sombra sintética . La sombra nativa es la opción predeterminada para LWC OSS y LWR en Node.js.

Otras Consideraciones

Cuando se trabaja con DOM ligero, hay algunas consideraciones adicionales a tener en cuenta, entre ellas:

  • Los eventos no se reorientan con DOM ligero. Lea más en la guía para desarrolladores .
  • No hay soporte de navegador para espacios fuera del DOM oculto, por lo que se emula. Esto implica que algunas funciones, como los enlaces de ciclo de vida, no están disponibles en ellos. Eche un vistazo a la documentación para saber más.
  • Por ahora, los componentes ligeros habilitados para DOM no se pueden empaquetar.

Conclusión

En esta publicación de blog, revisamos qué es el DOM ligero, los casos de uso que permite y las consideraciones a tener en cuenta para decidir qué componentes habilitarán la función. Todos los ejemplos que se muestran en este blog se encuentran en un repositorio de GitHub que puedes probar tú mismo.

Para obtener más información sobre DOM ligero en la plataforma Salesforce, lea la documentación o, si está trabajando fuera de la plataforma, lea la documentación OSS .

Si decide seguir adelante y transformar sus componentes DOM ocultos en componentes DOM claros, consulte esta herramienta creada por Salesforce Engineering para simplificar la migración.

Sobre el Autor

Alba Rivas trabaja como Principal Developer Advocate en Salesforce. Puedes seguirla en Linkedin , Twitter o GitHub .

Obtenga las últimas publicaciones de blog y episodios de podcasts para desarrolladores de Salesforce a través de Slack o RSS.

Añadir a holgura Suscríbete a RSS