Skip to content

Wellenreiten 02/2015

Wer als “Websurfer” metaphorisch auf den Wellen des Netzes reitet, findet dabei zwar keine paradiesischen Inseln, manchmal aber immerhin ganz interessante Lektüre.

Im Februar 2015 kann ich u.a. folgende Fundstücke empfehlen und der werten Leserschaft ans Herz legen:

Tips, Tricks & Tech

Webdesign

Interessantes aus der (Populär-)Wissenschaft

It’s a kind of magic

  • Magic - “Text this phone number to get whatever you want on demand with no hassle”
    Ein US-amerikanischer Dienstleister, der von sich behauptet, als Vermittler jeden (legalen) Lieferwunsch zu erfüllen, nur eine SMS entfernt.

Zeitdiebe

GUUG-Frühjahrsfachgespräch 2015 in Stuttgart

Nachdem das Frühjahrsfachgespräch (FFG) der GUUG im vergangenen Jahr zunächst im Herbst landete und dann zur Gänze abgesagt werden musste, findet das Frühjahrsfachgespräch 2015 nun Ende März in Stuttgart statt.

  • Termin: 26./27.03.2015
    mit Tutorien am 24./25.03.2015 und der Mitgliederversammlung am 25.03.201 ab 19 Uhr
  • Ort: Universität Stuttgart, Fachbereich Informatik, Universitätsstraße 38, 70569 Stuttgart
  • Kosten: 300,- € für beide Konferenztage, 160,- € für einen Tag
    mit einem Frühbucherrabatt von 20% bei Anmeldung bis 02.03.2015 (und Zahlung bis 06.03.2015) und einem Rabatt von weiteren 20% für Mitglieder der GUUG und assoziierter Organisationen.
    Für die Tutorien fallen zusätzliche Kosten an.
  • Das Programm steht auf den Webseiten des FFG 2015 online.

Obschon die aufgerufenen Preise für “Hobbyisten” sportlich sind und sich die Konferenz auch vom Termin her (werktags) offensichtlich an Firmenkunden (und Selbständige) richtet, werde ich mir diese Veranstaltung in räumlicher Nähe nicht entgehen lassen. Wieviel mir die Themen dann tatsächlich bringen, wird sich weisen. Das Programm klingt jedenfalls sehr interessant.

Markup-Formate konvertieren

In meiner Reihe “Webdesign anno 2015” habe ich versucht, einen Überblick über Techniken und Tools zu geben, die letztlich jedermann die Gestaltung moderner, gut aussehender Webseiten ermöglichen. Das hatte natürlich einen konkreten Anlass: ich bin dabei, allmählich und sehr langsam - im Rahmen der mir bleibenden zeitlichen Möglichkeiten - verschiedene ältere Webpräsenzen zu überarbeiten und inhaltlich wie optisch und technisch auf den heutigen Stand zu bringen.

Eine große Erleichterung ist dabei die automatische Konvertierung von “klassischem” HTML in HAML und/oder Markdown. Ein machtvolles Werkzeug für solche Konvertierungsaufgaben ist pandoc; es geht aber oft auch eine Nummer kleiner, ganz simpel per cut & paste online:

Wenn nur eine Handvoll Seiten - oder Teile einer Seite - zu konvertieren sind, reicht (mir) das vollständig aus.

Webseiten und Webapplikationen erstellen und pflegen

Viele der in den vergangenen vier Wochen dargestellten Möglichkeiten rund um die Gestaltung von Webangeboten lassen sich ohne größeren technischen Aufwand umsetzen. Will man jedoch Templates einsetzen, andere (vereinfachte) Auszeichnungssprachen wie Markdown in HTML konvertieren oder CSS-Präprozessoren wie LESS oder SASS einsetzen, bedarf es dazu entsprechender Software.

Content Management Systeme (CMS)

In Betracht kommen insoweit - wie schon in meinem einleitenden Übersichtsbeitrag dargestellt - zunächst Content Management Systeme (CMS), die üblicherweise einerseits die Bearbeitung von Vorlagen und Inhalten direkt über das Web ermöglichen und die fertigen Webseiten “dynamisch” beim Aufruf erzeugen. Stattdessen lassen sich auch Blogsysteme oder Wikis verwenden, zumal sich diese teilweise in ihren Funktionen durchaus an CMS annähern.

