Linkeria (18. Mai – 19. Mai)

Diese Links habe ich in den letzten Tagen in meinem del.icio.us-Account gespeichert.

  • ARD Designserver

    Interessant: Das Corporate Design der ARD wird hier sehr ausführlich erklärt. Wirklich gut gemacht!

  • BdP Stamm Idar-Oberstein

    Die neue Webseite des BdP Stammes Idar-Oberstein aus Idar-Oberstein

  • @font-face gotchas

    Ich nutze zwar immer den FontSquirrel-Generator, Paul Irish erklärt hier aber auch nochmal wie man händisch @font-face "bullet proof" einsetzen kann.

  • Our Solar Sys­tem in CSS3

    Das Sonnensystem, mit Hilfe von CSS3-Befehlen nachgebaut. Unwahrscheinlich gut, was man da heute so alles machen kann. Leider funktioniert das Beispiel nur in Webkit-Browsern (Chrome, Safari).

  • Online Depth of Field Calculator

    Praktisch! Das ist ja noch so eine Geschichte die ich nie so ganz raffe und mich dann wundern muss.

  • Die artgerechte Haltung von Codern

    Wahre Worte.

sIFR leicht gemacht

Es ist schon eine Weile her, dass ich mir Gedanken um die Einbindung von alternativen Schriften Gedanken gemacht habe. Heute fand ich dann auch mal die Zeit, mich näher mit den Möglichkeiten auseinander zu setzen und nahm mir eine Testseite vor, auf der ich per sIFR die Schriften ersetzen wollte. Auf Anhieb liest sich die Anleitung dazu relativ kompliziert, eigentlich geht das aber in wenigen einfachen Schritten. Mehr dazu nach dem Klick.

Den Rest des Beitrages „sIFR leicht gemacht“ lesen »

Neue Schriftarten braucht das Land!

Wer hier aufmerksam mitliest, dem ist es schon aufgefallen: Ich suche in der letzten Zeit verstärkt nach Möglichkeiten um von den üblichen, „websicheren“ Schriften wegzukommen. Ein wenig habe ich mich schon an den Standardschriften sattgesehen. Außerdem ist im eher „verschnörkelt-verspielten“ Bereich da relativ wenig zu machen. Wenn man nicht gerade ComicSans einsetzen möchte.

Grundsätzlich ist es ja erst einmal so, dass die Schriftart die ein Browser darstellen soll auch auf dem Computer des Seitenbesuchers vorhanden sein muss. Es bringt mir also nichts, TotalCooleSchrift.ttf auf meiner Seite zu benutzen, wenn außer mir dieses Schrift niemand besitzt. Das klingt nach einem Problem!

Natürlich bin ich nicht der einzige, der sich mit diesem Thema auseinandersetzt und so haben sich schon einige kluge Menschen ein paar Gedanken um das Thema gemacht. Nachdem ich nun auch ein wenig recherchiert habe, sind mir grundsätzlich zwei Methoden in Erinnerung geblieben.

  • sIFR: Der auszugebende Text wird mit Hilfe von Javascript dynamisch in Flash gerendert. Das nennt sich dann sIFR.
    Hier liegt der zu verwendende Schriftsatz als Flash-Datei auf dem Server und mit ein wenig Javascript-Magie werden dann vorher bestimmte HTML-Elemente durch Flash-Elemente ersetzt. Sehr cool dabei: Der Text ist auch weiterhin markierbar und lässt sich auch kopieren. Wird Flash vom Browser nicht dargestellt, etwa weil das Plugin nicht installiert ist, rendert der Browser den normalen HTML-Tag. Das klingt doch alles schon mal ganz gut.
    Ein Nachteil in meinen Augen ist aber die Benutzung von Flash. Gerade auf dem Mac ist das Plugin nicht gerade ausgereift und verursacht teilweise eine enorme Prozessorlast. Ein wenig frickelig war bei meinen ersten Versuchen das anschließende justieren von Größe und Abständen des Textes mit CSS. Hier gilt es sich gegebenenfalls mal einzuarbeiten.
  • @font-face: Auch per CSS gibt es eine Möglichkeit, eigene Schriften in eine Webseite einzubinden. Kurioserweise wurde diese Methode übrigens ursprünglich von Microsoft entwickelt, war Bestandteil von CSS 2 und flog dann wieder aus den CSS 2.1-Spezifikationen, weil die Browserentwickler sie nicht implementierten. Mit CSS 3 kommt @font-face nun wieder. Dieses Mal ziehen anscheinend auch alle mit.
    Bei dieser Methode muss die entsprechende Schriftart in verschiedenen Varianten auf dem Webserver bereitstehen. Natürlich hat man sich wieder einmal nicht auf einen 100%igen Standard einigen können. Großer Vorteil: Es werden keine weiteren Technologien verwendet, HTML und CSS setzt man so oder so ein, wie auch schon bei der sIFR-Variante lässt sich hier der Text natürlich auch kopieren.
    Bei ersten Tests hat das Einbinden der Schriftarten leider nicht immer 100%ig funktioniert. Schade.

Das Ersetzen von Schrift durch Bilder (auch dynamisch, z.B. per GDlib) kommt für mich nicht in Frage. Die Lösungen über die ich hier bisher stolperte waren alle wesentlich komplizierter und aufwändiger als die oben genannten, das Ergebnis dafür aber eher nicht so schön.

Soweit zu den beiden Möglichkeiten, die ich mir noch näher anschauen muss. Beide Varianten sehen sehr vielversprechend aus, ich glaube dass ich für meine Zwecke schon was finden werde. Spaß am Basteln hatte ich ja schon immer, in der nächsten Zeit werde ich mich mit dem Thema noch ein wenig ausführlicher auseinandersetzen und die für mich beste Methode herausfinden.

Linkeria (4. Dezember – 17. Dezember)

Diese Links habe ich in den letzten Tagen in meinem del.icio.us-Account gespeichert.

  • Browser Size
    Browser Size legt ein halbtransparentes Bild über eine angegebene Webseite und zeigt an wie viel die Besucher sehen. Die Daten über die verwendeten Fenstergrößen der Benutzer stammen von Google.
  • namebench
    namebench führt Geschwindigkeitsmessungen an DNS-Servern durch. Als Testdatensatz wird unter anderem die eigene Browserhistorie genommen, so kann man den schnellsten DNS für seine Bedürfnisse finden.
  • Secret Maryo Chronicles
    Für Fans von "Super Mario": Ein Open Source-Nachbau der für alle möglichen Plattformen, unter anderem MacOS X, entwickelt wird.
  • Sequel Pro — MySQL database management app for Mac OS X
    Eine native Mac OS X-Applikation zur Verwaltung von MySQL-Datenbanken. Sieht nicht nur gut aus, funktioniert auch super. (Via @marcus/Twitter)
  • Font Squirrel | Download Hundreds of Free @font-face Fonts
    Eine große Sammlung von Schriften die sich per CSS/@font-face in Webseiten nutzen lassen. Merkt man, dass ich aktuell mit den üblichen Webschriftarten eher unzufrieden bin?
    (via @poolie/Twitter)
  • ImageOptim – PNG/JPEG/GIF optimizer for Mac OS X
    ImageOptim entfernt unnötige Informationen (Farbprofile, usw.) aus Bildern, damit diese beim Einsatz im Web schneller laden. Zum Feintuning einer Webseite sicherlich interessant.