Oxygenados La comunidad hispana
post oxygen builderOxigenadoa y Recoda

Resumen Características

Potenciadores del flujo de trabajo

Flujo de trabajo en un click
Puedes ver nuestras soluciones de flujo de trabajo en un click dentro de la página Visión general de la interfaz:
Advantor - Opciones avanzadas con 1 click
Panelator - Estructura, Selector, Hojas de Estilo, Configuración, Inspector de Estilos con 1 click
BreakPoints -Puntos de ruptura en la barra superior
Conmutador de clases - Visión general de las clases sin clicks, cambio de selector con un click.

Ajuste ancho de los paneles

Redimensionar el tamaño de ambos paneles se puede hacer arrastrando.

recoda caracteristicas 1

Shortcuts

Hay muchos atajos dentro de Workspace, así que cuando hablamos de atajos tenemos diferentes áreas de atajos:

Posicionamiento del teclado
Estos accesos directos están pensados para el control de la interfaz, son de un solo click y su posición es la misma en todas las distribuciones de teclado para reforzar el trabajo a dos manos.

Guía de atajos
Si quieres tener sugerencias alrededor de la interfaz para los accesos directos, puedes habilitarlo a través de las preferencias de usuario activando la opción de sugerencias de accesos directos, que se explica mejor aquí.

Workspace para diseñadores

Guia Grid

Esto actúa como las guías de cuadrícula de Figma, Sketch y otras aplicaciones de diseño de sitios web. 
Tiene la opción de establecer la misma cuadrícula que estaba utilizando dentro de Figma / Sketch / Adobe XD para que tengas anclaje de referencia al pasar el diseño en el sitio web real.
Si quieres saber más sobre esta función haz click en este enlace.

X-Mode

Al estar activado verás en una vista previa en escala de grises y todos los elementos serán delineados. 
Esto puede ser muy útil cuando se quieres ver una vista previa de menor fidelidad del diseño y el contorno puede ser útil para ver el tamaño de cada elemento y detectar más rápidamente donde se producen problemas en el diseño.

recoda caracteristicas 2

Manejadores de Viewport

Los manejadores de la ventana gráfica son pequeños ayudantes responsivos que ayudan a ver cómo se verá el diseño en el ancho de los dispositivos más populares. Se colocan en la parte superior de la regla de la ventana gráfica y al pasar por encima mostrarán qué dispositivos están en ese ancho de pantalla, al hacer click ajustará su lienzo para ver y evaluar el diseño en un ancho determinado.

recoda caracteristicas 3

Canvas Zoom control

Puedes tener un comportamiento auto-zoom o responsivo en el punto de ruptura por defecto. Por defecto es resposive, si quieres auto-zoom puedes hacerlo a través de User Preference, explicado aquí.
Si no tienes una pantalla lo suficientemente grande como para ver cómo se vería en una pantalla grande. Puedes utilizar la configuración del lienzo en el punto de ruptura por defecto para simular el Zoom out para previsualizar cualquier tamaño de pantalla.

Ayudas Responsive

Si quieres establecer un control de canva bidimensional puedes utilizar los Responsive Helpers, que tienen 3 formas de control:
 - Introducir manualmente los valores.
 - Seleccionar por tamaño de pantalla.
 - Seleccionar un dispositivo específico.
Puedes encontrar más información sobre esto aquí.

Espacio de trabajo para desarrolladores

Recoda Workspace está trayendo las herramientas favoritas de los desarrolladores fuertemente integradas con Oxygen Builder. 

Live Server

Estás trabajando en una configuración de doble pantalla (o en una pantalla única enorme). Puedes tener la vista previa frontal en una y desarrollar en otra. Cuando guardes, se recargará en caliente la vista previa frontal.

Live Server Scroll Sync

Si marcas esta característica, se habilitará la sincronización de desplazamiento bidireccional entre el lienzo y la vista previa frontal. Esto puede ser útil para que no tengas que desplazarte para encontrar el contenido que estás editando dentro de Oxygen Builder e inspeccionarlo fácilmente a través de las herramientas de desarrollo en el front-end.
Si te desplazas por uno de ellos, el otro se sincronizará.

Línea de Comandos

