In Joomla gibt es ein Modul, welches RSS-Feeds erzeugt, die andere abonnieren können. Das Problem ist nur, dass dieses Modul jeweils nur einen Feed für die gerade aktuelle Seite/Kategorie erzeugt.
RSS-Feeds kompakt ohne Erweiterung

Rechnung in Word - ohne Excel

Mit etwas einfacher Makroprogrammierung lässt sich in Word auch ohne Excel rechnen und somit eine Rechnung erstellen. Das Tutorial zeigt in mehreren Teilen, wie sich eine Rechnung mit allem Drum und Dran erstellen lässt.
Rechnung in Word - ohne Excel
Filter in zwei oder mehr Spalten zu setzen, die nicht voneinander abhängig sind, ist mit den Filtermöglichkeiten, die Excel bietet, nicht möglich. Angenommen Sie haben eine Tabelle mit ein paar Städten, zwei verschiedene Kategorien und zugehörigen Umsätzen. Aktivieren Sie über das Menüband Daten in der Gruppe Sortieren und Filtern den
Zwei Filter setzen mit ODER(...)
Die App kann bei time4mambo (https://www.time4mambo.de/downloads/category/8-apps.html) downgeloadet werden ----------------- Mir gefiehlen die guten alten Weblinks von Joomla nicht, als ich diese Site relaunchte. Beispielsweise war es nicht möglich die Sprache der
SEBLOD: Weblinks mit automatisierten Screenshots

Excel-Lösungen

  • Tutorials zu Fragen rund um Excel
  • Teilweise mit Makroprogrammierungen.
  • Fertige Excel-Sheets mit Teillösungen zum Download
Excel-Lösungen
Dieses Tutorial steht im Downloadcenter (http://www.time4mambo.de/downloads/viewcategory/3.html) als PDF zur Verfügung Einfache Rechnung Einzelpostenauflistung, Zwischensumme, Gesamtsumme und Mehrwertsteuer – für den Geschäftsmann
Rechnungserstellung mit Word und Excel
Seit Joomla 3 ist das CSS-Framework Bootstrap fester Bestandteil in Joomla und kann für eigene Templates somit einfach benutzt werden. Auf time4jaoomla erfahren Sie, wie es geht.
Bootstrap mit Joomla
Original-Auszug aus dem Buch Die Überlegung: Wir haben eine Kulturredaktion, der eine Kategorie zugeordnet ist. Und wir haben eine Politikredaktion, die in zwei Kategorien schreibt. Beide Redaktionen sollen nur ihre eigenen Beiträge bearbeiten, veröffentlichen und löschen können. Außerdem bekommen beide Redaktionen noch einen Chefreakteur zur Seite, der in allen
Fallbeispiel: Redaktionssystem
Schaut man sich das erste Mal einen CSS-Befehl an, führt das meistens zu einem panischen Weiterklicken, weil das alles sehr kompliziert ausschaut. Aber eigentlich ist es das nicht. Bei genauer Betrachtung ist CSS eigentlich sogar selbsterklärend und wenn man eine Weile damit umgegangen ist, geht es schon beinahe wie von
Wie funktioniert CSS
Das Tutorial steht auf time4mambo zum Download bereit: http://www.time4mambo.de/das-unternehmen/downloads/category/11-joomla-1-5.html (http://www.time4mambo.de/das-unternehmen/downloads/category/11-joomla-1-5.html) Dieses Tutorial ist ursprünglich für Joomla! 1.5 geschrieben worden. So ich es derzeit überblicke hat das Tutorial aber auch in Joomla!
Community Builder
Grafische Rollovers mit dem JCE zu machen ist ja recht einfach, weil der JCE hier schon fertige Einstellmöglichkeiten sehr einfach mitbringt.Aber wie wird ein Rollover-Effekt bei einer Textmarke erzielt? Eigentlich genauso wie ein grafischer Rollover-Effekt - nur mit einem klitzekleinen Trick: Zunächst schreiben wir den Text: Lass uns was schreiben und mittendrin einen
Text-Rollover mit dem JCE
Dieses Tutorial steht als PDF-Download im downgeladen (https://www.time4mambo.de/downloads/category/8-apps.html)werden. (https://www.time4mambo.de/downloads/category/8-apps.html) ---------------------- Als ich das erste Mal Seblod installiert hatte, habe ich große unverständliche Augen gemacht, ein wenig herumgeklickert, versucht die
SEBLOD: Einführung am Beispiel eines selbsterstellten Portfolios
deenfritptrues

Deutschsprachige Seblod-Community

Zu dritt haben wir die deutschsprachige SEBLOD™-Community gegründet. Neben Ressourcen und Webseiten , die mit SEBLOD™ gemacht sind, bieten wir ein Supportforum zu Fragen rund um SEBLOD™ an.

https://seblod.time4mambo.de


Para- und Nonverbale Kommunikation

Damit ist zum einen die Körpersprache gemeint und zum anderen die Art, wie wir kommunizieren. Zu letzterem gehören der Tonfall, Sprachmelodie, Artikulation, Sprechtempo und auch die Pausen zwischen den Wörtern.

Das reine Wort, der Inhalt, machen 7% unserer Kommunikation aus. Die para- und nonverbale Kommunikation zusammen 93%. Wie Sie 93% mehr Erfolg haben können, erfahren Sie auf dieser Website:

Körpersprache


Selbst geschrieben: SEBLOD - Das Handbuch

Das Content-Management-System Joomla! stellt dem Anwender bereits eine breite Palette von Funktionen zur Ausgestaltung von Webauftritten bereit. Bei erfolgreichen Webseiten steigt mit der Zeit aber der Anspruch in Bezug auf Funktionalität. Es ist nur eine Frage der Zeit, bis Sie an die Grenzen von Joomla! stoßen. Entweder greifen Sie dann in den Programmcode ein oder setzen auf ein Content Construction Kit (CCK). Das mächtigste dieser Art ist SEBLOD®. Wie Sie damit die Grenzen von Joomla! sprengen, zeigt Ihnen das vorliegende Handbuch.

SEBLOD - Das Handbuch


Selbst geschrieben: Joomla für Redakteure

Amazon:
Dieses essential bietet speziell Redakteuren einen Einstieg in das Content Management System Joomla!. Losgelöst vom „Ballast“ der zahlreichen Einstellungen und Möglichkeiten, die in anderen Büchern thematisiert werden, wendet sich dieses Buch ausschließlich an die eigentlichen Endnutzer des Systems und konzentriert sich dabei auf das Schreiben und Veröffentlichen von Beiträgen. Der erfahrene Autor und Joomla!-Kenner Axel Tüting erklärt jeden Schritt praxisnah und verständlich.

Joomla für Redakteure



Dankesagen...

Wenn die Tutorials dir weitergeholfen haben, dann kannst du mit einer kleinen Spende Danke sagen.

Newsletter

captcha 

Schulungen

Langjährige Erfahrung als Dozent zu verschiedenen Themen.
Ich komme zu Ihnen in die Firma oder organisiere Räume vor Ort. Dazu steht mir ein Netzwerk aus vielen Jahren Tätigkeit als freier Dozent zur Verfügung.
Weitere Informationen, sowie Referenzen finden Sie auf der Firmenseite time4mambo

    MS-Excel
    2003 / 2007/ 2010
    MS-Project
    2003 / 2007
    MS-Word
    2003 / 2007 / 2010
    MS-PowerPoint 2010
    Joomla! 1.5 / 2.5
    Körpersprache für Präsentation und zur verkaufsfördernen Motivation

    Weitere Themen auf Anfrage

Interesse? Lust? Zeit? Dann freue ich mich über eine eMail oder Anruf.
Kontaktdaten im Impressum


Newsletter

Nach Bestätigung des Buttons wird eine Bestätigungs-eMail versendet, die Sie bitte durch anklicken bestätigen. So kann Missbrauch mit Ihrer eMail-Adresse ausgeschlossen werden

Ich will ganz ehrlich zu Ihnen sein: Als ich anfing, mich mit SEBLOD zu beschäftigen, ein paar Einführungsvideos gesehen und das eine oder andere spärliche Tutorial gelesen hatte, wusste ich nicht wirklich, was ich nun tun sollte. Zwar hatte ich den generellen Zusammenhang schnell erfasst, aber wie man damit arbeitet und was am Ende dabei herauskommt, habe ich erst begriffen, als ich meinen ersten Versuch einer konkreten App gestartet habe. Darum möchte ich auch in diesem Buch erst einmal ganz vorsichtig anfangen. Ich denke, spätestens nach diesem Kapitel werden Sie die Möglichkeiten, die SEBLOD bietet, besser einschätzen können.

Für diesen detaillierten Blick habe ich eine einfache Newsausgabe gewählt, bestehend aus einem Titel, einem Bild, etwas Text und einem Link.

Lernziele in diesem Kapitel:

  • Grundsätzlicher Aufbau einer App.
  • Erste Beispiele mit den Details in den Formularen und Inhaltstypen.
  • Abhängigkeiten zwischen zwei Feldern.
  • Nutzung bereits vorhandener Felder.

Wir steigen mit dieser ersten App ein, bereits tiefer in die Materie ein. Dennoch »übersehe« ich großzügig einige Bereiche in dieser ersten App. SEBLOD ist sehr vielschichtig und bietet Ihnen einiges an Einstellungen und Möglichkeiten. Nach diesem Kapitel werden Sie wesentlich sicherer mit SEBLOD umgehen können und werden wissen, wo Sie was finden.

Download der App 4 Sie können diese App mit dem Namen app_cck_news.zip von meiner Website downloaden.

Die verwendeten Icons sind aus verschiedenen Iconsammlungen und dürfen frei benutzt werden. Ich habe die wichtigsten zusammengepackt, und sie können an der gleichen Adresse als images.zip heruntergeladen werden. Diese Icons laden Sie bitte in das images-Verzeichnis Ihrer Joomla!-Installation.

Sie können SEBLOD auf unterschiedliche Weise aufrufen, zum einen über das Komponentenmenü und SEBLOD 3.x, womit Sie stets in die Übersicht von SEBLOD gelangen. Dort können Sie sowohl das Menü links als auch im Kontrollzentrum die einzelnen Bereiche von SEBLOD ansteuern (siehe Bild 2.3 auf Seite 20).

Oder Sie rufen SEBLOD gezielt direkt über das neu angelegte Menü Konstruktion auf, das Sie in der Menüleiste ganz rechts nach der Installation finden. Dort finden Sie auch diverse Verlinkungen zu Dokumentationen seitens des SEBLOD-Teams. Die Links führen allerdings meist zu englisch- und französischsprachigen Seiten. Über dieses Menü kommen Sie auch nicht direkt zu den Optionen und Voreinstellungen. Sie müssen erst auf die »Übersicht« klicken: SEBLOD 3.x.

3.1           Die erste App: Newsanzeige

Der erste Schritt unterscheidet sich in der Ausgabe letztlich kaum von einem Joomla!-Beitrag. Dennoch ist ein eigener Beitrag mit eigenen Eingabemasken erstellt worden. Sie können dieses Beispiel auch sehr gut als Grundlage für ein eigenes Redaktionssystem nehmen, in dem Sie die Eingabe von Beiträgen für Redakteure vereinfachen. Um einen Eindruck zu bekommen, wie es aussehen soll – was also in den nachfolgenden Seiten gemacht wird –, zeigt der folgende Screenshot die fertigen News.

Mit nur sehr einfachen Formatierungsangaben in SEBLOD lassen sich die News ein wenig aufpeppen und unterscheiden sich dann auch deutlich vom herkömmlichen Joomla!-Beitrag. Mit Joomla! können Sie das gleiche Ergebnis erreichen, müssen jedoch bei der Eingabe sehr auf die richtige Form achten, müssen vielleicht sogar Tabellen benutzen und sollten sich auch detaillierter in CSS auskennen. Und Sie müssen es bei jedem Newsbeitrag erneut in dieser Form eingeben. SEBLOD hingegen stellt sehr einfache Mechanismen zur Verfügung, um es so aussehen zu lassen und ohne dass Sie sich bei der Eingabe Gedanken über das spätere Aussehen machen müssen.

03 02

Bild 3.1: Unsere News im Frontend

                                                              

4  http://www.time4mambo.de

Je nach verwendetem Template kann das bei Ihnen etwas anders aussehen. Sie sehen hier das Standard-Template Beez 3 in Joomla! 3.3.6. Zur Erinnerung: SEBLOD integriert sich komplett in Joomla!.

3.1.1       Einfache Anlage im App-Verzeichnis

Im App-Folder liegen zunächst die vorhandenen Apps. Das sind die Beiträge, Kategorien, Benutzer und Benutzergruppen, also die Joomla!-Standards. Diese Apps können Sie nach Belieben ändern und Ihrem Geschmack anpassen. Sie brauchen auch keine Angst zu haben, dass Sie damit die grundsätzlichen Joomla!-Bereiche zerstören. SEBLOD hat Ihnen, nach Standardvorlage, einen eigenen Satz Formulare zur Verfügung gestellt. Wichtig für uns an dieser Stelle ist, dass wir natürlich mit allem, was schon da ist, auch weiterarbeiten können bzw. all dieses in unseren eigenen Apps nutzen können.

Erstellen wir nun unsere News-App. Dazu einfach beherzt oben links auf Neu klicken. In das Feld Titel schreiben Sie den Namen Ihrer App, hier News.

Im Listenfeld Übergeordneter wählen Sie den Ordner Top aus, weil wir eine eigene App erstellen wollen und keine neue Gruppe, die in eine bestehende App integriert ist.

Sie können hier sehr schön sehen, dass ein Joomla!-Beitrag (als Beispiel genannt) aus vielen Untergruppen besteht. Und wenn Sie sich die Eingabe eines Joomla!-Beitrags in Erinnerung rufen oder nachschauen, werden Sie die einzelnen Strukturen dort auch wiederfinden.

03 04

Bild 3.2: Einstellungen der News-App

 

Klicken Sie auf den Button Editor, öffnet sich ein WYSIWYG-Editor, in dem Sie eine Anmerkung/Beschreibung eingeben können. Das ist besonders dann sinnvoll, wenn Sie eine umfangreichere App erstellen und auch noch Monate später nachlesen möchten, was Sie sich heute dabei alles so gedacht haben.

Der Status zeigt Ihnen an, ob die App veröffentlicht oder gesperrt ist, was Sie aber erst nach dem ersten Speichern sehen.

App Root (1. Ebene) zeigt an, ob es sich um die Hauptebene Ihrer App handelt oder um eine Unterstruktur. In unserem Fall haben wir nur eine Ebene, und das ist natürlich auch die erste Ebene. Hier wählen Sie Ja.

Hinweis

Es ist denkbar, dass Sie innerhalb einer bestehenden App eine neue App erstellen, weshalb Abweichungen vom übergeordneten Verzeichnis und der ersten Ebene auftreten können. In unserem Beispiel liegt beides auf der ersten Ebene.

Der Haupteintrag ist sehr wichtig. An dieser Stelle legen Sie fest, dass diese App bzw. diese Struktur später ausgewählt werden kann.

Sie können ein eigenes Symbol angeben. Dieses Symbol wird überall dort angezeigt, wo Sie die App auswählen können. Also beispielsweise wenn Sie einen neuen Inhaltstyp anlegen möchten. Lassen Sie dieses Feld leer, wird das Standardsymbol

genommen.

03 03

Bild 3.3: Ein eigenes Symbol für unsere App

 

Die Elemente sind sehr interessant. Sie legen an dieser Stelle fest, für welche Elemente Sie Ihre App verwenden möchten. Es ist gut denkbar, dass Sie eine App nur für Suchtypen oder nur für die Felder als Untergruppe anlegen möchten. Vielleicht brauchen Sie auch eine App, weil Sie ein Modul erstellen möchten, aber mit der App selber nicht weiterarbeiten wollen. Wie Sie weiter unten im Buch sehen werden, lassen sich sehr unterschiedliche Strukturen erstellen.

In unserem Beispiel muss die App für Formulare, Inhaltstypen und für die Felder zur Verfügung stehen. Die Elemente dienen der weiteren Bearbeitung der App und kennzeichnen auch, was mit der App möglich ist. Weiter unten im Buch werden wir Apps in der App erstellen. Da das verwirrend klingt, bevorzuge ich den Begriff »Struktur« statt »App«. Eine Unterstruktur in einer Hauptstruktur klingt angenehmer.

Die Farbe dient nur der besseren Übersicht. Überall, wo die App angezeigt wird, erscheint ein kleines Symbol (Kreis oder Oval) mit Ihrer Farbe in der Zeile Ihrer App. Darin stehen der oder die Buchstaben, die Sie in das Feld Zeichen eingeben. Sie können maximal zwei Buchstaben eingeben. In meinem Beispiel kennzeichne ich die News passenderweise mit einem »N« und einer grauen Farbe (was diesem Buch geschuldet ist). Die Zeichenfarbe gibt die Schriftfarbe in Ihrem Farbkreis an.

Nach dem Speichern taucht die News-App in der Liste auf. Sie haben hier stets den Überblick über die Inhalte Ihrer App. Momentan wird bei Ihnen noch nichts stehen, aber zum Ende dieses ersten Beispiels werden Sie in der Zeile einige Informationen erhalten.

03 05

Bild 3.4: Die App im Überblick

 

3.1.2      Direkt zu den Feldern

Vier Felder benötigen wir für unsere News-App. Wählen Sie im SEBLOD-Menü die Felder aus und erstellen Sie hier die nachfolgenden Felder:

  • Titel
  • Text
  • Bild
  • Verweis

Feldtyp: Text

Beginnen wir zunächst mit dem Feld für den Titel. Nachdem Sie in der Übersicht auf Neu geklickt haben, ist als einziges Pflichtfeld das Titelfeld gekennzeichnet, und wenn Sie dort etwas eingetragen haben, auch das Namensfeld. Ich nenne mein Newstitelfeld auch genau so: Titel.

Hinter Name verbirgt sich der Alias. Den Alias (Namen) können Sie frei lassen. SEBLOD beschreibt, genauso wie Joomla!, dieses Feld aus dem Titel selbstständig. Leerzeichen werden mit Unterstrichen ersetzt und Umlaute sowie Sonderzeichen gelöscht. Normalerweise reicht es, SEBLOD den Alias zu überlassen. Erst wenn Sie Felder mit gleichen Namen haben, ist es erforderlich, den Alias anzupassen. Der Alias wird sowohl intern gebraucht als auch bei Abhängigkeiten, wie sie weiter unten beispielsweise beim Feld X beschrieben sind. Eventuell greifen Sie auch in Programmierungen auf den Alias zu. Sie können den Alias vor dem ersten Speichern anpassen, danach ist er festgeschrieben und kann nicht mehr verändert werden.

Als App Ordner müssen Sie nun News auswählen. Dieser stehen etwas weiter unten in der langen Liste. Auch hier können Sie wieder einen Beschreibungstext mit dem Editor eingeben und sehen nach dem Speichern, ob das Feld veröffentlicht ist.

Alles, was in dem Bereich Konstruktion steht, ergibt sich aus der Auswahl hinter Typ. Der Typ ist quasi eines der großen Geheimnisse von SEBLOD und lässt bereits in der reinen Auswahlliste die vielfältigen Möglichkeiten von SEBLOD erahnen. Für unser Titelfeld ist Text die richtige Auswahl.

Im Bereich Konstruktion sehen wir das Bezeichnungs-Feld. Die Eingabe hier wird vor dem Eingabefeld später in der Eingabemaske und, wenn Sie möchten, auch bei der Ausgabe angezeigt. Im Standard-Wert können Sie einen Titel vorgeben, müssen dann aber bedenken, dass der Alias jeweils angepasst werden muss, da es in Joomla! keine zwei Beiträge mit gleichen Alias geben kann.

Mindest- und Maximallänge beziehen sich auf den einzugebenden Text.

Minimallänge statt 0

Sie könnten statt der 0 auch eine Minimallänge angeben, um eine Eingabe zu erzwingen. SEBLOD bietet aber an anderer Stelle eine einfachere Möglichkeit, ein Feld als Pflichtfeld zu kennzeichnen.

Die Größe bezieht sich auf den Eingabebereich des Feldes später in den Formularen. Wird der Wert zu klein gewählt, kann unter Umständen nicht das ganze Textfeld beschrieben werden. Deswegen scheint es sinnvoll zu sein, die vorgegebenen Werte einfach zu übernehmen.

Kommen wir zum Bereich Speicher. Viele Fehler, Ungereimtheiten und Verzweiflungsflüche haben ihren Ursprung an dieser Stelle. Weiter unten im Buch rücke ich dem Speicherbereich näher auf die Pelle, bis dahin folgen Sie einfach meinen Vorschlägen.

Im Speicher-Bereich wird festgelegt, wie und wo SEBLOD den Inhalt unseres Feldes in der Datenbank speichern soll. Wie ich ja schon schrieb, erzeugt SEBLOD am Ende einen neuen Beitrag, der das Aussehen unserer App hat. Ein Beitrag wird in Joomla! mit der Artikel-ID einwandfrei gekennzeichnet. SEBLOD vereinfacht uns diesen Vorgang etwas, indem wir nur unseren Titel in das Artikelfeld der vorhandenen Artikeltabelle einzufügen brauchen.

Wir teilen also SEBLOD an dieser Stelle mit, dass unser Newstitel identisch mit dem Titel eines Beitrags ist. Dazu wählen wir zunächst als Format Standard aus. Wir teilen SEBLOD mit, dass es sich um ein Feld handelt, das in einem Article verarbeitet wird. Und schließlich greifen Sie direkt auf die Tabellenspalte title zu, indem Sie entweder auf die kleinen unscheinbaren blauen Pfeile klicken und die Spalte auswählen oder den Namen title per Hand in das Feld eintragen. Besser ist es aber, die Auswahl zu benutzen, um die Fehlerquelle »falsche Eingabe« von vornherein zu umgehen.

03 06

Bild 2.5: Auswahl der Datenbanktabelle

 

Danach öffnet sich ein kleines Fenster, in dem Sie alle Tabellenspalten sehen, in diesem Fall die der Datenbanktabelle für Artikel: #__content.

Platzhalter für das Datenbankpräfix

Die Zeichenkombination #__ wird in Joomla! als Platzhalter für das Datenbankpräfix benutzt. Jede Joomla!-Datenbank hat ein eigenes Präfix, was ein guter Sicherheitsschutz ist. Denn kennt man das Präfix nicht, kann man nicht auf die Datenbanktabellen und deren Inhalte zugreifen. Meine Tabelle heißt bdayo_content. Ihre hat ein anderes Präfix, und damit Sie verstehen, wovon ich spreche, wird dieses Präfix als #__ geschrieben. Die Tabelle selbst heißt dann __content (PREFIX_content). Zusammen mit dem Platzhalter ergeben sich zwei Unterstriche: #__content.

03 07

Bild 3.6: Ein kleiner Auszug aus #__content. Hier finden wir später auch usnere News wieder.

 

Damit können SEBLOD und Joomla! später unsere News einwandfrei zuordnen.

Feldtyp: Bild

Am besten nun auf Speichern & Neu klicken. Das nächste Feld soll ein Bild sein, und zwar eins, das wir hochladen können. Dazu wählen Sie bei Typ unter dem Abschnitt Upload (Hochladen) das Feld Image (Bild) aus.

03 08

Bild 3.7: Typauswahl: ein Bild Hochladen.

 

Der Bereich Konstruktion verändert sich nun immens im Vergleich zum Textfeld. Auch kommt ein neuer Bereich dazu: Prozesse.

Die Bezeichnung ist identisch mit dem Textfeld und gibt das Labelfeld/die Bezeichnung des Feldes an. Auch hier können Sie einen Standardwert eingeben: dazu einfach Pfad und Bildname eingeben, beispielsweise images/bild.jpg.

Im Ordner geben Sie an, wo SEBLOD die hochgeladenen Bilder ablegen soll. Sie können nun vorgeben, dass pro Benutzer ein eigenes Verzeichnis angelegt werden soll. Das ist sehr interessant, wenn Sie beispielsweise ein Redaktionssystem mit mehreren Autoren einrichten und jeder seinen eigenen Ordner mit seinen Bildern erhalten soll. Des Weiteren können Sie auch vorgeben, dass jeder Inhalt – also jeder Beitrag – einen eigenen Ordner erhalten oder alles in einem Verzeichnis abgelegt werden soll. Erwarten Sie viele Bilder, ist eine entsprechende Planung durchaus sinnvoll.

Die Maximalgröße gilt für das Hochladen eines Bildes. Machen Sie sich bewusst, dass alles, was in einem Beitrag angezeigt wird, zunächst in den Browsercache des Besuchers Ihrer Website geladen werden muss. Große Bilddateien nehmen Festplattenplatz beim Besucher weg und sorgen eventuell für lange Ladezeiten Ihrer Website. Besser ist es daher, die Grafiken vor dem Upload auf die richtige Größe anzupassen.

Das Zeige Löschen-Kästchen ist eine unscheinbare Checkbox, die bei Auswahl Zeige neben dem Bild-Upload angezeigt wird, wenn bei den News ein Bild hochgeladen wurde, also frühestens nach dem ersten Speichern. Aktivieren Sie das Kästchen, löschen Sie das vorhandene Bild.

Die Größe bezieht sich auch hier auf den Eingabebereich des Feldes. Es kann also sein, dass der korrekte Pfad nicht angezeigt wird, wenn Sie hier einen zu kleinen Wert auswählen. Die vorgegebenen 32 funktionieren aber bisher zuverlässig.

Bei den erlaubten Erweiterungen lässt sich einiges in den Optionen einstellen. Das voreingestellte Image bezieht sich auf alle Bilddateien. Details dazu werden weiter unten im Buch behandelt.

Zeige Vorschau ist sehr interessant. Damit ist gemeint, wie das Bild im Backend nach dem Editieren der News angezeigt werden soll. Sie können es ganz verbergen, lediglich den Bildnamen anzeigen (der bei Anklicken das Bild in einer Lightbox öffnet), ein Bildsymbol oder ein Bild in einer beliebigen Größe. Die Auswahl Bild stellt zunächst die Originalgröße des Bildes dar, sofern Sie das weiter unten bei den Prozessen nicht

verändern.

Sollten Sie ein sehr großes Bild hochgeladen haben, wird die Gesamtgröße auch angezeigt – weshalb es sinnvoll sein kann, entweder das Bild auf eine Einheitsgröße zu bringen oder eines der Miniaturbilder auszuwählen. Bei den Prozessen können Sie bis zu zehn verschiedene Miniaturbilder angeben und die Größe selbst bestimmen. Es bleibt auch Ihnen überlassen, wie das Originalbild angepasst werden soll.

Bei der dynamischen Anpassung erscheint mir die Bildqualität ein wenig besser. Aber ich habe nicht das absolute grafische Auge, weshalb ich dafür nicht meine Hand ins berüchtigte Feuer legen mag. Auch sind einige Techniken der Bildanpassung in der Auswirkung gleich.

03 09

 

 

 Bild 3.8: Das Original: 260 x 430.

 

 

 

 

 

 

 

 

 

 

 

 

 

03 10Bild 3.9: Zuschneiden Mitte: 100 x 100.

 

 

 

03 11Bild 3.10: Schrumpfen, Strecken, Dynamisch Schrumpfen, Dynamisch Strecken: 100 x 100.

 

 

 

03 12Bild 3.11: Dynamisch: Max Anpassung 100 x 100.

 

 

 

Wenn Sie Zeige spezifischen Pfad auf Zeigen stellen, wird Ihnen nach dem ersten Speichern der Pfad und der Bildname im Backend ausgegeben. Sie können ein Bezeichnungsfeld beschriften. In meinem Beispiel habe ich Dein Ordner hineingeschrieben.

03 13

Bild 3.12: Zeige spezifischen Pfad.

Der erweiterte Modus bietet unter anderem das Alternativattribut (alt-Attribut im HTML beim img-Element). Neben dem alternativen Text können Sie auch einen Titel beim Bild angeben. Zusätzlich zu eventuellen SEO[1]-Gründen ist das alt-Attribut im Zusammenhang mit Barrierefreiheit sehr wichtig.

Immer mit Alternativtext

Braillegeräte für Blinde können logischerweise keine Bilder vorlesen – sehr wohl aber den Alternativtext, weshalb dieser bei Grafiken, die nicht dem Design dienen, immer angegeben werden sollte.

Bei beiden Möglichkeiten können Sie noch einmal eine Unterauswahl treffen – also ob der Titel und oder der alternative Text angegeben werden soll – und dazu ein eigenes Beschriftungsfeld angeben.

Bei den Prozessen geben Sie zunächst an, wann das Miniaturbild erstellt werden soll. Immer wenn nicht vorhanden prüft zunächst, ob das Miniaturbild schon vorhanden ist. Das ist dann sinnvoll, wenn Sie mehrere Miniaturbildeinstellungen haben, die alle die gleiche Größe haben. Das Miniaturbild ist letztlich immer gleich, wird aber entsprechend angepasst.

Im obigen Beispiel meiner Einschulung ist das Miniaturbild immer 100 x 100 Pixel groß und wird durch Strecken, Schrumpfen etc. lediglich etwas anders angezeigt. Stelle ich hingegen Immer ein, wird stets ein neues Miniaturbild angelegt, egal ob schon vorhanden oder nicht. Beim Hochladen bietet nicht nur die beste Leistung, sondern erzeugt auch nur ein Miniaturbild. Allerdings muss die Größe dann immer gleich sein. Wird im Nachhinein die Größe verändert, muss das Bild erneut hochgeladen werden. Zumindest war das so bei meinen Tests.

Anzeige als Standard gibt an, welche Bildeinstellung für das Frontend verwendet werden soll.

Sie können Bild so stehen lassen und haben dann immer eine Einstellung für das Originalbild. Aber Sie können natürlich auch diese Größe anpassen und somit maximal elf individuelle Einstellungen für das immer gleiche Bild vornehmen. Der Vorteil liegt darin, dass Sie sich später eventuell für eine andere Größe entscheiden oder bei den verschiedenen Formularen jeweils andere Bildauflösungen angeben möchten. Vielleicht möchten Sie aber mit Abhängigkeiten oder Programmierungen auf verschiedene Bildauflösungen zugreifen. Die Miniaturbilder werden immer jeweils passend angelegt.

Im Bereich Speicher muss zunächst wieder Standard und auch unsere Artikel-Tabelle ausgewählt werden. Klicken Sie auf die beiden blauen Pfeile und wählen Sie die Spalte images aus. Alles speichern, und dann geht’s an das nächste Feld für unsere News-

App.

Feldtyp: WYSIWYG-Editor

Dieses Feld ist etwas überschaubarer als das Bild-Feld. Aber ein paar interessante Dinge können wir auch hier einstellen. Unter Typ finden Sie den WYSIWYG[2]-Editor unter dem Abschnitt Textbereich.

Der Standard Wert ist hier schon vorgegeben – mit dem Editor. Den können Sie sich in der ganzen Pracht anschauen, wenn Sie auf den Editor-Button klicken. Welchen Editor Sie benutzen möchten, können Sie direkt darunter auswählen. Standardmäßig hat Joomla! den TinyMCE und den Code Mirror installiert. Haben Sie andere Editoren installiert, werden diese hier auch angezeigt. Alternativ können Sie Kein auswählen. Allerdings hat dann der Feldtyp nicht so viel Sinn, zumal es als Feldtyp auch einen Textbereich gibt, der keinen Editor hat.

Unter Ort legen Sie fest, wie der Editor und somit der Eingabebereich angezeigt werden: entweder als modales Fenster – das ist gleichbedeutend mit dem Button Editor oben rechts, wo Sie eine Beschreibung zu dem Feld eingeben können, oder Sie wählen Standard aus – das ist so, wie Sie es kennen bei Joomla!: Eingabe direkt.

Bei Breite/Höhe können Sie die Größe des Editors angeben.

Der Importierer gibt Ihnen die Möglichkeit, festzulegen, ob immer der Volltext angezeigt wird oder ein Intro[3]/Teaser[4] und erst nach Anklicken des Weiterlesen-Buttons der ganze Text. Das setzt natürlich voraus, dass Sie Ihren Text entsprechend gestalten.

Speichern kennen Sie schon, als Format wählen Sie Standard, in der Artikel-Tabelle und mittels der Spaltenauswahl finden Sie die Spalte fulltext.

Joomla!-Editor JCE

Mit dem kostenlosen Joomla!-Editor JCE[5] können Sie verschiedene Profile anlegen und Ihren Autoren sehr individuelle Editoroberflächen zur Verfügung stellen.

Feldtyp: Link

Den Feldtyp Link finden Sie im Abschnitt Inhalt, der relativ weit oben steht. Im Backend geben Sie bei den News erst den Verweis ein, dann, mit welchem Text der Verweis dargestellt werden soll, und wählen dann aus, wie der Verweis aufgerufen werden soll.

03 14

Bild 3.13: Linkeingabe im Backend

 

Unter Zeige Link geben Sie die Bezeichnung für das Linkeingabefeld ein. Sie können den Link so anzeigen, wie er eingegeben wird – also als vollständige URL oder stattdessen mit einem Verweisnamen. In Zeige Text wählen Sie aus, ob der Verweisname benutzt werden soll (Zeige) oder die URL (Verberge). Darunter können Sie eine Bezeichnung für dieses Feld eingeben, sofern Sie Zeige ausgewählt haben. Auch können Sie dann einen Verweisnamen als Standard Text vorgeben. Ebenso können Sie hier einen Standardlink vorgeben.

Mit Zeige Ziel ist target[6] gemeint, also wie sich der Link verhält, wenn er angeklickt wird.

  • _blank öffnet ein neues Browserfenster.
  • _self öffnet den Verweis im aktuellen Fenster.
  • _parent und _top wurden in Framesets, die heute normalerweise keine Anwendung mehr finden, benutzt, um das ganze oder Teile des Framesets zu »sprengen«. Sie bewirken außerhalb von Framesets das Gleiche wie _self.

Wenn Sie Zeige Ziel auf Zeige gesetzt haben, können Sie später das Ziel ändern. Andernfalls wird das Standard Ziel benutzt.

Sie können bei den Links eine spezielle CSS-Klasse angeben. Die CSS-Klasse können Sie dann in der CSS-Datei des Templates formatieren. Angenommen, Sie haben die Klasse schatten vergeben, dann können Sie in der CSS-Datei den Link folgendermaßen ansprechen:

001

a.schatten { … }

002

a.schatten:link { … }

003

a.schatten:visited { … }

004

a.schatten:hover { … }

005

a.schatten:active { … }

Sie können sich das Feld für die Klasse auch anzeigen lassen (Zeige Klasse), um für bestimmte News einem Verweis eine eigene Klasse zuzuordnen, den Sie dann mittels CSS individuell gestalten können.

Unter Zeige Vorschau können Sie einstellen, ob eine Vorschau angezeigt wird oder nicht. Die Vorschau ist natürlich erst nach dem ersten Speichern sichtbar.

Größe, Mindestlänge und Maximallänge sind analog zum Textfeld.

Beim Speichern weichen wir nun aber ein wenig vom Standard ab. Als Erstes wählen wir hier das Format Benutzerdefiniert. Wir bleiben allerdings in der Artikel-Tabelle. Wenn Sie nun die Spaltenauswahl öffnen, werden Sie keine Spalte Links finden. SEBLOD benutzt für alles, was nicht sauber zuzuordnen ist, meist die Spalte introtext, die Bestandteil der Artikel-Tabelle ist. Das wählen wir auch aus.

 

Wichtig!

Wenn Sie hier nicht Benutzerdefiniert, sondern Standard auswählen, werden die Links nicht gespeichert.

3.1.3       Die Felder im Überblick

Das waren die vier Felder, die durchaus schon ein wenig gezeigt haben, was in SEBLOD möglich ist. Hier noch einmal ein Überblick über unsere Felder:

03 15

Bild 3.14: Unsere vier Felder für unsere News im Überblick.

Nun erstellen wir etwas zum Eingeben und Ausgeben.

3.1.4      Eine Form muss her

Gehen Sie nun zu Formulare & Inhaltstypen. Es wird Zeit, dass wir auch sehen können, was wir angelegt haben. In der Übersicht sehen Sie die vorangelegten Joomla!/SEBLOD-Inhaltstypen Article, Category, User und User Group. Noch stehen unsere News nicht in der Auflistung. Das werden wir aber gleich ändern.

03 15 b

Bild 3.15: Die Filterung in der Übersicht der Inhaltstypen findet und offenbart die News

 

Wenn Sie später viele Apps in der Auflistung haben, können Sie an dieser Stelle links die Übersicht filtern. Sie können auch eine Menge Apps finden, die Sie bisher eventuell noch gar nicht wirklich wahrgenommen haben. Die vielen Apps im App Ordner finden Sie hier wieder – je nachdem, wie sie angelegt sind und welche Aufgabe sie haben. Ordnung in dieses Verwirrspiel wird weiter unten gebracht. An dieser Stelle empfehle ich Ihnen, den Status im letzten Filterfeld auf An zu setzen und im vorletzten Filter auf Alle Verzeichnisse. Eigentlich sollte das so voreingestellt sein.

Klicken Sie nun oben links auf Neu, damit Sie Ihren eigenen Inhaltstyp anlegen, und wählen Sie dann News aus. Wenn Sie beim Erstellen der App ein eigenes Symbol angegeben haben, erscheint das hier zur Auswahl, ansonsten sehen Sie den Standardbutton. Nach der Auswahl benötigt SEBLOD stets ein paar Sekunden, bis das Fenster komplett aufgebaut ist. Oben rechts sehen Sie einen leicht grauen Ladebalken, der aber wirklich schwer zu erkennen ist.

Was Sie in Titel eintragen, ist das, was Sie später bei der Beitragsübersicht angezeigt bekommen, wenn Sie eine neue News eingeben wollen. In meinem Beispiel habe ich auch News eingetragen.

Sie müssen nun, obwohl Sie bei der Auswahl eindeutig News angeklickt haben, im App Ordner explizit die News auswählen. Erst dann werden die Formulare, die wir jetzt erstellen werden, auch unserer App eindeutig zugeordnet. Es wäre auch denkbar, dass Sie ein Formular mit den Newsfeldern in einer anderen App erstellen, weshalb Sie hier die zugehörige App auswählen müssen. In unserem Fall ist das auch unsere News-App.

Darunter sehen Sie im linken Teil vier Formularmöglichkeiten zur Ein- und Ausgabe: Admin Formular, Seitenformular, Intro und Inhalt. Die drei rechten Buttons (Konfiguration, Felder und Template) sehen wir uns etwas später an. Standardmäßig sollte Felder ausgewählt sein. Zunächst beschäftigen wir uns mit den Formularen. Bevor wir dort tiefer einsteigen, zunächst ein kleines Kapitel über die Handhabung dieser Ansicht.

Handhabung der Formulare & Inhaltstypen

Sie werden einen großen Teil Ihrer Zeit mit SEBLOD an dieser Stelle zubringen, weshalb Sie diesen Bereich auch einwandfrei bedienen können sollten. Es gibt hier einige sehr spannende Dinge zu entdecken.

Bei den Feldern ist Ihnen vielleicht schon der kleine, orangefarbene, nach unten weisende Pfeil aufgefallen, wie Sie ihn im Speicher-Bereich finden. Bei den Inhaltstypen haben Sie ihn weiter oben und können hier Einstellungen zu Bedienung, Art und Suche des Inhaltstyps vornehmen. Hier finden Sie auch den Alias. Im rechten Bereich der Konstruktion finden Sie verschiedene Filter.

  • Mit dem Filter, der standardmäßig mit Alle Typen angezeigt wird, können Sie gezielt bestimmte Typen anzeigen lassen.
  • Mit dem Rautenfilter (#) listen Sie alle Felder auf, die mit dem ausgewählten Anfangsbuchstaben beginnen.
  • Sie können auch gezielt in den bereits vorhandenen Formularen & Inhaltstypen suchen.

Voreingestellt ist bei uns im vierten Filterfeld die News, weshalb vermutlich alle anderen Filter derzeit keinen nennenswerten Erfolg haben werden. Sie können natürlich die einzelnen Filter beliebig miteinander kombinieren. Ich verspreche Ihnen, dass Sie dies einige Male gebrauchen werden.

Um Felder zu verschieben, gibt es verschiedene Möglichkeiten. Sie können mehrere Felder markieren, indem Sie die Großschreibtaste festhalten und mit der linken Maustaste die einzelnen Felder anklicken. Danach können Sie mit den Pfeilbuttons diese Felder entsprechend verschieben. Nach rechts werden die Felder aus dem Formular in die Übersicht verschoben, nach links die Felder aus der Übersicht in den Bereich des Formulars, den Sie mit einem kleinen Punkt markiert haben. Beim #MAINBODY beispielsweise ist ganz rechts ein kleiner Radiobutton, so auch in den anderen Positionsbereichen. Markierte Felder, die Sie nach unten oder oben bewegen möchten, werden dorthin verschoben, wo Sie den Punkt gesetzt haben.

3 16

Bild 3.16: Schieberei bei den Formularen

 

Sie können aber auch die Felder einzeln verschieben, wenn Sie den Pfeil im Feld anklicken. Der ist zunächst unscheinbar grau, füllt sich aber mit Farbe, wenn Sie die Maus darüber bewegen. Direkt daneben haben Sie einen Anfasser, um das Feld bei gedrückter linker Maustaste frei in der Reihenfolge zu bewegen. Allerdings können Sie so kein Feld von links nach rechts bewegen, wohl aber von der Übersicht in das Formular.

Mit dem Plusbutton können Sie jederzeit ein neues Feld anlegen. Wir hätten also unsere vier Felder auch an dieser Stelle anlegen können. Allerdings ist gerade bei größeren Apps mit vielen Feldern die Übersicht im Menü Felder besser als an dieser Stelle. Außerdem müssen Sie hier stets ein wenig im Modalfenster scrollen, und mir ist es auch schon passiert, dass einmal etwas abgeschnitten wurde. Aber wenn Sie bemerken, Sie haben ein Feld vergessen oder möchten Ihr Formular um ein, zwei Felder erweitern, dann ist das hier durchaus eine praktikable Lösung.

Die Nummern bieten verschiedenste Einstellungsmöglichkeiten und verändern jeweils die Formularübersicht links etwas. Mit der Nummer 3 können Sie beispielsweise angeben, ob das Feld erforderlich oder optional ist.

Mit dem Punkt am Ende der Zahlenreihe (1 bis 6) können Sie die Größe der einzelnen Positionen ändern und zusätzliche Angaben zu den Formularbereichen machen.

Mit dem Pfeil nach unten übernehmen Sie das „Vorformular“. Im Seitenformular können Sie so alle Felder aus dem Adminformular übernehmen und müssen nicht noch einmal alles neu anlegen. Sie können aber dann natürlich das Seitenformular individuell gestalten. Umgekehrt können Sie im Adminformular die Felder aus dem Seitenformular übernehmen, allerdings jeweils nur die Felder und nicht bereits angelegte Strukturen. Gleiches gilt für Einleitung und Inhalt. Der Pfeil nach unten betrachtet die Bereiche als zwei Zweiergruppen, die untereinander in beide Richtungen ihre Felder weitergeben, aber nicht die beiden Gruppen. Also können Sie keine Felder aus dem Eingabebereich auf den Ausgabebereich übertragen.

Sie können natürlich auch die einzelnen Felder überarbeiten. Dazu einfach den Stift ganz vorn im jeweiligen Feld anklicken.

03 17

Bild 3.17: Felder aus dem Formular heraus editieren

 

Das Geheimnis des Schlosses

Das Schloss ist nur und ausschließlich im Zusammenhang mit Feldern, die Sie aus dieser Ansicht heraus neu anlegen, interessant. Auf bereits vorhandene Felder hat das Schloss keinen Einfluss.

03 32

 

Bild 3.18: Geschlossenes Schloss und neues Feld ergeben ein exklusives Feld.

 

Wenn Sie ein neues Feld mit geschlossenem Schloss anlegen und speichern, erhalten Sie quasi ein exklusives Feld, das nur und ausschließlich in der geöffneten Inhaltsform sichtbar ist.

03 33

Bild 3.19: Das exklusive Feld ist nur in diesem Inhaltstyp sichtbar.

 

Wenn Sie also einen anderen Inhaltstyp anlegen, können Sie auf dieses Feld nicht so ohne Weiteres zugreifen. Es wird nicht aufgelistet, egal wie Sie den Filter einstellen. Öffnen Sie hingegen das Schloss und legen dann ein neues Feld an, können Sie in jedem Inhaltstyp auf dieses Feld zugreifen.

03 34Bild 3.20: Offenes Schloss = neues Feld für alle Inhaltstypen.

 

Die Formulararten im Überblick

  • Das Admin Formular ist die Eingabemaske im Backend, die Sie standardmäßig ab der Rechtegruppe Moderator erreichen können, also die Maske, die Sie normalerweise von den Joomla!-Beiträgen im Backend kennen.
  • Das Seitenformular rufen Sie im Frontend auf, wenn Sie eine News editieren oder als Autor einen neuen Beitrag/eine neue News einreichen.
  • Intro ist das, was zum Beispiel bei Blogbeiträgen angezeigt wird, bevor Sie auf Weiterlesen klicken. Der einzelne Blogbeitrag ist identisch mit dem Intro.
  • Der ganze Beitrag mit dem Inhalt.

Eingabe der News: Admin Formular

Links sind die Positionen des Templates. Ganz oben in der horizontalen Buttonzeile haben Sie einen Button mit der Beschriftung Positionen. Sie sehen unter dem Button Positionen, die nicht angezeigt werden, beispielsweise alle #LEFT- oder #HEADERPositionen. Wie wir an die herankommen, erkläre ich etwas später, wenn wir die Ausgabe unserer News im Frontend aufhübschen.

Sie erstellen hier das Formular zur Eingabe Ihrer News im Backend, was Sie dann unter Beiträge auswählen können. Die Erstellung ist denkbar einfach: Sie schieben einfach die Felder, die Sie angezeigt haben möchten, an die verschiedenen Positionen. Wichtig ist dabei lediglich, dass Sie mindestens ein Feld im #MAINBODY stehen haben, da sonst nichts angezeigt wird.

Wenn Sie einen neuen Inhaltstyp anlegen, werden vermutlich bereits alle Felder im #MAINBODY stehen. Sie können aber diese Felder beliebig anders anordnen und »herumschieben«. Andere Positionen bedeuten eine andere Anordnung. Beispielsweise können Sie die Felder nebeneinander ausgeben, wenn Sie die oberen oder unteren Positionen entsprechend belegen. Später werden Sie sehen, dass Sie die einzelnen Positionen auf unterschiedliche Art arrangieren und so gerade auch bei größeren Inhaltstypen alles ein wenig übersichtlicher gestalten können.

Das war‘s an dieser Stelle zunächst. In dieser ersten App belasse ich es beim Admin Formular.

Ausgabe im Frontend: Inhalt

Zur Anzeige im Frontend wechseln Sie oben auf Inhalt. Diesen Inhalt sehen Sie, wenn Sie den Menüverweis aufrufen, der die News anzeigt.

03 18

Bild 3.21: Frontend-Ausgabe

 

Für die Ausgabe benötigen wir nicht alle Felder. Es reichen Textfeld, Newsbild und News-Verweis. Den Text positioniere ich im #MAINBODY und die beiden anderen Felder im #SIDEBODY-A. Wenn Sie das jetzt aufrufen, stehen der Verweis und das Bild rechts neben dem Text. Ich möchte es aber links vom Text haben. Damit das klappt, klicken Sie oben rechts in den Optionen auf Template.

03 19

Bild 3.22: Um die Positionen im Template einzustellen, zuerst das Template auswählen ...

Hier gibt es eine Menge zum Einstellen. Für uns ist zunächst im Bereich Positionen die Linke Spalte (Breite) interessant. Tragen Sie dort 200 px ein. Zwei Zeilen darunter geben Sie an, dass der Seitenteil-a links stehen soll. Für die Rechte Spalte (Breite) können Sie eine 0 eingeben. Für unsere Ausgabe reicht das so.

03 19 b

Bild 3.23: ... und dann die Positionen im Detail ansprechen.

Wenn Sie Werte für die Kopfzeile oder die Fußzeile eingeben, sehen Sie in der Formularübersicht auch die Positionen für #HEADER und #BOTTOM.

Wechseln Sie wieder zu den Feldern zurück, sehen Sie auch die Positionen für #LEFT. Wenn Sie in der Rechten Spalte (Breite) eine 0 eingetragen haben, sehen Sie die Positionen für #RIGHT nicht mehr. Andernfalls wird Ihre Positionsliste entsprechend länger.

Ein paar Kleinigkeiten fehlen noch: Momentan würden in der Ausgabe auch die Label-/ Bezeichnungstexte angezeigt werden. Um sie auszuschalten, gibt es zwei Möglichkeiten.

1      Wollen Sie nur einzelne Beschreibungstexte nicht anzeigen, geben Sie im jeweili-gen Bezeichnungsfeld ein clear ein.

03 20

Bild 3.24: Einmal mit und einmal ohne Ausgabe des Bezeichnungsfeldes.

 

2      Sie wechseln noch einmal in die Template-Optionen und setzen im Bereich Felder die Zeige Bezeichnung auf Verberge. Damit setzen Sie alle Bezeichnungsfelder auf nicht anzeigen und brauchen nicht überall ein clear einzugeben.

03 21

Bild 3.25: Bezeichnungsfelder werden nicht angezeigt.

 

Wenn Sie einen Rahmen oder farbliche Absetzungen etc. in die Ausgabe einarbeiten möchten, setzen Sie zuerst bei den Feldern in der gewünschten Position unter der Spalte die Variante seb_css3 und klicken dann auf das kleine Pluszeichen, das daneben erscheint.

03 22

Bild 3.26: Mit dem Pluszeichen das Aussehen im Frontend gestalten

 

Hier finden sich allerlei interessante Einstellungsmöglichkeiten. So können Sie die

Hintergrundfarbe für den Positionsbereich ebenso bestimmen wie Rahmenfarbe, -stärke und -radius. Haben Sie mehrere Positionen nebeneinander, können Sie den Abstand der einzelnen Rahmen auch mit angeben.

Sie können hier auch explizit das Anzeigen der Bezeichnung für einen bestimmten Bereich aktivieren, wenn Sie im Template die Bezeichnungen deaktiviert haben. Das stellen Sie entsprechend im Bereich Felder ein: Zeige Bezeichnung. Nutze Allgemein ist die globale Einstellung beim Template. Was man hier noch einstellen kann – dazu später mehr.

 

Speichern & Schließen

Klicken Sie jetzt auf Speichern & Schließen. Wichtig ist dabei, das ganze Formular zu speichern. Erst dann wird all das übernommen, was Sie in den einzelnen Einstellungsfenstern eingestellt haben.

In der Übersicht steht nun auch unsere App. Die einzelnen Spalten geben Ihnen unter anderem Informationen darüber, wie viele Felder Sie für die verschiedenen Formulare verwendet haben.

03 23

Bild 3.27: Die News in der Übersicht Formulare & Inhaltstypen.

 

3.1.5       Ein- und Ausgabe einer News

Jetzt wird es Zeit, dass wir auch sehen, was wir die ganze Zeit erstellt haben. Dazu gehen Sie bitte in die Beitragsübersicht. Dort klicken Sie auf Neu oben links. In dem erscheinenden Auswahlfenster sehen Sie standardmäßig immer die Article-Auswahl. Allerdings handelt es sich hier bereits um eine von SEBLOD angelegte Form, die zwar inhaltlich identisch mit der Joomla!-eigenen Artikeleingabe ist, aber anders ausschaut.

Wenn Sie zur Joomla!-eigenen Beitragseingabe zurückkehren möchten, dann klicken Sie einfach diesen Link an:

001

oder hier klicken zum Erstellen eines "Standard Joomla! Inhalts".

Da wir aber eine News eingeben wollen, klicken Sie das Symbol mit den News an.

03 24 b

Bild 3.28: Das Adminformular zum Eingeben einer News

 

Sie sehen nun das Formular, das Sie zuvor bei den Formularen & Inhaltstypen für das Admin Formular gestaltet haben. Geben Sie ein wenig Text und alles Weitere ein und speichern Sie Ihre News. In der Beitragsübersicht sehen Sie dann Ihre News mit Ihrem Titel. Geben Sie an, dass es sich um einen Hauptbeitrag handelt, indem Sie aus dem weißen Stern einen orangefarbenen machen.

03 24

 

Bild 3.29: Heupteintrag erzeugen

 

 

Rufen Sie nun das Frontend auf, sehen Sie im Startmenü Ihre News, vorausgesetzt, Sie haben die Startseite auf Hauptbeiträge anzeigen gesetzt. Andernfalls müssen Sie ein entsprechendes Menü erzeugen.

3.2          Die News erweitern

Nun haben wir einen kleinen detaillierten Einblick bekommen. Aber wenn wir ehrlich sind, dann lassen unsere News doch so einiges vermissen. Zum Beispiel kann es nicht angehen, dass wir die News nur als Haupteintrag abbilden und auch erst in der Übersicht selbigen auswählen können. Also liegt es nahe, einige Erweiterungen vorzunehmen.

3.2.1       Haupteintrag und Kategorie

Diesmal machen wir es uns einfach. Da SEBLOD uns alle Felder zur Verfügung stellt, die in einem Beitrag vorhanden sind, können wir diese Felder für unsere News benutzen.

Editieren Sie die News unter Formulare & Inhaltstypen. Bei den Filtern stellen Sie an dritter Stelle Article ein und im letzten Feld, wo standardmäßig unsere News angezeigt werden, wählen Sie bitte Alle Verzeichnisse aus. Sie erhalten nun eine Liste aller Felder für die Beiträge. An dieser Stelle müssen Sie die englischen Bezeichnungen kennen. Die Hauptbeiträge werden im Englischen als Article Featured bezeichnet. Genau dieses Feld schieben wir nach links in unser Formular und editieren es dort.

Wie Sie sehen, handelt es sich um ein einfaches Auswahlfeld, das aber entsprechend in der Datenbank an der entscheidenden Stelle gespeichert wird. Bei den Optionen sehen Sie, dass dem No eine 0 und dem Yes eine 1 zugeordnet ist. Da wir standardmäßig den Haupteintrag aktiviert haben möchten, tragen wir in das Feld Standard Wert eine 1 ein.

Wenn wir dann eine neue News anlegen, ist der Hauptbeitrag bereits auf Ja gesetzt – das kann aber geändert werden. Natürlich können Sie aus Yes und No auch Ja und Nein machen. Wenn Sie einen Text in Bezeichnung eingeben, wird Ihnen über der Ja-/ Nein-Auswahl noch ein Text im Auswahlbutton angezeigt. Die Anordnung ergibt bei uns keinen Sinn. Bei längeren eigenen Listen können Sie dort aber einstellen, wie die Auswahlliste sortiert werden soll.

Da wir gerade in unserer Admin Form sind, fügen wir auch gleich ein Kategoriefeld hinzu. Auch hier können Sie wieder das entsprechende Feld aus der Article-Liste auswählen. Editieren Sie bitte das Feld, nachdem Sie einen Blick in Ihre Kategorien geworfen haben. Falls Sie nicht ohnehin bereits eine Kategorie namens News angelegt haben, tragen Sie bitte diese Kategorie ein und merken sich die ID der Kategorie.

Sie sehen, dass der Feldtyp Kategorie aus der Joomla Bibliothek ist. Auch hier können Sie wieder einen Standard Wert vergeben. Allerdings hat das an dieser Stelle eine kleine Tücke. Denn wenn Sie den Standardwert mit der Kategorie-ID versehen (bei mir hat die Kategorie News die ID 10), würde das fortan für alle Kategorien gelten, wo Sie das Kategoriefeld einfügen. Überall wird also die Kategorie News voreingestellt sein.

In unserem Fall wäre das nicht sinnvoll, weshalb wir hier den Standardwert leer lassen und stattdessen nach dem Speichern & Schließen auf die Nummer 2 klicken: Live + Live Wert. In der Zeile unseres Kategoriefeldes (Article Category Id) lassen Sie das Standard stehen und schreiben in das leere Feld rechts die Kategorie-ID. Bei mir ist das die 10.

Sie können aber auch die Kategorie mittels des kleinen blauen Pfeilbuttons direkt auswählen. Damit haben Sie als Standard die News-Kategorie vorgegeben, aber nur für dieses eine konkrete Feld. Immer wenn Sie also im Backend eine neue News anlegen, erscheint die hier eingetragene Vorauswahl. Benutzen Sie hingegen das Kategoriefeld in einem anderen Inhaltstyp, gilt dieser Live Wert nicht mehr.

Mehrfachauswahl erstellen

Im Kategoriefeld gibt es zwar die Möglichkeit, eine Mehrfachauswahl einzustellen, doch leider funktionierte das bis zum Erscheinen dieses Buches nicht. Der Versuch einer Mehrfacheinstellung führte immer zu Fehlern. Aber es ist denkbar, dass es in einer späteren Version von SEBLOD möglich ist.

Das englische Category können Sie natürlich sprachlich anpassen.

03 25

Bild 3.30: Kategorie-ID als Standardwert nur in diesem Inhaltstyp vorgeben.

Im Formular für den Inhalt brauchen wir nichts zu ändern, da die Kategorie und der Haupteintrag nur für die Verarbeitung unserer News wichtig sind, aber keinerlei zusätzliche Ausgabe im Frontend erzeugen.

Eine Anmerkung noch zu den Feldern aus der Article-App: Obwohl Sie die Felder unserer News-App hinzugefügt haben, bleiben die Felder selber den Articles zugeordnet. Entscheidend ist am Ende, dass die Daten, die Sie dort beim Erstellen einer neuen News eingeben, innerhalb unseres Beitrags in der Datenbank gespeichert werden, was Sie dann auch tun. Brauchen Sie später die Felder noch einmal an anderer Stelle, finden Sie sie problemlos in der Article-App wieder.

3.2.2       Bilder sagen mehr als tausend Worte

Ergo sollten wir diesbezüglich auch mehr anbieten. Zwar können wir generell die Bildfunktionen des WYSIWYG-Editors nutzen, aber wir möchten vielleicht mehr Bilder in die linke Spalte bringen, und ein kleines Bild direkt links neben der Überschrift wäre vielleicht auch eine interessante Idee.

03 26

Bild 3.31: Die News erweitern

 

Beginnen wir zunächst mit der Überschrift. Das bisher verwendete Bilderfeld hat den Nachteil, dass wir stets eine Grafik von unserer Festplatte hochladen müssen. Ich möchte in diesem Fall aber auf das images-Verzeichnis von Joomla! zugreifen, da ich mit der Überschrift noch etwas mehr vorhabe, wie Sie gleich sehen werden.

Der Einfachheit sollten Sie jetzt direkt in Formulare & Inhaltstypen arbeiten, indem Sie das Pluszeichen (+) für neue Felder anklicken, denn wir müssen das eine oder andere gleich in den Formularen einstellen.

Legen Sie also bitte im Admin Formular ein neues Feld vom Typ Medien an. Medien finden Sie in der Joomla!-Bibliothek (JForms). Allzu viel gibt es hier nicht einzustellen. Den Standard Wert lassen Sie leer. Speichern müssen Sie das Feld als Standard in den Artikeln und auch als images.

Das Bild soll am Anfang der Überschrift stehen und muss in der Größe angepasst werden. Leider geht das nicht direkt beim Feld, so wie Sie es bisher gewohnt sind.

Wechseln Sie in das Formular für den Inhalt und klicken die Nummer 2 an. Sie können jetzt die Typografie für die Ausgabe genauer einstellen.

Wählen Sie dazu bei dem Feld Medien in der Spalte Typografie Bild aus. Es erscheint sofort ein kleines Pluszeichen (+) neben der Auswahl, worauf Sie bitte klicken. In dem Fenster, das sich nun öffnet, können Sie die Bildgröße einstellen. Wir wählen als Standard-Anzeige Miniaturbild 1 und geben eine feste Größe von 55x55px vor. Darunter können Sie noch einstellen, ob beim Anklicken des Bildes eine Modalbox aufgehen soll oder nicht. Da es sich um ein kleineres Bild neben der Überschrift handeln soll, ist ein Kein in der Modalboxauswahl sinnvoll.

03 27 b

Bild 3.32: Neben der Bildgröße ist es auch wichtig, SEBLOD mitzuteilen, dass es sich bei der Medien-Auswahl um ein Bild handelt. Denn sonst wird zwar der ausgewählte Grafikpfad im Frontend angezeigt, jedoch nicht das Bild selbst.

Bei unserem Titel haben wir momentan noch das Problem, dass er als einfacher Text über dem Beitrag angezeigt wird. Sinnvoller ist es, eine ordnungsgemäße HTMLÜberschrift zu erstellen. Wählen Sie analog die Typografie Überschrift aus und klicken Sie auf das kleine Pluszeichen.

Dort wählen Sie als Überschrift h1 oder h2 – das hängt ganz davon ab, ob Sie die Menütitel anzeigen lassen oder ob Sie ein Template verwenden, das das Logo unnötigerweise mit einem h1-Element belegt. In meinem Beispiel habe ich das h1Element gewählt. In der Klasse tragen Sie eine CSS-Klasse ein, die Sie später formatieren können, wenn Sie möchten oder es benötigen. Den Anker benötigen wir hier nicht.

Überschriften für die Website-Struktur

Die h-Elemente, also die Überschriften in HTML-Syntax, sind wichtig für die Struktur der Website, damit auch für Google und für die Suchmaschinenoptimierung. h1-Überschriften werden von Google als wichtiger angesehen als h2-Überschriften, die wiederum wichtiger sind als h3Überschriften und so weiter. Allerdings sollte die h1-Überschrift nur einmal vorkommen. (Wobei dies von den SEO-Spezialisten heiß diskutiert wird. Einige meinen, man könne die h1-Überschrift auch mehrmals abbilden.) Ein Logo (viele Templates formatieren das so) ist dafür

Verschwendung.

Es ist wichtig, dass wir das Titelbild und die Überschrift für das Frontend anders positionieren als bisher. Beides muss in den Header, das Titelbild auf #HEADER-A und die Überschrift auf #HEADER-B. Das ist deshalb notwendig, da bei allen anderen Positionierungen entweder die Überschrift über dem Bild liegt oder sie nicht sauber nebeneinander angezeigt werden.

Wenn Sie die Positionen für den #HEADER nicht haben, rufen Sie oben rechts bei den Formular-Optionen das Template auf. Im Bereich Positionen wählen Sie bei der Kopfzeile Automatisch oder Tiefste aus. Einmal auf speichern klicken, und Sie sind wieder in der Formular-Ansicht und haben nun auch die #HEADER-Positionen.

Klicken Sie nun auf den Punkt unter der Zahlenreihe, und Sie können die Größenangaben zu den einzelnen Positionen machen. Für das Bild neben der Überschrift geben wir 65 px in der Breite vor. Die Höhe lassen wir leer. Für die Überschrift sollten Sie auch eine Breite vorgeben. Mir ist es ein paarmal passiert, dass die Überschrift über zwei Zeilen angezeigt wurde, obwohl eigentlich genügend Platz da gewesen wäre. Geben Sie hier eine Breite von 500 px oder mehr an, passiert dieser Fehler nicht mehr.

03 28

Bild 3.33: Größenangaben festlegen.

 

Wenn Sie möchten, können Sie nun auch ein wenig per CSS eingreifen. Ich habe beim beez3-Template nachfolgende Zeilen an das Ende der layout.css[7] angefügt:

001

div.cck-line-header {

002

border-bottom:1px solid #dddddd;

003

height:5em;

004

margin-bottom:2em;

005

}

Damit habe ich den Unterstrich über die gesamte Zeilenbreite erzeugt und den Abstand zum nachfolgenden Text eingestellt.

Wenn Sie mit dem Standard-Template von Joomla! arbeiten, bedenken Sie bitte, dass bei einem Update eventuell Ihre Eingaben überschrieben werden. Sie können sich auch eine eigene CSS-Datei erstellen und diese entsprechend ins Template einbinden. Wenn Sie in CSS nicht so fit sind, empfehle ich Ihnen die Seiten von de.selfhtml.org[8].

3.2.3      Mehr Bilder mit Feld X

Bislang können wir für das Seitenbild nur ein Bild auswählen. Schöner wäre es, wenn wir so viele Bilder für die Seite auswählen könnten, wie wir möchten. Genau das geht in SEBLOD.

Dazu legen wir uns ein neues Feld an, das wir sowohl in das Admin Formular als auch in das Formular für den Inhalt einbauen müssen. Eigentlich brauchen Sie dieses Feld nur gegen das bisherige Seitenbildfeld auszutauschen. Allerdings dürfen Sie das bisherige Bildfeld nicht löschen, denn wir brauchen es noch.

Legen Sie ein neues Feld an und wählen Sie unter Typ im Bereich Sammlung das Feld X aus. Ich habe dieses Feld in meinem Beispiel Seitenbilder genannt. Wichtig ist, dass Sie einen Bezug zu dem »Hochlade-Bild-Feld« legen. Das ist das Feld, das Sie eben aus dem Formular entfernt haben, um es durch dieses neue Feld X-Feld zu ersetzen.

Tragen Sie in Feld (Formular) den Namen des »Hochlade-Bild-Feldes« ein. Ich hatte es Newsbild genannt und trage eben diesen Namen hier ein. Das Ganze funktioniert so, dass eine Referenz auf dieses Feld gemacht wird, das beliebig oft im Admin Formular vervielfältigt werden kann. Im Admin Formular greift das Feld X, aber eigentlich ist es immer wieder das Newsbild-Feld, das angezeigt wird und unser ausgewähltes Bild ordnungsgemäß in die Datenbank überträgt.

In der linken Spalte geben Sie an, wie viele Bilder mindestens und maximal hochgeladen werden können, und in der rechten Spalte, dass Sie Bilder hinzufügen (+), löschen (–) und die Reihenfolge verschieben können. Im Backend erhalten Sie dann diese Ausgabe:

03 29

Bild 3.33: Feld X und seine Referenz.

 

03 30

Bild 3.34: So viele Bilder im Backend eingeben, wie Sie möchten.

 

Hier noch eine kleine Einstellung zum Abschluss dieses Bereichs: Sie müssen die Typografie (Nummer 2 im Inhalt-Formular anklicken) für Feld X auf Bild stellen, und zwar deswegen, weil SEBLOD sonst eine Aufzählung aus den Bildern macht. Die Bilder werden zwar auch angezeigt, aber mit einem Aufzählungszeichen. So aber werden die Bilder ohne Aufzählung untereinander angezeigt.

3.2.4      Abhängige Bilder

Wer mit regelmäßigen News arbeitet, möchte diese News vielleicht mit festen Bildern, die einer Kategorie zugeordnet sind, anzeigen. Angenommen, wir haben regelmäßig News zu Kultur, Politik und Wirtschaft und alle nicht eindeutig zuzuordnenden News werden allgemein unter der Kategorie News gespeichert. Toll wäre es, wenn wir zu jeder Kategorie ein festes Bild haben, das automatisch nach Auswahl der Kategorie neben der Überschrift angezeigt wird.

In SEBLOD ist das kein Problem und ohne Programmierung möglich.

Wechseln Sie in das Formular Admin Formular und klicken Sie auf Nummer 5. Wir wollen das Medienfeld abhängig von den Kategorien machen. Also klicken wir im Medienfeld auf das kleine Wort Hinzufügen, das in den Feldern aufgetaucht ist (wenn Sie bereits etwas eingetragen haben, erscheint <Bearbeiten />).

Unter Status tragen wir unseren Wert ein und unter Auslöser die Bedingung.

Fangen wir mit dem Auslöser an: Zuerst wählen wir das Feld aus, das für die Bedingung zuständig ist, hier das Feld Article Category Id. Ist nun in diesem Feld die Kategorie News (Gleich 10, 10 steht für die Id der Kategorie) ausgewählt, soll dieses Feld ausgefüllt werden mit dem Wert images/news.png. Sollten Sie die Category Id nicht kennen, so können Sie diese über den kleinen orangefarbenen Pfeil auswählen. Das Wort #form# müssen Sie im vorgegebenen Feld stehen lassen und den Haken bei der Checkbox entfernen.

Damit haben wir die erste Bedingung eingetragen. Das müssen wir nun pro Kategorie (Kultur, Politik, Wirtschaft – falls noch nicht geschehen, müssen Sie diese Kategorien natürlich noch in Joomla! anlegen) wiederholen und jeweils ein entsprechendes Bild zuordnen. Um mehrere Bedingungen einzutragen, klicken Sie oben auf das kleine grüne Pluszeichen.

03 31

Bild 3.35: Abhängige Zustände

 

Die Bedingungen im Überblick:

  • Dieses Feld – ist ausgefüllt – images/news.png – #form# – WENN – Article Category Id – Gleich – 10
  • Dieses Feld – ist ausgefüllt – images/kultur.png – #form# – WENN – Article Category Id – Gleich – 11
  • Dieses Feld – ist ausgefüllt – images/politik.png – #form# – WENN – Article Category Id – Gleich – 12
  • Dieses Feld – ist ausgefüllt – images/wirtschaft.png – #form# – WENN – Article Category Id – Gleich – 13

Im images-Verzeichnis müssen natürlich die genannten Bilder liegen. Sie können dazu gern die Iconsammlung benutzen, die Sie sich an der angegebenen Stelle downloaden können.

Wenn Sie nun eine neue News anlegen, wird im Medien-Feld automatisch das zugehörige Bild ausgewählt, wenn Sie die Kategorie wechseln. Sehen können Sie das, indem Sie mit der Maus über das kleine Auge beim Medien-Feld fahren. Aber Sie können auch weiterhin ein individuelles Bild zuordnen, indem Sie im Medien-Feld einfach ein neues Bild laden.

 


[1] Search Engine Optimization – Suchmaschinenoptimierung

[2] WYSIWYG, englische Abkürzung für »What You See Is What You Get« (Übersetzung: Was du siehst, ist, was du bekommst)

[3] Intro = kurzer Einführungstext

[4] Teaser = Anreißertext

[5] http://www.joomlacontenteditor.net

[6] target ist ein Attribut im HTML-Element a: <a href="/..." target="_blank">.

[7] Sie finden die layout.css im Template-Verzeichnis von beez3: templates/beez3/css/layout.css

[8] http://wiki.selfhtml.org


webdesign von time4mambo

www.time4joomla.de is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.