Manual Recoda

Como empezar

Instalación

  1. Descargar el archivo .ZIP
  2. En el Area de Administración de WordPress ir a Pugins > Añadir Nuevo.
  3. Click "Añadir Nuevo", y después en "Subir Plugin".
  4. Subir el archivo  .ZIP descargado.
  5. Instalar y activar el plugin

Editor & Canvas

En la anatomía de Oxygen UI es que tenemos dos documentos diferentes:

  1. Editor (Gris)
  2. Canvas - Lienzo(Rojo)

*Nota: Cuando hablamos de Canvas o Lienzo estamos hablando de la misma cosa, Canvas es en ingles y Lienzo es su traducción al español.

Más adelante en la documentación nos referiremos a ellos como Editor y Lienzo, y deberías estar familiarizado con ellos cuando estés reportando bugs porque son dos documentos diferentes en los que necesitamos escuchar eventos en ambos, y un bug común podría ser que alguna funcionalidad del Espacio de Trabajo no funcione cuando estás dentro del Lienzo, así que esta será una de las preguntas más frecuentes cuando hablemos de bugs.

Toolbox & Tools

Recoda Workspace proporciona múltiples herramientas para que pueda impulsar su flujo de trabajo. Ahora que sabemos que son las herramientas, podemos definir qué es la caja de herramientas.(Toolbox)
En Recoda definimos la caja de herramientas como un grupo de herramientas. En el momento de escribir esto, tenemos Workflow 2X, Designer y Developer toolbox. La caja de herramientas, en otras palabras, es una agrupación semántica de herramientas en Recoda

Solución de Problemas

Si encuentras algún problema en Oxygen con el espacio de trabajo instalado, por favor:

  1. Borra la caché
  2. Informa del problema.

Workflow 2X

¿Qué son las herramientas Workflow 2X?

Las herramientas de Workflow 2X están hechas para usar Oxygen builder con menos fricción. El espacio de trabajo está proporcionando la flexibilidad necesaria para operar dentro del constructor de oxígeno. Empezando por los paneles, son redimensionables y soportan acciones rápidas para una interacción más rápida con el constructor de oxígeno.

Otro beneficio clave es nuestro principio de interacción con un solo clic, con eso en mente estamos trayendo puntos de interrupción, acceso a las opciones avanzadas con un solo clic, y en el lado derecho tienes la opción de cambiar entre la estructura, selectores, hojas de estilo y ajustes con, de nuevo sólo un clic. Tenemos nueve temas predefinidos para que puedas elegir el que mejor se adapte a tus preferencias.

Flujo de trabajo con un solo clic

En el Espacio de Trabajo el flujo de trabajo será de un solo clic. Los puntos de interrupción se han movido a la barra superior para que estén disponibles con un solo clic. Aparte de los puntos de interrupción hay una tira de Advantor con opciones avanzadas de acceso rápido y Panel que cambiará los paneles de la derecha Estructura, Selectores, Hojas de Estilo y Configuración con un solo clic. Para ir más allá, las clases son visibles sin hacer clic en el menú desplegable del selector, y para el modo detallado para acceder a las opciones de mover estilos, eliminar estilos y eliminar clases, sólo tienes que hacer alt+click en cualquiera de los selectores para mostrar las opciones detalladas.

Paneles izquierdo y derecho ajustables

¿Cuántas veces necesitas desplazarte horizontalmente para ver opciones adicionales en el panel de estructura? Cuál es el mejor ancho para los paneles, no más dolor, sólo arrástrelo. El deslizador del panel viene con comportamientos "inteligentes":

  1. Si el panel es grande al hacer doble clic se restablecerá a la anchura por defecto, si el panel está en la anchura por defecto se cerrará al hacer doble click.
  2. Otro pequeño ajuste de UX es que el panel por debajo de 200px es inutilizable, por lo que el deslizador tiene una función magnética que cerrará el panel por debajo del umbral de 200px.

Elige entre nueve themes

Cada persona tiene sus propias preferencias de temas, y Workspace tiene nueve variaciones de temas diferentes. Hay dos temas grises neutros, temas inspirados en los temas de VS Code, o puedes usar el tema clásico si te gusta el esquema de color nativo de Oxygen.

Los temas con 3W en el nombre tienen diferentes colores para los campos clicables y de entrada, y los temas 2W tienen el mismo color. Elige tu favorito y se guardará en el almacenamiento local de tu navegador para que no tengas que cambiarlo cada vez.

Modos del espacio de trabajo - Atajos

