Skip to content

Serendipity 2.0

Was lange währt, wird wirklich gut.

Nach dem zweiten Release-Candidate ist nun Serendipity 2.0 released und hier für dieses Blog installiert, wo sich im Dreivierteljahr seit dem Relaunch auch die Beta-Versionen schon bewährt haben.

Was andere dazu sagen

[Dieser Eintrag wurde nachträglich um weitere Beiträge in anderen Blogs ergänzt.]

LESS, SASS und Co.

LESS? SASS? Hä?

LESS und SASS (Syntactically Awesome Stylesheets) sind CSS-Präprozessoren; man könnte sie vielleicht auch als CSS-Compiler bezeichnen. Sie erzeugen aus einer CSS-ähnlichen, aber mächtigeren Sprache gültige CSS-Dateien, konzeptionell entfernt ähnlich der Art und Weise, in der bspw. PHP und andere in der Webentwicklung verwendete Scriptsprachen HTML erzeugen.

Wenn man ein einheitliches Design für seine Webseiten erstellen möchte, ist es oft wichtig, dass die einzelnen Elemente aufeinander abgestimmt sind. So sollten sich bspw. Schriftgrößen von Text und Überschriften miteinander harmonieren, vielleicht finden sich auch bestimmte charakteristische Farbelemente, die das Seitendesign prägen. Wäre es nicht schön, wenn man mit wenig Aufwand Änderungen an allen notwendigen Stellen vornehmen könnte, also bspw. die bisher verwendete Farbe x überall durch die Farbe y ersetzen? Oder die Schriftgröße des Fließtextes erhöhnen und dabei die Schriftgröße von Überschriften und anderen, besonderen Elementen proportional ändern? Das und mehr geht mit LESS und SASS.

Sowohl LESS als auch SASS sind notwendiger oder ergänzender Bestandteil der von mir bereits vorgestellten Frontend-Frameworks und für diejenigen, die damit umgehen können, fraglos ein wichtiger Bestandteil zeitgemäßer Webentwicklung.

(Ich zähle mich allerdings nur sehr bedingt zu diesem Personenkreis, weshalb dieser Überblicksartikel ein gewisses Wagnis darstellt - ich erzähle hier mehr oder weniger als Blinder von der Farbe).

LESS

LESS bietet die Möglichkeit, Variablen zu definieren - bspw. eine bestimmte Farbe - und diese Variablen dann in CSS-Definitionen zu verwenden. Ändert man die Variable, ändern sich - nach der Neucompilierung - alle damit verbundenen Definitionen.

Mixins heben dieses Konzept auf eine neue Ebene: sie ermöglichen es, ganze CSS-Definitionen in andere Definitionen zu importieren und dabei ggf. noch Parameter zu übergeben. Auch hier gilt natürlich wieder: ändert man das Mixin, ändern sich alle Defitionen, die es importieren.

Darüber hinaus erlaubt LESS den Einsatz von Funktionen und Operatoren. So kann bspw. eine bestimmte Schriftgröße für den Fließtext vorgegeben und dann definiert werden, dass die Überschriftenebene <h6> genau so groß, aber fettgedruckt sein soll, die Überschriftenebene <h5> aber 1.1x so groß und die Ebene <h1> 2x so groß. Farben können als “10% heller” (oder dunkler, oder satter, oder …) als eine andere Farbe definiert werden, ohne dasss dies jeweils manuell in Farbwerten berechnet werden müsste - und ändert man die zur Grundlage genommene Farbe, ändern sich auch die anderen, daraus “berechneten” Farben automatisch mit!

Schließlich bietet LESS die Möglichkeit, CSS-Definitionen ineinander zu verschachteln, also bspw. zunächst grundsätzliche Eigenschaften einer Klasse und dann bestimmter Elemente dieser Klasse zu definieren.

Wem das alles zu trocken klingt, der findet auf LESScss.de eine Erläuterung mit Beispielen, die vollständige Dokumentation, Downloadmöglichkeiten und mehr in deutscher Sprache.

SASS

Für SASS … gilt im Prinzip dasselbe, was ich zuvor bereits gesagt habe; nur habe ich SASS bisher nicht selbst ausprobiert. :-)

Mehr zu SASS gibt es (in englischer Sprache) auf SASS-lang.com, einen Vergleich der beiden Sprachen (Stand 2012) bspw. bei CSS-Tricks.

Würde ich mehr davon verstehen, könnte ich sicherlich auch die bestehenden Unterschiede, Vorteile und Nachteile der beiden Sprachen darstellen; insoweit muss ich leider passen und freue mich auf die Ergänzungen und Richtigstellungen in den Kommentaren.

Dieser Beitrag gehört zur Reihe “Webdesign anno 2015”.

[Dieser Eintrag wurde nachträglich im Februar 2015 veröffentlicht.]

Webfonts und Iconfonts

Webseiten vermitteln in der Regel Informationen und bestehen daher auch - im Regelfall sogar: weit überwiegend - aus Text. Text, der möglichst angenehm zu lesen sein soll, und dabei am besten noch gut aussehen. Zu bedenken sind daher die Auswahl einer geeigneten Schriftgröße, ein passender Zeilenabstand und eine lesefreundliche Zeilenlänge - aber auch eine gut lesbare und “schöne” Schriftart. Die Zeiten von “Serifenschrift, alternativ serifenloser Schrift auf weißem Hintergrund” sollten im Jahr 2015 eigentlich vorbei sein, gibt es doch genügend Auswahl.

