Coast CMS

BETA

Mit Coast CMS werden statische HTML5-Websites
in kürzester Zeit editierbar.

Demo Download
zuletzt aktualisiert am: 24. Februar 2016  ·  Changelog

NEU: SimpleStaticSiteSearch - eine einfache Suchmaschine für statische HTML5-Websites

Changelog

24.02.2016

  • Bugfix: Die "default_timezone" wird jetzt vom CMS festgelegt. Die nicht festgelegte "default_timezone" hatte bei einigen Servern zu Fehlermeldungen geführt.

26.10.2015

  • Neues Feature: Image-Links
    Links auf editierbaren Bildern können jetzt ebenfalls editiert werden. (Demo) Hierzu wird folgendes neues Snippet verwendet: ‘data="editable_image_link"’
    z.B.: <a href="test.html" data="editable_image_link"><img src="img/01.jpg" data="editable_image"></a>
    z.Zt. muss das Link-Ziel noch manuell angegeben werden
  • Außerdem neu mit diesem Update:

  • ein Hinweis beim Login, das CoastCMS am besten mit Google Chrome funktioniert
  • optimiertes Handling der PHP-Hinweise (“notices”)

07.10.2015

  • Update des TinyMCE
  • Verbessertes Error-Management: Wenn 'data="editable"' falsch platziert ist, wird jetzt eine Fehlermeldung angezeigt.

05.10.2015

  • verbessertes BackUp-Handling: Es wird jetzt vor jedem Speichervorgang ein BackUp erstellt.
  • Der Zeitraum nach dem alte BackUps gelöscht werden sollen, kann jetzt in der settings.php eingestellt werden.
  • Font Awesome wird jetzt nicht mehr vom CDN-Server geladen. (Der Server hat nach Reloads teilweise nur verzögert reagiert.)

26.09.2015

  • Bugfix: Bilder mit der Dateieindung “.JPG” wurden versehentlich in “.JP” umbenannt.
  • verbesserter File-Upload: Jetzt können 10 Dateien gleichzeitig hochgeladen werden.

23.09.2015

  • Bugfix / Optimierung der Dateilisten (Uploads, Backups) und bei der Darstellung der Toolbar (css)

04.09.2015

  • Bugfix / Optimierung des Bild-Uploads
    verlinkte Bilder sollten nun auch per Klick austauschbar sein

25.06.2015

  • Bugfix / verbessertes Errorhandling
    Wenn das Code-Snippet 'data="editable"' nicht richtig eingesetzt wurde, konnte die Seite nicht gespeichert werden. Dieser Fehler sollte jetzt nicht mehr auftreten.

21.06.2015

  • neues Feature: Wartungsmodus
    In der "settings.php" kann jetzt der Wartungsmodus aktiviert werden. Wenn der Wartungsmodus aktiviert ist, kann die Seite nicht bearbeitet werden. (z.B. wenn die HTML-Files lokal bearbeitet werden und anschließend neu hochgeladen werden.)

20.06.2015

  • neues Sicherheitsfeature: Loginsperre
    Wenn beim Login drei Mal ein falsches Passwort eingegeben wird, wird das CMS für 10 Minuten gesperrt. Nach 15 Fehleingaben wird der Login komplett gesperrt. Eine Aufhebung der Sperre ist dann nur noch möglich, wenn der Zähler in der Datei "loginhistory.php" manuell zurück gesetzt wird.

21.03.2015

  • Sicherheitsupdate
    Bislang konnten unter gewissen Umständen auch Dateien außerhalb des Stammverzeichnisses editiert werden - das ist jetzt nicht mehr möglich.

28.01.2015

  • Verbesserung der Bildverarbeitung: jpgs werden in der richtigen Ausrichtung (lt. Exif) hochgeladen
  • Bugfix: jpgs können jetzt auch hochgeladen werden, wenn die Datei-Erweiterung ".jpeg" lautet

26.01.2015

  • diverse Bugfixes & Verbesserungen

