Joomla ist ein Open Source Content Management System. Open Source (dt. offene Quelle) bedeutet, dass der Quellcode öffentlich zugänglich ist und von jedem verändert und weiterentwickelt werden darf, ohne dass es Probleme mit Lizenzen gibt.

Die zurzeit aktuelle Version von Joomla ist die 1.5. Parallel zu regelmäßigen Updates für diese Version wird an der Nachfolgeversion 1.6 gearbeitet, die zusätzlich zum alten Funktionalitätsumfang einige neue Funktionen mitbringen wird. Dazu gehört z.B. eine deutlich verbesserte und im Vergleich zur Version 1.5 detailiertere Userverwaltung, verschachtelbare Kategorien, neue Views in einigen Komponenten, neue Module und vieles mehr.

In den letzten Wochen haben auch wir an der Entwicklung von Joomla 1.6 mitgearbeitet.

Ein sehr wichtiger Aspekt ist der HTML-Output, also der Code, mit dessen Hilfe die Inhalte einer Website strukturiert und semantisch logisch ausgegeben werden sollen.

Ein Konzept für den Code zu entwickeln ist sehr aufwändig, braucht Zeit und muss vor allem für solch ein Projekt gut durchdacht sein. Es sollte so wenig Code wie möglich, aber so viel wie nötig sein. Überflüssige Elemente sollten entfernt werden, um den Code so schlank wie möglich zu halten um beispielsweise die Ladezeiten so möglichst gering zu halten. Trotzdem muss man den Code so gestalten, dass alle Elemente sinnvoll eingesetzt sind. Dabei muss der Code immer semantisch richtig sein und logisch strukturiert bleiben.

Besonders wichtig sind hier die Zuordnungen der Inhalte zu den einzelnen HTML-Elementen. Wichtige Fragen sind hier: Wie baue ich die Überschriftenstruktur logisch und sinnvoll auf, damit sie die Inhalte korrekt ausgeben und immer in der richtigen hierarchischen Reihenfolge aufeinander folgen (also eine h2 erst auf eine h1 folgt, und eine h3 auf eine h2). Welche Inhalte sollen in Listen oder Definitionslisten ausgegeben werden, bei welchen reicht einfacher Fließtext. Wie wird größtmögliche Zugänglichkeit der Inhalte erlangt. Wie viele divs oder andere HTML-Elemente sind wo nötig um das Layout möglichst flexibel zu halten, aber der Code nicht unnötig groß wird.

Das alles sind Fragen, die man sich immer wieder neu stellen und für jedes Element bzw. verschiedene Inhalte neu beantworten muss. Immer wieder entstehen daher konstruktive Diskussionen über das Für und Wider eines Elementes, man muss abwägen und sich letztlich für eine möglichst sinnvolle Lösung entscheiden.

In der 1.6 wird es keine Layouttabellen mehr geben, weder in den Komponenten noch in den Modulen oder Templates, sodass auf den Einsatz von Template-Overrides wie in der 1.5 verzichtet werden kann, um sauberen semantisch logischen Code auszugeben.

Außerdem wurden in der 1.6 die meisten Klassennamen geändert. Die Klassennamen orientieren sich nun stark an der Funktion des zugehörigen Elementes und sollen selbsterklärender sein, um die Verständlichkeit des Codes zu erhöhen und den Umgang mit ihm zu erleichtern, was zum Beispiel das Stylen mit CSS vereinfachen soll.

