Internet Magazin Scharfe Bilder (Vorschau)

2/13 

KNOWHOW FÜR W EB-PROFIS 

€ 4,50 

Österreich € 5,10 

BeNeLux € 5,10 

Italien € 6,00 

Spanien € 6,00 

Schweiz sfr 9,00 

Griechenland € 7,00 

www.internet-magazin.de 

WEBDESIGN 

Responsive Typo 

Die optimalen Strategien für 

flüssige Texteffekte 

Grafiken mit Pep 

So visualisieren Sie Ihre Daten 

ansprechend 

Interface- 

Trends 

Das richtige Konzept 

für Desktop, Mobile und TV 

WEBBUSINESS 

Ab in die Cloud! 

Zeit- und ortsungebundener 

Zugriff auf Ihre Daten 

Dedizierte 

Linux-Rootserver 

Die besten Angebote unter 100 Euro 

MySQL 5.6 

Warum Sie jetzt 

umsteigen sollten 

Scharfe 

Bilder 

So optimieren 

Sie Websites für 

HiDPI-Displays 

Schutz für Ihren Server 

So sichern Sie Ihre PHP-Anwendungen 

stets zuverlässig ab

Hetzner Online unterstützt mit der 

Verwendung von 100% regenerativem 

Strom aktiv den Umweltschutz. 

Entscheiden Sie sich gemeinsam 

mit uns für eine saubere Zukunft.

EDITORIAL 

VERLOST 

Tolle Preise gewinnen! 

Kostenloskultur 

Facebook ist kostenlos. Auf den ersten Blick mag das stimmen, doch 

bei genauerem Hinsehen bezahlen wir doch für den Social-Media- 

Dienst. Wie auch für viele andere soziale Netzwerke, wie einmal 

mehr klar wird: Denn in den letzten Tagen ist wieder ein Aufschrei 

durch die Social-Media-Welt gegangen, als der Facebook-eigene 

Fotosharing-Dienst Istagram bekanntgab, seine Nutzungsbedingungen 

im Januar ändern zu wollen und damit verstärkt die Möglichkeit 

einräumt, mit den Fotos der Nutzer Werbung zu betreiben. 

Schnell war bei einigen empörten Facebook-Usern zu lesen, dass 

sie Ihre Konten bei Instagram löschen, dass der Dienst die Userfotos 

verkaufe und die Benutzer nichts dafür bekämen. Aber mal ganz 

ehrlich – die Facebooks Sponsored Stories arbeiten nach dem gleichen 

Prinzip, auch hier war die Hysterie bei der Einführung groß, 

inzwischen kräht kein Hahn mehr danach. 

Um noch mal auf die eingangs erwähnte, vermeintlich kostenlose 

Nutzung der Dienste zu kommen: Wir alle zahlen dafür einen Preis. 

Zwar nicht in Geld, sondern ganz immateriell mit Empfehlungen, 

Aufmerksamkeit, mit Freundeswerbung und – der wahrscheinlich 

härtesten Währung – mit unseren Daten. Daher sollten wir ganz 

genau überlegen, was wir in den sozialen Netzwerken preisgeben 

und inwieweit wir diese zu deren Konditionen nutzen möchten. 

Viel Spaß beim Lesen dieser Ausgabe wünscht 

Daniela Schrank 

Chefredakteurin 

dschrank@wekanet.de 

Der neue Linksys Smart WiFi Router EA6500 

(www.cisco.de, 219 Euro) ist mit dem neuen 

Funkstandard IEEE 802.11ac für die drahtlose 

Kommunikation der nächsten 

Generation 

ausgestattet 

und bietet digkeiten von bis zu 

450+1300 Mbps bei der 

Übertragung von Daten. Zudem 

verbessert die AC-Technologie die Reichweite 

sowie die Zuverlässigkeit des Netzwerkes 

Geschwinund 

optimiert den Stromverbrauch bei angeschlossenen 

mobilen Geräten. Die hohe Leistung 

des Routers, kombiniert mit der neuen Linksys- 

Smart-Wi-Fi-Plattform, erlaubt es Anwendern, 

ihr Heimnetzwerk und ihre netzwerkfähigen Geräte 

mit Hilfe der Smart-Wi-Fi-Tools und -Apps 

zu steuern. Wir verlosen einen Router. 

Das Handbuch „Suchmaschinen-Optimierung” 

(Galileo Computing, ISBN 978-3-8362-1898-6, 

39,90 Euro) von Sebastian Erlhofer gilt in Fach- 

kreisen als das deutschsprachige 

Standardwerk. Es bietet Einsteigern 

und Fortgeschrittenen fundierte 

Informationen zu allen wichtigen 

Bereichen der Suchmaschinen-Optimierung. 

Tauchen Sie ein in die Welt 

des Online-Marketings. Verständlich 

werden alle relevanten Begriffe und 

Konzepte ausführlich erklärt und 

erläutert. Neben ausführlichen Details zur Planung 

und Erfolgsmessung einer strategischen 

Suchmaschinen-Optimierung reicht das Spektrum 

von der Keyword-Recherche, der wichtigen 

Onpage-Optimierung Ihrer Website über erfolgreiche 

Methoden des Linkbuildings bis hin zu 

Ranktracking, Monitoring und Controlling. Fünf 

Exemplare gibt es zu gewinnen. Machen Sie mit 

bei unserer Verlosung und gewinnen Sie unter 

www.internet-magazin.de/verlosung 

www.internet-magazin.de 3

SERVICE | Inhalt 

2/13 

Geschärfter Blick 

Immer mehr Mobilgeräte weisen eine mehrfach höhere Auflösungsdichte 

auf als die 96 dpi eines typischen Desktops. Nicht optimierte 

Websites sehen auf diesen HiDPI-Displays unscharf aus. Wir zeigen Ihnen, 

wie Sie mit den richtigen Tools und Workarounds die volle Schärfe 

eines HiDPI-Displays in Ihren Websites zum Vorschein bringen. 

S. 14 

Flüssige Texte 

Bei einem Responsive Layout geht es 

nicht nur darum, die großen Bereiche 

einer Website anzuordnen. Auch bei 

der Typografie kommt es auf die richtige 

Strategie an, damit die Inhalte 

bei verschiedenen Bildschirmgrößen 

optimal lesbar sind. 

S. 22 

AKTUE LLE S 

News & Trends . . . . . . . . . . . . . . 6 

Trackback . . . . . . . . . . . . . . . . 12 

Spannende, interessante und witzige Fundstücke 

aus dem Web 

SPECIAL 

Geschärfter Blick . . . . . . . . . . . 14 

Webdesign für HiDPI-Displays 

W E BDE S I GN 

Flüssige Texte . . . . . . . . . . . . . 22 

Responsive Typographie 

Grafik mit Pep . . . . . . . . . . . . . 28 

Datenvisualisierung 

Design for Touch . . . . . . . . . . . . 32 

Interface-Trends 

WEB E NTWICKLUNG 

Server-Schutz . . . . . . . . . . . . . . 36 

PHP absichern 

Platzhirsch . . . . . . . . . . . . . . . . 42 

MySQL 5.6 und NoSQL 

Klares HTML . . . . . . . . . . . . . . . 48 

HAML – HTML Abstraction Markup Language 

WEBBUSI N E SS 

Dialog auf Augenhöhe . . . . . . . . 52 

Social Media im Unternehmen 

Provider-Porträt . . . . . . . . . . . . 56 

Webtropia 

Dedizierte Linux-Rootserver . . . 58 

Große Anbieterübersicht 

Workshop Owncloud . . . . . . . . . 66 

Jedem seine eigene Cloud 

4 0213 internet magazin

Inhalt | SERVICE 

Grafik mit Pep 

Excel war gestern. Mithilfe zahlreicher 

Online-Services verwandelt 

man trockene Geschäftszahlen 

in spannende Grafiken, die sich 

wunderbar auch über die sozialen 

Netzwerke verteilen lassen. Auch 

die nächste Präsentation lässt sich 

damit hervorragend aufpeppen. 

S. 28 

Klares HTML 

HAML hat die Vereinfachung der 

Entwicklung von Webanwendungen 

zum Ziel. Der Fokus der 

Markup-Sprache liegt dabei in der 

übersichtlichen Abbildung von 

Dokumentstrukturen. Im Workshop 

erfahren Sie mehr über HAML auch 

in Verbindung zu Ruby. 

S. 48 

Server-Schutz 

Mit PHP lassen sich tolle Anwendungen 

programmieren. Leider 

gerät die Programmiersprache aber 

auch immer wieder wegen Sicherheitslücken 

in die Schlagzeilen. 

Nachlässigkeiten in der Entwicklung 

eröffnen Angreifern Tür und Tor. 

Sichern Sie Ihre Anwendung ab! 

S. 36 

T I PPS & TRICKS 

Online-Recht. ...........70 

• Grenzenlos verkaufen 

CSS. ..................72 

• Umschalten zur mobilen Version 

• Verbesserte Navigation mittels Anker 

• Gruppierte Selektoren 

• Elegante Animationseffekte 

• Externe Verknüpfungen 

IE 10 .................73 

• Unterstützung für Touch-Gesten 

• Anzahl unterstützter Touch-Punkte 

• Adobe Flash freischalten 

• Starten des IE 10 erzwingen 

• Websites testen 

AWS ..................73 

• Windows Powershell 

Google Chrome ..........75 

• App-Modus unter Windows 

• Testen von @media-Abfragen 

• Cookies im Browser bearbeiten 

Webschriften. ...........75 

• Feinschliff verleihen 

Apache ................76 

• Browser-Caching ausreizen 

HTML5 ................76 

• Benutzerfreundliche Webformulare 

Wordpress. .............77 

• Unerwünschte Links eliminieren 

MySQL 5.6 .............78 

• Leistung messen 

Platzhirsch 

Mit der Version 5.6 der quelloffenen 

Datenbank MySQL 

liefert der Anbieter maximale 

Abwärtskompatibilität mit 

punktuellen Verbesserungen 

an all den kritischen Stellen. 

S. 42 

S ERVICE 

Editorial . . . . . . . . . . . . . . . . . 3 

Branchenverzeichnis . . . . . . . 79 

Impressum . . . . . . . . . . . . . . 82 

Vorschau . . . . . . . . . . . . . . . . 82 


AKTUELLES | News 

Deutsche Telekom 

Vectoring statt Glasfaser? 

Schnellere Internetverbindungen 

verspricht die Deutsche Telekom 

mit einem neuen Verfahren namens 

Vectoring. Dabei werden 

vorhandene Kupferleitungen für 

höhere Durchsatzraten umgerüstet 

und könnten anstelle von Glasfaser 

für die Hausanschlüsse verwendet 

werden. Die Technologie soll nach 

dem Willen der Telekom in den 

kommenden vier Jahren schon 24 

Millionen deutsche Haushalte mit 

Highspeed-Internet bis 100 MBit/s 

versorgen. Die Telekom will dafür 

sogar mehrere Milliarden Euro zusätzlich 

in den Breitbandausbau 

pumpen. Im Gegenzug soll die 

Bundesnetzagentur allerdings ihre 

Regulierungsauflagen lockern, fordert 

die Telekom. Die Mitbewerber 

gehen schon auf die Barrikaden. 

Sie fürchten, dass dies zu einer 

erneuten Monopolstellung der Telekom 

führt. Der Konzern möchte 

sich nämlich auch das Recht vorbehalten, 

zu entscheiden, welche 

Konkurrenten eigene Dienste über 

die neuen schnellen Festnetzanschlüsse 

anbieten dürfen. 

www.telekom.de 

Neues Design 

Microsoft Socl 

Mit einem frischen 

Anstrich geht das soziale 

Netzwerk Socl 

(sprich: „Social“) 

von Microsoft endlich 

für alle live. Die 

ursprünglich nur für 

Studenten verfügbare 

Community hat sich 

vor dem öffentlichen 

Beta-Launch noch 

ein Redesign gegönnt. Die neue Optik orientiert 

sich noch stärker an Pinterest. User 

teilen bei Socl ihre Fotos und Videos mit 

kurzen Beschreibungen. Die Beiträge sind 

thematisch einsortiert, sodass man über 

die Kategorien zum Beispiel nach Filmen, 

Musik, Gadgets, Humor oder Katzen stöbern 

kann. Die Nutzer dürfen die Beiträge 

anderer Anwender kommentieren und auf 

Facebook und Twitter posten. 

Die Microsoft Fuse Labs entwickeln das 

experimentelle Projekt als eine ergänzende 

Community zu Facebook und Co. 

User können sich sofort mit ihrem Facebook- 

oder Windows-Live-Account bei 

Socl anmelden. 

www.so.cl 

Alfahosting 

Drei neue Webshop-Tarife 

Online-Händler wählen bei Alfahosting aus drei neuen 

E-Shop-Paketen aus. Der Webhoster stellt darin jeweils 

vier vorkonfigurierte Shopsysteme bereit, die sich uneingeschränkt 

nutzen lassen. Verkäufer entscheiden sich entweder 

für OS-Commerce, XT-Commerce, XTC-Modified 

oder Oxid eSales Community Edition. Die Webshops 

sind mit dem 

hauseigenen 

Sicherheitssystem 

Alfadog 

gegen Hackerangriffe 

geschützt. 

Die drei Tarife 

unterscheiden 

sich durch 

die Ausstattung 

des darunterliegenden Webhosting-Pakets, zum 

Beispiel bei der Größe des Speicherplatzes, der Anzahl 

der Domains und E-Mail-Postfächer. Kunden haben die 

Möglichkeit, weitere Webanwendungen zu installieren, 

denn PHP und MySQL-Datenbanken gehören zum Funktionsumfang. 

Den eShop M mit 5 GByte Speicher, einer 

.de-Domain, 20 Postfächern und 5 MySQL-Datenbanken 

buchen Händler ab 4,99 Euro im Monat bei 24 Monaten 

Laufzeit. Eine Einrichtungsgebühr und Traffic-Kosten fallen 

nicht an. 

alfahosting.de 


News | AKTUELLES 

Neue Code-Basis 

Typo3 CMS 6.0 veröffentlicht 

Die Typo3-Entwickler 

machen 

große Sprünge. 

Das CMS überspringt 

dabei 

gleich eine Versionsnummer. 

Typo3 steht jetzt 

in Version 6.0 

zur Verfügung. 

Die Entwickler 

möchten dadurch Verwechslungen 

mit dem parallel in Entwicklung befindlichen 

Typo3 Neos vermeiden, 

das auch den Arbeitstitel Typo3 5.0 

trug. Der Code von Typo3 CMS 6.0 

wurde zum Teil neu geschrieben oder 

erheblich überarbeitet, mit dem Ziel, 

die Codequalität zu erhöhen, die Software 

robuster zu gestalten und den 

Code aufzuräumen. Die Entwickler 

möchten das Content-Management- 

System aber auch zukunftssicher machen: 

Typo3 setzt jetzt auf die in PHP 

5.3 eingeführten Namespaces, um 

Core-Klassen mit einer effizienteren 

Die Internet Engineering Task Force 

(IETF) hat den ersten Entwurf des 

neuen Internetprotokolls HTTP 2.0 

vorgelegt. Die Arbeitsgruppe 

HTTPbis folgt dabei einem 

Vorschlag von Google: Der 

aktuelle Protokollentwurf 

entspricht dem von Google 

entwickelten SPDY, das als potenzieller 

Nachfolger des schon etwas 

in die Jahre gekommenen HTTP 

1.1 von 1999 konzipiert ist. SPDY 

verspricht geringe Latenzzeiten und 

Struktur zu versehen. Die Software ist 

dank File Abstraction Layer (FAL) in 

der Lage, Cloud-Speicher wie Amazon 

S3 oder Dropbox zu nutzen. Außerdem 

vermeiden Dateireferenzen, 

dass mehrfach verwendete Dateien 

wiederholt kopiert werden müssen. 

Den Extension Manager haben die 

Entwickler gleich von Grund auf neu 

auf Basis von Extbase geschrieben. 

Das Tool verspricht eine einfachere 

Verwaltung und die Installation von 

Erweiterungen mit einem einzigen 

Klick. 

typo3.org 

HTTP 2.0 Draft 

Effizienteres Internetprotokoll 

reduziert die Anzahl der nötigen 

Verbindungen. Die übertragenen 

Daten lassen sich komprimieren. 

Auch ein Server-Push ist möglich. 

Die aktuelle Version von SPDY wird 

bereits von Chrome ab Version 11, 

Firefox ab Version 13, Opera ab 

Version 12.1 und einigen mobilen 

Browsern unterstützt. Die HTTPbis 

will nun auf Basis des ersten Entwurfs 

weitere Funktionen für HTTP 

2.0 erarbeiten. 

www.ietf.org 

• • • TICKER • • • 

■ Bing baut Kartenmaterial aus 

Microsoft hat das Kartenmaterial 

seiner Suchmaschine aufgestockt 

und die Qualität der 

Bilder verbessert. Die Bing 

Maps zeigen nun Luftaufnahmen 

von weiteren Regionen 

der Welt an. Insgesamt sind 

15 Millionen Quadratmeter 

erfasst. Für 800.000 Quadratkilometer 

steht hochwertigeres 

Global-Ortho-Bildmaterial 

zur Verfügung. Die Fotos werden 

von Flugzeugen aus aufgenommen 

und erreichen so 

eine höhere Detailgenauigkeit. 

Microsoft hat inzwischen 

83 Prozent der Maps-Bilder 

von Westeuropa auf Global- 

Ortho-Material umgestellt. 

www.bing.com/maps 

■ Schnellere Datentarife 

1&1 wertet seine Notebook- 

Flat auf. Neu- und Bestandskunden 

profitieren jetzt von 

höherer Bandbreite im mobilen 

Datennetz. Statt mit bisher 

7,2 MBit/s surfen Kunden mit 

dem XL-Paket für 19,99 Euro 

jetzt mit bis zu 14,4 MBit/s 

Geschwindigkeit. Wer die 

XXL-Variante für 29,99 Euro im 

Monat nutzt, kann sich über 

21,6 MBit/s statt vormals 14,4 

MBit/s freuen. Nach wie vor 

gelten die Limits von 5 beziehungsweise 

10 GByte Datenvolumen 

pro Monat. Für 

Kunden, die darüber hinaus 

kommen, sinkt die Geschwindigkeit 

auf 64 kBit/s. 

mobile.1und1.de/notebookflat 



RAD-Entwicklung 

XDEV 3.2 runderneuert 

Die Java-Entwicklungsumgebung 

XDEV ist in Version 

3.2 für Windows, Mac und 

Linux erschienen. Die Software 

für das Rapid Application 

Development (RAD) 

baut auf einen neu entwickelten 

GUI-Builder. Mit 

dieser Überarbeitung unterstützt 

XDEV nun vollständig 

den Java-Bean-Standard. 

Die IDE bietet auch einen 

Assistenten zur Internationalisierung von Webanwendungen. 

Mit Findbug lässt sich der Code automatisiert 

auf Fehler abklopfen. XDEV 3.2 integriert sich jetzt 

auch mit Ingres-Datenbanken und führt eine Beta-Unterstützung 

für Firebird ein. Die Entwicklungsumgebung 

basiert auf dem XDEV-Open-Source-Framework 

und ist lizenzkostenfrei nutzbar. 

www.xdev-software.de 

Knowledge Graph 

Wissenswertes bei Google 

Mit dem Knowledge Graph möchte Google seinen Nutzern 

einen besseren Überblick auf seinen Suchergebnisseiten 

bieten. Die Suchmaschine zeigt mit der neuen 

Funktion zu bestimmten Themen 

nicht nur Treffer im Web 

an, sondern stellt selbst interessante 

Fakten zusammen. 

Gibt man beispielsweise als 

Suchbegriff eine bekannte 

Person, einen Ort oder ein 

Wahrzeichen ein, erscheint 

am rechten Seitenrand eine 

Übersicht mit den wichtigsten 

Informationen und 

Fotos. Ist ein Begriff mehrdeutig, 

kann der User seine Anfrage mit einem Klick 

eingrenzen. Mit der gebotenen Auswahl an verlinkten 

Informationen und ähnlichen Suchbegriffen möchte 

Google zum Stöbern und Lernen einladen. 

www.google.de 

Facebook-Integration 

Firefox wird sozialer 

Facebook und Mozilla haben ihr 

erstes gemeinsames Add-on für 

den Firefox-Browser entwickelt. 

Mit dem Facebook Messenger für 

Firefox signalisiert 

der Webbrowser 

über 

Icons in der Navigations-Symbolleiste, 

wenn 

neue Nachrichten 

eintreffen 

oder ein Freund 

ein Status-Update oder einen Kommentar 

gepostet hat. Die Erweiterung 

klinkt auf Wunsch auch die 

komplette Facebook-Chatleiste in 

Firefox ein und zeigt, wer gerade 

online ist. Das klappt natürlich, 

ohne dass dabei die Facebook- 

Seite ständig geöffnet sein muss. 

Es genügt, das Add-on einmal zu 

aktivieren. Der 

Anwender kann 

im Web surfen 

und bleibt über 

alle Aktivitäten in 

Facebook auf dem 

Laufenden. Für das 

Add-on kommt die 

neue Social-API zum 

Einsatz, die in Firefox 

17 vorgestellt wurde. Demnächst 

möchte Mozilla übrigens weitere 

soziale Netzwerke über die Schnittstelle 

integrieren. 

www.facebook.com/about/ 

messenger-for-firefox 

MariaDB# 

Konnektoren für 

MySQL 

Der Hersteller SkySQL hat zusammen 

mit Monty Program zwei MySQL- 

Konnektoren für MariaDB ausgeheckt. 

Die MariaDB 

Client Library 

for C und MariaDB 

Client 

Library for Java 

sind jetzt Teil des MariaDB-Projekts. 

Entwickler können damit in ihren Anwendungen 

in C oder Java gleichzeitig 

MySQL und MariaDB nutzen. 

Mit Hilfe der Konnektoren kommunizieren 

Anwendungen und Datenbanken 

einwandfrei miteinander. 

mariadb.org 

www.skysql.com/mariadb/connectors 


News | AKTUELLES 

Baukastenprinzip 

Designwerkzeug 

Bei Alfahosting gestalten Kunden ihre Webseiten jetzt auf Wunsch mit 

einem Homepage-Baukasten. Dafür hat der Webhoster die Homepage- 

Tarife entwickelt, die sich an Privatpersonen, Vereine und kleine Unternehmen 

richten. Darin ist ein Designwerkzeug enthalten, das keine Server- 

und Programmierkenntnisse 

für den Bau einer Website voraussetzt. 

Viele Designvorlagen 

für verschiedene Anlässe und 

Branchen sind schon enthalten. 

Die Homepage-Tarife starten bei 

3,99 Euro im Monat. 

alfahosting.de 

Europäische Union 

Hacker-Angriffe 

Die Europäische Union möchte mehr 

Transparenz bei Sicherheitsvorfällen 

und Datenschutzverstößen erreichen. 

Deshalb ist ein Gesetz im Gespräch, das eine Meldepflicht 

für Hacker-Attacken vorsieht. Rechenzentren, 

die mangelnde Sicherheitsvorkehrungen treffen, sollen 

weitere Konsequenzen drohen. Mit einem solchen Reglement 

soll die Cybersicherheit in Europa verbessert 

und das Vertrauen von Unternehmen und Bürgern insbesondere 

in neue Technologien wie Cloud Computing 

gestärkt werden. 

europa.eu 

E-Mail-Marketing 

Urteil zu Double-Opt-in 

Ein Urteil des Oberlandesgerichts München (AZ 29 U 

1682/12) stellt scheinbar das heute gängige Double-Optin-Verfahren 

für die Bestellung eines E-Mail-Newsletters 

infrage. Die Richter haben die E-Mail einer Steuerberatungsfirma 

an ein Unternehmen für rechtswidrig befunden: 

Die Steuerberater wollten sich damit die Bestellung 

eines Newsletters bestätigen lassen. Der Anwender gab 

seine E-Mail-Adresse an und musste nochmals bestätigen, 

dass er den Newsletter bestellen möchte. Die Richter 

urteilen, dass die erste E-Mail unverlangt gesendete 

Werbung darstellt. Das E-Mail-Marketing 

und das Double-opt-in-Verfahren stehen aber nicht 

vor dem Aus: Im konkreten Fall hatte der Versender 

die Auflagen zur Protokollierung der Einwilligung 

nicht erfüllt und konnte die Rechtmäßigkeit seiner 

E-Mail nicht belegen. Werbetreibende sollten stets einen 

Nachweis der Anmeldung archivieren. 

www.justiz.bayern.de/gericht/olg/m/ 

Drupal 8 

Entwicklung verzögert sich 

Der Zeitplan für die Veröffentlichung von 

Drupal 8 hat sich geändert. Nach einem 

Feature Freeze zum 1. Dezember sollte nach 

der Vervollständigung aller Funktionen und 

Fehlerbehebungen eigentlich im Frühjahr 

ein Release Candidate folgen. Jetzt haben 

sich die Entwickler jedoch entschlossen, die 

Entwicklungsphase um drei Monate zu verlängern. 

Den Code Freeze, dem nur noch 

Bereinigungen und Optimierungen folgen 

dürfen, setzen die Entwickler nun für den 1. 

Juli an. Einen konkreten Veröffentlichungstermin 

verkneift man sich: Drupal 8 erscheint, 

wenn die Software keine kritischen Probleme 

mehr aufweist.Drupal 8 wird mit einem überholten 

Anwendungskern ausgestattet, der auf 

dem Symfony-Framework aufsetzt. Neu sind 

auch das Konfigurationsmanagement und 

das Twig-basierte Template-System. Schicke 

HTML5-Formular-Elemente und eine Administrator-Leiste, 

die auch auf mobilen Geräten 

funktioniert, kommen hinzu. Das CMS 

erhält eine eingebaute Unterstützung für 

mehrsprachige Webanwendungen und ein 

neues Views-Modul. 

drupal.org 



Cloud-Dienst 

Geldgeber für Owncloud 

UDMedia 

Special Edition für Reseller 

UDMedia überarbeitet seine Tarife für Wiederverkäufer. In 

der Special Edition nutzen Reseller jetzt drei Hosting-Tarife 

mit 25 bis 100 GByte Speicher. Im XXL-Paket verwalten 

sie bis zu 100 eigenständige Kunden-Accounts. Die 

Laufzeit hat der Webhoster auf einen Monat verkürzt. 

Mit einem Reseller-Tarif können Agenturen und Webdesigner 

problemlos eigene Hosting-Dienstleistungen für 

ihre Auftraggeber anbieten. Die Tarife für Wiederverkäufer 

lassen sich einfach konfigurieren und erfordern keine 

besonderen Kenntnisse in Sachen Server-Administration. 

Den Einstiegstarif Reseller 4.0 Special gibt es ab 15 Euro 

im Monat. 

www.udmedia.de/wiederverkaeufer/reseller-tarife/ 

X-editable 

Websites editieren 

Mit der Bibliothek X-editable richten 

Entwickler editierbare Bereiche 

auf einer Website ein. Auf Knopfdruck 

kann der User die freigegebenen 

Felder direkt auf der Seite 

oder in einem Popup bearbeiten. 

Der Entwickler spart sich bei dieser 

Methode die Mühe, die einzelnen 

Formularfelder zu definieren. Drei 

Varianten stehen zum Einbinden in 

eigene Anwendungen zur Auswahl: 

Bootstrap, jQuery UI oder reines 

jQuery. 

vitalets.github.com/x-editable 

Die freie Dropbox-Alternative erhält eine Finanzspritze 

von verschiedenen Investoren in Höhe von 2,5 Millionen 

Dollar. Mit Owncloud bauen Anwender eine eigene 

Cloud-basierte Filesharing- und Synchronisationsanwendung. 

Die Community Edition der Open Source ist kostenlos 

einsetzbar. Die kommerziellen 

Versionen bieten zusätzliche 

Funktionalität für Unternehmen. 

Die Software besteht aus einer 

PHP-Serveranwendung, die auf einem beliebigen Webserver 

laufen kann, und Clients, um die gespeicherten 

Daten, Termine, Adressen, Fotos, Musik und Videos zwischen 

PCs und mobilen Geräten abzugleichen. 

owncloud.com 

High-Speed-Hosting 

Unmetered gibt Gas 

Eine neue Marke von 

PlusServer setzt mit ihren 

Breitbandtarifen genau da 

an, wo andere Webhoster 

Speedlimits einrichten: 

der Hosting-Anbieter Unmetered 

spezialisiert sich 

auf High-Speed-Hosting 

für Streaming und Downloads. 

So lassen sich beispielsweise 

mit einer Bandbreite 

von 1000 MBit/s 

etwa 280 Videostreams in 

DVD-Qualität oder 7800 

Radiostreams in Standardqualität 

gleichzeitig bereitstellen. 

Unmetered hostet 

die Breitband-Server in 

Rechenzentren mit einem 

Backbone von 550 GBit/s. 

Der Kunde stellt sich einen 

individuellen Server mit 

der benötigten Leistung ab 

99 Euro im Monat zusammen. 

Darin enthalten ist 

eine Netzanbindung mit 

500 MBit/s Geschwindigkeit. 

Um auf Lastspitzen zu 

reagieren, kann man vorübergehend 

mehr Bandbreite 

dazubuchen. Bis zu 

1000 MBit/s sind möglich. 

Der Traffic ist unbegrenzt 

inklusive. 

www.unmetered.com 


AKTUELLES | Trackback 

Zukunft 

20 Tech-Trends für 2013 

Frogdesign hat einen 

Blick in die Zukunft gewagt 

und 20 Techniktrends 

für das Jahr 2013 

beleuchtet. Vom intelligenten 

Pkw, welcher 

sich schließlich selbst 

durch den Verkehr manövrieren 

wird, über 

neue Arten der Mensch-Computer-Kommunikation 

bis hin zu der Störungsanfälligkeit und Abhängigkeit 

unserer Gesellschaft von der Technik ist für jeden etwas 

dabei, das ihn interessieren und vielleicht sogar 

inspirieren wird. 

designmind.frogdesign.com/blog/20-tech-trendsfor-2013.html 

Lassen Sie Ihre Website begutachten! 

Webkritik 

Welcher Hobby-Webdesigner kennt das nicht: Die 

erste eigene Website ist endlich erstellt und man 

selbst ist hochzufrieden. Aber man fragt sich, was die 

Besucher zu der 

Website sagen. An 

welchen Stellen 

gibt es noch Verbesserungspotenzial? 

Abhilfe schafft 

hier Criticue – Sie 

geben ihre Webadresse an, beurteilen die Seite eines 

anderen Users und im Gegenzug wird Ihre Website 

begutachtet. Möchten Sie danach noch mehr Kritiken, 

müssen Sie einfach nur zu weiteren Websites Ihr Feedback 

abgeben. 

www.criticue.com 

Scoop.it 

Publishing-bycuration-Plattform 

Scoop.it ist eine sogenannte Kurations- 

Plattform. Der User legt zu Themen, die 

ihn interessieren, Scoops an und gestaltet 

und pflegt diese wie eine Online-Zeitung. 

Über ein eigenes Browser-Add-on kann 

er beim Surfen 

im Netz 

Artikel, Bilder 

und Videos, 

die das eigene 

Topic betreffen, 

einfach 

per Klick zu 

seiner Scoop.it-Seite hinzufügen. Des Weiteren 

gibt es auch die Möglichkeit, sich 

von Scoop.it selbst oder anderen Usern 

Vorschläge für die Befüllung der Seite geben 

zu lassen. Eine Option, seinen Scoop 

auf den bekannten sozialen Netzwerken 

zu teilen, ist natürlich auch gegeben. 

www.scoop.it 

Facebook, Twitter & Co 

16 Tipps für 

Social-Media-Texte 

Auch wenn 

heute bereits 

ein Großteil 

der Unternehmen 

in 

Social Media 

aktiv ist, tun sich die meisten schwer 

damit, für ihre Fans und Follower regelmäßig 

relevante Inhalte bereitzustellen. 

Enthusiastische Werbesprüche sind hier 

fehl am Platz. Denn Facebook, Twitter, 

Linkedin und Co. sind in erster Linie Dialogplattformen. 

Wie nun sollen Posts 

und Tweets daherkommen, damit sie 

möglichst viel bewirken? Die Schweizerische 

Post hat aktuelle Studien über 

Social-Media-Texte analysiert und aus 

ihnen 16 nützliche Tipps abgeleitet. 

newsletter-directpoint.post.ch/de/ 

newsletter/12-2012/09-16-tippsfuer-social-media-texte.html 

Wordpress 

Themes erstellen 

Sie wollen ein individuelles, eigenes 

Wordpress-Theme anstatt 

eines Templates von der Stange? In 

seinem vierteiligen Kurs zeigt Ihnen 

Vladimir Simovic, wie Sie Ihre 

Wordpress-Site von der grafischen 

Vorlage bis zum einsatzbereiten 

Wordpress-Theme nach eigenen 

Vorstellungen gestalten und anschließend 

Ihre Wordpress-Site für 

Suchmaschinen optimieren. Der 

Kurs steht momentan kostenlos 

zum Download zur Verfügung. 

www.akademie.de/wissen/ 

wordpress-theme-erstellen 


Managed Server 

EINFACH wie Webhosting! 

HOSTED 

IN GERMANY 

Managed age 

dSe 

Server r Level1 

el 29 ,00 

€/Mon.* 

CPU 

AMD Opteron 1212 HE 

Leistung 2 x 2,0 GHz 

RAM 

2 GB 

HD 

2 x 250 GB 

Traffic 

Unlimited* 

WEIL 

MANAGED AGED 

EINFACH EINFACH IST 

Betreiben Sie einen eigenen Server ohne die komplizierte 

Technik zu administrieren. STRATO kümmert 

sich um Einrichtung, Betrieb und Wartung. 

Managed Server von STRATO arbeiten auf dedizierten Systemen. 

Ihnen stehen alle Hardware-Ressourcen zur Verfügung. Kein Sharing 

mit anderen Nutzern! STRATO Managed Server sind optimal 

vorkonfiguriert. System-Updates werden regelmäßig vom Fachmann 

durchgeführt. So bleibt Ihr Server geschützt und performant. 

Server Hosting kann nicht einfacher sein. 

* Traffic-Unlimited: Keine zusätzlichen Kosten durch Traffic (bei Traffic-Verbrauch über 1.000 GB/ Monat 

und danach je weitere 300 GB erfolgt eine Umstellung der Anbindung auf max. 10 MBit/s. Erneute 

Freischaltung der vollen Bandbreite jeweils kostenlos über den Kundenservicebereich). Preis inkl. MwSt. 

Info: 030 – 300 146 111 | strato-pro.de

SPECIAL | Webdesign für HiDPI-Displays 

Geschärfter Blick 

Immer mehr Mobilgeräte weisen eine mehrfach 

höhere Auflösungsdichte auf als die 96 dpi eines 

typischen Desktops. Nicht optimierte Websites sehen 

auf diesen HiDPI-Displays unscharf aus. Wir zeigen 

Ihnen, wie Sie mit den richtigen Tools und Workarounds 

die volle Schärfe eines HiDPI-Displays in 

Ihren Websites zum Vorschein bringen. 

Ein iPhone 5 packt auf sein 4-Zoll 

kleines Display dank einer Auflösungsdichte 

von 326 dpi die Pixelzahl 

eines kleinen Laptops: 1136 x 640 

Punkte. Ein iPad der vierten Generation 

hat eine Auflösung von 2048 x 1536 Pixeln 

bei einer Dichte von 264 dpi. Ein 

