Update 2015 - Teil 1 - Vorabinfos

Wichtige Informationen zum Update 2015 Teil 1

Jedes größere Update ist für Benutzer, die schon lange ein System nutzen, erstmal mit Aufwand verbunden. Die gewohnte Umgebung ist verändert und neue Funktionen hinzugekommen. Als Entwickler bewegt man sich immer auf einem schmalen Grat. Am liebsten möchte man alles neu machen, ohne Rücksicht auf den bisherigen Stand der Entwicklung. Das geht leider nicht, wenn man Kunden hat, die ein System nutzen. Wir haben versucht, mit dem Update diesen schwierigen Balance-Akt zu bewerkstelligen. Wir hoffen, Euch gefällt das neue System genauso gut wie uns.

Bevor in wenigen Tagen der erste Teil des Updates veröffentlicht wird, wollen wir einige Einblicke in das neue System geben um den Umstieg zu erleichtern. Insgesamt arbeiten wir seit fast einem Jahr rund um die Uhr an diesem Update. Ein Grund ist, dass wir die gesamte Datenstruktur verändert haben, um eine völlig neue Art der Bedienung zu ermöglichen und zukünftige Erweiterungen zu erleichtern. Beim Entwickeln haben wir mehrmals von vorne angefangen, weil es einfach nicht unseren Ansprüchen genügte und wir in tagelangen Diskussionen neue Wege gesucht haben. Es hat sich aber gelohnt.

Ein ganz wichtiger Hinweis:

Damit Ihr die neuen Funktionen nutzen könnt, braucht Ihr unbedingt ein editierbares Layout. Das findet Ihr, wenn Ihr auf Design auswählen geht, wie unten gezeigt.

1) Hier könnt Ihr das editierbare Layout auswählen
2) Rechts müsst Ihr dann eine der Designvorlagen wählen
3) Und dann auf Auswählen klicken.

Kleiner Hinweis: Nimmt einfach das erste Layout, also 10.000 und die erste Vorlage. Mit dem Design-Editor könnt Ihr so viel anpassen, dass es keine Rolle spielt, welches die Basis ist.

Anschließend könnt Ihr dann das Layout entsprechend editieren. Vorab sollte man sich vielleicht über die verwendeten Begriffe einig sein. Es gibt den Begriff Layout und den Begriff Design.

Layout = Damit bezeichnen wir die gesamte Struktur einer Webseite, also wie die Fläche aufgeteilt ist, ob und wo Sidebars sind, wo der Kopfbereich ist, ob es einen Fussbereich gibt usw.
Design = Damit bezeichnen wir die Möglichkeit, ein Layout mit "Leben"  zu füllen, es zu gestalten. Also Bilder, Farben, Rahmen, Effekte hinzuzufügen und die Größe der einzelnen Bereiche anzupassen und was noch damit zusammenhängt.

Im alten System hat man links das Layout, also die Struktur gewählt und rechts ein Design dazu. In der Vergangenheit war es mit page4 nicht möglich, die Struktur einer Webseite zu ändern, man musste dazu ein bestimmtes Layout auswählen. Außerdem konnte man die Größen nicht ändern und musste dazu ein neues Design wählen, wenn man ein größeres Headerbild haben wollte.

Mit den editierbaren Vorlagen hat sich das geändert und mit den neuen Bearbeitungsmöglichkeiten und den in Kürze folgenden neuen Vorlagen haben wir den Schritt vollzogen zu einem auf dem Markt einmaligen System.  Kein Webbaukasten ist in der Lage, dass zu bewerkstelligen, was page4 kann. Mit keinem anderen System kann man so einfach eine Webseite gestalten. Und damit meinen wir wirklich gestalten. Gestalten bedeutet, das Aussehen der Seite an die eigenen Wünsche anpassen. Die anderen Baukästen erlauben zwar eigene Bilder und eigene Farben und Schriften aber viel mehr nicht. page4 kann viel, viel mehr.

Wie kommt Ihr nun zu den neuen Bearbeitungsmöglichkeiten?

