Oxygen Builder para equipos y agencias: cómo colaboramos

Oxygen Builder es una herramienta increíblemente poderosa, pero cuando se trata de la colaboración en equipo en términos de creación del sitio web, las cosas pueden ponerse un poco difíciles. Oficialmente, el equipo detrás del creador de páginas recomienda encarecidamente que solo un usuario edite a la vez. Desafortunadamente, para las agencias con grandes proyectos, esto es imposible y puede asustar a algunos de usar esta herramienta.

En nuestra opinión, las ventajas superan con creces estas desventajas y hemos encontrado varias formas de solucionar estas limitaciones. En este artículo, analizaremos cómo colabora nuestro equipo al crear sitios web con Oxygen Builder. Durante el año pasado, hicimos la transición para crear el 100% de todos los sitios web y proyectos de nuestra agencia en Oxygen, obteniendo una comprensión bastante decente de la mejor manera de hacerlo.

Actualización de abril de 2022: ahora usamos el complemento de colaboración de DPlugins que resuelve el problema de la edición de múltiples usuarios en Oxygen Builder. Lee nuestra reseña aquí.

Primero, comprenda los límites del constructor

Antes incluso de comenzar a considerar la colaboración con Oxygen Builder, es importante comprender las limitaciones y por qué exactamente es difícil para varios usuarios crear un sitio web de manera efectiva con Oxygen.

Primero, debe leer este artículo publicado por el equipo de Oxygen, que explica exactamente por qué existe el bloqueo de edición (el mecanismo que hace que solo un usuario pueda editar a la vez). Aquí están las cosas importantes:

“Debido a la forma en que Oxygen guarda estilos, clases y configuraciones globales, se desaconseja la edición multiusuario o multipestaña con Oxygen.

Recomendamos usar una sola pestaña cuando trabaje con Oxygen para evitar problemas en los que una pestaña guarda datos más antiguos que otra, lo que resulta en la sobrescritura de sus nuevos cambios. El mismo escenario puede ocurrir cuando dos o más usuarios están trabajando en Oxygen al mismo tiempo”.

Esencialmente, todo se almacena en un lugar central. Las pestañas no se comunican entre sí, por lo que si un desarrollador agrega una clase personalizada o CSS personalizado en la hoja de estilo global, y otro desarrollador no lo hace, incluso si el primero guarda, si el segundo desarrollador guarda después, las clases y estilos se sobrescribirá y se perderá. No es bueno para la colaboración.

Si necesita trabajar en equipo, es importante comprender por qué funciona esto, para que pueda evitar este problema de la mejor manera. Nuevamente, las dos cosas que se sobrescribirán: 1) Clases personalizadas agregadas y 2) CSS agregado a la hoja de estilo global.

Mientras sea solo un usuario en una página/plantilla guardada, la estructura se guardará, así como cualquier estilo establecido para la ID individual del elemento estará bien. Pero si agrega clases (importante, porque esto ahorra mucho tiempo), es posible que se sobrescriban.

Si no necesita estar editando todo a la vez, no lo haga. Pero si esto es esencial para su empresa o proyecto, pruebe algunas de las técnicas que se analizan a continuación.

Editar de todos modos (o deshabilitar esto)

Lo primero que debe tener en cuenta es que técnicamente puede anular Edit Locking, que es exactamente lo que hacemos. No hay configuraciones para activar, simplemente haga clic en el enlace Editar de todos modos. Esto significa que todo nuestro equipo técnicamente puede inicializar el constructor a la vez, pero consideraría leer más sobre cómo lo hacemos. Todavía tenemos que considerar los problemas de sobreescritura aquí.

Una cosa interesante a tener en cuenta es que con Hydrogen Pack (uno de nuestros principales complementos para Oxygen, lo usamos todos los días), puede desactivar la función "Editar bloqueo", ocultando "Editar de todos modos" todos juntos. Esto es solo estéticamente agradable, pero realmente no afecta el flujo de trabajo.

usar un marco

El marco es una mentalidad que debe tenerse en cuenta durante todo el proceso de diseño y construcción de un sitio web en Oxygen. Un marco es una colección de clases de CSS que funcionan juntas para ayudarlo a estructurar su sitio web de manera consistente. Los marcos son muy frecuentes en toda la industria del diseño web. Por ejemplo, hay Bootstrap, Tailwind y más.

Con una actualización reciente de Swiss Knife, puede cargar clases en masa en el generador, llamar a la hoja de estilo del marco y usar prácticamente cualquier cosa para la que tenga la lista de clases.

Para nosotros, usamos un marco específico de Oxygen llamado Core CSS. Esto está incluido en OxyNinja Core, que es uno de nuestros complementos favoritos debido a ese marco. Aquí está la propuesta de venta, del sitio web:

“Hacer un sitio perfectamente consistente nunca fue tan fácil con la combinación de las clases de utilidad Core y Oxygen Builder. ¡Las columnas de cuadrícula CSS, las tarjetas, la tipografía, el tamaño y el espaciado, los colores y mucho más ya están configurados!

Con el marco, podemos aplicar fácilmente tamaños de fuente, relleno y más, sin necesidad de agregar nuevas clases de CSS y manteniendo la coherencia sin siquiera necesitar una guía de estilo digital central. Debido a que las clases se instalan en el sitio desde el inicio del desarrollo, no es necesario agregar nuevas clases, lo que significa que nada se sobrescribe.

Escribir CSS fuera del constructor

Como agencia, nos encanta usar CSS para crear interacciones únicas y efectos de desplazamiento. Por lo tanto, generalmente tenemos un montón de CSS personalizado que cada uno de nuestros desarrolladores escribe por sí mismo. Estaría bien agregarlo a la hoja de estilo global si solo hubiera un usuario en el sitio web a la vez, pero generalmente hay varios desarrolladores trabajando, por lo que necesitamos una forma de evitar el problema de sobrescritura.

Para hacer esto, simplemente escribimos CSS en un complemento de terceros llamado Advanced Scripts. Este es creado por el mismo desarrollador detrás del paquete de hidrógeno, y es uno de nuestros complementos favoritos. Cada desarrollador tiene su propia hoja de estilo en la que escribe su CSS. Al guardar, los estilos se aplican globalmente al sitio web. Al final del proyecto, todos los estilos se combinan en una única hoja de estilo principal.

comunicarse constantemente

Hay muchos casos en los que necesitamos agregar clases CSS específicas a elementos individuales dentro del edificio. Cuando se trabaja en equipo, esto es arriesgado debido a los problemas en los que se sobrescriben las cosas. Para hacerlo bien y no perder ningún trabajo, todos colaboramos usando Slack ¿Tienes un solo desarrollador en todos los estilos necesarios en un momento del día? Esta es quizás la mayor molestia con este constructor, pero si se administra correctamente, se guardarán todos los datos.

Debido a que todo el CSS asociado con las clases está en hojas de estilo, todo lo que tenemos que hacer es agregar las clases y los estilos se aplicarán en consecuencia.

También estamos experimentando con varios conceptos. Por ejemplo, podemos crear un repositorio de Github que contenga una hoja de estilo CSS central y usar la función Live Share en VS Code para que todos puedan escribir estilos juntos. Luego podemos usar secuencias de comandos avanzadas y estáticamente para entregar los estilos a nuestro sitio web. También hemos adoptado recientemente la carga masiva de clases que viene con Swiss Knife.

¿Haces las cosas de manera diferente que dan como resultado un flujo de trabajo colaborativo aún mejor en Oxygen? Háganos saber en los comentarios aquí!