WordPress aus Anwendersicht

Frontend-Nutzung

…

Backend-Nutzung

Custom Fields

Custom Fields sind Textfelder die der Schreiber füllen kann. Ich habe sie auch hier aufgeführt, da man mit diesen die Erscheinung des Blogs oder auch des Quelltextes im Header beeinflussen kann, ähnlich wie bei den Template Tags – nur dass man die Fields dann im Backend beim Schreiben eines Beitrages erst mit Inhalten füllt.

Quicktags

Quicktags sind bestimmte Kommentare im HTML Quelltext die nachdem Sie vom Editor abgeschickt werden, eine bestimmte Aktion in WordPress auslösen. Die Eingabe von <(!–nextpage–)> führt zu einem Seitenumbruch und die Eingabe von <(!–more–)> bestimmt die Länge des Auszugs. Die Klammern müssen weg, ich schrieb sie nur, damit mir WordPress hier nicht wirklich einen Seitenumbruch oder ein “weiterlesen” reinklatscht. Im Codex findet man eine Übersicht zu allen Quicktags und gerade für den Kommentierenden bieten sie die Chance deren Text zu formatieren.

WordPress aus Entwicklersicht

WordPress-Architektur und Abläufe

Conditional Tags

Mit den Conditional Tags kann man eine Unterscheidung treffen, beispielsweise ob es sich um eine Seite handelt oder nicht. Conditional-Tags kommen im Loop vor und auch bei der Gestaltung des Titels kann man damit spielen. Laut Codex kann man diese Tags benutzen, um die aktuelle Seite in der Navigationsleiste hervor zu heben. Ein weiterer Einsatz ist eine Prüfung bei der Veröffentlichung eines Kommentars, ob der Beitragsautor den Kommentar geschrieben hat und daraufhin das Format ändern. Des Weiteren kann man bestimmte Seiten von Suchrobotern ausschließen und andere nicht.

Loop

Der Loop ist das Kernstück in WordPress und dort gibt es eine Vielzahl der Conditional Tags. Im Loop kann man einige sinnvolle Ergänzungen einbauen: ich werde einen Verweis zum Glossar einbauen und ein Plugin (‘Share this’) liefert einen Link, mit welchem der Leser ein ‘Social Bookmark’ setzen kann oder den Feed des Blogs abonniert. Der Loop kann sinnvoll ergänzt werden und so kann man mit diversen Hintergrundfarben und Grafiken spielen. Bei Yaml bietet es sich an, dass man aus Suchmaschinensicht den Inhalt in der Col1, welche im Quelltext ganz oben steht einspeist. Ich muss mir das mal durch den Kopf gehen lassen und in der Yaml-Doku nachlesen, was da die Vor- und Nachteile sind.

Templates

Templates sind Dateien, die im Verzeichnis des Themes liegen und von WordPress inkludiert werden, so holt die Funktion get_header() die Datei ‘header.php’ und setzt diese in die aufgerufene ‘index.php’. Neben der Methode per Funktion die Templates einzubinden, kann man den Pfad auch direkt angeben. Mit der Konstanten ‘TEMPLATEPATH’ wird automatisch der Pfad zum Theme-Verzeichnis gelegt. Mit der Variable ‘ABSPATH’ zum WordPress-Wurzelverzeichnis. So kann man jedes beliebige PHP-Skript in WordPress laden.

Die Templates werden in einer bestimmten Hierachie angelegt, so wird erstmal geschaut, ob die aufgerufene Seite vorhanden ist und falls nicht die ‘index.php’ geladen. Ein Bild im Codexbeitrag verdeutlicht das Zusammenspiel ganz gut. Neu war für mich, dass es eine extra ‘attachment.php’ und eine ‘author.php’ gibt und dass ein Druck auf ein Schlagwort die ‘category.php’ lädt.

Template Tags

Template Tags sind PHP-Funktionen, die in die Templates geladen werden. Diese Template Tags steuern dann das Erscheinungsbild des Blogs. Einer Funktion kann man möglicherweise Parameter zuwerfen. Diese Funktionsparameter sind Variablen, die diese Funktion benötigt.

Es gibt eine Übersicht über die Template Tags in deutsch und eine Codex-Kategorie. Grundsätzlich muss man sich oft im Sourcecode orientieren und will vielleicht mal die Funktion genau unter die Lupe nehmen, hier entdeckte ich eine Onlineansicht des WordPress Codes mit Syntax-Highlighting. Man sieht sich also den Code der ‘index.php’ an, dort steht der Loop, dort steht die Funktion ‘the_content’, ein Mouseover zeigt den Ort der Funktion an, hier die ‘wp-includes/post-template.php’.

Es gibt drei Arten von Template Tags: einmal haben wir welche die keine Parameter benötigen, einmal haben wir welche die Parameter, wie gewöhnliche PHP-Funktionen akzeptieren (Function-Style-Parameter). Es gibt Funktionen, die Parameter erwarten und dabei einen Query-String nutzen, das funktioniert ähnlich, wie wenn man Variablen via GET-Methode von Skript zu Skript schickt. Diese Funktionen sind meist nur Wrapper für die Funktionen, die Parameter und zwar sehr viele Parameter erwarten.

Frank Bültge nennt in seinem Buch das Beispiel wp_get_archives und get_archives: wp_get_archives ist die gleiche Funktion wie get_archives nur mit Parametervoreinstellung und einer kleinen Abfrage, ob eine Änderung zur Voreinstellung mitgeliefert wurde. Als Programmierlaie klingelt bei mir bei der GET Methode gleich immer die Sicherheitsrassel, dafür ist dann wohl auch die wpspecialchars – Funktion da.

Template Tags können auch ineinander verschachtelt werden, also ein Template Tag ist sozusagen ein Parameter eines anderen Template Tags. So binden viele Template Tags wiederum andere Funktionen aus dem WordPress-Kern ein.

Eigene Funktionen kann man auch definieren und als Plugin andocken. Die so definierten eigenen Funktionen stehen dann in der Datei ‘functions.php’ im Themeordner und werden von WordPress eingebunden.

Theme-Entwicklung

Eine Internationalisierung kann man durch das voranstellen der Funktion _e(‘blabla’) erreichen oder wenn man einen Text im Funktionsnamen ändern will mit ‘__(‘blabla’)’. Das System dahinter nennt sich gettext.

Durch eine Funktion muss eine Anfrage an den Server gestellt werden – das ist schlecht, wenn es um die Performance geht und so macht es Sinn das eigene Theme nicht zu internationalisieren. Ich kann nicht einschätzen, wieviel Zeit ein internationalisiertes Theme länger für einen Seitenaufruf braucht als ein lokalisiertes.

Das Gleiche ist mit den Angaben im Header, man kann dort viele Sachen via Funktion abfragen (Spracheinstellung, Zeichensatz und Schreibrichtung, ‘lang’- und ‘dir’-Attribut des HTML-Tags im Header) – gut fürs öffentliche Theme, das eigene tackere ich lieber fest. Die Voreinstellung ist bei den Suchrobotern index follow, somit kann man sich diese Angabe sparen, bzw. muss extra eine Angabe setzen, wenn man das indizieren verhindern will. Das hat sich mittlerweile denke ich geändert.

