Netzkescher

20.08.2009

Online-Literatur: Einführung in XHTML, CSS und Webdesign

Michael Jendryschik hat sein Buch “Einführung in XHTML, CSS und Webdesign” online zur Verfügung gestellt. Er schreibt selbst über dieses Buch:

Die für Anfänger geeignete Dokumentation bietet Grundlagenwissen zum Publizieren im WWW sowie eine an den W3C-Standards und der Trennung von Struktur und Layout orientierte Einführung in XHTML und CSS. Sie richtet sich vor allem an Anfänger, die das Erstellen von Webseiten mit Webstandards erlernen möchten, an Fortgeschrittene, die bereits einige Websites erstellt haben und ihr Wissen nun weiter vertiefen möchten, aber auch an Profis, die schnell etwas nachschlagen möchten, beispielsweise Informationen zu einem bestimmten XHTML-Elementtyp oder die erlaubten Werte einer CSS-Eigenschaft.

Natürlich habe ich nur ein bisschen gestöbert und nicht alles gelesen. Mein Tipp ist aber, mal einen Blick darauf zu werfen. Ich glaube, es lohnt sich für viele richtig.

Neben den theoretischen Grundlagen wird an einem ausführlichen Praxisbeispiel gezeigt, wie die erworbenen Kenntnisse konkret umgesetzt werden können. Die dafür erforderlichen Dateien liegen als Download bereit. Wer schon Vorkenntnisse hat, kann natürlich auch nur den Praxisteil durcharbeiten, um seine Kompetenzen zu erweitern.

Und wer das Ganze doch lieber als handfestes gedrucktes Werk haben möchte, bestellt bitte versandkostenfrei direkt über die Seite des Autors. Dann hat der nämlich mehr davon und das sei ihm angesichts dieses tollen Angebotes sehr gegönnt.

18.08.2009

Layout

Ich habe die Seite auf ein neues Layout umgestellt, welches ich (nicht ganz ohne Mühe, siehe Artikel) selbst bearbeitet habe.

Das Layout basiert auf einem Template von freecsstemplates.org .

Falls ihr Fehler bemerkt, seid so freundlich und schreibt einen Kommentar.

17.08.2009

Video-Tutorial: 3-Spalten-Layout

In diesem Video wird gezeigt, wie ein 3-spaltiges CSS/HTML-Layout aufgebaut wird. Das Video ist für Anfänger geeignet und bietet einen kurzen (9 Minuten) Einblick in das Thema.

Auf sampsonvideos.com werden weitere Videos angeboten, die vielleicht euer Interesse wecken. Zur Zeit werden die Themen Photoshop, CSS/HTML, JavaScript/jQuery, MySQL und PHP behandelt.

16.08.2009

Templates für Flatpress

Wie in diesem Artikel beschrieben, läuft dieses Weblog unter Flatpress, weil ich ein paar grundlegende Erfahrungen mit der Template Engine Smarty sammeln möchte. Dabei geht es mir nicht so sehr um Smarty selbst, sondern um um das Verständnis für den Aufbau von Templates von CMS- oder Blogsystemen, die Smarty verwenden. Die Liste dieser Systeme ist recht umfangreich.

Ein Einstieg in dieses Thema über Flatpress erschien mir wegen der Übersichtlichkeit dieses Programms sinnvoll. Ich musste allerdings feststellen, dass ich trotz vorhandener HTML- und CSS-Kenntnisse reichlich Stunden basteln musste, um eine allgemeine Template-Vorlage auf Flatpress zu portieren. Und dabei habe ich erstmal eine einfach strukturierte Vorlage gewählt!

Ich schreib im folgenden einiges über meine Schwierigkeiten bei der Umsetzung. Vielleicht liest das jemand und kommentiert, dass es ihm auch nicht leicht viel. Da würde ich mich gleich besser fühlen. Oder jemand hat Tipps und schreibt sie in einen Kommentar.

Wie fange ich an?

Natürlich muss man zunächst wissen, was Smarty überhaupt ist,wozu es dient und wie es grundlegend funktioniert. Dazu hab ich die Smarty-Homepage (Deuschsprachiges Manual)besucht und dort ein wenig herumgestöbert. Eine zusätzliche Websuche verhilft zu dem einen oder anderen kurzen Tutorial. Etwas richtig überzeugendes habe ich allerdings nicht gefunden. Es gibt auch einige Hinweise im Flatpress-Wiki. Die Dokumentation über die Verwendung von Smarty in Flatpress ist aber leider recht rudimentär.

Learning by doing

Dann habe ich mir das Standard-Template (Leggero) von Flatpress genauer angesehen. Das besteht ja nicht nur aus einer html- und einer css-Datei sowie ein paar Grafiken, sondern aus einer ganzen Reihe von tpl-Dateien, css-Dateien und noch ein paar anderen, die in einer bestimmten Ordnerstruktur organisiert sind. Nachdem ich alle einmal geöffnet hatte, um zu sehen, was denn da so drinsteht, bekam ich zwar ein Gefühl dafür, wie das Ganze grob zusammenspielt, mehr aber auch nicht. In den tpl-Dateien habe ich dann hier und da Einträge verändert, um zu sehen, welche Auswirkungen die Veränderungen haben.

Vorlage portieren

Damit habe ich am meisten Zeit verbracht. Grundlegend stellt sich mir die Frage, wie man bei einer Übertragung einer allgemeinen css-/html-Vorlage am besten vorgeht. Eine Antwort darauf habe ich noch nicht gefunden. (Ihr schon? Dann schreibt doch bitte einen Kommentar!) Letztlich lässt sich mein Vorgehen nachträglich grob zu folgenden Schritten zusammenfassen:

