{"id":45158,"date":"2024-12-09T09:00:01","date_gmt":"2024-12-09T08:00:01","guid":{"rendered":"https:\/\/www.hiberus.com\/crecemos-contigo\/?p=45158"},"modified":"2024-12-26T09:13:59","modified_gmt":"2024-12-26T08:13:59","slug":"style-systems-en-adobe-experience-manager","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/style-systems-en-adobe-experience-manager\/","title":{"rendered":"Transforma tu web multimarca con Style System de AEM"},"content":{"rendered":"

En este art\u00edculo explicaremos de manera sencilla qu\u00e9 es el Style System de AEM y c\u00f3mo puede beneficiar a las empresas que manejan m\u00faltiples marcas o que necesiten personalizar su p\u00e1gina web con peque\u00f1as variaciones visuales entre componentes.<\/p>\n

No es necesario tener conocimientos t\u00e9cnicos previos: veremos los conceptos y c\u00f3mo se implementa en AEM para tener una mejor comprensi\u00f3n de c\u00f3mo esta herramienta puede simplificar y mejorar la gesti\u00f3n de tus sitios web.<\/p>\n

\u00bfQu\u00e9 es Adobe Experience Manager?<\/a><\/h2>\n

Antes de empezar con el Style System, es importante entender qu\u00e9 es Adobe Experience Manager. AEM<\/strong> es una plataforma en la gesti\u00f3n de contenidos web (CMS<\/a> por sus siglas en ingl\u00e9s). Es utilizada por muchas grandes empresas para crear, manejar y optimizar experiencias digitales en sus sitios web, aplicaciones m\u00f3viles, … Con AEM, las empresas pueden gestionar contenido a gran escala, ofreciendo experiencias personalizadas a sus usuarios.<\/p>\n

\u00bfQu\u00e9 son los componentes en AEM?<\/h2>\n

Tambi\u00e9n resulta necesario comprender c\u00f3mo funciona Adobe Experience Manager. Los proyectos de AEM se organizan y se montan con componentes. Los componentes son bloques o partes de la p\u00e1gina web completamente personalizables y reutilizables.<\/strong><\/p>\n

Podemos tener un componente t\u00edtulo, un componente galer\u00eda de im\u00e1genes o el componente formulario. La ventaja de trabajar con componentes es que reduce el desarrollo al m\u00ednimo<\/strong>, ya que se utiliza el mismo componente en varios sitios del portal web y, en cada sitio, se puede configurar de una u otra manera.<\/p>\n

Por ejemplo, el equipo de desarrollo crea el componente \u201cGaler\u00eda de im\u00e1genes\u201d. Se desarrolla una vez con todas las funciones y caracter\u00edsticas que requiera el proyecto, y luego, se usa en distintas partes de la web con im\u00e1genes distintas, tama\u00f1os y diferentes. Es en esa flexibilidad para poder personalizar el mismo componente donde entran en juego el Style System.<\/p>\n

\u00bfQu\u00e9 es el Style System?<\/h2>\n

El Style System de AEM es una funci\u00f3n que ofrece la plataforma para permitir a los desarrolladores y dise\u00f1adores definir y aplicar estilos visuales de manera consistente a trav\u00e9s de diferentes componentes y p\u00e1ginas web.<\/strong> Estos estilos pueden incluir aspectos como colores, tipograf\u00edas, tama\u00f1os de fuente, m\u00e1rgenes, y otros elementos de dise\u00f1o que afectan la apariencia y la experiencia de usuario en un sitio web.<\/p>\n

Style System en webs multimarca<\/h2>\n

Imagina que diriges una empresa que posee varias marcas. Cada marca tiene su propio sitio web, con su propio estilo y personalidad. Con el Style System, puedes gestionar los estilos de cada una de estas marcas de manera centralizada y coherente mientras permites que cada una mantenga su identidad \u00fanica.<\/p>\n

A diferencia de un desarrollo tradicional donde se tendr\u00edan que crear m\u00faltiples webs personalizadas, con el Style System de AEM s\u00f3lo se crea un \u00fanico componente y se modifica la visualizaci\u00f3n<\/strong>, dejando las funcionalidades y el c\u00f3digo principal intacto.<\/p>\n

Ventajas del uso de Style System<\/h2>\n

1. Eficiencia y ahorro de tiempo<\/h3>\n

Uno de los beneficios m\u00e1s significativos de Style System es la eficiencia que aporta al proceso de dise\u00f1o y desarrollo. En lugar de tener que dise\u00f1ar cada sitio web desde cero, puedes aplicar estilos predefinidos a los componentes y p\u00e1ginas de tus sitios web.<\/p>\n

Adem\u00e1s, esto acelera enormemente el proceso de lanzamiento de nuevos sitios o la actualizaci\u00f3n de los existentes, lo que es crucial para mantener la relevancia en un mercado competitivo.<\/p>\n

2. Consistencia de la marca<\/h3>\n

La consistencia de la marca es esencial para el reconocimiento entre los usuarios. Con el Style System, puedes garantizar que todos los sitios web bajo el paraguas de tu empresa mantengan una identidad visual coherente, lo que fortalece la presencia de la marca en l\u00ednea.<\/p>\n

Esto tambi\u00e9n facilita la tarea a los equipos de marketing y dise\u00f1o, ya que no tienen que reinventar la rueda para cada nuevo proyecto. Style System act\u00faa como una \u00abgu\u00eda de estilo\u00bb digital que asegura que, con solo un clic, se apliquen las mismas reglas y directrices.<\/p>\n

3. Flexibilidad y personalizaci\u00f3n<\/h3>\n

A pesar de la necesidad de consistencia, cada marca tiene su propia voz y personalidad. El Style System de AEM permite una personalizaci\u00f3n profunda sin perder de vista la coherencia general. Puedes ajustar detalles espec\u00edficos para cada marca o componente, como una paleta de colores secundaria, iconograf\u00eda personalizada o elementos de dise\u00f1o que refuercen la identidad individual de la marca.<\/p>\n

4. Facilidad de mantenimiento<\/h3>\n

Gestionar m\u00faltiples sitios web puede ser una tarea abrumadora. Sin embargo, con Style System, el mantenimiento se simplifica enormemente ya que todo se queda dentro del mismo proyecto de AEM. Si surge la necesidad de actualizar o modificar un estilo espec\u00edfico, esto se puede hacer en un solo lugar, y los cambios se reflejar\u00e1n autom\u00e1ticamente en todos los sitios que utilicen ese estilo.<\/p>\n

5. Facilidad de uso<\/h3>\n

Para los editores de la p\u00e1gina web es extremadamente sencillo y visual aplicar el Style System. Desde el modo editor de AEM simplemente deben seleccionar en un desplegable la opci\u00f3n deseada y autom\u00e1ticamente ver\u00e1n reflejados los cambios en su monitor.<\/p>\n

Esto permite que el mantenimiento del portal sea mucho m\u00e1s f\u00e1cil, ya que no se necesita un perfil altamente cualificado para modificar o editar el contenido del portal.<\/p>\n

\u00bfC\u00f3mo se usa e implementa el Style System?<\/h2>\n

Despu\u00e9s de esta introducci\u00f3n m\u00e1s te\u00f3rica y ya conociendo las ventajas, veamos algunos ejemplos pr\u00e1cticos. Para ello, vamos a usar el componente de t\u00edtulo, pero esto puede aplicarse a cualquier otro componente y se puede a\u00f1adir la complejidad necesaria seg\u00fan cada proyecto.<\/p>\n

Trabajaremos con estas variaciones. Los cuatro t\u00edtulos son el mismo componente, con varios estilos.<\/p>\n

\"Tipos<\/p>\n

Cuando tengamos un componente con Style System, nos aparecer\u00e1 en el editor el bot\u00f3n con el pincel de estilos. Al pulsar sobre \u00e9l, se muestra un desplegable con todos los estilos configurados para ese proyecto.<\/p>\n

\"Bot\u00f3n<\/p>\n

Como podemos apreciar al clicar, nos muestra en este caso varios grupos de Style System que se pueden combinar entre s\u00ed. Tenemos color corporativo, el tama\u00f1o del texto o la alineaci\u00f3n.<\/p>\n

\"Atributos<\/p>\n

Solo con seleccionar la opci\u00f3n deseada, veremos que se aplican los cambios autom\u00e1ticamente. En este caso, podemos poner el color verde corporativo y con el tama\u00f1o peque\u00f1o de tipograf\u00eda.<\/p>\n

\"Resultado<\/p>\n

Al tener todos los estilos y opciones configuradas por dise\u00f1adores y el equipo t\u00e9cnico, el usuario no tendr\u00e1 que preocuparse de nada, manteniendo la coherencia visual en todo momento.<\/p>\n

\u00bfC\u00f3mo funcionan el Style System?<\/h2>\n

Sin entrar en detalles muy t\u00e9cnicos, el Style System permite al equipo de desarrollo aplicar clases CSS a los componentes. En este ejemplo b\u00e1sico, se definir\u00edan los tama\u00f1os y c\u00f3digos de color espec\u00edficos para el cliente, y luego AEM aplicar\u00eda esas clases CSS.<\/p>\n

\"Clases<\/p>\n

Para que despu\u00e9s todo se integre y funcione correctamente, se deben modificar las pol\u00edticas (policies<\/em>) del componente para vincularle ese c\u00f3digo CSS.<\/p>\n

<\/h2>\n

Sin duda, esta funcionalidad de AEM hace que se convierta en una alternativa muy interesante para todos aquellos proyectos que requieren una personalizaci\u00f3n a medida. La reducci\u00f3n de costos de desarrollo y la posibilidad de ampliar caracter\u00edsticas visuales de los componentes hacen que sea ideal para proyectos multimarca.<\/p>\n

En hiberus, podemos ayudarte a crear experiencias digitales excepcionales utilizando la suite de Adobe. Contamos con un equipo de expertos altamente capacitados en Adobe Experience Manager<\/a> y en otras herramientas de la suite de Adobe, como Analytics, Customer Data Platform (CDP), Commerce<\/a> y Target. Nuestro profesionales te acompa\u00f1ar\u00e1n en cada etapa del proceso, garantizando una implementaci\u00f3n eficiente y alineada a tus objetivos.<\/p>\n

\n
\n
\n
\n

\u00bfQuieres m\u00e1s informaci\u00f3n sobre nuestros servicios de Adobe Experience Manager?<\/p>\n

Contacta con nuestro equipo de AEM<\/p>\n <\/div>\n

\n \n
\n

<\/p>

    <\/ul><\/div>\n
    \n
    \n<\/fieldset>\n
    \n\t
    \n\t\t
    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t

    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

    \n\t\t
    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t

    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

    \n\t\t
    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

    \n\t\t
    \n\t\t\t