Macbook Pro ist mit einer Auflösung von 

2560 x 1600 (in 227 dpi) in 13 Zoll oder 

mit einer Auflösung von 2880 x 1800 (in 

220 dpi) in 15 Zoll ausgestattet. Sogar 

Amazons Kindle Fire HD bringt es in 

sieben Zoll auf eine Gesamtauflösung 

von 1280 x 800 Pixeln und in 8,9 Zoll 

auf 1920 x 1200; in beiden Fällen schaut 

der Anwender auf ein Display mit einer 

Dichte von 254 dpi. 

Webkit-Browser wie Apples mobiles Safari 

oder Googles Chrome rendern Webinhalte 

mit einer Skalierungsstufe, die 

von der Auflösungsdichte abhängt. Diese 

Skalierung vergrößert auch jegliche 

Ungereimtheiten wie JPEG-Kompressionsartefakte 

oder den Effekt chromatischer 

Auf einen Blick 

HiDPI-Displays stellen Webdesigner vor 

eine neue Herausforderung. Lesen Sie, 

» wie Sie das Problem der virtuellen 

Auflösung umgehen, 

» welche Besonderheiten Sie beim 

Kindle Fire beachten müssen und 

» was beim Einsatz von Vektorgrafiken 

wichtig ist. 

Aberration. Der Benutzer nimmt den Qualitätsverlust 

zum Teil als störend wahr. 

Virtuelle Auflösung 

Pixelbasierte Layouts passen sich nicht 

elastisch der Größe des Viewports an 

und da das Zoomen in einer Website auf 

einem berührungssensitiven Display unerwünschte 

Klicks auslösen kann, haben 

sich die Webkit-Entwickler eine Lösung 

einfallen lassen: Sie kommunizieren gegenüber 

dem Browser eine inkorrekte Pixelzahl. 

So verfügt etwa ein iPhone der 

vierten Generation über ein Retina-Display 

mit einer physikalischen Auflösung 

von 640 × 960 Pixeln und einer Pixeldichte 

von 326 dpi, gibt sich jedoch als 

ein nur 320 × 480 Pixel großes Gerät zu 

erkennen. Bei diesen Einheiten handelt 

es sich um die so genannten geräteunabhängigen 

CSS-Pixel. Um die Optimierung 

des Webdesigns für Displays in Retina- 


Webdesign für HiDPI-Displays | SPECIAL 

Qualität zu erzielen, führt der scheinbar 

nächstliegende Weg, nämlich schlicht 

die Auflösung zu erhöhen, aber in eine 

Sackgasse. Denn so würde man den immer 

noch zahlreichen Benutzern konventioneller 

Displays unnötig viel wertvolle 

Bandbreite abverlangen, die zudem 

zwar nicht dargestellt werden kann, aber 

beispielsweise beim Mobilfunk dennoch 

in Rechnung gestellt würde. 

Natürlich möchte man den Benutzern 

der Retina-Displays gestochen scharfe 

Qualität gönnen, ohne den anderen 

Anwendern überflüssige Daten zuzumuten. 

Die avisierte Lösung muss also 

beide Anwendergruppen berücksichtigen. 

Dies lässt sich zum Beispiel über 

die Bereitstellung optimierter alternativer 

Stylesheets mittels @media-Abfragen 

bewerkstelligen. 

Ein anderer Ansatz besteht darin, mobile 

Geräte unter Verwendung von 

@media-Abfragen oder Javascript mit 

den passenden CSS-Stylesheets zu beliefern. 

Dieser Ansatz optimiert die Nutzung 

der Bandbreite, ist jedoch seitens 

des Webdesigners mit deutlich mehr 

Aufwand verbunden. Wer den Einsatz 

von Bildern minimieren möchte, kann 

Symbolschriften nutzen, um bestimmte 

Informationen zum Ausdruck zu bringen, 

ob in der Phase der Prototypenerstellung 

oder auch bei der finalen Freigabe. 

Schließlich besteht auch die Möglichkeit, 

anstelle von Pixelbildern auflösungsunabhängige 

Vektorgrafiken im SVG-Format 

einzusetzen. Bei Fotos stellt SVG natürlich 

keine Lösung dar, aber viele Diagramme 

oder Logos beginnen ihre Existenz ohnehin 

als eine Illustrator-Datei (.ai oder .pdf 

aus Adobe Illustrator). Es liegt da nahe, 

die betreffenden Grafiken fürs Web gleich 

auflösungsunabhängig auszugeben. 

Displayspezifische Ausgabe 

Durch den Einsatz von @media-Abfragen 

können Sie jedes Zielgerät je nach tatsächlicher 

Auflösungsdichte mit eigenen 

Stylesheets beliefern, die passenden 

Bilder mittels der CSS-Eigenschaften 

background oder background-image referenzieren 

und die Bildgröße unter Verwendung 

der Eigenschaft backgroundsize 

übergeben. Nutzen Sie hierzu ganz 

einfach die @media-Anweisungen: 

device-pixel-ratio 

-o-min-device-pixel-ratio 

min--moz-device-pixel-ratio 

-Webkit-min-device-pixel-ratio 

Zum Beispiel: 

 

 

oder eben so: 

@media only screen and (-moz-mindevice-pixel-ratio: 

1), 

only screen and (-o-min-devicepixel-ratio: 

1/1), 

only screen and (-Webkit-mindevice-pixel-ratio: 

1), 

only screen and (min-device-pixelratio: 

1){ 

.bild{ ... } 

} 

@media only screen and (-moz-mindevice-pixel-ratio: 

2), 

only screen and (-o-min-device-pixelratio: 

2/1), 

only screen and (-Webkit-min-devicepixel-ratio: 

2), 


2) { 

.logo { 

background: url(/pfad/zur/Datei.png) 

no-repeat; 

background-size: 100px 100px; 

/* die übrigen CSS-Anweisungen */ 

} 

} 

Das zentrale Element der Medienabfrage 

ist die Eigenschaft background-size, die 

für die korrekte Skalierung verantwortlich 

ist. Derzeit benötigen die einzelnen 

Browser die zugehörige herstellerspezifische 

Eigenschaft (also -moz-mindevice-pixel-ratio, 

-Webkit-min-devicepixel-ratio 

oder -o-min-device-pixelratio). 

Opera erwartet außerdem die Angabe 

der Pixelverhältnisse in Form eines 

Bruchs. Für Opera müssen Sie also beispielsweise 

den Wert 2/1 statt 2 oder 3/2 

statt 1,5 eintragen. Ein Workaround für 

Ein iPad der vierten 

Generation hat eine Auflösung 

von 2048 x 1536 

Pixeln bei einer Dichte 

von 264 dpi. 



Bilder, die mit dem -Tag eingebunden 

wurden, besteht im Übrigen in 

der Umsetzung so genannter adaptiver 

Bilder (siehe Kasten). 

Displayspezifisch 

mittels Javascript 

In Javascript können Sie dem Pixelverhältnis 

mittels window.devicePixelRatio 

auf die Spur kommen (diese Funktion 

liefert als Rückgabewert 1 oder 1,5 oder 

2 und so weiter), allerdings ist die Unterstützung 

dieser Funktion nicht hinreichend 

verbreitet, um wirklich zuverlässig 

zu funktionieren. 

Falls Sie nur Retina-Displays berücksichtigen 

möchten, können Sie die quelloffene 

Bibliothek Retina.js zu Hilfe rufen 

(retinajs.com). Das Skript ersetzt jeweils 

jedes Bild, das in Standardauflösung vorliegt 

(wie /Bilder/Foto.png), durch eine 

Version in Retina-Auflösung (/Bilder/ 

Foto@2x.png), falls eine entsprechend 

benannte Datei im betreffenden Pfad auf 

dem Server vorliegt und das Zielgerät 

über ein Retina-Display verfügt. 

Adaptive Bilder 

Wer ein bestehendes CMS-System um 

die Fähigkeit der Handhabung von 

Bildern in Retina-Qualität aufrüsten 

möchte, ohne das Markup der Site zu 

verändern, kann sich eines Skriptes 

namens "Adaptive Images" von Matt 

Wilcox behelfen. Das Skript erkennt die 

Größe des Displays, erzeugt automatisch 

eine optimierte Version der betreffenden 

Bilder, cacht diese und liefert 

sie aus. Diese Lösung erfordert nur 

minimale Modifikationen und läuft mit 

PHP 5.x und der GD lib-Bibliothek auf 

Apache 2. Das Skript finden Sie unter: 

adaptive-images.com/ 

Minimieren von http-Anfragen 

Jede @media-Abfrage referenziert die 

benötigten Bilder in der passenden Auflösung. 

Also gilt es für jedes Bild, eine 

Version der Abbildung für jede avisierte 

Pixeldichte bereitzustellen. Wenn Sie 

nur eine HiDPI-Pixeldichte unterstützen, 

verdoppelt sich schon einmal die Anzahl 

der referenzierten Bilder und somit 

wiederum die Anzahl der zugehörigen 

Selektoren; wenn Sie sich zwei HiDPI- 

Auflösungsdichten vornehmen, verdreifacht 

sich der Aufwand. Mit Hilfe von 

CSS-Sprites können Sie die Anzahl der 

http-Anfragen durch geschicktes Referenzieren 

der Retina-Version der Bilddatei 

vereinfachen: 

div.spritesegment1 { 

background: url(sprite.png) no-repeat 

0 0; 

} 



-100px 0; 

} 



-100px -100px; 

} 

.content a.fav-link { 


0 -100px; 

} 

@media only screen and (-Webkit-mindevice-pixel-ratio: 

2), 


2) { 

div.spritesegment1, 




/* das Sprite in @2x –Auflösung für 

Retina */ 

background-image: url(sprite@2x.png); 

/* Zurücksetzen der Dimensionen des 

@2x-Sprite für Retina */ 


} 

} 

Das Kindle Fire HD läutet auch bei Amazon 

das HiDPI-Zeitalter ein; ab 7 Zoll 

mit 1280 x 800 Pixeln kommt das Gerät 

auf eine Dichte von 254 dpi. 



Symbolschriften wie die Fico von 

Lennart Schoors stellen eine geeignete 

Methode dar, das HiDPI-Problem zu 

lösen und trotzdem sparsam mit der 

Bandbreite umzugehen, was ja gerade 

beim Mobilfunk relevant ist. 

Elastische Schrifteneinheiten 

Amazon folgt mit dem Kindle einen 

völlig anderen Ansatz als Google in 

Android OS und Apple in iOS. So gibt 

zum Beispiel das Kindle Touch seine 

tatsächliche Auflösung mit 600×800 

Pixeln an, setzt allerdings die Standardschriftgröße 

deutlich höher an als 

die branchenüblichen 16 Pixel beziehungsweise 

14 Punkt. Würden Sie daher 

@media-Abfragen auf Basis der px-Einheit 

einsetzen, würde das Kindle Touch 

mit einem ungeeigneten Stylesheet mit 

einer aufgeblasenen Schriftgröße beliefert 

werden. Um das Problem zu umgehen, 

gilt es, @media-Abfragen in ems 

statt in px anzugeben, konkret also: 

@media all and (min-width: 16em) 

Automatisches Herunterrechnen 

unterdrücken 

Stellt man Webbilder für Geräte mit einer 

hohen Auflösung des Displays bereit, 

kann zudem in allen mobilen Browsern 

mit der Webkit-Renderingengine noch 

ein anderer Effekt auftreten, der eine 

weitere und sehr unangenehme Qualitätsminderung 

zur Folge hat. 

JPEGs ab einer Größe von 2 Megapixeln 

(2 x 1024 x 1024) sowie PNG/GIF-Bilder 

ab einer Größe von 3 Megapixeln werden 

in Webkit-Browsern wie dem mobilen 

Safari automatisch auf die halbe 

Pixelgröße heruntergerechnet. Da die 

neuen OS-Geräte mit einer Pixeldichte 

von 2 arbeiten, werden die betreffenden 

Bilder dann wieder auf die gewünschte 

Display-Größe hochskaliert, was eine 

merkliche Minderung der Darstellungsqualität 

zur Folge hat. Um den Effekt zu 

verhindern, empfehlen wir, große Bilder 

nur im JPEG-Format und immer mit der 

Option progressiv abzuspeichern. Dann 

tritt der Fehler nicht auf. 

Symbolschriften 

Der Einsatz von Symbolschriften anstelle 

von Pixelgrafiken hat für Sie zahlreiche 

Vorteile. Zum einen können Sie die Größe 

der Symbole mit Hilfe von CSS leicht 

ändern, ohne einen Verlust der Schärfezeichnung 

zu verursachen. Textzeichen 

sehen unabhängig von der Zoomstufe immer 

scharf aus und machen daher unabhängig 

von der Auflösungsdichte immer 

eine gute Figur. Auch lassen sich Schriftzeichen 

leicht einfärben oder mit CSSbasierten 

Schatteneffekten versehen. 

Die einfachste Methode, Symbolschriften 

einzusetzen, besteht im Zuweisen einer 

CSS-Klasse zu einem HTML-Element wie 

beispielsweise oder , 

also konkret etwa: 

i 

Der Inhalt des betreffenden Elementes 

entspricht dem Symbol, das Sie anzeigen 

möchten. Nach dem Einbinden der 

benötigten Schrift würden Sie die Klasse 

wie folgt deklarieren: 

.icon { 

font-family: 'Die Internet-Magazin 

-Symbolschrift-1'; 

} 

Diese Methode setzt voraus, dass Sie sich 

nicht daran stören, wenn Bildschirmleseprogramme 

den Inhalt des Symbols vorlesen 

(im Beispiel das „i“). 

In HTML5 können Sie zur Einbindung 

einzelner Glyphen einer Symbolschrift 

alternativ das data-Attribut verwenden, 

um den Zeichencode an den Browser 

zu übergeben. Den Zeichencode müssen 

Sie natürlich erst herausfinden (die 

Belegung der Symbolzeichen ist von 

Schrift zu Schrift unterschiedlich). So 

lässt sich unter Verwendung der Schrift 

Fico von Lennart Schoors mittels dataicon="◈" 

ein WiFi-Symbol auf 

die Website zaubern, natürlich nur, sofern 

Sie die benötigte Schrift in die Website 

eingebunden haben. 

Um das Symbol einer statistischen Grafik 

zu erzeugen, können Sie an ein Markup 

wie dieses: 



Balkendiagramme 

mit dem folgenden CSS-Code ein Pseudoelement 

anhängen: 

[data-icon]:before { 

font-family: icons; 

content: attr(data-icon); 

speak: none; 

} 

Mit Hilfe des Attributs aria-hidden im 

Zusammenhang mit der Eigenschaft 

speak:none lässt sich das Vorlesen des 

Pseudoelementes ganz einfach unterdrücken. 

Der Code des betreffenden 

Zeichens wird an den Browser im data- 

Attribut übergeben. 

Pseudoelemente vertragen sich allerdings 

nicht mit dem Internet Explorer bis 

einschließlich Version 7, und so müssten 

Sie für diesen Browser, falls Sie ihn noch 

unterstützen möchten, ein alternatives 

Stylesheet bereitstellen. Dieses können 

Sie zum Beispiel mit Hilfe eines bedingten 

Kommentars einbinden 

 

Eine andere Methode besteht im Einsatz 

eines :before-Pseudoelementes mit der 

Eigenschaft content, wobei diesmal für 

jedes Symbol eine eigene Klasse zum 

Einsatz kommt, zum Beispiel 

 

und dann weiter im CSS-Stylesheet: 

[class^="symbol-"]:before { 

font-family: 'Die Internet-Magazin- 

Symbolschrift-1'; 

} 

.symbol-information:before { 

content: 'h'; 

} 

Auflösungsunabhängig mit SVG 

Als eine logische Lösung für Probleme 

mit der Bildschärfe im Web bietet sich 

der Einsatz von SVG-Vektorgrafiken nahezu 

an. Vektorbasierte Grafiken weisen 

eine deutlich geringere Dateigröße 

als Pixelbilder auf, fordern jedoch dem 

Zielgerät etwas mehr Rechenleistung ab. 

Die Unterstützung von SVG hat zudem 

so viele Nuancen, wie das SVG-Format 

Features beinhaltet. 

Ein Browser mag den einen Teil der 

SVG-Funktionalität beherrschen, aber 

nicht den anderen. Zum Glück bleiben 

die Browser beim Parsen der Seite nicht 

stehen, wenn sie mit nicht unterstützten 

SVG-Funktionen konfrontiert werden. 

Der Browser führt einfach die übrigen 

Anweisungen aus. Problematisch sind 

vielmehr diejenigen Teile der SVG- 

Funktionalität, die in dem betreffenden 

Browser zwar pro forma implementiert 

wurden, aber viel zu langsam ablaufen. 

Stellt eine SVG-Grafik zu hohe Anforderungen 

an das Zielgerät hinsichtlich 

seiner Rechenleistung, „verschluckt“ 

sich der Browser an der Website und 

bleibt einfach stehen. Beim Einsatz von 

SVG ist die Simplizität daher die wichtigste 

Tugend. 

Die einfachste Methode zum Einbinden 

von SVG- Grafiken besteht im Einsatz des 

-Tags, zum Beispiel: 

 

Alternativ können Sie sich die CSS-Eigenschaft 

background-image mit einem Klas- 



SVG-Funktionen in mobilen Browsern 

SVG-Funktionaliät iOS Safari Opera mini Google Android Opera Mobile Blackberry RIM Google Chrome 

für Android 

Firefox für 

Android 

aktuelle Version 6 7 4,1 12 7 18 15 

oder ab Version 3.2 ab Version 5 ab Version 3 ab Version 10 ab Version 7 ab Version 18 ab Version 15 

 

 

Version 3.2 partiell, 

ab Version 5 ab Version 3 ab Version 10 ab Version 7 ab Version 18 ab Version 15 

ab Version 

4 vollständig 

-background- innerhalb 

anderer 

block-Elemente 

ab Version 3.2 

partiell, ab 

Version 4.2 

vollständig 

ab Version 5 ab Version 3 ab Version 10 ab Version 7 ab Version 18 ab Version 15 

SVG-Tags direkt 

innerhalb des 

HTML5-Markups 

SVG-Effekte 

mittels CSS oder 

der foreignObject- 

Elementes 

ab Version 5 

ab Version 3.2 

partielle Unterstützung 

keine Unterstützung 


ab Version 3 ab Version 12 ab Version 7 ab Version 18 ab Version 15 


SVG-Filter ab Version 6 ab Version 5 keine Unterstützung 

SMIL-Animationen ab Version 3.2 



SVG-Schriften ab Version 3.2 keine Unterstützung 

ab Version 3 ab Version 10 ab Version 7 ab Version 18 keine Unterstützung 

SVG-Abschnitt- 

Identifizierung 



ab Version 10 


ab Version 10 ab Version 18 


ab Version 15 

ab Version 10 ab Version 10 ab Version 18 ab Version 15 

ab Version 3 ab Version 10 ab Version 7 ab Version 18 ab Version 15 





ab Version 15 

senselektor wie folgt zunutze machen: 

.bild { 

background-image: url(Logo.svg); 


height: 200px; 

width: 300px; 

} 

Zu guter Letzt kommen Sie auch durch 

den Einsatz von content:url() ans Ziel: 

.bild-container:before { 

content: url(Logo.svg); 

} 

Die Eigenschaften width und height funktionieren 

in diesem Fall allerdings nicht. 

Mit Hilfe der Bibliothek Modernizr lässt 

sich zudem die Rückwärtskompatibilität 

mit älteren Browsern problemlos herstellen. 

Hierzu können Sie zum Beispiel den 

folgenden Code nutzen: 

.bild { 

background-image: url(Logo_ 

kompatibel.png); 


} 

.svg { 

.bild { background-image: url(Logo. 

svg); } 

} 

Ein vergleichbares Resultat lässt sich in 

HTML 5 übrigens mit einem benutzerdefinierten 

data-Attribut erreichen, und 

zwar mit jQuery und Modernizr auf der 

Basis eines ganz einfachen Markups in 

der Form: 

 

mit etwas Javascript wie diesem: 

$(document).ready(function(){ 

if(!Modernizr.svg) { 

var images = $('img[data- 

Ersatzbild]'); 

images.each(function(i) { 

$(this).attr('src', $(this). 

data('Ersatzbild')); 

}); 

} 

}); 

Diese Methode kann allerdings Altlasten- 

Browser, die mit SVG nichts anzufangen 

wissen, nicht vom Herunterladen der 

SVG-Grafik abhalten. 

Fazit 

HiDPI-Displays wie Retina müssen 

dank praxiserprobter Workarounds keinen 

Grund zur Sorge mehr darstellen. 

Wer die Unterstützung von Geräten 

mit einer hohen Auflösungsdichte ins 

Pflichtenheft übernimmt, kann diese 

neue Herausforderung mit System und 

Eleganz meistern. 

Anna Kobylinska und 

Filipe Pereira Martins 


1&1 feiert Geburtstag – feiern Sie mit! Wir schenken Ihnen 

50,– € Jubiläums-Bonus! * 

DOMAINS | E-MAIL | WEBHOSTING | E-SHOPS | SERVER 

*1&1 Jubiläumsaktion bis 31.01.2013 für Neukunden: 1&1 WebHosting Pakete 6 Monate 0,– €/Monat, danach z.B. 1&1 Dual Unlimited 24,99 €/Monat, 14,90€Einrichtungsgebühr, 

einmaliger Jubiläumsbonus 50,– €. 1&1 Dynamic Cloud Server Basiskonfiguration3Monate 0,– €/Monat, danach 39,99 €/Monat, 39,– € Einrichtungsgebühr, einmaliger Jubiläumsbonus

1&1 WEBHOSTING 

1&1 feiert 25-jähriges Jubiläum. Profitieren Sie von 25 Jahren Erfahrung und geben Sie Ihren Web-Projekten eine sichere 

Zukunft. Denn mit weltweit über 11 Mio. Kundenverträgen, 5.000 Mitarbeitern und5Hochleistungs-Rechenzentren ist 

1&1 einer der größten Webhoster weltweit. Als Kunde profitieren Sie von unserem langjährigen Know-how und unserem 

24/7 Experten-Support. Und das Beste ist: Allen, die sich bis 31.01.13 für 1&1 entscheiden, schenken wir bis zu 50,– € 

Jubiläums-Bonus! 

1&1 WebHosting 

1&1 Cloud Server 

1&1 Dedicated Server 

■ Optimale Sicherheit durch parallelen 

Betrieb und tägliche Backups 

■ Bis zu 8 Inklusiv-Domains 

■ Freie Wahl des Betriebssystems 

(Linux oder Windows) 

■ NEU! PHP 5.4 inklusive 

■ Inklusive aller Tools zur Realisierung 

Ihrer Ideen 

■ Unlimited Traffic inklusive 

■ Voller Root Zugriff 

■ Individuelle Kombination aus CPU, 

RAM und Festplattenspeicher 

■ Abrechnung stundengenau und 

konfigurationsbasierend 

■ Optimale Sicherheit durch parallelen 

Betrieb 

■ Wiederherstellung per Snapshot 


■ Voller Root Zugriff 

■ Bis zu 32 Cores und 64 GB RAM 

■ Große Auswahl an Betriebssystemen 

■ Bereitstellung und Austausch 

innerhalb von 24h 

■ Nahezu 100%Verfügbarkeit und 

Erreichbarkeit 


6 MONATE 

0,– 

+ JUBILÄUMS- 3 MONATE 

BONUS 

BONUS 

+ 

50,– 

€ * 0,– 

€ 

0,– 

€ 

50,– * 

50,– 

* 

€* €* 

3 MONATE 

+ BONUS 

JUBILÄUMS- 

JUBILÄUMS- 

50,– 

€* 

0 26 02 / 96 91 

0800 / 100 668 

1und1.info 

50,– €. 1&1 Dedicated Server 3 Monate 0,– €/Monat, danach z.B. 1&1 Server XXL24i 399,– €/Monat, 99,– € Einrichtungsgebühr, einmaliger Jubiläumsbonus 50,– €. Für alle Aktionsangebote 

12 Monate Mindestvertragslaufzeit. Jubiläumsbonus wird mit der jeweiligen monatlichen Grundgebühr ab dem ersten Bezahlmonat verrechnet. Preise inkl. MwSt.

WEBDESIGN | Responsive Typographie 

Flüssige Texte 

Bei einem Responsive Layout geht es nicht nur 

darum, die großen Bereiche einer Website anzuordnen. 

Auch bei der Typografie kommt es auf die 

richtige Strategie an, damit die Inhalte bei verschiedenen 

Bildschirmgrößen optimal lesbar sind. 

Responsive Webdesign ist einer der 

wichtigsten Trends derzeit. Dank 

CSS3 Media Queries können Sie Layouts 

je nach verfügbarem Platz ganz unterschiedlich 

gestalten: Ein Layout kann auf 

großem Bildschirm vierspaltig, bei weniger 

Platz zweispaltig und beispielsweise 

auf Smartphones einspaltig angezeigt werden. 

Aber natürlich beschränkt sich ein 

Responsive Layout nicht auf die Platzierung 

von Inhalten – auch die Schrift sollte 

an die verschiedenen Umstände und Ausgabemedien 

angepasst werden. Und das 

heißt konkret: Welche Schriftgröße ist für 

welche Ausgabemedien ideal und welche 

Anpassungen muss man sonst noch vornehmen? 

Neben allgemeinen Praxistipps 

geht es im Artikel auch um neue Maßeinheiten 

und nützliche Tools. 

Die richtige Schriftgröße 

Für die Wahl der richtigen Schriftgröße 

spielt es auch eine entscheidende Rolle, 


Schriften sollten immer gut lesbar sein, 

egal, mit welcher Bildschirmauflösung 

der User die Site besucht. Lesen Sie, 

» welche Schriftgrößen sich bei der 

responsiven Typografie eignen, 

» was es mit der Einheit rem auf sich 

hat und 

» welche Tools Sie bei der Arbeit mit 

optimalen Schriften unterstützen. 

welchen Abstand der Benutzer 

beim Lesen und Betrachten 

der Website vom Gerät hat. 

Denn je größer der Abstand 

ist, desto kleiner wirkt die Schrift. 

So ist der Abstand zum Desktop-Monitor 

im Allgemeinen größer als der zu einem 

Laptop-Bildschirm. Wesentlich näher 

hält man üblicherweise das Smartphone 

beim Lesen. Beim Tablet hingegen hängt 

es von der Situation ab, der Abstand 

kann variieren: Beim Lesen im Bett hält 

man das Tablet ähnlich nah wie ein 

Buch, in der U-Bahn kann es hingegen 

auch auf dem Schoß ruhen. Prinzipiell 

gilt, dass man für ein Smartphone die 

Schrift etwas kleiner wählen kann als in 

der Desktop-Variante. 

Ob aber etwa eine 16 Pixel große Schrift 

gut lesbar ist oder gar zu groß wirkt, hängt 

ganz entscheidend von dem gewählten 

Schrifttyp ab – neben weiteren Faktoren 

wie Kontrast und so weiter. Außerdem 

sind natürlich die unterschiedlichen 

Auflösungen (dpi) für die physikalische 

Größe relevant. 

Deswegen empfiehlt es sich, die gewählte 

Schrift in verschiedenen Größen auf den 

unterschiedlichen Geräten auszutesten. 

Hierfür gibt es eine nützliche Erweiterung 

des 320-and-up-Framework von Andy 

Clarke: Es ist ein einfaches HTML-Dokument 

mit Text in verschiedenen Größen, 

bei dem die Schriftgröße immer ausgegeben 

wird. Wenn Sie die 

Schrift ändern, können Sie kontrollieren, 

wie Ihre neu gewählte Schrift 

in den verschiedenen Größen wirkt. Noch 

komfortabler geht es mit der PHP-Variante 

dieser Erweiterung von Conor MacNeill: 

Das Dokument müssen Sie über einen 

Webserver aufrufen, danach können Sie 

die gewünschte Schrift über die URL angeben, 

also beispielsweise http://localhost/responsive_type.php?font=Helvetica. 

Falls Sie PHP so konfiguriert haben, dass 

Fehlermeldungen angezeigt werden, 

sollten Sie am Anfang des Skriptes mithilfe 

von error_reporting(0); die Warnungen 

aufgrund von nichtdefinierten Variablen 

ausschalten. 

Wenn Sie Webfonts einsetzen, sollten Sie 

nicht nur den Webfont in verschiedenen 

Schriftgrößen, sondern zusätzlich die 

Wirkung der Fallback-Schriften testen. 

Das beispielsweise bei Google Webfonts 

häufig als Default-Schrift angegebene 

cursive ist auf einem iPad prinzipiell 

schlecht lesbar. 

Zeilenlänge begrenzen 

Wichtig ist für eine gute Lesbarkeit auch 

die richtige Zeilenlänge: Was hier genau 


Responsive Typographie | WEBDESIGN 

die optimalen Werte sind, darüber 

lässt sich vortrefflich streiten, 

zumal hier auch weitere Faktoren 

wie Schrifttypen, Schriftgröße und 

Zeilenabstand ins Spiel kommen. 

Häufig geht man aber von Werten 

von 45 bis 75 Zeichen pro Zeile aus. 

Trent Walton hat für Zeilenlängentests 

einen guten Tipp: Nach der anvisierten 

Zeichenzahl pro Zeile können Sie 

jeweils ein sonst nicht vorkommendes 

Sonderzeichen wie * einfügen. Taucht 

mehr als ein * in einer Zeile auf, müssen 

Sie eingreifen, das heißt, die Schriftgröße 

erhöhen oder die Zeilenbreite reduzieren 

– beispielsweise indem Sie den Text in 

Spalten aufteilen. 

Für die automatische Aufteilung in mehrere 

Spalten ist das Multicolumn-Modul 

der richtige Helfer. Dabei ist es wichtig, 

dass Sie die Aufteilung in Spalten nur 

vornehmen, wenn genügend Höhe vorhanden 

ist. Vermeiden Sie unbedingt, 

dass der Benutzer beim Lesen der Spalten 

scrollen muss. Das heißt, Sie sollten 

kalkulieren, welche Höhe Ihre Inhalte 

brauchen und diesen Wert innerhalb einer 

Media-Query-Angabe verwenden. 

@media screen and (min-height: 20em) 

{ 

.inhalt { 

-webkit-column-width: 25em; 

-moz-column-width: 25em; 

column-width: 25em; 

} 

} 

Alternativ dazu können Sie natürlich 

auch die Anzahl der Spalten festlegen 

und innerhalb der Media-Query-Angabe 

bestimmen, ab welcher Breite die Aufteilung 

vorgenommen werden soll: 

@media screen and (min-height: 26em) 

and (min-width: 40em) { 

.inhalt { 

-webkit-column-count: 2; 

-moz-column-count: 2; 

column-count: 2; 

} 

} 

em für die Schriftgröße 

Kommen wir wieder zurück zur Schriftgröße. 

Damit sich die Schrift durch den 

Benutzer anpassen lässt, bietet sich die 

Maßeinheit em an. Ein weiterer Vorteil 

von em ist, dass sich dadurch die Schrift 

leicht global modifizieren lässt: Hierfür 

müssen Sie nur die Schriftgröße des umfassenden 

Elements, das den Bezugspunkt 

setzt, anpassen. Das kann beispielsweise 

folgendermaßen aussehen: 

@media screen and (min-width: 700px) { 

body { font-size: 100%;} 

} 

@media screen and (min-width: 1100px) { 

body { font-size: 120%;} 

} 

Wenn Sie danach em als die Einheit für 

die Schriftgröße einsetzen, orientiert sich 

diese immer an dem jeweils geltenden 

Wert für body: 

h1 { font-size: 1em;} 

em bezieht sich auf die aktuelle Schriftgröße; 

1em ist so groß wie die aktuelle 

Schrift, 1.5em ist 1,5 mal so groß und 

so weiter. Sehen wir uns das konkret an 

folgendem Fall an: 

body { 

font-size: 150%; 

} 

li { 

font-size: 0.8em; 

} 

Durch diesen Code wird die Schriftgröße 

von body auf 150 Prozent gesetzt. Wenn 

der Benutzer nichts in seinen Einstellungen 

verändert hat, kann man davon 

ausgehen, dass 100 Prozent 16 Pixel 

entsprechen, also ergibt dies 1.5 * 16 Pixel 

= 24 Pixel. Für die Listenpunkte wird 

als Schriftgröße 0.8 em festgelegt. Damit 

sind die Listenpunkte 0.8 * 24 Pixel 

groß, macht 19.2 Pixel. Um diese Um- 

Oliver Reichenstein veranschaulicht 

sehr deutlich, wie die Schriftgröße 

und der Abstand zwischen Benutzer 

und Bildschirm zusammenhängen. 



… aber auch an 

das breitere an – 

wie hier 

im Internet 

Explorer 10. 

Der in der neuen Einheit vw angegebene 

Text passt sich an das schmale Browserfenster 

… 

rechnungen zu vereinfachen, wurde bei 

der Arbeit mit em früher häufig die Basisschriftgröße 

auf 62.5 Prozent gesetzt, 

weil sich dann das Äquivalent von 1em = 

10 Pixel ergibt – so können Sie sich den 

Taschenrechner sparen. Heute empfiehlt 

es sich aber, den Bezugspunkt auf 100 

Prozent zu lassen, weil sonst em-basierte 

Media Queries inkonsistent werden können. 

Außerdem besteht die Gefahr, dass 

bei einem Element keine Schriftgröße angegeben 

ist, und der durch 62.5 Prozent 

bewirkte Standardwert von 10 Pixel wäre 

dann natürlich eindeutig zu klein. 

Kommen wir zurück zu unserem Beispiel, 

bei dem die Größe der Listen auf 0.8 em 

gesetzt ist. Was passiert mit so einer Angabe 

bei einer verschachtelten Liste? 

 

Eine kleine Liste 

Eine kleine Liste 

 

Unterunterpunkt 

 

 

 

Dann sind die inneren li-Elemente kleiner 

als die übergeordneten, da ja für diese 

ebenfalls der Wert von 0.8 em gilt – was 

sich aber nun auf die aktuelle Schriftgröße 

bezieht und die ist 19.2 Pixel; damit sind 

die inneren Punkte nur noch 0.8 * 19.2 

Pixel groß. Das ist in den meisten Fällen 

nicht gewünscht. Als Gegenmaßnahme 

können Sie für die verschachtelten Elemente 

eine Größe von 1 em bestimmen: 

li li { font-size: 1em; } 

Bei der Verwendung von em bleibt das 

Problem, dass es aufgrund von Verschachtelungen 

zu unerwünschten Ergebnissen 

kommen kann. Das ist sicher 

mit ein Grund, warum die Einheit em von 

Einsteigern eher gemieden wird. 

Gestatten: rem 

Die neue Maßeinheit rem („root em“) 

bietet die Flexibilität von em, erspart 

uns aber die nachteiligen Auswirkungen 

bei Verschachtelungen: rem beziehen 

sich immer auf das Wurzelelement des 

Dokuments. 

Ändern wir unser Beispiel einmal um 

und verwenden rem als Einheit: 

html { 

font-size: 150%; 

} 

li { 

font-size: 0.8rem; 

} 

Dann bezieht sich die Einheit immer auf 

das Wurzelelement, es gibt also keine 

Größenunterschiede mehr zwischen der 

inneren oder der äußeren Liste. Wichtig 

ist aber, dass Sie bei der Verwendung von 

rem als Bezugspunkt wirklich das Wurzelelement 

festlegen – und das Wurzelelement 

von HTML-Dokumenten ist das 

html-Element. 

Derzeit wird diese neue Einheit von allen 

