Netzkescher

11.04.2010

Flatpress-Widgets beliebig positionieren

Der Ausgangspunkt für diesen Artikel lag für mich in der Frage

“Wie bekomme ich das Blockparser-Menü-Widget von der rechten Sidebar in eine horizontale Menüleiste im Header des Blocks?”

Dabei geht es nicht darum, wie dies css-mäßig zu realisieren ist, sondern eben darum, wie man Flatpress-Widgets beliebig positionieren kann. Wer jetzt mit dem Begriff “Widget” nichts anzufangen weiß, muss erstmal im Flatpress-Wiki nachlesen.

Bildlich ausgedrückt möchte ich also von dieser Darstellung

zu dieser

Der im Folgenden aufgezeigte Weg, lässt sich auf jedes andere Widgets übertragen. Ich kann auf diesem Weg alles, was sich durch ein Widget darstellen lässt, beliebig positionieren.

Wie wird festgelegt, wo Widgets dargestellt werden?

Widgets sind in Flatpress in Widgetbereichen (oder -leisten oder -gruppen) organisiert. Eine solche Gruppe kann ein einzelnes Widget oder auch mehrere enthalten. Wo diese Widgetbereiche auf der Webseite erscheinen, wird durch Einträge in den Theme-Dateien (*.tpl) festgelegt. Im Standardtheme “Leggero” existiert in der Datei widgets.tpl z.B. folgender Eintrag

Dieser Eintrag sorgt dafür, dass im div-Container “column” der Widgetbereich “right” dargestellt wird. Welche einzelnen Widgets im Bereich “right” enthalten sind und damit ihren Weg auf die Webseite finden, stellt man im Adminpanel “Widgets” ein.

Flatpress muss allerdings wissen, dass der Bereich “right” im Theme vorhanden ist. Er muss deshalb registriert werden. Wäre der Bereich “right” nicht registriert, würde er auf der Webseite nicht dargestellt. Ein nicht registrierter Widgetbereich führt im Admin-Widgetpanel dazu, dass der Bereich als nicht zum Theme zugehörig eingestuft wird.

Platz für den Widgetbereich schaffen

Mein Anliegen war, eine horizontale Menüleiste im Header zu erhalten. Für die Darstellung des Menüs musste im Header also entsprechend Platz geschaffen werden. Ich bearbeitete die header.tpl also so, dass dieser vorhanden war, indem ich einen div-container erstellte und über css nach meinen Vorstellungen positionierte. (Der div-Container hat bei mir die id=”menu_hor”.)

Eigene Widgetbereiche registrieren

Nun muss der neu zu erstellende Widgetbereich registriert werden. Dazu bearbeitete ich die theme.conf.php meines Themes. Die Zeile
register_widgetset(’Horiz_Menue’);
wurde ergänzt.

Code für Widgetbereich einbinden

Nun wird der neue Widgetbereich in der header.tpl in den gerade neu erstellten div-Container eingefügt.
So sieht das bei mir aus:

Wichtig ist, dass der von mir für den Widgetbereich gewählte Name “Horiz_Menue” in den beiden bearbeiteten Dateien übereinstimmt. (Keine Sonderzeichen, keine Leerzeichen verwenden.)

Widget in den neuen Widgetbereich einfügen

Dies geschieht über das Admin-Widgetpanel. Wenn alles geklappt hat, sollte im Panel jetzt der neue Widgetbereich sichtbar sein. Per Drag’N'Drop kann nun das Blockparser-Menü-Widget in den neuen Bereich gezogen werden. Speichern nicht vergessen.

Zum Schluss muss die Darstellung des Menüs (das Menü ist ja über eine Liste realisiert) natürlich noch über entsprechende css- Formatierungsangaben angepasst werden.

Bemerkungen

Ich habe hier einen Weg beschrieben, der bei mir funktioniert hat. Sollte er Fehler enthalten oder wenn ihr einen besseren, einfacheren oder anderen Weg kennt, schreibt gerne Kommentare.

Folgende Einträge im Flatpress-Wiki waren eine Hilfe:
Advanced techniques: Widgets
Adding widget bars
FAQ

10.04.2010

Tabellen in Flatpress erstellen

Tabellen in Flatpress zu erstellen ist ein gruseliges Thema, weil es mit dem eingebauten Editor eigentlich gar nicht geht. Man muss eh HTML verwenden und dann bietet es sich an, die Tabelle gleich extern zu erstellen und den Code später einfach in den Flatpress-Editor zu importieren. Wenn man in der Konfiguration des BBCode-Plugins die Option “Benutzung von HTML-Code und BBCode erlauben” aktiviert hat, muss man nicht einmal Tags setzen.