Neben dem HTML-Output, hier lag der Schwerpunkt auf der Ausgabe der Inhalte der com_content, haben wir ein Template für die 1.6 entwickelt, um den Code direkt zu testen. Das ist besonders wichtig bei einem solchen Projekt. Auf diese Art und Weise kann man testen, wie flexibel man mit dem Code arbeiten kann, es lassen sich Fehler in der Funktion oder dem Code frühzeitig entdecken und korrigieren. Außerdem merkt man im Einsatz und beim optischen Gestalten mit CSS ob alles so funktioniert, wie es gedacht ist, ob ausreichend Klassen vorhanden sind, ob die Elemente sinnvoll eingesetzt wurden, usw., oder noch Änderungen im Code erforderlich sind, denn mit dem Code sollen ja möglichst viele unterschiedliche Layouts realisiert werden können, ohne dass man mit Overrides arbeiten muss, in denen man zusätzlichen Code einfügen muss.

Auch im Template selber gibt es viele wichtige Dinge zu beachten und Fragen, die man sich stellen muss: Sind die Struktur und der Aufbau des Dokuments semantisch logisch, sind die Modulpositionsnamen sinnvoll und die Module gut positioniert. Bietet die Struktur des Codes ausreichend Flexibilität zum Gestalten. Gibt es keinen überflüssigen Code usw.

In der 1.6 wird es wieder ein Beez-Template, die Beez 2.0, geben. Die neue Beez wird einige Besonderheiten mitbringen: es wird voraussichtlich zwei Gestaltungsvarianten geben, der User kann beim Output zwischen HTML5 und XHTML wählen, die Navigationsspalte lässt sich entweder vor oder nach dem Hauptinhalt positionieren, die Module lassen sich ein- und ausblenden, genauso wie die gesamte rechte Spalte, außerdem lassen sich die Module in zugänglichen Tabs darstellen.

Die neue Beez wird voraussichtlich zwei verschiedene Gestaltungsvarianten mitbringen, zwischen denen man über die Template-Parameter wählen kann. Eine Variante wird nach aktuellem Stand Grün, die andere Schwarz. Ermöglicht wird dies durch eine wohl überlegte Aufteilung des CSS in unterschiedliche Dateien. Während die Positionierung in der position.css zu finden ist, werden alle anderen allgemeinen Befehle in die layout.css geschrieben. Die Informationen für die Farbe werden je in eine separate CSS-Datei geschrieben und nach Auswahl des Styles im Template-Manager im Backend geladen.

Mit dem Beez-Template bekommt der User aber die Möglichkeit beim HTML-Output zwischen XHTML und HTML5 zu wählen, standardmäßig wird das Template mit XHTML ausgegeben. Um HTML5 auszugeben, kommen wieder Overrides zum Einsatz, die sich im HTML-Ordner im Template-Verzeichnis befinden.

Im Template-Manager im Backend kann der User wählen, ob die Navigationsspalte vor oder nach dem Content ausgegeben werden soll. Beide Varianten haben Vor- und Nachteile. Befindet sich der Content vor der Navigationsspalte, hat die Website bei Google einen Vorteil. Wenn man aber nun die Website nur mithilfe der Tastatur besucht, fängt man im Content an zu lesen und geht erst dann z.B. zur Navigation, was das Lesen der Website für Menschen, die keine Maus benutzen können oder auf andere Hilfsmittel angewiesen sind, erschweren könnte.

Platziert man die Navigationsspalte vor dem Content und besucht die Website nur mithilfe der Tastatur, gelangt man zuerst zum Menü und erst danach zum Content.

Die Beez 2.0 bringt die Möglichkeit mit Module ein- bzw. auszuklappen, genauso wie die ganze rechte Spalte. Hierzu wurde zugängliches JavaScript eingebunden, das auch alleine mit der Tastatur und ohne Maus bedient werden kann. Genauso lassen sich Module in Form von Tabs darstellen, die ebenfalls im Sinne der Barrierefreiheit zugänglich und bedienbar sind. Hier wird zusätzlich das sogenannte WAI-ARIA eingesetzt. WAI-ARIA ist die Abkürzung für Accessible Rich Internet Applications der Web Accessibility Initiative. Mit der Hilfe von WAI-ARIA lassen sich Rollen, Zustände und Eigenschaften von Elementen beschreiben, die vor allem Nutzern assistiver Technologien einen großen Nutzen bringen und die Zugänglichkeit für sie steigern. So lässt sich zum Beispiel einer ungeordneten Liste, die als Menü dient die Rolle „navigation“ zuordnen oder einem Element kann der Status „checked“ gegeben werden.