aktuellen Browsern unterstützt, im 

Internet Explorer ab Version 9. Für ältere 

Browser sollten Sie zusätzlich eine Fallback-Schriftgröße 

spezifizieren, die vor 

der Angabe mit rem stehen muss: 

font-size: 16px; 

font-size: 1rem; 

Im Beispiel wurde als Fallback die Schriftgröße 

in Pixeln angegeben. Schöner aber 

auch aufwändiger wäre es, hier stattdessen 

auf em zurückzugreifen. Übrigens 

wird auch – noch bessere Browserunterstützung 

vorausgesetzt – die Einheit 

em an sich nicht durch rem überflüssig 

gemacht. Denn da, wo Abstände beispielsweise 

immer an der Schriftgröße 

des aktuellen Elements orientiert bleiben 

sollen, ist em nach wie vor das Mittel der 

Wahl. So gesehen bietet die Einheit rem 

ein vereinfachtes Handling, aber keine 

wirklichen Neuerungen und auch keine 

neue Flexibilisierung. Das ist anders bei 

den nun vorgestellten neuen Einheiten. 

Richtig flexible Einheiten 

CSS3 führt neue dynamische Einheiten 

ein, die sich an der Bildschirmgröße, das 


Responsive Typographie | WEBDESIGN 

heißt genau genommen an der Viewportgröße, 

orientieren. 

» vw bezieht sich auf die Viewportbreite 

» vh auf die Höhe des Viewports 

» vmin auf den Wert der beiden, der kleiner 

ist 

» vmax auf den Wert der beiden, der 

größer ist 

Sehen wir uns vw einmal genauer an: 

Diese Viewportbreiteneinheit wird heute 

schon im IE 10, aktuellen Chrome 

und Safari ab 6 unterstützt. 

1vw entspricht einem Prozent 

des Viewports und 

lässt sich natürlich wunderbar 

für die Schriftgröße 

nutzen. 

h1 { font-size: 16vw; } 

Wenn in einem Beispiel der 

Viewport 832 Pixel groß ist, 

so ergibt sich die Pixelgröße für 

den Text über 832px / 100 

* 16, im Beispiel satte 134 

Pixel. Besonders schön 

funktioniert die Einheit im Internet Explorer 

10, denn er aktualisiert automatisch 

die Schriftgröße, wenn Sie die Größe 

des Browserfensters verändern. Chrome 

hingegen hat hier momentan noch einen 

Bug, die Anpassung der Schrift an das 

Browserfenster findet erst nach einem 

Reload statt. 

Bei folgendem Beispiel wird die Schriftgröße 

mehrerer Elemente über vw bestimmt 

– passend dazu auch die Abstände: 

h1 { 

font-size: 17vw; 

} 

h2 { 


margin: 1vw 0; 

} 

p { 


margin: 1vw 0; 

} 

Allerdings sollten Sie dafür sorgen, dass 

die Schrift bei kleinem Viewport nicht zu 

klein wird – was in unserem Beispiel der 

Fall ist. Zwar ist eine Mindestgröße nicht 

vorgesehen, aber man kann sich mit Media 

Queries behelfen. Die folgenden Angaben 

setzen die Schrift bei einer Viewportgröße 

von weniger als 400 Pixeln immer 

auf 16 Pixel. 

@media screen and (max-width: 

400px) { 

p { 

font-size: 16px; 

} 

} 

Um ein Gespür für diese 

neue Einheit zu bekommen, 

sind die Entwicklungswerkzeuge 

von Chrome hilfreich. 

Ein Klick auf body liefert 

Ihnen im rechten Bereich unter 

Computed Styles die aktuelle 

Viewportgröße. Ebenfalls unter 

Computed Styles finden Sie 

auch die berechnete Schriftgröße, 

wenn Sie Ihr Element mit der Schriftgröße 

in vw ausgewählt haben. 

Insgesamt bietet vw eine neue, aber auch 

ungewohnte Flexibilität und ermöglicht 

wirklich skalierbare Layouts. 

Fette Headlines 

Sehr angesagt sind zurzeit fette Headlines, 

das heißt üppig große erste Überschriften 

im Kopfbereich. Diese Headlines 

sind schön und überzeugend auf 

Desktops, wo genügend Platz vorhanden 

ist. Auf einem Smartphone mit kleinerem 

Bildschirm ist der Platz hingegen kostbar 

und fette Headlines wären unangebracht. 

Auch hier sind Media Queries nützlich. 

Allerdings empfiehlt sich zusätzlich zur 

gängigen Abfrage nach der Breite des 

Viewports auch dessen Höhe zu berücksichtigen 

– schließlich ist das der Knackpunkt 

dabei. 


and (min-height: 28em) { 

.kopf h1 { 

font-size: 4em; 

} 

} 


and (min-height: 38em) { 

.kopf h1 { 

font-size: 6em; 

} 

} 

Wollen Sie, dass die Schriftgrößenveränderung 

dynamisch abläuft, dann können 

Sie dafür eine Transition ergänzen, die 

auf die Schriftgröße reagiert: 

.kopf h1 { 

-moz-transition: font-size 0.3s 

ease-out 0s; 

-webkit-transition: font-size 0.3s 

ease-out 0s; 

-o-transition: font-size 0.3s 

ease-out 0s; 

transition: font-size 0.3s ease-out 

0s; 

} 

Das ist ein netter Effekt, den man aber 

nicht überbewerten sollte – denn sichtbar 

wird diese kleine Animation nur, 

wenn man die Größe des Browserfensters 

ändert. Und das tun die Benutzer – 

abgesehen von Webentwicklern – wohl 

nicht sehr oft. Möchten Sie aber eine 

richtige fette Headline, die sich immer 

optimal an den Viewport anpasst, dann 

wäre die neue Einheit vw die richtige 

Wahl. Bis diese von mehr Browsern unterstützt 

wird, bietet sich der Einsatz von 

jQuery-Plug-ins an. 

Browserunterstützung für die neuen Einheiten 

Firefox Internet Explorer Chrome Safari Opera 

rem Ab 3.6 Ab 9 Ab 6 Ab 5.0 Ab 11.6 

vw Ab 19? Ab 10 Ab 20 An 6.0 ? 



Angepasster Text 

Das Plug-in Fittext passt Überschriften 

immer an den Viewport an. Nachdem 

Sie das Plug-in heruntergeladen haben, 

müssen Sie zuerst jQuery einbinden und 

danach das Plug-in. 

 

 

Wenn Sie die Einbindung dieser beiden 

Dateien direkt vor erledigen, 

können Sie das Plug-in direkt durch folgenden 

Code starten – ansonsten müssen 

Sie den Aufruf noch innerhalb von 

$(function() { und }); packen. 

 

$("#fittext1").fitText(); 

 

So ist nun das Plug-in für das Element 

mit id="fittext1" aktiviert und der Text 

passt sich immer an die Größe des umgebenden 

Elements an. 

Das genaue Aussehen lässt sich über verschiedene 

Parameter beeinflussen. Zuerst 

einmal können Sie die Stärke der Komprimierung 

beeinflussen: 

$("#fittext1").fitText(1.2); /* 

stärkere Komprimierung */ 

$("#fittext1").fitText(0.8); /* 

schwächere Komprimierung */ 

Sehr nützlich ist auch die Option, eine 

maximale und minimale Größe zu bestimmen 

und damit die Größenänderungen 

auf ein vernünftiges Maß zu 

beschränken. 

$("#responsive_headline").fitText(1.2, 

Das jQuery- 

Plug-in Fittext 

nimmt gleichzeitig 

noch eine 

Aufteilung der 

Überschriften 

in mehrere 

Zeilen vor. 

{ minFontSize: '20px', maxFontSize: 

'40px' }) 

Wichtig: Das Element, auf das Sie Fittext 

anwenden, muss ein Blockelement sein, 

andernfalls müssen Sie selbst display: 

block oder zumindest display: inlineblock 

definieren. 

Slabtext 

Das jQuery-Plug-in Slabtext geht noch 

einen Schritt weiter als Fittext: Es teilt die 

Überschriften auf mehrere Zeilen auf, die 

dann immer elementfüllend angezeigt 

werden – bei Bedarf wird der Text vergrößert. 

Zuerst brauchen Sie wiederum 

jQuery, dann das Plug-in: 

 

 

Darunter folgt der Aufruf des Plug-ins: 

 

function slabTextHeadlines() { 

$("h1").slabText({ 

"viewportBreakpoint":380 

}); 

}; 

$(window).load(function() { 

setTimeout(slabTextHeadlines, 1000); 

}); 

 

Im Beispiel bewirkt "viewportBreakpoint": 

380, dass die Textmanipulation ab 

einem Viewport unterhalb von 380 Pixel 

nicht mehr durchgeführt wird; denn dann 

wären derart voluminöse Überschriften 

Link-Tipps 

Oliver Reichenstein zu responsiver 

Typografie 

informationarchitects.net/blog/ 

responsive-typography-the-basics/ 

Schriften testen 

https://github.com/thefella/ 

Responsive-type-references/blob/ 

master/responsive-type.php 

Bezugspunkt für em: besser font-size: 

100% als font-size: 62.5% 

filamentgroup.com/lab/how_we_ 

learned_to_leave_body_font_size_ 

alone/ 

Die neuen Einheiten in der Spezifikation 

des W3C 

dev.w3.org/csswg/css3-values/ 

Tipps für flüssige Texte 

trentwalton.com/2012/06/19/ 

fluid-type/ 

Plug-in Fittext für automatisch angepasste 


fittextjs.com/ 

Plug-in Slabtext: Fette mehrzeilige 


www.frequency-decoder.com/ 

demo/slabText/ 

störend. Insgesamt ist Slabtext sicher 

nur für spezielle Einsatzgebiete und nur 

mit Fonts geeignet, die in diesen Größen 

auch etwas hermachen, dann aber lassen 

sich damit schöne Effekte erzielen. 

Immer mehr Flexibilisierung – unter diesem 

Schlagwort lassen sich viele der CSS3- 

Neuerungen subsumieren. Mehr Flexibilisierung 

bedeutet aber immer auch mehr 

Fälle, die man durchdenken muss. Und 

obwohl es schon lange die Möglichkeit 

gibt, durch die Verwendung von Prozentwerten 

Inhalte an das Browserfenster anzupassen, 

sind die meisten Layouts nach 

wie vor pixelbasiert. Aber das könnte sich 

ändern, zum einen durch den Druck der 

stärker divergierenden Bildschirmgrößen 

und zum anderen durch die neue Palette 

an Optionen und Steuerungsmöglichkeiten, 

die sich auch und gerade durch 

die neuen Maßeinheiten ergeben. 

Dr. Florence Maurice 


Egal wo ich bin, 

meine Daten sind schon da. 

HiDrive – 

der geniale 

Online-Speicher 

100 GB 

Speicher 

Für ein 

ganzes 

Jahr 

€/Mon.* 

JETZT 30 TAGE 

KOSTENLOS TESTEN! * 

Was macht HiDrive so genial? 

Fotos, Musik und Dokumente einfach online speichern 

Weltweiter Zugang (per Smartphone, Tablet-PC, Notebook) 

Dateien austauschen und erfolgreich zusammenarbeiten 

Optimaler Schutz vor Datenverlust – ideal als Online-Backup 

HOSTED 

IN GERMANY 

* Aktion bis 31.01.2013: HiDrive Media 100 jetzt 30 Tage kostenlos testen, danach 1 Jahr für 0,- €, danach 4,90 €/Mon., 

Mindestvertragslaufzeit 24 Monate. Einmalige Einrichtungsgebühr 9,90 €. Preis inkl. MwSt. 

Servicetelefon: 030 - 300 146 - 11

WEBDESIGN | Datenvisualisierung 

Grafik mit Pep 

Excel war gestern. Mithilfe zahlreicher Online-Services 

verwandelt man trockene Geschäftszahlen in spannende 

Grafiken, die sich wunderbar auch über die 

sozialen Netzwerke verteilen lassen. Auch die nächste 

Präsentation lässt sich damit hervorragend aufpeppen. 

Businessdiagramme, Infografiken, 

Statistikvisualisierungen? Was sich 

zunächst spröde, trocken und langweilig 

anhört, hat in den letzten Jahren eine gewaltige 

Wandlung durchlaufen. Vermutlich 

nähert man sich diesem visuellen 


Infografiken sind eine Bereicherung für 

jede Website. Wir zeigen, 

» welche Daten sich zum Visualisieren 

eignen und 

» mit welchen Tools Sie im Handumdrehen 

ansprechende Grafiken 

erstellen. 

Thema am besten über die Website, 

die wie keine andere für Visualisierung 

steht, nämlich über Pinterest. Öffnen Sie 

die Seite und geben Sie als Suchbegriff 

„Infographics“ ein. 

Sie werden eine Seite voll mit Studien 

und Statistiken finden, zu unterschiedlichsten 

Themen und in Sachen Gestaltung 

von sehr heterogener Qualität. 

Viele der neueren Ansätze machen aber 

vor allem eines sehr gut: Sie bringen das 

dargestellte Zahlenmaterial schnell und 

prägnant auf den Punkt. Und dieser Plakativismus 

ist mit daran schuld, dass Infographics 

liebend gerne auf Facebook, 

Twitter, Google+ und natürlich Pinterest 

weitergeleitet und geteilt werden. 

Online-Tools 

Die Idee ist nicht neu. Vor fünf Jahren 

schon war es eine kluge Strategie, einen 

Vortrag des Geschäftsführers auf der eigenen 

Website oder auf Expertenportalen 

zu präsentieren. Das ist nichts anderes 

als eine Zweitverwertung der Inhalte. 

Diese Strategie hat mit Social Media 

und dem täglichen Content-Bedarf des 

Online-Marketings noch mehr an Attraktivität 

gewonnen. Nur ein Problem 

gibt es dabei: Der Aufwand, aus einer 

spröden Excel-Datei eine ansehnliche 

Grafik zu machen, war stets sehr hoch. 

Die integrierten Grafikfunktionen der Tabellenkalkulation 

taugen dafür kaum, es 

musste ein Grafiker ran und das machte 

den Prozess langsam und schwerfällig. 

Diese Zeit ist vorbei. Jeden Tag erscheinen 

neue Online-Services auf dem Markt, die 

sich der Visualisierung von Daten widmen. 

In den Einstiegsversionen sind die 

meisten Tools kostenlos. 


Datenvisualisierung | WEBDESIGN 

Visual.ly 

Bislang ist Visual.ly vor allem eine Partnervermittlung. 

Kunden mit Daten treffen 

dort Designer mit Fähigkeiten. Im Marketplace 

darf man entsprechende Ausschreibungen 

platzieren. Dennoch gibt 

der Dienst schon heute einen Ausblick 

auf das gesamte Geschäftsmodell. Unter 

dem Menüpunkt Create darf der geneigte 

Nutzer aus einer Handvoll Templates 

wählen. Autorisiert er die gewählte Vorlage 

mit seinem Twitter- oder Facebook- 

Konto, dann gießt die Anwendung die 

Nutzungsdaten der Fans und Freunde 

mitsamt der eigenen Tweets und Posts in 

ein grafisch opulentes Machwerk. Im Test 

funktionierten die Templates allerdings 

immer wieder nur zum Teil. Möglichkeiten 

zur Individualisierung fehlen. 

Die mangelnde 

Möglichkeit, Bilder 

zu skalieren, ist 

ein echtes Manko 

dieses tollen Tools. 

Infogr.am 

Einen recht leichten 

Einstieg in das 

Thema findet man 

mit Infogr.am. Nach 

der Anmeldung stehen 

eine Handvoll 

Templates zur Verfü- 

Visual.ly konzentriert sich auf die Organigram, architektonischer Grundriss 

oder – und das erscheint besonders 

Visualisierung von Daten aus Facebook 

und Twitter. 

spannend – Layout-Prototypen. Das ist 

für Printdokumente ebenso einsetzbar, 

gung, die man trefflich bearbeiten kann. wie für die Vorstellung neuer Software- 

Hierfür kann man Texte, Bilder, Videos Interfaces und Websites. Mithin bietet 

und Daten auf den Server laden. Die Daten 

verarbeitet das System am besten im schiedlichsten Anlässen. Die Benutzung 

Gliffy eine gute Unterstützung zu unter- 

CSV-Format. Hier zeigt sich schnell, dass ist anfänglich kostenlos. Wer eigene Bilder 

verwenden möchte oder zusätzliche 

es einer guten 

Vorbereitung bedarf, 

damit man 

derartige Tools 

schnell einsetzen 

kann. Infogr.am 

verlangt, dass die 

X-Achse oben 

quer abgetragen 

wird, also als 

Kopfzeile der Tabelle. 

Das kann 

man zur Not auch 

noch im Tool Gliffy eignet sich zur Herstellung klassischer Flussdiagramme, 

selbst einfügen. Mindmaps oder Website-Prototypen. 

Beim Bildupload 

mangelt es dem Tool an einem Werkzeug 

zum Skalieren der Grafiken. Bei den ersten 

Versuchen sollte man sich eventuell Dollar pro Monat. 

Funktionen benötigt, startet bei 4,95 USmit 

kleineren Projekten behelfen. Das 

wäre zum Beispiel eine ansprechende Piktochart.com 

Darstellung weniger Vergleichszahlen Vermutlich der ausgereifteste Ansatz hin 

in Form eines Diagramms. Dazu gibt zur spannenden Infografik ist Piktochart. 

es unter New Chart Der Designprozess startet mit der Auswahl 

eines Templates. In der Preisliste 

zwölf verschiedene 

Kategorien. 

stehen drei Templates, tatsächlich sind 

es aktuell sieben. Ist das Template geladen, 

geht es an die Personalisierung. 

Gliffy.com 

Einen etwas anderen Das Prinzip ist immer gleich: Zur Linken 

Ansatz wählt Gliffy. befinden sich jede Menge Bausteine, 

Hier geht es weniger die einfach auf die Bühne gezogen und 

um hypermoderne dann angepasst werden. Das gilt gleichermaßen 

für den Upload eines Bildes 

Infographics als um 

verschiedene klassische 

Ansätze der tenvisualisierung. Existiert auf der Büh- 

wie auch für die Umsetzung einer Da- 

Informationsvisualisierung. 

Als da wä- 

wird es per einfachem Klick ausgewählt, 

ne bereits ein passendes Element, so 

ren Flussdiagram, kann dann gedreht oder skaliert werden 


WEBDESIGN | Datenvisualisierung 

Was soll ich visualisieren? 

Freilich braucht man nicht nur ein Tool zum Erzeugen spannender 

Infografiken, man braucht vor allem auch eine gute Idee. Klassische 

Studiendaten sind der naheliegende Anwendungszweck, 

wenngleich es vielen Unternehmen und Marketern an diesem 

Material fehlen wird. Es gibt allerdings jede Menge Quellen, aus 

denen man sich bedienen kann. Ein simples Beispiel ist Google- 

Trends: Was haben User in den letzten Monaten gesucht? Auch 

Marktentwicklungen, Bevölkerungsentwicklungen oder das Auf 

und Ab eines Aktienkurses lassen sich mit den Tools ästhetisch 

in Szene setzen. 

Doch auch im eigenen Unternehmen gibt es spannende Quellen, 

Piktochart konkurriert mit Easel.ly um den Titel des Testsiegers. die man anzapfen kann. MyMuesli analysierte zum Beispiel, wie 

die unterschiedlichen Zutaten in Beziehung zueinander stehen. 

und per Doppelklick wird der Inhalt editiert. 

Leider funktionierte zum Testzeit- 

den Verlauf einer 

man könnte auch „Crunchy Nut“ und „Erdbeer“ haben die stärkste Verbindung. Jeder 

Onlineshop könnte mit einem solchen Ansatz die eigenen 

Bestseller aufbereiten und zum Beispiel nach Geschlecht, Herkunft 

oder Alter der Käufer segmentieren (moritz.stefaner.eu/ 

punkt das Kopieren und Einfügen nicht. einzigen Messewoche 

So war es an manchen Stellen etwas 

umständlich. Dafür bietet Piktochart 

auch bereits in der kostenlosen Version 

einen Exportfilter an, der die Infografik 

als .PNG-Datei abspeichert. Die kostenlose 

Gelegenheitslösung hat neben der 

begrenzten Anzahl an Templates einen 

weiteren Nachteil: Man kann nur fünf 

Bilder auf den Server laden. Wer mehr 

will muss gleich etwas tiefer in die Tasche 

dokumen- 

tieren oder die 

Vorbereitungen 

bis hin zu einem 

anderen Firmenevent. 

Selbst die 

Entwicklung und 

Highlights der eigenen 

Facebook- 

Fanpage lassen 

projects/musli-ingredient-network/). 

Easel.ly 

funktioniert 

gut, kann 

aber keine 

Datensätze 

importieren. 

greifen: 29 US-Dollar kostet die 

Monatslizenz, 169 US-Dollar das Jahr. 

sich auf dem schicken Zeitstrahl 

abtragen. Der Basisdienst mit bis 

zu drei Timelines ist kostenlos. Bis 

Dipity.com 

Der Ansatz von Dipity ist schnell erklärt. 

Hier kann man Ereignisse an einer Timeline 

ausrichten. Diese Ereignisse werden 

in Form von Bildern, Texten oder Videos 

abgelegt. Was auf den ersten Blick recht 

monothematisch wirkt, bietet doch eine 

Reihe spannender Möglichkeiten. So 

kann man nicht nur die Entwicklung des 

gesamten Unternehmens hier abbilden, 

zu zehn Timelines gibt es für knapp 

fünf US-Dollar pro Monat und ab 

50 US-Dollar ist eine statistische Auswertung 

der Benutzerströme enthalten. 

Easel.ly 

Easel.ly ist ähnlich stark wie Piktochart. 

Tatsächlich ist die Auswahl an verfügbaren 

Templates größer, es sind derzeit 

15. Herrlich einfach funktioniert das Editieren 

Dipity arrangiert 

die Daten und 

Ereignisse an 

einer Timeline. 

der Seitenelemente und die große 

Bibliothek an Cliparts erleichtert das Visualisieren 

von Themen enorm. Derzeit 

befindet sich das Tool noch im Betastadium 

und ist daher kostenlos zu nutzen. 

Leider fehlt es dem Werkzeug an statistischen 

Fähigkeiten. Man kann hier keine 

CSV-Datei hochladen und daraus Grafiken 

machen lassen. Dafür ist man auf 

ein anderes Werkzeug angewiesen. So 

könnte man hierfür zum Beispiel Tableau 

Public verwenden. Das ist eine kostenlose 

Software zum Download, die Daten 

aus Excel visuell anspruchsvoll aufbereitet 

(www.tableausoftware.com). 

Frank Puscher 


Beste Performance zum unfassbaren Preis! 

Nur solange 

Jetzt NEU! 

der Vorrat 

reicht. 

CPU 

Leistung 

Arbeitsspeicher 

Festplatten 

Datentransfer enthalten 

ECO i5-3450 

ECO i7-3770 

ECO i7-3930k 

Intel i5-3450 

Intel i7-3770 mit HT 

Intel i7-3930k mit HT 

4x 3,10 GHz 

4 x 3,50 GHz 

6 x 3,20 GHz 

16 GB DDR3 

32 GB DDR3 

Neu! Neu! Neu! 

64 GB DDR3 

2 x 1.000 GB 

2 x 2.000 GB 

2 x 3.000 GB 

IPv4 Adresse inkl. 

IPv6 Subnetz (/64) inkl. 

Backup-Speicherplatz 

Betriebssysteme 

Admin-Panel inkl. 

50 GB 

50 GB 

50 GB 

Debian 6.0, CentOS 6.3, openSUSE 12.2 Neu! , Ubuntu 12.04, VMware vSphere 5 & Windows 2012 Neu! (19,99 € Aufpreis im Mon.) 

Plesk 11 oder Confixx 3.3 

Extras Live 24/7 inkl. 

Monatsgrundgebühr ab 

Setup-Gebühr 

Domain-Robot, DNS-System, RDNS-Verwaltung, Reboot, Rescue- und Neuinstallations-System 

44,99 € 

0,00 € 

54,99 € 

0,00 € 

99,99 € 

0,00 € 

Jetzt informieren & bestellen Tel.: 0211 / 545 957 - 330 www.webtropia.com 

vSphere 5 

PLATINUM PARTNER

WEBDESIGN | Interface Trends 

Design for Touch 

Mit Smart-TVs, Settop-Boxen und vor allem Tablets 

verschmelzen die unterschiedliche Bedienkonzepte 

von TV, Mobile und Desktop. Welche Bedeutung hat 

diese Entwicklung für das Webdesign? 

Wer den aktuellen Relaunch der 

Sportwebsite von Ran.de auf 

einem Desktop-Rechner mit großem 

Monitor betrachtet, der wird erstaunt den 

Kopf schütteln. Das Layout wirkt unausgewogen, 

ballt sich in einem schmalen 

Streifen in der Mitte und scrollt vertikal 

über gefühlte 10 Bildschirme. Es handelt 

sich bei der unglücklichen Umsetzung 

um den Versuch, einen der aktuellen 

Webdesign-Trends aufzugreifen, den 

Trend zum Single Page Layout. Die Idee 

ist simpel: Inhaltlich passende Elemente 

werden auf einer langen Seite gruppiert 

und per Anchor-Tags angesprungen. Der 

Ansatz hat ein paar Vorteile: Er bündelt 

Keywords und ist damit suchmaschinenfreundlich. 

Einmal geladen, erlaubt er 

eine schnelle Navigation zwischen den 

Seitenbereichen und funktioniert dann 

auch offline. Letzteres ist eine Anforderung, 

die vor allem aus dem Tablet-Markt 

immer häufiger zu hören ist. 

Freilich hat Single Page auch Nachteile. 

Die Ladezeit der Einzelseite steigt erheblich. 

Der Ansatz funktioniert nur für 

kleine Webvisitenkarten oder thematisch 

gruppierte Cluster. Zwar kann ein 


Interface Trends | WEBDESIGN 

dynamisches Nachladen die Seite noch 

weiter verlängern und ihr – ähnlich wie 

im Blog – einen chronologischen Aufbau 

ermöglichen, doch das funktioniert 

nur für bestimmte Themen wie zum Beispiel 

Nachrichten. 

Was das Beispiel Ran.de aber deutlich 

zeigt, ist die Tatsache, dass das Single 

Page Konzept nur dann gut funktioniert, 

wenn es auch die verfügbare Bildschirmfläche 

ausnutzt. Das Layout muss also 

Single Page und responsive sein. Einfach 

nur schmale vertikale Seiten aufzusetzen, 

ist kein nachhaltiges Konzept. 

Responsive Design 

War vor zwei Jahren die dynamisch sich 

anpassende Website noch die Kür des 

Webdesign, so hat sich die Landschaft 

inzwischen gewandelt. Responsive Design 

ist eine Grundanforderung an große 

Websites geworden. Das liegt vor allem 

am Siegeszug der Tablets. Während man 

Smartphones ohne Weiteres eine dezidierte 

Mobile-Variante mit abgespecktem 

Inhalt anbieten kann, so will der Tablet 

User selbst entscheiden dürfen, ob er 

zur mobilen oder originären Website 

geht und Letztere sollte sich an seinen 

Bildschirm anpassen. Mehr noch: Safari 

unter iOS 6 maskiert sich als Desktop- 

Browser. Man kann ihn aber über eine 

Device-Abfrage erkennen. 

Christian Kuhn, App-Entwickler und 

Gründer der Agentur Nuisol, geht das 

aber nicht weit genug. „Responsive Design 

macht nicht beim Layout halt. Auch 

bei den Inhalten muss genau überlegt 

werden, was welcher Nutzer in welchem 

Kontext benötigt.” Der Verzicht auf ein 

Flash-Element wenn das iPad anrückt, ist 

nur die banalste Form dieser Einsicht. 

Apropos Single Page: War auf Websites 

das horizontale Scrollen lange Zeit verpönt, 

hat es innerhalb von Apps und auf 

mobil-optimierten Webseiten eine neue 

Rechtfertigung gefunden. Ein gutes Beispiel 

hierfür ist die gelungene Website 

vom ZDF. Webdesign-Guru Vitaly Friedman 

lobt: „Das ist ein prima Beispiel für 

die Verhaltensänderung bei den Nutzern, 

die das Touchcomputing auslöst.“ Das 

ZDF arbeitet an vielen Stellen im klassischen 

App-Design. Die Seiten scrollen 

also auf horizontaler und vertikaler Achse. 

Horizontal dient zur Themenauswahl 

AIR-Display 

Wer regelmäßig für das iPad produziert 

und seine Seiten testen will, sollte sich 

Avatrons Air-Display anschauen. Es 

handelt sich um die Dreierkombination 

von iPad-App, installiertem Desktop- 

Programm und Chrome-Extension. Sind 

PC (Windows und MacOS) und iPad per 

WLAN verbunden, dient das iPad als Zusatzbildschirm 

und die Inhalte lassen 

sich einfach herüberschieben. Die App 

kostet neun US-Dollar. Eine etwas einfachere 

Alternative findet sich auch in 

der Creative Cloud von Adobe, sie heißt 

Edge Inspect. 

html.adobe.com/edge/inspect/ 

avatron.com/apps/air-display 

und dann geht es buchstäblich „hinunter“, 

um ein Thema zu vertiefen. Würde 

man die Website aus der Vogelperspektive 

betrachten, sähe sie ein Stück weit aus 

wie ein Kreuzworträtsel. 

Touch the web 

Geht es nach den Machern von Windows 

8 werden die Nutzer immer mehr Arbeitsprozesse 

durch Berührung des Bildschirms 

leisten. In Hybrid-Rechnern, die 

Noch ist kaum 

absehbar, welchen 

Einfluss die 

Gestensteuerung 

auf das Webdesign 

haben wird. 


WEBDESIGN | Interface Trends 

gleichzeitig Tablet und Notebook sind, 

werkeln heute bereits Prozessoren der 

neuesten Generation, sie verfügen über 

mehr als vier GByte Arbeitsspeicher und 

große Festplatten. Alles Leistungsmerkmale, 

die aktuellen Tablets fehlen. 

Angesichts der Unsicherheit, ob User 

nun mit Notebooks oder Tablets auf Websites 

zugreifen, bleibt den Webdesignern 

derzeit wenig übrig, als die Seiten so zu 

optimieren, dass Sie für beides funktionieren. 

„Wir haben unser gesamtes 

Layout der Website vereinfacht“, erläutert 

Martin Hellinger von der ING Diba, 

„Einfachheit ist für uns Usability.“ Im 

Kern bedeutet das: große Abstände zwischen 

klickbaren Elementen, damit diese 

zur Fingerbedienung taugen. Außerdem 

gilt die vollständige Abkehr von Mouse 

Over, was es auf dem Touchscreen nicht 

gibt. Mausberührungseffekte haben nur 

noch einen ästhetischen, aber keinen 

Nutzungswert mehr. 

Wer für Touch designt, sollte sich verstärkt 

um den unteren Bildschirmrand 

kümmern, der für die Daumenbedienung 

reserviert ist. Diese Bereiche werden 

bislang vernachlässigt. Hingegen ist 

die obere Mitte zwar zur Darstellung von 

Informationen, aber nicht für die Interaktion 

geeignet. Wer mit dem Finger oben 

in der Mitte berühren will, verdeckt mit 

der Hand den Rest der Seite. Der Trend 

zur Bildschirmberührung treibt aber auch 

ganz neue Blüten. Mit den kostenlosen 

Javascript-Klassen Zoomooz lassen sich 

Websites erstellen, die rein- und rauszoomen. 

Das ähnelt der Art, wie User mit 

Smartphones normale Websites benutzen. 

Sie zoomen heraus, um eine Übersicht 

zu sehen und für die Details hinein. 

Das ist vom Ansatz her ähnlich einer Präsentation 

mit dem populären Tool Prezi. 

Die französischen 

Sozialisten haben 

den Effekt bereits 

letztes Jahr 

im Wahlkampf 

eingesetzt. Im 

Grunde vermisst 

die Designerzunft 

Pageflip auf 

dem iPad ist die 

logische Fortsetzung 

des eBook- 

Gedanken. 

Mufin erkennt das laufende Fernsehprogramm 

am Ton und kann direkt zu 

passenden Inhalten verlinken. 

ein Tool wie Flash, sie weiß es nur nicht. 

Natürlich müsste ein neues Flash auf offenen 

Standards aufsetzen und HTML5 

exportieren, aber sollte ebenso einfach 

zu bedienen sein wie das alte, dann 

käme man wesentlich schneller zu neuen 

Interface-Experimenten. Immerhin: 

In Kerndisziplinen wie Animation holt 

HTML5 langsam auf. Die Scriptbibliothek 

Turn.js erstellt blätterbare Magazinseiten 

im Pageflip-Stil. Noch läuft das auf dem 

iPad recht hakelig, aber die Idee blättern 

statt swipen hat Charme. Da die User 

aber mit beiden Varianten noch nicht 

immer rechnen, sollten sie hinreichend 

erklärt werden. Für Pageflip eignet sich 

die eingerollte Ecke, für Swipe schneidet 

man einfach ein Objekt seitlich an, um 

zu zeigen, dass es dort weitergeht. 

Eine spannende Frage für die Geschwindigkeit 

der Entwicklung ist, ob Touch- 

Computing auf Tablets beschränkt bleibt 

oder auch auf Desktops übergeht. Ein 

permanenter Wechsel zwischen Touch, 

Maus und Keyboard scheint ergonomisch 

weit hergeholt. Eventuell kann hier die 

berührungsfreie Gestensteuerung eine 

Brücke schlagen. Die Technologie dafür 

liegt vor. Microsofts Raumkamerasystem 

Kinect verfügt über stabile Windows- 

Treiber und wird von Unternehmen bereits 

bei der Präsentationstechnik eingesetzt 

(siehe Links). Ein kleines Kästchen 

namens Leap bringt Gestensteuerung auf 

jeden PC und das für nur 70 Euro. Im 

Büro scheint eine Verwendung Zukunftsmusik, 

bei Systemen, die zum Beispiel 

zum Schutz gegen Vandalismus ohnehin 

berührungsfrei ausgelegt sind – etwa hinter 

Schaufenstern – ist ein Einsatz denkbar. 

Will sagen: Die Filiale von Görtz in 

der Innenstadt bietet nach Ladenschluss 


Interface Trends | WEBDESIGN 

Die Wahlkampf- 

Website der 

französischen 

Sozialisten zoomt 

dem Nutzer 

entgegen. 

im Schaufenster Zugang zu Görtz.de 

oder zur eigenen Facebook-Seite. 

Auch Googles digitale Brille arbeitet mit 

Gestenerkennung. Ein Problem hierbei 

könnte sein, dass der Nutzer nicht genau 

Links zum Thema 

Liste von Responsive Designs 

econsultancy.com/de/blog/ 

11062-11-gorgeous-examplesof-responsive-design?utm_ 

medium=email&utm_source= 

daily_pulse 

Beispiele von Single Page Designs 

www.noupe.com/design/singlepage-websites-examples-andgood-practices.html 

Der Einfluss von Touch auf das Formular-Design 

www.uxbooth.com/blog/mobileform-design-strategies/ 

Daumen-Design 

www.netmagazine.com/features/ 

designing-touch 

Pageflip für HTML 5 

https://github.com/blasten/ 

turn.js/wiki/Reference 

Zoomooz 

janne.aukia.com/zoomooz/ 

erkennt, wann er einen Button klickt, 

oder nicht. „Berührungsfreie Steuerung 

kann problematisch sein, wenn das taktile 