Beispiele für CMS sind

Eine umfangreiche Übersicht, die allerdings auch Wikis und Blogs enthält, findet sich bspw. in der englischsprachigen Wikipedia.

Static Site Generators

Im Gegensatz zu CMS erzeugen Static Site Generators “statische” HTML-Dateien, die nur bei einer Veränderung neu erzeugt werden müssen. Das ermöglicht natürlich keine Reaktionen auf Benutzereingaben; oft ist solche Interaktion für eine Website aber jenseits eines Kontakt- oder auch Kommentarformulars gar nicht notwendig. Die Belastung für den Webserver ist bei der Auslieferung statischer Seiten natürlich geringer; auch besteht keine Gefahr durch die Ausführung möglicherweise unsicheren Codes. Zudem ist Webspace ohne Scriptsprachen und Datenanbindung oft günstiger zu haben …

Beispiele für Static Site Generators sind

Eine umfangreiche Liste mit fast 400 Static Site Generators, die zudem nach Kriterien wie Lizenz oder Programmiersprache sortiert werden kann, bietet reichliche Auswahl. Alternativ dazu kann man sich eine Aufstellung der beliebtesten Open-Source Static Site Generators zeigen lassen.

Web Application Frameworks

Wo Webseiten vor allem Texte (und Bilder) enthalten, bieten Webapplikationen mehr (oder primär) Interaktion - im Prinzip handelt es sich um Software, die nicht lokal, sondern über das Web läuft. Gekennzeichnet sind sie durch Reaktionen auf Nutzereingaben, die Anbindung von Datenbanken und ihre Dynamik - also das genaue Gegenteil “statischer” Seiten. CMS, Wikis, Blogs und Co. sind Beispiele für Webapplikationen.

Auch und gerade hier gilt natürlich, dass nicht nur Struktur (HTML) und optische Repräsentation (CSS), sondern auch Ausgabe bzw. Darstellung (Template) und die dahinterstehende Programmlogik strikt voneinander getrennt werden sollten: Model–view–controller (MVC) ist das Stichwort. Das Äquivalent zu CMS und Static Site Generators für Webapplikationen wären Web Application Frameworks, die in der Regel Templates (“Views”) mit Daten(bank)modellen (“Models”) und der entsprechenden Ablaufsteuerung (“Controllers”), also der eigentlichen Programmlogik, verbinden.

Gerne würde ich mich auch damit näher beschäftigen - bisher fehlte mir aber die Zeit und Gelegenheit, in dieser Richtung mehr zu unternehmen als mich zu belesen. Interessant klingen insoweit im Bereich der PHP-basierten Frameworks bspw.

Abschließend daher nun die Frage: Kennt sich jemand unter den Lesern mit einem dieser Frameworks (oder überhaupt mit Frameworks auf PHP-Basis) aus, kann Erfahrungen teilen oder Empfehlungen geben? Ich würde mich freuen!

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

Serendipity-User-Treffen 2015

Wie Dirk schon angekündigt hat, findet am ersten März-Wochenende 2015 ein Treffen der Serendipity-Entwickler- und Nutzergemeinde im Linuxhotel in Essen statt. Zweck ist kein “Hackfest”, sondern ein persönliches Kennenlernen der Entwickler und eben auch Nutzer - vielleicht auch ein Austausch über Erfahrungen, Entwicklungsmöglichkeiten und Ziele von und mit Serendipity nach dem vorläufigen Abschluss der großen Renovierung und dem Release 2.0.

  • Termin: 06.-08.03.2015
  • Ort: Linuxhotel in Essen
  • Kosten: 20,- € plus optional 30,- € für ein halbes Doppelzimmer und/oder 10,- € für Frühstück,
    maximal also 60,- € für die Zeit von Freitagabend bis Sonntagabend
  • Neben einer Zusammenfassung der bisherigen Informationen gibt’s auch einen Forenthread.
  • Wer nicht im Schlafsack auf dem Boden oder extern übernachten möchte, muss sich bis einschließlich 19.02.2015 bei Dirk melden.
  • Auch Tagesgäste sind willkommen, sollten sich aber gleichfalls bei Dirk melden.