Los modos de espacio de trabajo son como los atajos, pero sólo funcionan con una tecla. En lugar de usar modificadores como alt, command, shift, Recoda favorece los atajos de teclado con una sola tecla, donde la mano izquierda del teclado es el punto de acceso y la mano derecha usa el ratón. El espacio de trabajo fomenta el trabajo a dos manos y el mantenimiento de las manos en posiciones naturales.


El objetivo es proporcionar al usuario múltiples formas de hacer lo mismo, de modo que pueda reducir el ratón al teclado y viceversa. ¿Cuál es la diferencia entre los modos y los atajos? Los modos permiten el uso de una sola tecla para múltiples atajos, en lugar de usar modificadores, se cambia el modo.

Herramientas de diseño

¿Qué son las herramientas de diseño?


Las herramientas de diseño son herramientas creadas para potenciar el proceso de diseño, la depuración y la inspección del diseño.
Son herramientas esenciales que todo diseñador/desarrollador quiere tener en su arsenal de herramientas.

Guía de cuadrícula

¿16, 12, 8, 6, 4 o 2 columnas? Elije realmente cualquier número de columnas, en cualquiera de los puntos de ruptura, configura el medianil y el desplazamiento y ya estás listo.
Hecho para trabajar en conjunto con el sistema de rejilla micro CSS.

Modo X

Pon tu diseño bajo el modo X, lo verás en una vista previa en escala de grises y todos los elementos serán delineados.
Esto puede ser muy útil cuando se quiere 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.

Inspector de Estilo

¿Quieres ver todos los estilos aplicados al selector? Sólo tienes que activar el modo Inspector de Estilo que mostrará todo el resumen de CSS del selector en el panel derecho. Esto puede ahorrar mucho tiempo cuando se recorren todos los puntos de ruptura y las opciones para ver los estilos aplicados.

Manejadores de la ventana gráfica

Los manejadores de la ventana gráfica son pequeños ayudantes de respuesta que te ayudarán a ver cómo se verá tu diseño en los dispositivos más populares.
Se colocan en la parte superior del Viewport ruller y al pasar por encima mostrarán qué dispositivos están en ese ancho de pantalla,  al hacer click se ajustará el lienzo para ver el diseño en cierta anchura.

Herramientas para desarrolladores

¿Qué son?


Las herramientas para desarrolladores son herramientas creadas para potenciar al máximo tu flujo de trabajo y cambiar el juego. Son herramientas hechas para usuarios profesionales que trabajan en entornos profesionales como la pantalla múltiple y que utilizan Oxygen todos los días.

Esta es la caja de herramientas más poderosa en su espacio de trabajo y necesita usar Oxygen todos los días para entender la necesidad e importancia de estas herramientas.

Live Server / Servidor en vivo

¿Estás trabajando en una configuración de doble pantalla? Esta es la herramienta que todo desarrollador debe tener en su caja de herramientas. Este modo permitirá la autocarga activada al guardar dentro de Oxygen.

Así que cuando se guardan los cambios y están listos en el frente que se autocargan a instancia del servidor en vivo por lo que no es necesario hacer esto todo el día manualmente.

Live Server ScrollSync

Quieres mejorar tu flujo de trabajo, tienes una configuración de doble monitor y quieres sacarle todo el partido. ScrollSync es una subcaracterística de Workspace Live Server y sincronizará el desplazamiento frontal y la posición de desplazamiento en el lienzo de Oxygen para que siempre tengas en el otro monitor una vista previa realista de la sección de edición, y si te ayudará a utilizar las herramientas de desarrollo porque la sección de trabajo estará siempre en su posición sólo tienes que inspeccionarla y ver lo que está pasando con tu diseño bajo el capó

Linea de Comandos

¿Quieres ver todos los estilos aplicados al selector? Sólo tienes que activar el modo Inspector de Estilo que mostrará todo el resumen de CSS del selector en el panel derecho. Esto puede ahorrarte mucho tiempo cuando pasas por todos los puntos de ruptura y opciones para ver los estilos aplicados.

Añadir  Múltiples clases

Sub característica de la línea de comandos. En la línea de comandos si quieres añadir una clase sólo tienes que escribir .className, y si quieres añadir varias clases a la vez sólo tienes que seguir ese patrón y escribir: .class1.class2.class3.class4
Así que añadir múltiples clases es realmente fácil y el patrón es intuitivo.

Añadir Multiples cosas a Múltiples Elementos

En el espacio de trabajo tenemos el modo de registro (macro) para hacer esto, así que si quieres añadir múltiples clases a los elementos múltiples que escribir tu comando como placa de la caldera. Cuando quieras añadir estas clases a múltiples elementos, activa el modo de registro y haz click en el panel DOM donde estas clases deben ser aplicadas, cuando hayas terminado simplemente desactiva el modo de registro.