Einfach auf den ersten Menüpunkt "Design" klicken und wenn Ihr ein editierbares Design gewählt habt, dann sollte das Aufklapp-Menü so aussehen. Ihr sehr dort dreimal eine orange 1. Das bedeutet, ihr kommt mit allen drei Menüpunkten (Design editieren, Design-Schriften und Design der Navigation) in den neuen Editor. Am besten nimmt ihr allerdings den ersten Eintrag, dann kommt ihr zur allgemeinen Bearbeitung. Bei den anderen beiden springt Ihr direkt in die Tiefe an die entsprechende Stelle.

So sieht es aus, wenn Ihr direkt in den Editiermodus "springt:

Oben (1) befindet sich eine dunkelblaue Menüleiste mit verschiedenen Einträgen. Auf der linken Seite gibt es aktuell die Einträge "Elemente", "Hintergrund", "Schriften" und "Navigation". Wenn der zweite Teil des Updates kommt wird dort noch der Eintrag "Vorlagen" erscheinen, wo Ihr dann direkt neue Layouts und Designs auswählen könnt. Auf der rechten Seite gibt es die Einträge "Zurücksetzen", "Speichern" und "Schließen". Die hellblaue Fläche (2) enthält entweder Hinweise oder die Elemente mit denen Du alle Parameter Deiner Webseite einstellst.
Ganz unten siehst Du die (3) platziert über ein Element, welches mit einer gestrichelten Linie umrandet ist und eine Schraffierung enthält sowie mit einer halbtransparenten weissen Fläche belegt ist. Das ist das aktuell aktive Elemente, wo sich gerade die Maus befindet. Wenn Du auf so ein aktives Element oder besser auf so einen aktiven Bereich klickst, dann kommt ein Dialog, mit dem Du direkt zu den gewünschten Bearbeitungsoptionen springen kannst. Mehr dazu weiter unten.
Am besten erklären wir Euch kurz, was diese Menüeinträge in der dunkelblauen Leiste oben darstellen.

Elemente

Elemente: Hier kannst Du mit einem Klick Bereiche (1) des Layouts an- oder ausschalten. Wenn Du ein Bereich ausschaltest, wird er unsichtbar, verliert aber natürlich nicht die Inhalte, die in diesem Bereich von Dir angelegt sind. Unser System ist ziemlich intelligent. Nehmen wir an, Du hast oben eine Hauptnavigation, wo sich die Hauptseiten befinden und alle Unterseiten befinden sich in der ersten Sidebar. Wenn Du die erste Sidebar ausschaltest, dann erkennt das System das die Unternavigation fehlt und aktiviert bei der Hauptnavigation die Unterseiten in Form eines Aufklapp-Menüs. Wenn Du die Sidebar jetzt wieder anschaltest, dann hast Du dort weiterhin selbst angelegte Inhalte aber die Navigation wird nicht automatisch wieder aufgeteilt. Da es zwei Sidebars gibt und die Unterseiten auch noch an anderer Stelle platziert werden können, ist es nicht möglich, die Navigation wieder an die alte Stelle zu setzen. Das ist aber nicht schlimm. Mit einem Klick kannst Du das selbst erledigen. In dem Moment, wo Du das machst, wird die Hauptnavigation automatisch wieder umgeschaltet um dann nur noch die Seiten der ersten Ebene anzuzeigen und keine Unterseiten mehr.
Außerdem kannst Du in diesem Bereich die Webseite (2) spiegeln. Natürlich nicht die Schrift und die Inhalte, aber die Bereiche. Hast Du links in der Sidebar die Navigation und rechts Inhalte und Du klickst auf "Spiegeln" dann tauscht das System die Inhalte beider Sidebars aus bzw. wechselt die Positionen der beiden Sidebars. Hast Du nur eine Sidebar, geht das natürlich auch. Und Du kannst bestimmte Einstellungen (3) machen um verschiedene Elemente einen gewissen Abstand zueinander zu geben.

Hintergrund