Die Darstellungsformen der Module, sowohl die ein- und ausklappbaren Module, als auch die Darstellung von Modulen in Tabs, wird über das style-Attribut „beezHide“ bzw. „beezTabs“ beim Einbinden der Module in der index.php gesteuert:

Beispiel für ein- und ausblendbare Module:

<jdoc:include type="modules" name="position-4" style="beezHide"
headerLevel="3" state="0 " />

(Das state-Attribut gibt an, ob das Module beim ersten Besuch der Website ein- oder ausgeklappt angezeigt werden soll)

Beispiel für Module in Tabs:

<jdoc:include type="modules" name="position-5" style="beezTabs"
headerLevel="2" id="3" />

(Hier ist die ID besonders wichtig. Für jeden Bereich, in dem Tabs angezeigt werden sollen, muss eine eigene ID definiert werden.)

Die bisher gewohnte Form der Ausgabe lässt sich über das style-Attribut „beezDivision“ aufrufen.

Ein großes Problem beim Einbinden von JavaScript ist allerdings, dass es nach wie vor immer noch viele Menschen in ihrem Browser ausgeschaltet haben. Deshalb wurde besonders darauf geachtet, dass die Inhalte auch korrekt dargestellt werden und zugänglich sind, wenn das JavaScript im Browser deaktiviert ist.

Außerdem enthält dieses Template, ähnlich wie auch schon die Beez in der Version 1.5, Sprungmarken zur Navigation, zum Inhalt und zu den zusätzlichen Informationen, es ist auf ausreichend hohe Farbkontraste geachtet worden und der User kann alleine mit der Tastatur durch die Website navigieren.

Morgen steht das Joomla Coding Event hier bei uns bevor, bei dem sich eine Hand voll Entwickler treffen, die derzeit aktiv an der neuen Version 1.6 arbeiten, um größere Bugs in der akuellen Version 1.6 zu fixen, Funktionalitäten zu vervollständigen und das Projekt einen Schritt weiter bringen wollen.

Als Vorbereitung dafür haben wir heute noch einmal die aktuelle Version getestet, Fehler gefunden und notiert und eine Version vorbereitet, mit der wir morgen alle zusammen arbeiten können.

Ich bin gespannt wie viel wir schaffen.

Bei dem Versuch ein Template zu installieren, ist uns aufgefallen, dass die Übernahme der Parameter aus der XML-Datei noch nicht richtig funktioniert. Daher muss man die Parameter selber von Hand in die Datenbank schreiben.

Dazu öffnet man die zur Installation gehörige Datenbank, und lässt sich die Datenbanktabelle “jos_template_styles” anzeigen. Hier werden alle Template Styles aufgelistet. Im Feld “params” erscheinen alle Parameter aus der XML-Datei. Wenn hier keine Parameter vorhanden sind, kann man den Datensatz öffnen, den man bearbeiten möchte und die Parameter von Hand in das Feld hineinschreiben. Beispiel für die Beez:

{“wrapperSmall”:”53″,”wrapperLarge”:”72″,”logo”:”images\/sampledata\/parks\/banner_cradle.jpg”,”sitetitle”:”Australian Parks”,”sitedescription”:”Parks Sample Site”,”navposition”:”center”,”templatecolor”:”nature”,”html5″:”1″}

Bei allen Beiträgen in Joomla hat der User die Möglichkeit ein zusätzliches Datum einzublenden: Er kann je nach Belieben zwischen Erstellunsdatum, Datum der Veröffentlichung und dem Datum der letzten Änderung wählen oder mehrere gleichzeitig anzeigen lassen.

