Die eigene Homepage mit page4

 

Unser neuer Seitenmanager

Wir freuen uns, Euch noch im August 2014 unseren neuen Seitenmanager vorstellen zu können. Wir haben den Dialog komplett überarbeitet und zum einen dafür gesorgt, dass Ihr eine völlig neue Art der Bedienung erleben könnt und auf der anderen Seite auf Wunsch weiterhin die alte Bedienung verwenden könnt. Es ist also ein Spagat zwischen der Zukunft und der Gegenwart.

 

Wir hoffen, Euch gefällt die Seitenverwaltung genauso gut wie uns. Wir haben uns sehr große Mühe gegeben, alle Fehler zu entdecken und auszumerzen und die Bedienung zu optimieren. Trotzdem kann es natürlich vorkommen, dass genau bei Eurem System, mit eurem Browser irgendwelche Dinge auftreten, die wir nicht entdeckt haben. Wir bitten Euch dann, uns genau mitzuteilen, was Euch aufgefallen ist und wann dass passiert ist.

 

Und jetzt viel Spaß

Euer page4-Team

Der neue Dialog vom Seitenmanager

Kurzbeschreibung

Übersicht über die einzelnen Bereiche der Seitenverwaltung.

1) Ganz links findet Ihr eine Übersicht aller Seiten Eurer page4-Homepage. Die Darstellung ist als Seitenbaum angelegt. Ihr könnt die Unterseiten nun auf Wunsch einklappen. Dazu klickt man auf das Kästchen, welches vor jeder Seite steht. Ist das Kästchen leer, hat die Seite keine Unterseiten. Ist dort ein Plus-Zeichen, enthält die Seite Unterseiten, die eingeklappt sind. Ist ein Minus zu sehen, sind die Unterseiten aufgeklappt.

 

Neben diesem Kästchen befindet sich ein Seitensymbol mit einem grünen Kreuz. Das ist ein Anfasser. Ihr könnt hier eine Seite mit der Maus anfassen und bei gedrückter Maus die Seite beliebig im Baum verschieben. So kann man sehr schnell die Struktur ändern, Seiten an beliebige Stellen schieben und Unterseiten anlegen oder auflösen. Wenn man eine Seite anfässt, die Unterseiten hat, dann klappen diese automatisch ein, es wird angezeigt, wie viele Unterseiten es sind und man kann dann relativ leicht Seiten mit beliebig vielen Unterseiten verschieben.

 

Hinter jedem Seitennamen befindet sich jetzt eine Information, um was für eine Seite es sich handelt. Eine normale Seite wie die zweite Seite mit dem Namen "Ebene 2" hat einfach den Aliasnamen dahinter stehen, hier 103.html. Ist die Navigation für die Seite ausgeblendet, wird der Aliasname in eckigen Klammern angezeigt (wie Ebene 3 und 4). Wenn die Seite zur ersten Unterseite verlinkt, wird das direkt angezeigt (Ebene 5). Ist die Seite so angelegt, dass man nicht zum Seiteninhalt, sondern zu einer externen Seite springt, wird der entsprechende Link angezeigt (Ebene 6) und hast Du die Seite zum Blog verlinkt, wird auch das direkt angezeigt (Ebene 7). Du erkennst also mit einem Blick, welche Einstellung Du für die jeweilige Seite gewählt hast. Rote Seiten bedeutet übrigens, dass die Seite unsichtbar ist. Olivgrüne Seiten (hier nicht im Bild) sind geschützte Seiten.

 

Unser System erlaubt übrigens bis zu 10 Ebenen, wie Du sehen kannst.

 

2) Neben jeder Seite sind 4 Icons. Mit dem ersten Icon, dem Stift, öffnet sich ein Dialog, mit dem Du die Verlinkung, den Aliasnamen, den Namen und SEO-Einstellungen vornehmen kannst. Das grüne Pluszeichen dient zum Anlegen neuer Seiten. Das blaue Seitensymbol zum Kopieren von Seiten und mit dem Papierkorb löscht Du Seiten. Seiten, die Unterseiten enthalten, können nicht gelöscht werden, daher ist der Papierkorb aufgehellt bzw. ausgegraut.

 

3) Auf der rechten Seite hast Du weiterhin die Bearbeitungsmöglichkeiten wie im alten Seitenmanager. Mit den Pfeilen kannst Du wie bisher Seiten verschieben, auch wenn es mit der Maus viel schneller geht.

 

4) Mit den Seitensymbolen kannst Du ein- und mehrspaltige Seiten anlegen und Seiten kopieren oder löschen.

 