Hintergrund: Hier kannst Du logischerweise den gesamten Hintergrund (Body) der Webseite gestalten. Also Hintergrundfarbe und Hintergrundbild. Sobald das Update komplett ist, werden wir diesen Bereich ausbauen, damit Du im Hintergrund Videos abspielen oder eine Slideshow laufen lassen kannst. Einige neue Funktionen möchten wir anhand des Hintergrundes kurz erklären. Diese Funktionen sind natürlich überall verfügbar, wo wir solche Bearbeitungselemente benutzen.
Transparenz: Ab sofort kannst Du an vielen Stelle eine Farbe transparent machen. Entweder indem Du in das Feld einen Wert schreibst oder in 10% Schritten mit den blauen Pfeilen den Wert veränderst. Damit kannst Du ganz moderne Effekte erzielen. Sobald Du eine neue Farbe wählst, wird der Wert wieder auf 100% gesetzt.
Verschiedene Möglichkeiten, Bilder einzubinden: Mit dem grünen Ordner wählst Du ein Bild aus deiner Bildverwaltung aus. Das dunkelblaue Datenbank-Symbol öffnet ein Fenster zu Bildern, die wir zur Verfügung stellen. Ein Teil der Bild kommt von uns, ein anderer Teil aus frei verfügbaren Bilddatenbanken die es erlauben, die Bilder frei zu privaten und kommerziellen Zwecken zu nutzen. Es gibt Bilder für den Hintergrund in einer Auflösung von 2560 x 1440 px (355),  für den Header in der Auflösung 1.400 x 500 px (409) und als Bilder für den Inhaltsbereich in drei Auflösungen, 533 x 300 px (564), 300 x 533 px (355) und 400 x 400 px (428). Außerdem transparente (39) und nicht transparente (208) Kacheln. Die Zahlen in () geben an, wie viele Bilder aktuell von jedem Format verfügbar sind. Viele Motive sind in allen Formaten verfügbar, damit Du immer die optimale Größe verwenden kannst. Du kannst jedes Bild für jeden Bereich verwenden. Das blaue Kreissymbol dient dazu, Bilder direkt von Deinem Rechner hochzuladen. Diese Möglichkeiten hast Du aktuell im Editor und zusätzlich beim Bild-Content. Für die Platzierung von Bildern haben wir neue Dialoge (3) entwickelt, die Dir die Wahl erleichtern.

Schriften für das Design

Schriften: Hier befinden sich jetzt die Einstellungen für die Schriften Deiner Webseite. Optisch hat sich nicht viel verändert. Allerdings siehst Du unten auf der Webseite sofort die Veränderungen.  Es gibt also ab jetzt eine Live-Vorschau. Wenn Du die Überschrift 1 zum Beispiel mit der Farbe rot versiehst, werden sofort alle vorhandenen Überschriften rot angezeigt, obwohl Du Dich im Bearbeitungsmodus befindest. Ganz links (1) wählst Du aus, welchen Schriftbereich du anpassen willst. Daneben (2) hast Du dann alle Optionen und rechts (3) siehst Du, wie Deine Einstellungen aussehen. Du kannst rechts auch einfach einen Schriftbereich anklicken und springst dann zu den entsprechenden Einstellungen. Sobald das Update durch ist, werden wir daran arbeiten, alle Schriften zu vereinheitlichen und zusätzlich für bestimmte Bereiche Google-Fonts einbinden. Man muss dann allerdings in Kauf nehmen, dass die Ladezeiten einer Webseite verlängert werden. Zur Auswahl der Schrift gibt es einen neuen Dialog, den du erreichst, wenn du auf das "A" neben der angezeigten Schrift klickst.

Die Einstellungen der Navigation