Allerdings: es genügt - wie immer - nicht, einfach eine hübsche Schrift auszuwählen und dann auf dem eigenen Rechner zu testen, wie die Seite damit aussieht, denn der Browser greift bei der Schriftdarstellung auf die Schriften zurück, die ihm das System zur Verfügung stellen kann. Ist eine Schrift lokal nicht verfügbar, wird stattdessen eine - hoffentlich angegebene - (generischere) Alternative verwendet:

 font-family: Verdana, Arial, Helvetica, sans-serif;

Das kann dann immer noch ungefähr so aussehen, wie man sich das vorstellt … oder eben auch nicht.

Webfonts

Eine alternative Vorgehensweise bieten “Webfonts” - seit CSS 2 kann nämlich eine Schriftart via @font-face (Erläuterung) eingebunden bzw. nachgeladen werden. Das hat den Nachteil eines (zumeist nur leicht) verzögerten Aufbaus der Seite und - gerade bei langsamen, ggf. mobilen Verbindungen - eines (merklich) größeren Donwload-Volumens, aber den Vorteil, dass eine große Auswahl tatsächlich überall verfügbarer Schriften bereitsteht.

Als Quelle bietet sich zunächst Google Fonts an, wo Google über 600 Schriftarten in allen Variationen zur freien Verfügung bereitstellt. Wem das nicht genügt, der kann auf kostenlose Alternativen wie Fontsquirrel oder kostenpflichtige Angebote zurückgreifen, bspw. von Typekit aus dem Hause Adobe, von fonts.com aus dem Hause Monotype oder von MyFonts.

In jedem Fall sollte man nicht übersehen, dass zumeist verschiedene Schriftschnitte benötigt werden, also unterschiedliche Schriftstärken (mager, normal, halbfett, fett), Schriftlagen (normal, kursiv) oder auch Schriftbreiten (schmal, normal, weit). Daher muss man bei kostenlosen Anbietern wie Google Fonts das Einbinden aller benötigten Schriftschnitte bedenken und vor allem bei kostenpflichtigen Anbietern prüfen, ob der angegebene Preis auch alle erwünschten oder erforderlichen Schriftschnitte umfasst.

"Webfonts und Iconfonts" vollständig lesen

Frameworks für HTML, CSS und Javascript

Vergangene Woche hatte ich einen Überblick über die vielfältigen Möglichkeiten gegeben, die in HTML 5 und CSS 3.0 enthalten sind - ohne dabei Javascript überhaupt anzusprechen. Heute möchte ich zeigen, wie man sich diese neuen Möglichkeiten zunutze machen kann, ohne zuvor monatelang Bücher zu studieren und auszuprobieren. :-) Kluge Leute haben nämlich bereits Frameworks zusammengestellt, eine Art Baukasten, aus dem man sich bedienen kann.

Im einfachsten Fall enthält dieser Baukasten CSS und Javascript, um Webseiten einigermaßen elegant und responsive zu gestalten, einschließlich der notwendigen Tricks für die Kompatibilität zu älteren Browsern. Meistens gehört dazu dann auch irgendeine Art von Grid, also einer Aufteilung, um mehrspaltige Seiten zu gestalten, deren Aufbau sich auf kleineren Bildschirmen anpasst - bspw. indem Spalten nicht nebeneinander, sondern übereinander dargestellt werden.

Umfangreichere Frameworks enthalten zusätzlich CSS-Formatierungen für Standard-Elemente wie eine Navigationsleiste, Tabellen mit wechselndem Hintergrund pro Zeile oder auch andere Gestaltungselemente.

Dazu kommen dann noch Templates oder Themes, die im einfachsten Fall Beispiele oder besser Vorlagen dafür darstellen, wie der Baukasten, das Framework, zur Anwendung gebracht werden kann. Oft enthalten sie auch weitere CSS-Definitionen über den Grundbestand des Frameworks hinaus.

Boilerplates und CSS-Frameworks

Ein “einfaches” Framework - hinter dem dennoch viel Arbeit und Erfahrung steht - ist bspw. HTML 5 Boilerplate. Es enthält - wie üblich - ein normalize.css, um die in Browsern enthaltenen Standard-CSS-Definitionen zu vereinheitlichen, Basis-Formatierungen und eine schlanke HTML-Beispielseite, dazu Modernizr, eine Javascript-Bibliothek, die austestet, welche Funktionalität der Browser unterstützt, und jQuery, quasi die Javascript-Standard-Bibliothek. Initializr ergänzt HTML 5 Boilerplate um einen Template-Generator, der eine Vorlage für ein neues Web-Projekt in drei verschiedenen Varianten erzeugen kann.

Bereits etwas umfangreicher (und aus deutschen Landen) kommt dann das “altehrwürdige” - 2005 begonnene - YAML-CSS-Framework in Version 4 daher. Sein Schwerpunkt liegt auf der Gestaltung flexibler Layouts (Stichwort responsive design), die es umfangreich unterstützt; dazu kommen - natürlich neben einer abgestimmten Typographie - Formular-Elemente und Buttons sowie Navigationselemente. Die CSS-Stylesheets werden dabei dynamisch via SASS erzeugt; YAML enthält aber auch eine fertig kompilierte, “statische” Version, die unmittelbar eingesetzt werden kann, ohne dass SASS als CSS-Präprozessor zum Einsatz gebracht werden müsste.

Ein anderer Ansatz, ein weiteres Framework ist Sassaparilla, ein massiv auf SASS und Compass aufsetzendes System, das allerdings an Dokumentation - soweit ich sehe - eher sparsam ist.

Große Frontend-Frameworks