Auch beim Datumsformat gibt es mehrere verschiedene Möglichkeiten, die der User individuell über die Sprachfiles steuern kann:

1. DATE_FORMAT_LC1: Dieses Format gibt das Datum mit Wochentag ohne die Uhrzeit aus,
   Bsp. on Friday 26. March 2010
2. DATE_FORMAT_LC2: Dieses Format gibt das Datum mit Wochentag und die Uhrzeit aus,
   Bsp. on Friday 26. March 2010 20:30
3. DATE_FORMAT_LC3: Dieses Format gibt nur das Datum ohne Wochentag aus,
   Bsp. 26. March 2010
4. DATE_FORMAT_LC4: Dieses Format gibt das Datum in Kurzschreibweise aus,
   Bsp. 26.3.10

Das Content Management System Joomla wird international eingesetzt. Da nicht überall die gleiche Sprache gesprochen wird und auch nicht jeder Mensch Englisch spricht, ist es sehr wichtig, dass man die verwendete Sprache im Front- und Backend, jeweils passend zur Sprache des Users, anpassen kann. Auch unterschiedliche Sprachen für das Front- und das Backend sind möglich.

In Joomla geschieht das über die Sprachfiles, die es zum einen für das Frontend (sie befinden sich im Ordner language), und zum anderen für das Backend (sie befinden sich im Ordner administrator->language) gibt. Im language-Verzeichnis befindet sich dann jeweils ein Order, der alle Dateien enthält und der nach der jeweiligen Sprache benannt ist, zum Beispiel: en-GB für britisches Englisch oder de-DE für Deutsch. Der Dateiname der Sprachfiles ist wie folgt aufgebaut: Am Anfang steht die Sprache, es folgt ein Punkt und der Name der Komponente, des Moduls,… Die Dateiendung heißt ini. Die Datei, in der alle Sprachfiles aus der Content Componente zu finden sind, heißt demnach zum Beispiel: en-GB.com_content.ini

In der Joomla 1.6 gibt es folgende Regeln, die die Struktur der Sprachfiles festlegen:

Der Schlüssel, der sich im JText befindet, darf keine Leerzeichen enthalten. Alle Leerzeichen sollten der Übersichtlichkeit halber durch einen Unterstrich ersetzt werden. Beispiel: COM_CONTENT_MORE_ARTICLES/p>

Alle Schlüssel für das Frontend sollten den Präfix der Erweiterung enthalten. So lässt sich schnell die jeweils zugehörige Datei finden, in der der Code übersetzt wird (jede Erweiterung hat ihr eigenes Sprachfile, egal ob Komponente, Modul,…).

Sonderzeichen, Umlaute usw. sind nicht erlaubt. Auch die Worte “null, yes, no, true, false, on, off, none” sind so nicht erlaubt, sondern müssen im Schlüssel anders umschrieben werden, zum Beispiel mit einem Zusatz: JYES, JNO usw…

Die Syntax im Sprachfile selber sieht wie folgt aus:
Nach dem Schlüssel folgt ein Gleichheitszeichen. Die Übersetzung wird in Anführungszeichen geschrieben.
Beispiel: COM_CONTENT_MORE_ARTICLES=”More Articles…”

MGG

Übungsaufgaben zum Errechnen von Datenmengen bei Fotos.

MIM

Heute wollten wir über eine zu importierende XML Datei Bilder in Visitenkarten in InDesign einfügen, was aber leider nicht geklappt hat.

Fremdsprachliche Kommunikation

Preparing a presentation about the company we are working for.

Medienprojekte und Arbeitsabläufe

Verpackungsdesign: Anlegen der Stanzform der Verpackung. Probedrucken der Verpackung.