Das xfn im Header fördert das semantische Web, ist wohl ein Microformat, und im Backend kann man seiner Blogroll erweiterte Angaben machen. Eine ähnliche Geschichte sind die Geotags, so kann Google diese Angabe beispielsweise nutzen und bei der Eingabe der dazugehörigen Stadt die Seite höher bewerten.

Die Weiterblättern-Funktion zwischen den Seiten gibts ein Plugin namens ‘Pagebar’, und eine Funktion die ich mir da mal ansehe ist die ‘posts_nav_link’ und die ‘previous_post_link’ und die ‘next_post_link’.

Bei den Funktionen muss man aufpassen, so liefern die Funktionen eine ID nun zweimal, sofern man ein Layout nutzt, welches auf Yaml setzt, nämlich die ID “navigation” – eine Lösung beschreibt Michael Preuß.

Neben der Weiterblättern-Funktion am Seitenende kann eine sogenannte Breadcrumbnavigation sinnig sein. Ich werde noch darauf verzichten, da ich versuche stark verschachtelte Seitenhierachien zu vermeiden und denke in meinem Fall besteht da vorerst kein Bedarf.

Widgets und eine händische Sidebar müssen sich nicht ausschließen. Man kann die Widgets-Funktion also auch erst ab halber Sidebar aufrufen. Gerade wenn man ein Yaml-Theme nutzt ist es für den Laien oftmals schwierig zu entscheiden, ob nun eher in der Yaml-Dokumentation oder im WordPress-Codex nachgesehen werden soll.

Einige Blogs legen viele Funktionen in den Footer, wie das geht beschreibt Perun und erklärt auch gleich wie er via Plugin ‘Get Recent Comments’ die Trackbacks von den Kommentaren trennt.

Bei der Sicherheit sollte man darauf achten, die Funktion wpspecialchars zu nutzen, wenn etwa Daten über die URL reinkommen.

Bei jedem Theme hat man eine Lizenz, die es zu respektieren gilt, beispielsweise ist WordPress zwar OpenSource, aber Yaml steht beispielsweise unter einer CreativeCommons. In jedem der Projekte stecken wohl tausende von Stunden und so sollte der Link am Ende nicht fehlen, sofern er verlangt wird.

Plugin-Entwicklung

…

Tools um WordPress herum

Als Zusatz nutze ich das Programm Gimp für die Bildbearbeitung und Inkscape für Zeichnungen, falls ich es mit Gimp nicht hinbekomme. Bei Vektorgrafiken bin ich kein Spezialist, wie man sich aus dieser Äußerung denken kann. Als Betriebsystem habe ich Ubuntu. Alles in allem kostet mich also das Bloggen nur die Gebühr für meinen Webspace.

Yaml stellt für die Navigation bereits einige Möglichkeiten vor, eine Liste der WordPress-Seiten bietet sich an und gerade wenn es dann verschachtelt wird, wirds tricky. Michael hat sich da schon einen Kopf gemacht.

Yaml bedient mit einem Stylesheet den Internet Explorer mit einem Conditional Comment, gerade die Pfadangaben können bei Yaml Probleme bereiten und so sollte man gegenprüfen ob alle Stylesheets fassen. Die Angabe ‘/’ beim Start des Pfades lässt die Suche im Wurzelverzeichnis starten und, die WordPress-Variable ‘ABSPATH’ und ‘TEMPLATEPATH’ wurden oben bereits erwähnt.

Theme-Style-Guide

WordPress Nutzer werden oftmals auf den WYSIWYG-Editor “TinyMCE” setzen. Nun hat der manchmal seine Schwächen und wenn man einige Regelmäßigkeiten beachtet, kann man den Quelltext gleich selber schreiben. WordPress liefert standardmäßig XHTML aus und dies bietet eine Vielzahl logischer Auszeichnugnsmöglichkeiten. Ebenfalls macht der Styleguide Sinn um ein Theme zu testen- schnell sieht man, wo nach und nach Hand ans Theme oder die CSS-Datei zu legen ist.

Überschrift ersten Grades

Immer bedenken, dass nur die Tags verwendet werden, welche der Doctype zulässt. Gebräuchliche Doctypes sind “HTML 4.01″ “XHTML1.0″ und “XHTML1.1″.
“XHTML1.0″ erlaubt die gleichen Tags wie “HTML4.01″ und es gibt die gleichen Ausprägungen “transitional”, “strict” und “frameset”. “XHTML1.1″ ist als Neuanfang zu sehen: es gibt weder die Variante “transitional” noch einen Doctype. HMTL5 ist im Kommen, das neue Standardtheme etwa setzt auf HTML5.

WordPress nutzt XHTML1.0 transitional, hier sind 89 Tags erlaubt, die Tags in Klammern sind in der XHTML1.0 Variante “strict” verboten, und alle Tags, welchen ein “-” angestellt ist, haben keinen schließenden Tag, wie beispielsweise bei einem Zeilenumbruch <br /> .
Hier nun die Aufzählung der Tags: a, abbr, acronym, address, (applet), area-, b, base-, (basefont-), bdo, big, blockquote, body, br-, button, caption, (center), cite, code, col, colgroup, dd, del, dfn, (dir), div, dl, dt, em, fieldset, (font), form, h1, h2, h3, h4, h5, h6, head, hr-, html, i, (iframe), img-, input-, ins, (isindex-), kbd, label, legend, li, link-, map, (menu), meta-, (noframes), noscript, object, ol, optgroup, option, p, param, pre, q, (s), samp, script, select, small, span, (strike), strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, (u), ul, var.

Größtenteils reichen zum Bloggen ja die Überschriften h1 bis h6, die Absätze und die Inlineelemente, dazu noch ein paar Listen für die Aufzählungen und manchmal eine Tabelle, gerade da nervt es, dass der WordPresseditor da standardmäßig streikt. Wenn was größeres ansteht, muss man dann bei SelfHTML nachgeschlagen.

P steht für einen Absatz und sollte auch nicht anders verwendet werden. Es ist ein Blockelement, diese erzeugen einen Bruch im Textfluss. XHTML bietet eine Reihe von Elementen zur logischen Textauszeichnungen. Bei den logischen Auszeichnungen greift die Standardeinstellung des Browsers, sofern diese nicht via CSS verändert werden.

In diesem Absatz hier sind Elemente untergebracht die das Absatzgefüge nicht durchbrechen, daher werden diese als Inlineelemente bezeichnet. Es gibt logische, physische und rein präsentative Inlineelemente zur Textauszeichnung.
Logische und Elemente sind beispielsweise
das em-tag für emphatisch oder betont, das strong-Tag als Steigerungsform des em-Tags für stark betont, das code-Tag für die Angabe von Quellcode , das samp-tag für die Ausgabe eines Beispiels, das kbd-tag für Tastatureingaben , das var-Tag für dies ist eine Variable, das cite-tag für dies ist ein Zitat , das dfn-tag für dies ist eine Begriffsdefinition , das acronym-tag formatiert eine Abkürzung und das das q cite=”http://www.xyz.de zeigt ein Zitat an, welches sich auf folgende Quelle bezieht.

