Numbify - Oxygenados La comunidad
Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
Menu
post oxygen builder
img-4

Numbify

Listado Plugins
img-6

¿Qué hace Nimbufy?
Nimbufy es una extensión de Chrome que te permite convertir el html de cualquier página en formato editable compatible con Oxygen.
En definidas cuentas 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, siendo esto en el caso de querer clonar una página entera tendrás que ir sección por sección; claro está que puedes copiar elementos internos de las secciones, siempre de uno en uno, desde divs, párrafos, textos, Code-Blocks, SVGs, imágenes, no la imagen en sí no la etiqueta img y el href a esa imagen.

Debemos distinguir dos etapas diferenciadas en el proceso:

  1. Proceso de copia en la pestaña de origen.
    Que se realiza en la ventana o pestaña donde se encuentra el original que se desea llevar a una nueva página.
  2. Proceso de pegado o inserción.
    — El pegado del código en el editor de Oxygen.

El proceso de funcionamiento se puede observar en los vídeos de abajo, pero vamos a detallar algunos conceptos. 

Previamente hay que tener instalada la extensión para Chrome y que también es operacional con Edge y se puede descargar desde este enlace. Con la extensión instalada hay que tener preparadas las ventanas o pestañas que contienen el original y el constructor de Oxygen.
Haciendo click en el icono de la extensión se hace la selección de la parte que va a copiar, al pasar el puntero del mouse por encima los diversos elementos se irán enmarcando con un borde de color verde claro ( Imagen 1 ) indicando la selección que sería copiada en el caso de hacer click dentro de ese marco. Si se hace click el color del marco pasará a ser de color violeta ( Imagen 2) y al mismo tiempo aparecerá un botón en la esquina superior izquierda de la venta ( Imagen 3 ).

Pasando el puntero por encima. Imagen 1
img-7
Elemento ya seleccionado. Imagen 2
img-8
Botón de acción activado. Imagen 3
img-9



Haciendo ahora click en el botón, Take Snapshot la copia será tomada, apareciendo a los pocos segundos un mensaje con indicando que se ha tomado la copia, el ancho de la selección y la cantidad de elementos tomados.

img-10

La primera parte del proceso ya estaría lista, con lo ahora toca ir a la pestaña/ventana del navegador y volviendo a pulsar en el icono de la extensión de Nimbufy se nos abrirá una pequeña ventana con la información que muestra la siguiente imagen y pasamos a detallar brevemente.

  • Snapshot, muestra el tamaño de pantalla en la captura.
  • Breakopoint, los diferentes tamaños y con unos selectores en los que se puede elegir a qué dispositivo será asignado(ver imagen).
  • Classes Factor, supuestamente es para controlar el número de clases en las que va a profundizar. Cuanto mayor sea el número menos cantidad de clases copiadas.
  • Kill Divception, en fase experimental, para reducir en lo posible el número de DIVs. Las veces que lo hemos probado ha dado buenos resultados.
  • Show data estimate, muestra en pantalla una ventana de información sobre los kB que se consumirán en el proceso antes de realizar la importación. 
  • En pantalla verde, no mostrará nada antes de la primera importación; después mostrará los datos consumidos y la cantidad restante que quedan para consumir de la cuenta y otros datos técnicos. 

Opciones de asignación a dispositivos

img-11

Mostrando la pantalla informativa de una sola selección de pantalla.

img-12

Esta muestra la información cuando se han seleccionado, en este caso, tres tamaños diferentes de pantalla.

img-13
Consideraciones
  • Hay que tener en cuenta que durante todo el proceso no se debe redimensionar ninguna de las ventanas involucradas porque afecta en los resultados.
  • Solamente copia HTML y CSS, no JavaScript.
  • Las imágenes las toma de la web original, no son copiadas a la nueva web, exactamente igual que cuando importas una plantilla de Oxygen.
  • Para diferentes tamaños de pantalla, responsive, tienes dos opciones, hacer el proceso de copia para cada tamaño o bien trabajar con Oxygen este proceso partiendo de la primera copia.
  • Según nuestra experiencia, hay que ajustar Grid de los elementos que dependen de esta propiedad, ya que este no es el punto fuerte de Nimbufy. 
  • El proceso de aprendizaje no es muy costoso, con unas pocas operaciones se toma la base principal para conseguir unos resultados más que óptimos.
  • Es realmente llamativo los pocos kb que se ven involucrados en cada proceso, en nuestras pruebas no pasamos de los 60 kB en la copia de un bloque. 
Conclusión

Que nadie se vaya a creer que con esta herramienta obtendrá una réplica exacta de otra web y que con ello tendrá todo el trabajo realizado, aunque si, una buena parte de ello si lo será. A nuestro entender, los puntos débiles son el carente manejo de la propiedad grid y el exceso de clases que va lleva consigo la importación, todas las clases importadas son nombradas con un patrón, empezando el nombre por cls seguido de un número correlativo: cls1, cls2, cls3, cls....., y todas son introducidas a modo de selectores.
Se echa de menos que no estén organizados por carpetas  para organizarlos, por ejemplo, por su orden de importación, de esa manera sería fácil la localización y eliminado en el caso del eliminado de los componentes pertenecientes a esa importación. 

Además de que cada vez que se hace una importación en la misma ventana aparece el dato de consumo, en el panel de cliente se puede ver el remanente disponible de kB en la cuenta, un panel sencillo sin aspavientos(ver imagen). 
En el panel de las cuentas LTD no existe tal contador.

img-14

Nimbufy ahora mismo ofrece cuatro variedades de prepago y una de suscripción anual o mensual. Realmente la cantidad que ofrece en su plan mas bajo 10$ / 2.000kB   ya dan para una buena tacada de importaciones; por ejemplo, la página de inicio de WpCodebox supuso un consumo de unos 350kb y la de Recoda una cantidad muy similar.

La versión Nimbufy 3 viene con una oferta, temporal dice el desarrollador, LTD por 199 dólares en la que no hay límite de consumo y este no es monitorizado, la ventana de verificación en el proceso de importación es siempre la que arriba se ve en la imagen n.º 2 cambiando el título, que pone Nimbufy 3 (logicamente), además hay que instalar un plugin que se descarga el panel de cliente y, a día de la redacción de esta entrada, no está disponible en el repositorio oficial de WordPress. La extensión puedes instalarla en cuantas máquinas necesites, pero solo podrás trabajar con una página registrada al mismo tiempo, pudiendo desactivar la licencia y activarla en otra web en cualquier momento.

Sobre el desarrollador:
  Gagan S Goray

En su currículum figuran empresas como:

  • Soffly, trabajando en el desarrollo de Oxygen
  • Wpmudev, trabajando en el desarrollador.
  • Como emprendedor y cofundador

  • BetterWp
  • DailyWp
  • Wpmudev
  • OxyExtras
  • OxyPlugins
  • DailyTabs
  • Como siempre esperamos tus comentarios y por supuesto si tienes alguna duda o necesitas ayuda puedes contactar por nuestro grupo de Telegram o dejando un comentario.

    Nos vemos en la próxima. 👌

    5 3 votos
    Puntuación
    Suscribir
    Notificar de
    guest
    0 Comentarios
    Viejos
    Nuevos Más votados
    Comentarios en línea
    Ver todos los comentarios
    img-17
    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-18
    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-19
    Code Snippets

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

    Leer más