Oxyprops - En el editor de Oxygen - Oxygenados La comunidad
Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
Menu
post oxygen builder
img-4

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
img-6
img-7
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
  • img-8
    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.
    img-9
    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.
    img-10
    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.
    img-11
    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.
    img-12
    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.
    img-13
    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.
    img-14
    img-15
    img-16
    img-17
    Enlaces a mas Información
    Otros sitios y Grupos oficiales
    Documentación
    Documentación Oficial
    Feedback
    Feedback donde aportar ideas y bugs.
    Preview
    Un vistazo rápido a todas las opciones .
    Facebook
    Página Ofical en Facebook.
    Changelog
    Evolución del desarrollo.
    Discord
    Grupo de Discord.
    Twitter
    Página de twitter
    0 0 votos
    Puntuación
    Suscribir
    Notificar de
    guest
    0 Comentarios
    Viejos
    Nuevos Más votados
    Comentarios en línea
    Ver todos los comentarios
    img-20
    WpGridBuilder Addons

    Los addons de Wpgridbuilder permiten ampliar las posibilidades del plugin y dar un paso más en función de tus necesidades.

    Leer más
    img-21
    Bitform Condicionales

    En BitForms es posible obtener diferentes resultados de registro y/o respuesta en función de lo que un visitante o usuario haya introducido en un campo del formulario creado con Bitforms, para ello disponemos de las lógicas condicionales.

    Leer más
    img-22
    ACPT: Advanced Custom Post Types

    ACPT es un plugin de Custom Post Types (Campos Personalizados) para crear nuevos tipos de publicaciones y metadatos sin tocar una cadena de código.
    Tambiénpermite crear y gestionar taxonomías y API personalizadas.
     ACPT lo hace con una interfaz intuitiva y un creador visual. Incluso si solo tienes una comprensión básica de cómo funcionan los tipos de publicaciones personalizadas, ACPT es fácil de usar, y con una amplia documentación.

    Leer más