19.01.2015

  • kleinere Optimierungen (core.php, uploadfile.php, uploadimage.php)

12.01.2015

  • Bugfix: Unter Windows konnte kein €-Zeichen eingegeben werden - jetzt geht es wieder.

14.12.2014

  • verbesserte Darstellung beim drag&drop der Inhaltselemente
  • Während der Bearbeitung bekommt der body jetzt die Klasse "editing". Das kann sehr hilfreich sein, z.B. bei der Bearbeitung von "masonry"-Layouts, oder Inhalten, die erst mit Javascript eingeblendet werden (Accordeons, Tabs...).

19.10.2014

  • Update der settings.php
  • im TinyMCE können jetzt auch iFrames (z.B. YouTube) verwendet werden

22.09.2014

  • Bugfix im css

21.09.2014

  • mit 'data-width="600"' können Bilder jetzt, unabhängig von der dargestellten Größe, auf eine festgelegte Breite skaliert werden

20.09.2014

  • PDFs werden jetzt in JPGs konvertiert, wenn Sie via 'img data="editable_image"' hochgeladen werden

25.08.2014

  • verbesserter Upload-Manager - Uploads können jetzt im BackEnd gelöscht werden

18.08.2014

  • verbessertes Errorhandling bei fehlerhaften Bilduploads

27.07.2014

  • Neu: Shortcuts!
  • cmd + e » Seite editieren, cmd + s » speichern, cmd + i » HTML-Code bearbeiten

23.07.2014

  • Bugfixes

22.07.2014

  • neues Feature: JPGs werden jetzt client-seitig neu berechnet!
    Beispiel: Ein 3000 x 2000 px großes JPG mit 15MB wird bereits im Browser auf 600 x 400 px und 200kb reduziert dann hochgeladen. Damit sind server-seitige Dateigrößenbegrenzungen (bei JPGs) nahezu passé.

08.07.2014

  • neues Feature: HTML-Editor (ist standardmäßig deaktiviert und kann in der "settings.php" aktiviert werden)

01.07.2014

  • Coast CMS hat jetzt ein eigenes TinyMCE-Skin - minimalistisch & flat

14.06.2014

  • Performance-Verbesserung
  • wiederkehrende Inhaltsbereiche können jetzt per drag & drop verschoben werden! Yeah! :)

31.05.2014

  • Verbesserung der "wiederkehrenden Inhaltsbereiche"
  • Position des neuen Elements kann jetzt im Backend frei gewählt werden

15.05.2014

  • Bugfix beim Wiederherstellen des BackUps im Backend
  • Bugfix bei der Berechnung des Thumbnails bei "data-type='thumb_and_big_image'"

13.05.2014

  • neues Feature im TinyMCE: Link einfügen » interne Seite oder Datei im Uploads-Ordner
  • TinyMCE-Options sind jetzt in der settings.php (so werden sie beim Update nicht überschrieben)

10.05.2014

  • neuer Button im TinyMCE: Inhalte aus Word einfügen
  • BackUps können jetzt über das Backend wiederhergestellt werden

26.04.2014

  • neuer Button im TinyMCE: Horizontale Linie

20.04.2014

  • neues Feature im TinyMCE: Link einfügen » interne Seite

11.04.2014

  • neue Funktion: Uploads

02.04.2014

  • Titles sind jetzt editierbar

28.03.2014

  • Buttons haben jetzt Tooltips

16.03.2014

  • neue Funktionen: "Seite löschen" & "Seite duplizieren"

26.02.2014

  • neue Funktionen: "Inhaltsbereiche hinzufügen & entfernen"

12.02.2014

  • Launch

Inline Editing

Kein unübersichtliches Administrations­backend. Inhalte können direkt im Website-Layout bearbeitet werden.

Keine Datenbank

Coast CMS funktioniert ohne Datenbank. Alle Änderungen werden direkt in der HTML-Datei gespeichert.

Einfach & schnell.

