• Text als Bild integrieren
• Text als Flash Film integrieren
• Text mit JavaScript umwandeln

1. Text in Corporate Fonts als Bild darstellen

Das Austauschen von Texten durch Bilder war lange Zeit das “optimal” mögliche und eine weit verbreitete Art, Corporate Fonts im Web darzustellen. Schlagwort hierbei ist “Dynamic Image Replacement”. Der Text wurde, um zum Einen die Auffindbarkeit durch Suchmaschinen nicht zu verschlechtern und zum Anderen trotzdem “zugänglich” zu bleiben, per CSS ausserhalb des Block Elements (also z.B. der Headline <h1>) – oder direkt unsichtbar – gesetzt und das Block Element hat eine Hintergrundgrafik versehen bekommen. Die Technik ist auch unter “Fahrner Image Replacement” (oder FIR, siehe Wikipedia) bekannt.

Ein Beispiel wäre folgendes, es muss nur das jeweilige Headline-Element mit einer bestimmten Klasse versehen werden:

<h1 class=”replace_me”>Meine grafische Überschrift</h1>

Das entsprechende CSS sieht dazu in etwa wie folgt aus:

.replace_me {
text-indent: -9999px;
width: 500px;
height: 80px;
background: url('meineheadline.gif') #ffffff no-repeat;
}

Bei Redaktionssystemen wie z.B. Typo3 kann hierbei der GIFBuilder genutzt werden, der – entsprechend konfiguriert – diese Arbeiten automatisiert für den Redakteur übernimmt.

Ein Nachteil dieser Technik sind u.a. die vielen Requests, die an den Server gesendet werden, sowie die vielen einzelnen Bilder die generiert und abgelegt werden müssen. Weiterhin kann der Text nicht kopiert werden und die Darstellung auf mobilen Endgeräten ist evtl. nicht so wie gewünscht. Der schlimmste Nachteil ist jedoch, dass manche Suchmaschinen die CSS Eigenschaft “text-indent” als Hinweis auf Suchmaschinen-Spamming ansehen und hierdurch eventuell Nachteile im Ranking entstehen könnten.

Bei dem “dynamischen Image Replacement” gibt es natürlich eine Vielzahl von verwandten und ähnlichen Techniken (z.B. die Scalable Inline Image Replacement Technik, s. SIIR oder eine Ersetzung durch PHP, hier besonders erwähnenswert: P+C DTR).

Eine etwas andere Art und Weise ist das Austauschen der Texte durch einen Flash Film:

2. Text als Flash Film integrieren

Da Flash seit Jahren die Integration von Schriftarten ermöglicht, bietet sich Flash natürlich auch als Werkzeug an, Corporate Fonts in Webseiten zu integrieren. Hier hat sich die “Scalable Inman Flash Replacement” Technik (Wikipedia Eintrag) als “Tool” bzw. technischer Ansatz etabliert. Grundsätzlich funktioniert diese so, dass die bearbeitbare FLA Datei einmal geöffnet werden muss (Flash wird also benötigt), dort die jeweilige Corporate Font integriert und eingebettet wird und danach, gemeinsam mit einigen CSS und JavaScript Anweisungen, auf dem Webserver und in der Seite hinterlegt wird.

Wie die Technik integriert werden kann findet sich auf der Projekt-Webseite von SIFR oder in unzähligen, bei Google auffindbaren Tutorials.

Nachteil: Bei der Integration von Flash auf Webseiten können sich unter anderem die Ladezeiten verschlechtern. Weiterhin könnten sämtliche Inhalte durch die steigende Popularität von Ad Blockern im schlechtesten Fall nicht angezeigt werden. Außerdem wird natürlich das Flash Plugin und aktiviertes JavaScript benötigt. Manche Blogs berichten hierbei auch von Performance Problemen, die durch das Flash PlugIn hervorgerrufen werden, sowie von Problemen, dass sich das Flash Kontextmenü und nicht das “reguläre” Browser-Kontextmenü öffnet, was ich aber kaum als Problem ansehen würde.

3. Text mit JavaScript umwandeln