Vertreter der Gattung sehr umfangreicher Baukästen sind bspw. (Twitter) Bootstrap, das mit Version 3 in sein fünftes Jahr geht, und das nur ein Jahr jüngere ZURB Foundation (aktuell in Version 5). Beide bieten eine weit über die “Grundzutaten” hinausgehende Auswahl an fertigen Bausteinen für Navigationselemente, Menüs mit verschiedenen Buttons und Dropdowns, farbige Hinweise und Einblendungen (sog. Modals), Fortschrittsbalken und so weiter, und so fort.

Ausgangspunkt ist natürlich auch hier ein flexibles Grid, mit dem die Webseiten responsive gestaltet werden können. Zudem ist aber auch eine reiche Auswahl an CSS-Formatierungen und Javascript enthalten, um eine Vielzahl von Gestaltungselementen einbauen zu können, die in der umfangreichen Dokumentation anhand von Beispielen dargestellt werden. Alle diese Beispiele können sofort per copy & paste in das eigene Webprojekt übernommen und angepasst werden-

Die Verwendung von CSS-Compilern wie LESS oder SASS ist nicht zwingend, weil auch Bootstrap eine fertig kompilierte CSS-Datei enthält; sie bietet aber noch umfangreichere Möglichkeiten, durch Änderungen an zentralen Variablen das ganze “look and feel” einheitlich für die gesamte Website anzupassen. Für den, der diese Compiler nicht verwenden kann oder will, bietet Bootstrap überdies einen Mittelweg: mittels Customizing kann mit allen vorhandenen Variablen experimentiert und dann eine entsprechend angepasste, statische CSS-Version erzeugt und heruntergeladen werden.

"Frameworks für HTML, CSS und Javascript" vollständig lesen

HTML 5 und CSS 3.0

Aktuelle Browser setzen zunehmend die neuen Möglichkeiten von HTML 5 und CSS 3.0 um, die ich in meinem Artikel “Webdesign anno 2015” bereits angerissen hatte. Doch was ist daran alles neu?

HTML 5

Der aktuelle HTML-Standard macht endgültig Schluss mit den schon lange verpönten “Design”-Elementen zur optischen Gestaltung und erweitert HTML um neue Möglichkeiten, insbesondere im Zusammenhang mit Javascript.

  • Rein optische Gestaltungselemente wie Frames oder <font>, <bgcolor>, <align> oder <big> gibt es nicht mehr. Ein standardkonformes HTML-5-Dokument darf solche Elemente nicht enthalten. HTML dient der semantischen Auszeichnung von Elementen, also der Beschreibung, was ein Element ist und nicht wie es aussehen soll.

  • Bestehende, bisher rein gestalterische Elemente wurden neu definiert und mit einer semantischen Bedeutung versehen.
    So ist <big> für die Kennzeichnung einer größeren Schrift entfallen, <small> aber geblieben; nur bezeichnet es keine kleinere Schriftgröße mehr, sondern quasi das “Kleingedruckte”, also weniger wichtige Ergänzungen. Auch <b> und <i>, früher für Fett- und Kursivschrift zuständig, bleiben erhalten. Sie bezeichnen jetzt optisch hervorgehobenen Text, der aber keine besondere Wichtigkeit hat; dafür gibt es die bestehenden semantischen Elemente <strong> und <em>.
    Soll also ein Begriff als wichtig oder bedeutsam hervorgehoben werden, greift man zu <em> oder <strong>. Sollen bspw. Marken- oder Personennamen, Fachbegriffe o.ä. gekennzeichnet werden, ohne dass damit aber eine besondere Betonung verbunden ist, sind <b> und <i> angebracht, auch wenn möglicherweise beide Varianten optisch identisch dargestellt werden. “HTML 5 ist ein neuer Standard” wäre mithin ein Fall für <i>, “Sie sollten sich damit auf jeden Fall auseinandersetzen!” wäre ein Fall für <em>.

  • Es gibt eine Reihe neuer Elemente wie bspw. <time>, vor allem aber neue Gliederungselemente.
    Wo bisher allüberall <div> verwendet wurde, um den Seiteninhalt zu strukturieren, treten nun Elemente wie <header>, <footer>, <nav> oder <aside> auf, die wie <div> verwendet werden können, aber eine zusätzliche semantische Bedeutung haben: als Kopf- oder Fußzeile, als Navigation oder zusätzliche Erläuterung. Der Hauptteil wird durch <section> und <article> gegliedert.

  • Hinzu kommen neue, einheitliche Attribute, die bspw. in Form von data-* auch die einfachere Anbindung von Javascript ermöglichen oder wie role oder aria-* eine möglichst barrierefreie Nutzung ermöglichen. Besonders gilt das für Formulare, bei denen sich ganz neue Möglichkeiten der Eingabevalidierung direkt durch den Browser (ohne Javascript) ergeben, weil ein Datumsfeld eben nur valide Daten oder ein E-Mail-Feld nur syntaktisch korrekte E-Mail-Adressen akzeptieren muss.

  • Außerdem kommen neue Möglichkeiten der Einbindung von Objekten, bspw. via <svg> oder <math>, hinzu, sowie vielfältige APIs für Javascript (Stichwort <canvas>, File-API oder Geolocation-API). Mit diesen Features habe ich mich aber noch nicht näher beschäftigt.

CSS 3.0

HTML wird ergänzt durch CSS. HMTL definiert, was ein Element ist: eine Überschrift, ein Absatz, eine Liste, eine Tabelle. CSS definiert, wie etwas aussehen soll: groß, klein, fettgedruckt, bunt, …

Die wichtigste Neuerung in CSS 3.0 sind sicherlich die Media Queries, die es ermöglichen, je nach Größe des Bildschirmfensters unterschiedliche Formatierungen anzuwenden. Wird die Webseite auf einem Smartphone aufgerufen, werden die Stilangaben für kleine Bildschirme verwendet; schaut man sie sich auf einem großen Bildschirm eines Desktoprechners an, kann sie ganz anders aussehen. Und verkleinert man auf dem Desktoprechner das Browserfenster, passt sich die Webseite wieder den neuen Dimensionen an.