Coast CMS ist in 5 Minuten einsatzbereit. CMS-Ordner hochladen, Name & Passwort eintragen, editierbare Bereiche festlegen. Fertig.

Key-Features

  • Texte bearbeiten
  • Bildaustausch per drag&drop
  • NEU: client-seitige Bildgrößenreduzierung!
  • automatische Backups

optionale Features

  • Inhaltsbereiche hinzufügen & entfernen
  • Inhaltsbereiche per drag&drop neu anordnen
  • Seiten duplizieren / löschen
  • HTML-Editor

System­voraussetzungen

  • Website mit HTML5-Doctype
  • Website in UTF-8
  • Webserver mit PHP5 & GD library
  • ein aktueller Browser (Chrome, Safari, Firefox)
    (in Safari für iOS6+ und IE10+ werden nicht alle Features unterstützt)

Coast CMS

Coast CMS ist ein ContentManagementSystem, das etwas anders funktioniert als die meisten anderen CMS: Es wird in bereits bestehende, statische HTML-Websites integriert und macht diese editierbar. Statt die Änderungen in einer Datenbank oder in XML-Dateien zu speichern, überschreibt Coast CMS die bestehenden HTML-Seiten.

Die Bearbeitungsfunktionen in Coast CMS sind auf das Wesentliche reduziert: Texte können editiert werden, Bilder können per drag&drop hochgeladen & ausgetauscht werden und neue Inhaltsbereiche (z.B. Newsmeldungen) können hinzugefügt werden.

Einige Funktionen, die die meisten CMS beherrschen, bietet Coast CMS nicht. Warum? Weil diese Funktionen für viele Web-Projekte überhaupt nicht gebraucht werden und sowohl die Programmierung als auch die Bearbeitung nur unnötig verkomplizieren.

Coast CMS möchte in erster Linie eines sein: Einfach! Und das sowohl für den Web-Entwickler als auch für denjenigen, der die Inhalte pflegt.

Einfach editieren.

How To

Erstelle eine "normale", statische HTML5-Webseite.

  • alle .html-Dateien müssen sich in einem Verzeichnis befinden (nicht in Unterordnern)
  • benutze den HTML5-Doctype <!doctype html> und den UTF-8-Zeichensatz

Lege die editierbaren Bereiche fest.

Einen Bereich editierbar zu machen ist ganz einfach:

Ergänze deinen Code im gewünschten <div>Tag einfach um data="editable".
Aus <div class="section"> wird <div class="section" data="editable">.

Neben <div>-Tags können außerdem Headlines und Absätze editierbar gemacht werden.
Also z.B. <h1 data="editable"> oder <p data="editable">

Um ein Bild austauschbar zu machen, ergänze im <img>-Tag einfach data="editable_image"
Aus <img src="image.jpg"> wird <img src="image.jpg" data="editable_image">.
Im Backend können Bilder so einfach per drag&drop ausgetauscht werden. Bilder werden automatisch hochgeladen, auf die richtige Größe skaliert und ggf. zugeschnitten. Zur Zeit werden JPGs, PNGs, GIFs und PDFs unterstützt!


Installiere Coast CMS auf deinem Webserver.

  • CoastCMS.zip herunterladen & entpacken
  • die Datei "_settings.php" öffnen
  • Benutzername & Passwort ändern
  • die Datei "_settings.php" in "settings.php" (ohne Unterstrich) umbenennen
  • die Ordner "cms", "uploads", "backups" und die Datei "cms.php" per FTP auf deinen Webserver übertragen
  • img FTP-Programm die Rechte der Ordner "uploads" und "backups" und aller .html-Dateien auf 0777 ändern
  • Fertig.

Einloggen.

  • "www.deine-url.de/cms" aufrufen und anmelden.

Testen!

Coast CMS ist noch im Beta-Stadium und konnte noch nicht unter allen denkbaren Gegebenheiten getestet werden. Hier und da ist es also durchaus möglich, das etwas nicht funktioniert.

Erweiterte Funktionen