Navigation: Hier kannst Du die Navigation deiner Webseite anpassen. Ganz Links (1) kannst Du zwischen Haupt- und Unternavigation wählen. Daneben hast Du Optionen, um die Position (2) deiner Navigationen zu ändern, Navigationen zu entfernen (3) oder ein neues Template (4) zu wählen. Darunter siehst Du immer eine Vorschau (5) der aktuellen Einstellungen. Ganz rechts bestimmst du das Aussehen deiner Navigationen. Oben (6) wird angezeigt, welche Ebene gerade bearbeitet wird und welcher Zustand (Normal, Kette oder Aktiv) und darunter (7) siehst Du immer die Einstellungen dazu. Alles, was Du veränderst, wird live auf der Webseite angezeigt. Sobald das Update stabil läuft, wird es weitere Navigations-Templates geben und wir werden die Möglichkeit schaffen, die Schrift und Schriftgröße einer Navigation zu verändern. Die Technik dafür ist bereits hinterlegt.

Bevor wir zu der Bedienung kommen, müssen wir noch die Menüeinträge auf der rechten Seite erklären, die sehr interessant sind.

Zurücksetzen: Wenn Du auf diesen Eintrag klickst, dann werden alle Änderungen seit der letzten Speicherung verworfen. Dieser Schritt kann nicht rückgängig gemacht werden. Also vorsichtig damit umgehen.
Speichern: Wenn Du den Editor dass erste Mal öffnest, kannst Du alles Mögliche verändern. Du kannst ein neues Design auswählen (wenn das Update komplett ist), Farben, Bilder, Größen usw. ändern. Alles, was Du tust, bleibt für die Besucher Deiner Webseite unsichtbar, solange Du die Änderungen nicht speicherst. Sobald Du einmal auf Speichern klickst, wird der aktuelle Stand auf unserem Server gespeichert und dann werden diese Daten genutzt, um Deine Webseite im Netz anzuzeigen. Auf diesen gespeicherten Zustand wird das System zurückgesetzt, wenn Du den Eintrag "Zurücksetzen" anklickst. Hast Du noch nicht einmal gespeichert und drückst "Zurücksetzen" wird der ursprüngliche Zustand wieder hergestellt. 
Schließen: Wenn Du den Bearbeiten-Modus schließt, dann werden alle Änderungen, die nicht gespeichert sind, verworfen. Du kannst also alles Mögliche ausprobieren, solange Du nicht speicherst.

Das neue Konzept der Bedienung

Um zu verstehen, wie page4 arbeitet, möchte ich kurz das Konzept erklären. Dann wird man verstehen, wie genial und wie einfach page4 durch das neue Update wird und warum es so einmal ist. Und vor allem, warum man damit als User viel mehr Möglichkeiten hat als bei jedem anderen Baukastensystem.

Die Struktur einer jeden Webseite

Webseiten bestehen aus verschiedenen HTML-Elementen, sogenannten Containern, im Quellcode mit dem Kürzel "div" dargestellt. Diese "divs" verschachtelt man, um bestimmte Effekte zu erzielen und Strukturen aufzubauen. Der weisse Hintergrund in der obigen Darstellung stellt den Body, den Hintergrund einer jeden Webseite dar. Diesen Hintergrund kannst Du verändern, indem Du wie oben beschrieben, den Menüpunkt "Hintergrund" aufrufst. Alle anderen Bereiche erreichst Du, indem Du mit der Maus darauf klickst. Dabei ergibt sich das Problem, dass die Bereiche (divs) verschachtelt sind und quasi "übereinander" liegen. Die gelbe Fläche stellt den ganz unteren Bereich dar, in dem alle anderen Elemente eingebettet sind. Die roten Bereiche sind die Container, die die Hauptelemente darstellen. Also den Fussbereich (Footer), die Sidebar links und rechts, den Bereich der Navigation und den Kopfbereich, den Header. In oder auf diesen Bereichen werden Designelemente in eigene Container gebettet. Diese sind lila dargestellt. Das kann zum Beispiel die Navigation sein, die in dem Bild oben in der linken Sidebar und im Navigationsbereich einbettet ist. Das können auch Elemente im Kopfbereich (Header) sein, wie eine Slideshow, die hier den gesamten Bereich des Headers überdeckt, so dass man den roten Bereich gar nicht erkennen kann. Elemente im Header können wiederum beliebig übereinander liegen. Wenn ich auf der Slideshow einen Text oder ein Logo platzieren kann dieses Element darüber liegen, wie an der kleinen roten Fläche gezeigt
In der Mitte ist der Bereich, wo alle Inhalte einer Seite (Texte, Bilder, Formulare usw.) angelegt werden. Hier durch eine rosa Fläche dargestellt und die Inhalte durch graue Elemente.