Esta función está inspirada en el software de modelado 3D y en Emmet. Te da superpoderes para escribir una sintaxis inspirada en Emmet que generará HTML.

Casos de uso común :
 - Añadir varias clases.
 - Añadir múltiples atributos.
 - Añadir una sola clase a múltiples elementos.
 - Añadir un solo atributo a múltiples elementos.
 - Renombrar un elemento.
 - Renombrar múltiples elementos.
 - Duplicar múltiples.
 - Añadir elementos Oxygen con etiquetas personalizadas.

Casos de uso avanzados
 - Crear plantillas de componentes propias (elementos reutilizables)

¿Esto es sólo para usuarios avanzados?
No, puedes empezar a mejorar tu flujo de trabajo añadiendo clases a través de la línea de comandos, cuando necesites añadir más de una clase verás los beneficios de hacer operaciones comunes a través de la línea de comandos. Y pronto, utilizando comandos sencillos en el flujo de trabajo, podrás ahorrar más y más tiempo.

¿Que se puede hacer a través de la línea de comandos?
Todo, o casi todo lo que te imaginas. Estamos desarrollando la posibilidad, y para ser honesto, ni siquiera sabemos todas las direcciones posibles en las que puede encajar a su flujo de trabajo. Después de desarrollar los comandos para añadir clases nos dimos cuenta de que puedes utilizarlo para importar incluso clases del framework CSS dentro de Oxygen Builder. Así que la única limitación es tu imaginación.
Si quieres aprender más sobre la línea de comandos, comienza aquí.

CodeSense

¿Por qué necesitas CodeSense? 
Es la única integración profunda para sugerencias disponible en el mercado y pone a Oxygen unos pasos más cerca de un entorno de desarrollo de codificación completo.
¿Qué problema resuelve? 
Escribir el código en el editor de código y luego pegarlo de nuevo en Oxygen. Con la profunda integración de CodeSense con Oxygen Builder creemos que ya no es necesario hacer estas tonterías.
CodeSense es un autocompletado / sugerencias desarrollado por Recoda para el editor de código Codemirror y con una profunda integración con Oxygen Builder.
Puedes utilizarlo en:
 - Hojas de estilo
 - CSS personalizado
 - JS personalizado
 - Editor BlockPad
 - Línea de comandos
¿Por qué CodeSense? 
Sugiere de clases de Oxygen, sugiere  propiedades CSS relacionadas y que se pueden seleccionar.
¿Qué significa para el usuario? 
Escribir CSS como nunca antes, sin ningún error tipográfico.

⚠️  Advertencia: Podrías enamorarte profundamente. No digas que no te hemos avisado  😄

BlockPad Editor

¿Qué hace esto? 
Activa la vista previa del código de 3 paneles del bloque de código.
¿Te gustará? 
Si te gustan los parques infantiles de codificación como Codepen, JSbin, etc., ¡bienvenido!
¿Está inspirado en Codepen? 100%.
Todos nos gusta y usamos Codepen. Esto es un poco diferente, esto no es potente y no está destinado a la misma finalidad que Codepen. La interfaz gráfica de usuario es bastante pesada inspirada en nuestra herramienta favorita, pero esto se desarrolla para tomar ese estilo familiar y llevarlo dentro de Oxygen Builder.
Características:
 - CodeSense
 - Arrastrable
 - Redimensionable
 - Colapsable

recoda caracteristicas 4

Import Stylesheets

⚠️ Problema: ¿Tienes variables CSS para los colores dentro de las hojas de estilo, pero no puedes previsualizar los colores cuando define esas variables en colores globales?

recoda caracteristicas 5

¿Cómo importar?
Pegar el siguiente comentario al principio de las hojas de estilo:
     /*#IMPORT*/
Se debería ver como la siguiente imagen:

recoda caracteristicas 6

¿Por qué necesita esto?
 Ese comentario sugerirá a Workspace que importe esa Stylesheet dentro del Editor. Si añadimos todas las hojas de estilo sin control podría colisionar con el Editor y hacer cosas raras.
¿Qué pasa si la colisión sigue ocurriendo? 
Con este método las posibilidades son mucho menores, pero debido a la naturaleza del CSS sí puede ocurrir. Puedes aplicar la corrección rápida (icono junto a Import Stylesheets) y las eliminará del Editor.