Neben den unter "How To" beschriebenen Basis-Funktionen, bietet Coast CMS auch noch erweiterte Funktionen. Diese sind nicht ganz so einfach zu implementieren, wie die Basis-Funktionen, werden aber in vielen Fällen auch gar nicht gebraucht.


Wiederkehrende Inhaltsbereiche

Ein "wiederkehrender Inhaltsbereich" kann z.B. eine Newsmeldung im Newsbereich sein. Also eine wiederkehrende Abfolge einzeler Elemente. Z.B. Headline, Fließtext & Bild.

Um einen "wiederkehrenden Inhaltsbereich" zu definieren, speichere den Quelltext des Bereichs in einer HTML-Datei im Ornder "cms/cs/" und nenne sie z.B. "news_section.html".

So könnte die Datei z.B. aussehen:

<div class="news_section">

<div class="news_text">
<h2 data="editable">Headline</h2>
<p data="editable">Text</p>
</div>

<div class="news_img">
<img src="img/spacer-lightgrey.jpg" width="120" height="120" data="editable_image">
</div>

<div class="clearer"></div>
</div>

Lege anschließend fest, an welcher Stelle auf deiner Webseite dieser Bereich erscheinen soll. Definiere hierzu ein umschließendes div und ergänze folgende Angaben:

<div class="news_wrap" data="content_section_wrap" data-cs-src="news_section.html" data-cs-title="Newsmeldung hinzufügen" data-cs-pos="top">
...
</div>

Mit data="content_section_wrap" legst du fest, dass innerhalb dieses divs wiederkehrende Inhaltsbereiche platziert werden dürfen.

Mit data-cs-src="news_section.html" legst du die Quelle des einzelnen Inhaltsbereiches fest.

Mit data-cs-title="Newsmeldung hinzufügen" bestimmst du die Beschriftung des Buttons, mit dem man einen neuen Inhaltsbereich hinzufügen kann.

Und mit data-cs-pos="top" bestimmst du ob folgende Inhaltsbereiche oben, unten (data-cs-pos="bottom") oder an beliebiger Stelle (data-cs-pos="any") eingefügt werden sollen. Mit data-cs-pos="draggable" können Inhaltsbereiche jederzeit per drag&drop verschoben werden.

Wenn bereits editierbare Inhaltsbereiche auf der Website zu sehen sollen, müssen Sie von folgendem Code umgeben sein:

<div data="cs_single">...</div>

Wie das Ganze umgesetzt aussieht, kannst Du Dir hier in der Demo anschauen: Demo.


Bildergalerie

Auf die gleiche Art und Weise lässt sich auch eine editierbare Bildergalerie erstellen. Hierzu brauchst du eine Datei mit z.B. folgendem Inhalt:

<img src="img/spacer-lightgrey.jpg" width="120" height="120" data="editable_image" data-type="thumb_and_big_image">

Die Datei speicherst du im Verzeichnis "cms/cs/" z.B. unter dem Namen "gallery_img.html". Lege anschließend fest, an welcher Stelle auf deiner Webseite die Galerie erscheinen soll. Definiere hierzu ein umschließendes div und ergänze folgende Angaben:

<div class="gallery_wrap" data="content_section_wrap" data-cs-src="gallery_img.html" data-cs-title="Bild hinzufügen" data-cs-pos="top">
</div>

Fertig.

Wie das Ganze umgesetzt aussieht, kannst Du Dir hier in der Demo anschauen: Demo.

Coast Codes

Editierbare (Text-)Bereiche

<div data="editable">
Texte können umfangreich editiert & formatiert werden.


<p data="editable">
<h1 data="editable">
<h2 data="editable">
...
<h6 data="editable">
Texte können im begrenzten Maße editiert & formatiert werden.


Bilder

<img data="editable_image">
Das Bild wird auf Größe des Ursprungsbildes beschnitten.

<img data="editable_image" data-option="fixed_width">
Das Bild wird proportional skaliert. Die Breite des Ursprungsbildes wird übernommen.