Feedback fehlt“, meint Wolfgang 

Henseler, Usability-Experte und Interface-Designer. 

Designing for Second Screen 

Apropos Facebook: Derzeit macht eine 

Tendenz von sich reden, die auch das 

Webdesign und vor allem die Inhaltestrategie 

nachhaltig beeinflussen könnte. 

Die Rede ist vom Second Screen, also 

der Nutzung eines Zweitbildschirms 

während des Fernsehens. Bereits rund 50 

Prozent aller Nutzer zwischen 14 und 49 

nutzen Second Screens regelmäßig. 

Vordergründig wird diese Entwicklung 

gerne mit dem Phänomen SocialTV 

gleich gesetzt. User schauen fern und 

kommentieren gleichzeitig auf Facebook 

oder in entsprechenden Apps. Zur ersten 

Ausgabe von Wetten Dass mit Markus 

Lanz wurden rund 30.000 Tweets versendet. 

SocialTV ist aber nur eine der 

möglichen Nutzungsvarianten und Implikationen 

von Second Screen. User werden 

auch die Websites von Herstellern 

flankierend zum Werbespot besuchen, 

sie werden entsprechende Begriffe bei 

Google suchen oder direkt im Online- 

Shop kaufen. Da all diese Tätigkeiten mit 

dem Tablet oder Smartphone geschehen, 

sollte man darauf achten, dass die korrespondierenden 

Inhalte entsprechend 

optimiert sind. 

Apropos korrespondierend: Die Berliner 

Magix GmbH besitzt eine Tochter namens 

Mufin, die ein System entwickelt 

hat, das die User-Interaktion komplett 

obsolet macht. Mufin erkennt die laufende 

Fernsehsendung am Ton und kann 

– wenn der Nutzer es erlaubt – automatisch 

ergänzende Inhalte aufrufen. 

Und das ist nur der Anfang. Digitale 

Assistenzdienste wie Siri nutzen schon 

heute die Sprache als Interface und umgehen 

Auswahlmenüs oder Konfiguratoren. 

Aufgabe des Designers wird dann 

sein, seine Angebote so zu gestalten, 

dass sie von diesen Diensten optimal 

widergegeben werden. Ein Webfrontend 

braucht dieser Ansatz nicht mehr. 

Frank Puscher 


WEBENTWICKLUNG | PHP absichern 

Server-Schutz 

Mit PHP lassen sich 

tolle Anwendungen 

programmieren. Leider gerät 

die Programmiersprache aber 

auch immer wieder wegen Sicherheitslücken 

in die Schlagzeilen. Nachlässigkeiten 

in der Entwicklung eröffnen Angreifern Tür und Tor. 

Sichern Sie Ihre Anwendung ab! 

Natürlich will jeder Programmierer 

möglichst schnell seine Anwendung 

umsetzen und sie auf dem Server 

zur Verfügung stellen. Gedanken zur 

Sicherheit stehen dabei üblicherweise 

nicht im Vordergrund. Und nicht immer 

ist auch gleich offensichtlich, dass der 

gerade geschriebene Code eine Sicherheitslücke 

bedeutet. Dabei lassen sich 

viele Hacking-Versuche durch einfache 

Maßnahmen und etwas mehr Arbeit 

leicht verhindern. 


Sichern Sie Ihre PHP-Entwicklung ab. 

Lesen Sie, 

» wie Sie Ihren Webserver abschirmen, 

» wie Sie sich vor unbefugten Nutzereingaben 

schützen und 

» welche Verzeichnisstrukturen Ihnen 

dabei helfen. 

Nutzereingaben validieren 

Im Quelltext vieler Programme ist ein 

geradezu grenzenloses Vertrauen gegenüber 

dem Anwender spürbar. Er darf in 

Formulare eingeben, was er will. Bösartige 

Nutzer oder Hacker scheint es in der 

Welt dieser Entwickler nicht zu geben. 

Hüten Sie sich davor, den gleichen Fehler 

zu machen und trauen Sie niemals Nutzereingaben, 

die Sie nicht selbst 

validiert haben. Nehmen Sie als 

Beispiel ein Formular, in dem die 

Nutzer das eigene Geburtsdatum 

eintragen können. Natürlich 

könnten Sie einfach jegliche 

Eingabe abfangen und 

dann weiterverarbeiten. 

Deutlich sicherer (wenn auch mit höherem 

Aufwand) ist die Validierung der 

Eingabe gegenüber erlaubten Zeichen. 

In diesem Beispiel erwarten Sie also die 

Angaben zum Tag in zweistelliger Form 

mit Werten zwischen 1 und 31. Die Angabe 

des Monats mit Werten zwischen 1 

und 12 und schließlich eine vierstellige 

Jahresangabe. Ihr wichtigster Begleiter 

sind dabei reguläre Ausdrücke. Sofern 

Sie sich damit noch nicht beschäftigt 

haben, holen Sie dies am besten schleunigst 

nach. Quellen und Tutorials gibt es 

dazu im Internet genügend. Zunächst 

wird das Finden des passenden regulären 

Ausdrucks etwas schwierig sein. Ist 

dieser aber gefunden und liefern Sie eine 

passende Fehlermeldung für den Anwender 

zurück, räumen Sie SQL-Injektionen 

wenig Raum ein. Überprüfen Sie also bei 

allen Eingaben des Nutzers in Form von 

POST oder GET die erlaubten Zeichen, 

die Länge der Eingabe, den Zahlenraum 

bei Zifferneingaben. 

Eine Validierung 

für das 

genannte Beispiel könnte so aussehen: 

if ( ! preg_match( „/^[0-9]{ 1,2} 

$/“, $_GET[‚tag‘] ) ) 

{ 

// Fehlermeldung 

} 

if ( ! preg_match( „/^[0-9]{ 1,2} 

$/“, $_GET[‚monat‘] ) ) 

{ 


} 

if ( ! preg_match( „/^[0-9]{ 4} $/“, 

$_GET[‚jahr‘] ) ) 

{ 


} 

PHP bleibt PHP 

Nicht immer werden Sie als Programmierer 

eines Skripts auch auf die Konfigura- 


PHP absichern | WEBENTWICKLUNG 

tion des Webservers Einfluss haben. 

Ist dieser fehlerhaft eingerichtet, ist es 

durchaus möglich, dass ein Nutzer sich 

den Inhalt von Verzeichnissen ansehen 

kann. Darunter dann auch die Dateien 

und Ordner Ihrer PHP-Anwendung. Der 

Browser selbst zeigt indes kommentarlos 

jede Datei an, die als reiner Text einzusehen 

ist. Angenommen Sie lagern die Zugangsdaten 

zur Datenbank einer Anwendung 

in einer Konfigurationsdatei ab, die 

der Nutzer an seine Gegebenheiten anpassen 

kann. Gar nicht selten ist etwa: 

 

 

 

Ihre Suche nach : 

 

 

Deaktivieren Sie 

„böse“ PHP-Komponenten! 

Wenn Sie es noch nicht getan haben, 

schalten Sie in der Einstellungsdatei von 

PHP unbedingt die Option Register Globals 

aus. Viele Hoster verbieten deren 

Verwendung ohnehin. Bei einem eigenen 

Root-Server müssen Sie sich indes selbst 

darum kümmern. Eigentlich ist die Funktion 

für die schnelle Entwicklung von PHP- 

Anwendungen eine tolle Möglichkeit. Ein 

Aufruf einer URL nach dem Schema http:// 

ihre_seite.tld/index.php?var=1 würde bei 

eingeschalteter Funktion ermöglichen, 

direkt auf den Wert der Variablen mittels 

$var zuzugreifen. Sie müsste also nicht 


WEBENTWICKLUNG | PHP absichern 

erst definiert werden. Unglücklicherweise 

kann diese Option nicht wahlweise 

aktiviert werden. Mit anderen Worten 

kann jeder Angreifer beliebige Variablen 

an jedes Skript senden, dessen Namen 

er kennt oder nur erahnt. Rufen Sie zur 

besseren Absicherung die Datei php.ini 

Ihrer Installation auf und setzen Sie dort 

explizit das Statement register_globals = 

Off. Oder Sie setzen ganz auf die Datei 

.htaccess und fügen dort php_flag register_globals 

0 ein. 

Sinngemäß gilt dies auch für die an und 

für sich sinnvolle Funktion der Magic 

Quotes. Diese maskiert eigentlich alle 

von außen an ein Skript übergebenen 

Textfragmente und setzt vor diese einen 

Backslash. Bei eingeschalteter Funktion 

würde aus „Hallo Welt“ ein \ „Hallo 

Welt\“. Der Mechanismus ist aber nicht 

hinreichend genug als Schutz gegen 

SQL-Injektionen, zum anderen schafft 

ein Skript unnötige Probleme, wenn Sie 

sich auf aktivierte Magic Quotes verlassen, 

es aber auf einer anderen Serverumgebung 

ausführen. Deswegen am besten 

in der php.ini ausschalten: 

; Magic quotes für GET/POST/Cookie 

Daten 

magic_quotes_gpc = Off 

; Magic quotes für Daten aus SQL 

magic_quotes_runtime = Off 

magic_quotes_sybase = Off 

Während der Entwicklung eines Skripts 

kann die automatische Darstellung aller 

Fehler direkt auf dem Bildschirm hilfreich 

sein. Sie erhalten damit eine Rückmeldung, 

wenn es für den auftretenden 

Fehler keine Pufferung und Ausgabe einer 

individuellen Fehlermeldung gibt. 

Auf einem Produktivsystem schalten Sie 

in der php.ini aber unbedingt den Wert 

display_errors = Off. Denn hier haben 

die geschwätzigen Rückmeldungen aus 

Sicherheitsgründen nichts zu suchen. 

SQL-Injektionen vorbeugen 

SQL-Injektionen gehören sicherlich zu 

den bekannteren Sicherheitslücken in 

Anwendungen. Regelmäßig ist von ihnen 


PHP absichern | WEBENTWICKLUNG 

im Zusammenhang mit Problemen die 

Rede. SQL-Injektionen können immer 

dann auftreten, wenn Argumente und 

Daten, die an die Datenbank übergeben 

werden, ungeprüft weitergereicht 

werden. Verringern können Sie dieses 

Risiko durch die Verwendung des PHP- 

Moduls MySQLi. Mit der Funktion sqli_real_escape_string können Sie das 

Datenbankkommando maskieren. Um 

my- 

etwa aus der Tabelle mitglieder 

einen 

Benutzernamen auszulesen, wäre der 

Funktionsaufruf etwa so: 

$username = mysqli_real_escape_ 

string( $GET[‚username‘] ); 

mysql_query( „SELECT * FROM 

mitglieder WHERE username = ‚“. 

$username.“‘“); 

Eine andere Option sind sogenannten 

Prepared Statements. Diese können SQL- 

Injektionen wirkungsvoll verhindern, 

weil vor Ausführung des Datenbank- 

Kommandos die übergebenen Parameter 

überprüft werden. Rein funktional schickt 

eine solche vorbereitete Abfrage diese 

zunächst an den Server, wo sie validiert 

wird. Die Abfrage enthält an den Stellen, 

wo Sie Variablen auslesen oder übergeben 

wollen, Platzhalter. Diese lösen Sie 

dann später auf und übergeben sie an das 

Statement. Erst dann werden die Variablen 

in die Datenbank geschrieben. Das 

sieht dann etwa so aus: 

// Statement Objekt erzeugen 

$stmt = $db->stmt_init(); 

// Statement vorbereiten 

$stmt = prepare( „SELECT * FROM 

mitglieder WHERE id = ?“ ); 

// Statement an Parameter binden. 

Wert i steht fuer Integer 

$stmt->bind_param( „i“, $id ); 

// Statement ausführen 

$stmt->execute(); 

In diesem Beispiel können Sie die Datenbank 

mitglieder abfragen, wobei Sie das 

Feld id berücksichtigen. Genutzt wird 

dann innerhalb des Statements die Va- 

riable $id. Auch wenn die geschilderten 

Methoden gut geeignet sich, um SQL-Injektionen 

nahezu auszuschließen, sollten 

Sie sich dennoch überlegen, ob Sie die 

Gültigkeit von Variablen und Parametern 

nicht zusätzlich durch entsprechende 

Schleifen überprüfen. 

Referenzen außerhalb der 

Webdokumente ablegen 

Generell liegen alle Dokumente, die extern 

über den Webserver erreichbar sein 

sollen, im Verzeichnis /var/www. In diesem 

Ordner müssen auch alle PHP-Dateien 

liegen, die über den Browser aufgerufen 

werden. Dies gilt allerdings nicht für 

andere Dateien. Egal ob es nun Grafiken 

oder andere Ressourcen sind (zum Beispiel 

auch die Parameter für die Datenbank-Verbindung), 

sie können außerhalb 

dieser Hierarchie gespeichert werden. 

Wenn Sie diese also in ein Verzeichnis 

unter /var/ verlagern, können 

diese von außen nicht mehr erreicht 

werden. Selbst wenn das Browsing für 

Verzeichnisse aktiviert sein sollte. 

Achten Sie auf den 

Datenbanknutzer! 

Wer mit seiner PHP-Anwendung auf 

eine Datenbank zugreift, um deren 

Inhalte zu verändern oder auszulesen, 

tut dies über einen Datenbanknutzer. 

Im Backend der Datenbank sollten 

die Rechte dieses Nutzers geprüft 

und nach Möglichkeit soweit wie 

möglich beschränkt werden. Die Privilegien, 

Datenbankkommandos auszuführen, 

sind meist genauso überflüssig, 

wie auf das Dateisystem des Servers 

zuzugreifen. Die Erlaubnis file_priv etwa 

darf dem Datenbanknutzer, mit dem Ihr 

Skript kommuniziert, besser nicht zuge- 

wiesen werden, um den Zugriff auf das 

lokale Dateisystem zu vermeiden. 

Sichern Sie Ihre Variablen! 

Um zu vermeiden, dass Variablen durch 

die Eingabe des Benutzers bereits verwendet 

werden können, bevor sie eigentlich 

zum Einsatz kommen, sollten 

Sie diese vorab definieren und einen 

Wert zuweisen. Sichern Sie deshalb alle 

Variablen, die Sie global in Ihren Skripten 

benötigen, dadurch ab, dass Sie ihnen 

einen Wert zuweisen. 

$logged_in = 0; oder $guest=0 

Wichtig ist dies immer dann, wenn durch 

diese Bedingung oder Variable etwa der 

Zugriff auf einen Inhalt definiert wird. 

Schließlich wollen Sie den Nutzer ja 

nicht jedes Mal erneut zur Eingabe seines 

Passwortes auffordern, sondern den 

Zustand zwischenspeichern. 

Dieser Artikel konnte längst nicht alle 

potenziellen Schwachstellen in der Entwicklung 

von PHP-Skripten abdecken. 

Aber wenn Sie beim Programmieren unsere 

Tipps beherzigen, haben Sie bereits 

viel für die Sicherheit der Anwendungen 

beigetragen. Stephan Lamprecht 


Testen Sie jetzt 3x Internet Magazin und erhalten Sie 

Sofort zu 

Nutzen Sie weiter die Vorteile des Internet Magazin-Premium-Abos! 

Ja, ich nehme Ihr Super-Testangebot an. Ich möchte drei Ausgaben des Internet Magazins 

testen. Dazu erhalte ich als Prämie wahlweise den 32 GB USB-Stick, den Amazon-Gutschein 

im Wert von10Euro oder den Eargrind-Kopfhörer für nur 14,99 €. 

Sollten Sie eine Woche nach Erhalt des 3. Heftes nichts von mir hören, freue ich mich auf 

die regelmäßige Zustellung per Post frei Haus 12 Ausgaben proJahr für nur 52,90. 

INTERNET MAGAZIN-TESTABO 

JA, ich möchte die nächsten drei Ausgaben des Internet Magazins testen. Außerdem erhalte ich 

wahlweise als Prämie gratis 

❏ den 32 GB USB-Speicherstick (K970) für 14,99 Euro (Österreich 19,99 Euro*,Schweiz 29,99 sfr*) 

❏ den 10 Euro-Amazon-Gutschein (K971) für 14,99 Euro (Österreich 19,99 Euro*,Schweiz 29,99 sfr*) 

❏ den Eargrind-Kopfhörer (K972) für 14,99 Euro (Österreich 19,99 Euro*,Schweiz 29,99 sfr*) 

Sollten Sie eine Woche nach Erhalt des 3. Heftes nichts von mir hören, freue ich mich auf die 

regelmäßige Zustellung per Post frei Haus -12Ausgaben /Jahr für nur 52,90 Euro) 

Name, Vorname 

E-Mail (Für Korrespondenzzwecke) 

Straße, Nr. 

PLZ, Ort 

Gewünschte Zahlungsweise: Bequem durch Bankeinzug Gegen Rechnung 

Dafür erhalte ich 1Heft gratis (Nur im Inland!) 

BLZ 

Kontonummer 

Sofort online bestellen: 

www.internet-magazin.de/ 

angebot 

Per Post 

Internet Magazin 

Kunden-Service 

Postfach 180 

77649 Offenburg 

oder faxen/anrufen: 

Fax: 0781 -846191 

Tel: 0781 -639 45 48 

✃ 

Geldinstitut 

Datum, Unterschrift 

Ändert sich meine Adresse, erlaube ich der Deutschen Post AG, dem Verlagmeine neue Anschrift mitzuteilen. Die Prämie wird NACH erfolgter 

Bezahlung des Test-Abo-Preises zugesandt. Sollte der abgebildete Artikel nicht mehr lieferbar sein, erhalten Sie einen qualitativ gleichwertigen 

Ersatzartikel. Das Jahres-Abonnement ist nach Ablauf des ersten Jahres jederzeit kündbar. WEKA MEDIA PUBLISHING GmbH, 

Richard-Reitzner-Allee 2, 85540 Haar,Handelsregister München, HRB 154289. *Folgeabopreise siehe Impressum 

Ich bin damit einverstanden –jederzeit widerruflich-, dass mich der VerlagWEKA MEDIA PUBLISHING künftig per E-Mail und 

telefonisch über interessante Vorteilsangebote informiert. 

WK30i2M02 

Dieses und weitere interessante 

Angebote finden Sie auch unter 

www.wekashop.de 

Gleich Coupon

eine tolle Prämie dazu! 

Gleich online bestellen unter: 

www.internet-magazin.de/angebot 

greifen! 

Ab jetzt 

5€ 

günstiger! 

Jetzt nur 14,99 € 

statt 19,99 € 

NEU! 

3x Internet Magazin 

plus 32 GBSpeicherstick oder Eargrind- 

Kopfhörer oder 10 Euro-Amazon- 

Gutschein ab €14,99 

32 GB USB-Stick 

Der Speichergigant für den Alltag 

Der 32 GB USB-Stick ist angenehm klein, 

bietet aber genügend Speicherplatz für 

IhreDaten, wie etwa32.000 MP3s, 60.000 

Fotos, 12 Stunden Film oder eben 

32 Gigabyte Daten. 

Amazon-Gutschein 

im Wert von 10,- Euro 

Ein Heft GRATIS bei Bankeinzug! 

SATTE 

32 GB 

Wählen Sie 

eine dieser 

attraktiven 

Prämien! 

TOP-PRÄMIE 

DES MONATS! 

EARGRIND 

Kopfhörer 

Musikgenuss der 

hochwertigen Art. 

Der RAIKKO ® EARGRIND Kopfhörer 

verbindet alle Eigenschaften 

in einem ausgewogenen 

Verhältnis: Starker Bass ohne 

Verlust der Höhen. 

• Lautstärke: 110 dB 

• Frequenzbereich: 20~20.000 Hz 

• Kabellänge: 35 cm +1,4 m 

Verlängerungskabel 

• Anschluss: 3,5 mm Klinke 

NEU! 

ausfüllen und einsenden oder online bestellen unter www.internet-magazin.de/angebot

WEBENTWICKLUNG | MySQL 5.6 und NoSQL 

Platzhirsch 

Mit der Version 5.6 der quelloffenen Datenbank 

MySQL liefert der Anbieter maximale Abwärtskompatibilität 

mit punktuellen 

Verbesserungen 

an all den kritischen 

Stellen. 

Seit der Akquisition von Sun Microsystems 

durch Oracle hat die quellenoffene 

MySQL-Datenbank, der Platzhirsch 

unter den SQL-Datenbanken, die eigene 

Position vor allem im Einstiegsbereich 

und im Mittelfeld für professionelle Datenbanken 

enorm gefestigt. Da praktisch 

allen Unix-Distributionen ohne Ausnahme 

standardmäßig das quelloffene 

Webmaster-Paket bestehend aus Apache 

Webserver 2.4.x, PHP 5.4.x und 

eben MySQL 5.6 beiliegt, konnte My- 

SQL auch die größte Verbreitung unter 

den SQL-Datenbanken erreichen 

und ist die meist genutzte quelloffene 

Datenbank weltweit. Obwohl MySQL- 

Anwender in den letzten Jahren immer 

öfter an die Leistungsgrenzen von My- 

SQL stoßen mussten, hat diese beliebte 

relationale Datenbank an ihrer Popularität 

nichts verloren und kann auf 65.000 

Downloads pro Tag verweisen. 

NoSQL in MySQL 

Immer mehr Website-Betreiber, insbesondere 

im Bereich des E-Commerce, 


MySQL ist die meist genutzte quelloffene 

Datenbank. Lesen Sie, 

» was die neue Version zu bieten hat 

» und was sich hinter NoSQL verbirgt. 

kommen mit konventionellen relationalen 

Datenbanken nicht mehr aus. Das 

explosionsartige Wachstum an Datenvolumen, 

die Mehrdimensionalität der Datenstrukturen, 

gekoppelt an die Notwendigkeit, 

Datenbankabfragen ungeachtet 

ihrer Komplexität absolut verzögerungsfrei 

auszuführen, lassen konventionelle 

RDBMS an ihre Grenzen stoßen. Wenn 

es länger dauert, die Daten aus der Datenbank 

zu extrahieren, als diese Daten 

benötigt werden, wird das ganze Konzept 

einer Datenbank ad absurdum geführt. 

Traditionelle, also strukturierte, Datensätze 

lassen sich sehr gut in einer SQL- 

Datenbank erfassen und verwalten (vorausgesetzt, 

dass die Menge der Daten 

die Serverkapazitäten nicht übersteigt). 

Nicht strukturierte Daten wie die Messwerte 

einer mobilen App eines Smartphones 

oder die Klickströme einer 

Webanwendung lassen sich in relationalen 

Datenbanken nicht wirklich 

effizient handhaben. 

Unhandlich große Datenbestände, im 

Fachjargon „Big Data“ genannt, machen 

Website-Betreibern insbesondere 

im Bereich des E-Commerce neuerdings 

zu schaffen. 

Betreiber von Web-Shops sammeln detaillierte 

Daten über das Klickverhalten 

der Käufer, doch wenn die Auswertung 

der Daten nicht schnell genug stattfinden 

kann, weil die Datenbank zu lange 

braucht, um Abfragen auszuführen, 

kann man dem Webshop-Besucher nicht 

rechtzeitig Produktempfehlungen anzeigen, 

bevor er die Seite wieder verlässt. 

Dadurch geht möglicherweise Umsatz 

verloren. Hinzu kommen Herausforderungen 

im Hinblick auf die Skalierbarkeit 

einer reinen SQL-Datenbank, insbesondere 

bei einer hohen Anzahl gleichzei- 


MySQL 5.6 und NoSQL | WEBENTWICKLUNG 

tiger Verbindungen. Leistungsengpässe 

bei RDBMs entstehen zwangsläufig dadurch, 

dass sich komplexe Datenstrukturen 

in strukturierten Tabellen einer 

vorab definierten Größe nicht effizient 

verwalten lassen. Wie konstruiert man 

überhaupt ein Datenbankschema, wenn 

noch gar nicht bekannt ist, welche Daten 

erfasst werden sollen? Hier kommt eben 

NoSQL ins Spiel. 

Eine NoSQL-Datenbank benutzt kein 

festes, vorab definiertes Datenbankschema. 

Die Datensätze haben eine variable 

Anzahl von Einträgen, um eine höhere 

Effizienz im Umgang mit Ressourcen 

der Datenbankserver zu ermöglichen. 

Sowohl die Speicherkapazität als auch 

die Rechenleistung lassen sich durch das 

Hinzufügen zusätzlicher Serverknoten zur 

Laufzeit erweitern. Anstatt auf die Verfügbarkeit 

gemeinsam genutzter Hardware 

(etwa eines SAN-Speichers) zu warten, 

greift jeder Server auf eigene, lokal vorhandene 

Komponenten zu und erzielt dadurch 

wesentlich geringere Latenzzeiten 

sogar auf deutlich günstigerer Hardware. 

Beim partitionierten Datenspeicher einer 

NoSQL-Datenbank handelt es sich nicht 

mehr um einen monolithischen, zentral 

zu verwaltenden Block. 

Das NoSQL-Konzept bevorzugt eine 

extrem hohe Leistung, allerdings auf Kosten 

der Datenintegrität. Mit dem lange 

ersehnten Update von MySQL auf die 

Version 5.6 versucht Oracle, das Beste 

aus beiden Welten in einem vertrauten 

Produkt zu verbinden. 

APIs, die vielen nützlichen Erweiterungen 

der InnoDB-Funktionalität sowie wichtige 

Optimierungen im Bereich der Partitionierung, 

Replizierung und Sicherheit markieren 

dieses Update als einen wichtigen 

Meilenstein in der Evolution dieser beliebten 

kostenfreien Datenbank. 

Auf Grund der steigenden Relevanz sozialer 

Netze entstehen große Mengen 

unstrukturierter Daten, welche sich nur 

schwer in relationalen Datenbanken wie 

MySQL handhaben lassen. Dabei ist es 

für die Betreiber von E-Commerce-Websites 

immer wichtiger, massiv viele gleichzeitige 

Zugriffe auf große Datenbestände 

in akzeptabel kurzer Zeit durchzuführen, 

um das Besucherverhalten in Echtzeit lenken 

zu können. Um Herausforderungen, 

nicht strukturierte Daten und SQL-Leistungsengpässe 

zu entschärfen, hat Oracle 

MySQL in der Version 5.6 mit einer 

NoSQL-Schnittstelle ausgestattet (siehe 

Kasten „SQL und NoSQL: Was hinter 

dem Namen steckt“). 

Die wichtigsten Optimierungen in My- 

SQL 5.6 betreffen Zugriffe über das Memcached-API 

auf InnoDB-Tabellen. Wer 

aus der NoSQL-Funktionalität in MySQL 

5.6 Nutzen ziehen möchte, muss sich 

daher mit InnoDB anfreunden. Oracle 

Rundum erneuert 

Das Update auf die Version 5.6 bringt 

zahlreiche strategische Verbesserungen, 

allen voran eine NoSQL-Schnittstelle und 

eine deutlich höhere Abfrage-Performance. 

Die neuen NoSQL-artigen memcached- 

MySQL ist die populärste quelloffene 

Datenbank der Welt. 



implementierte Memcached für InnoDB 

als einen Daemon (einen Hintergrundprozess), 

der sich in Form eines Plug-ins 

in den MySQL-Prozess einhängt. Das 

Memcached-Protokoll wurde hierbei auf 

die native InnoDB-API gemappt. Da der 

Memcached-Daemon nun aber im selben 

Speicherbereich wie der Hauptprozess 

abläuft, sind die Latenzzeiten minimal 

und das, obwohl MySQL die Skalierbarkeit 

von InnoDB bereits in der einfachsten 

Konfiguration der Produktionsumgebung 

voll ausloten kann. Gleichzeitig kann 

MySQL problemlos die Auswertung von 

SQL-Abfragen fortsetzen, sodass dem 

Anwender das ganze Spektrum moderner 

Funktionalität der InnoDB-Speicherengine 

(darunter Foreign Keys, XA-Transaktionen 

und komplexe JOIN-Operationen) 

zur Verfügung steht. 

NoSQL bedeutet so viel wie „not only 

SQL“, oder anders ausgedrückt „SQL plus 

neue Konzepte“. 

SQL ist eine sequenzielle Datenbanksprache 

zum Definieren von Datenstrukturen 

sowie zur Erfassung und Abfrage von 

Datenbeständen in relationalen Daten- 

banken. MySQL ist zwar die 

populärste, aber bei Weitem 

nicht die einzige SQL-Da- 

tenbank. Zu den führen- 

den 

SQL-Datenbanken 

zählen neben MySQL 

PostgreSQL und Microsoft 

SQL Server. 

Während relationale SQL- 

Datenbanken in einer frühen 

Form schon Anfang der 70er-Jahre 

existierten, handelt es sich bei NoSQL 

um einen Newcomer, der gerade erst 

einmal seit einem Jahrzehnt eine Rolle 

spielt. Der Begriff selbst wurde sogar 

erst Anfang 2009 von Johan Oskarsson 

InnoDB auf Hochtouren 

Die wichtigsten Verbesserungen in My- 

SQL 5.6 konzentrieren sich auf die Performance 

der Speicherengine InnoDB. 

Bereits in MySQL 5.5 avancierte InnoDB 

zur voreingestellten Speicherengine. Aufgrund 

der bisher fehlenden Volltextsuche 

mieden es jedoch die Anwender. MyS- 

QL 5.6 hat diesen Mangel behoben. Anwender 

können nun endlich FULLTEXT- 

Indizes aus InnoDB-Tabellen erstellen 

SQL und NoSQL: Was hinter dem Namen steckt 

im Zusammenhang mit einer Veranstaltung 

zum Thema verteilter strukturierter 

Datenspeicher eingeführt. 

NoSQL steht für „nicht nur SQL“. Es handelt 

sich dabei um neue Ansätze für einen 

nicht-relationalen Datenspeicher, 

dem kein vorab festgelegtes Tabellenschema 

zugrunde liegt. Die wichtigsten 

NoSQL-Konzepte umfassen Schlüssel- 

Werte-Paare, spaltenorientierte Datenbanken, 

Graphendatenbanken und dokumentenorientierte 

Datenbanken; die 

Grenzen dieser Kategorien verwischen 

jedoch zunehmend. Zu den bekanntesten 

NoSQL-Datenbanken zählen Google Big- 

Table, CouchDB, 10gen MongoDB und 

Apache Cassandra. 

SQL-Datenbanken sind am besten für 

strukturierte Datensätze geeignet. No- 

SQL-Datenbanken können ihre Stärken 

am besten im Zusammenhang mit nichtstrukturierten 

Daten und Big Data sowie 

in einer Cloud-Umgebung ausspielen. 

Oracles Implementierung 

von 

NoSQL mittels der 

Memcached-API 

in MySQL Server 

5.6 setzt direkt 

auf der InnoDB- 

Engine auf. 

und diese unter 

Verwendung von 

MATCH() … 

AGAINST durchsuchen. 

Bei den Indizes 

handelt es sich selbst um InnoDB- 

Tabellen. Dank der durchdachten 

Volltextsuche entfallen beim Einsatz 

von InnoDB nun endlich externe Lösungen 

wie Solr/Lucene oder die 

Sphinx-Suchmaschine. 

Hinzu kamen außerdem ein neuer Nachbarschaftssuchoperator 

@ sowie einige 

neue Optionen und Tabellen vom Typ 

INFORMATION_SCHEMA. 

In MySQL 5.6 lassen sich Webapplikationen 

erstellen, die über das NoSQL-API 

auf Daten im InnoDB-Format zugreifen. 

Dabei kommt der beliebte memcached- 

Daemon zum Einsatz, der hierzu Anfragen 

an Schlüssel-Wert-Paare mittels 

ADD, SET und GET ausführt. Diese einfachen 

Operationen zum Speichern und 

Abrufen von Daten vermeiden den SQL- 

Überhang. Sie können auf dieselben Daten 

sowohl über das NoSQL-API als auch 

mittels SQL zugreifen. Es empfiehlt sich, 

schnelle Updates oder einfache Lookups 

über das NoSQL-API auszulösen und 

SQL bevorzugt für komplexe Abfragen 

und zur Abwärtskompatibilität mit Altlasten-Applikationen 

zu nutzen. 

Praxisnahe Verbesserung 

Die Daten-Replikation in MySQL 5.6 ist 

deutlich robuster geworden. Zuvor wur- 

44 

0213 internet magazin

MySQL 5.6 und NoSQL | WEBENTWICKLUNG 

de die aktuelle Leseposition des Masters 

und die Änderungsposition des Slave in 

den Dateien relay-log.info und master. 

info vermerkt. Im normalen Betrieb war 

diese Information nur von mäßiger Relevanz, 

doch nach einem Absturz konnte 

es schon einmal vorkommen, dass die 

Angaben in diesen beiden Dateien nicht 

mehr die Realität reflektierten. Beim 

nachfolgenden Neustart der Datenbank 

entstanden oft entweder Lücken im Datenstrom 

oder es wurden Duplikate bereits 

verzeichneter Daten neu eingefügt. 

Diese Informationen über die Replikation 

lassen sich nun in den Datenbanktabellen 

sichern. Hierzu müssen die Variablen 

master_info_repository 

und 

relay_log_info_repository 

auf den Wert TABLE gesetzt werden. Da 

der Server diese beiden Tabellen aber 

leider noch als MyISAM anlegt, muss 

der Administrator die Konvertierung ins 

InnoDB-Format immer noch von Hand 

vornehmen. 

MySQL 5.6 führt außerdem eine neue 

globale Transaktions-ID (GTID) ein, mit 

deren Hilfe eine Transaktion eindeutig 

identifiziert werden kann. Die GTID 

identifiziert auch einen Master/Slave- 

Replikationsvorgang eindeutig für den 

betreffenden MySQL-Server und dürfte 

die Handhabung enorm vereinfachen. 

Tools wie mysqlfailover, mysqlreplcheck, 

mysqlrpladmin und mysqlrplshow, die 

Oracle für MySQL bereitgestellt hat, sollen 

das Ganze noch weiter vereinfachen. 

Für Transaktionen mit Nur-Lesezugriffen 

hielt InnoDB bisher interne Datenstrukturen 

vor; diese sind nun überflüssig. In 

der Version 5.6 kann die InnoDB-Engine 

in bestimmten Fällen sogar selbstständig 

ermitteln, dass es sich um eine nur lesende 

Transaktion handelt, und den Vorgang 

automatisch optimieren. Alternativ 

können Sie mit START TRANSACTION 

READ ONLY eine Transaktion explizit 

MySQL-Upgrade 

Das MySQL-Entwicklerteam empfiehlt, 

vor dem Upgrade auf MySQL alle Tabellen 

aus Sicherheitsgründen mittels 

mysqldump 

unter Angabe der Option 

--all-databases 

auszugeben und nach dem Upgrade 

wieder einzulesen. 

als nur lesend kennzeichnen. Dabei gilt 

es allerdings zu beachten, dass solche 

Transaktionen in der Ausgabe von SHOW 

ENGINE INNODB STATUS leider nicht 

mehr verzeichnet sind. 

Schreibzugriffe auf 

SSD auslagern 

Erstmals in MySQL 5.6 können Sie einzelne 

Tabellen auf bestimmte Laufwerke 

auslagern, sei es, um die Leistung der 

Datenbank zu verbessern oder den verfügbaren 

Platz besser nutzen zu können. 

So können Sie beispielsweise besonders 

stark angefragte Teile der Datenbank auf 

SSD-Platten sichern, zum Beispiel: 

CREATE TABLE schnell (`id` int(10) 

unsigned NOT NULL AUTO_ 

INCREMENT, `daten` varchar(64) 

DEFAULT NULL, `zeitstempel` 

timestamp NOT NULL DEFAULT, 

PRIMARY KEY (`id`),) ENGINE=InnoDB 