Ebenfalls äußerst im Trend liegt das Ersetzen von Überschriften und ganzen Textblöcken durch JavaScript. Auf unserer Unternehmenswebseite (Online-Agentur Bielefeld) wie auch in diesem Blog nutzen wir hierfür Cufón (in diesem Blog übrigens mithilfe des Cufón WordPress Plugins von Tobias Battenberg). Natürlich gibt es aber auch noch andere Möglichkeiten.

Die Beschreibung der Features auf der Cufón Webseite liest sich wie folgt:

1. No plug-ins required – it can only use features natively supported by the client
2. Compatibility – it has to work on every major browser on the market
3. Ease of use – no or near-zero configuration needed for standard use cases
4. Speed – it has to be fast, even for sufficiently large amounts of text

Nachteil von Cufón ist die Notwendigkeit von aktiviertem JavaScript, da die Font Dateien als JavaScript Vektor-Beschreibungen vorliegen. Diesen Nachteil teilen sich allerdings fast alle anderen Möglichkeiten ebenfalls. Ein Generator für solche Font Dateien wird auf der Cufón Webseite zur Verfügung gestellt – inklusive “rights management”, auf welchen Domains die Fonts integriert sein dürfen.

Ganz neu im Boot der Text / Font-Replacement JavaScript Techniken findet sich auch der Dienstleister TypeKit.

Typekit stellt eine Vielzahl von Fonts als “Software as a service” zur Verfügung, der – in Verbindung mit einem kleinen JavaScript – die verschiedene Schriftarten in eigenen Web-Projekten (kostenpflichtig) nutzbar macht. Mehr zu TypeKit unter anderem bei SitePoint, Techcrunch oder ReadWriteWeb sowie dem TypeKit Blog.

Bei TypeKit gilt es allerdings im Hinterkopf zu behalten, dass viele der modernen Browser es bereits ermöglichen, eigene Fonts per @font-face im CSS zu integrieren und dann in der font-family CSS Anweisung nutzbar machen (bei SELFHTML wird allerdings fälschlicherweise davon gesprochen, dass Mozilla und WebKit Browser dies nicht verstehen würden). Hierbei werden allerdings in “corporate” Projekten evtl. für die Schriftart vorhandene Lizenzbedingungen nicht eingehalten (die Fonts wären ggfls. downloadbar), was bei TypeKit durch deren integriertes Digital Rights Management gegebenenfalls möglich wäre.

Ein Beispiel für eine solche Integration von Schriftarten wären die folgenden CSS Anweisungen (gefunden bei Tobias Otte):

Zuerst müssen wir die Font Familie mithilfe von @font-face deklarieren:

@font-face {
font-family: Delicious;
src: url('fonts/delicious/Delicious-Roman.otf') format("opentype");
}

Danach kann sie wie gewohnt als CSS Attributwert für die font-family genutzt werden:

font-family: Delicious, Arial, sans-serif;


Für Corporate Projekte ist die Integration der Schrift mittels “font-face” in meinen Augen aber häufig auch nicht einsetzbar, da viele der Unternehmen noch ältere Browser unterstützen müssen / wollen – dazu kommt die Problematik mit Lizenzbedingungen der Hausschrift, die eine Nutzung in dieser Art und Weise oftmals nicht erlauben.

Eine Übersicht über aktuelle Techniken findet sich unter anderem bei Dr. Web oder dem Smashing Magazine.

Einen fast aktuellen Status zur Unterstützung einzelner Möglichkeiten durch verschiedene Browser findet sich bei Tobias Otte.

Neben den Projekten, die wir bei der Rheingans Company GmbH durchführen, habe ich als “Privatbeschäftigung” einen kleinen Ausflug in die Welt der iPhone-Softwarentwicklung gewagt. Das Ergebnis ist die seit Mitte vergangener Woche im App Store erhältliche Applikation Smart Alarm.

Smart Alarm ist eine Wecker-Applikation für das iPhone und den iPod touch, welche von den Möglichkeiten, die diese Geräte zur Verfügung stellen, auf innovative Weise Verwendung nimmt.