5) Mit diesen Symbolen legst Du die Startsteite fest (die Flagge), schützt Seiten und hebst den Schutz wieder auf und kannst den Bearbeitungsdialog aufrufen.

 

6) Wenn Du die Vorschau anschaltest, dann wird die aktive Seite angezeigt. So kannst Du genau sehen, welcher Inhalt sich auf der ausgewählten Seite befindet und hast es leichter, eine Entscheidung zu treffen. Die Vorschau frisst aber sehr viel Rechenleistung und sollte nur nach Bedarf angeschaltet werden.

Hier das versprochene Video

Das Video ist in HD, also am besten eine möglichst hohe Auflösung einstellen, auf Vollbild stellen und mit einer Tasse Kaffee ansehen. Die 15 Minuten lohnen sich, denn danach weisst Du wirklich alles über deine Seiten, sparst eine Menge Zeit und kannst Deine Webseite viel besser optimieren. So wirst Du viel besser gefunden und kommst schneller auf die erste Seite bei Google.

Ebenfalls neu: Den Blog mit einem Passwort schützen

Ab sofort kannst Du die Inhalte Deines Blogs mit einem Passwort schützen. Klicke dazu auf das Blog-Icon und dann auf Blog-Einstellungen. Dort findest Du eine neue Funktion: Blog mit Passwort schützen. Du kannst nur die Inhalte schützen oder zusätzlich auch die Navigation, die dann nur angezeigt wird, wenn der Besucher eingeloggt ist.

 

Das Passwort ist aktuell identisch mit dem Passwort, mit dem Du Seiten schützt.

Bildgalerie Erweiterung

Aufgrund der Wünsche viele User haben wir uns entschlossen, die Bildergalerien um weitere sinnvolle Funktionen zu erweitern und das Update heute, am 5. August für alle Benutzer online gestellt. Nachfolgend eine Beschreibung der zusätzlichen Möglichkeiten.

Umschalten zwischen Tabelle und Raster

Bisher wurden die eingebundenen Bilder immer als Raster (1) angezeigt. Ab sofort ist es auch möglich, wieder eine Tabelle darzustellen, die zwar mehr Platz braucht, dafür aber auch mehr Informationen liefert. Zum Umschalten gibt es einen Button (2), der je nach Ansicht die Beschriftung wechselt. Befindet man sich wie unten gezeigt im Raster-Modus, steht auf dem Button "Tabelle". Klickt man auf den Button, wechselt die Ansicht (siehe Bild 2) und der Button ändert die Beschriftung auf "Raster".

Die neuen Funktionen im Überblick

Für alle, welche die letzten News nicht gelesen haben, hier eine Beschreibung aller Möglichkeiten. Unter der Auflistung der Bilder befindet sich eine Reihe von Buttons mit folgenden Funktionen:

1) Bilder auswählen...: Mit diesem Button rufst Du einen Dialog auf, der Dir einen Überblick über alle in der Bilderverwaltung hochgeladenen Bilder gibt. Du kannst in diesem Dialog beliebig viele Bilder auswählen und in die Galerie übernehmen. Die Sortierung der Bilder erfolgt anhand der internen, eindeutigen ID, die automatisch vergeben wird.
2) Bilder hochladen: Möchtest Du direkt Bilder von Deinem Computer in die Galerie laden, klickst Du auf diesen Button und es öffnet sich ein Dialog, mit dem Du auf deinem Computer Bilder auswählen kannst. In der kostenlosen Version können 3 Bilder gleichzeitig hochgeladen werden, in der Kaufversion beliebig viele. Alle Bilder werden in die Bildverwaltung geladen und dann sofort in die Galerie eingebunden. Auch hier erfolgt die Sortierung anhand der ID, die automatisch vergeben wird.

3) A-Z: Klickst Du auf diesen Button, sortiert das System vollautomatisch alle Bilder nach dem Namen. Das erspart eine Menge Arbeit und ist gleichzeitig die Möglichkeit, die Bilder mit einem Klick so zu sortieren, wie sie vor dem Update automatisch eingeladen wurden.

4) Invertieren: Dieser Button "dreht" die Sortierung um. Wenn Du die Bilder zum Beispiel nach dem Namen sortiert hast und zwar aufsteigend von A bis Z so wird durch einen Klick auf den Invertieren-Button die Reihenfolge umgedreht und von Z bis A sortiert. Sind die Bilder nach ID-Nummern sortiert, wird auch hier die Reihenfolge durch den Button geändert. Man kann beliebig oft auf den Button klicken und so mit zwei Klicks den Ursprungszustand wiederherstellen.