DATA DIRECTORY='/media/disk/ssd/'; 

Dadurch maximieren Sie den Nutzen 

der hohen Datentransferraten einer SSD- 

Platte, ohne sich gleich in hohe Kosten zu 

stürzen; seltener genutzte Tabellen können 

dann nach wie vor auf Festplatten 

Platz finden. Der Einsatz dieser Funktion 

schließt sich leider mit der Benutzung 

von LVM-Snapshots aus. 

Um eine effizientere Nutzung von SSDs 

zu ermöglichen, erhielt MySQL in der 

Version 5.6 die Fähigkeit, mit einer geringeren 

Page-Größe zu arbeiten. Anstelle 

der standardmäßigen 16 KByte 

(MySQL 5.5) kommt MySQL nun auch 

mit einer Page-Größe von 8 KByte oder 

gar 4 KByte zurecht. Eine kleinere Page- 

Größe sorgt dafür, dass MySQL beim 

Nachdem einige der größten Websites, darunter Facebook, aufgrund von Performance-Engpässen 

von MySQL mit einem Teil ihrer Daten zu Apache Cassandra (cassandra.apache.org) 

wechselten, hat Oracle die Flucht nach vorne ergriffen. 



Aktualisieren einzelner Zeilen geringere 

Datenmengen in den Speicher lädt. 

Eine kleinere Page-Größe macht sich 

insbesondere dann positiv bemerkbar, 

wenn die Datentransferrate zwischen 

dem Arbeitsspeicher und dem Dauerspeichermedium 

einen relevanten Engpass 

darstellt und die Datenbank viele 

gleichzeitige Zugriffe verarbeiten muss. 

Den benötigten Wert bestimmt der Parameter 

innodb_page_size. 

Mit der Option 

--innodb-read-only 

können Sie einen MySQL-Server im Nur- 

Lesemodus betreiben. Dadurch besteht 

für Sie die Möglichkeit, InnoDB-Tabellen 

aus nicht beschreibbaren Medien wie 

CDs oder DVDs auszulesen, oder ein 

Data-Warehouse-System mit mehreren 

Instanzen einzurichten, die ein gemeinsames 

Verzeichnis benutzen. 

Verbesserte Integration 

MySQL-Benutzer können die Daten aus 

MySQL unter Verwendung von Apache 

Sqoop an das HDFS-Dateisystem 

(Hadoop Distributed File System) oder 

verwandte Dateisysteme wie Hive oder 

HBase übertragen, um verteilte Computer 

zu einer logischen Recheneinheit effizient 

zusammenzuschließen. 

Zum Importieren von Daten aus einer 

MySQL-Datenbank namens imdb in Hadoop 

durch den Benutzer benutzer genügt 

etwa ein Befehl in der Form 

$ sqoop import --connect 

jdbc:mysql://localhost/imdb \ 

--table ORDERS --username benutzer 

--password **** 

Hadoop sichert die Daten in Verzeichnissen, 

die nach der jeweiligen Tabelle 

benannt sind. 

Der Datenimport in HBase gelingt mit 

Sqoop unter Verwendung einer Anweisung 

in der Form: 

$ sqoop import --connect 

jdbc:mysql://localhost/imdb \ 

--table BESTELLUNGEN --username 

benutzer --password **** \ 

--hbase-create-table --hbase-table 

BESTELLUNGEN --column-family mysql 

Auch der umgekehrte Weg ist vorgesehen: 

So können Sie Daten aus Hadoop extrahieren 

und für einen externen Datenspeicher 

wie eben die relationale Datenbank 

MySQL ausgeben. Dank der Integration 

Google hatte ursprünglich mit GQL (Google Query Language), Google File System 

und Google BigTable einen reinen NoSQL-Ansatz probiert; seit 2011 bietet Google 

zusätzlich einen Dienst namens Cloud SQL auf Basis von MySQL. 

Link-Tipps 

Download von MySQL 

www.mysql.de/downloads/ 

Anleitung zur Konfiguration der Memcached-API 

für InnoDB in MySQL 

blogs.innodb.com/wp/2011/04/ 

get-started-with-innodbmemcached-daemon-plugin/ 

SQLyog, eine beliebte MySQL-Managementsoftware 

für den Desktop, in einer 

kostenfreien Community-Edition 

https://code.google.com/p/ 

sqlyog/downloads/list 

Download von Apache Sqoop 

sqoop.apache.org 

Download von Apache Hadoop 

hadoop.apache.org/ 

Download von Apache Oozie 

oozie.apache.org/ 

mit Apache Oozie, einer serverseitigen 

Workflow-Engine von Cloudera, können 

Benutzer diese Datenübertragungstasks 

zeitgesteuert ausführen. Sqoop beinhaltet 

standardmäßig nicht nur eine generische 

JDBC- sowie eine MySQL-Schnittstelle, 

sondern bringt auch einen spezialisierten 

Connector für direkte Hochleistungsverbindungen 

zu MySQL mit. 

Fazit 

Mit der Version 5.6 der quelloffenen Datenbank 

MySQL legt Oracle dort nach, 

wo die Datenbank-Administratoren Verbesserungen 

dringend gefordert hatten, 

nämlich bei der Ausführung einer hohen 

Anzahl gleichzeitiger Zugriffe. 

Das NoSQL-Interface in MySQL 5.6 setzt 

direkt auf der Storage-Engine InnoDB 

auf und stellt eine geschickt durchgeführte 

evolutionäre Verbesserung dar. 

So können Sie mit einfachen Anfragen 

unter Verwendung von Schlüssel-Wert- 

Paaren die SQL-Ebene umgehen, um die 

Zugriffsgeschwindigkeit zu maximieren, 

ohne die Leistungsbereitschaft des SQL- 

Servers zu beschneiden. 

Anna Kobylinska und 

Filipe Pereira Martins 


PFLICHTLEKTÜRE FÜR SAMSUNG-FANS: 

ALLE HIGHLIGHT-PRODUKTE IM TEST 

Sonderheft 

1/2013 

Österreich € 11,20 

Schweiz sfr. 19,80 

BeNeLux € 11,50 

Italien € 12,40 

Spanien € 12,40 

SamsungDeutschland € 9,80 

Galaxy-Highlights 

Spitzen-Smartphones im Test: 

S III, S III mini und Note II 

Die neue 

Ativ-Serie 

So gut ist Windows 8 auf 

Smartphone und Tablet 

AB SOFORT 

IM HANDEL! 

Galaxy Camera 

Top: die erste Kompaktkamera 

mit Android 

+ Das Tablet mit Bedienstift: Galaxy Note 10.1 + Praxistipps: 

Smartphone-Inhalte auf den TV streamen u.v.m. + Zubehör 

06.11.2012 15:30:37

WEBENTWICKLUNG | HTML Abstraction Markup Language 

Grundlagen 

Die Nähe zu CSS ist nicht nur durch das 

grundsätzliche Prinzip ersichtlich, sondern 

auch durch die Struktur der Sprache. 

HAML nutzt wie CSS ebenfalls eine 

Art von Selektoren zur Auszeichnung von 

Tags mit den entsprechenden Attributen. 

An dieser Stelle kommen wie bei CSS 

ebenfalls Klassen und IDs zum Tragen. 

Zusätzlich zu dieser Syntax bedient sich 

HAML der CSS-Abstration SASS (Syntactically 

Awesome Stylesheets), einer eigenen 

Sprache welche CSS gezielt um 

Funktionen wie Kaskadierung, Konstanten 

oder Makros erweitert. 

Sie können HAML entweder als Standalone-Anwendung 

betreiben oder im Zusammenspiel 

mit diversen Programmiersprachen. 

Den Ursprung nahm HAML im 

Ruby-Umfeld, inzwischen existieren jedoch 

zahlreiche weitere Erweiterungen, 

unter anderem für PHP, Phython, .NET, 

Perl, Javascript und Dart. 

Klares HTML 

dank HAML 

HAML hat die Vereinfachung der Entwicklung von 

Webanwendungen zum Ziel. Der Fokus der Markup- 

Sprache liegt dabei in der übersichtliche Abbildung 

von Dokumentstrukturen. Im Workshop erfahren Sie 

mehr über HAML auch in Verbindung zu Ruby. 

Viele Skriptsprachen wie etwa PHP, 

sind bei den Entwicklern aufgrund 

der schnellen Erlernbarkeit sehr beliebt. 

Trotz allem haben sich diese Sprachen 

im Laufe der Versionen kontinuierlich 

weiterentwickelt und decken inzwi- 

schen sogar das Thema Objekt-Orien- 

tierung nahezu vollständig ab. TDen- 

noch gibt es noch Schwächen, vor 

allem in der Trennung von Inhalt 

und Programmcode. An dieser 

Stelle setzt die HTML Abstrac- 

tion Markup Language – kurz HAML 

– an und erlaubt, angelehnt an die Vorgehensweise 

von CSS und HTML eine 

Trennung von Code und Inhalt. 

Installation 

Für die Ausführung der Beispiele nutzen 

wir eine Kombination aus Ruby 

und HAML – diese ist unter allen Plattformen 

einfach zu installieren, sogar 

für Windows gibt es ein Installer-Paket. 

Verlinkungen zur aktuellen Ruby-Version 

finden Sie beispielsweise auf der 

Website Ruby (www.ruby-lang.org) unter 

Downloads. 

Nachdem Sie Ruby installiert haben, 

sollten Sie einen ersten Testlauf machen. 

Geben Sie dazu den Befehl gem server 

über die Befehlszeile ein und Sie erhalten 

die Rückmeldung eines Serverstarts unter 

localhost mit dem Port 8808. Rufen Sie 

anschließend über einen Browser diese 

URL auf, also http://localhost:8808 und 

Sie erhalten bei korrekter Installation von 

Ruby eine Übersicht aller vorhandenen 

GEM-Pakete. 

Anschließend laden Sie sich noch das 

nötige GEM-Paket für HAML herunter, 

ebenfalls über die Kommandozeile. 

Geben Sie dazu den Befehl gem install 


HAML verspricht die Vereinfachung von 

HTML-Code. Lesen Sie, 

» welche Voraussetzungen Sie für 

HAML schaffen müssen, 

» wie HAML aufgebaut ist und funktioniert 

und 

» wie Sie Ruby integrieren. 


HTML Abstraction Markup Language | WEBENTWICKLUNG 

haml ein. Sollte die Installation nicht wie 

gewünscht funktionieren, könnte dies 

an den fehlenden Proxy-Einstellungen 

liegen, die GEM nicht bekannt sind. Sie 

könnten zwar den Proxy mitgeben, einfacher 

geht es jedoch, wenn Sie HAML 

direkt von der Website herunterladen und 

anschließend manuell installieren. Das 

Paket finden Sie direkt auf der HAML- 

Projektseite. Nach dem Download gehen 

Sie wieder auf Ebene der Kommandozeile 

und geben den folgenden Befehl ein: 

gem install 

Daraufhin wird die Installation von 

HAML fertiggestellt und Sie erhalten die 

Rückmeldung über ein installiertes GEM 

und zwei installierte Dokumentationen. 

Damit haben Sie die Grundlage für die 

Umwandlung der Dateien von HAML in 

HTML geschaffen. 

Das erste Beispiel 

Das erste Beispiel demonstriert die Syntax 

der Sprache und die Umwandlung 

der HAML-Datei. Es soll eine normale 

HTML-Datei erzeugt werden mit einem 

Titel sowie einer Überschrift der Stufe 1. 

Das Ergebnis in HTML soll das folgende 

Aussehen haben: 

 

 

 

Mein erstes HAML 

Beispiel 

 

 

Dies ist eine H1 

Ueberschrift 

 

 

Dies sind insgesamt neun Zeilen, die Sie 

bei der Eingabe von klassischem HTML 

benötigen würden. HAML schafft die Abbildung 

des Sachverhalts in sechs Zeilen, 

die dazu noch deutlich verkürzt sind. 

!!! 5 

%html{lang: 'de'} 

%head 

%title Mein erstes HAML Beispiel 

%body 

%h1 Dies ist eine H1 Ueberschrift 

In der ersten Zeile wird der Doctype der 

HTML-Seite festgelegt und anschließend 

eine HTML-Seite mit deutscher Sprache 

angelegt. Damit die Website auch wie 

eine solche aussieht, ist es wichtig, jede 

darunterliegende Stufe in HAML entsprechend 

mit einem Tab-Zeichen einzurücken: 

der Header steht eine Stufe 

tiefer als das HTML-Tag, der Titel steht 

eine Stufe unterhalb des Headers und so 

weiter. Rücken Sie Ihre verschiedenen 

Ebenen nicht korrekt ein, kommt am 

Ende meist nicht das gewünschte Ergebnis 

heraus. 

Ein Blick auf die Syntax von HAML zeigt 

den kompletten Verzicht auf eckige 

Klammern sowie das Ende-Tag. Dieses 

wird automatisch durch HAML erzeugt, 

wenn das nächste Element auf der gleichen 

Ebene erscheint. 

Zum Kontrollieren speichern Sie Ihre 

HAML-Seite ab, etwa unter dem Namen 

bsp1.haml. Starten Sie anschließend die 

Kommandozeile und geben Sie den folgenden 

Befehl ein: 

haml bsp1.haml bsp1.html 

HAML nimmt sich 

damit die Datei 

bsp1.haml, wandelt 

den Inhalt 

um und speichert 

das Ergebnis in 

der Datei bsp1. 

html ab. Ob Sie 

Ihre Definition 

in HAML korrekt 

hinterlegt haben, 

HAML steht auf 

der Projektwebseite 

zum kostenlosen 

Download 

zur Verfügung. 

sehen Sie anschließend direkt in der Ergebnisdatei. 

Unterschiedliche Doctypes 

Im obigen Beispiel haben Sie gesehen, 

wie Sie einen normalen HTML5-Doctype 

anlegen können. HAML sieht noch eine 

Reihe von weiteren Doctypes vor, die 

Ihnen ebenfalls eine Menge Tipparbeit 

oder Copy-und-Paste ersparen. 

Der klassische Doctype mit Verweis auf 

die XHTML 1.0 DTD lässt sich mit drei 

Ausrufezeichen anlegen. Als Ergebnis erhalten 

Sie das vollständige doctype-Tag 

inklusive der Referenz auf die DTD bei 

w3.org. 

 

Die beiden anderen Abkürzungen liefern 

entsprechend die Referenz auf die 

xhtml1-strict.dtd beziehungsweise die 

xhtml1-frameset.dtd: 

» !!! Strict liefert 

 

» !!! Frameset liefert 


WEBENTWICKLUNG | HTML Abstraction Markup Language 

 

Verschiedene Ebenen 

Wie bereits in dem ersten Beispiel ersichtlich 

ist, spielen die Ebenen und das 

korrekte Einrücken eine wesentliche 

Rolle bei der Code-Generierung. Das 

folgende Beispiel soll demonstrieren, 

was passiert, wenn dies nicht ordnungsgemäß 

durchgeführt wird. 

Es soll eine HTML-Seite erzeugt werden, 

in welcher zwei Überschriften vom Typ 

h1 und h2 enthalten sein sollen, unterhalb 

von h2 ein Paragraf und innerhalb des Paragrafs 

ein Teil eines Satzes, welcher fett 

markiert werden soll. Der korrekte Code 

in HTML sieht somit wie folgt aus: 

Ich bin eine h1-Ueberschrift 

Und hier kommt der kleine Bruder 

h2 

Jetzt noch ein wenig Text mit 

einem dicken Satzende. 

Wenn Sie für das Beispiel lediglich die 

Tags ersetzen, kommen Sie zu dem folgenden 

Ergebnis. 

%h1 Ich bin eine h1-Ueberschrift 

%h2 Und hier kommt der kleine Bruder h2 

%p Jetzt noch ein wenig Text mit 

%strong einem dicken Satzende 

Bei der Umwandlung der Datei mit 

HAML erhalten Sie jedoch nur bedingt 

Embedded Ruby 

Wenn Sie sich näher mit HAML beschäftigen 

werden Sie früher oder später auf 

den Begriff „ERB“ stoßen. Dabei handelt 

es sich um die Abkürzung für „Embedded 

Ruby“. Dabei handelt es sich um 

ein Template-basiertes System für Ruby. 

Wenn Sie ERB nutzen, können Sie Ruby- 

Code in jedes Textdokument einfügen 

und diesen interpretieren lassen. Dies 

ist auch im Zusammenspiel mit HAML 

möglich, wie ein Beispiel zeigen wird. 

Ist Ruby korrekt installiert, können Sie 

über gem server einen lokalen Server 

starten und diesen über Ihren Browser 

ansteuern. 

das korrekte Ergebnis. Die ersten beiden 

Zeilen sind überhaupt kein Problem und 

werden auch korrekt dargestellt. Bei der 

dritten Zeile interpretiert HAML jedoch 

das Falsche: 


%strong einem dicken Satzende 

Der Paragraf wird zwar noch korrekt 

gesetzt und beendet, das -Tag 

jedoch nicht als solches erkannt. Damit 

auch dies korrekt läuft, müssen Sie 

zwei Veränderungen vornehmen: vor 

dem -Tag muss eine neue Zeile 

beginnen und diese muss eingerückt 

werden, damit der Paragraf auch korrekt 

beendet wird. 

%p 


%strong 

einem dicken Satzende 

Umgang mit Attributen 

Nachdem Sie verschachtelte Ausdrücke 

generieren können, gilt das nächste Augenmerk 

HTML-Tags die im Standard mit 

einem Attribut versehen werden, wie beispielsweise 

das Anchor-Tag. Dieses sieht 

bekanntermaßen wie folgt aus: 


Darin verarbeitet sind sowohl die Referenz 

der Website als auch der Titel des 

Links. Wenn Sie dies entsprechend in 

HAML abbilden möchten, ist ein weiteres 

Element der Syntax notwendig: 

Attribute eines Tags fügen Sie über ein 

Array dem Element hinzu. Wenn es mehrere 

Attribute sind, dann listen Sie diese 

mit Komma getrennt auf. Für das obige 

Beispiel bedeutet dies dann die folgende 

HAML-Ausprägung: 