Weitere empfehlenswerte Inlineelemente sind das span-tag als inhaltsleeres Element, sozusagen als sonstiges Element für alles, was in keine andere logische Kategorie passt,
das a-tag in Verbindung mit href als Anker samt Verknüpfung, weitere Attribute sind accesskey, name, tabindex, target, title. Links können mit einer class versehen werden, somit ist es möglich per CSS, beispielsweise die internen von den externen Links abzuheben oder PDF-Downloads mit einer Grafik als Hintergrund zu versehen.

Soweit möglich sollte logisch ausgezeichnet werden, andernfalls sollten Elemente genutzt werden, welche mit dem Doctype vereinbar sind, WordPress nutzt hier derzeit “XHTML 1.0 Transitional”. Einige Beispiele für physische und rein präsentative Tags zum Theme-CSS-Test, wie das btag um Text fett zu machen, das i-tag um Text kursiv erscheinen zu lassen, das tt-tag bewirkt diktengleichen Text ähnlich eines Fernschreibers, das u-tag erzeugt einen unterstrichenen Text, das strike-tag bewirkt einen durchgestrichenen Text, das s-tag bewirkt ebenfalls einen durchgestrichenen Text , das big-tag bewirkt größer formatierten Text , das small-Tag bewirkt kleiner formatierten Text, das ^{sup-tag bewirkt hochgestellten} , das _{sub-Tag bewirkt tiefgestellten Text}, das blink-tag bewirkt blinkenden Text.

Überschrift zweiten Grades

Neben den Inline-Elementen gibt es noch die Blockelemente, diese erzeugen einen eigenen Textabsatz im Element und können Inlineelemente enthalten, einige Blockelemente können sogar weitere Blockelemente enthalten, im Bedarfsfall einfach nachlesen. Mit CSS kann man anschließend ggf. noch etwas Tricks und Inlineelemente als Block anzeigen lassen oder Blockelemente inline. Blockelemente sind beispielsweise Absätze, Listen, Tabellen und Formulare.

Überschrift dritten Grades

Hier kommen die Listen, es gibt geordnete, ungeordnete und Definitionslisten. Ungeordnete haben Bullets als Aufzählungszeichen, geordnete Zahlen und Definitionlisten erhalten Einrückungen.

• erstes ungeordnetes Listenelement
• zweites ungeordnetes Listenelement
• drittes Element mit Unterliste
  1. erstes verschachteltes geordnetes Element
  2. Achtung bei verschachtelten Listenelementen
  3. das erste Listenelement bleibt geöffnet, es folgt das ol bzw ul
  4. und nach dem schließenden ol bzw ul der verschachtelten Liste
  5. wird erst das li Element der Hauptliste geschlossen
• hier steht das letzte Element der Hauptliste, samt dem Listenschluss

Das dl kündigt die Definitionsliste an, das dt das erste Element

das dd ist die Defintion zum ersten Listenelement

es kann auch mehrere Defintionen zum ersten dt geben

Überschrift vierten Grades

Jetzt geht es um die Tabellen. WordPress bietet in der Version standardmäßig keine Tabellenunterstützung. Grund also, schnell die nötigen Tags zu erklären.
Pflichtmäßig braucht man nur die Tags “table” für den Tabellencontainer, “tr” für tabelrow als Zeilencontainer und “td” für die Datenzeile. Es gibt dann noch das “td” für eine Kopfzeile und einige weitere Tags und Attribute, falls die Tabelle etwas anspruchsvoller sein soll.

Überschrift fünften Grades

Letzter Punkt sind die Formulare. Hier gibt es für WordPress-User die Anwendung als Kommentarbox. Und da die Formularelemente recht großen Spielraum bieten, gehe ich auch nur auf diese ein. “form” für den Formularcontainer, dann das input Element, das braucht das Attribut “type”, denn es gibt zehn Möglichkeiten zur Auswahl, beispielsweise eine Textbox (text) oder ein Feld zum Anhaken (checkbox). Für mehrzeilige Eingabefelder steht das Container-Element “textarea” zur Verfügung.
Zusätzlich muss es noch ein “action”-Attribut geben, damit das Formular weiß, wo es die Daten hinschicken soll. Barrierefreier werden die Formulare, wenn die Eingabefelder mit dem Tag “label” logisch verknüpft werden, und das Attribut “acceskey” verwandt wird – so werden die Input-Felder über Tastenkürzel ansprechbar. Bisschen blöd ist, dass die Inputfelder Inline-Elemente sind, somit muss man, um eine Zeilenstruktur sicher zu stellen mit dem “br”-Tag werkeln oder das Formular in eine Tabelle klatschen – oder mit CSS-Tricks die zeilenweise Anzeige sicher stellen, beispielsweise kann man auch Inlineelemente als Block anzeigen lassen. Formular sieht man unten.

Überschrift sechsten Grades

Sodala, dann bin ich fertig, meine Seiten sind noch keinesfalls passend ausgezeichnet, wobei ich da nach und nach schon mal etwas nachlegen werde. Ich bin für Kommentare zur Ergänzung dankbar, wenn ich mal falsch liege, oder es etwas zu ergänzen gibt.

Allgemeine Voraussetzungen

Der Name sollte beschreibend sein, aber es sollte nicht zu Konflikten zu Systembefehlen kommen, daher ist es geschickt ein Namenskürzel vorzuschalten, etwa joba_mysript.sh. Hilfreich ist es zu Beginn des Skripts die Eckdaten und die Optionen anzugeben – der Nutzer bekommt so schnell einen Überblick. Ich mache es so, dass ich zu Beginn die globalen Variablen bestücke, dann die Hauptprozedur als Funktion schreibe und unten im Skript dann noch die Skript-Start-Parameter abfrage. Das Skript kann so noch leicht um ein Textinterface erweitert werden. Wenn das Skript fertig ist, dann muss man nur noch die Datei via ‘chmod +x dateiname’ die Datei ausführbar machen und via ‘./dateiname’ in der Konsole ausführen. Zusätzlich kann man sich noch überlegen, ob man eine Log-Datei mitführt und was im Fehlerfall passiert.

Zu Beginn steht der Shebang ‘#!/bin/sh’, ja nach gewünschter Shell. Es folgt ein Skriptkopf mit Infos, dann die Variablen und die Funktion. Darunter die Hauptprozedur, die eine der Funktionen aufruft und so ins Skript verzweigt. Shellskripte sind unübersichtlich und anfällig für falsch gesetzte Leerzeichen. Ich händle es so, dass ich Variablen für den Skriptablauf in Großbuchstaben schreibe und Variablen für Skript-Verwaltungszwecke in Kleinbuchstaben, dafür aber mit meinem vorgestellten Namenskürzel, damit es mit Linux-Konsolenbefehlen keine Konflikte gibt.