Bisher ist die Gruppe noch recht klein; ich würde mich freuen, viele der (verbliebenen) Nutzer von Serendipty dort zu sehen!

Wie man verlorene Adobe-Seriennummern wiederfindet

Die Idee, für eine hier vorhandene Version von Adobe Acrobat nach einigen Jahren einmal ein Update auf die aktuelle Version zu kaufen, erscheint gar nicht schlecht (auch wenn man sich über die Preispolitik leicht wundern darf - der Preis in EUR ist deutlich höher als in US-$).

Schön also, dass es eine günstigere Update-Version gibt, die gegenüber der Vollversion deutlich Geld spart. Blöd allerdings, wenn man - Ordnung muss sein! - vor dem Installieren der Update-Version die zum Update berechtigende Vorversion schon gelöscht hat. Hält alles schon ordentlich, führt aber natürlich zum Fehlschlagen der Update-Prüfung.

Kein Problem: man muss ja nur die Seriennummer der alten Version eingeben. Wenn man die allerdings nicht wiederfindet und sie auch nicht online bei Adobe registriert ist, warum auch immer … ist das eher schlecht.

Vorausgesetzt, man hat jetzt wenigstens noch ein Backup, das zeitlich vor der Deinstallation liegt, ist aber immer noch nicht aller Tage Abend. Falls also noch einmal jemand außer mir vor dem Problem steht, die Seriennummer einer Adobe-Acrobat-Installation aus einem Backup auszulesen, seien ihm folgende Schritte ans Herz gelegt:

  1. Im Backup das Verzeichnis \Program Files (x86)\Common Files\Adobe\Adobe PCD\cache suchen.

  2. Die dort vorhandene Datei cache.db mit einem Leseprogramm für SQLite-Dateien öffnen, bspw. dem DB Browser for SQLite. Die Seriennummer findet sich dort in codierter Form im Datenfeld SN.

  3. Die Seriennummer konvertieren, bspw. via Adobe Serial Algorithm.

Ich buche das jetzt alles unter der Überschrift “wenn man mal eben schnell vor dem Zubettgehen noch etwas ausprobieren will” ab, bedanke mich herzlich beim Autor von How Do I Find My Adobe Acrobat Serial Number? und mache mich nunmehr (einige Stunden verspätet) auf die Suche nach meinem Schönheitsschlaf.

Wellenreiten 01/2015

Wer als “Websurfer” metaphorisch auf den Wellen des Netzes reitet, findet dabei zwar keine paradiesischen Inseln, manchmal aber immerhin ganz interessante Lektüre.

Im Januar 2015 kann ich u.a. folgende Fundstücke empfehlen und der werten Leserschaft ans Herz legen:

Tips, Tricks & Tech

Software

  • tttool - Das Schweizer Taschenmesser für den Tiptoi-Bastler

  • f.lux - software to make your life better
    f.lux passt die Farbwärme des Displays an die Tageszeit an.

  • Simplenote (via Caschys Blog)

Webdesign

IT-Sicherheit

  • Michal Zalewski in lcamtuf’s blog: Looking back at three months of afl-fuzz
    American fuzzy lop (afl) ist ein Fuzzer, ein Programm, das unzulässige, unerwartet oder schlicht zufällige Eingabewerte erzeugt, um damit die Stabilität und Sicherheit des Zielprgrogramms zu testen und Fehler und Sicherheitslücken zu finden.

(Selbst-)Organisation

Medizin

Presseschau: Skurriles, Schönes und weniger Schönes im Blätterwald

Zeitdieb

  • Elevator Saga - The elevator programming game
    Wer schon immer eine Aufzugsteuerung programmieren wollte: hier ist eure Chance!

Meine Blogroll wächst

Im vergangenen Monat habe ich folgende Blogs neu abonniert:

Christliches

Medizinisches

Berufliches

Templates und Template Engines