Das ermöglicht responsive design - eine Website, die auf allen Geräten möglichst gleichermaßen gut aussieht. Auf dem Smartphone versteckt sich die Navigation hinter einem Button, die Inhaltsübersicht der aktuellen Seite wird ausgeblendet, die Seitenspalte mit ergänzenden Hinweisen steht vor oder nach dem Haupttext. Auf dem Tablet erscheint die Navigation; auf dem Desktop kommt auch die Seitenspalte zu ihrem Recht und wandert an die Seite, und die Inhaltsübersicht erscheint.

Selektoren und Pseudoklassen ermöglichen es, ganz zielgenau nur bestimmte Elemente zu formatieren: nicht jeden Absatz, sondern nur den Absatz direkt hinter einer Überschrift, oder nicht jedes Element einer Liste, sondern nur das erste oder letzte. Pseudoelemente ermöglichen es, vor oder hinter Elementen “etwas” einzufügen oder den ersten Buchstaben oder die erste Zeile gesondert zu behandeln. Beispiele dafür habe ich bereits im Beitrag “Kennzeichnung von Links in HTML-Dokumenten” gebracht.

Listen können in vielfältiger Weise formatiert werden; in Verbindung mit Pseudoelementen und Countern können sie bspw. (wie auch Überschriften) automatisch durchnummeriert werden.

Ganz neue Gestaltungsmöglichkeiten ermöglichen Farbverläufe und Schatten sowie Animationen mit transform und transition - ganz ohne Javascript, nur in CSS.

Die Möglichkeiten sind geradezu grenzenlos. :-)

Literaturempfehlungen

Neben einer Unzahl von Quellen im Web gibt es zu diesem Themenkomplex auch Bücher auf gedrucktem Papier, bspw.

  • HTML5 & CSS3 Webentwicklung mit den Standards von morgen von Brian P Hogan
    O’Reilly, 1. Auflage 2011, 272 Seiten, ISBN 978-3-89721-316-6
    Eine kurze, aber umfassende Vorstellung der Features und Veränderungen für den schnellen Einstieg in die Praxis.

  • HTML5 Webseiten innovativ und zukunftssicher von Peter Kröner
    Open Source Press, 2. Auflage 2011, 592 Seiten, ISBN 978-3-941841-34-5
    Das Buch beschreibt (nur) HTML 5, seine Anwendung, Umsetzung und Neuerungen in größerer Breite.

  • Flexible Boxes Eine Einführung in moderne Websites von Peter Müller
    Galileo Press, 1. Auflage 2013, 448 Seiten, ISBN 978-3-8362-2519-9
    In diesem Buch stehen nicht HTML, CSS oder seine Möglichkeiten, sondern die Gestaltung moderner Webseiten im Mittelpunkt: ausgehend von der semantischen Struktur des Inhalts (HTML) über dessen Gestaltung (CSS) bis zum Zusammenspiel dieser einzelnen Elemente, orientiert an praktischen Beispielen.

Ich wünsche fröhliches Gestalten und freue mich über Kommentare, Ergänzungen und eigene Erfahrungen!

Dieser Beitrag gehört zur Reihe “Webdesign anno 2015”.

[Dieser Eintrag wurde nachträglich im Februar 2015 veröffentlicht.]

Kennzeichnung von Links in HTML-Dokumenten

Bei der Gestaltung einer Website sollten Links gut als eben solche erkennbar sein - am besten unterstrichen und in dem gewohnten blauen Farbton, damit der Nutzer sie im Fließtext erkennen kann (in der Navigation ist das nicht von vergleichbarer Wichtigkeit, weil dort mit “klickbaren” Texten gerechnet wird).

Bestimmte Arten von Links möchte man oft dennoch abweichend kennzeichnen - zum Beispiel “mailto:“-Links, also solche, die nicht auf eine andere Webressource, sondern auf eine E-Mail-Adresse zeigen, und vielleicht auch andere Links, deren URL ein ungewohntes Protokoll enthält.

Man könnte solche Links in verschiedenen Farben anzeigen, aber das wäre alles andere als selbsterklärend, und der Websurfer heutiger Tage dürfte wohl kaum erst eine Erläuterungseite zur Gestaltung der betrachteten Webpräsenz studieren wollen, um sich zu vergewissern, was ihm ungewohnte Farben und Symbole sagen wollen. Unmissverständlich hingegen ist ein Icon, für eine E-Mail-Adresse bspw. ein Briefumschlag (früher auch gerne ein - am besten blinkendes oder rotierendes - @-Symbol). Auf diese Weise kann man Links auf E-Mail-Adressen zum Beispiel so auszeichnen:

<img src="/imgs/envelope.gif" /> <a href="mailto:thh@inter.net">thh@inter.net</a>

Für den Fall, dass häufiger Mailadressen im Text vorkommen, ist das allerdings etwas aufwendig, vor allem, wenn man das Prinzip auch noch auf andere Arten von Links ausdehnen möchte. Werden die Webseiten ohnehin durch eine Skriptsprache generiert, bspw. durch PHP, kann man stattdessen natürlich eine passende Funktion verwenden, die bspw. über den Aufruf mailto('thh@inter.net') die obige Ausgabe erzeigt. So richtig elegant ist das aber immer noch nicht.

"Kennzeichnung von Links in HTML-Dokumenten" vollständig lesen

Webdesign anno 2015

Webdesign ist ein Beruf - und eine Kunst. Und damit nichts, was man sich “mal eben” im Vorbeigehen für die professionelle Gestaltung der eigenen Webpräsenz aneignen kann.