Für die Konfiguration eines Shell-Skripts gibt es unter anderem folgende Möglichkeiten: man startet direkt mit der Prozedur und verlässt sich darauf, dass der Anwender in den Code blickt und dort die Konfiguration selbst vornimmt. Das ist wohl der Standardfall. Der nächste Schritt ist es dem Skript Startparameter zu ermöglichen. Diese werden abgefragt und die entsprechende Funktion aufgerufen. Will man den Anwender interaktiv die Sachen festlegen lassen, dann kann man in der Funktion den ‘read’-Befehl nutzen und die Nutzereingabe so lesen. Will man das Skript lange laufen lassen, dann kann man dem Nutzer ein Eingabemenü anbieten und je nach Wahl die Funktion für den Anwendungsfall aufrufen lassen. Dabei wird danach wieder das Eingabe-Menü angezeigt, bis der Nutzer das Skript beenden will – der Nutzer wird also in einer Schleife gefangen. Für Laien, die mit der Shell nicht umgehen wollen oder können, kann man das Skript mit ‘dialog’ aufpeppen und so hat man ein kleines Text-User-Interface.

Code-Schnippsel

Grundgerüst des Shellskripts


#!/bin/sh
#
# --- Infos -------------------------------------------------------------------
#
# Skriptname Shellskript-Gerüst
# Funktion TODO
#
# Beschreibung TODO
#
# benötigt keine externen Bibliotheken
#
# Autor Jochen Bauer
#
# Start 01.03.2011
# Stand 23.04.2011
# Version 1.0
#
# Fehler keine Fehler bekannt
# Kontakt info@jochen-bauer.net
#
# Beispielaufrufe (vorher mit 'chmod +x dateiname' ausführbar machen)
# Start mit Menue ./dateiname
# Start ohne Menue ./dateiname --noui
#
# Optionen
# --noui Konfiguration im Code übernehmen und starten
#
# --- Variablen ---------------------------------------------------------------
#
# $HOME # home-Ordner vom System
# $USER # user-Name vom System
$1 # Skript-Parameter
joba_error_file="" # Datei fuer Fehler-Ausgaben, optional
joba_error_var="" # Variablen fuer einen Fehler, optional
joba_log_file="" # Datei fuer Log-Datei, optional

# === Skriptparameter/Konfiguration ===
joba_working_dir=”/home/jay/Desktop/workingdir/”
joba_path_to_desktop=”/home/jay/Desktop/”

###############################################################################
# Koordination ohne Menueschleife
starteAnwendungOhneUi()
{
# voll im Code vorkonfigurierte Anwendung laufen lassen
echo “… voll vorkonfiguriert starten!”
}

###############################################################################
# Anwendungsfälle zur TextUI
starteBerechnung()
{
echo “\n … Anwendungsfall Start”
}

starteKonfiguration()
{
echo “\n … Anwendungsfall Konfiguration”
echo ” … absoluter Pfad zum Arbeitsverzeichnis:”
read joba_working_dir
echo ” … absoluten Pfad zum Desktop angeben:”
read joba_path_to_desktop
echo ” … Danke das war es, Anwendung konfiguriert!”
}

beendeAnwendung()
{
echo “\n … Anwendung planmaessig beendet!”
exit 0
}

###############################################################################
# TextUI-Hauptfunktion
zeigeHauptMenue()
{
joba_choice=”"
echo ” ”
echo ” ===================================”
echo ” | Menue [ Eingabe : Auswirkung; ] |”
echo ” | 1 : Start; 2 : Konfiguration; 0 : Beenden; ”
echo ” | —> Wahl: ”
read joba_choice

#######################################################################
# Anwendungsfaelle

# Start …
if [ "$joba_choice" = "1" ]
then
starteBerechnung
fi

# Konfiguration …
if [ "$joba_choice" = "2" ]
then
starteKonfiguration
fi

# Beenden
if [ "$joba_choice" = "0" ]
then
beendeAnwendung
fi
}

###############################################################################
# —————- main-Funktion … ————————————–
echo ” ”
echo ” ================================================”
echo ” | SHELL-SKRIPT ‘Titel’ |”
echo ” ================================================”
echo ” ”

# Skript-Parameter vorbelegen, abfragen, Anwendung starten, s. LinuxKUG S. 193
NOUI_FLAG=”false” # false: Ui anzeigen, Flag nicht genannt
for ARG in $@
do
#echo “Parameter-Aktuell: $ARG”
if [ "$ARG" = "--noui" ]
then
NOUI_FLAG=”true”
fi # Option-1/9
done

#echo “NOUI-Flag: $NOUI_FLAG”
if [ "$NOUI_FLAG" = "true" ] # UI nicht gewuenscht
then
#echo “Starte ohne TUI”
starteAnwendungOhneUi
else
#echo “Starte mit TUI”
while [ true ]
do
zeigeHauptMenue
done
fi
# exit-Codes
# exit 0 – Programm bewusst beendet, planmäßig abgelaufen
# exit 1 – Programm mit Fehler beendet
exit 0
# — Skript-Ende ————————————————————-

for-Schleife: Alle Dateien eines Verzeichnisses einlesen:

for DATEI in $(ls)
do
# Befehle pro Datei im aktuellen Verzeichnis, die mit ls gelistet wird
# ...
done

while-Schleife mit vorherigem Anlegen eines Arbeitsverzeichnisses mit Zeitstring:

# lege Arbeitsverzeichnis an
joba_time_day=`date +"%m-%d-%Y"`
joba_time_now=`date +"%T"`
joba_result_dir_name="einzelmsaberechnung-${joba_time_day}-${joba_time_now}/"
cd $joba_path_to_desktop
mkdir ${joba_result_dir_name}

# rufe das cpp-Programm auf
i=0;
while [ $i -le 100 ]
do
echo “Lauf-$i”
i=`expr $i + 1`
done

String konkatenieren und dabei Programmausgabe weiterverarbeiten und in Datei umleiten

# gehe Dateien ab
cd $joba_rawdata_dir
i=0
for joba_file_pointer in $( ls )
do
echo "Datei entdeckt: ${joba_file_pointer}"
# schreibe Eintrag als CSV-Eintrag
joba_temp1_string="$i;"
joba_temp2_string=`cat $joba_file_pointer`
joba_temp3_string=";"
joba_temp4_string=${joba_temp1_string}${joba_temp2_string}${joba_temp3_string}
echo "CSV-String: $joba_temp4_string"
echo ${joba_temp4_string} >> ${joba_path_to_output_dir}${joba_output_filename}
i=`expr $i + 1`
done

Hilfreiche Quellen und Links

Ubuntuusers-Einstieg: http://wiki.ubuntuusers.de/shell
Bash-Scripting-Guide: http://tldp.org/LDP/abs/html/
Linux-Shell-Scripting-Tutorial: http://www.freeos.com/guides/lsst/
Linux-Shell-10-Seconds-Guide: http://linuxhelp.blogspot.com/2005/10/10-seconds-guide-to-bash-shell.html
Wikibook: http://de.wikibooks.org/wiki/Linux-Kompendium:_Shellprogrammierung

