Recoda

post oxygen builder

Oxyprops - En el editor de Oxygen

Listado Plugins

No dejamos de quedar asombrados con las características y funcionalidades que ofrece Oxyprops y a cada vídeo que vemos de su canal de Youtube mas asombrados nos quedamos.

En esta entrada vamos a mostrar con imágnes y algún texto algunas de las funcionalidades de este framework gráfico cuando se está diseñando una página.
Todas las acciones de edición se muestran haciendo click en las casillas de entrada de las unidades de edición del elemento correspondiente con alguna excepción.

En el Panel de Estructura

Cuando situamos el puntero del mouse en la zona del panel de estructura, si hacemos un click con el botón derecho del ratón nos saldrá un panel donde podemos escoger que es lo que se insertará en el lienzo de edición.
Vemos los distintos elementos que podemos insertar directamente desde el panle de estructura, esta parte aun está en desarrollo, pero aun así resulta muy útil ya que, por ejemplo puedes meter directamente un H3 sin tener que pasar por para seleccionar el tag en el panel de elementos de la derecha de Oxygen; meter un texto small, un texto bold.... etc.
Está previsto que en un futuro próximo en elementos, como por ejemplo puede ser un input, automaticamente introduca los atributos necesarios.
El elemento icono es el que se ha introducido por este método y como vemos el nombre va precido de "<div>" al igual que todos los elementos llevarán el prefijo adecuado, en el caso de ser una sección sería <section>, un boton <button> , un enlace <a> ... etc

Elementos de Oxyprops

Oxyprops de momento solo cuenta con tres elementos que se pueden encontrar en las sección "OxyProps" en el panel de la izquierda de Oxygen (prometen añadir mas en proximamente).

Light/Dark Toggle - Es un botón que se añadirá a la web y que permitirá alternar entre el diseño Dark y el Light en el front end.

Light/Dark Custom - Lo mismo que lo anterior pero en este caso es editable, puedes seleccionar los iconos correspondientes, sus colores y su diseño.

Scheme Switcher - Un botón que permite intercambiar entre los schemes de colores, este es customizable en tamaño, color y color hover

Rel de los enlaces

En el campo de texto de entrada de datos Rel de los enlaces tambien tenemos disponibles las opciones que Oxyprops nos da y todas ellas se aprecian en la imágen. Podemos comprobar que este plugin no se limita solo a CSS si no que también en el HTML facilita el trabajo.

Tamaño de fuentes

Fuentes con fluid sizes, proporcionales para sub-headins, tamaños fijos, tamaños proporcionales y claves CSS, todo eso es lo que tendremos a disposición a un click del ratón al invocar la acción en el campo Font Size.

Contenido dummy para texto

Para el cuadro de introducción de textos Oxyprops también nos echa una mano en el caso de querer no seguir en el siseño sin perder tiempo en la introducción de texto, para ello con hacer un click derecho encima del cuadro nos ofrece varias opciones para la entrada de texto Lorem Ipsum y con las opciones de Palabras, Oraciones o Párrafos, del 1 al 9, lo que viene a ser de 1 a 9 palabras, oraciones o frases.

Nota.- Una opción similar ha sido implantada en la versión 4.0 de Swiss Knife con la que se pueden insertar de una a cinco frases.

Fuentes Principales

Para el cuadro de introducción de textos Oxyprops también nos echa una mano en el caso de querer no seguir en el siseño sin perder tiempo en la introducción de texto, para ello con hacer un click derecho encima del cuadro nos ofrece varias opciones para la entrada de texto Lorem Ipsum y con las opciones de Palabras, Oraciones o Párrafos, del 1 al 9, lo que viene a ser de 1 a 9 palabras, oraciones o frases.

Nota.- Una opción similar ha sido implantada en la versión 4.0 de Swiss Knife con la que se pueden insertar de una a cinco frases.

Colores

Con los colores también se ha hecho un buen trabajo, pone a disposicón del usuario una generosa variedad de colores pero siguiendo una pauta lógica en sus variaciones, tener en cuenta que es el usuario el que elige los colores primarios y apartir de esos colores es el plugin el que hace las variaciones.
Presenta como principal el llamado Brand o color de la marca, Acent que sería el color secundario o de apoyo y los colores para los enlaces, todos ellos con su variación para el hover y para los enlaces uno mas que corresponde al estado de visitado.
Ocho variaciones neutrales y diez variaciones de mas claro a mas oscuro para cada elemento; además también facilita el manejo de la opacidad proporcionando once selectores para ello.
Un botón de borrado o eliminado, que lo que hace es borrar el contenido del cuadro de color de la barra de herramientas, el que haya un botón por cada fila se nos antoja excesivo pues todos los botones hacen exactamente lo mismo y con que hubiese uno solo sería suficiente.

Boton Dark/Light para el editor

Ya se ha mencionado la presencia de los elementos Dark Mode para el front end, además este plugin añade otro botón mas en el editor el cual permite realizar la edición en cualquiera de los dos modos.

En la imagen central se muestra en el modo Dark y en la última de esta sección se muestra en modo Light. En este último el color del canvas dependerá de la selección que previamente se haya hecho para el canvas.

El botón del que hablamos es el señalado con la flecha en la primera imagen y cuyo icono variará dependiendo del modo en el que se esté trabajando.

Y la imagen animada muestra el funcionamiento del botón scheme switch en el front end.

Enlaces a mas Información

Otros sitios y Grupos oficiales

Documentación Oficial

Feedback donde aportar ideas y bugs.

Un vistazo rápido a todas las opciones .

Página Ofical en Facebook.

Evolución del desarrollo.

Grupo de Discord.

Página de twitter

Posts en Oxygenados

Post de Presentación
Post de Configuración

0 0 votos

Puntuación

Suscribir

0 Comentarios

Viejos

Nuevos Más votados

Comentarios en línea

Ver todos los comentarios

Otros Plugins

Es el que mas tiempo lleva en funcionamiento y también es el mas barato al ser totalmente gratuito.

¿Qué es Numbify?
Numbify es una herramienta para Oxygen que sirve para clonar, (por no decir copiar), páginas web.
Su funcionamiento se basa en la copia de elementos del frontend, para pegarlos en la interface de edición de Oxygen, estos elementos pueden ser, por lo menos hasta el momento de redactar esta review, cualquier elemento del DOM con la limitación jerárquica máxima de una sección; esto quiere decir que no podrás copiar de una tacada todo el body.

RabbitLoader - Un conejito muy rápido

Pensaste que instalar un montón de complementos diferentes mejoraría el tiempo de carga de tu sitio web, pero en realidad lo está haciendo aún más lento. (La paciencia no es una virtud de Internet). Pero necesitas de complementos que puedan comprimir contenido, cargar imágenes de forma diferida y almacenar en caché todo para mantener una experiencia de usuario optimizada para Google.
Rabbit Loader una solución que pudiera reemplazar todos esos otros complementos para que su sitio de Wordpress se cargue más rápido y ocupe un lugar más alto en los SERP.