Dennoch müssen Webseiten (gerade heute!) nicht mehr entweder “klassisch schlicht” oder … nun ja, bunt überladen und/oder unbeholfen aussehen wie in den Neunzigern. Die technischen Entwicklungen der letzten Jahre erlauben es vielmehr auch dem interessierten Laien, mit vertretbarem (Lern-) Aufwand durchaus ansehnliche Ergebnisse zu erzielen.

Für ein wirklich individuelles Konzept wird man freilich weiterhin sowohl über die notwendige Kreativität für einen entsprechenden Entwurf und dann auch die handwerklichen Kenntnisse verfügen müssen, um diesen Entwurf auch umzusetzen. Andererseits muss ich (zumindest für mich) gestehen, dass alle Webseiten, die ich in den letzten mehr als 15 Jahren gestaltet habe, ohnehin nicht “kreativ” in diesem Sinne waren. Vielmehr habe ich entweder vorhandene Templates als Basis genommen oder mich von anderen Seiten, die mir gut gefallen haben, “inspirieren” lassen - entweder nur optisch oder auch mit Anleihen aus den CSS-Definitionen. Wem das genügt - und die Auswahl an “Mustern” ist ja nun mittlerweile nahezu unendlich groß -, der hat gute Chancen, mit überschaubarem Zeiteinsatz seine bestehenden Seiten optisch und technisch ins 21. Jahrhundert zu befördern oder neue Seiten mit einem modernen “look & feel” zu schaffen, so lange er zumindest ein wenig mit den Grundzügen von HTML und CSS vertraut ist.

Ich möchte in der Folge - und in einer kleinen Serien von Beiträgen über die nächsten Wochen - einen Überblick über diese Möglichkeiten geben; wohlgemerkt einen Überblick aus der Sicht eines interessierten Laien, der selbst noch nicht alle Facetten dessen, was möglich ist, überblickt (und auch nicht immer trittsicher in den zugehörigen Begrifflichkeiten ist). Daher freue ich mich über ergänzende - oder berichtigende - Kommentare.

"Webdesign anno 2015" vollständig lesen

Google Calendar ausdrucken

Wie ich bereits vor 2 Monaten berichtet hatte, nutze ich den Kalender von Google, benötige aber auch “Ausdrucke” (richtiger: PDF-Fassungen) meiner Termine. Bislang hatte ich dazu Outlook genutzt, das die Daten aus dem Google-Kalender importieren kann, aber diese Möglichkeit fällt seit der Neuinstallation meines Laptops weg, weil ich - wenn möglich - nicht nur zum Drucken des Google-Kalenders Outlook installieren (und ggf. kaufen …) möchte.

Also benötige ich jetzt eine neue Lösung zum Drucken meines Kalenders (unter Windows, ersatzweise auf einer Linux-Shell) … und das erweist sich als überraschend schwierig. Dabei sind meine Anforderungen gar nicht so groß:

  • Auch längere Terminsbeschreibungen sollen - durch Zeilenumbruch - im Ausdruck lesbar bleiben.
  • Es sollen beliebige Zeiträume (jeweils ganze Wochen) auf eine Seite gedruckt werden können, also bpsw. 4-5 Wochen ab heute, auch wenn diese Wochen in verschiedenen Monaten liegen.

Optional wäre es noch nett, wenn …

  • … der Ausdruck einigermaßen ansehnlich ist, vielleicht sogar dem Druckergebnis von Outlook nahekommt.
  • … die farbige Kennzeichnung der Termine aus dem Google-Kalender übernommen wird.
  • … neben der Startzeit eine Dauer oder die Endzeit gedruckt werden kann.
  • … verschiedene Google-Kalender gedruckt werden können.

Google selbst ermöglicht natürlich den Kalenderdruck, scheitert aber an beiden zwingenden Anforderungen. Weder gibt es einen Zeilenumbruch - was zur Wahl zwischen “unlesbar kleiner Schrift” und “abgeschnittenen Terminsbeschreibungen” führt - noch können freie Zeiträume auf eine Seite gedruckt werden. Es ist zwar möglich, bspw. die letzten beiden Dezember- und die ersten Januar-Wochen zu drucken; die finden sich dann aber zwingend nach Monaten getrennt auf zwei Seiten. Dafür scheint es auch nicht wirklich eine Lösung zu geben.

Also habe ich mich frohgemut zur Google-Recherche aufgemacht. So schwer sollte das ja nicht sein, schließlich muss ich nicht direkt aus dem Google-Kalender drucken können; mir genügt eine Applikation, die sich mit dem Google-Kalender synchronisieren lässt oder wenigstens ICAL- (oder XML-) Dateien einlesen kann und dann entsprechende Ausdrucke ermöglicht.

"Google Calendar ausdrucken" vollständig lesen

Wechsel meines GPG-Schlüssels

Vor mehr als 15 Jahren habe ich mir - damals noch ausschließlich unter Windows - den ersten eigenen PGP-Key erstellt. Einige Jahre später habe ich diesen alten Schlüssel dann für alle praktischen Zwecke durch einen neuen Key ersetzt. Hanno hat mich jetzt dieser Tage daran erinnert, dass besagter aktueller GPG-Schlüssel ja nun auch schon wieder 10 Jahre alt ist und überdies von der Art und Länge her nicht mehr dem heutigen Standard entspricht.

Also ersetze ich meinen bisherigen Schlüssel:

  pub   1024D/144793AD 2004-10-01
    Key fingerprint = 74A6 8BEE C744 D06C 77D9  BFF5 0F23 6046 1447 93AD