HTML und CSS, Frameworks wie Bootstrap, Web- und Iconfonts, LESS oder SASS bieten viele Möglichkeiten zur Gestaltung standardkonformer, gut lesbarer und auf verschiedenen Endgeräten nett anzusehender Webseiten. Eine größere Webpräsenz komplett “von Hand” zu pflegen macht allerdings wenig Spaß - und ist auch alles andere als professionell oder eine gute Idee.

Denn regelmäßig ist eine Website oder auch eine Webapplikation gekennzeichnet durch ein “Grundkorsett”, das mit wechselnden Inhalten gefüllt wird. So wird sich meist ein einheitliches Gestaltungskonzept mit Kopf- und/oder Fußzeile, mit einer oder mehreren Spalten und einer Navigation auf allen Seiten wiederfinden. Dieses Grundgerüst der ganzen Webpräsenz sollte sich dann nicht per copy & paste auf jeder Einzelseite wiederholen, sondern vielmehr in Form einer Vorlage, eines Templates, vorliegen, um dann jeweils mit spezifischen Inhalten gefüllt zu werden. Auch ist es - gerade bei Webapplikationen - sinnvoll, die “Technik” von der “Darstellung” zu trennen, damit Änderungen am Design nicht zwingend Änderungen an der Programmierung erfordern und umgekehrt. (Und, natürlich, damit verschiedene Teams an der optischen Darstellung der Seiten und der dahinterstehenden Programmlogik arbeiten können).

Auf diese Art und Weise arbeiten bspw. Blogsysteme wie Wordpress (mit eigenen Template-Funktionen) oder Serendipity (wo das Template-System Smarty genutzt wird) und natürlich auch Content Management Systeme (CMS) oder static site generators.

Das Prinzip ist immer gleich: ein Grundgerüst und mögliche Inhalte werden getrennt definiert, wobei das Grundgerüst oft aus einer HTML-Datei besteht. In dieser (HTML-) Datei können Platzhalter (Variablen) durch passenden Text ersetzt und andere Dateien eingebunden werden, Codefragmente (in einer Programmiersprache wie Perl, PHP, Python oder Ruby und/oder in einer speziellen Template-Sprache) eingebaut und/oder sogar statt HTML andere Auszeichnungssprachen verwendet werden. Das kann “dynamisch” bei jedem Aufruf der Seite erfolgen, ggf. mit Caching, oder die Webseiten können einmal aus ihren Quelltexten generiert werden und dann “statisch” online gestellt - und nur bei Änderungen aktualisiert - werden.

"Templates und Template Engines" vollständig lesen

Drahtlos auf Schienen

Es ist nunmehr etliche Jahre her, dass ich täglich eine längere Strecke zu pendeln hatte; seit einem halben Jahrzehnt bin ich allenfalls noch Gelegenheitsnutzer der Bahn auf längeren Strecken und damit natürlich auch nicht mehr wirklich über aktuelle Entwicklungen im Bilde. Positiv konnte ich jetzt aber vermerken, dass die WLAN-Angebote der Bahn sich preislich wie technisch deutlich verbessert haben.

Vor mehr als einem Jahrzehnt begann der Onlinezugang bei der Bahn mit rail&mail in den Lounges, zu diesem Zeitpunkt (jedenfalls für mich) noch drahtgebunden, aber trotzdem bereits recht praktisch. Ein Jahr später wechselte die Bahn dann zur T-Com und erstattete ziemlich großzügig die noch vorhandenen rail&mail-Guthaben, und ich habe (nicht nur deshalb) seitdem immer auf irgendeine Weise einen Hotspot-Tarif der Telekom (oder eines der verbundenen Unternehmen, die über die Jahre immer mal ihren Namen änderten, aufgespalten wurden und erneut fusionierten) gebucht gehabt, derzeit in Verbindung mit meinem heimischen Telefon- und Internetzugang, so dass ich ohne Zusatzkosten in jeder Lounge online komme.