Damit die Erstellung des Grundgerüstes schneller geht, kann man sich z.B. eines Online-Tools bedienen. Zwei stelle ich hier beispielhaft vor.

Homepage-Total-Tabellengenerator

Mit diesem Tool geht das Entwickeln des Grundgerüstes sehr zügig.
Nach dem Aufruf der Seite erscheint die Grundversion. Man setzt die gewünschten Optionen (die Bedeutung der späteren HTML-Tags muss man natürlich kennen) und klickt auf “Anzeigen”. Der Quellcode erscheint und kann in den Flatpresseditor kopiert werden. Bei Bedarf lässt man sich eine Vorschau anzeigen.

Weiter gehende Einstellmöglichkeiten erhält man, indem man auf das kleine +-Symbol klickt.

Mit den nun möglichen Optionen lässt sich die Tabelle sehr individuell gestalten. Nicht vergessen, die Angaben, die man nutzen möchte, auch im Optionenfeld zu markieren!

HTML Table Generator with CSS

Der Tabellegenerator von Spectrum Research geht noch einen Schritt weiter. Er legt die CSS-Formatierungsangaben in eine eigene Datei. Diese Lösung ist also nichts für die schnelle Tabelle zwischendurch, sondern mehr etwas für die grundlegende Arbeit am Design.

Tipps zum Editieren in Flatpress

Dazu verweise ich mal auf die Artikel Flatpress Editor und Flatpress-Editor - Text Formating Toolbar sowie Firefox 3.6 und “Text Formatting Toolbar”.

09.04.2010

Tipps zum Texteditor PSPad (2)

Im zweiten Teil der Artikelserie zum Texteditor PSPad stelle ich einige der Tastaturkommandos vor, die von mir häufig benutzt werden. Es gibt natürlich viel mehr Kürzel. Eine Übersicht erhält man über die programminterne Hilfe. Alle Kürzel können bei Bedarf nach Belieben verändert werden. Zugriff erhält man aus dem Programm über Einstellungen - Programm einstellen - Tastaturbelegung.

Tastaturkürzel, die Windows-Standard sind, erwähne ich nicht extra (z.B. CTRL+O für Datei öffnen, CTRL+S für Datei speichern, CTRL+F für Suchen, F3 für Weitersuchen usw.).

SHIFT+CTRL+E

Öffnen/Schließen des Code-Explorer-Fensters
Das Code-Explorer-Fenster ermöglicht die schnelle Orientierung in der Datei. Sein Inhalt ist abhängig vom der gewählten Syntax.
In der Abbildung sieht man das Fenster bei einer html-Datei (rechter Bereich).
Das Fenster kann aus dem übergeordnetem Programmfenster herausgezogen und beliebig auf dem Desktop platziert werden.

CTRL+F2

Öffnen/Schließen des Tool-Fensters

Das Toolfenster vereinigt mehrere Funktionen in sich.

• Projektverwaltung
• Dateimanager
• FTP
• Favoriten
• geöffnete Dateien

Auf einige dieser Funktionen komme ich im Verlauf der Artikelserie noch zurück.

ALT+C und ALT+A

Öffnet/Schließt das Fenster zur Farbauswahl bzw . eine (klickbare) ASCII-Tabelle.

SHIFT+CTRL-T

Selektiert den gesamten Tag.

CTRL+M

Findet die zugehörige Klammer und setzt den Cursor davor.

ALT+PFEIL LINKS

Setzt ein Lesezeichen, das durch ein kleines gelbes Viereck dargestellt wird.
ALT+PFEIL RECHTS löscht das Lesezeichen, wenn man sich in der entsprechenden Zeile befindet.
Mit ALT+PFEIL UNTEN/ALT+PFEIL OBEN springt man von Lesezeichen zu Lesezeichen.
SHIFT+CTRL+B öffnet eine Liste der gesetzten Lesezeichen.

SHIFT+CTRL+I und SHIFT+CTRL+U

Zeile oder markierten Block einrücken bzw. ausrücken. Funktioniert auch über TAB und SHIFT-TAB.

CTRL+W

Zeilenumbruch an/aus

F10

Browservorschau für HTML-Dokumente

CTRL+F10

HTML-Code-Überprüfung

CTRL+LEERTASTE

Öffnet die Befehlsreferenz, die wiederum abhängig von der gewählten Syntax ist.

CTRL+J

Öffnet das Auto-Vervollständigen-Fenster. Hier kann man Ausdrücke auswählen, die bereits in der Datei verwendet wurden.
In php-Dateien hat so z.B. Zugriff auf die bereits verwendeten Variablen.

Weitere Informationen