• Kopie des Leggero-Templates-Ordners als Arbeitsgrundlage. Umbenennen der common.css. Ändern der Ordnernamen.
• Einfügen der css-Datei der gewählten Vorlage in den Ordner res. Umbenennen in common.css. Einfügen der Grafiken der Vorlage in den Ordner imgs.
• Umbenennen der das Layout strukturierenden div-container in den tpl-Dateien, so dass die Angaben in diesen Dateien zu denen in der neuen common.css passen. Abhängig von der Vorlage wird z.B. aus header –> head, aus main –> content oder aus body-container –> page. Ohne Firebug wäre ich hier nicht klar gekommen!

  Wenn das neue Template nun in Flatpress aktviert wird, sieht das schon ganz vielversprechend aus. Aber der Teufel liegt natürlich im Detail.

• Ausmerzen einer ganzen Reihe von kleinen und größeren Darstellungsfehlern oder Verbesserungen im Layout. Dabei hantierte ich in den verschiedenen css-Dateien herum. Teilweise mussten divs oder classes ergänzt werden. Eine ganze Reihe habe ich aus der common.css des Legero-Themes in die eigene common.css kopiert und angepasst. Einige divs und classes mussten aber auch neu erstellt werden.

  Das war ein richtiger Zeitfresser. Ein ständiges Hin und Her zwischen Browser und Editor, immer wieder vergleichen mit der gewählten Original-Vorlage, intensiver Einsatz von Firebug, um herauszufinden, welcher Eintrag eigentlich wo eine Rolle spielt. Zwischendurch immer wieder das Gefühl, dass Übersichtlichkeit anders aussieht. (Komischerweise tauchen in Zusammenhang mit der Verwendung von Smarty-Templates gerade die Worte “übersichtlich” und “einfach” gerne auf, wenn ich mich recht erinnere.)

• Als dann die Startseite halbwegs gut aussah, musste ich feststellen, dass auch der Admin-Bereich und die Kommentarseiten nochmal einzeln bearbeitet werden mussten. Also ging die Suche von vorne los und die Einträge in den zugehörigen css-Dateien wurden angepasst.
• Dann war es soweit, dass das Layout keine groben Fehler mehr aufwies. Allerdings sind die css-Dateien noch voller Einträge, die vermutlich überflüssig sind. Das stört nicht, ist aber auch nicht schön. Vielleicht mache ich mich da auch nochmal ran. Das ist natürlich problematisch, wenn die Bedeutung mancher Einträge einem nicht klar ist. (Die css-Dateien des Leggero-Themes sind aber kommentiert, was eine gute Hilfe darstellt.)
• Schließlich wollte ich im Template noch RSS-Funktionalität für den gesamten Blog und für das Verfolgen einzelner Kommentare einbinden, sodass der Leser diese mit Mausklick abonnieren kann. Da machte sich die spartanische Flatpress-Dokumentation arg bemerkbar. Zum Glück gibt es das Forum.

Letztlich habe ich es hinbekommen, aber es war ein ganz schöner Akt. Dabei war es nur eine einfach aufgebaute Vorlage! Vielleicht bin ich aber auch völlig falsch an die Sache herangegangen. Wie gesagt, schreibt bitte Kommentare, wenn ihr Tipps habt oder auch, wenn ihr mich trösten wollt! ;-)

Ansonsten werde ich das Layout demnächst für dieses Weblog verwenden, wobei sicher noch der eine oder andere Fehler oder Verbesserungsmöglichkeiten sichtbar werden. Einzelne Aspekte des hier nur grob beschriebenen finden u.U. noch Eingang in weitere Artikel.
—–

Links:

Video zur Nutzung von Firebug
Weitere Informationen zu Firebug.

09.08.2009

Flatpress-Editor - Text Formating Toolbar

In diesem Beitrag habe ich einige Anmerkungen zum in Flatpress integrierten Editor gemacht. Insbesondere, wie man ihn unter Firefox mit Hilfe der Text Formating Toolbar “aufbohren” kann. Wie dort beschrieben ist, lässt sich die Toolbar mit eigenen Befehlen erweitern. Nun wäre es mühselig, dies auf mehreren Rechnern manuell zu tun, wenn man verschiedene Geräte im Einsatz hat. Zum Glück kann man die gemachten Einstellungen übertragen. Dies geht auf die folgende Weise:

1. Aufruf der Editierfunktionalität.
   
2. Über “Convert To String” die eingebundenen Grafiken konvertieren.
   
3. Im Profilordner von Firefox die Datei format_buttons.xml suchen. Unter Vista befindet sich der Profilordner z.B. im Pfad C:UsersBenutzerAppDataRoamingMozillaFirefoxProfiles.
4. Diese Datei kopieren und in den Firefox-Profilordner des Zielsystems kopieren.

Wenn man die eigenen Befehle einzeln übertragen möchte, soll das folgendermaßen funktionieren

• Wie oben und gewünschten Karteireiter auswählen.
• Wie oben.
• Klick auf das Symbol für “Speichern”.
  
• Speichern als XML-Datei.
• Diese Datei kopieren lässt sich dann auf dem Zielsystems analog in die Toolbar einbinden

Bei mir klappt das Speichern allerdings nicht; es erscheint keine Dateiauswahlbox.

Nachgelesen kann das Ganze auch auf der Homepage der Text Formating Toolbar.