Schon etliche Jahre bietet die Bahn auch WLAN-Zugänge in ihren ICE - zumindest auf bestimmten Strecken und jedenfalls anfänglich auch nur in bestimmten Zügen - an. Aus der Anfangszeit hatte ich allerdings den Eindruck mitgenommen, dass die Netzverbindung doch oft eher wackelig war oder gar nicht funktionierte, wobei das Problem meistens “hinter” dem WLAN-Accesspoint lag, also in der drahtlosen Anbindung des Zuges ans Netz. Auch hier konnte ich mich kostenneutral mit meinem T-Com-Account einloggen.

Nachdem ich dieser Tage wieder einmal mit der Bahn die Lande bereiste, habe ich jetzt festgestellt, dass der WLAN-Zugang im ICE inzwischen recht zuverlässig funktioniert - doch nicht nur das: zumindest in der 1. Klasse und auch in der Lounge ist er jetzt kostenlos für alle! Das finde ich insgesamt sehr erfreulich, auch wenn es mir natürlich keine Ersparnis bringt (aber immerhin spare ich mir die Eingabe meiner Zugangsdaten).

Jetzt bin ich auf die künftige Entwicklung gespannt; bereits im letzten Monatsrückblick hatte ich ja auf die Berichterstattung der c’t zu den künftigen Plänen der Bahn auf diesem Gebiet verlinkt. Verbesserungspotential für die Geschwindigkeit und Verbindungsstabilität gibt es sicherlich weiterhin.

Installation von nanoc unter Windwows 7

Über nanoc, einen Generator für statische Webseiten, hatte ich hier im Blog bereits berichtet. Bislang nutze ich ihn auf verschiedenen Linux-Maschinen ohne Probleme, wollte ihn aber nunmehr auch auf meinem Laptop unter Windows 7 installieren, um auch ohne Netzanbindung das eine oder andere ausprobieren zu können.

Installationsanleitung

Ausgehend von einer über Google gefundenen Anleitung gestaltet sich die grundsätzliche Installation unter Windows überraschend einfach und problemlos:

  • Zunächst benötigt man Ruby - dankenswerterweise gibt es dafür einen Windows-Installer zum Download. Empfohlen wird derzeit Ruby 1.9.3.

    • Bei der Installation sollten die Optionen Add Ruby executables to your PATH und Associate .rb and .rbw files with this Ruby installation ausgewählt werden. Ggf. wird ein Reboot erforderlich.
    • Testen lässt sich die Installation bspw. durch den Aufruf des interaktiven Interpreters mit irb (verlassen wird er mit quit) und durch den Aufruf von gem --version, um zu testen, ob auch der Paketmanager RubyGems installiert und lauffähig ist.
  • nanoc selbst wird dann einfach vermittels gem install nanoc installiert. Das funktionierte bei mir erfreulicherweise ohne jedes Problem; auch der Aufruf war sofort möglich.

  • Die Installation von Win32::Console verbessert ggf. die Darstellung und kann ebenso einfach mit gem install win32console erfolgen.

  • Fehlt zum Abschluss noch ein integrierter Webserver, falls man einen solchen nicht bereits zur Verfügung hat: gem install adsf ermöglicht es, die generierte Webpräsenz mittels nanoc view unter http::/localhost:3000 anzuschauen.

  • Nutzt man weitere Filter und Funktionen wie kramdown oder ähnliches, sind die entsprechenden Gems nachzuinstallieren. Gebräuchlich mag bspw. gem install kramdown haml rubypants sein.

So weit, so gut. Endlich mal ein Fall, wo die Installation eher “unixoider” Software unter Windows ohne größere Probleme funktioniert, könnte man denken.

Und dann kam LESS.

"Installation von nanoc unter Windwows 7" vollständig lesen

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

(Re-)Launch von my-fqdn.de

Anfang der Woche hatte ich bereits den (Re-)Launch von is-easy.de verkündet - ein bislang nicht wirklich genutztes Angebot. Daneben gibt es einen noch älteren, ebenso aus dem Usenet geborenen Dienst, den ich bereits seit 1999 anbiete: nämlich die Registrierung eigener Subdomains zur Erzeugung von Message-IDs in Usenet-Postings (und E-Mails).