In diesem Artikel möchte ich Ihnen einen kurzen Eindruck darüber verschaffen, welche Hürden bei der Entwicklung einer iPhone-App am Beispiel von Smart Alarm überwunden werden müssen und wo die Vorteile bei der Entwicklung für diese Plattform liegen — er soll einen kleinen, aber feinen Erfahrungsbericht darstellen.

Dazu vorab einige Informationen zur Funktionsweise der Applikation:

Ein paar Worte zu Smart Alarm

Smart Alarm ist — das habe ich bereits verraten — eine Wecker-Applikation für das iPhone OS und nutzt den Beschleunigungssensor (Accelerometer) um die Schlafphase des Benutzers zu ermitteln und den Weckvorgang erst auszulösen, wenn sich der Benutzer in einer “leichten Schlafphase” befindet, also bereits dabei ist, aufzuwachen.

Der Ablauf ist dabei folgender: Der Benutzer stellt den gewünschten Weckzeitpunkt und einen Zeitrahmen, in dem er in jedem Fall geweckt werden möchte, ein. Anschließend legt er das iPhone auf das Bett und wartet, bis er geweckt wird.

Sobald der eingestellte Zeitrahmen begonnen wird, “fragt” Smart Alarm den Beschleunigungssensor mehrmals in der Sekunde, in welcher Lage sich das iPhone befindet. Dabei muss erwähnt werden, dass der Beschleunigungssensor die Position in Form von Werten auf einer X-, Y- und Z-Achse übermittelt. Im Idealfall betragen diese Werte jeweils 0, sodass über diesen API-Aufruf ermittelt werden kann, wie groß die Abweichungen von diesen Standardwerten sind.

Da in den unterschiedlichen Schlafphasen unterschiedlich starke Bewegungen des Benutzers stattfinden und sich diese auf das iPhone übertragen, kann Smart Alarm so die aktuelle Schlafphase des Benutzers bestimmen.

Erkennt Smart Alarm eine tiefe Schlafphase, so wird der Weckzeitpunkt um einige Minuten nach hinten verlegt, ansonsten erfolgt er unmittelbar.

Erleichterungen und Hürden

Mit der Erwähnung des Beschleunigungssensors müssen an dieser Stelle einmal direkt lobende Worte für die Einfachheit, wie man die Werte des Sensors auslesen kann, ausgesprochen werden: Dazu ist nur ein kurzer API-Aufruf notwendig, welcher die besagten Werte zurückgibt und eine anschließende Verarbeitung ermöglicht.

Überhaupt stellt Apple mit zahlreichen einfach zu verwendenden APIs eine gute Möglichkeit zur schnellen Entwicklung von iPhone-Applikationen zur Verfügung. So können schnell die Hardware-Features des iPhone und iPod touch verwendet werden, ohne sich mit deren technischer Seite großartig beschäftigt zu haben.

Schnell konnte so im Fall von Smart Alarm der Annäherungssensor (Proximity Sensor) verwendet werden, welcher das Display des Gerätes dunkel schaltet und so für Energieeinsparungen sorgt.

Doch auch zum Thema Verwendung von Apple-APIs gibt es Negativbeispiele:

Die CFNetwork-API (Dokumentation und weitere Erklärungen), welche die Kommunikation mit Webservern ermöglicht, ist ein solches. Hier wird einiges an Wissen abverlangt und einige Stunden Recherche in den (übrigens vorbildlichen) Dokumentationen von Apple vorausgesetzt. Das ist allerdings ein Problem, welches nicht nur Objective-C, der Programmiersprache des iPhone, betrifft, sondern auch bei anderen Sprachen vorhanden ist. Dort hilft man sich dann oftmals mit Frameworks weiter, welche einen einiges an Programmierarbeit ersparen bzw. stark vereinfachen. Bei Objective-C kann man diese elegante Abkürzung natürlich auch nehmen — für den konkreten Fall leistet der, wie er vom Entwickler selbt genannt wird, “Wrapper” ASIHTTPRequest gute Dienste.

Am ungewohntesten ist zu Beginn jedoch die Syntax der verwendeten Programmiersprache Objective-C und der Aufbau und Funktionsumfang der Entwicklungsumgebung Xcode. Mit der Zeit lernt man jedoch auch deren Vorteile zu schätzen und wie die Nachteile kompensiert werden können.