Link zur Textdatei der Vorlage: joba-shellskript-vorlage.sh

1. Allgemeines
1.Öffnen
Gimp kennt die meisten Formate.
Falls du eine psd-Datei öffnen möchtest, kannst du versuchen sie einfach als xcf umzubenennen und sie dann weiter zu verarbeiten. Man kann ein Bild auch mehrfach öffnen.

1.2 Abspeichern
Beim Abspeichern legt man das Format für das Bild fest.
Speicher immer einmal das Bild als xcf oder tif ab, bevor du eine Komprimierung vornimmst. Andernfalls wirst du die Qualität des Bildes immer weiter absenken.
Speichere ein Bild bevor, du eine Änderung machst immer unter einem anderen Namen ab.
“Kopie speichern unter” erzeugt eine Kopie und lässt das Original offen.

2. Auswahl

2.1 Auswahlwerkzeuge

2.1.1 Rechteck, elliptische Auswahl, Lasso (freie Auswahl)
Bei den Auswahlen muss man zusätzlich zum gewählten Werkzeug den Modus beachten (Einstellungsscreen). Die vier Modi sind selbsterklärend. Anfangs muss man immer aufpassen, ob man gerade auf der aktiven Ebene ist. Wenn was nicht klappt, schaue ich umgehend in den Einstellungsscreen (ES) und im Ebenendialog nach – oft finde ich hier meinen Fehler. Hierzu später mehr.

2.1.2 Zauberstab, Farbauswahl
Der Zauberstab sucht eine Farbe und wählt den zusammenhängenden Bereich dieser Farbe aus. Die Farbauswahl sucht eine bestimmte Farbe im ganzen Bild.
Die Kantenglättung erzeugt eine Weichzeichnung. Mittels der Einstellung eines Schwellwertes kann man steuern, wie ähnlich die ausgewählten Pixel dem Ursprungsfarbe des gewählten Pixels sein müssen, um noch weichgezeichnet zu werden.

2.1.3 Schere
Die Schere denkt mit und berechnet den Weg eines Knotens zum anderen. Um die Auswahl zu schließen und somit damit arbeiten zu können, klickt man seine Knoten, endet im ersten Knoten (erkennt man am geänderten Zeichen, das Plus wird zu einem kleinem Fadenkreuz) und klickt anschließend in den auszuwählenden Bereich – die Auswahl wird erstellt

2.1.4 Pfade
Pfade sind eindimensionale Kurven und ressourcenschonend. Text und Auswahlen können in Pfade umgewandelt werden und als SVG exportiert werden.
Man kann bei den Pfaden bequem Knoten setzen, indem man im Einstellungsscreen (ES) “Design” anklickt. Man kann den Pfad schließen, indem man im ES auf “Pfad aus Auswahl” klickt. Um dann auch wirklich die erzeugte Auswahl verschieben zu können, muss man im ES auf “Auswahl transformieren” einstellen.

2.2 Umgang mit einer Auswahl
Standardmäßig werden bei Gimp harte Kanten erzeugt. Über “Kanten ausblenden” kann man dies ändern. Wenn man nun eine Auswahl hat, kann man mit der Quickmask (links unten im Bildfenster) seine Auswahl visualisieren und ggf. nachbessern ( bspw. bei einer Auswahl aus Pfaden). Will man nur den Rahmen der Auswahl und nicht aber den Inhalt verschieben, nutzt man die “Alt” Taste. Schwebende Auswahlen müssen verankert werden um mit Gimp weiterbearbeitet zu werden.

3 Farbpipette
Hier kann ich mir den Farben-Wert des Pixels anzeigen lassen. Man kann zwischen verschiedenen Farbmodellen wählen.

4 Winkel-/Abstandsmesser
Sieh an, habe ich noch nie gebraucht/benutzt und trotzdem schön zu wissen.
[ Die beiden habe ich der Vollständigkeit mit aufgeführt]

5 Transformationswerkzeuge

5.1 Allgemeines
Transformieren heißt, die Pixel zu ändern. Auf einige übergreifende Fähigkeiten mehrerer Transformationswerkzeuge gehe ich jetzt ein.
Einstellungsscreen(ES) ‘wirkt auf’: immer kurz nachsehen ob auch das Richtige markiert ist.
‘Interpolation’ (oder auch Aliasing) bezeichnet die Hochrechnung oder den digitalen Zoom. Kubisch ist am besten, dauert aber am längsten.
‘Ergebnis beschneiden’ führt dazu, dass das aktivierte Element auf die Originalgröße des Bildes zugeschnitten wird. Beim Rotieren bspw. wird das Bild an manchen Stellen über das Original hinausgehen, und wird bei aktivierter Funktion schön dort abgeschnitten.

5.2 Fadenkreuz (Verschieben)
Mit dem Fadenkreuz kann ich das gesamte Bild oder eine Auswahl verschieben.
Man muss aufpassen dass im ES bei “wirkt auf” das Richtige angehakt ist (mal wieder ). Nervige Geschichte, wenn man die Auswahl verschieben will und man immer die gesamte aktive Ebene greift. Es kann auch mit den Pfeiltasten verschoben werden (Genauigkeit) – dies lässt ein sehr genaues Verschieben zu.

5.3 Zuschneiden/ Größe ändern
‘Zuschneiden’ bildet die Auswahl als neues Bild ab.
‘Größe ändern’ lässt hingegen die Auswahl nach dem Zuschneiden an dem Ort, wo sie vorher war und die Originalgröße des Bildes bleibt gleich.
‘Aus Auswahl’ erzeugt eine automatische Berechnung aus der Auswahl (funktioniert bei mir allerdings selten). Spart man Arbeit wenn man etwas recht komplex auswählen musste.
‘Automatisch schrumpfen’ hat bei mir ebenfalls noch nicht funktioniert. Ihr seht also, einige Erfolgserlebnisse blieben mir bis dato noch verborgen.

5.4 Drehen
Keine Besonderheiten

5.5 Skalieren
Das sind die dicken Änderungen (Verzerren des Bildes). Unbedingt nochmal im ES die Einstellungen überprüfen.

5.6. Scheren
Der Scherenfaktor bezeichnet die Verschiebung der oberen gegen die untere Kante. Ein positiver Wert verschiebt im Uhrzeigersinn. Was bei Scherenfaktor y und bei einem negativen Wert passiert, überlass ich dem Scharfsinn.

5.7 Perspektive
Uijala – das fetzt. Einfach rein ins Bild und loslegen. Die Matrix verändert die Werte von selbst, wenn man mittels der Maus einen Perspektivwechsel hinlegt.

5.8 Spiegeln
Ebenfalls selbsterklärend.

6. Malwerkzeuge