Im Zusammenhang mit einem Artikel im Linux-Magazin, der den - schlechten - Rat gab, beim Betrieb eines eigenen lokalen Newsservers vor der Einspeisung von Beiträgen ins Netz deren Message-ID zu entfernen, wurde auch die “richtige” Generierung eigener Message-IDs kontrovers diskutiert. Der Grund für den (potentiell verhängnisvollen) Ratschlag in besagtem Artikel war schließlich, dass Message-IDs meistens mit dem Namen des lokalen Rechners erzeugt wurden und dieser Name oft nicht weltweit gültig war, weil es sich nicht um einen FQDN (“fully qualified domain name”) handelte. Mich betraf das nicht, hatte ich doch bereits Zugriff auf verschiedene eigene Domains - aber ich wollte auch anderen auf einfache Weise die Möglichkeit zur Erzeugung eigener “gültiger” Message-IDs geben, und was lag da näher, als einfach eine entsprechende Subdomain dafür zur Verfügung zu stellen?

Also bot ich im Oktober 1999 an, Namen unterhalb von fqdn.th-h.de zu reservieren. Aufgrund des vergleichsweise großen Zuspruchs - im ersten halben Jahr immerhin rund 70 Anfragen - und natürlich auch aus Spaß an der Technik machte ich mich im Mai 2000 daran, die Vergabe zu automatisieren und die Beantragung eines Namens über meine Website zu ermöglichen. Ab dem 11.05.2000 (und dem 72. vergebnen FQDN) war es dann soweit: jeder Interessierte konnte sich einfach über ein Formular “seinen” Namen reservieren, und ich musste die Vergabe dann nach kurzer Überprüfung nur noch per E-Mail bestätigen.

Entsprechend meinem damaligen Kenntnisstand - und auf der Suche nach einer schnellen und einfachen Lösung - stand hinter fqdn.th-h.de keine Datenbank, noch nicht einmal sqlite, sondern schlicht eine Textdatei im CSV-Format, die durch PHP-Scripts gelesen und ggf. beschrieben wurde. Natürlich ohne jede Sicherung gegen konkurrierende Zugriffe. Ich wollte das zwar immer professionalisieren, aber dazu kam es nie so recht - es gab ja immer genügend anderes zu tun, und schließlich funktionierte das alles anstandslos … Bis heute, übrigens.

Über die Jahre boten mehrere Newsserverbetreiber ihren Nutzern selbst die Möglichkeit, einen Namensraum für die Erzeugung von Message-IDs zu nutzen, und Jürgen Freitag ging noch einen Schritt weiter als ich und stellte ein vergleichbares Angebot unter einer eigenen Domain, nämlich myfqdn.de, auf die Beine. So kam mir einige Zeit später die Idee, bei einem kostenlosen Anbieter die Domain my-fqdn.de zu reservieren und als Alternative zu fqdn.th-h.de zur Verfügung zu stellen.

Die Zeit verging; die Webseite von myfqdn.de ging irgendwann offline, my-fqdn.de musste ich von dem bisherigen kostenlosen Anbieter, der sein Angebot einstelle, umziehen, die Nutzung des Usenets stagnierte - aber es kamen immer wieder neue Anfragen für FQDNs, wenn auch in den letzten Jahren nur noch wenige. Immerhin: in den 15 Jahren von 1999 bis Ende 2014 wurden rund 1.300 FQDNs vergeben!

Aus diesem Grund habe ich die bereits angesprochene geplante Neustrukturierung meiner Website und die ohnehin bestehende Notwendigkeit einer technischen Überholung (CSV! konkurrierende Zugriffe!) zum Anlass genommen, nunmehr im Jahr 2015 my-fqdn.de als eigenständige Website an den Start zu bringen.

Optisch lässt sich die Ähnlichkeit zu is-easy.de nicht leugnen; das schadet aber nichts. Nicht jede Mini-Website braucht ein individuelles Design, und es erfüllt seinen Zweck. (Außerdem gefällt es mir. :-))

Auch hier nehme ich natürlich gerne Kommentare entgegen - und es besteht weiter die Möglichkeit, sich einen FQDN zu reservieren, falls noch jemand (ohne eigene Domain) das Usenet nutzt …

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

tweetbackcheck