ab sofort durch folgenden neuen Schlüssel:

  pub   4096R/04777287 2014-12-27 [expires: 2024-12-24]
    Key fingerprint = 0276 6D9A CBB6 7FC3 0CBD  93F8 64F6 2D3B 0477 7287

Der alte Schlüssel bleibt noch eine Zeit lang gültig; ich bitte aber darum, nur noch den neuen Schlüssel zu verwenden. Dieser steht auf den Keyservern und auf meiner Webseite unter http://th-h.de/download/0x04777287.asc zum Download bereit.

Außerdem gibt es ein mit beiden Schlüsseln signiertes Transition statement.

Retry, reboot, reinstall?

In den letzten Jahren habe ich im Schnitt alle drei Jahre einen neuen Laptop eingerichtet. Mal war das bisherige Modell uralt und mit ausgerissenen Scharnieren und ausgelutschten Akkus erneuerungsreif, mal wurde sein Leben durch ein umgekipptes Weinglas vorzeitig beendet, mal war es ein obskures Hitzeproblem, das zu ständigen Hängern führte, mal wollte ich einfach etwas neueres, größeres, schöneres und besseres, obwohl das aktuelle Gerät eigentlich noch ganz in Ordnung war. Insgesamt kam das meistens recht gut aus; wenn der Akku allmählich erste Schwächen zeigte, wenn das System gefühlt immer langsamer lief - aus welchen Gründen auch immer -, stand ein Austausch an.

Nachdem mein aktueller Laptop mittlerweile bereits dreieinhalb Jahre alt ist, der Akku aber zumindest noch einigermaßen frisch erscheint und mich nur der manchmal seeehr langsame Betrieb stört, habe ich mich entschlossen, es diesmal einmal anders zu versuchen und statt eines Neukaufs einfach einmal auf eine Neuinstallation zu setzen. (Angesichts der Tatsache, dass ich gerade letztes Jahr Firefly durch ein Neugerät ersetzt hatte, vielleicht auch keine schlechte Idee.)

Dummerweise dauert so etwas ja immer länger; meine Schätzung, dass die Aktion in einem halben Tag erledigt sein sollte, hat sich - fast schon erwartungsgemäß - als übermäßig optimistisch erwiesen, nachdem alleine Download und Installation der notwendigen Windows-Updates (nach Wiederherstellung der Auslieferungszustands von 2011) vier bis fünf Stunden in Anspruch nahm. :-) Und danach fängt die Neuinstallation notwendiger, angenehmer oder vielleicht auch überflüssiger Software ja erst an …

Inzwischen kann ich aber Vollzug vermelden; Landroval ist jetzt neu installiert und eingerichtet. Gespannt bin ich jetzt vor allem darauf, wie sich denn nun das Laufzeitverhalten darstellt und ob die träge Reaktion wirklich - wie man immer mal wieder lesen kann - an der alten und “vollgemüllten” Windows-Installation lag oder an anderen Ursachen.

Serendipity 2.0-rc2

Rund vier Monate nach der Installation der dritten Beta-Version von Serendipity 2.0 steht nun der erste (bzw. nach der schnellen Behebung eines kritischen Fehlers direkt der zweite) Release-Candidate zur Verfügung - sozusagen als kleines Weihnachtsgeschenk. :-)

Nach kurzem Test in meinem, nun ja, Testblog, setze ich diese Version jetzt auch direkt hier auf Netz - Rettung - Recht ein. Etliche (vor allem kleinere, teilweise aber auch nervige) Fehler wurden noch behoben (so zum Beispiel das Problem der ständig im Editor auftauchenden “Sicherheitskopien” älterer Eintragsentwürfe), einiges neu gestaltet (so die Auswahl der Kategorien und Tags und, sehr praktisch, ein Umschalter zwischen “Entwurf” und “Veröffentlichung” direkt beim “Speichern”-Button), und bisher bin ich sehr zufrieden.

Mal gucken, was sich noch an kleinen angenehmen Neuerungen - und vielleicht auch an verbliebenen Ecken und Kanten - findet. Ich bin gespannt, würde aber den Release-Candidate bereits jetzt empfehlen. (Klar, eine Sicherung der Dateien und der Datenbank (!) ist vor dem Update geboten.)

Ich hoffe, dass ich über die Weihnachtstage oder irgendwann im nächsten Jahr auch wieder einmal dazu komme, die Entwicklung näher zu verfolgen; einige kleine Kommentare und Bug-Reports haben sich noch angesammelt, die ich aber erst einmal reproduzieren und formulieren muss. Aber mit 2.0 soll die Entwicklung ja nicht beendet sein. ;-)

"Serendipity 2.0-rc2" vollständig lesen

htmlspecialchars(), PHP 5.4 und eine leere Ausgabe

Erst dachte ich, es liegt an mir - ich bin eben kein “Softwareentwickler”, sondern Dilettant (wie ich hoffe, im ursprünglichen Sinne). Nachdem jetzt aber auch ein Projekt wie Serendipity davon “gebissen” wurde, lohnt es sich vielleicht doch, ein paar Worte dazu zu schreiben, die anderen eine lange Google-Recherche ersparen.

Kurzum: Wenn nach einem PHP-Update (bspw. von Debian Squeeze mit PHP 5.3.3 auf Debian Wheezy mit PHP 5.4.35) Webapplikationen plötzlich verrückt spielen und Texte verschwinden, liegt das an einem geänderten Default der PHP-Funktion htmlspecialchars().

Die Langfassung