5) Raster bzw. Tabelle: Dieser Button ändert, wie oben beschrieben, die Beschriftung, je nachdem, welche Darstellung aktuell ausgewählt ist.

6) Darstellung Tabelle: Die Tabelle ist wie folgt aufgebaut: Alle Bilder sind wie beim Raster fortlaufend numeriert. Diese Numerierung wird durch den Kreis vor jedem Eintrag und der darin enthaltenen Zahl dargestellt. Die Nummer ist nicht mit dem Bild selbst verbunden, sondern stellt nur eine temporäre Anzeige da. Verschiebt man Bilder, ändert sich deren fortlaufende Nummer entsprechend der neuen Position. Nach der Numerierung wird eine kleine Vorschau des Bildes angezeigt. Beim nächsten Update wird diese Vorschau vergrößert, wenn man mit der Maus darüber fährt. Als nächstes wird der Dateiname angezeigt mit der entsprechenden Dateisuffix (.jpg, .png, .gif). Da sehr lange Namen möglich sind, ist viel Platz dafür reserviert. Als nächstes enthält die Tabelle ein Textfeld, in das man direkt eine Bildunterschrift eintragen kann. Wenn Du alle Bilder mit einer Unterschrift versehen willst, geht das in der Tabellenansicht nun viel schneller als beim Raster, wo man jedes Bild anklicken muss, damit sich der Dialog zum Eingeben der Unterschrift öffnet. Änderungen in diesen Bildunterschrift-Textfeldern werden temporär gespeichert und bleiben erhalten, wenn man von der Tabellen-Ansicht zur Raster-Ansicht wechselt. Um die Eintragungen dauerhaft zu speichern muss man den Dialog mit Speichern beenden. Am Ende jeder Tabellenzeile findest Du zwei Icons. Ein Kreuz, mit dem Du die Reihenfolge der Bilder mit der Maus durch einfaches Verschieben verändern kannst und ein Papierkorb, mit dem Du Bilder aus der Galerie entfernst. Da die Bilder lediglich aus der Galerie entfernt werden und weiterhin in der Verwaltung zur Verfügung stehen, wird sofort gelöscht und nicht durch einen extra Dialog nachgefragt. Auch das Löschen ist nur temporär und wird erst durch das Beenden des Dialogs über den Speicherbutton ausgeführt. Schließt Du den Dialog über den Abbrechen-Button, werden keine der vorgenommenen Änderungen durchgeführt.

7) Option für die Anzeige: Hier kannst Du wie bisher auch festlegen, wie die Bilder in der Galerie angezeigt werden sollen. Aktuell gibt es zwei Optionen.

8) Option für die Vorschau: Die normale Galerie zeigt alle Bilder in einem Vorschaubild auf der Webseite an. Klickt man auf so ein Vorschaubild, öffnet sich die Galerie und zeigt das Bild in voller Größe entsprechend der in 7. festgelegten Einstellungen. Wie groß, auf welche Art und in welchem Raster die Vorschaubilder angezeigt werden, bestimmst Du wie bisher mit den Einstellungen in diesem Bereich.

Einige Hinweise zu unseren Galerien

Wir haben eine Diashow auf Flashbasis, eine "normale" Galerie, die es ermöglicht, die Bilder der Galerie in einer Großansicht anzusehen und darin zu "blättern" und eine Galerie für die Sidebar mit verschiedenen Überblend-Effekten. Das Einbinden der Bilder geschieht bei allen Galerien identisch wie oben beschrieben. Für die Darstellung auf der Webseite und beim Benutzen der Galerie werden unterschiedliche Optionen benutzt.

 

Dargestellte Bildgröße: Man kann in der normalen Galerie einstellen, dass die Bilder in der max. Größe von 2.000 px mal 2.000 px dargestellt werden. Wenn Du ein Bild von zum Beispiel 3.300 x 2.200 px von deinem Computer hochladen tust, sofern es nicht größer als 2 MB ist, dann wird das Bild beim Einladen in die Galerie auf eine Breite von 2.000 px verkleinert und dabei die Höhe auf 1.333 px reduziert, damit es natürlich im gleichen Verhältnis bleibt. Wenn ein Besucher das Bild nun in der Galerie im Vollbildmodus anschaut, dann wird es immer soweit verkleinert, dass es auf den Bildschirm passt, ohne Scrollbalken zu verursachen. Ein Bildschirm mit der Auflösung von 1.920 x 1.080 px wird max. ein Bild mit einer Höhe von knapp 900 px darstellen können, da der Browser selbst durch die Menüleisten etwas Platz beansprucht. Für Dich bedeutet das eigentlich, dass es keinen Sinn macht, Bilder hochzuladen, die größer als 1.800 px x 900 px sind. Optimal ist es, wenn die Bilder von page4 unverändert übernommen werden können, da jede Veränderung der Bildgröße die Qualität verändert.

 