%a{href:'http://www.internet-magazin. 

de/', title:'Internet Magazin'} 


Das Anchor-Tag wird wie gewohnt umgewandelt 

und die beiden Attribute href 

und title werden in geschweiften Klammern 

mitgegeben. 

Klassen und IDs 

Wenn Sie den Einsatz von CSS planen, 

benötigen Sie natürlich zwingend notwendig 

auch Klassen und IDs um die einzelnen 

Tags zu identifizieren und diesen 

die passenden Formatierungen zuzuweisen. 

Ein klassisches HTML-Fragment mit 

den entsprechenden Attributen könnte 

beispielsweise wie folgt aussehen: 

 

 

 

Die Abbildung erfolgt in diesem Fall allerdings 

etwas anders als erwartet und in 

den vorherigen Beispielen demonstriert. 

Das section-Tag folgt noch den bisherigen 

Mustern und wird über ein Prozent- 

Zeichen abgebildet. Die IDs und Klassen 

werden allerdings direkt adressiert, mit 

einem Punkt als Trennzeichen. 

%section#inhalt.con 

.ebene2.con 

Wie Sie an der zweiten Zeile sicherlich 

bemerkt haben, nutzt HAML das div-Tag 

als Standard, falls nicht anderes angegeben 

wurde. 


HTML Abstraction Markup Language | WEBENTWICKLUNG 

Arbeiten mit Filtern 

Sie können für die Verarbeitung auch 

verschiedene Filter setzen, welche nicht 

innerhalb von HAML verarbeitet werden, 

sondern im Anschluss außerhalb. Insge- 

samt kennt HAML 16 verschiedene Fil- 

ter, unter anderem für cdata, javascript, 

css oder markup. Das folgende Beispiel 

zeigt, wie Sie am besten Inline-Javascript 

in Ihren HTML-Code inte- 

grieren. Zusätzlich können Sie diesen 

noch mit einem cdata-Tag kennzeichnen. 

Der folgende HAML-Code generiert ein 

script-Tag und fügt diesem zusätzlich 

noch einen cdata-Hinweis hinzu. 

:javascript 

$('.formel1').on('click', 

function(e) { 

alert('Sebastian Vettel'); 

}); 

Der resultierende Programmcode, der 

durch diese Zeilen generiert wird, enthält 

den kompletten Javascript-Code, 

das entsprechende script-Tag und einen 

cdata-Verweis. 

Kommentare einfügen 

HAML sieht jedoch nicht nur die Vereinfachung 

klassischer HTML-Tags und Strukturen 

vor, sondern auch die Kommentierung 

des Programmcodes. HAML sieht 

dabei zwei Möglichkeiten vor: entweder 

die Kommentierung des Programmcodes 

direkt innerhalb von HAML oder eine 

Kommentierung im HTML-Code. Die 

erste Variante wird folglich nicht in den 

HTML-Code übertragen, sondern ist nur 

innerhalb von HAML sichtbar. 

Für diesen Weg der Dokumentation nutzen 

Sie die Zeichenfolge –#. Alles, was 

anschließend erscheint, wird nicht durch 

HAML interpretiert und in den HTML- 

Code übernommen. 

Hier kommt ein Text 

Und noch eine Zeile 

-# Zwei Textzeilen, die wenig Inhalt 

haben 

Wenn Sie diesen Programmcode umwandeln 

finden Sie in Ihrer HTML-Seite nur 

noch die ersten beiden Programmzeilen 

wieder. Wollen Sie den Kommentar sowohl 

in HAML, als auch auf Ihrer HTML- 

Seite sehen nutzen Sie stattdessen einen 

einfachen Schrägstrich „/“ als Kennzeichner. 

Damit ausgezeichnet erscheint der 

obige Text dann wie mit der folgenden 

Kommentarzeile: 

 

Hinzufügen von Ruby 

Neben der reinen Optimierung von 

HTML Code ist die Integration von Ruby 

eine weitere Funktion von HAML, die 

es besonders hervorzuheben gilt. Wenn 

Sie sich mit der Integration von Ruby in 

Link-Tipps 

Haben Sie Geschmack an HAML gefunden, 

gibt es eine Reihe von Websites, 

auf denen Sie weiterführende Literatur 

finden: 

HAML Dokumentation 

haml.info/docs.html 

HAML Cheat Sheet inklusive PDF-Download 

www.cheatography.com/specialbrand/cheat-sheets/haml/ 

Einstieg in HAML inklusive Ruby 

rubysource.com/an-introductionto-haml/ 

ERB oder von PHP in HTML auskennen, 

dürfte Ihnen auch das folgende Vorgehen 

sehr bekannt vorkommen. 

Das folgende Beispiel zeigt, wie Sie einfachen 

Ruby-Code mit HAML mischen 

können. 

%p 

= ['Hallo', 'liebe', 'Leser!']. 

join " " 

= "Wie geht es Ihnen???" 

HAML baut aus diesen Zeilen das folgende 

HTML. 

 

Hallo liebe Leser! 

Wie geht es Ihnen??? 

 

Der join-Befehl wird somit direkt während 

der Generierung der HTML-Seite 

mit bearbeitet und die Textzeile zusammengesetzt. 

Einen guten 

Überblick über 

die HAML-Befehle 

liefert Ihnen das 

Cheat Sheet. 

Fazit 

Entwickler, die bereits heute mit Ruby 

arbeiten und damit Webanwendungen 

erstellen, sollten sich HAML genauer 

anschauen. Es ist jedoch auch möglich, 

die Beschreibungssprache mit anderen 

Skript- und Programmiersprachen zu nutzen. 

Gerade Entwickler, die viel HTML- 

Code generieren und dabei nicht die 

Übersicht verlieren wollen, sollten sich 

HAML näher anschauen. 

Andreas Hitzig 


WEBBUSINESS | Social Media im Unternehmen 

Dialog auf Augenhöhe 

Werbung auf Facebook funktioniert nicht, meinen viele Experten und solche, die 

sich dafür halten. Doch das stimmt so nicht. Vielmehr gilt: Klassische Werbung 

auf Facebook funktioniert nicht. Denn die Kommunikation in dem sozialen Netzwerk 

folgt eigenen Regeln, die Unternehmen tunlichst beherzigen sollten. Welche 

das sind, erklärt dieser Beitrag. 

Die einschlägigen Fachblätter titeln 

voller Häme: „GM stellt mangels Erfolg 

Facebook-Werbung ein“, „Klickraten 

von 0,04 Prozent in sozialen Netzwerken“ 

und „Bei Facebook ist man nicht 

zum Einkaufen“. Solche Aussagen sind 

populistisch und unzutreffend. Genauso 

wie die Möglichkeiten der Werbung 

in sozialen Netzwerken zu Beginn des 

Facebook-Hypes überschätzt wurden, 

werden sie jetzt dekonstruiert. Marken 

und Konsum sind ein wesentlicher Bestandteil 

unserer Gesellschaft. Dementsprechend 

werden diese Themen auch 

auf Facebook & Co. thematisiert. Kein 

Wunder also, dass es unzählige Beispiele 

von Firmen gibt, die in diesem Umfeld 

durchaus erfolgreich sind. Ein Problem 

ist, dass viele Werbetreibende noch nicht 

begriffen haben, dass Werbung und Anzeigen 

auf Facebook eben nicht aussehen 

dürfen, als seien sie dem Marketing 

oder der klassischen Unternehmenskommunikation 

entsprungen. 


Social Media im Unternehmen | WEBBUSINESS 

Weniger werben, mehr unterhalten 

Unternehmen müssen sich im Social 

Web von der klassischen Marketingbzw. 

Werbedenke verabschieden. Alternative 

Marketing-Strategien und um die 

Ecke denken sind gefragt. Es müssen keine 

ausgefallenen Kampagnen sein. Man 

muss das Rad auch nicht immer wieder 

neu erfinden. Marketing-Verantwortliche 

müssen vielmehr ein Verständnis dafür 

entwickeln, wie sich Kunden bzw. „Fans“ 

im Social Web verhalten, wie sie sich 

informieren und welche Informationen 

und Inhalte sie konsumieren. Wenn Unternehmen 

auf dieser Basis Kampagnen 

mit sozialen Elementen anreichern, stellt 

sich meist auch der gewünschte Erfolg im 

Social Web ein. 

„Wir als Unternehmen möchten ...“ – 

das ist der falsche Weg. „Unsere Kunden 

wünschen sich ...“ – das ist der richtige. 

Die Nutzer tummeln sich nicht auf Facebook, 

um dort mit plumper Werbung 

gelangweilt zu werden. Das soll nicht 

heißen, dass Werbung in diesem Umfeld 

nicht funktioniert. Doch sie muss sich an 

den Spielregeln ausrichten, die von den 

Nutzern vorgegeben werden und nicht 

von den Unternehmen. Und diese befinden 

sich im Social Web, um sich mit 

„Freunden“ auszutauschen, gemeinsam 

Spaß zu haben, zu lachen und zu diskutieren 

– egal, ob diese Freundschaften aus 

dem realen Leben stammen, im Netz mit 

anderen Nutzern geknüpft wurden oder 

mit Unternehmen entstehen. Erfolgreiche 

Unternehmen denken hier weniger in 

Werbekampagnen, sondern in Wordof-Mouth-Specials, 

die zum Mitmachen 

einladen und Gesprächsstoff schaffen. 

Ziele definieren und kontrollieren, 

ob sie eingehalten werden 

Der erste Schritt auf dem erfolgreichen 

Weg in das Social Web besteht darin, 

klare Ziele zu definieren. Und kontinuierlich 

zu kontrollieren, ob diese eingehalten 

werden. Was trivial klingt, wird in 

der Praxis leider oft vernachlässigt. 

Facebook Insights und Google Analytics 

liefern hier zahlreiche wertvolle Daten. 

Die gesteckten Ziele werden nicht erreicht? 

Sowohl die Strategie als auch 

die Maßnahmen und Ziele müssen dann 

überprüft und gegebenenfalls justiert 

werden. Auf Facebook & Co. bewegt 

man sich in einer Welt, die von „Mikro- 

Informationshappen“ in Form von 140 

Zeichen langen Statusmeldungen dominiert 

wird. Daher sollte man in diesem 

Umfeld besonders darauf achten, sich 

an der bewährten Erfolgsformel „Keep 

it simple and short“ zu orientieren – sowohl 

was Werbeaussagen und Storys als 

auch Abläufe, Technik und Funktionen 

einer Kampagne angeht. 

Hinzu kommt das Thema Style mit dem 

Schwerpunkt auf Design – das betrifft 

einerseits die grafische Oberfläche, andererseits 

auch das, was sich in Form 

von Prozessen unter der Haube einer 

Kampagne verbirgt. 

Der Autor 

Felix Holzapfel, Geschäftsführer 

der deutschen 

Niederlassung 

der Agentur conceptbakery, 

die sich auf die 

Entwicklung alternativer 

Marketing-Strategien 

für Unternehmen 

spezialisiert hat. 

Kontrollverlust im 

Informationsfluss 

Das Social Web hat die Verbreitung von 

Informationen grundlegend verändert. 

Diese werden nicht mehr aktiv versendet, 

sondern für gut befunden („gefällt 

mir“), kommentiert oder auf die eigene 

Chronik kopiert („teilen“). 

Auch hier lautet die Formel für den erfolgreichen 

Einstieg: erkennen, analysieren, 

anwenden. Man muss zuerst einmal 

den veränderten Informationsfluss betrachten 

und versuchen, ihn zu verstehen. 

Erst dann lässt er sich bewusst für 

Die sozialen Medien haben die Verbreitung von Informationen grund legend verändert. 


WEBBUSINESS | Social Media im Unternehmen 

das eigene Marketing nutzbar machen. 

Man muss dem Nutzer kurz und bündig 

– am besten in einem einzelnen Satz – 

sagen können, warum er Fan der Facebook-Seite 

eines Unternehmens werden 

sollte. Und dies muss durch die Brille des 

Nutzers geschehen und nicht durch jene 

des Unternehmens. 

Clevere Unternehmen haben längst verstanden, 

dass sie keine Kontrolle mehr 

darüber haben, welche Inhalte an welchen 

Stellen zu welcher Zeit konsumiert 

und verbreitet werden. Anstatt dagegen 

anzukämpfen, finden sie sich mit dieser 

Tatsache ab und verwandeln sich geschickt 

vom Kontrolleur zum Zuhörer 

und Moderator. 

Nicht zögern – machen! 

Warum Angst vor etwas haben und gegen 

etwas ankämpfen, was sich nicht 

aufhalten lässt? Mal ganz davon abgesehen, 

dass es immer schwerer wird, 

den Kopf so tief in den Sand zu stecken, 

dass man von dem Umschwung in der 

Kommunikation und dem Verhalten der 

Konsumenten nichts mitbekommt. Erfolgreiche 

Unternehmen im Social Web 

warten nicht, dass die Gelegenheiten 

Kampagnen im Social Web 

sollten die Erfolgs formel 

„Keep it simple and short“ 

beherzigen. 

Buchtipp 

Facebook hat unsere Welt 

revolutioniert. Immer mehr 

Menschen verbringen immer 

mehr Zeit auf dem wohl 

populärsten sozialen Netzwerk 

– von Jung bis Alt, 

vom Schüler bis zum Manager, 

über alle Gesellschaftsschichten 

hinweg, überall 

auf der Welt. Eine große Herausforderung 

für Unternehmen, 

denn Face book revolutioniert 

auch das Marketing. 

Mitwirkung und Partizipation sind 

die Schlüsselwörter. Kommunikation mit 

Kunden findet auf Augenhöhe statt. Konsumenten 

werden zu aktiven Mitgestaltern 

von Marketing, Produkten und sogar 

Marken. Die Autoren erklären, wie man 

die neuen Technologien und Werkzeuge 

zu ihnen kommen, sondern sie finden 

diese dank ihrer Neugier selber. Einer 

der Grundsätze von Facebook lautet: 

„Wenn man sich schnell bewegt, geht 

auch mal etwas kaputt. Wer damit nicht 

leben kann, ist bei uns fehl am Platz.“ 

Genau dieses Verhalten zeichnet zahlreiche 

Unternehmen in diesem Umfeld 

aus: „Nicht zögern – machen!“ 

facebook – marketing 

unter freunden 

Verfasser: Felix Holzapfel 

und Klaus Holzapfel 

BusinessVillage 2012 

Preis: 24,80 Euro 

ISBN 978-3-86980-166-7 

einsetzen kann, was die 

User in sozialen Netzwerken 

machen, wie man sich 

mit ihnen „verbrüdert“, was 

man alles von ihnen lernen 

kann und wie man sie aktiv in die eigene 

Marketing-Strategie inte griert. Denn nur 

wer Facebook verstanden hat, kann sich 

positionieren und Kampagnen entwerfen, 

die niemanden nerven, sondern mit denen 

er als gern gesehener „Freund“ von 

sich reden macht. 

In die Gesamtstrategie einbetten 

Dabei passieren Fehler, denn hinter 

Unternehmen stehen Menschen. Ganz 

abgesehen davon, dass Fehler genauso 

auftreten, wenn man sich langsam bewegt, 

ist das überhaupt nicht schlimm. 

Solange man offen damit umgeht, nichts 

unter den Teppich kehrt und vor allem 

daraus lernt, ist das in Ordnung. 

Das Social Web macht uns hier sogar 

eventuell zu „besseren“ Menschen. 

Denn durch seine Transparenz erzwingt 

es eine gewisse Ehrlichkeit. 

Ganz auf sich allein gestellt, ist der Unternehmensauftritt 

auf Facebook meist 

relativ wirkungslos. Auch im Social Web 

fallen die „gebratenen Reichweiten- 

Tauben“ nicht vom Himmel. Hier sind 

Engagement und eine geschickte Verknüpfung 

von ganz unterschiedlichen 

Maßnahmen gefragt: Dazu gehören 

sowohl Facebook als auch die eigene 

Website, sonstige Online-Maßnahmen 

bis hin zur Einbindung und zum Zusammenspiel 

mit klassischen Offline- 

Bausteinen wie Print, Radio oder Fernsehen. 

Felix Holzapfel 


JETZT 

NEU! 

Bestellen Sie jetzt! 

2 komplette Jahrgänge auf einer CD! 

24x Internet Magazin 

für nur 15,– Euro 

Jetzt ohne Versandkosten! 

Alle Berichte, alle Tests, alle Tipps 

und Tricks und alle Workshops der 

Jahre 2011/20112 

Hiermit bestelle ich ___ Exemplar(e) der Internet Magazin-Jahres-CD 2011/2012 

zum Einzelpreis von 15,– Euro! 

Absender: 

Ich bezahle per: ❏ Bankeinzug 

➜ Jeden Artikel schnell finden mit der 

komfortablen Volltextsuche 

➜ Praktisch: Jede Heftausgabe ist als eine 

PDF-Datei enthalten 

Name 

Vorname 

Straße 

Bankleitzahl 

Kontonummer 

Datum Inhaber Unterschrift für Bankeinzug 

Ich bezahle per: ❏ Visa ❏ Eurocard ❏ American Express 

➜ Systemvoraussetzungen: läuft unter 

Windows 98/XP/Vista/7/8, MacOS 

und Linux 

PLZ 

Datum 

Wohnort 

Unterschrift 

Kreditkartennummer 

/ 

Karte gültig bis 

Unterschrift 

Prüfziffer 

Bestellen Sie gleich unter 

www.wekashop.de 

Und so können Sie bestellen: 

Per Internet: www.wekashop.de 

Per Fax: 0 71 31/ 2 70 77 86 04 

oder direkt: A. B. O. Verlagsservice GmbH, 

Postfach 11 65, 74001 Heilbronn 

Lieferung: 

Die Lieferung erfolgt per Post in aller Regel etwa 1 Woche nach Bestelleingang. Ändert sich 

meine Adresse, erlaube ich der Deutschen Post AG, dem Verlag meine neue Adresse mitzuteilen. 

Bei Fernabsatzverträgen unter 200 Euro besteht kein gesetzliches Widerrufsrecht. 

Versandkosten: 

Die Versandkostenpauschale innerhalb Deutschland entfällt. 

Bei Bestellung aus dem europäischen Ausland 4,00 Euro.

WEBBUSINESS | Webhoster-Porträt 

Preiswerte 

Server-Vielfalt 

Günstige Server für Geschäftskunden und Selbstständige 

sind die Trumpfkarte von Webtropia. Wir haben 

uns den Düsseldorfer Webhoster näher angeschaut. 

Mit Webtropia hat die MyLoc managed 

IT AG eine erfolgreiche Hosting-Marke 

am Start, die mit ihren Produkten 

vor allem kleinere Unternehmen, 

aber auch ambitionierte Privatkunden 

adressiert. 

Alles rund um Server 

Auf klassische Shared-Hosting-Webpakete 

verzichtet Webtropia bewusst und 

konzentriert sich auf seine Kernkompetenz: 

Server. Momentan hostet Webtropia 

über 10.000 dedizierte Server und 

5.000 virtuelle Server. 

Dedizierte Rootserver gibt es in drei Klassen, 

vom günstigen Economy Server ab 

19,99 Euro über die ausgewogene Professional-Reihe 

bis zum leistungsstarken 

Enterprise Server. Einen dedizierten Server 

bekommen Kunden auch als HP Micro- 

Server, eine neue kostengünstige Serverlinie 

mit HP-ProLiant-Hardware, die schon 

ab 17,99 Euro im Monat zu haben ist. 

Insgesamt wählen Anwender aus 16 Servervarianten 

aus und finden so die richtige 

Maschine für die eigenen Ansprüche. 

Alle dedizierten Server verfügen über eine 

GBit-Netzwerkanbindung. Eine Virtualisierungssoftware 

ist vorinstalliert. Auch 

verschiedene Admin-Panels und KVMover-IP 

sind ohne Aufpreis enthalten. 

Webtropia 

schreibt sich 

innovative Serverprodukte 

zum 

günstigen Preis 

auf die Fahnen. 

Flexibel in der Cloud 

Seine vServer hostet Webtropia zeitgemäß 

in einer Cloud-Umgebung. Das 

macht besonders flexible Tarife möglich: 

Bei Bedarf schaltet der Kunde 

mehr Ressourcen frei und kommt sofort 

in den Genuss von Extra-CPU-Leistung, 

RAM und Speicherkapazität. Die Leistung 

lässt sich 

bei regelmäßig 

schwankender 

Last auch zeitgesteuert 

planen 

und automatisiert 

anpassen. Abgerechnet 

wird die gebuchte Leistung 

stets tagesgenau. 

Reseller- und Managed-Lösungen 

An Produktneuheiten herrscht im neuen 

Jahr kein Mangel: In der ersten Jahreshälfte 

2013 bringt Webtropia ein weiteres 

Cloud-Angebot auf den Markt, baut seine 

Angebote für die Virtualisierung aus 

und stellt ein Server-Produkt vor, das sich 

zwischen einem virtuellen und einem 

dedizierten Server bewegt. 

Für Kunden, die sich nicht mit der Serververwaltung 

befassen möchten, wird 

der Düsseldorfer Provider in Kürze auch 

Managed Hosting anbieten. Webtropia 

arbeitet zudem an einer Whitelabel-Lösung 

für Reseller. 

DDoS-Schutz und Sicherheitsscans 

Dem Thema Sicherheit widmet sich der 

Webhoster mit zwei neuen Funktionen. 

Eine automatisierte DDoS-Protection bewahrt 

die Server der Kunden in Kürze vor 

verteilten Angriffen, die die Server durch 

eine Flut von Anfragen lahmlegen sollen. 

Ein ebenfalls für 2013 geplanter proaktiver 

Sicherheitsscan hilft Kunden, Schwachstellen 

ihrer Server und Anwendungen zu 

identifizieren und auszubügeln. 

Effiziente Rechenzentren 

Webtropia betreibt in Düsseldorf drei 

eigene Rechenzentren. Bei Problemen 

können sie dem Kunden direkt vor Ort 

Hilfestellung leisten. 

Ein eigenes Blockheizkraftwerk hat zum 

Jahreswechsel seinen Betrieb aufgenommen. 

Damit kann der Provider seine 

Rechenzentren effizient mit Strom versorgen. 

Neben der Umwandlung von 

Wärme in Energie liefert eine Absorptionskältemaschine 

auch gleich Kühlung 

für die Serverräume. Durch eigene Energiegewinnung 

und Kühlsysteme macht 

sich Webtropia von steigenden Strompreisen 

unabhängig. Jacqueline Pohl 


SPEZIAL 53 

Jetzt am Kiosk! 

NUR 

€7,– 

inkl. Versandkosten! 

Porto sparen und 

sofort bestellen! 

www.pc-magazin.de/ 

sonderheft 

Zum Heftinhalt: 

In diesem PC Magazin Spezial lesen Sie, welches 

Ultrabook für welche Ansprüche das Richtige ist: 

Die Spannweite geht hier vom ultrakompakten 

Reisebegleiter über Business-Ultrabooks bis hin 

zu 14-Zöllern mit spieletauglichen Grafikchips. 

Wir haben mehr als 20 Ultrabooks verschiedener 

Klassen für Sie getestet, zeigen die Technologien, 

die Ultrabooks zu etwas Besonderem machen und 

stellen das beste Zubehör für die coolen Mobilrechner 

vor. Daneben finden Sie in diesem Heft eine Fülle an 

Praxistipps zu Themen wie Windows 8, SSDs, mobilem 

Internet, Cloud-Computing oder Sicherheit. Und 

Sie erfahren, wie die nächste Ultrabook-Generation 

mit Windows 8 und Touchscreen aussieht. 

Das neue PC Magazin Spezial 53 – jetzt am Kiosk. 

PC Magazin Spezial 53 „Ultrabooks“ 

❑ Ja, ich möchte das neue PC Magazin-Sonderheft „Spezial 53 – 

Ultrabooks“ inkl. DVD für nur 7,– € bestellen. Dies ist der Endpreis; es 

kommen KEINE weiteren Versand- oder sonstige Kosten hinzu. 

Name / Vorname 

Straße / Nr. 

PLZ / Ort 

E-Mail 

Gewünschte Zahlungsweise: ❑ Bequem durch Bankeinzug ❑ Gegen Rechnung 

Kontonummer 

Kartennummer 

Datum / Unterschrift 

BLZ 

❑ per EuroCard / MasterCard / Visa / American Express 

Gültig bis 

Bei Fernabsatzverträgen unter 200 Euro besteht kein gesetzliches Widerrufsrecht. WEKA MEDIA PUBLISHING GmbH, 

Richard-Reitzner-Allee 2, 85540 Haar, Handelsregister München, HRB 154289. 

✄ 

Bequem online bestellen: 

■ www.pc-magazin.de/ 

sonderheft 

■ oder bestellen Sie per Post: 

PC Magazin, A.B.O. Verlagsservice, 

Postfach 11 65, 74001 Heilbronn 

■ oder per Fax: 0 71 31 / 27 07-78604 

■ oder bestellen Sie per Telefon: 

0 71 31 / 27 07-279 

Dieses und weitere interessante 

Angebote finden Sie auch unter 

www.wekashop.de

WEBBUSINESS | Dedizierte Linux-Rootserver 

Eigener Server – 

ohne Wenn und Aber 

Trotz zunehmender Virtualisierung: Physikalisch eigenständige 

Rootserver sind nach wie vor gefragt, 

auch wenn sie ihr Einsatzgebiet nach und nach verändert. 

Internet Magazin stellt 60 dedizierte Server von 

insgesamt zwölf großen deutschen Webhostern vor. 

Dedizierte Rootserver waren lange Zeit 

der Inbegriff der Freiheit für Webmaster: 

Der physikalisch eigene Server war 

die Königsklasse des Webhostings, richtige 

Profis mussten einen „Dedi“ haben, 

oft auch Rootserver genannt. Doch das hat 

sich inzwischen gründlich geändert – so 

weit, dass einige klassische Webhosting- 

Anbieter überhaupt keine dedizierten 

Webserver mehr im Programm haben. 

Stattdessen spielt Virtualisierung eine immer 

größere Rolle, seit die Technik hier so 

weit fortentwickelt wurde, dass ein vollvirtualisierter 

Server mit KVM-Technik 

von einem physikalisch eigenständigen 

Gerät in seiner Leistungsfähigkeit und 

Flexibilität kaum mehr zu unterscheiden 

ist oder sogar mehr Flexibilität ohne damit 

damit früher oft verbundene Nachteile 

bietet. Komplett auf Virtualisierung 

bei Rootservern setzen beispielsweise 

Host Europe, Alfahosting, Domainfactory 

und Verio. 

In dieser Übersicht 

Internet Magazin stellt dedizierte Linux-/BSD-Server 

bis zu einer Preisgrenze 

von 100 Euro vor, die mindestens die 

folgenden Kriterien erfüllen: 

» dedizierte Server 

» voller Root-Zugriff 

» Linux/BSD-Betriebssystem 

Weitere Hoster setzen verstärkt auf Managed 

Server, die inzwischen ebenfalls 

durch intelligente Lösungen weit mehr 

geworden sind als nur hardwaremäßig 

leistungsfähigere Shared-Hosting-Pakete. 

Oft sind gerade günstigere Managed-Server-Angebote 

zudem virtualisiert. Managed 

Server sind im High-End-Bereich erste 

Wahl beispielweise bei All-inkl.com, 

Goneo, Mittwald und bei der Deutschen 

Telekom. Darüber hinaus haben natürlich 

auch einige Anbieter, die in der 

Übersichtstabelle aufgelistet sind, Produkte 

jenseits unserer Preisgrenze, beispielsweise 

1&1, http.net und Euserv. 

Dedizierte Server gefragt 

Trotzdem gibt es natürlich nach wie vor 

physikalisch eigenständige, dediziere Server 

und einige Hoster bauen ihre Angebote 

in diesem Bereich sogar weiter aus. 

Nötig ist ein physikalisch eigenständiger 

Server unter anderem dann, wenn der 

Kunde selbst mit Virtualisierung arbeiten 

möchte, also beispielsweise mit Windows 

Hyper-V, VMware, KVM oder Xen. 

Und natürlich eignen sich Rootserver 

sehr gut für alle möglichen Zwecke abseits 

des eigentlichen Website-Hostings. 

Die Dienstleistung des Hosters besteht 

dann vor allem darin, einen Server zu beschaffen, 

zu warten und in einer sicheren 

Umgebung zu betreiben, ohne dass der 

Kunde sich im die Technik kümmern 

muss. Der Server wird vom Kunden verwendet, 

als stünde er im eigenen Serverraum 

– für Backups, als Mail-Server oder 

für alle möglichen anderen Prozesse, bei 

denen sich Speicher- und Rechenleistung 

auslagern lassen. Dabei kann der Kunde 

aber trotzdem einen auch physikalisch 

greifbaren, eigenen Server einsetzen. 

Der Trend bei den dedizierten Servern 

geht dabei in zwei Richtungen: Am unteren 

Ende machen Hoster die Angebote 

durch günstigere Preise attraktiver – bei 

Euserv Internet kostet der günstigste Rootserver 

17,95 Euro monatlich, bei OVH sogar 

nur 14,99 Euro, Server4You steigt bei 

18,99 Euro ein, Strato verlangt 29 Euro 

für dem günstigsten dedizierten Server 

und Webtropia hat neben den günstigsten 

Standardprodukt für 24,99 Euro auch regelmäßig 

sogenannte „Economy Server“ 

für 19,99 Euro, abhängig von der Verfügbarkeit 

dieser (gebrauchten) Server. 

Auf der anderen Seite gibt es aber auch 

einen Markt bei den sehr hochpreisigen 

Servern jenseits der 100-Euro-Grenze, die 

Internet Magazin in dieser Marktübersicht 

definiert hat. Hier gibt es einen stabilen 

Markt, auf dem höchste Performance und 

zugleich aus diversen Gründen ein tatsächlich 

physikalisch eigenständiger Server 

unabdingbar sind. Von den Hostern, 

die in früheren Marktübersichten des Internet 

Magazins noch enthalten waren, 

bringt beispielsweise Internet24.de nur 

noch Produkte mit einem Preis von über 

100 Euro monatlich auf den Markt. Auch 

UDmedia und Webhoster.de bewegen 

sich in diesem Segment. 

Langer Lebenszyklus 

In einem Punkt unterscheiden sich physikalisch 

eigenständige Root-Server (ebenso 

wie Managed Server) grundlegend 

von anderen Hosting-Produkten: Der 

Kunde mietet einen ganz bestimmten 


Dedizierte Linux-Rootserver | WEBBUSINESS 

Server, dessen Hardware-Ausstattung 

und Leistung sich auch nach Jahren 

nicht ändert, denn es bleibt ja immer 

der physikalisch identische Server. Beim 

Shared Hosting und virtuellen Servern 

dagegen sind regelmäßige Leistungsanpassungen 

und neue Features auch für 

Bestandskunden möglich und durchaus 

üblich. Besonders wichtig ist bei der 

Entscheidung für einen Rootserver daher, 

bei der Ausstattung besonders genau 

hinzusehen. Denn einmal gewählt 

ist nachträglich in der Regel nichts mehr 

zu ändern. 

Root-Server-Angebote haben einen relativ 

langen Lebensrhythmus. Das hängt 

unter anderem damit zusammen, dass 

bei einem guten, physikalisch eigenständigen 

Root-Server die Komponenten 

perfekt aufeinander abgestimmt sein 

müssen und der Hoster gute Preise oft 

auch nur dann anbieten kann, wenn er 

eine ausreichende Stückzahl des gleichen 

Servers ordert oder baut. Erst wenn 

diese Server verkauft sind – ob regulär 

oder später als Aktionsware – wird er 

eine neue Server-Serie auflegen. Besonders 

ärgerlich kann es sein, wenn man 

als Kunde – mangels genauerer Prüfung 

und ohne es zu ahnen – ein Produkt 

bestellt, das schon zwei Monate später 

durch eine neue, leistungsfähigere Serie 

abgelöst wird. 

Günstige Alt-Server 

Ältere Rootserver, die von ihren bisherigen 

Mietern zugunsten neuer, meist 

leistungsfähigerer Angebote aufgegeben 

werden, nutzen Hoster oft noch einmal 

als Aktionsware oder für die Angebote 

bei Billigablegern, wo – oft mit reduzierten 

Serviceleistungen – die Altgeräte 

zu unschlagbar günstigen Preisen angeboten 

werden. Das ist vor allem für User 

interessant, die sich gut auskennen, keine 

absolute Top-Performance brauchen, dafür 

aber die günstigen Preise zu schätzen 

wissen. Das ist sowohl für anspruchsvollere 

Hobby-Webmaster interessant 

als auch für Kunden, die einen solchen 

Server beispielsweise als Staging-Server, 

für Backups oder allgemein für andere 

Anwendungen einsetzen, die zwar einen 

eigenen Server verlangen, aber mit 

älterer und damit günstigerer Technik gut 

zurechtkommen. 

Änderungen und Neuerungen 

Bei der großen Bewegung am Markt der 

Rootserver hat sich auch bei den Anbietern 

einiges getan. So hat OVH beispielsweise 

die Produkte der Schwestermarke 

isgenug.de ins eigene Portfolio integriert 

und damit die Palette der Server-Angebote 

abgerundet. 

Am radikalsten hat 1blu sein Programm 

bei den dedizierten Servern umgestellt: 

Zu einem attraktiven Preis von 79 Euro 

monatlich gibt es jetzt nur noch einen 

einzigen, leistungsstarken Rootserver 

statt bislang fünf Dedi-Produkten. 1blu 

gehört ebenfalls zu den Hostern, die im 

Serverbereich schon sehr früh auf intelligente 

Virtualisierung gesetzt haben und 

hier sehr kosteneffiziente, aber leistungsfähige 

Produkte anbieten. 

Aufgefrischt und mit mehr Perfomance 

ausgestattet haben ihr Angebot auch 

http.net, Internet X, Euserv, Hetzner und 

Serverloft, letzter auch einhergehend mit 

einer Preissenkung von 99 auf 69 Euro 

für den günstigsten Server. 

Komplett überarbeitet haben ihr Server- 

Angebot Server4You, Strato und Webtropia. 

Bei allen drei Anbietern liegt der 

Einstiegspreis sehr niedrig und die Palette 

deckt alle Bedürfnisse im Preissegment 

unter 10 Euro ab. Interessant bei Strato: 

Einer der Server ist auch mit schnellem 

SSD-Datenspeicher erhältlich. SSD- 

Speicher gibt es außer bei Strato übrigens 

auch bei einem Server von Euserv sowie 

optional bei Serverloft. 

Franz Neumeier 



Dedizierte Linux-Rootserver, Teil 1 

Dedizierte Linux-Rootserver 

Anbieter 1&1 1blu Euserv Internet Hetzner 

Website www.1und1.de www.1blu.de www.euserv.de www.hetzner.de 

Produkte Server 2/4/4i/XL 6 Dedicated Server XP Misurfi S/MD/LD/ XLD AMD/ 

XLD, Prime64 M 12/ M Giga 

12/L 12/SSD 12, Filer M/L 

EX 4/4 S/5/6/ 

6 S/8 S 

KONDITIONEN 

Preis pro Monat in 

Euro 

Einrichtungsgebühr 

in Euro 

39,99/59,99/79,99/99,99 69 17,95 bis 99,95 49 bis 99 

-/49,99, XL6: 99,99 0 oder 89 Misurfi: S, MD und LD 49 

Euro, Misurfi XLD 99 Euro, 

Prime64: 99 Euro, Filer: 0 

Euro; 12-Monats-Vertrag: 0 

Vertragslaufzeit in 12/6 1 oder 12 1 oder 12 1 

Monaten 

Backbone in GBit/s 250 mehrere redundante 350 250 

GBit-Leitungen 

TECHNISCHE AUSSTATTUNG, TEIL 1 

Anbindung im Rechenzentrum 

in MBit/s 

Garantierte Netz-Verfügbarkeit 

in Prozent 

Garantierte Hardware- 

Verfügbarkeit in 

Prozent 

Überwachung der 

Server-Funktionsfähigkeit 

Prozessortyp 

100 1000 Misurfi S: 100, ab Misurfi MD: 

1000, Prime64: 100 ( 1000), 

Filer: 100 ( 1000) 

99,9 99 99-99,9 99 

99,9 99 99-99,9 

bei Option "Managed" ▲ ▲ 

AMD Dual Core/AMD Quad 

Core/Intel E3-1220/AMD 

Six Core 

Xeon E3-1230V2 

Intel Atom/Athlon64 

3000+/Athlon64 X2 oder 

Intel Core 2/Athlon II X4 

Quad Core/Core I5 Quad 

Core/Xeon E3-1230/Xeon 

E3-1230/Opteron 4280/ 

Xeon E3-1230/AMD64/ 

Intel Core2 

49/59/0/69/ 

149/149 

100 (1 GBit/s gegen 

Aufpreis) 

i7-2600 Quad Core/i7- 

2600 Quad Core/i7-920 

Quad Core/Xeon E3-1245 



Quad Core 

Prozessorleistung 

(Kerne & GHertz) 

2x2,2/4x2,6/4x3,1- 

3,4/6x2,8-3,5 

4x3,3 1x1,4/1x1,6/2x1,6/4x3,0 

/4x3,0/4x3,2/4x3,2/8x2, 

8/4x3,2/6x2,8/1x1,6/1x 

1,6/2x1,6 

2x3,4/2x3,4/4x2,67/4x3, 

3/4x3,3/4x3,4 




Anbieter 1&1 1blu Euserv Internet Hetzner 

Website www.1und1.de www.1blu.de www.euserv.de www.hetzner.de 

Produkte Server 2/4/4i/XL 6 Dedicated Server XP Misurfi S/MD/LD/ XLD AMD/ 

XLD, Prime64 M 12/ M Giga 

12/L 12/SSD 12, Filer M/L 

EX 4/4 S/5/6/ 

6 S/8 S 


RAM in GByte 2/4/12/16 16 2/2/4/16/16/16/16/ 

32/16/2/4 

16/32/24/16/32/32 

Festplatte(n) in GByte 

2x250/2x750/2x1000/ 

2x1000 

2x500 

1000/2x160/2x500/2x 

1000/2x1000/2x1000/ 

2x1000/2x2000/2x120 

SSD/2x1500/4x2000 

4x3000/4x3000/2x750/ 

2x3000/2x3000/ 

Software-RAID ▲/▲/▲/▲ ▲ ▲ 

Hardware-RAID / / / 

Remote Console ▲/▲/▲/▲ ▲ 

Remote Reboot ▲/▲/▲/▲ ▲ ▲ ▲ 

manueller Reset 24/7 ▲/▲/▲/▲ ▲ ▲ ▲ 

FEATURES 

Inklusiv-Domains 1/1/1/1 1 

DNS-Verwaltung ▲/▲/▲/▲ ▲ ▲ 

eigene IP-Adresse 1/1/1/1 ( bis 7) 2 1/4/4/4/5/5/5/5/5/5/5 1 

Transfervolumen in ∞ ∞ 5/5/5/5/5/10/10/10/10 ∞ ***** 

TByte 

/10/10 **** 

zusätzliches Transfervolumen 

in Euro/ 

GByte 

Administrationssoftware 

kostenlos kostenlos 6,50 Euro pro Tbyte kostenlos (6,90 Euro/ 

Tbyte für 100 Mbit/s) 

Parallels Plesk Panel 11 

unlimitierte Domainzahl 

eigenes SSL-Zertifikat / / /▲ ▲ 

Plesk* 

SysCP, Webmin, Confixx*, 

Plesk* 

Webmin, Plesk*, cPanel* 

Besonderheiten 

Rescue System, FTP 

Backup ( ), kostenloser 

Hardwaretausch im Fehlerfall, 

1 Tag Einrichtung 

garantiert 

KVM over LAN (IPMI) 

24x7 Betriebsystemwechsel 

über Webinterface, 

Rescue-/Not-System, 

Reset und Reinstall über 

Webinterface, reverse DNS, 

100-Gbyte FTP-Backup 

– 

▲ = ja = nein 

= optional ∞ = unbegrenzt 

* optional gegen Aufpreis 

** Drosselung der Bandbreite bei Überschreitung eines festgelegten Volumens 

*** nach aktueller Verfügbarkeit 

**** Drosselung der Bandbreite bei Überschreitung eines festgelegten Volumens; 

volle Geschwindigkeit jenseits des Traffic-Limits gegen Aufpreis 

***** Drosselung der Bandbreite bei Überschreitung von 10 Tbyte Transfervolumen 





Anbieter http.net IntetNetX KOS-Online OVH 

Website www.http.net www.internetx.com www.kos-online.de www.ovh.de 

Produkte Mini Power Starter Entry 6.0 Value S/M/L/XL, Economy L/ 

XL/XXL 

KONDITIONEN 

Preis pro Monat 

in Euro 

Einrichtungsgebühr 

in Euro 

78 99 Euro (o. MwSt., nur für 

gewerbliche Kunden) 

97,50 149 Euro (12 Monate Laufzeit)/99 

Euro (24 Monate 

Laufzeit) 

79 14,99/19,99/24,99/34,99/ 

49,99/59,99/84,99 

99 oder 199 0 

Vertragslaufzeit in 6 12/24 1 oder 12 1 

Monaten 

Backbone in GBit/s 2 mehr als 50 350 über 2000 



in MBit/s 

1000 1000 100 100 


in Prozent 



Prozent 



Prozessortyp 



99,95 nahezu 100% 97 99/99/99/99/99,9/99,9/ 

99,9 

99,95 nahezu 100% 97 Austausch innerhalb 

4 Stunden 

▲ ▲ ▲ ▲ 

Intel ATOM D510 2-Core 

1,66 GHz 

Xeon Xeon X3440 Celeron oder Atom/Atom 

230 oder D425/Atom 

330 oder N2800/Core i3 

2130/Core i3 2130/Core 

i5 2400/Xeon E3 1245v2 

2x1,66 4x3,1 4x2x2,53 1x1,2/1x1,6/2x1,6/2x3,4 

/2x3,4/4x3,1/4x3,4 

RAM in GByte 4 4 24 2/2/4/8/16/16/32 

Festplatte(n) in GByte 1x500 2x500 2x1000 500/1000/2x500/2x1000 

/2x1000/2x2000/2x2000 




Anbieter http.net IntetNetX KOS-Online OVH 

Website www.http.net www.internetx.com www.kos-online.de www.ovh.de 

Produkte Mini Power Starter Entry 6.0 Value S/M/L/XL, Economy L/ 

XL/XXL 


Software-RAID ▲ / /▲/▲/▲/▲/▲ 

Hardware-RAID ▲ / / / / / / 

Remote Console 

Remote Reboot ▲ ▲/▲/▲/▲/▲/▲/▲ 

manueller Reset 24/7 ▲ ▲ ▲/▲/▲/▲/▲/▲/▲ 

FEATURES 

Inklusiv-Domains / / / / / / 

DNS-Verwaltung ▲ ▲ (bei Domainkunden 

auch über die Administrations-Oberfläche 

AutoDNS 

3.0) 

▲ 

▲/▲/▲/▲/▲/▲/▲ 

eigene IP-Adresse ▲ 1 4 1/1/1/1/1/1/1 

Transfervolumen in 

TByte 


in Euro/ 

GByte 

500 200 ∞ 5/5/5/5/∞/∞/∞ 

0,20 0,49 Euro kostenlos 1,19 


eigenes SSL-Zertifikat 

Besonderheiten 

Confixx*, Plesk* Plesk Panel SysCP, Webmin, Confixx*, 

Plesk * 

Zugang zum http.net- 

Domain- und DNS-Robot- 

System 

nur für gewerbliche 

Kunden 

24x7 Rescue-/Notsystem, 

Standard-Monitoring, 

Webreset, Reinstall- 

Betriebssystem, 100 

Gbyte FTP-Backup 

OVH Release (basierend 

auf Webmin) 

– 













Anbieter Server4You Serverloft Strato Webtropia 

Website www.server4you.de www.serverloft.de www.strato-pro.de www.webtropia.com 

Produkte 

Eco Server Entry X6/Large 

X6/Big X6, Pro Server Power 

X6/ PlusPower X6/ UltraPower 

X6 

Perfect Server L - Xeon 3.0 

Root Server Level 

1/2/3/4/5/6, MultiServer 

Level 1/2/3 

Economy Server 4850-2 ***/ 

i5-3450 ***/i7-3770 ***/ 

i7-3930 ***, Micro S/M/L, 

Pro S/M/L, Enterprise S 

2.0/M 2.0 

KONDITIONEN 

Preis pro Monat in 

Euro 

18,99 bis 58,99 69 29/39/49/69/89/99/ 

39/59/79 

Einrichtungsgebühr 149 oder mtl. 10 Euro 149 oder mtl. 10 Euro 

in Euro 

Vertragslaufzeit in 1 1 1 1 

Monaten 

Backbone in GBit/s 150 550 50 170 



in MBit/s 


in Prozent 



Prozent 



Prozessortyp 



24,99/44,99/54,99/99,99/ 

17,99/29,99/49,99/59,99/ 

79,99/99,99/59,99/89,99 

100 100 100 (1000 ) 100/100/100/100/100/100/ 

100/1000/1000/1000/ 

1000/1000/1000 

99/99/99/99,9/99,9/99,9 99,9 99 99,5/99,9 (Pro und Enterprise) 

99/99/99/99,9/99,9/99,9 99,9 99 

Athlon X2 Dual-Core/Athlon 

II Quad-Core/Athlon 

II Quad-Core/Opteron 

3280/Opteron 3280/Opteron 

3280 

2x1,8/4x2,3/4x2,3/8x2,4 

/8x2,4/8x2,4 

▲ ▲ ▲ 

Xeon E3-1270 Sandy Bridge G530/ 

Opteron 1381/Opteron 

1385/Xeon E3- 

1230v2/2xOpteron 4180/ 

Xeon E5-1650/Opteron 

1212 HE/Opteron 1381/ 

Opteron 1385 

4x3,4 2x2,4/4x2,5/4x2,7/4x3,3 

/2x6x2,6/6x3,2/2x2,0/ 

4x2,5/4x2,7 

AMD X2 4850e/Core 

I5-3450/Core I7-3770/ 

Core i7-3930k/Turion II 

Neo (N40L)/Turion II Neo 

(N40L)/Turion II Neo 

(N40L)/Xeon E3-1230/ 

Xeon E3-1240/Xeon E3- 

1270/Xeon E5504/Xeon 

E5504 

2x2,5/4x3,1/4x3,5/6x3, 

2/2x1,5/2x1,5/2x1,5/4 

x3,2/4x3,3/4x3,4/4x2,0 

/4x2,0 




Anbieter Server4You Serverloft Strato Webtropia 

Website www.server4you.de www.serverloft.de www.strato-pro.de www.webtropia.com 

Produkte 

Eco Server Entry X6/Large 

X6/Big X6, Pro Server Power 

X6/ PlusPower X6/ UltraPower 

X6 

Perfect Server L - Xeon 3.0 

Root Server Level 

1/2/3/4/5/6, MultiServer 

Level 1/2/3 

Economy Server 4850-2 ***/ 

i5-3450 ***/i7-3770 ***/ 

i7-3930 ***, Micro S/M/L, 

Pro S/M/L, Enterprise S 

2.0/M 2.0 


RAM in GByte 4/8/16/16/24/32 8 4/4/8/16/16/32/2/4/8 4/16/32/64/4/8/ 

16/16/24/2/8/16 

Festplatte(n) in GByte 2x320/2x1000/2x1500/ 

2x2000/2x2000/2x2000 

2x1000 (SSD ) 

1000/2x500/2x1000/2x 

2000/2x1000/2x1000 

SASund 1x128 SD/2x250/ 

2x500/2x1000 

Software-RAID ▲ ▲ /▲/▲/▲/▲/▲/▲/ 

▲/▲ 

Hardware-RAID ( ) 

2x500/2x1000/2x2000/ 

2x3000/1x160/2x500/ 

2x3000/2x1000/1x1000/ 

1x1000/2x1000/2x1000 

▲/▲/▲/▲/ /▲/▲/ 

▲/▲/▲/▲/▲/▲/▲ 

Remote Console ▲ /▲/▲/▲/▲/▲/▲/ 

▲/▲ 

/ / / / / / /▲/ 

▲/▲/▲/▲/▲ 

Remote Reboot ▲ ▲ ▲ ▲ 

manueller Reset 24/7 ▲ ▲ ▲ (Power-Reset-Switch 

über Kundensystem 

schaltbar) 

FEATURES 

Inklusiv-Domains 1 

DNS-Verwaltung ▲ ▲ ▲ ▲ 

eigene IP-Adresse 1 (weitere ) bis zu 4 IPs kostenfrei 2/2/2/2/2/2/4/16/16 1 

Transfervolumen in 

TByte 


in Euro/ 

GByte 

∞ 5000 ∞ ** 10000 

kostenlos 0,19 kostenlos 9,99 pro Tbyte 


Plesk 10/11 Plesk Plesk/Plesk/Plesk/Plesk/ 

Plesk/Plesk/-/-/- 

eigenes SSL-Zertifikat 

Besonderheiten – – – – 

Plesk 11, Teklab, ISP- 

Config 










WEBBUSINESS | Workshop Owncloud 

Jedem seine eigene Cloud 

Sie ist als optimale Lösung für den zeit- und ortsungebundenen Zugriff auf wichtige 

Dokumente und Daten in aller Munde: die Cloud. Immer mehr Unternehmen 

spielen mit dem Gedanken, eine eigene Cloud in ihre Infrastruktur zu integrieren. 

Doch bislang meistert nur Owncloud diese Aufgabe mit Bravour. 


Owncloud verspricht volle Kontrolle über 

die eigene Cloud. In diesem Workshop 

lernen Sie, 

» wie Sie eine eigene Cloud aufsetzen 

und 

» wie Sie mit Owncloud arbeiten. 

Gerade bei privaten Anwendern sind 

Cloud-Services wie Dropbox oder 

Google Drive beliebt, denn Sie erlauben 

es, Daten jederzeit und überall verfügbar 

zu machen. Doch für den kommerziellen 

Einsatz sind derlei Angebote weniger geeignet, 

weil die Nutzer nicht die volle 

Kontrolle über die Cloud-Lösung haben. 

Ein weiteres Problem für Unternehmen: 

Wie integriert man eine Cloud in eine bestehende 

IT-Infrastruktur? Hier beschreitet 

Owncloud einen eigenen Weg und 

erlaubt es, interne und externe Speicher 

miteinander zu kombinieren. 

Owncloud bietet neben einer Dateiund 

Medienverwaltung auch Funktionen 

für die Verwaltung von Kontakten, 

Terminen oder Lesezeichen. Die 

Nutzung und Administration der PHPbasierten 

Umgebung erfolgt über eine 

komfortable Weboberfläche, die prinzipiell 

auch die Anbindung via Web- 

DAV erlaubt. Für die Umgebung stehen 

außerdem native Clients für Mac OS 

X, Linux und Windows bereit. Neben 

der frei verfügbaren Community Edition 

existieren zwei kommerzielle Angebote: 

Business Edition beziehungsweise 

Enterprise Edition mit Zusatzfunktionen 

und Servicedienstleitungen. 

Cloud in Betrieb nehmen 

Owncloud ist für die Ausführung auf 

einem Linux-System prädestiniert. Bevor 

Sie die Cloud-Umgebung auf dem Server 

installieren, sind einige Systemvoraussetzungen 

zu erfüllen. Sie benötigen insbesondere 

einen Apache-Webserver samt 

PHP-Installation (höher PHP 5.3). Außerdem 

müssen verschiedene PHP- und 

CURL-Komponenten auf dem Server installiert 

sein. Mit folgenden Kommandos 

installieren Sie die benötigten Module: 

apt-get install apache2 php5 php5- 

json php-xml php-mbstring php5-zip 

php5-gd 

apt-get install php5-sqlite curl libcur 

l3 libcurl3-dev php5-curl php-pdo 

Sie benötigen kein WebDAV-Modul wie 

mod_webdav, um per WebDAV auf die 


Workshop Owncloud | WEBBUSINESS 

Cloud-Daten zugreifen zu können, denn 

Owncloud verfügt über eine eigene entsprechende 

Komponente. 

Als Nächstes laden Sie sich die aktuelle 

Version 4.5.x herunter und extrahieren 

das Archiv: 

tar -xjf pfad/zum/download-ordner/ 

Owncloud-4.5.x.tar.bz2cp -r Owncloud 

/pfad/zum/webserver 

Der nächste Schritt dient der Konfiguration 

der Verzeichnisberechtigungen. Der 

Besitzer des Webservers muss ebenfalls 

folgende Verzeichnisse der Owncloud- 

Installation besitzen: 

» apps 

» data 

» config 

Dazu führen Sie folgenden Befehl aus: 

chown -R www-data:www-data /pfad/zu/ 

Owncloud/install/data 

Ersetzen Sie dabei www-data:www-data 

mit den Benutzer- und Gruppennamen 

des Webserver-Besitzers. Beachten Sie, 

dass das Verzeichnis /data erst nach der 

Setup-Ausführung erzeugt wird, nicht 

aber im Archiv vorhanden ist. 

Um die Sicherheit der Umgebung zu erhöhen, 

macht Owncloud Gebrauch von 

den .htaccess-Dateien. Dazu müssen Sie 

die Option AllowOverride in der Virtual- 

Hosts-Konfigurationsdatei /var/www/ 

auf All setzen. 

Sie sollten außerdem a2enmod rewrite 

und a2enmod headers ausführen und anschließend 

einen Neustart des Apache- 

Webservers durchführen: 

service apache2 restart 

Die Datei .htaccess im Owncloud- 

Ordner muss außerdem für den Server 

schreibbar sein. 

Dann ist der Installationsassistent dran. 

Rufen Sie diesen mit dem Browser auf 

dem Owncloud-System mit http://localhost 

beziehungsweise http://localhost/ 

Owncloud auf. Wenn Sie eine erste Testumgebung 

oder nur eine recht einfache 

Cloud-Umgebung aufbauen wollen, richten 

Sie mit Owncloud eine SQLite-Datenbank 

ein. Bei größeren Installationen 

sollten Sie zu MySQL oder zu PostgreSQL 

greifen. Legen Sie dann das Administratorkonto 

an. Damit ist die Cloud-Umgebung 

eingerichtet und Sie können sich in 

die Umgebung einloggen. 

Einstieg in die Administration 

Die Owncloud-Webschnittstelle präsentiert 

Ihnen eine übersichtlich gestaltet 

Admin-Konsole, über die Sie auf die verschiedenen 

Ablagen und Funktionen sowie 

auf die administrativen Einstellungen 

zugreifen können. Links finden Sie das 

Navigationsmenü, das den Zugriff auf 

die Dateiablage, Kontakte, Aufgaben und 

Termine erlaubt, rechts finden Sie die zugehörigen 

Einstellungen. Im unteren Bereich 

der Navigationsleiste finden Sie außerdem 

die administrativen Funktionen 

wie die Benutzerverwaltung. 

Um sich die Arbeit mit Owncloud zu vereinfachen, 

sollten Sie unter Settings/Personal 

zunächst die Spracheinstellungen 

bearbeiten und die deutsche Sprachversion 

aktivieren. Anschließend ist die Benutzerumgebung 

nahezu durchgängig in 

deutscher Sprache verfügbar. Die wichtigsten 

administrativen Einstellungen sind 

über das Menü Administration verfügbar. 

Hier können Sie zunächst festlegen, wie 

groß ZIP-Archive sein dürfen, um von 

Owncloud akzeptiert zu werden. Die 

Owncloud-Administration erlaubt Ihnen 

auch den Export der Cloud-Umgebung. 

Sie haben dabei die Wahl, ob Sie die 

gesamte Umgebung inklusive der System- 

und Benutzerdaten, nur die Systemdateien 

oder nur die Benutzerdaten exportieren 

wollen. Damit steht Ihnen ein 

einfacher Sicherungsmechanismus zur 

Verfügung. Owncloud unterstützt auch 

die Ausführung von Cronjobs, mit denen 

Sie beispielsweise die Durchführung von 

Sicherungen automatisieren können. 

Im Bereich Freigabe sollten Sie die Option 

Freigabe-API aktivieren, damit die 

Freigabefunktionen der Umgebung genutzt 

werden. Damit die Nutzer Dateien 

mithilfe von Links öffentlich teilen können, 

sollten Sie die Option Links erlauben 

einschalten. Sie können das Teilen von 

Objekten auch beschränken. Aktivieren 

Sie dazu einfach die Option Erlaubt Nutzern 

nur das Teilen in ihrer Gruppe. 

In der Owncloud-Administration können 

Sie außerdem den Log-Level anpassen. 

Damit legen Sie fest, wie detailliert 

die Protokollausgabe sein soll. In der 

Standardeinstellung Fatal werden nur 

schwerwiegende Fehler aufgezeichnet. 

Treten unvorhergesehene Probleme auf, 

sollten Sie den Level herabsetzen und 

Ein erster Blick auf die 

Webschnittstelle von 

Owncloud und die administrativen 

Einstellungen. 


WEBBUSINESS | Workshop Owncloud 

die Logfile-Informationen auf entsprechende 

Hinweise prüfen. 

Benutzer- und App-Verwaltung 

Der Zugriff auf die Owncloud-Umge- 

bung wird über die integrierte Benutzer- 

verwaltung gesteuert, die Sie im Einstellungen-Menü 

finden. Dort können Sie 

neue Benutzer anlegen. Dazu 

geben Sie im Kopfbereich 

den Benutzernamen und 

das Passwort an und wei- 

sen dem neuen Benutzer 

eine Gruppe zu. Mit einem Klick auf Anlegen 

erscheint der neue Benutzer in der 

Benutzerverwaltung. 

Schmerzlich vermisst man indes eine Importfunktion, 

die den einfachen Import 

bereits bestehender Benutzerdaten erlauben 

würde. Doch immerhin können 

Sie Owncloud um ein LDAP-Backend 

erweitern, das den Zugriff auf einen 

LDAP-Server erlaubt. 

Dazu müssen Sie zunächst das LDAP- 

Modul über das Apps-Menü aktivieren. 

Sie finden es im unteren Bereich bei 

den Erweiterungen von Drittanbietern. 

Anschließend ist das Modul über die 

Server-Administration verfügbar und 

Sie können einen bestehenden LDAP- 

Server integrieren. Einziges Manko: Das 

LDAP-Backend befindet sich noch in 

der Betaphase. Daher ist mit einer eingeschränkten 

Funktionalität zu rechnen. 

Im Apps-Menü der Owncloud-Einstellungen 

finden Sie eine Fülle weiterer 

interessanter Add-ons. Die aktivierten 

Module sind fett hervorgehoben. Zu den 

interessantesten Modulen gehört bei- 

spielsweise Internal Messages. Anhand 

der Modulbezeichnung erkennt man 

direkt, was es leistet: Es erweiterte 

Owncloud um ein internes 

Messaging-System. Sind 

umfangreiche Kommunikationsmöglichkeiten 

gewünscht, kann man 

über das Modul Roundcube auch einen 

IMAP-Server integrieren. 

Infos zum Artikel 

Alles rund um die freie Cloud-Umgebung 

Owncloud finden Sie auf der Projektsite 

unter owncloud.org. Dort steht auch 

ein ausführlicher Dokumentationsbereich 

zur Verfügung. Interessant für 

Firmen hierzulande: Die Entwickler betreiben 

in Nürnberg ein eigenes Büro. 

Feinschliff 

Ist die Umgebung einmal eingerichtet, 

geht es anschließend darum, sie für den 

Praxiseinsatz zu optimieren. Wenn Sie 

den ersten Upload von Dateien in die 

Cloud ausführen, werden Sie feststellen, 

dass dieser schon bei einer kleinen Datei 

fehlschlägt. Der Grund: Owncloud basiert 

auf PHP und nutzt daher die Konfiguration 

der PHP-Installation. Die lässt standardmäßig 

nur Uploads bis 2 MByte zu. 

Um aber auch den Upload von größeren 

Dateien zu ermöglichen, müssen Sie die 

Konfiguration der php.ini anpassen. Bei 

Opensuse und Ubuntu finden Sie die Datei 

unter /etc/php5/apache2/php.ini. Mit 

dem Befehl find / -name php.ini können 

Sie auf einem Linux-Server schnell herausfinden, 

wo Ihre Konfigurationsdatei 

abgelegt ist. Um einen Upload größerer 

Dateien zuzulassen, passen Sie die Konfiguration 

beispielsweise wie folgt an: 

upload_max_filesize = 500 MB 

post_max_size = 600 MB 

In diesem Fall ist das Hochladen von Dateien 

mit maximal 500 MByte möglich. 

Da in den meisten Cloud-Umgebungen 

nicht nur Dokumente und Multimedia- 

Dateien abgelegt werden, sondern auch 

potenzielle Viren- und Trojaner-Träger, 

sollten Sie das Antivirenmodul in den 

Apps aktivieren. Es handelt sich um eine 

ClamAV-basierte Lösung, die ein Mehr 

an Schutz verspricht. 

Durch das Aktivieren von weiteren Modulen 

gewinnt die Cloud-Umgebung weiter 

an Komfort. Sie können beispielsweise 

das standardmäßig installierte Kalendermodul 

um eine Notizfunktion ergänzen, 

indem Sie das Journal-Add-on installieren. 

Wollen Sie den Benutzern die Möglichkeit 

geben, ein Foto einzustellen, aktivieren 

Sie die User-Photo-App. 

In den Owncloud-Einstellungen 

finden Sie auch die App-Verwaltung, 

mit der Sie beispielsweise das 

WebDAV-Modul aktivieren können. 

Fazit 

Mit Owncloud steht der Einführung einer 

Cloud im eigenen Unternehmen nichts 

mehr im Wege. Die Installation und Konfiguration 

ist so einfach, dass Sie auch von 

weniger technisch versierten Anwendern 

zu bewältigen ist. Für die Zukunft hat das 

Entwickler-Team interessante Funktionen 

wie Load-Balancing angekündigt, die 

auch einen Einsatz in größeren Umgebungen 

ermöglichen sollen. 

Dr. Holger Reibold 


GRATIS ZUM JAHRESABO! 

JETZT BESTELLEN 

UND VORZUGSANGEBOT SICHERN! 

12 Ausgaben Internet Magazin im Abo 

+ HTML5-Handbuch 

HTML5-Handbuch 

€ 52,90 

für nur € 52,90 

HTML5-Handbuch 

Das Kompendium für Entwickler, Blogger, 

Webautoren und Programmierer! 

HTML5 ist die Sprache des Web. Und das Buch von 

Stefan Münz und Clemens Gull ist die Grammatik 

dazu. Wie einst die von Stefan Münz mitbegründete 

Onlinereferenz SELFHTML beantwortet dieses 

Buch alle Fragen zum neuen Internetstandard. Immer 

wichtiger wird dabei die Ausgabe auf Smartphones 

und Tablets, deshalb ist diesem Thema hier 

ein eigenes Kapitel gewidmet. Das unverzichtbare 

Standardwerk für jeden Webprofi! 

Jetzt bestellen unter 

www.internet-magazin.de/aboplus 

Nur im Inland gültig. Angebot solange Vorrat reicht. Sollte der abgebildete Artikel nicht 

mehr lieferbar sein, erhalten Sie einen qualitativ gleichwertigen Ersatzartikel.

TIPPS & TRICKS | Online-Recht 

Grenzenlos verkaufen 

Wendet sich ein Online-Händler an Kunden außerhalb der 

Landesgrenzen, so bezeichnet man seinen Webshop als Cross 

Border Shop. Die daran geknüpften juristischen Aspekte sind 

äußerst vielfältig. 

Das Medium Internet bringt es naturgemäß 

mit sich, dass die Grenzen 

zwischen einzelnen Staaten nicht existent 

erscheinen – bereits im Namen 

steckt ja schon die Internationalität des 

World Wide Web. Letztendlich kann sich 

jeder Nutzer auf der Welt im Prinzip jede 

Internetseite anschauen, unabhängig von 

Serverstandort oder der Anschrift des 

Site-Betreibers. Das hat zur Konsequenz, 

dass sich beispielsweise ein deutscher 

Online-Händler zwar mit seinen Angeboten 

nur an deutsche Kunden wenden 

kann. Allerdings kann er es natürlich 

nicht verhindern, dass sein Online-Shop 

auch im Ausland aufgerufen wird und 

eventuell auch Bestellungen von dort erfolgen. 

Es versteht sich von selbst, dass 

ein deutscher Händler nicht allen Eventualitäten 

vorbeugen und seinen Shop 

in allen Sprachen bereitstellen kann, nur 

weil es theoretisch möglich ist, dass auch 

Ausländer sein Angebot nutzen könnten. 

Dies ist jedoch dann anders zu bewerten, 

wenn der Shop-Betreiber bewusst 

eine ausländische Zielgruppe anspricht. 

Je mehr der Händler also mit seinen Aktivitäten 

ins Ausland zielt, desto mehr 

hat er gegebenenfalls auch ausländische 

Der Autor 

Der Autor Michael 

Rohrlich ist Rechtsanwalt 

und unter anderem 

auf das Recht der 

neuen Medien spezialisiert. 

www.ra-rohrlich.de 

Rechtsordnungen zu beachten. Nichts 

anderes gilt für im Ausland befindliche 

Shop-Betreiber, die sich mit ihrem Angebot 

von Waren beziehungsweise Dienstleistungen 

an deutsche Kunden wenden. 

Indizien 

Es kann mitunter dazu kommen, dass ein 

deutscher Online-Händler auch ausländische 

Gesetze beachten muss, und zwar 

unter Umständen selbst dann, wenn es 

gar nicht seine Absicht war, sich an ausländische 

Kunden zu wenden. 

Der Betreiber eines deutschen Online- 

Shops, der in deutscher Sprache gehalten 

ist und sich vornehmlich an deutsche 

Kunden wendet, muss seine Rechtstexte, 

also etwa die Widerrufsbelehrung, die 

Datenschutzerklärung oder die Allgemeinen 

Geschäftsbedingungen (AGB), nur in 

deutscher Sprache bereitstellen. Anders ist 

die Situation, wenn der Händler von sich 

aus seinen Shop in mehreren Sprachen 

vorhält. Dann müssen unter Umständen 

auch die Pflichtangaben in diesen Sprachen 

vorliegen. Und hierbei genügt es in 

aller Regel nicht, die eigenen Rechtstexte 

einfach 1:1 ins Englische, Spanische 

und so weiter zu übersetzen. Denn die 

deutschen Fernabsatzregelungen sind 

nicht ohne Weiteres auf ausländische 

Rechtsordnungen übertragbar. Jedenfalls 

im B2C-Bereich, wo zahlreiche verbraucherschützende 

Regelungen zu beachten 

sind, ist eine eingehende Rechtsberatung 

daher Pflicht. Folgende Kriterien 

sprechen grundsätzlich für die Ausrichtung 

des Online-Shops eines deutschen 

Betreibers auf einen 

ausländischen Markt: 

» ausdrücklicher Hinweis auf ausländische 

Kunden beziehungsweise 

einen ausländischen Markt 

» verschiedene Sprachfassungen 

» Verweis auf ausländische Rechtsvorschriften 

» Nutzung der Top-Level-Domain eines 

bestimmten Landes (zum Beispiel 

„CH“ für die Schweiz, „NL“ für die 

Niederlande oder „BE“ für Belgien) 

» Zweigstellen im Ausland 

» Auslandsversand/Möglichkeit zur Abholung 

der Ware im Ausland 

» Akzeptanz ausländischer Währung 

» Angabe ausländischer Bankverbindung 

» Art/Einzugsgebiet des Anbieters 

» Werbung auf ausländischen Websites 

Diese Auflistung erhebt natürlich keinen 

Anspruch auf Vollständigkeit. Je mehr 

der Kriterien jedoch vorliegen, desto 

eher ist ein Cross Border Shop anzunehmen. 

Dies hätte dann zur Konsequenz, 

dass der Betreiber beispielsweise auch 

Verbraucherrechte der Zielländer beachten 

müsste, an welche er sich richtet. 

Der jeweilige Onlineshop muss jedoch 

stets konkret und individuell begutachtet 

werden, um eine exakte Bewertung vornehmen 

zu können. Der Shop-Betreiber 

hat auch die Möglichkeit, in einer speziellen 

Erklärung festzulegen, in welche 

Staaten er verkaufen möchte und in welche 

nicht. Allerdings reicht ein solcher 

Disclaimer für sich genommen nicht aus, 

sodass auch der gesamte Rest des Shops 

danach ausgerichtet sein muss. Insbeson- 


Online-Recht | TIPPS & TRICKS 

dere sind die oben genannten Gesichtspunkte 

zu beachten. 

Anbieterkennzeichnung 

Für deutsche Internetseiten, die 

nicht nur rein privater Natur sind, 

also jedenfalls für Webshops, besteht 

die Pflicht zur Bereitstellung eines 

Impressums mit den entsprechenden 

Pflichtangaben. Dies ist juristisch inzwischen 

nicht weiter klärungsbedürftig, 

lediglich das eine oder andere Detail 

landet bisweilen noch vor den Gerichten. 

Ob ein Cross Border Shop auch auf 

seiner Version für Ecuador oder Indien 

ein Impressum in der jeweiligen Landessprache 

vorzuhalten hat, muss anhand 

der einschlägigen Rechtsordnungen 

überprüft werden. 

Das Landgericht (LG) Stuttgart hat in seinem 

Beschluss vom 13. Dezember 2011 

(Aktenzeichen: 17 O 408/11) entschieden, 

dass sich ein im Ausland sitzender 

Betreiber einer gewerblichen Website, die 

sich an deutsches Publikum wendet, auch 

an die hier geltenden Normen halten und 

ein Impressum bereitstellen muss. Dies 

gilt auch dann, wenn sich die Website 

nicht ausschließlich, sondern unter anderem 

auch an Deutsche wendet. 

Widerrufsrecht 

Das auf EU-Recht basierende Recht zum 

Widerruf eines online geschlossenen 

Vertrages innerhalb einer 14-Tages-Frist 

gilt im Grunde in der gesamten EU. Daher 

war es nicht überraschend, dass sich 

der Europäische Gerichtshof (EuGH) in 

seinem Urteil vom 5. Juli 2012 (Aktenzeichen: 

C-49/11) dahingehend geäußert 

hat, dass – wie unter anderem auch in der 

deutschen Rechtslage vorgesehen – ein 

Hyperlink auf eine Widerrufsbelehrung 

nicht ausreichend ist. Der Verbraucher 

muss form- und fristgerecht belehrt werden, 

das heißt die Widerrufsbelehrung 

muss ihn spätestens unverzüglich nach 

Vertragsschluss in Textform zugehen. 

Eine bloße Verlinkung auf die Widerrufsbelehrung 

auf der Website des Anbieters 

entspricht gerade nicht der vorgeschriebenen 

Textform. 

Das LG Karlsruhe hat Ende 2011 geurteilt, 

dass ein holländischer Händler bei 

seinen Angeboten auf ebay.de seine Widerrufsbelehrung 

nach den deutschen 

Vorschriften zu gestalten hat (Urteil vom 

16. Dezember 2011, Aktenzeichen: 14 

O 27/11 KkfH III). Indem er seine Waren 

nämlich gezielt auf der deutschen Ebay- 

Plattform zum Verkauf angeboten hat, 

muss er sich auch an die hierzulande 

geltende Rechtslage halten. 

Versandkosten 

Bei der Frage, ob die Angabe von Versandkosten 

ins Ausland zwingend beziehungsweise 

in einer bestimmten Form 

anzugeben ist, ist die deutsche Rechtsprechung 

leider derzeit nicht einheitlich. 

So hat beispielsweise das Oberlandesgericht 

(OLG) Hamm mit Urteil vom 

1. Februar 2011 (Aktenzeichen: I-4 U 

196/10) entschieden, dass fehlende Versandkosten 

für Lieferungen auf die deutschen 

Inseln beziehungsweise ins Ausland 

als relevanter Wettbewerbsverstoß 

zu werten sind und daher kostenpflichtig 

abgemahnt werden können. Sofern kein 

genauer Betrag angegeben werden kann, 

weil er beispielsweise von der Bestellmenge, 

vom konkreten Gewicht der Bestellung 

oder Ähnlichem abhängt, muss 

zumindest eine Berechnungsgrundlage 

genannt werden. Im Unterschied dazu 

hat das OLG Frankfurt a. M. entschieden, 

dass die AGB-Klausel „Bei Lieferung ins 

Ausland werden die Versandkosten individuell 

vereinbart“ zwar ebenfalls einen 

Wettbewerbsverstoß, allerdings nur eine 

Bagatelle darstellt (Beschluss vom 27. Juli 

2011, Aktenzeichen: 6 W 55/11). Als solche 

ist sie nicht abmahnfähig und daher 

von der Konkurrenz hinzunehmen. 

Gerichtsstand 

Private Kunden haben im Gebiet der EU 

die Möglichkeit, bei Rechtsstreitigkeiten 

mit ausländischen Händlern diese auch 

in ihrem Heimatland zu verklagen. So 

hat es jedenfalls der EuGH in seinem 

Urteil vom 6. September 2012 (Aktenzeichen: 

C-190/11) entschieden. Dies 

bedeutet natürlich einen großen Vorteil 

für Verbraucher, die sozusagen einen 

Heimvorteil genießen. Für Online-Händler 

bringt es die Gefahr mit sich, dass sie 

bei juristischen Auseinandersetzungen 

gegebenenfalls die Reise ins Ausland antreten 

und sich vor einem ausländischen 

Gericht verantworten müssen 

Fazit 

Die Einhaltung von ausländischen 

Rechtsvorschriften mag bei anderen Mitgliedsstaaten 

der Europäischen Union 

noch vergleichsweise einfach sein, da 

innerhalb der EU zahlreiche Gesetze 

weitgehend harmonisiert sind. Aber etwa 

bei der Schweiz (die kein EU-Mitglied ist) 

oder gar den USA, China oder Russland 

ist der Aufwand, einen solchen Webshop 

wirklich rechtssicher zu gestalten, enorm 

hoch. Daher kann Shopbetreibern nur 

geraten werden, den Gang zum Anwalt 

anzutreten, wenn sie mit dem Gedanken 

spielen, ihre Bemühungen ins Ausland 

zu verlagern oder wenn sie gar bereits 

einen Cross Border Shop besitzen. 

Rechtsanwalt Michael Rohrlich 

Links zum Thema 

Weitergehende Informationen zum 

Thema E-Commerce 

www.rechtssicher.info 

Website des Autors 

www.ra-rohrlich.de 

Blog des Autors zum Thema Online- 

Recht für Webmaster 

www.webmaster-onlinerecht.de 

Blog des Autors zum Thema Online- 

Rechte von Verbrauchern 

www.verbraucherrechte-online.de 


TIPPS & TRICKS | HTML, CSS, Javascript & PHP 

TIPPS & TRICKS 

CSS: Umschalten zur mobilen Version 

Wann immer die Breite des Fensters im 

Internet Explorer 10 geringer als 400 

Pixel ausfällt, ignoriert der Internet 

Explorer 10 den Meta-Tag viewport und 

verhindert gegebenenfalls das Umschalten 

zum betreffenden Stylesheet im 

responsiven Design. 

Dasselbe Problem tritt auf, wenn der Benutzer eines Microsoft-Surface-Tablets 

die Ausrichtung des Displays wechselt; 

auch in diesem Fall findet eine automatische Anpassung eines 

responsiven Layouts, etwa vom Hoch- zum Querformat, nicht 

statt. Weder Google Chrome noch Mozilla Firefox weisen im Metro-Modus 

ein vergleichbares Verhalten auf. Der Internet Explorer 

10 im Desktop-Modus rendert die Seite ebenfalls wie vorgesehen. 

Zum Glück können Sie dem Internet Explorer 10 im Metro- 

Modus das gewünschte Verhalten beibringen, indem Sie von 

einer W3C-Spezifikation namens „CSS Device Adaptation“ Gebrauch 

machen. CSS Device Adaptation erlaubt es Ihnen, Viewport-spezifische 

Deklarationen wie die Breite, die Zoomstufe und 

die Ausrichtung des Displays innerhalb von CSS unterzubringen. 

Die W3C-Spezifikation sieht die folgende Syntax vor: 

@viewport{ 

/* hier steht die betreffende viewport-Eigenschaft; */ 

} 

Internet Explorer 10 respektiert die Anweisungen einer @viewport-Regel, 

vorausgesetzt dass diese unter Angabe des -ms- 

Präfixes deklariert wurden. Konkret also: 

@-ms-viewport{ 

/* hier steht die betreffende viewport-Eigenschaft]; */ 

} 

Microsoft empfiehlt, dass Sie Ihren CSS-Stylesheets die folgenden 

Regeln hinzufügen 

@media screen and (max-width:400px) { 


width:320px; 

} 

} 