6.1 Allgemeines
Es gibt neun Malwerkzeuge. Am besten kann man diese mit einem Grafiktablett nutzen. Wenn man mit Pfaden arbeitet kann man die Werkzeuge automatisch nutzen (Pfad nachzeichnen).
Die STRG-Taste ist bei den Malwerkzeugen eine feine Sache: es wird automatisch die Pipette aufgerufen und die Farbe des Pixels wird als die bevorzugte Vorder-bzw. Hintergrundfarbe gesetzt.
SHIFT zeigt eine gerade Orientierungslinie an.
Im ES gibt es die Modi. Hier ist die Ansicht im Glossar der Doku sehr anschaulich ( http://docs.gimp.org/de/glossary.html#glossary-modes ) . Auf die anderen Einstellungen gehe ich hier nicht weiter ein.

6.2 Überblick über alle
Ich werde die meisten Malwerkzeuge nur selten einsetzen und daher halte ich es ganz kurz und zitiere die Doku:

“Vier der Malwerkzeuge – Stift, Pinsel, Sprühpistole (Airbrush) und Tinte verhalten sich im Ähnlichen wie ihren realen Vorbilder: Sie können sie benutzen, um zu zeichnen. Die restlichen benutzen einen Pinsel für etwas andere Arbeiten: der Radierer entfernt Bildteile, das Klonen Werkzeug kopiert Muster, das Verknüpfen-Werkzeug dient zum Weichzeichnen oder Schärfen, das Verschmieren Werkzeug ermöglicht ein gezieltes Verschmieren in Bildern und das Abwedeln/Nachbelichten Werkzeug tut genau, was sein Name schon andeutet, nämlich einzelne Stellen im Bild gezielt abdunkeln oder aufhellen.”

6.3 Klonen
Eignet sich zum Retuschieren und Ausbessern von Fotos. Mit Strg wird der Klonpunkt fixiert. Einfache Mausklicks lassen den Punkt dort, ein Dauerklick lässt den Fixierpunkt mitlaufen. Es empfiehlt sich vorher eine Auswahl festzulegen, dann kann man befreiter retuschieren, da nichts außerhalb der Auswahl verändert wird.

6.4 Weichzeichnen/ Schärfen
Beim Weichzeichnen werden einzelne Pixel verwischt. Es gibt für ganze Ebenen auch einen Filter. Beim Schärfen werden ähnliche Farben vereint und es entstehen Kanten. Die Rate steuert die Intensität des Werkzeugeinsatzes.

6.5 Verschmieren
Beim Verschmieren werden mit dem Pinsel Pixel verschmiert. SHIFT zwingt das Werkzeug auf einer geraden Linie zu verschmieren.

6.6 Abwedeln/ Nachbelichten
Hiermit kann man einzelne Pixel aufhellen oder abdunkeln.

7 Farbwerkzeuge

7.1 Farbabgleich
Standardmäßig ist der Farbabgleich nicht im Werkzeugfenster, also lässt er sich über das Bildfenster -> Werkzeuge-> Farben-> Farbabgleich erreichen. Durch die Vorschau kann man sein Handeln ganz gut einschätzen. Man kann damit Farbstiche aus den Bildern entfernen.

7.2 Farbton-Sättigung
Herumspielen und die Vorschau im Auge behalten. Auf der aktuellen Ebene können Farbton, Sättigung und Helligkeit verändert werden.

7.3 Einfärben
Eignet sich um den Sepia-Effekt mit beliebigen Farben auf das Bild anzuwenden.

7.4 Helligkeit-Kontrast
Es ist sehr komfortabel, aber die Werkzeuge ‘Werte’ und ‘Kurven’ ermöglichen bessere Lösungen.

7.5 Schwellwert
Erzeugt ein Schwarz-Weiß-Bild. Die Einstellung was schwarz und weiß ist, erfolgt über das Histogramm.

7.6.Werte
Verweis auf Dokumentation( http://docs.gimp.org/de/gimp-tool-levels.html ) – komplexe Kiste.

7.7 Kurven
Das mächtigste aber auch komplexeste Werkzeug laut Doku ( http://docs.gimp.org/de/gimp-tool-curves.html )

7.8 Posterisieren
Die Farbanzahl wird in einem gewichteten Maß verringert. Es bleibt eine Ähnlichkeit zum Original

8 Ebenen

Ebenen sind mit einem Stapel Folien vergleichbar. Man blickt von oben drauf und sieht ein Bild vor sich. Ein Bild kann unendlich viele Ebenen besitzen. Du kannst die jeweils aktive Ebene mit Werkzeugen und Filtern bearbeiten. Das nennt man aktive Zeichenfläche (andere aktive Zeichenflächen sind Kanäle, Ebenenmasken und Auswahlmasken).

Es empfiehlt sich, den Ebenendialog immer in Blickweite zu haben. Andernfalls kann man leicht durcheinander kommen. Das Auge im Ebenendialog zeigt an, ob die Ebene sichtbar ist. Mit dem Drücken der Shift-Taste kann man anschließend alle anderen Ebenen (un)sichtbar schalten.

Man kann Ebenen mit dem Kettensymbol gruppieren und somit auf mehreren Ebenen gleichzeitig eine Auswahl verschieben. Die Ebenengröße ist nicht immer so groß wie das Bild. Du kannst Ebenen vergrößern, damit du sie an der gewünschten Stelle auch bearbeiten kannst. Du kannst immer nur an einer Stelle arbeiten, wenn dort auch noch die aktive Ebene vorhanden ist. Die aktive Ebene ist durch eine gelb-schwarze Markierung hervorgehoben.

Es gibt 21 Ebenenmodi ( http://docs.gimp.org/de/glossary.html#glossary-modes ). Diese regeln  auf welche Weise die aktive mit der unteren Ebene verknüpft wird. Folglich sind zum Anwenden von Ebenenmodi mehrere Ebenen nötig.

Im Bild unter Ebene->Maske-> Ebenenmaske kann man eine Ebenenmaske hinzufügen. Diese wird dann im Ebenendialog neben der eigentlichen Vorschau angezeigt. Die Maske kann dann bearbeitet werden. Das Wechseln zwischen Ebene und Maske kann über einen Klick in der Vorschau erreicht werden. Das jeweils aktive Element hat einen weißen Rand in der kleinen Vorschau im Ebenendialog.

9 Text

Gimp erzeugt für jedes Textfeld eine eigene Ebene. Textebenen müssen im Vergleich zu herkömmlichen Ebenen ganz andere Infos enthalten. Man kann den Text intuitiv formatieren.
Die Option Hinting sollte man aktivieren, da Gimp dann versucht den Text schöner und nicht ausgefranst, erscheinen zu lassen. Kantenglättung lässt den Text weicher erscheinen und man kann mit Einzügen, verschiedenen Zeilenabständen und Schriftarten arbeiten. Du kannst aus dem Text dann später auch einen Pfad erstellen und diesen Pfad dann weiter bearbeiten.

10 Filter

Besonders interessant finde ich die Verbesserungsfilter. Die Funktionsweise der Filter, also was da mathematisch abläuft, interessiert mich nicht wirklich und somit verwende ich hier ‘Trial and Error’.
‘Entflackern’ korrigiert unscharfe Kanten und horizontale Streifen.
‘Flecken entfernen’ hilft gegen schlecht eingescannte Vorlagen (Moire-Effekt), Staub und Kratzer.
‘Streifen entfernen’ eliminiert vertikale Streifen (ggf. durch Scannen entstanden).
‘NL’ stellt den schiefen Turm von Pisa senkrecht, wenn ich das richtig verstanden habe.
‘Schärfen’ – selbsterklärend

Das war es schon, ich hoffe es hilft dem ein oder anderen eines seiner Bilder etwas nachzubessern.

Ich archiviere hier mal meine Unterlagen zu Bildbearbeitung im Rahmen eines Praktikums an der Hochschule. Wir haben meist im Handbuch nachgeschlagen und im gimpforum habe ich einige Fragen gestellt. Der Großteil meiner Recherche war in der Wikipedia. Zu Gimp, einem bekannten Bildbearbeitungsprogramm gibt es auch ein Wikibook, welches leider noch fast leer ist.

Ich bin in der Bildbearbeitung ein Laie, daher freue ich mich auf Verbesserungsvorschläge. Als Programm nutze ich GIMP, allerdings sinde die Artikel dieser Serie programmunabhängig. Die gebräuchlichsten Grafikformate sind u.a.:
bmp:
Kaum Verwendung im Internet, da die schwache Komprimierung zu größeren Dateien als die Verwendung des GIF- oder des modernen PNG-Formats führt. Die meisten Programme können BMP anzeigen.Das Windowsformat ist qualitativ nicht so gut.
gif:
Im Web ist es weit verbreitet. Es unterstützt Transparenz und Animationen. Gif ist patentiert und wird somit nicht von allen unterstützt. Die Qualitiät wird schlechter als das Original, da das Bild komprimiert wird.
jpg:
Jpgs sind im Web für fotoähnliche Bilder weit verbreitet. Das Format besitzt keinen Alphakanal und somit keine Transparenz. Ungeeignet für Text und harte Farbübergänge. Es gibt verschiedene Untertypen, von denen nur wenige genutzt werden.
psd:
Psd ist das von Adobe Photoshop verwendete Bildformat. Es kann eigentlich alles (Ebenen, Transparenz, Alphakanal, CMYK). Die Bilder sind sehr groß, aber ohne Qualitätsverlust.
tif:
Sehr vielseitig, keine Komprimierung und somit wird die Qualität beibehalten.
Wegen der Unterstützung des CMYK-Farbraums wird es in Druckereien in der Druckvorstufe verwendet. Hochauflösende Bilder werden deshalb von einigen Firmen und Organisationen zum Herunterlanden (für die Presse) im Internet als TIFF angeboten.
png:
Im Web sind png-Bilder weit verbreitet, aber in unterschiedlichem Maße von Anwendungen unterstützt. Es handelt sich um eine leistungsfähige Alternative zu GIF und png-Bilder sind das allgemein empfohlene Format für Komprimierung. für Excel-Grafiken ist dieses Format zu empfehlen, da es nichts neu einfärbt und vieles genauso lässt, wie das Original es vorsieht.
xcf:
Das von “The GIMP” verwendete Dateiformat.
Es ist in der Lage, Ebenen, deren Verknüpfungen ein Gesamtbild ergeben und verschiedene Objekte, wie etwa Textstellen zu speichern. Ideal zum späteren Nachbearbeiten, da mit GIMP erstellte Bilder normalerweise in Ebenen und Objekte getrennt vorliegen. Gimp ist OpenSource und kostenlos – was will man mehr?

Farbraum und -modelle

“Die Farben eines Farbraumes werden durch ein Farbraumsystem quantifiziert. Ein Farbraumsystem ist ein Koordinatensystem, in dem die einzelnen Farben durch Basiskoordinaten auf verschiedenen Achsen charakterisiert werden. Bedingt durch den Aufbau des menschlichen Auges sind es, bei für menschliche Betrachter gedachten Farbräumen, in den allermeisten Fällen drei Achsen. Es sind etwa 30-40 Farbraumsysteme in Gebrauch.
Häufig werden ein Farbraumsystem und der entsprechende Farbraum, auf dem das System basiert, nicht unterschieden, sondern zusammengefasst als Farbmodell bezeichnet. Es gibt zum einen technisch-physikalische Modelle, bei denen Farben aus anderen Farben gemischt werden (z.B. RGB, CMYK), zum anderen wahrnehmungsorientierte (perzeptuelle) Modelle, die Farben durch die Merkmale Helligkeit, Sättigung und Farbton beschreiben (z.B. HSV, HLS).”

RGB-Farbmodell
Rot Grün Blau (englisch Red Green Blue) ist ein additives Farbmodell, bei dem sich die Grundfarben zu Weiß addieren (Lichtmischung). Eine Farbe wird durch drei Werte beschrieben: den Rot-, den Grün- und den Blauanteil. Jeder Farbanteil kann zwischen 0% und 100% (0-255)variieren.

Eine Farbe im RGB-Modell kann hexadezimal definiert werden.(Format #RRGGBB)
Schwarz #000000 0 0 0
Weiß #FFFFFF 255 255 255
Rot #FF0000 255 0 0

CMYK-Farbmodell:
Anders als das RGB-Modell ist das CMYK-Modell vierfarbig (Cyan, Magenta, Yellow, Key(Schwarz)). Es handelt sich um eine subtraktive Farbmischung. Man braucht die vierte Farbe (Key), um tiefschwarz darstellen zu können.

Bei allen Farbmodellen ist es noch nicht möglich, alle mit dem menschlichen Auge erfassbaren Farben zu konstruieren.

Bits und Bytes

1 Bit entspricht der Information, welche von zwei möglichen Begebenheiten zutrifft (an/aus; 0/1). Mit n Bits lassen sich 2n verschiedene Zustände darstellen. Mit beispielsweise zwei Bits können 2² = 4 verschiedene Zustände repräsentiert werden, nämlich 00, 01, 10 und 11. Mit vier Bits können 16 verschiedene Zustände dargestellt werden, mit acht Bits 256, und so weiter. Jedes zusätzliche Bit verdoppelt die Anzahl der möglichen darstellbaren Zustände.

8 Bit sind 1 Byte. Eine Farbskala einer Farbe besitzt im RGB-Modell 256 (0 bis 255) verschiedene Zustände. Wir müssen aber sowohl für Rot, für Grün, und für Blau je einen Zustand festlegen. Insgesamt können wir mit dem Modell also 16.777.216 unterschiedliche Farben darstellen( 256x256x256). Ein Farbbild im RGB-Modell hat also eine Tiefe von 3 Byte ( 24 Bit) und ein Graustufenbild eine Tiefe von 1 Byte (8 Bit).
Ein Farbbild, welches 16,8 Millionen Farben zur Verfügung, wird als ‘True Color’ bezeichnet.

Bildgröße

1 Inch= 1 Zoll = 2,54 cm
Die Größee eines Pixelbildes ergibt sich aus der Anzahl der Pixel des Bildes (in Breite und Höhe) und der dazugehörigen Auflösung (in Pixeln je Zoll [dots per inch=dpi]) des Ausgabegerätes (Monitor, Drucker).

Beispiel: Ein Bild hat eine Breite von 600 Pixeln. Bei einer Auflösung von 300 dpi ist das Bild demnach 600/300=2 Zoll breit. Bei einer Auflösung von 100 dpi wäre das Bild 600/100=6 Zoll breit –> das Bild wird also bei einer sehr hohen Auflösung sehr klein am Ausgabegerät angezeigt.

Für Drucksachen sollte das Bild eine Auflösung von etwa 240 bis 300 dpi bei Graustufen- und Farbbildern aufweisen. Fürs Internet bestimmte Bilder, können mit einer Auflösung von 72 dpi abgespeichert werden – das entspricht der Auflösung des Ausgabemediums, nämlich der des Computermonitors. Die Bildgröße in Byte (kB, MB) lässt sich folgendermaßen berechnen: Bildbreite in Pixel, mal Bildhöhe in Pixel, mal Farbtiefe in Byte/Pixel.

Beispiel 1: Ein Graustufenbild (Farbtiefe 8 Bit, das entspricht 1 Byte) hat eine Breite von 600 Pixeln und eine Höhe von 200 Pixeln. Die Dateigröße wäre dann 600 x 200 x 1 Byte=120.000 Byte= 120 kB.

Beispiel 2: Ein Farbbild mit 24 Bit Farbtiefe (entspricht 3 Byte) im Format 10 x 15 Zoll hat bei einer Auflösung von 300 dpi folgende Dateigröße:
Berechnung 1: Bildbreite
10 Zoll mal 300 dpi = 3000 Pixel Bildbreite
Berechnung 2: Bildhöhe
15 Zoll mal 300 dpi = 4500 Pixel Bildhöhe
Berechnung 3: Bildgröße:
3000 x 4500 x 3 Byte= 40.500.000 Byte = 40,5 MB

ACHTUNG:
bei Berechnungen nicht vergessen, dass 1 kByte 1024 und nicht 1000 Byte sind!

blitzblank is the name of a wordpress theme. blitzblank based on “YAML”. YAML is an acronym for “Yet Another Multicolumn Layout”, an XHTML-CSS-Framework. Due to this foundation your blog will have a modern layout and your blog will support webstandards.

By changing a few lines of code you can create countless other layouts, for example changing the whole navigation, switching from a fixed width to full flexible float layouts or you switch from three columsn to two, one or four columns – just a few lines of code must be changed. Fortunately there are several tutorials in the online-documentation of the YAML-Website. Moreover you will find lots of comments in the css-files of blitzblank. If there is a YAML-upgrade, you’ll just overwrite the “yaml” folder and all will work without problems. Your individual files are in the “css” folder and this won’t be touched. Summing up, a theme based on YAML is browserfriendly today and will be in future as well. To work on your layout you should edit the basemod.css und content.css, that’s all.

Why blitzblank?

In addition to this already mentioned variety and quality of YAML, with the framework it is possible to create websites from “top-down” instead of “bottom-up”. As blitzblank is already a WordPress theme, you can create your WordPress themes with this top-down-mehthod as well. The amount of time for css-bugfixing will reduce to a minimum if not to zero. YAML-Layouts are also available for other Content-Management-Systems and Webshops. An YAML-expierenced developer won’t need much time to work himself into the code. The former versions of blitzblank (1.0, 1.1, 1.2) were used on lots of blogs. Anyway, in my opinion version 2 is much much better .

License

blitzblank merges YAML and WordPress, so you will have to pay attention to both licenses. WordPress is no problem anyway, but YAML calls for a link on your blog/website but offers other license modells, too, if a link is not possible or appropriate on your project. I ask for a link to this page, the theme page too. WordPress is also happy to get a link.

I placed the demanded links in the footer by default. I placed another link in it, the link to my personal website. You can delete this link of course if you like.

If there are problems with licensing, feel free to contact me – I will try to help.

Properties of blitzblank

• 3 column WordPress-Theme, the content column is in the middle of the screen but it is on the top in the source code.
• Theme is 960px wide. Within the website container relative units are used so you can increase the size of fonts, etc..
• Login-area is on the top in the right corner.
• Pages are listed as horizontal navigation elements.
• Text in the header-section is hidden but it is in the sourcecode.
• Print-CSS-Stylesheet for all pages and posts by default.
• Widgetized sidebars, although the theme could be used without widgets as well.
• Valid XHTML 1.0 transitional and CSS 2.1

Installation of blitzblank

• Download the theme file
• Unzip the file and put the file onto your webspace in your theme folder wordpress/wp-content/themes/
• Activate the theme in the backend
• Open the file header.php in the directory bb2en and customize it, put your blogname und authorname in it.
• Cut the favicon.ico file out of your bb2en directory and place it in your wordpress-root-directory (optional).
• Make a new header pic and place it in bb2en/css/screen/images and save it as “head.png” (optional).
• In bb2en/css/screen there are the already mentioned files “basemod.css” and “content.css” – here is the place for customizing the layout of your theme.

Changes to former versions (blitzblank 1.0, 1.1, 1.2)

• The width of the layout is set to 960 px. According to this decision it was possible to put the main content area on the top of the source code.
• The theme is not internationalized any more, so you have to decide to download the English or the German Theme Files. The lack of internationalising a theme was one reason that the release of blitzblank 2 took so long.
• Almost every file of blitzblank was rewritten. The comment area is redesigned. New templates were added. For example a 404.php, this file will be requested if a page cannot be found and there is an archive.php, this file will be requested if the user clicks on an archive-page. The necessary queries were in the header.php so these queries were made at each file requests as a part of the WordPress-Loop. Now the loop is in many files and is customized for each template.
• There are two templates for creating pages. By default there is the “page.php”, this file doesn’t show the comment-template. I met this decision, because now you can avoid an ugly message “No comments” and “Comments are closed” on all pages. If you want to allow comments, you can use the template “page_with_comments” (page_comments.php in your theme directory) and all will work.
• There is another template called “archives.php”. Write a page with it and there will be displayed a monthly archive, a category archive and a tag-cloud.
• The sidebar files where prepared for usage without using WordPress-Widgets.
• There are lots of comments in the files.
• The theme takes care of images and text. By default text is picking on images – that doesn’t look well. There are two classes “imagealignleft” and “imagealignright” to handle this. After including the image you add a class to it. Switch from “Visual” to “HTML” editing mode and you will see something like <img src=”… . Now you write your preferred class definiton before the “src”- attribut. It looks like this “<img class=”imagealignright” src=”… for an image which should be aligned right and <img src=”… for left aligned images.

Have fun with this theme and thanks in advance for your feedback!

Download

• blitzblank 2 – English version – last reviewed – 06-04-2008 – bb2en

Links with additional information

• blitzblank-Demo (German version of blitzblank)
• YAML-Online-Documentation
• YAML-Licenses
• Tutorial to make a new header – the shiny floor effect .”