¿Esto funciona sólo con las clases?

En realidad no, puedes definir el HTML y las clases como un comando y se ejecutará ese comando como se describe.
Así que cualquier cosa a los múltiples elementos.

Línea de Comandos

1. ¿Cómo iniciar la línea de comandos

Puedes iniciar la línea de comandos de dos maneras:

Pulsando sobre la línea de comandos
Pulse la letra G

2. ¿Como  ejecutar el comando?

Puedes ejecutar los comandos pulsando ESPACIO o ENTER

3. Introducción a la línea de comandos

Antes de usar la línea de comandos debes aprender qué es un comando, un operador de comandos, un elemento de comandos y acciones de comandos.


Y las reglas para esto son:

  1. Todo lo que se ejecuta son comandos, el comando puede tener uno o más comandos-acciones
  2. Las acciones de comandos son una parte de las tareas de los comandos, están hechas de operadores de comandos y elementos de comandos.
  3. Los operadores de comandos son signos especiales que definen lo que hace el comando-acción, por ejemplo (. = añadir clase, > = añadir hijo, + = añadir hermano, etc.)
  4. Elemento de comando - viene después del operador de comando y define lo que el operador de comando debe hacer.
  5. Resumen de la regla: comando = uno o más comandos-acción, comando-acción = comando-operador + comando-elemento

4. Lista de operadores de comandos

Ahora que conocemos la terminología básica de la línea de comandos, vamos a ver un resumen de los operadores soportados:

comandosrecoda

5. Mi Primer Comando

En la línea de comandos si quieres añadir una clase sólo tienes que escribir .className.otherClass
Y acabas de hacer tu primer comando.
Así que vamos a conectar lo que hemos aprendido para ver si hemos aprendido la terminología:
  1. Acabamos de escribir nuestro primer comando.
  2. Nuestro comando tiene dos comandos-acciones:
    • ACCIÓN 1: .className que añade la clase con el nombre de className
    • ACCIÓN 1: .otherClass que añade la clase con el nombre de otherClass
  3. Hemos utilizado el operador de comando . (punto) dos veces.
  4. Tenemos dos elementos de comando que definen el nombre de la clase.

6. Añadir elementos Oxygen

Cuando queremos añadir elementos HTML, o elementos Oxygen necesitamos usar uno de los operadores de comando >, +, ^ seguido por el comando-elemento que define el elemento que queremos añadir.

Así que necesitas entender estas simples reglas:

  1. Todo elemento que no esté en la tabla será DIV con etiqueta personalizada.
  2. Los elementos no válidos serán también elementos DIV con etiqueta personalizada.
  3. Los elementos definidos en la tabla de abajo añadirán los elementos Oxygen mostrados en la tabla.
elementoscomandos

7. Mi segundo comando

Bien, ahora que sabemos lo básico escribamos nuestro segundo comando y veamos las pequeñas cosas avanzadas que podemos hacer >article.card>h2.card__heading+p.card__text. 
Este es un ejemplo de cómo podemos crear el esqueleto del artículo desde la línea de comandos.
Así que nuestro contenedor de artículos tiene la clase común .card y tiene dos elementos (encabezado y texto) dentro.

Lo que hizo nuestro comando:
  1. Añadió el div con la etiqueta personalizada del artículo.
  2. Añadió la clase card al div.
  3. Añadido el elemento heading con la etiqueta personalizada h2 dentro del div.
  4. Añadido la clase card_heading al encabezado.
  5. Añadido el elemento de texto dentro de div.
  6. Añadida la clase card__text al elemento text
Repasemos la terminología
  1. Acabamos de escribir nuestro segundo comando.
  2. Nuestro comando tiene seis comandos-acciones:
    • ACCIÓN 1: >article que añade DIV con la etiqueta personalizada del artículo.
    • ACCIÓN 2: .card que añade una clase al artículo con el nombre de la tarjeta.
    • ACCIÓN 3: >h2 que añade el elemento heading con la etiqueta personalizada h2.
    • ACCIÓN 4: .card__heading que añade una clase con el nombre card_heading.
    • ACCIÓN 5: +p que añade un elemento de texto como hermano del encabezamiento.
    • ACCIÓN 6: .card__text que añade la clase con el nombre card__text.
  3. Hemos utilizado tres operadores de comando (., >, y +).
  4. Tenemos seis elementos comando, tres para definir clases, y tres para elementos Oxygen y etiquetas personalizadas.
databasefile-emptyrocketthumbs-upchevron-downlayers