Mavo: Aplicaciones web sin programación, solo con HTML / CSS

Mavo: Aplicaciones web sin programación, solo con HTML / CSS

Mavo le permite crear aplicaciones web para almacenar y editar datos sin requerir conocimientos de programación. Es una expansión para HTML y muy fácil de aprender.

Lea Verou ha vuelto a pensar fuera de la caja

Los diseñadores y desarrolladores que no viven bajo una roca conocen a Lea Verou. En el pasado, Lea se ha hecho un nombre principalmente como experta en CSS y como oradora popular.

También llamó la atención de la gente debido a sus diversos proyectos paralelos, uno de los cuales es una lista de herramientas que permite a los diseñadores usar JavaScript sin tener que usarlo. Esta descripción general llamada Markapp.io no fue percibido exclusivamente de forma positiva. Los gurús de JavaScript incondicionales sintieron que su dominio estaba siendo amenazado.

En este momento, nadie sabía que Lea Verou había estado involucrada en un proyecto en el Laboratorio de Ciencias de la Computación del MIT (MIT CSAIL) mucho antes que Markapp.io, que tenía el mismo objetivo de usar JavaScript sin tener que escribirlo.

Mavo le permite crear aplicaciones web sin programación

Esta semana, Lea reveló oficialmente el proyecto llamado Mavo. Ella y el equipo del MIT llevan dos años trabajando en ello. El resultado es una solución impresionante para todas las exclusivas de HTML entre los diseñadores.

Para hacerse una idea de las opciones del proyecto, recomiendo una visita al sitio de demostración. Aquí, se sorprenderá, ya que Mavo no solo le permite editar su página de inicio y hacerla editable a través de la interfaz. Mavo permite mucho más.

De esta manera, podría crear rápidamente su aplicación de tareas pendientes o crear una solución para la facturación. Mavo también te permite calcular otras cosas, como el desarrollo de interés, por ejemplo. También puede crear aplicaciones gráficas, como un editor visual para trazados SVG o un selector de color. Por supuesto, todavía necesitas tu fantasía. Simplemente no se ve frenado por sus limitadas habilidades de codificación.

Aparentemente, Mavo no llega sin ningún esfuerzo. Aún tienes que aprenderlo. Sin embargo, ese esfuerzo es muy limitado, ya que Lea y su equipo han intentado que el sistema sea lo más legible posible. Desde el principio, Mavo fue diseñado para ser expandible. Existen un par de complementos ya, uno de ellos le permite guardar datos en Google Firebase. El TinyMCE también está disponible como complemento.

Primeros pasos con Mavo

Echemos un vistazo a cómo funciona la sistemática de Mavo. Una vez que haya entendido eso, los siguientes pasos son realmente fáciles de seguir.

Mavo consta de dos archivos, un JavaScript y una hoja de estilo. Como estamos acostumbrados en JS, estos archivos deben integrarse en su documento. Una vez que están integrados, la funcionalidad de Mavo aún no está disponible. Para cambiar eso, defina el parámetro mv-app. Como un nombre mv-app recibe una etiqueta clara que debe representar su aplicación. La existencia de dicho atributo le permite utilizar los demás atributos de Mavo. En si mismo, mv-app no hace nada más.

En el siguiente paso, el atributo mv-storage entra en juego. Lo usamos para definir dónde se almacenarán los datos de sus aplicaciones web. Esto podría ser local, pero una URL respectiva también es una opción.

En Mavo, los elementos que se guardan se denominan property. Si asigna este atributo a elementos HTML, se guardará el contenido de dicho elemento. El atributo property también funciona fuera de los formularios, asegurándose de que los elementos respectivos sean editables.

Ahora, para crear una base de datos a partir de la entrada en el property-campos, cada uno property tiene la adición mv-multiple asignado a él. Esto asegura que se puedan agregar conjuntos de datos. Sin esto, ni siquiera una aplicación simple, como un administrador de tareas, sería posible. El atributo property también se puede utilizar para agrupar varios elementos para formar un conjunto de datos.

Un ejemplo de código simple podría verse así:

<div mv-app="commentform" mv-storage="local">
	<label>
		Email:
		<input type="email" property="email" value="[email protected]" />
	</label>
	<label>
		Message:
		<textarea property="message">
			Edit the form and notice how the values persist after you refresh!
		</textarea>
	</label>
</div>

Se podría guardar una lista como esta:

Hobbies:
<ul>
	<li property="hobby" mv-multiple>Eating</li>
</ul>

Una vez que haya jugado un poco con Mavo, notará lo simple que es realmente trabajar con las expansiones HTML en la práctica. Antes de que alguien comente preguntando por qué no están trabajando con atributos de datos, quiero vincularlo a La respuesta de lea a esta pregunta exacta.

Conclusión: un paso en la dirección correcta

Mavo hace que la creación de potentes aplicaciones web sea mucho más fácil y permite que aquellos que solo tienen experiencia en HTML logren soluciones que les habrían requerido ir a una biblioteca más o menos compleja de otra manera. Por supuesto, en esencia, Mavo también es una solución de JavaScript. Sin embargo, nos mantiene lo más lejos posible de las partes internas del código, creando la ilusión perfecta de programación de aplicaciones sin programación.

Fuentes para continuar leyendo:

  • Presentamos Mavo: ¡Cree aplicaciones web completamente escribiendo HTML! | Lea Verou
  • Presentamos Mavo: ¡Cree aplicaciones web completamente escribiendo HTML! | Revista Smashing
  • Una forma nueva y accesible de crear aplicaciones web | mavo.io

#Mavo #Aplicaciones #web #sin #programación #solo #con #HTML #CSS

Publicaciones Similares

Deja una respuesta

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