Es lohnt sich in der programminternen Hilfe die Abschnitte “Working with Text” und “HTML-Page-Example” zu lesen. Zwei kleine Tutorials, die einem die ersten Schritte mit PSPad erleichtern.

So, das reicht für heute.

08.04.2010

Tipps zum Texteditor PSPad (1)

PSPad ist der Texteditor mit dem ich z.Zt. am häufigsten arbeite. Und weil ich mir diesmal die Zeit genommen habe, auch mal in die Hilfedatei zu schauen (was nicht generell der Fall ist, wie ich leider zugeben muss), bin ich bezüglich der Bedienung des Programms doch um einiges schlauer geworden. Dieses Wissen möchte ich für mich gern verfügbar halten und ist auch für euch möglicherweise interessant. Deshalb werde ich in der nächsten Zeit einige Infos zum Programm in lockerer Folge hier im Blog veröffentlichen.

PSPad wird von Jan Fiala entwickelt. Es läuft unter Microsoft Windows.

Grundlegende Funktionen (V 4.5.4 )

Ich benötige PSPad für vor allem für die Arbeit mit txt-, bat-, (x)html-, css- und php-Dateien. Darauf beschränken sich also meine Erfahrungen. PSPad unterstützt mit seiner Funktionalität eine Reihe von weiteren Programmiersprachen und kann auch als HEX-Editor dienen. Dazu kann ich allerdings nichts sagen.

Folgende für mich wichtige Funktionen bietet PSPad an:

• deutschsprachige Oberfläche
• ausführliche Programmhilfe und aktives Forum (englisch)
• Unterstützung von UTF-8
• Syntax-Highlighting für viele Programmiersprachen (von denen ich natürlich nur wenige brauche)
• integrierter FTP-Client für Textdateien
• integrierter Dateimanager
• zeitgleiches Bearbeiten mehrerer Dateien in Tabs
• Vergleichen von Dateien
• Verwalten von Lesezeichen
• Verwalten von Vorlagendateien
• Zeilennummerierung
• umfassende Suchen-/Ersetzen-Funktion
• Speichern und Wiederherstellen aller geöffneten Dateien mit wenigen Klicks (Sitzungsliste)
• Code-Explorer
• Vervollständigung bekannter Wörter
• Neustrukturierung von HTML- und CSS-Code
• zusammengehörende Klammern finden
• Befehlsreferenz (Clips)
• Unterstützung von Erweiterungen (von den Usern werden eine ganze Reihe bereitgestellt)

PSPad bietet noch weit mehr als das bisher Aufgeführte - Projektverwaltung, Makros, Einbindung externer Unterstützungsangebote (z.B. HTML TiDy) … - die ich bisher allerdings noch nicht oder nur selten verwendet habe. Einen eigenen Überblick könnt ihr euch auf der Homepage des Programms erschaffen. Oder seht euch einige Screenshots an.

Auch dies ist für mich relevant

• das installierte Programm kann auf einen USB-Stick verschoben werden
• das Programm kann kostenlos benutzt werden
• PSPad wird weiterhin gepflegt

Im nächsten Artikel liste ich einige der wichtigsten Tastaturkürzel auf und beschreibe die ersten ausgewählten Funktionen etwas genauer.

07.04.2010

Webdesign-Tutorial

Um es mir einfach zu machen, zitiere ich hier mal den Autor des Webdesign-Tutorials Manuel Becker:

Bei dieser Seite handelt es sich um eine möglichst vollständige Anleitung zum Erstellen von professionellen Webseiten.

Ich hab es bisher nur kurz überflogen - ein Blick lohnt sich aber auf alle Fälle. Es werden eine ganze Menge Themen angesprochen. Natürlich nicht wirklich “vollständig” - das wäre auch zu viel verlangt - aber sicher sind sowohl für Anfänger als auch für fortgeschrittenere Designinteressierte eine Menge Informationen in den einzelnen Kapiteln enthalten. Das Ganze wirkt sehr aufgeräumt und gut lesbar. Natürlich sollten die Workshops nachgearbeitet werden. Sonst wird es wohl nichts mit dem Lerneffekt.

Auszugsweise und beispielhaft einige Themen aus dem Inhalt:

• HTML, CSS, PHP, MySQL und JavaScript
• Was macht eine professionelle Webseite aus?
• Wahl des Grundlayouts
• Die richtige Farbwahl
• Das Basisdesign
• HTML- und CSS-Grundlagenq
• PHP-Grundlagen
• MySQL-Grundlagen
• Content Management System (CMS)

—

Wie bin ich darauf gestoßen?

Webdesign-Know-how für Einsteiger
Wie man zum Webdesigner wird
der-webdesigner.net