um eine feste Breite zu erzwingen. Unter Verwendung dieser 

Regel geschieht Folgendes: Für jede Viewport-Breite unterhalb 

von 400 Pixeln setzt Internet Explorer 10 diesen Wert auf 320 

Pixel. Das mag nicht immer empfehlenswert sein. Wem die 

statische px-Einheit ein Dorn im Auge ist, kann die obige Regel 

wie folgt anpassen: 


width: device-width; 

} 

Der einzige andere Browser, der mit der CSS Device Adaptation 

etwas anzufangen weiß, ist derzeit Opera. 

Interessanterweise hatte Microsoft diesmal einen guten Grund, 

von der sonst üblichen Implementierung von viewport als 

einem -Tag zugunsten von @viewport als einer CSS- 

Regel abzuweichen. Bei dem -Element viewport handelt 

es sich um eine Erfindung von Apple für das hauseigene 

iPhone, die andere Browser-Hersteller schnell übernommen 

haben, obwohl sie bisher nicht standardisiert wurde. Die CSS- 

Regel @viewport ist dabei, den W3C-Standardisierungsprozess 

Der Metro-Modus des 

Internet Explorers 10 

in Windows 8 erlaubt 

es dem Benutzer, ein 

Fenster am Bildschirmrand 

zu befestigen; 

der Browser in diesem 

Modus ignoriert jedoch 

das -Tag 

und schaltet nicht zur 

mobilen Version des 

Designs (Abbildung 

links), während andere 

Browser einschließlich Chrome problemlos auf die mobile 

Version umschalten (Abbildung rechts). 


HTML, CSS, Javascript & PHP | TIPPS & TRICKS 

erfolgreich abzuschließen. Im Lichte von Apples Entschlossenheit, 

das eigene geistige Eigentum gerichtlich zu verteidigen, ist 

es durchaus verständlich, dass Microsoft offenbar auf Nummer 

Sicher gehen wollte. 

Für Sie bedeutet es, dass Sie Ihren CSS-Stylesheets ab sofort die 

@-ms-viewport-Regel hinzufügen sollten, damit Ihre Layouts 

auf Windows 8-Geräten, in Opera und in künftigen Browsern 

tatsächlich responsiv sind: 

@-ms-viewport { width: device-width; } 

@-o-viewport { width: device-width; } 

@viewport { width: device-width; } 

Das -Element viewport gehört nach wie vor in das Markup 

für alle anderen Browser außer IE 10 und Opera. 

Wenn beim Wechseln der 

Ausrichtung des Displays 

eines Microsoft Surface- 

Tablets die Anpassung 

eines responsiven 

Layouts nicht stattfindet, 

fehlt dem Stylesheet die 

@-ms-viewport-Regel 

Internet Explorer 10 in Windows 8 

Unterstützung für Touch-Gesten korrekt 

erkennen 

Falls Sie zur Erkennung der Unterstützung von Touch-Ereignissen 

diesen Code verwenden: 

if ('ontouchstart' in window) { } 

müssen Sie ihn für den Internet Explorer 10 anpassen, sonst 

klappt die Erkennung nicht. Der benötigte Code sieht wie folgt 

aus: 

if ('ontouchstart' in window || window.navigator.msMax 

TouchPoints) { } 

und schon verhält sich auch der Internet Explorer 10 wie vorgesehen. 

 

 

 

Touch-Unterstützung testen 

 

 

 

 

var touchpoints = navigator.msMaxTouchPoints; 

if (touchpoints) { 

document.getElementById("touchInfo").innerHTML = touch 

points.toString(); 

} else { 

document.getElementById("touchInfo").innerHTML = "unde 

fined"; 

} 

 

 

 

AWS, Cloud 

Windows Powershell 

AWS-Benutzer mussten bisher endlose Stunden damit verbringen, 

.NET-SDK-Aufrufe in Powershell-Skripte zu hüllen, um sie 

direkt aus der Powershell aufrufen zu können. Doch von nun 

an entfällt diese mühsame Kleinarbeit. 

Amazons AWS Tools für die Windows Powershell erlauben es 

Entwicklern und Administratoren, den Zugang zu den hausei- 

Internet Explorer 10 in Windows 8 

Die Anzahl unterstützter Touch- 

Punkte ermitteln 

Die Anzahl der unterstützten Touch-Punkte auf einem Windows-8-Gerät 

mit Internet Explorer 10 lässt sich ganz einfach 

wie folgt ermitteln: 

Installation von 

AWS Powertools 

für Windows 

Powershell. 

Access Key und Secret 

Access Key in AWS. 



genen Cloud-Diensten ganz elegant direkt aus der Windows 

Powershell-Umgebung heraus zu erlangen. Sie können nun 

über 550 Befehle, die so genannten cmdlets, direkt in der Powershell-Kommandozeile 

entweder einzeln aufrufen oder auch 

in leistungsfähige AWS-Service-Skripte einweben. 

IE 10 auf Windows RT 

Adobe Flash auf Windows RT 

freischalten 

Microsoft liefert den Internet Explorer 10 in Windows RT mit 

einem eingebautem Flash-Plug-in aus (derzeit in der Version 

11.3 oder höher). Allerdings verrichtet das Flash-Plug-in seinen 

Dienst nur auf einigen Websites. Die Verfügbarkeit von Flash auf 

Windows-RT-Geräten – anders als im Falle von Intel-Geräten 

mit Windows 8 – ist auf eine Liste von Websites beschränkt, die 

Microsoft für kompatibel befunden und zugelassen hat. Falls 

sich Ihre Flash-Projekte auf der Liste der freigeschalteten Websites 

befinden, müssten diese durch Microsoft in der Datei 

File:\\%LOCALAPPDATA%\Microsoft\Internet Explorer\ 

IECompatData\iecompatdata.xml 

verzeichnet worden sein. Damit Benutzer von Windows-RT- 

Tablets die Flash-Animationen auf Ihren Websites sehen können, 

müssen Sie bei Microsoft die Freischaltung beantragen. 

Die detaillierten Richtlinien finden Sie unter der Adresse: 

msdn.microsoft.com/en-us/library/ie/ 

jj193557%28v=vs.85%29.aspx 

IE 10 

Starten des IE 10 erzwingen 

Benutzer von Internet Explorer 10 unter Windows 8 können 

den Browser wahlweise in der Desktop-Umgebung oder in der 

Metro-Umgebung (also im App-Modus) ausführen. Wird der 

Browser aus dem Desktop heraus aufgerufen, startet er als eine 

gewöhnliche Desktop-Applikation. Klickt der Benutzer auf die 

Kachel des Internet Explorers auf dem Startbildschirm, sollte 

der Browser als eine Metro-App in der Metro-Umgebung starten, 

wo er nicht nur eleganter, sondern auch schneller seinen 

Dienst verrichtet. Diese Version des IE 10 ist für die Benutzung 

durch Fingereingabe und Touch-Gesten auf Windows-8-Tablets 

und Ultrabooks optimiert. Mit der Ausnahme des mitgelieferten 

Flash-Players unterstützt er keine Plug-ins. Auf einigen Systemen 

klappt es leider nicht, diese Version von IE 10 zu starten. 

Webdesigner müssen aber ihren IE 10 auch in der Metro-Umgebung 

ausführen können, etwa um die Usability, einschließlich 

der Touch-Interaktivität ihrer Webprojekte, auf die Probefahrt 

zu nehmen. 

Wer sein Windows 8 als ein Upgrade über eine ältere Installation 

eingespielt hat, kann den Internet Explorer 10 oft nur 

im Desktop-Modus ausführen. Dieses Fehlverhalten kann aber 

auch dann auftreten, wenn Windows 8 sauber neu installiert 

wurde. Solange Internet Explorer 10 nicht als der Standardbrowser 

eingestellt ist, startet er nämlich nicht in der Metro- 

Umgebung. 

Wer den Internet Explorer in der Metro-Umgebung nutzen 

möchte, geht wie folgt vor: 

Schritt 1. 

Nach dem Start des Internet 

Explorers klicken Sie auf die 

Schaltfläche „Extras“ in der 

rechten oberen Ecke des 

Browser-Fensters und aktivieren 

den Menüpunkt Internet- 

Einstellungen. 

Schritt 2. 

Im folgenden Dialogfenster 

wechseln Sie in die Registerkarte 

Programme und klicken 

auf die Verknüpfung Internet 

Explorer als Standardbrowser 

einrichten. 

Schritt 3. 

Im folgenden Dialogfenster 

Standardprogramme festlegen 

wählen Sie den Eintrag 

des Internet Explorers aus der 

Liste aus und aktivieren Sie 

dann die Schaltfläche Dieses 

Programm als Standard festlegen. 

Nach einer Bestätigung mittels OK können Sie beide Fenster 

schließen, den Browser beenden und über die zugehörige 

Kachel auf dem Startbildschirm neu starten. 

Der Internet Explorer 

10 als eine 

Kachel auf dem 

Start-Bildschirm 

von Windows 8. 



der Chrome-Einstellungen (das Icon mit den drei kleinen grauen 

horizontalen Balken in der rechten oberen Ecke des aktiven 

Browser-Fensters) und wählen Sie aus dem nun aufgeklappten 

Menü den Befehl Chrome im Windows-8-Modus starten. Dies 

geschieht dann aber nur, wenn Chrome als der Standardbrowser 

eingestellt ist. Ist es nicht der Fall, müssen Sie zuerst die Wahl 

von Chrome als Standardbrowser bestätigen. Hierzu erhalten 

Sie ein kleines Menü mit verwandten Applikationen; wenn Sie 

in diesem Menü den Eintrag von Google Chrome anklicken, 

wechseln Sie zu Chrome als Standardbrowser und jetzt können 

Sie ihn im App-Modus ausführen. 

Die Website des Internet Magazins im Internet Explorer in der 

Metro-Umgebung von Windows 8 (internet-magazin.de). 

IE 10 

Websites testen 

Zum Testen von Websites im Internet Explorer 10 (im Desktop- 

Modus) können Sie auch Windows 7 SP1 benutzen. Den benötigten 

Download der deutschen Version des Browsers finden 

Sie unter der Adresse: 

msdn.microsoft.com/de-de/ie/aa740471.aspx 

Chrome 

Testen von @media-Abfragen 

Wer mobile Websites mit @media-Abfragen gestaltet und seine 

Projekte schnell mal eben testen möchte, kann sich mit dem 

Chrome-Plug-in Windows Resizer behelfen. 

Chrome 

Cookies im Browser bearbeiten 

Haben Sie sich auch schon einmal gewünscht, den Wert eines 

Cookies in Ihrem Browser zu verändern? Mit der Chrome-Erweiterung 

Edit This Cookie ist es ein Leichtes. 

Google Chrome 

Google Chrome im App-Modus 

unter Windows starten 

Ähnlich wie der IE 10 kann auch Google Chrome unter Windows 

8 wahlweise im Desktop-Modus oder im Metro-Modus 

genutzt werden. Startet Chrome im Desktop-Modus, können 

Sie ganz leicht in den App- 

Modus von Chrome umschalten. 

Klicken Sie hierzu 

ganz einfach auf das Symbol 

Zum Starten von Google 

Chrome im App-Modus unter 

Windows 8 müssen Sie 

erst eben diesen Browser 

als Standardardbrowser 

auswählen. 

Webschriften 

Feinschliff verleihen 

Einer der besonderen Vorzüge von HiDPI-Displays besteht darin, 

dass Text nun beinahe so perfekt ausschaut wie im Druck. 

Diese Präzision lenkt jedoch die Aufmerksamkeit des Besuchers 

darauf, dass die feine Kontrolle der Abstände zwischen 

