mavo   23

SVG <path> builder
Lea Verou a mavo app to edit svgpath (molto utile)
svg  mavo  leaverou 
10 days ago by microspino
Web-Apps nur mit HTML erstellen: Mavo in der Kurzvorstellung | t3n
Javascript Framework: Mavo wurde hauptsächlich von Lea Verou am MIT Computer Science and Artificial Intelligence Laboratory entwickelt und ermöglicht es auf einfache Weise, kleine und auch etwas größere Web-Apps zu erstellen – dafür muss kein Programmier-Code geschrieben und keine Server verwaltet werden, wie es im Vorstellungs-Artikel bei Smashing Magazine heißt. Mavo ist Open Source und der Code liegt auf Github.

Aktives Javascript ist nicht nur für die Verwaltung sondern auch für die Anzeige der aktuellen Daten Voraussetzung.
Mavo: Ein Schnelleinstieg
Benötigte Ressourcen einbinden

Mavo ist quasi eine Erweiterung zu HTML. Um eine HTML-Seite darauf vorzubereiten, dass sie sich per Mavo verwalten lässt, müssen lediglich ein Stylesheet und eine Javascript-Datei eingebunden werden:

<link rel="stylesheet" href="https://get.mavo.io/mavo.css"/>
<script src="https://get.mavo.io/mavo.js"></script>

Mavo für eine HTML-Struktur aktivieren

Danach könnt ihr Mavo für eine HTML-Struktur aktivieren, indem ihr dem Element das mv-app-Attribut mitgebt (falls das Element bereits ein id-Attribut hat, könnt ihr den Wert für mv-app auch weglassen):

<div mv-app="mavoTest">
Meine erste Mavo-App …
</div>

Es kann zwar noch nichts bearbeitet werden, aber Mavo ist schon mal initialisiert. (Screenshot: Codepen)
Speicherung der Daten regeln

Um einen Ort für die Speicherung der Daten zu bestimmen, gibt es das mv-storage-Attribut. Standardmäßig unterstützt werden die Speicherung im localStorage des Browsers, auf Github, in der Dropbox oder einem HTML-Element.

Zur Speicherung bei Github kann der Code wie folgt aussehen:

<div
mv-app="mavoTest"
mv-storage="https://github.com/FlorianBrinkmann/mavo-test">
Meine erste Mavo-App …
</div>

Mavo zeigt dann einen Login-Link an, um sich bei Github anzumelden. User, die Commit-Rechte in dem Repo haben, können direkt Änderungen vornehmen – bei Änderungen von anderen Github-Nutzern wird ein Pull-Request erstellt.
Die zu speichernden Daten festlegen

Um zu regeln, welche Daten gespeichert werden sollen, gibt es das property-Attribut. Dessen Wert sollte das Element beschreiben, ähnlich wie ein id- oder class-Attribut. Wenn das Attribut bei einem Element genutzt wird, das kein Formular ist, wird es durch Mavo bearbeitbar gemacht und Mavo erzeugt Buttons, mit denen zwischen Bearbeitungs- und Vorschau-Ansicht gewechselt werden kann.
html5  mdev  webliteracy  vhsmooc:tools  mavo 
may 2017 by MicrowebOrg
Mavo: A new, approachable way to create Web applications
A new, approachable way to create Web applications
Mavo helps you turn your static HTML into reactive web applications without a single line of programming code and no server backend.
Developed at MIT CSAIL and led by Lea Verou.
webdev  mavo 
may 2017 by vegarev

related tags

1920s  20th.century  angular  app  application  apps  art  avant-garde  avantgarde  cms  collective  connections  css  dada  delicious-export  design  facsimile  frameworks  g  german  germany  history  html  html5  international  japan  japanese  journals  js  kurt.schwitters  leaverou  mdev  merz  periodicals  poetry  svg  tomoyoshi.murayama  typography  verou  vhsmooc:tools  web  webapp  webdev  webliteracy  wiki  wikipedia  wys  wysiwyg 

Copy this bookmark:



description:


tags: