Imaginas poder realizar cualquier tipo de cambio, como agregar, modificar o eliminar el contenido e imágenes directamente desde cualquier página en un sitio sin necesidad de iniciar sesión en WordPress o cualquier otro sistema de administración. Actualmente ya es posible gracias a Barley.

¿Qué es Barley?

Barley  comenzó como un producto offshot de Plain, una empresa fundada por Colin Devroe, Jeff Johns y Kyle Ruane; la idea era permitir la edición en línea a través de cualquier sitio web.

Devroe dice que la inspiración para crear Barley surgió cuando él y Ruane se dieron cuenta de que un vendedor fue capaz de hacer el cambio en su sitio sin necesidad de utilizar una forma definida con un editor WYSIWYG. El título, las fotos, el cuerpo del texto, y cualquier otra cosa podían ser editados con un solo toque y además funciona en cualquier plataforma (PC, Smartphone y tableta).

barleyEditor

Estructura

La plantilla de Barley se creó utilizando sólo HTML, JS y CSS como normalmente se desarrolla para trabajar en el navegador. La estructura es la siguiente:

– /styles
-/javascripts
-/images
– index.html
– about.html
– blog.html
– post.html
– favicon.ico

Frameworks

Puedes sentirte libre de usar o no un framework para tus plantillas, ya que Barley no limita a nadie con los Frameworks  que te gustaría utilizar.

Editando con Barley

Vamos a ver un ejemplo de cómo pueden editar en tu plantilla, ya que puedes elegir que parte editar y que parte no. Barley lee atributos HTML en todos los elementos para decidir dos cosas principales:

1) ¿Es el elemento capaz de ser editado?

2) ¿Qué herramientas puede utilizar el autor para editar esos elementos?

Aquí está el código HTML que utilizamos para determinar que muestra un ejemplo de etiquetas H1.

h1 data-barley="main_title" data-barley-editor="mini"

Vemos que Barley está mostrando que la etiqueta H1 en esta página puede ser editable por el autor utilizando la propiedad data-barley-editor y el valor mini. El valor main_title en el atributo se utiliza para registrar los cambios a esa etiqueta para un dominio específico, es decir, todas las etiquetas capaces de ser editadas en la plantilla deben tener un ID único.

Tipos de edición en Barley

Ya vimos un tipo de edición que podemos utilizar con Barley pero hay varios más que se encuentran disponibles actualmente; próximamente se espera ampliar la lista debido a necesidades que clientes y diseñadores de plantillas requieren.

  • mini – Sin herramientas en absoluto. El texto se puede cambiar.
  • simple – El texto se puede cambiar. El énfasis se puede agregar usando negritas y cursivas al texto.
  • plus – Además de lo anterior se puede agregar enlaces, texto de alineación (centro, izquierda, derecha) y listas.
  • advanced – Además… Subir una imagen.
  • blog – Todas las herramientas anteriores se cargan.

Y para que tengas una idea más clara de cómo funciona Barley, te dejo 2 teaser’s:

Imagen de previsualización de YouTube

Imagen de previsualización de YouTube

Para más información sobre Barley visita la página oficial, así como para obtener más datos sobre la documentación.

Cecy Martínez

Cecy Martínez

Jefa de contenido y editora en HTML5Fácil, NinjaCodeTV, Desveloperstv y Co funder de WaveCode.LA

Un pensamiento en “Modifica tu sitio web con Barley mediante el Editor WYSIWYG.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Cerrar