So bleibt abschließend zu sagen, dass die Entwicklung für die iPhone-Plattform eine spannende Herausforderung ist, der man sich gerne annimmt und die beeindruckend schnell Ergebnisse ermöglicht.

Smart Alarm ist im App Store erhältlich und setzt ein iPhone oder iPod touch mit iPhone OS 3.0 oder höher vorraus.

Generell gibt es auf der Webseite bereits viele Informationen zum generellen Aufbau eines interaktiven Projekts. Benötigt wird zum Einen die Hardware zum Erfassen von Bewegung (= eine Kamera, entweder mit Infrarot oder ohne, je nach Lichtverhältnissen) und zum Anderen ein herkömmlicher Computer.

Da wir die Software so konzipiert haben, dass auch Bewegung im 3D Raum erfasst werden kann, basiert das System auf einer Client- / Server-Architektur. So können beliebig viele Kameras beliebig viele Bildauschnitte (bzw. Dimensionen) erfassen, und alle Daten an einen Server senden (im Grunde reicht ein Rechner für beide Anwendungen, Server und Client, aus).

Der einzelne Client erlaubt über Drag and Drop das Positionieren und Vergrößern einzelner “sensibler” Bereiche. Per Doppelklick können auch beliebig viele weitere Felder erzeugt werden. So kann auch eine “analoge” Steuerung umgesetzt werden, die je nach Intensität der Bewegung anders auf die Userinteraktion reagiert.

Für Demonstrationszwecke haben wir für den Server eine Variante des Arcade Klassikers “Space Invaders” als auch eine Software für Diashows entwickelt (je nach Bewegung des Users vor der Kamera erscheint das nächste Bild an den betreffenden Stellen), generell kann ProMotion aber – durch die frei zu definierenden Tastaturcodes – auch jede andere Software auf dem System steuern (wie zum Beispiel unser Spiel für den Informationspavillon der U4 der Hochbahn Hamburg am Jungfernstieg).

Die Software läuft sowohl auf Mac-, als auch auf Windows- und Linux-basierenden Systemen.

Als Kamera eignen sich marktübliche Webcams (im ersten Screenshot liefert die integrierte iSight eines Macbook Pro das Bild), für den robusten Ausseneinsatz (z.B. im Store, an einem Schaufenster, auf der Messe / dem Messestand) eignen sich natürlich dementsprechend robustere Modelle, auch mit Infrarot, um unabhängig von Lichtverhältnissen eine saubere Abtastung zu ermöglichen.

Use Cases für einen Einsatz von Bewegungserfassung sind also unter Anderem die interaktive Präsentation einer aktuellen Kollektion, Spielspaß für Kunden und somit Möglichkeiten für verbesserte Kundenbindung, edutainment / infotainment Systeme in Museen und Messen oder auf Events.

Dazu stellt Meyer Menü moderne 19″-Touchdisplays mit RFID-Chip-Anmeldung bei ausgewählten Kunden auf.

Die dort genutzte Software basiert auf dem Flex Framework, unsere Aufgabe war neben der GUI Entwicklung auch die Entwicklung der Schnittstellen zur Warenwirtschaft sowie die Anbindung der Komponenten zum Login per RFID bzw. zur Ausgabe der Essen.

Genutzt wurden hierbei unter anderem MySQL, FLash / Flex, Zinc und .NET (für die Ansteuerung der RFID Lesegeräte).

Mit der iPhone Anwendung lässt sich radio.de ganz einfach auf dem iPhone oder einem iPod Touch installieren. Für einen Empfang von mehr als 3.000 spannenden Radiosendern, Podcasts und Webradios. Jederzeit und überall.

Weiterhin arbeiten Experten der Rheingans Company an vielen Bereichen des radio.de Frontends und optimieren Seitenaufbau, Templates, Ladezeiten und AJAX Funktionen der auf JSP aufbauenden Radio-Portallösung.

Weitere Informationen unter → http://www.radio.de/iphone/ oder direkt auf radio.de