Diese Struktur ist bei allen Webseiten zu finden, ob mit page4, mit Wordpress oder von Hand programmiert. Je nach Design bestehen natürlich Unterschiede in der Zusammenstellung der einzelnen Bereiche. Wenn Du dass grundsätzliche Prinzip verstanden hast, wirst Du auch unsere Bedienung sofort verstehen.

Es stellt sich nämlich die ganz einfache Frage, wie kann ich auf möglichst einfache Weise alle Bereiche einer Webseite bearbeiten und anpassen. In dem Bild sind die Bereiche klar getrennt und haben Abstand zueinander. In Wirklichkeit ist das natürlich nicht so und wenn der untere Bereich der Webseite keine Umrandung hat und auch keinen Innenabstand zu den anderen Elementen, dann siehst Du diesen Bereich überhaupt nicht. So wie Du oben den roten Kopfbereich nicht siehst, weil das Element darüber genauso groß ist.

Ein intelligentes System weiss immer, wo sich die Maus gerade befindet...

Wir haben page4 so programmiert, dass es "intelligent" ist und immer genau weiss, welche Elemente sich gerade an der Stelle befinden, wo Du mit der Maus drauf klickst und weil das System alle notwendigen Informationen hat, kann es Dir auch sofort einen Dialog anzeigen und alle möglichen Optionen vorschlagen.

Oben siehst Du so einen Dialog. In der Übersichtszeichnung ist ja sehr gut zu sehen, dass im Bereich, wo die Navigation eingebunden ist, mindestens drei "Container" übereinander liegen. Ganz unten ist der Bereich (gelb), welcher die gesamte Seite, das gesamte Layout enthält (2). Darüber liegt dann der Bereich (rot), wo die Navigation eingebettet ist (1) und auf diesem Bereich ist die Navigation als Element (lila) platziert, hier in diesem Dialog die Hauptnavigation (3).

Du kannst jetzt über diesen Dialog alle Elemente direkt bearbeiten, die sich an der Stelle befinden, worauf Du mit der Maus geklickt hast. Du kannst (1) den Bereich der Navigation bearbeiten und den Hintergrund, den Rahmen, die Höhe und Breite usw. bearbeiten. Oder Du klickst auf (2) und kannst dann den untersten Container, den Bereich vom Gesamtlayout bearbeiten und um die ganze Webseite einen gemeinsamen Rahmen legen, eine gemeinsame Hintergrundfarbe oder ein Hintergrundbild bestimmen und die Gesamtbreite des Layouts anpassen. Und zu guter Letzt kannst Du das Navigationselement bearbeiten, wobei Du hier mehrere Optionen (4) hast. Klickst Du auf Design bearbeiten, kommst Du zum Bereich, wo Du die gesamte Navigation anpassen kannst. Möchtest Du nur die Postion ändern, klickst Du auf "Navigation verschieben" und es wird Dir angezeigt, wohin Du dieses Element verschieben kannst. Möchtest Du das Element ausblenden, klickst Du auf "Navigation ausblenden" und wenn es möglich ist, wird die Navigation ausgeblendet und die verbliebene Navigation übernimmt die notwendigen Funktionen automatisch.

Je nachdem, auf welchen Bereich Du klickst, bekommst Du unterschiedliche Optionen. Klickst Du auf den Kopfbereich und ist da keine Navigation direkt eingebunden (hängt von der Vorlage ab und ist durchaus möglich) dann kannst Du neben den Bereichen noch die Elemente bearbeiten, die man auf den Bereich platzieren kann. Diese Funktion war vor dem Update direkt auf der Seite erreichbar, was immer wieder zu Irritationen geführt hat, weil man an der Stelle zwar die Elemente platzieren und bearbeiten konnte aber keine Möglichkeit hatte, dort direkt den Bereich zu bearbeiten. Das führte dann dazu, dass wir Anfragen hatten, warum man das vorhandene Headerbild nicht entfernen kann. Ab sofort ist alles an einer Stelle möglich und damit einfacher zu bedienen.