Nach einem Update meines Servers auf das aktuelle Debian Anfang diesen Jahres stellte ich fest, dass u.a. bei votetakers.de manche Teile der Seite einfach verschwunden waren. Eine genauere Betrachtung ergab, dass es sich dabei exakt um solche Teile handelte, die (a) dynamisch generierte Inhalte enthalten, aus denen mit der Funktion htmlspecialchars() unerwünschter HTML-Code entfernt wird (indem <> in &amp;lt;&amp;gt; umgewandelt wird), und bei denen (b) im entsprechenden Text Umlaute vorkamen.

Nach erster Ratlosigkeit stellte ich fest, dass die einzige Änderung an dieser Funktion zwischen PHP 5.3 und PHP 5.4 der geänderte Default für den verwendeten Zeichensatz war. Vollständig besteht der Aufruf von htmlspecialchars() nämlich nicht nur in der Übergabe des zu konvertierenden Textes in der Art htmlspecialchars('Ich bin ein Tästtext!'), sondern enthält u.a. auch noch Flags und das Encoding:

  1. string htmlspecialchars ( string $string [, int $flags = ENT_COMPAT | ENT_HTML401 [, string $encoding = &#8216;UTF-8&#8217; [, bool $double_encode = true ]]] )

Dabei hat sich der Default von ISO-8859-1 auf UTF-8 geändert:

If omitted, the default value of the encoding varies depending on the PHP version in use. In PHP 5.6 and later, the default_charset configuration option is used as the default value. PHP 5.4 and 5.5 will use UTF-8 as the default. Earlier versions of PHP use ISO-8859-1. 

Also habe ich testweise alle Aufrufe von htmlspecialchars() im Code ergänzt um passende Flags (zwingend, weil der Parameter im Funktionsaufruf vor $encoding steht und daher mit übergeben werden muss, wenn man $encoding setzen will) und das Encoding ‘ISO-8859-1’ … und danach tat es wieder.

Die Ursache dafür dürfte wohl darin liegen, dass htmlspecialchars() sinnigerweise einen leeren String zurückgibt, wenn der übergebene String - im entsprechenden Encoding - unzulässige Zeichen enthält:

If the input string contains an invalid code unit sequence within the given encoding an empty string will be returned, unless either the ENT_IGNORE or ENT_SUBSTITUTE flags are set.

Das führt dann zum “Verschwinden” der entsprechenden Text-Teile in der Ausgabe. Böse Falle.

Gut, man hätte vielleicht den Funktionsaufruf direkt richtig machen können, und warum das Problem überhaupt auftritt, obwohl die Datenbank als Collation “UTF-8’ hat, weiß ich auch nicht - vielleicht weil die Webseiten als Encoding ISO-8859-1 haben? Wie auch immer: so ist das nicht nett. Und noch weniger nett, dass es (vor PHP 5.6) keine Möglichkeit gibt, einen Default zu setzen, so dass man jeden (!) Aufruf von htmlspecialchars() mit Flags und Encoding “aufpeppen” muss - oder man ersetzt htmlspecialchars() sinnvollerweise direkt durch eine eigene Funktion, wie auch in einem Kommentar zur PHP-Dokumentation geraten wird.

Nachdem ich im März im Blog von Felix Pfefferkorn auf dieses Problem stieß und jetzt auch die Serendipity-Developer den Code kurz vor dem geplanten Release-Candidate noch einmal umkrempeln mussten, ist es wohl an der Zeit, dazu ein paar Worte zu schreiben - offenbar bin ich wenigstens nicht der einzige Dilettant (im besten Sinne, natürlich ;-)).

Nachwort

Ja, ich stehe dazu: ich hasse die Probleme mit Charset-Konversionen, überall - sowohl das unselige Problem der verschiedenen Zeilenende-Markierung in Windows und Unixen als auch Dinge wie das BOM (“Byte Order Mark”) am Anfang einer Textdatei, die dann durch ältere Software nicht mehr geöffnet werden kann, als auch die ganze unselige Hin-und-Her-Konvertiererei, oft ohne dass man der Datei ansehen könnte, welches Encoding sie denn nun genau hat. Am Ende stehen dann “kaputte” Postings, E-Mails oder Webseiten.

Und ich stehe auch dazu, dass ich den Umgang von PHP (und Apache und …) mit Zeichensätzen, insbesondere das Problem, wie man richtig mit Formulareingaben umgeht, einfach bisher nicht verstehe. Aber dazu wollte ich ohnehin bei Gelegenheit mal etwas schreiben.

Meine Plugins für Wordpress

Nachdem ich meine Erfahrungen mit Serendipity-Plugins schon geschildert habe, nun eine kurze Darstellung der Wordpress-Plugins, die ich nutze. Da der Markt dort - im Gegensatz zur Lage bei Serendipity - praktisch unüberschaubar ist und ich noch kein besonders erfahrener Wordpress-Nutzer bin, freue ich mich hier natürlich besonders über wertvolle Kommentare und Ergänzungen.

“Meine” Wordpress-Plugins

  • Jetpack von WordPress.com
    Ich glaube, zu Jetpack muss man nicht mehr viel sagen: eine Sammlung gebräuchlicher und weit verbreiteter Plugins.

  • Akismet
    Akismet schützt vor Spam (und dürfte gleichfalls weit verbreitet sein).

  • WP-Optimize
    Das Plug verspricht “Optimierungen” namentlich der Datenbank.

  • Wordfence Security
    Sicherheit soll dieses Plugin bieten; zudem implementiert es einen Caching-Mechanismus.

  • WordPress SEO
    Das Plugin bietet verschiedenste Möglichkeiten zur Search Engine Optimization, bspw. durch Zusammenfassungen für die description im HTML-Header des jeweiligen Blogbeitrags, unter Berücksichtigung dessen, was über Googles Algorithmen bekannt ist.

  • Google XML Sitemaps
    Dieses Plugin erstellt automatisch Sitemaps (also eine Liste aller verfügbaren Seiten und Beiträge), um das Blog für den Google-Bot besser durchsuchbar zu machen.

  • Google Analytics by Yoast
    Eine Schnittstelle zu Google Analytics, die auch die notwendigen Javascript-Schnippsel in die erzeugten Seiten einfügt.

  • NextScripts: Social Networks Auto-Poster
    Dieses Plugin ermöglicht die Ankündigung von Beiträgen bei Twitter, Facebook und Co.

  • Breadcrumb Trail
    “Brotkrumen-Navigation” für Wordpress

  • dejure.org-Rechtsvernetzung
    Die Dejure.org Rechtvernetzung ist ein externes Plugin, das automatisch Paragraphen und Gesetze sowie Fundstellen von Entscheidungen mit Links in das Angebot von dejure.org versieht. ALternativ kann man auch das Blog-Plugin von buzer.de verwenden, das nicht nur einige der gebräuchlicheren, sondern praktisch alle deutschen Gesetze erkennt, aber dafür keine Entscheidungen verlinken kann.

  • Contact Form 7
    Ein immens mächtiges Plugin zur Erzeugung von Kontaktformularen mit verschiedenen Feldern pp.

  • footnotes
    Nicht jeder wird so lange Beiträge schreiben, dass er dazu ein Plugin zur Verwaltung von Fußnoten benötigt, aber vielleicht ist dieses Plugin doch dem einen oder anderen “Science-Blogger” hilfreich.

  • VG Wort
    Auch dies sicherlich eher ein Nischenprodukt, aber sehr praktisch, ermöglicht es doch auf recht einfache Weise die Erfassung und Verwaltung von “Zählpixeln” der VG Wort im Rahmen des METIS (Meldesystem für Texte auf Internetseiten), und setzt diese Zählpixel vor allem automatisch in Beiträge oberhalb der erforderlichen Mindestlänge ein. Außerdem unterstützt es die Meldung der Beiträge an die VG Wort.

Über die Notwendigkeit von WP JV Custom Email Settings und Set email sender habe ich schon anderweitig berichtet.

Wordpress: Korrekte E-Mails generieren

Blogsysteme müssen regelmäßig E-Mails generieren, sei es an den Blogbetreiber, sei es an Kommentatoren: Informationen über neue Kommentare oder Beiträge, mögliche Updates usw. usf. Das erfordert natürlich das Vorhandensein einer (gültigen) E-Mail-Adresse, die als Absender solcher Mails eingesetzt werden kann.

Serendipity macht es sich einfach und überlässt dem Nutzer die Wahl: die “E-Mail-Adresse des Blogs”, blogMail, ist entsprechend in der Konfiguration zu setzen. Das erlaubt dem Nutzer die freie Wahl, erfordert aber umgekehrt natürlich, dass der Nutzer sich darüber Gedanken macht - andererseits: wie soll das anders gehen?

Die Antwort darauf liefert der Konkurrent WordPress, und sie überzeugt mich nicht: auch WordPress verlangt zwar die Angabe einer E-Mail-Adresse “zu administrativen Zwecke”, setzt standardmäßig als Absender aber die Adresse wordpress@example.com, wobei statt example.com die Domain des Blogs steht. Großartig, wenn eine solche Absenderadresse dann nicht existiert. Außerdem setzt WordPress offensichtlich standardmäßig keinen Envelope-Sender, so dass in der Regel der Benutzer, unter dem der Webserver-Prozess läuft, als solcher eingesetzt wird. Auch an diesen “Absender” in der Form www-data@yourhost.example.com kann man allerdings regelmäßig keine Mail schicken …

Abgesehen davon, dass daraus Probleme mit der Auslieferung der E-Mails entstehen können (Stichworte “Verifikation von Absenderadressen” und “Spamfilter”), ist das auch einfach technisch unschön. Wie also lässt sich das abstellen?

  1. Der Mailserver muss dem PHP-Prozess zunächst einmal erlauben, einen Envelope-From (bspw. via sendmail -f blog@example.com) zu setzen.
    Wenn man - wie ich - Exim einsetzt, muss der entsprechende Benutzer, unter dem der Webserver läuft, zu trusted_users hinzugefügt werden. Man kann sich dabei stundenlanges Debugging sparen, wenn man rechtzeitig daran denkt, dass man via mod_suphp (oder auf ähnliche Art und Weise) PHP-Scripts nicht unter der User-ID des Webservers, sondern unter derjenigen des Benutzers laufen lässt. Dieser Benutzer - und nicht www-data o.ä. - muss dann auch in trusted_users.

  2. Danach muss man WordPress davon überzeugen, den passenden From:-Header zu setzen.
    Das geht über manuelle Änderungen von Konfigurationsdateien oder - einfacher und m.E. auch besser - durch Installation eines passenden Plugins, von denen es eine ganze Reihe gibt. Ich nutze dazu WP JV Custom Email Settings, das mir leichtgewichtig genug erscheint. Stattdessen kann man natürlich auch WP Simple Mail Sender, Personal Email oder etwas ähnliches verwenden, im Extremfall etwas wie WP Mail Options, das den Zugriff auf alle Einstellungen von PHPMailer, dem verwendeten PHP-Modul, eröffnet und insbesondere auch Test-E-Mails generieren kann, was zum Testen ganz praktisch sein mag.

  3. Schließlich muss man in WordPress auch den Envelope-Sender korrekt setzen.
    Das kann, soweit ich sehe, nur das Plugin Set email sender.

Danach funktioniert dann auch in WordPress alles so, wie man sich das eigentlich von Anfang an gedacht hätte.