Textzeichen – das so genannte Kerning – von Webschriften 

bisweilen Einiges zu wünschen übrig lässt. Insbesondere bei 

Überschriften fallen jegliche Ungereimtheiten dem Betrachter 

sofort ins Auge. Lösungen wie Typebutter und kern.js wollen 

hier Abhilfe schaffen. 

Bei TypeButter (typebutter.com) handelt es sich um ein jQuery- 

Plug-in, welches das Kerning unterstützter Webschriften automatisch 

optimiert. Kern.js ist ein Bookmarklet, das Ihnen erlaubt, 

jedes Zeichen in einer Überschrift mittels Drag-und-Drop 

direkt auf der Website zu verschieben. Um das Kerning auf Ihrer 

Website zu optimieren, navigieren Sie ganz einfach zu: 



kernjs.com 

und ziehen Sie die Schaltfläche drag to bookmarks bar to install 

direkt in die Lesezeichenleiste Ihres Browsers. Wenn Sie 

jetzt Ihre eigene Website besuchen und das Bookmarklet in 

der Lesezeichenleiste anklicken, erscheint im Browser-Fenster 

eine Werkzeugleiste. Mit 

Hilfe der Tools aus dieser 

Werkzeugleiste können 

Sie jetzt die betreffende 

Überschrift auswählen 

und die Position sowie 

die Größe einzelner Zeichen 

manuell anpassen. 

Anschließend klicken 

Sie auf das Häkchen in 

der Werkzeugleiste, um 

die Anpassungen zu bestätigen; 

im folgenden 

So installieren Sie das Kern.js- Dialog erhalten Sie eine 

Bookmarklet (kernjs.com). Sammlung von CSS-Regeln, 

welche Ihre Korrekturen 

beschreiben. Jetzt 

können Sie diese Regeln 

ganz einfach in Ihr Stylesheet 

einfügen. 

Weder Typebutter noch 

kern.js sind dafür gedacht, 

sämtlichen Text 

auf einer Website zu bearbeiten. 

Wenn Sie allerdings 

selektiv einigen 

Wenn Sie Ihre Website besuchen besonders ins Auge fallenden 

Kerning-Paaren, 

und das Kern.js-Bookmarklet 

aktivieren, erhalten Sie Werkzeuge etwa in einer Hauptzum 

Anpassen der Größe und überschrift, eine elegantere 

Position einzelner Textzeichen der Ästhetik verleihen möchten, 

kann sich eine dieser 

aktuellen Auswahl. 

Bibliotheken als durchaus 

nützlich erweisen. 

Apache 

Browser-Caching ausreizen 

Wer dem Browser das Cachen statischer Inhalte seiner Website 

abverlangen kann, verschafft sich die Möglichkeit, die Leistung 

merklich zu erhöhen. Dies kann sich sowohl in einem höheren 

Suchmaschinen-Ranking als auch in einer verbesserten Konversion 

innerhalb Ihrer Websites reflektieren. 

Als Erstes gilt es, den ETag-Header der Website zu deaktivieren. 

Hierzu fügen Sie der .htaccess-Datei die folgenden Zeilen hinzu: 

Header unset Pragma 

FileETag None 

Header unset ETag 

Danach können Sie das Caching in Abhängigkeit vom Dateityp 

aktivieren. So können Sie etwa das Cachen von Bildern und 

PDF-Dokumenten für bis zu 10 Tage anfordern: 

 

Header set Cache-Control "max-age=864000, public, 

must-revalidate" 

Header unset Last-Modified 

 

Mit der Anweisung public erlauben Sie jeder Zwischenstelle auf 

dem Weg von Ihrem Server zu dem Useragent das Aufbewahren 

der Inhalte im eigenen lokalen Cache. Mittels must-revalidate 

verpflichten Sie die Gegenstelle, späteren Anweisungen Ihrer 

Webapplikation Folge zu leisten. Indem Sie nun schließlich die 

Last-Modified-Variable als irrelevant erklären, nachdem Sie den 

ETag-Header abgeschafft haben, eliminieren Sie die ohnehin 

unerwünschten Validierungsanfragen aus dem Kommunikationsaustausch 

des Webservers mit dem Webclient. Auf eben 

diesen letzten Schritt sollten Sie allerdings bei einigen Dateitypen 

wie CSS-Stylesheets oder HTML-Dokumente lieber verzichten, 

damit sich die Änderungen propagieren können. Für 

solche Dateitypen nutzen Sie eine Anweisung wie diese: 

 

Header set Cache-Control "max-age=7200, must-revalidate" 

 

Die Fähigkeit zum Modifizieren der Header setzt bei Apache 

das Modul mod_headers voraus. 

Zum Abschluss der 

Korrekturen können Sie 

das resultierende CSS in 

Ihre eigenen Stylesheets 

übernehmen. 

HTML5, JavasScript 

Benutzerfreundliche Webformulare 

Das Ausfüllen von Webformularen kann schon mal in Sisyphusarbeit 

ausarten: Mal stürzt der Computer ab, mal verschluckt 



sich der Browser, mal schließt der Benutzer aus Versehen das 

falsche Fenster. Der eine oder andere Webanalytiker könnte ein 

Lied davon singen, wie oft ein Online-Kauf, eine Registrierung 

oder ein Kontaktversuch nicht zustande kommen, weil der Besucher 

beim Ausfüllen eines Webformulars durch die Technik 

unterbrochen oder gar gehindert wurde. Die Javascript-Bibliothek 

Sisyphus.js soll Abhilfe schaffen. Sisyphus.js macht sich 

den in HTML5 eingeführten lokalen Speicher zunutze, um dem 

Besucher beim erneuten Ausfüllen desselben Formulars unter 

die Arme zu greifen: 

simsalabim.github.com/sisyphus/ 

Um bestimmte Webformulare mit Sisyphus.js zu sichern, genügt: 

$('#form1, #form2').sisyphus(); 

So schön und praktisch die Idee sein mag, sollte man sie dennoch 

mit Vorsicht genießen, denn lokaler Speicher kann leicht 

personenbezogene Informationen an Unbefugte preisgeben. 

Behalten Sie die Sicherheitsaspekte eines Webformulars daher 

stets im Hinterkopf. 

Sisyphus.js läuft mit jQuery ab Version 1.4 in Chrome/Safari 

jeweils ab Version 4, Firefox ab Version 3.5, Opera ab Version 

10.5, und Internet Explorer ab Version 8. Wer es unbedingt erreichen 

möchte, dass seine Formulare auch mit Internet Explorer 

7 laufen, muss die Bibliothek jStorage vor Sisyphus.js laden 

(jstorage.info). 

CSS 

Verbesserte Navigation mittels Anker 

Ein klassischer Anker wie dieser 

 

übernimmt die Eigenschaften der Pseudoelemente :hover und 

:active, obwohl diese eigentlich nur für Links vorgesehen sind. 

Um dieses Verhalten zu unterdrücken, können Sie entweder 

Ihre Anker mit ID-Selektoren versehen oder von der etwas älteren 

Syntax Gebrauch machen: 

:link:hover { ...; } 

:link:active { ...; } 

CSS 

Gruppierte Selektoren 

und Fehlerbehandlung 

Um den CSS-Code der Lesbarkeit zuliebe auf ein Minimum zu 

reduzieren, gruppiert man schon mal gerne mehrere Selektoren 

in einem Regelsatz, zum Beispiel so: 

:active, :hover { ...} 

Diese Arbeitstechnik hat allerdings einen Nachteil: Sie könnte 

dazu führen, dass der gesamte Regelsatz ignoriert wird, sollte 

dem Browser die Unterstützung für auch nur einen einzigen 

Selektor der betreffenden Gruppe fehlen. Wann immer Sie also 

experimentelle oder herstellerspezifische Selektoren einsetzen, 

sind sie gut beraten, auf das Gruppieren dieser Selektoren zu 

verzichten. 

Trifft der Browser beim Parsen einer Deklaration auf einen 

Code-Abschnitt, den er nicht versteht, ignoriert er die gesamte 

Deklaration bis zum nächsten Semikolon, das sich außerhalb 

eines ausgeklammerten Blocks – also außerhalb von {}, [], () – 

befindet. Trifft der Browser auf etwas Unbekanntes beim Parsen 

einer Stilregel, ignoriert er die gesamte Regel bis zum nächsten 

{}-Abschnitt. Sollte der Browser auf etwas Unbekanntes beim 

Auswerten einer @-Regel stoßen, ignoriert er die gesamte @-Regel 

entweder bis zum nächsten verständlichen {}-Abschnitt 

oder bis zum nächsten Semikolon, das nicht ausgeklammert 

wurde, sich also außerhalb von {}, [] und () befindet. @-Regeln 

können nämlich sowohl die Form eines Block-Abschnitts (zum 

Beispiel @media) als auch die Form einer Inline-Anweisung (@ 

import) annehmen. 

Wordpress 

Unerwünschte Links eliminieren 

Wer sich schon immer gewünscht hat, dem Spam in Blog- 

Kommentaren ein Ende zu setzen, hat sich vermutlich auch 

schon gefragt, wie sich denn die Links in den Beiträgen der 

Diskussionsteilnehmer deaktivieren ließen. Auch die besten 

Anti-Spam-Plug-ins bieten nämlich keine hundertprozentige 

Treffsicherheit und so kommt man um das manuelle Bereinigen 

von Kommentaren wohl kaum umhin. Wenn Sie die externen 

Links in den Kommentaren deaktivieren, eliminieren Sie den 

wichtigsten Anreiz, der Spammer sonst bei der Stange hält. 

Zum Glück ist das Ganze recht einfach: Es genügt, der Datei 

functions.php den folgenden Code hinzuzufügen: 

function author_link(){ 

global $comment; 

$comment_ID = $comment->user_id; 

$author = get_comment_author( $comment_ID ); 

$url = get_comment_author_url( $comment_ID ); 

if ( empty( $url ) || 'http://' == $url ) 

$return = $author; 

else 

$return = "$author"; 



return $return; 

} 

add_filter('get_comment_author_link', 'author_link'); 

Der Besucher kann zwar immer noch die URL einer Website 

in das entsprechende Feld eintragen, nur angezeigt wird diese 

nicht mehr. 

MySQL 5.6 

Leistung messen 

Wer sich von der hohen Leistungsbereitschaft von MySQL 5.6 

gegenüber der Vorgängerversion (siehe Abbildungen) selbst 

überzeugen möchte, kann mit dem MySQL Benchmark-Tool 

einen direkten Vergleich anstellen: 

dev.mysql.com/downloads/benchmarks.html 

Das Tool unterstützt sowohl MySQL als auch MySQL Cluster 

(eine Software zur Verwaltung von MySQL-Clustern). 

CSS 

Elegante Animationseffekte 

Wer dezente CSS-Animationen einsetzen möchte, braucht sich 

den Kopf über die korrekte Syntax zur Wahrung der Browserkompatibilität 

nicht zu zerbrechen. Dank einer Bibliothek namens 

Animate.css von Dan Eden können Sie bestimmten Elementen 

der Seite das gewünschte Verhalten leicht beibringen. Die Bibliothek 

bringt eine Vielzahl 

recht origineller Effekte 

mit, vom Hüpfen, 

Schwingen, Pulsieren, 

Drehen bis hin zum Hinein- 

und Hinausrollen. 

Zur Vereinfachung sind 

die Animationseffekte in 

zehn Kategorien gruppiert und lassen sich anhand einer Beispielschaltfläche 

recht gut beurteilen. Es steht Ihnen nicht nur frei, 

eine für Ihren Geschmack maßgeschneiderte Auswahl zu treffen 

und als eine Sammlung herunterzuladen. Sie können die Animationen 

dynamisch mit jQuery-basierten Effekten anreichern, 

die Ablaufgeschwindigkeit manuell anpassen und mit eigenen 

CSS-Regeln versehen. Die Bibliothek ist unter der Adresse 

daneden.me/animate/ 

kostenlos erhältlich. 

MySQL 5.6 im Vergleich zur Vorgängerversion beim Lesen und 

Schreiben: Anzahl gleichzeitiger Transaktionen in Abhängigkeit 

von der Anzahl gleichzeitiger Verbindungen. 

MySQL 5.6 im Vergleich zur Vorgängerversion bei Nur-Lesezugriffen: 

Anzahl gleichzeitiger Transaktionen in Abhängigkeit 

von der Anzahl gleichzeitiger Verbindungen. 

CSS 

Externe Verknüpfungen 

visuell kennzeichnen 

Zwecks einer besseren Usability kann es sinnvoll sein, nach außen 

gehende Links explizit als solche zu kennzeichnen, damit 

die Besucher vorab wissen, über welche Verknüpfungen sie Ihre 

Website verlassen. Einige Webgestalter kennzeichnen externe 

Links manuell unter Verwendung von 

rel="external" 

Wem diese manuelle Methode zu zeitintensiv und mühsam 

erscheint, könnte an diesem CSS-Code seine Freude haben: 

a[href^="http://"]:not([href*="internet-magazin. 

de"])::after { 

content: "\2197"; 

} 

Jede externe Verknüpfung wird automatisch mit einem Pfeilsymbol 

gekennzeichnet. 

Anna Kobylinska und Filipe Pereira Martins 


BRANCHENVERZEICHNIS 

Alle Einträge finden Sie mit direktem Link zum Anbieter auf der Heft-CD für Abonnenten oder online unter www.internet-magazin.de/branchenverzeichnis 

@ APPLICATION SERVICE PROVIDER 

PLZ 

38100 

datenbanken24.de 

Ein Service der MANETEC GmbH & Co. KG 

Lange Straße 61 

38100 Braunschweig 

Tel.: (0531) 12 08 480, Fax: (0531) 12 08 499 

info@datenbanken24.de 

www.datenbanken24.de 

Ihre eigene Datenbank im Web: Erstellen Sie sich online in wenigen Minuten 

Ihre individuelle Datenbank-Komplettlösung. Ohne Programmierung. Mit 

Zugriffsregelung, Formulargenerator, Kategorie- oder Listendarstellung und 

Suchfunktionen. 

Für professionelle Webdatenbanken jeder Art. Genial einfach. 

datenbanken24.de – Ein Service der MANETEC GmbH & Co. KG 

@ CONTENT 

PLZ 

32051 

content.de AG 

Nordstr. 14 

32051 Herford 

Tel.: (05 22 1) 85 49 9 0 

Fax: (05 22 1) 85 49 9 - 99 

info2012@content.de 

http://www.content.de 

Suchmaschinenoptimierte Texte für erfolgreiche Webprojekte! 

content.de, die technische Plattform mit persönlicher und kompetenter 

Kundenbetreuung, liefert mit seinen mehr als 4.000 Autoren einzigartige, 

suchmaschinenoptimierte Texte (unique content). Diese Fakten haben 

schon viele Kunden von uns überzeugt: 

- attraktive Preise pro Wort 

- einfach zu bedienendes System 

- viele Lösungen (SEO-Texte, Produktbeschreibungen, Blogbeiträge, etc.) 

- übersichtliches Projektmanagement (für viele Textaufträge ausgelegt) 

- durchdachte Features mit Mehrwert (Wordpress-API, Keyword-Generator) 

- u.v.m. 

Wann steigern Sie Ihren Traffic durch neue Texte? 

@ E COMMERCE 

PLZ 

36041 

PSW GROUP GmbH & Co. KG 

Flemingstraße 20-22 

36041 Fulda 

Tel.: (0661) 48 02 76-10 

Fax: (0661) 48 02 76-19 

Hotline: (0800) 50 37 50-1 

Fax: (0800) 50 37 50-9 

support@psw.net 

www.psw.net 

Die PSW GROUP GmbH & Co. KG ist einer der führenden deutschen Full Service- 

Provider für Internetlösungen mit einem besonderen Schwerpunkt auf Internet 

Security. Als solcher bietet das Unternehmen – sowohl für das Web als auch für die 

E-Mail-Kommunikation – Zertifikats-, Signatur-, Verschlüsselungs- und Authentifizierungslösungen 

an. 

Das umfassende Produktportfolio reicht von SSL-Zertifikaten über Code-Signing- 

Zertifikate bis hin zu qualifizierten elektronischen Signaturen und DE-Mail. Aber 

auch Sicherheitslösungen wie das PCI- und Malware-Scanning, Secure CDN, DNS- 

SEC und AntiSpam sowie Gütesiegel und Kundenbewertungssysteme speziell für 

E-Commerce-Anbieter finden sich im Repertoire der PSW GROUP. Darüber hinaus 

verfügt das Unternehmen über eine fast 12-jährige Expertise in den Bereichen 

Internet-Sicherheit, IT-Recht sowie Hosting- und Domaindienstleistungen. Zu den 

Kunden der PSW GROUP zählen Webhoster, Webdesign- und Marketing-Agenturen 

sowie Online-Shops. 

@ E MAIL MARKETING 

SuperMailer 

PLZ 

04319 

Mirko Böer Softwareentwicklungen 

Malachitstraße 16 

04319 Leipzig 

Tel.: (03 41) 8 63 28 42, Fax: (03 41) 8 63 28 43 

info@wt-rate.com 

www.supermailer.de/ 

Ansprechpartner: Mirko Böer 

Versand von personalisierten Newslettern, Marketing-Newslettern, 

Produktinfos, weitere Internetsoftware, Entwicklung von Windows-Software 



Wollen Sie sich auch im Internet Magazin präsentieren? • Jürgen Auselt • Telefon 0 89/2 55 56-11 72 • Telefax 0 89/2 55 56-11 96 • jauselt@wekanet.de 

@ E PAYMENT 

PLZ 

50679 

Deutsche Card Services GmbH 

Kaltenbornweg 1–3 

50679 Köln 

Tel.: (0221) 9 95 77 - 0, 

Fax: (0221) 9 95 77 - 720 

info.deucs@db.com 

www.deutsche-card-service.com 

www.deucs.com 

Als Teil der Deutschen Bank Gruppe bietet die Deutsche Card Services 

internationale Full-Service-Lösungen für den bargeldlosen kartengestützten 

Zahlungsverkehr von der Kreditkarte über Maestro, ELV und giropay aus 

einer Hand. Sie baut dabei auf das jahrelange Know-how und die bewährte 

technische Plattform der Pago eTransaction Services auf. Bewährte Risikominimierungssysteme 

sorgen dafür, dass bargeldloses Bezahlen im 

E-Commerce, im Versandhandel und am Point of Sale einfach, schnell 

und sicher abläuft. Einzigartige Online-Steuerungssysteme bieten Kunden 

weltweit jederzeit den vollen Überblick über ihre Transaktionen. 

@ FULL SERVICE PROVIDER 

PLZ 

12165 

http.net Internet GmbH 

Grunewaldstraße 22, 

12165 Berlin 

Tel.: (030) 21 00 90-0, Fax: (030) 21 00 90-90 

info@http.net 

www.http.net 

Ansprechpartner: Helga Krüger 

Seit 1996 hat sich die http.net auf Lösungen für Wiederverkäufer und 

Geschäftskunden spezialisiert. Unser Schwerpunkt liegt im Bereich der 

Domainservices. Bei http.net können Sie über 500 Domain-Endungen 

registrieren. Darüber hinaus bieten wir SSL-Zertifikate, Webspace, Hosting 

und individuelle Virtualisierungs-Lösungen. 

PLZ 

40599 

OpenIT GmbH 

In der Steele 33a–41 

40599 Düsseldorf 

Tel.: (02 11) 23 95 77-0 

Fax: (02 11) 239577-10 

isp@openit.de 

www.openit.de 

Full-Service-Provider für Businesskunden, von virtuellen Servern bis zu 

dedizierten Clusterumgebungen im BSI zertifizierten Rechenzentrum inkl. 

24/7 Support. Weiter im Portfolio: Typo3 Hosting, SMS Versand und 

Anwendungsentwicklung für den B2B Bereich. 

@ INTERNET FOREN 

PLZ 

10827 

TwoCom 

Hauptstraße 26 / 2. Hof - 2. OG 

10827 Berlin 

Tel.: (0 30) 78 00 09 4 - 0, 

Fax: (0 30) 78 00 09 4 - 9 

sales@2-com.de 

www.2-com.de 

Ansprechpartner: Sascha Petruschke 

Draytek Online Forum – Hilfe von Usern für User rund um Produkte der 

Draytek Familie & Online Shop 

@ ONLINEMARKETING & SUCHMASCHINENMARKETING 

PLZ 

44139 

SUMAX® 

Rheinlanddamm 199 

44139 Dortmund 

Tel.: 49 - (0) 231 / 53 46 1 00 

Fax: 49 - (0) 231 / 53 46 1 100 

www.sumax.de 

info@sumax.de 

(Google AdWords Qualified Company) 

Google AdWords- & Suchmaschinenoptimierung, Suchmaschinenmarketing, 

Webshops, Usability 



Alle Einträge finden Sie mit direktem Link zum Anbieter auf der Heft-CD für Abonnenten oder online unter www.internet-magazin.de/branchenverzeichnis 

@ SHOP-SYSTEME 

PLZ 

45964 

Webagentur Niewerth – Internetlösungen 

Humboldtstr. 2, 45964 Gladbeck 

Tel.: (0 20 43) 20 97 - 0 

FreeCall: (0 800) 34 56 90 0 

info@weban.de 

www.webagentur-online.de 

Ihr Shop-System das sich an Ihre Bedürfnisse anpasst. Mit Schnittstellen zu 

Ihrem ERP-System und zur Logistik. Alle gängigen Zahlungsarten, Schnittstellen 

zu Preisagenturen. Bestellverwaltung, Rechnungsmodul und Marketingtools. 

Mit Amazon- und Ebay-Anbindung und vieles mehr. 

Die Webagentur Niewerth betreut Sie von der Strategieberatung bis zum 

optimalen Marketingmix. Wir sind Trusted-Shops Partner, Google Adwords 

Professional und Facebook-Experten. 

Jetzt anrufen und unverbindlich beraten lassen! 

@ SMS DIENSTLEISTER 

PLZ 

73262 

mes.mo GmbH 

Stuttgarter Str. 4 

73262 Reichenbach 

Tel.: (0 71 53) 55 88 35 

Tel.: (0 71 53) 55 88 36 

office@mesmo.net 

www.any-sms.info 

Ansprechpartner: Christian Rapp 

Ihr Partner für mobile Messaging: High Quality SMS/MMS-Versand, 

individuelle inbound Lösungen für SMS/MMS-Empfang, SMS-Marketing, 

HTTP/UCP/SMTP-Schnittstelle, 24/7 Premium Support. 

@ WEB AGENTUREN 

PLZ 

81927 

MAXXmarketing GmbH 

Englschalkinger Straße 224 

81927 München 

Tel.: (0 89) 92 92 86 - 0 

Fax: (0 89) 92 92 86 - 75 

marketing@maxx-marketing.net 

www.webdesigner-profi.de 

Ansprechpartner: Klaus Huber 

Webdesign und Webprogrammierung für nur 19,- Euro per Arbeitsstunde 

Spürbar mehr Erfolg durch Ihren professionellen Webauftritt! Bereits ab 

19.-Euro/pro Stunde entwickelt MAXXmarketing für Sie Webseiten in PHP, 

HTML, Flash, Javascript & Java. Besonders das hochwertige Design, Beispiele 

dazu auf www.maxx-marketing.net unter Punkt Beispiele/Webdesign, 

erzeugt den bekanntlich sehr wichtigen ersten positiven Eindruck für Ihren 

Webbesucher. Sprechen Sie uns jetzt an und testen Sie uns! Durch unsere 

günstigen Preise haben auch andere Werbeagenturen die Möglichkeit, uns 

als SUB-Unternehmen für die Erstellung Ihrer Projekte einzusetzen. 

Faszination iPhone! 

Geheime Funktionen nutzen 

Freiheit für IhriPhone: SIM-Lock legal entfernen, versteckteFeatures freischalten. 

iOS, iTunes,iCloud verständlich erklärtund die besten iPhone-Apps für Heimnetz- 

Steuerung, Reise,Musik &mehr.Alles steht in diesem Buch. 

FRANZIS 

ISBN 978-3-645-60146-7 

10,– EUR 

Praxiswissen vonFranzis 

www.franzis.de 


SERVICE | Vorschau 

Ausgabe 03/2013 erscheint am 8. Februar 2013 

Frameworks für 

responsive Layouts 

Inzwischen gibt es viele Frameworks für 

responsive Layouts. Wir stellen Ihnen 

einige ausgewählte vor – samt ihrer Vorund 

Nachteile – und zeigen, welches sich 

für welchen Einsatzbereich eignet. Unter 

anderem haben wir Bootstrap, 320-andup 

und Foundation Zurb unter die Lupe 

genommen. 

CSS4 – die Zukunft des Webdesign? 

Während sich viele noch in CSS3 einarbeiten, haben wir schon mal einen Blick 

auf CSS4 gewagt und verraten, welche Verbesserungen die neue Version für Sie 

als Webdesigner bereithält. 

CitusCMS 

Das quelloffene Content-Management- 

System Citis wurde für kleine und mittlere 

Websites entwickelt. Wir stellen 

CitusCMS vor. 

WEIT ERE TH E M EN 

Off-Canvas-Layouts 

Schicke Einblendungseffekte 

Entwicklung und Hosting 

Google Drive Site Publishing 

Website-Werkzeuge 

Die besten Tools für Entwickler 

IMPRESSUM 

Redaktion 

Bereichsleiter: Jörg Hermann 

Chefredakteurin: Daniela Schrank (verantw. i. S. d. P.) 

dschrank@internet-magazin.de 

Producer: Rene Wirth 

Mitarbeiter dieser Ausgabe: Daniela Dreuth (Korrektorat), 

Daniel Engler, Andreas Hitzig, Anna Kobylinska, Stephan 

Lamprecht, Filipe Pereira Martins, Dr. Florence Maurice, Franz 

Neumeier, Jacqueline Pohl, Frank Puscher, Dr. Holger Reibold, 

Michael Rohrlich 

Redaktionsassistenz: Gerlinde Drobe 

Produkt-Manager Software/Lizenzen: Arnd Wängler 

Business Development Manager: Anja Deininger 

Leitung Layout: Sandra Bauer, Silvia Schmidberger 

Layout: Marcus Geppert, Andreas Geyh, Michael Grebenstein, 

Dorothea Voss, Rene Wirth 

Fotografie: Josef Bleier, Stefan Rudnick 

So erreichen Sie die Redaktion: 

Redaktion Internet Magazin 

Telefon: (089) 2 55 56-11 11, Fax: (089) 2 55 56-16 27 

E-Mail: redaktion@internet-magazin.de 

Web: www.internet-magazin.de 

Manuskripteinsendungen: 

Manuskripte, Programme, Tipps & Tricks, Leserbriefe bitte an die 

Redaktionsanschrift. Für unverlangt eingesandte Manuskripte, 

Datenträger sowie Fotos übernimmt der Verlag keine Haftung. Die 

Zustimmung zum Abdruck wird vorausgesetzt. Das Verwertungsrecht 

für veröffentlichte Manuskripte, Fotos und Programme liegt 

ausschließlich beim Verlag. Mit der Honorierung von Manuskripten 

und Programmen erwirbt der Verlag die Rechte daran. Insbesondere 

ist der Verlag ohne weitere Honorierung berechtigt zur weltweiten 

und uneingeschränkten Veröffentlichung auf Papier und elektronischen 

Trägermedien. Der Autor erklärt mit der Einsendung, 

dass eingereichte Materialien frei sind von Rechten Dritter. 

Eine Haftung für die Richtigkeit der Veröffentlichung kann trotz 

sorgfältiger Prüfung durch die Redaktion vom Herausgeber nicht 

übernommen werden. Für veröffentlichte Manuskripte übernimmt 

der Verlag weder Gewähr noch Haftung. Schaltungen und verwendete 

Bezeichnungen müssen nicht frei sein von gewerblichen 

Schutzrechten. Die geltenden Bestimmungen sind zu beachten. 

Nachdruck, Übersetzung sowie Vervielfältigung oder sonstige 

Verwertung von Texten sind nur mit schriftlicher Genehmigung des 

Herausgebers erlaubt. Namentlich gekennzeichnete Beiträge geben 

nicht in jedem Fall die Meinung der Redaktion wieder. 

Sonderdrucke: Marion Werber, Tel: (089) 2 55 56-1101, 

mwerber@wekanet.de 

Anzeigenabteilung 

Ihr Kontakt zum Anzeigenteam 

Gerlinde Drobe und Sabine Steinbach 

Telefon: (089) 2 55 56-11 71, Fax: (089) 2 55 56-11 96 

Anzeigenleitung (verantwortlich für Anzeigen): 

Gisela Nerke (-12 11) gnerke@wekanet.de 

Mediaberatung: 

Markus Matejka (05655) 92 48 94, mmatejka@wekanet.de 

Direktmarkt/Stellenmarkt: 

Jürgen Auselt (-11 72) jauselt@wekanet.de 

Leitung Sales Corporate Publishing & Media Services: 

Richard Spitz (-11 08) rspitz@wekanet.de 

Head of Digital Sales: 

Christian Heger (-11 62)cheger@wekanet.de 

International Representatives 

UK/Ireland/France: Huson International Media, Ms Rachel Di 

Santo, Cambridge House, Gogmore Lane, Chertsey, GB - Surrey 

KT16 9AP, phone: 0044-1932-564999, fax: 0044-1932-564998, 

rachel.disanto@husonmedia.com 

USA/Canada - West Coast: Huson International Media 

(Corporate Office), Huson International Media (Corporate Office) 

Ms Allison Padilla, Pruneyard Towers, 1999 South Bascom 

Avenue, Suite #450, USA – Campbell, CA 95008, phone: +1 408 

8796666, fax: +1 408 8796669, allison.padilla@husonmedia.com 

USA/Canada - East Coast: Huson International Media, 

Mr Jorge Arango, The Empire State Building, 

350 5th Avenue, Suite #4610, USA - New York, NY 10118, 

phone: 001-212-2683344, fax: 001-212-2683355, 

Jorge.arango@husonmedia.com 

Korea: Young Media Inc., Mr Young J. Baek, 408 Jinyang Sangga, 

120-3 Chungmuro 4 ga, Chung-ku, Seoul, Korea 100-863, 

phone: 0082-2-2273-4818, fax: 0082-2-2273-4866, 

ymedia@ymedia.co.kr 

Anzeigendisposition: Astrid Brück (-1471) abrueck@wekanet.de 

Sonderdrucke: Gisela Nerke (-12 11) gnerke@wekanet.de 

Anzeigengrundpreise: 

Es gilt die Preisliste Nr. 17 vom 01.01.2013 

Verlag 

Anschrift des Verlags: 

WEKA MEDIA PUBLISHING GmbH 

Richard-Reitzner-Allee 2, 85540 Haar bei München, 

Telefon: (089) 2 55 56–10 00, Fax: (089) 2 55 56-11 99 

Geschäftsführung: Wolfgang Materna, Werner Mützel, Kai Riecke 

Herstellungsleitung: Marion Stephan 

Vertriebs-/Marketingleitung: Robert Riesinger 

Vertrieb Handel: MZV Moderner Zeitschriften Vertrieb GmbH & 

Co. KG, Breslauer Straße 5, 85386 Eching, 

Telefon: (0 89) 3 19 06 – 0, Fax: (0 89) 3 19 06 – 1 13, 

E-Mail: MZV@mzv.de 

Aboservice 

Abonnementverwaltung: 

Burda Direct GmbH, Postfach 180, 77649 Offenburg, 

Telefon 0781/639 4548, Fax 0781/639 4549, 

E-Mail: weka@burdadirect.de 

Einzelheftbestellung: 

Burda Direct GmbH, Postfach 180, 77649 Offenburg, 

Telefon 0781/639 4548, Fax 0781/639 4549, 

E-Mail: weka@burdadirect.de 

Erscheinungsweise: monatlich 

Abonnementverwaltung Schweiz: 

Thali AG, Industriestrasse 14, CH-6285 Hitzkirch, 

Tel: 041 919 66 11, Fax: 041 919 66 77, 

E-Mail: abo@thali.ch, Internet: www.thali.ch 

Premium-Abonnement mit Jahres-CD: 

Abo mit 12 Ausgaben 60,90 Euro 

Studenten-Abo 

53,90 Euro 

Europäisches EU-Ausland 77,90 Euro 

Schweiz 

121,90 sfr 

Classic-Abonnement ohne Jahres-CD: 

Abo mit 12 Ausgaben 52,90 Euro 

Studenten-Abo 

47,90 Euro 

Europäisches EU-Ausland 69,90 Euro 

Schweiz 

105,90 sfr 

Außereuropäisches Ausland auf Anfrage 

Das Jahresabonnement ist nach Ablauf des ersten Jahres 

jederzeit kündbar. Alle Abonnementpreise incl. MWST und 

Versandkosten. 

© 2012 WEKA MEDIA PUBLISHING GmbH 

Druck: Vogel Druck und Medienservice, Leibnitzstr. 5, 

97204 Höchberg 

ISSN: 1433-3511 

Mitglied der Informationsgemeinschaft zur Feststellung 

der Verbreitung von Werbeträgern e.V. (IVW), Berlin. 


1/2013 

Da 

Das Magazin für iPhone, iPad und den Mac 

iPad mini 

Surfe 

Surfen, mailen, lesen: 

Ist da 

groß 

das iP 

Ist das neue iPad mini 

groß genug? Was kann 

das iPad 4 besser? 

IMMER 

O 

1/2013 

ONLINE 

Ein Ta 

Gerä 

Sie r 

Ein Tarif für alle 

Geräte: So sparen 

Sie richtig Geld 

Deutschland € 7,90 

Österreich € 9,00 / Schweiz sfr. 16,00 

Italien, Spanien € 10,00, BeNeLux € 9,30 

Generation 

iPhone 

Ka 

Die 

besten 

Navi-Apps 

im Test! 

Alles über das iPhone 5 

und seine Vorgänger 

Kaufberatung 

Reti 

tin 

welc 

lch 

WIR HABEN’S 

AUSPROBIERT! 

Ersetzt das 

iPad den Home- 

Computer? 

MACBOOK 

Retina-Display, SSD-Speicher – 

welcher Mac der beste für Sie ist 

ment5970288446291528055.indd 1 14.11.2012 

Im Test 

iPad-Tastaturen 

Cloud-Dienste 

Headsets und 

Lautsprecher 

JETZT 

AM KIOSK! 

DAS HEFT FÜR 

APPLE-FANS

„Kein Hosting-Paket ist 

günstiger als bei STRATO. 

Außer bei STRATO!“ 

4 Domains, 10 MySQL- 

Datenbanken inklusive 

10.000 MB Speicher 

und 2 GB E-Mailspace 

Profi -Features: PHP, 

Perl, BackupControl 

0,– 

0,– 

0,– 

1-Klick-Installation mit 

zahlreichen Apps 0,– 

Webhosting 

PowerWeb Basic 

für ein ganzes Jahr 

€/Mon.* 

JETZT 30 TAGE 

KOSTENLOS TESTEN! * 

HOSTED 

IN GERMANY 

* Aktion bis 31.01.2013. PowerWeb Basic 30 Tage kostenlos testen, danach 12 Monate 0 €/Mon., danach 4,99 €/Mon. 

Mindestvertragslaufzeit 24 Monate. Preis inkl. MwSt. 

Servicetelefon: 030 - 300 146 - 21

Internet Magazin Scharfe Bilder (Vorschau)

Sie wollen auch ein ePaper? Erhöhen Sie die Reichweite Ihrer Titel.

Template löschen?

Als Template speichern?