Nur als Hinweis: Bilder, die kleiner oder genauso groß sind wie die hinterlegte max. Größe werden vom System in keiner Weise verändert.

 

Bildunterschriften: Bildunterschriften werden je nach Art der Galerie an unterschiedlicher Stelle angezeigt.

Social Share Button Erweiterung

Ausrichtung der Button-Leiste:

Ab sofort gibt es eine zusätzliche Option, die es ermöglicht, die Button-Leiste nach links, nach rechts oder mittig zu platzieren. Man kann zwar auch über die Designeinstellungen (das Zahnrad, welches man bei jedem Abschnitt in der Toolbar findet) die Platzierung beeinflussen. Mit den neuen Optionen ist es aber viel leichter und schneller zu bewerkstelligen.

Neuer Texteditor Tiny MCE

Zum neuen Texteditor gibt es seit dem Update einige Fragen, die ich hier beantworten möchte. Wir haben einige zusätzliche Funktionen nachträglich eingebaut. Oben siehst Du die aktuelle Ansicht des Editors in der Kaufversion.

 

Einfügen von Text: Es gibt jetzt wieder drei Icons (1,2,3) um Text einzufügen. Leider werden diese Funktionen nur von dem Internet-Explorer unterstützt. Bei anderen Browsern bekommst Du eine Fehlermeldung. Mit dem Icon (1) kann man Text aus dem Editor kopieren, den man vorher selektiert hat. Wenn Dein Browser das nicht unterstützt, kannst Du jederzeit die Kommandotaste (Strg) und "C" für Kopieren oder "X" für Ausschneiden benutzen. Mit dem Icon (2) kann man Text aus der Zwischenablage in den Editor kopieren. Auch hier gilt, unterstützt Dein Browser das nicht, verwende die Kommandotaste (Strg) zusammen mit dem Buchstaben "V" zum Einfügen von Text. Interessant ist das Icon (3). Dies ist ein Schalter. Wenn Du das Icon anklickst, erscheint evtl. eine Meldung und es wird selektiert. Jeglicher Text, den Du nun in den Editor einfügst, wird als reiner Text eingefügt. Alle Formatierungen (aus Word oder anderen Textverarbeitungsprogrammen) werden, soweit es machbar, entfernt. Ein erneuter Klick auf das Icon deselektiert es und danach eingefügter Text wird so eingefügt, wie er in der Zwischenablage abgelegt ist.

 

Bilder einfügen: Mit dem Icon (4) kannst Du beliebig viele Bilder in den Editor einladen. Solche Bilder bekommen Anfasser und können dann mit der Maus verkleinert werden. Der Nachteil dabei ist, dass immer die Originalgröße zur Anzeige verwendet wird, während Bilder, die über die normale Option eingebunden werden, vom System optimiert werden. Der Vorteil ist, man kann beliebig viele Bilder gleichzeitig einbinden. Du solltest aber nicht übertreiben und lieber mehrere Textabschnitte anlegen anstatt alles in einem einzigen Abschnitt zu implementieren. Das Erleichtert die Korrektur und Bearbeitung von Inhalten sehr.

 

Tabelle: Mit dem Icon (5) kannst Du weiterhin Tabellen anlegen und es stehen alle Optionen zur Verfügung. Das gilt natürlich nur für die Premiumversion.

 

Smilies: Leider sind aktuell nur die Smilies eingebunden, die der Tiny mitliefert. Wenn es technisch machbar ist, werden wir unsere eigenen Smilies, die anscheinend vermisst werden, wieder integrieren. Wann genau das geschieht, kann man noch nicht sagen.

 

Nachfolgend noch einige zusätzliche Erklärungen zum neuen Tiny mit Hilfe von Screenshots.

Eigene Farben

Eigene Farben über die Farbauswahl von page4. Der Tiny selbst liefert keine Möglichkeit, individuelle Farben anzulegen, ausgenommen über ein Feld (1), wo man einen Code eingeben kann. Um Zugriff auf unseren eigenen Farbdialog zu bekommen, haben wir dieses Feld in der Funktion verändert. Anstatt dort einen Code einzutragen, kannst Du auf das Feld klicken und es öffnet sich der bekannte Farbdialog. Jetzt wählst Du einfach eine eigene Farbe aus und klickst auf "Übernehmen" und schon kannst Du eigene Farben im Editor benutzen. Wenn Du anschließend das Menü wieder aufrufst, siehst Du im Feld den Farbcode der ausgewählten Farbe. Beachte bitte, dass Du den Farbdialog nicht abbrechen kannst. Es ist nur möglich, auf "Übernehmen" zu klicken. Wählst Du keine Farbe aus, wird immer Schwarz ausgewählt, da diese Farbe standardmäßig aktiv ist.