Viele User drucken sich Ausschnitte oder ganze Seiten einer Website aus, um sie zu lesen oder weiter damit zu arbeiten. Oftmals möchten sie dabei vor allem die Hauptinhalte haben und legen weniger Wert auf die Informationen in den Spalten daneben. Meistens klicken sie dann einfach auf den Drucken Button in ihrer Browserleiste, woraufhin dann die komplette Seite gedruckt wird, inklusive Navigation und unwichtige Informationen. Der Hauptinhalt ist nur schwer lesbar, da er in eine schmale Spalte gerückt wird.

Um dem Abhilfe zu schaffen, sollte man ein CSS extra für den Druck schreiben, in dem man alle Elemente wegpositioniert, die für den Inhalt auf dem Papier nicht so wichtig sind. Dazu gehören je nach Verwendungszweck zum Beispiel Elemente wie das Menü, der Standortanzeiger, die Suche usw. Diese würden auf dem Papier nur unnötig Platz wegnehmen und die Hauptinformationen schwerer lesbar machen.

Über die Gradationskurve kann man sehr gezielt Einfluss auf die Tonwerte eines Bildes nehmen.

Öffnet man in einem Bildbearbeitungsprogramm die Gradationskurve, öffnet sich ein Fenster in dem ein großes Quadrat abgebildet wird, das widerum in 16 kleine Quadrate unterteilt ist. Von unten links nach oben rechts verläuft eine Gerade. Unterhalb des großen Quadrates und an der linken Seite befindet sich jeweils ein Balken, in dem ein schwarz-weißer Verlauf abgebildet wird, wobei sich jeweils die gleiche Farbe in der Ecke unten links befindet. Schwarz steht für Tiefen und Weiß für Lichter. Dazwischen befinden sich die Mitteltöne.

Auf dem waagerechten Balken unterhalb des Quadrates werden die Eingabewerte dargestellt, auf dem vertikalen Balken links des Quadrates die Ausgabewerte. Jedem Eingabewert wird also ein Ausgabewert zugeordnet.

Ändert man nichts an der Diagonalen, so werden die Eingabewerte als Ausgabewerte übernommen. Möchte man alle Bereiche des Bilder aufhellen, muss man dem Graphen durch einen Mausklick einen Punkt hinzufügen und diesen dann nach oben verschieben, sodass ein leicht gebogener Graph entsteht. Möchte man das Bild abdunkeln, muss man den Punkt statt nach oben, nach unten verschieben.

Wen man nicht das ganze Bild (Tiefen, Mitteltöne und Lichter) gleichermaßen ändern möchte, kann man den Graph durch Hinzufügen von Punkten in z.B. drei Abschnitte einteilen (Tiefen, Mitteltöne und Lichter). So lassen sich alle Bereiche unabhängig voneinander bearbeiten.

Bei allen Änderungen muss man darauf achten, dass der Graph immer eine Steigung behält, da sonst einfarbige Flächen entstehen können, da mehreren Eingabewerten nur ein Ausgabewert zugeordnet wird.

Bei allen Änderungen muss man immer beachten, dass keine Bilddetails verloren gehen.

In der Joomla-Version 1.5 hatten die Modulpositionen im Template Namen wie z.B. top, left, right, breadcrumbs, user1 usw.

In der neuen Joomla-Version haben sich die Entwickler dazu entschlossen, die Modulpositionen nicht mehr nach zugeordneten Aufgaben oder räumlichen Positionen zu benennen. Der Grund dafür ist, dass die User die Elemente beispielsweise über CSS anders positionieren können und dann die linke Spalte optisch eventuell nicht mehr links ist und die rechte Spalte nicht mehr rechts. Dadurch lassen sich die Modulpositionen nicht mehr gut nachvollziehen, das Arbeiten wird automatisch erschwert.

Daher haben die Modulpositionen andere neutralere Namen erhalten. Sie heißen einfach “position-” mit einer angehängten Zahl, Bsp. “position-0″, “position-1″, “position-2″. Vorgesehen sind zurzeit 15 Modulpositionen.