<img data="editable_image" data-option="fixed_height">
Das Bild wird proportional skaliert. Die Höhe des Ursprungsbildes wird übernommen.

<img data="editable_image" data-option="fixed_width" data-width="600">
Das Bild wird, unabhängig von der dargestellten Größe, proportional auf eine Breite von 600px skaliert.

<img data="editable_image" data-option="fixed_height" data-height="600">
Das Bild wird, unabhängig von der dargestellten Größe, proportional auf eine Höhe von 600px skaliert.


<img data="editable_image" data-type="thumb_and_big_image">
Es wird eine große Version des Bildes erzeugt und darauf verlinkt.


Bild-Links

<a href="beispiel.html" data="editable_image_link"><img src="img/01.jpg" data="editable_image"></a>
Bilder können wie oben beschrieben edititiert werden - zuaätzlich kann der Link auf dem Bild editiert werden. (Demo)


wiederkehrende Inhaltsbereiche

<div data="content_section_wrap" data-cs-src="news_section.html" data-cs-title="Newsmeldung hinzufügen" data-cs-pos="draggable">
...
</div>

... data-cs-pos="top"
neue Inhaltsbereiche können nur oben eingefügt werden

... data-cs-pos="bottom"
neue Inhaltsbereiche können nur unten eingefügt werden

... data-cs-pos="any"
neue Inhaltsbereiche können an beliebiger Stelle eingefügt werden

... data-cs-pos="draggable"
neue Inhaltsbereiche werden oben eingefügt, können aber jederzeit per drag&drop neu angeordnet werden


Shortcuts

cmd + s speichern
cmd + i HTML-Code bearbeiten

FAQ

Ist Coast CMS kostenlos?

Ja.


Kann ich Coast CMS auch für kommerzielle Projekte einsetzen?

Ja.


Darf ich auf meiner Webseite auf die Webseite von Coast CMS verlinken?

Na klar.


Kann Coast CMS jetzt schon in Webprojekten für Kunden eingesetzt werden oder sollte ich warten bis Coast CMS den Beta-Status verlassen hat?

Coast CMS kann jetzt schon eingesetzt werden, wenn es ausführlich getestet wird.


Welchen Browser sollte ich bei der Benutzung von Coast CMS verwenden oder meinen Kunden empfehlen?

Chrome!


Ist Coast CMS responsive?

Wenn deine Website responsive ist: Ja.


Wie funktionieren die BackUps?

Im Ordner "backup" werden Sicherheitskopien aller .html-Dateien gespeichert. Diese können über das erweiterte Menü (oder manuell per FTP) wiederhergestellt werden. In der aktuellen Version von Coast CMS wird vor jedem Speichervorgang ein BackUp erstellt. Alte BackUps werden nach 90 Tagen gelöscht. (Der Zeitraum kann in der settings.php eingestellt werden.


Gibt es PlugIns, Erweiterungen oder eine Schnittstelle um Coast CMS zu erweitern?

Nein, zur Zeit nicht.


Was hat die Variable "$demomode" im Quelltext zu bedeuten?

Mit der Variable "$demomode" kann der Demomodus aktiviert werden. Der ist allerdings ausschließlich für die Demo auf dieser Webseite gedacht und sollte sonst nicht genutzt werden. Im Demomodus werden alle Dateien im Ordner "uploads" gelöscht.


Die Editor-Toolbar verdeckt den editierbaren Bereich - woran könnte das liegen?

Vermutlich hast du im CSS dem "body" die Eigenschaft "position:relative;" zugewiesen. Nutze stattdessen besser "div{position:relative;}" und entferne die Eigenschaft unter "body".

Disqus

comments powered by Disqus

Weitere Projekte und Downloads

SimpleStaticSiteSearch - eine einfache Suchmaschine für statische HTML5-Websites

backgroundblur.js - ein jQuery-Plugin, das verschwommene Hintergrundbilder generiert.

Lizenz

Coast CMS ist unter der MIT-Lizenz lizenziert. http://opensource.org/licenses/MIT