Schriftgrößen im Tiny

In der Vergangenheit wurde in page4 beim Texteditor die Größeneinheit Punkt (pt) verwendet. Inzwischen ist es so, dass sich immer stärker durchgesetzt hat, grundsätzlich in Pixel (px) zu rechnen. Wir haben uns daher entschlossen, im neuen Tiny vorrangig alle Schriftgrößen in Pixel darzustellen. Leider sind 12 px wesentlich kleiner als 12 pt. Aus diesem Grund kann man auf Wunsch weiterhin neben der Auswahl in Pixel auch wie bisher die Schriftgröße im Punkt auswählen. Dazu muss man nur das Auswahlmenü nach unten scrollen. Wie im Screenshot oben zu sehen, kommen zuerst alle Größen in Pixel (1) und danach werden alle Größen in Punkt angezeigt (2).

 

Wer wissen möchte, wie die Umrechnung von Pixel und Punkt geht, sei auf die Seite esx.ch verwiesen.

 

Ein Hinweis noch zu den Formaten. Wenn möglich, solltest Du Überschriften mit dem Überschriften-Abschnitt anlegen und mit dem Texteditor einfach nur Fließtext schreiben. So bekommst Du eine homogene Struktur und kannst Inhalte leicht ändern oder umstellen. Wenn Du im Editor eine Überschrift setzt, solltest Du die Formate nutzen, die direkt auf die Einstellungen bei den Designschriften zurückgreifen und dafür sorgen, dass Überschriften gleich formatiert sind.

Schriften im Tiny

Schriften auf einer Webseite werden direkt vom Browser dargestellt und zwar mit Hilfe der auf dem Rechner installierten Schriften. Ich verwende einen Mac und habe sehr viele Schriften installiert. Daher zeigt der Tiny mir im Auswahlmenu alle Schriften im Original an. Wenn Du einen Rechner hast, auf dem zum Beispiel die Schrift "Papyrus" nicht installiert ist, dann siehst Du im Menü zwar die Schrift Papyrus aber nicht mit dem Schriftbild wie oben im Screenshot angezeigt sondern mit einer Ersatzschrift. Die letzte Schrift im Menü ist übrigens eine asiatische Schrift, die nur dargestellt werden kann mit einem asiatischen Schriftsatz. Wir haben die Schrift für die internationale Version eingebunden, damit User diese Schrift direkt im Tiny schreiben können. Was bedeutet dass für Deine Webseite?

 

Je ausgefallener die Schrift ist, die Du auf Deiner Webseite benutzt, umso größer ist die Wahrscheinlichkeit, dass Besucher Deiner Webseite eine andere Schrift sehen als Du. Da jede Schrift eine andere Laufweite hat, was bedeutet, dass die Buchstaben unterschiedlich breit sind und daher Wörter und Sätze auch unterschiedlich lang dargestellt werden, kann eine fehlende Schrift zu einer völlig anderen Darstellung führen und Dein ganzes Design durcheinander bringen.

 

Die Schriften im Auswahlmenü sind so sortiert, dass die Schriften, welche von sehr vielen Usern installiert sind, ganz oben stehen. Möchtest Du, dass Deine Besucher deine Webseite genauso sehen, wie Du auf Deinem Computer, solltest Du bei der Schriftwahl nur die ersten 10 bis 14 Schriften im Menü benutzen. Für den Grundtext empfiehlt sich sowieso entweder eine Schriftart wie Helvetica oder Ariel, sogenannte serifenlose Schriften oder eine Times, eine Schrift mit Serifen. Nur die Überschriften sollten eventuell durch eine zweite Schrift hervorgehoben werden.

 

Ein kleiner Hinweis: Wir arbeiten daran, bei den Überschriften evtl. Google-Fonts zu nutzen. Der Vorteil ist, dass die Schrift dann immer gleich aussieht, da die Informationen nicht vom Rechner des Besuchers sondern von einem Server von Google kommen. Der Nachteil ist, das jede Schriftart, die wir dann zur Verfügung stellen, ziemlich viel Leistung beansprucht und das System langsamer macht. Sobald wir eine Lösung haben, die uns zufriedenstellt, werden wir einige ausgewählte Schriften zur Verfügung stellen.

Wenn Dir page4 gefällt, teile diese Seite mit Deinen Freunden.....