Damit Du das verstehst, nachfolgend noch kurz die Dialoge, zu denen Du kommst, wenn Du zum Beispiel auf den Header klickst.

Zuerst kommt der Dialog zum Auswahl der Bereiche. In diesem Fall haben wir untersten Bereich weggelassen, da diese Funktion aktuell noch nicht in meinem Testaccount ist und es außerdem etwas übersichtlicher macht.

Klickst Du auf den obersten Punkt (1), also "Layoutbereich - Kopf/Header 1" dann kommst Du direkt zum Bearbeitungsmodus für das Design dieses Bereiches:

Kurze Erklärung dazu. In der obersten Zeile (1) kannst du die Breiten und Abstände einstellen, die von dieser Stelle aus erreichbar sind. In der mittleren Zeile (2) wird der Hintergrund eingestellt und unten (3) kann man den Rahmen um den Bereich bestimmen.
Ganz unten am Bild siehst Du Deine Webseite und ein rotes Kreuz. Normalerweise kannst Du während der Bearbeitung einfach irgendwo anders hinklicken und neue Optionen auswählen. Alle Einstellungen werden zwischengespeichert. Du kannst aber die Bearbeitung auch beenden, indem Du das rote Kreuz rechts oben im jeweils ausgewählten Bereich anklickst.

Klickst Du auf den unteren Punkt (2), also "Inhaltselemente - Abschnitt 1" dann kommst Du direkt zum Bearbeitungsmodus, wo Du beliebige Inhalte auf den Header platzieren kannst. Das ist der Bereich, der vor dem Update "draussen" direkt erreichbar war:

Auch hier kurze Bemerkungen. Hier kann man je nach Version beliebige Elemente auf den Headerbereich platzieren. Links (1) sind alle vorhandenen Elemente angezeigt. Oben (3) sind allgemeine Informationen und Optionen verfügbar und unten (2) sind die Bearbeitungsoptionen des jeweiligen Elementes. Bei einem Text sieht das natürlich entsprechend anders aus.

Schlussbemerkungen

Die Dialoge haben sich von der Optik geändert. Die neuen Dialoge haben nun keine aufklappbaren Optionen mehr. Alles ist immer sichtbar, auch wenn dadurch der Dialog evtl. Scrollbalken bekommt. Die alten Dialoge, die nur noch vorhanden sind, weil es alte Layoutvorlagen gibt, haben einen neuen Farbanstrich bekommen. Wir haben eine Farbpalette festgelegt von Farben, die verwendet werden für die Optik und diese Farben werden nun fast überall verwendet, wodurch ein einheitliches Bild entsteht. Damit haben wir einen großen Teil der Anpassung fertig und page4 ist noch moderner und besser geworden. Es gibt viele Optionen auch im Bereich der Contents die wir jetzt nach dem Update bald aktivieren können.

Ich hoffe, der sehr lange Text erschreckt nicht. Unser Ansicht nach macht es Sinn, sich lieber mal ein paar Minuten alles durchzulesen und dann viel mehr Spaß beim Arbeiten mit page4 zu haben als bei jedem kleinen Missverständnis eine Supportanfrage zu stellen. Sehr wichtig wird sein, dass wir möglichst viele Rückmeldungen bekommen. Und es wäre sehr toll, wenn ihr begeistert seid, dies auch weiter zu sagen. Viele andere Webbaukästen haben nicht Erfolg, weil das System perfekt ist sondern weil die User das System bei Freunden und Bekannten bewerben. Davon haben alle was, je mehr User, umso leichter ist es, mehr Mitarbeiter einzustellen und noch schneller tolle Ideen umzusetzen.