Internet Magazin Die Reise des Kunden (Vorschau)

5/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
WEBENTWICKLUNG
HTML5 statt Flash
So geht's: Videos per HTML5
einbauen und wiedergeben
Website-Tuning
Performance-Optimierung
für Ihre Website
Widget-
Programmierung
Android-Widgets selbst gemacht
Compass CSS
Perfekte Code-Struktur mit
dem Turbo-Framework
Die Reise
des Kunden
Präzises Käufer-Targeting für Online-Shops
Kaufentscheidungen effektiv beeinflussen
Strategisch werben
WEBBUSINESS
Logistik für den
E-Commerce
So finden Sie den passenden
Logistiker für Ihr Business
Google Rich Snippets
Wie Sie mit Googles intelligenter
Vorschau Ihre Klickrate steigern

1&1 DYNAMIC
CLOUD SERVER
1&1 Dynamic Cloud Server
Ob als Web-, Datei-, Applikations- oder
Business-Server. Nutzen Sie maximale
Flexibilität mit voller Kostenkontrolle!
■ Basiskonfiguration: 1 CPU, 1 GB RAM,
100 GB Festplatte
■ Unlimited Traffic mit 100 Mbit/s Bandbreite
ohne Zusatzkosten und ohne Drosselung
■ Mehr Sicherheit durch externe IP-Firewall
(Cisco basiert)
■ Freie Wahl aus CentOS, Debian, Ubuntu,
openSUSE oder Windows (optional)
■ Nur bei 1&1: Optional SUSE
Linux Enterprise Server
■ Nur bei 1&1: Server-Management
und -Monitoring per Mobile App
■ NEU! 1&1 Snapshot: Definieren
Sie einfach einen Wiederherstellungszeitpunkt
für Ihren Server.
■ 24/7 Service und Support durch
1&1 Server Expertenteam.
AKTION NUR BIS 30.04.13
0,– € *
39, 99
Aktionspreis
für 3 Monate.*
€/Monat*
VOLLER ROOT-ZUGRIFF
Komfort und Funktionsumfang eines Root
Servers, mit dedizierten Ressourcen.
HÖCHSTE FLEXIBILITÄT
CPU, RAM und Festplattenspeicher
unabhängig voneinander zubuchbar.
Per Mausklick bis zu 99 virtuelle
Maschinen zubuchbar–ohne Migration!
VOLLE KOSTENKONTROLLE
Absolute Kostentransparenz durch stundengenaue
Abrechnung. Parallels ® Plesk Panel 11
inklusive –ohne Domainbegrenzung.
AUSFALLSICHER
Redundant gespiegelte Speicher- und
Recheneinheiten schützen Ihren Cloud-
Server automatisch vor Ausfällen.
0 26 02 / 96 91
0800 / 100 668
1und1.info
* 1&1 Dynamic Cloud Server in den ersten 3 Monaten 0,– €/Monat, danach 39,99 €/Monat in der Basiskonfiguration. Performance Features für 0,01 €/Stunde und Einheit zubuchbar.
Einrichtungsgebühr 39,– €. 12 Monate Mindestvertragslaufzeit. Preise inkl. MwSt.

EDITORIAL
VERLOST
Erfolgreiche Websites
Schnell genug
gibt's nicht!
Wer eine eigene Website betreibt, kennt das Problem: Ohne
Vorwarnung geht die Geschwindigkeit scheinbar grundlos in
den Keller, obwohl gestern noch alles schnell und problemlos
lief. Die Besucher sind genervt und kehren Ihrer Site den Rücken
– mit kaum absehbaren Folgen. Leider ist die Fehlersuche
zumeist äußerst mühsam und unter Umständen durchaus langwierig.
Liegt es an der Datenbank, am Frontend oder hakt es
im Backend? Unser Artikel ab Seite 44 hilft Ihnen bei der Suche
nach Engpässen und verrät, wie Sie diesen in Zukunft erfolgreich
aus dem Weg gehen und die Performance Ihrer Website
wirkungsvoll optimieren.
Die Customer Journey, zu deutsch „Reise des Kunden“, ist
ein Begriff aus dem Marketing. Er beschreibt den Entscheidungsprozess
eines Kunden von der Inspiration bis hin zum
eigentlichen Kauf eines Produkts. Was es damit letztlich genau
auf sich hat und wieso diese „Kundenreise“ auch für Ihren
Online-Shop von größter Bedeutung ist, verrät Ihnen unser
spannender Artikel ab Seite 52.
Viel Spaß beim Lesen dieser Ausgabe wünscht
Vielleicht haben Sie sich auch schon einmal
gefragt, weshalb manche Websites
erfolgreich sind und andere nicht.
Wie gestaltet man einen Auftritt im
Web, der gefunden und wahrgenommen
und an den richtigen Stellen
beworben wird? Suchmaschinenoptimierung,
Usability, Online-Marketing und Nutzung von
Social Media sind die vier großen Themenkomplexe,
wenn es darum geht, mehr Besucher auf
die eigene Website zu locken und mehr Traffic
beziehungsweise Umsatz zu generieren. Das
Buch „Erfolgreiche Websites” (Galileo Computing,
ISBN 978-3-8362-1871-9, 34,90 Euro)
gibt Antworten auf die großen Fragen der Verbesserung
des eigenen Webauftritts.
Sie haben eine gute Idee für ein Spiel
und möchten wissen, wie Sie es mit
HTML5 umsetzen? Jacob Seidelin zeigt
Ihnen an einem typischen Puzzlespiel,
was Sie wissen müssen: Vom Zeichnen
des Spielfelds über Soundeffekte und Animationen
bis zur Multiplayer-Unterstützung. Die
erforderlichen Grundlagen lernen Sie dabei nach
und nach – ein paar Vorkenntnisse in den Webtechnologien
und Javascript reichen aus, damit
Sie schon bald Ihre eigenen Spiele entwickeln
werden! Dieses Buch des Wrox-Verlages zeigt
Ihnen ausführlich den Weg von der Spielidee
zum Grundgerüst, wie Sie Browserunterstützung
mit Modernizr sicherstellen und Native Apps mit
PhoneGap erzeugen.
Stefan Schasche
Projektleiter
sschasche@wekanet.de
Machen Sie mit bei unserer Verlosung und
gewinnen Sie unter
www.internet-magazin.de/verlosung
www.internet-magazin.de 3

SERVICE | Inhalt
5/13
Der Turbo fürs Stylesheet
Compass basiert auf dem CSS-Präprozessor Sass und erleichtert das
rasche Prototyping sowie die Weitergabe einzelner Komponenten als
Compass-Plug-ins. Im Artikel erfahren Sie, wie Sie sich eine Compass-
Umgebung einrichten und mit Compass arbeiten.
S. 20
Videos mit HTML5
Ein Browser benötigen zur Wiedergabe
von Videos künftig keinen
Player mehr. Dank HTML5 werden
Videos ohne Erweiterung direkt im
Browser dargestellt.
S. 26
AKTUE LLE S
News & Trends . . . . . . . . . . . . . . 6
Trackback . . . . . . . . . . . . . . . . 18
Spannende, interessante und witzige Fundstücke
aus dem Web
SPECIAL
Compass CSS . . . . . . . . . . . . . . 20
Der Turbo fürs Stylesheet
W E BDE S I GN
Videos mit HTML5 abspielen . . . 26
Mit HTML5 Videos im Browser abspielen
Rapid Responsive Prototyping . . 30
Centurion: Ein Framework fürs Prototyping
Googles intelligente Vorschau . . 34
Google Rich Snippets optimal nutzen
WEB E NTWICKLUNG
XDEV-Framework intern . . . . . . . 37
Entwicklung von Datenbankanwendungen
Automatisieren mit Yeoman . . . 40
Werkzeuge zur einfachen App-Erstellung
Website-Tuning . . . . . . . . . . . . 44
So optimieren Sie die Geschwindigkeit
Alles selbst gemacht . . . . . . . . . 48
Programmierung von Android-Widgets
WEBBUSI N E SS
Die Reise des Kunden . . . . . . . . 52
Werbemaßnahmen präzise ausrichten
Logistik im E-Commerce . . . . . . 58
Den richtigen Logistiker finden
Provider-Porträt . . . . . . . . . . . . 63
Mittwald
vServer im Wandel . . . . . . . . . . 64
Aktuelle vServer-Angebote im Überblick
4 0513 internet magazin

Inhalt | SERVICE
Googles intelligente
Vorschau
Googles Suchergebnisse werden
dank der Rich Snippets informativer
und emotional ansprechender. Doch
was kann man mit der schnellen
Vorschau noch alles anstellen und
für wen lohnt sich der Einsatz
dieser Technologie?
S. 34
Customer Journey
Workshop
Kunden wählen von der Inspiration
bis zum Produktkauf sehr unterschiedliche
Wege. Sind diese unbekannt,
bleibt jede Werbemaßnahme
allgemein und oberflächlich. Da ist
präzises Targeting angesagt.
S. 52
Website-Tuning
Welches ist der richtige Ansatzpunkt
zur Performance-Optimierung
einer Website? Hapert es am Frontend
oder zwickt es doch eher in
der Datenbank? In diesem Artikel
finden Sie die Engpässe zielsicher
und erfahren anhand zahlreicher
Tipps, wie Sie die Geschwindigkeit
Ihrer Website optimieren können.
S. 44
T I PPS & TRICKS
Online-Recht. ...........70
• Urheberrecht in der Wolke
Maria DB. ..............72
• Umsatteln auf die neue Datenbank
Python . . . . . . . . . . . . . . . . 73
• Applikationsleistung analysieren
• Probleme mit virtualenv
PHP ..................73
• Eckdaten einer Videodatei ermitteln
Cloudfront .............74
• Videodistribution streamt nicht
• Fehlerhafte Zugriffsrechte
Logistik im
E-Commerce
Für den Erfolg eines Online-Shops
sind zahlreiche Faktoren verantwortlich.
Neben der ganz offensichtlichen
Produktvielfalt und einer
ansprechenden Darstellung des
Warensortiments gehören dazu auch
die Prozesse rund um die Logistik.
S. 58
AWS ..................76
• EC2-Instanzen reservieren
• Weiterverkauf von Instanzen
PHP, AWS ..............77
• Skriptgesteuerte Streaming-URLs
S ERVICE
Editorial . . . . . . . . . . . . . . . . . 3
Branchenverzeichnis . . . . . . . 79
Impressum . . . . . . . . . . . . . . 82
Vorschau . . . . . . . . . . . . . . . . 82
www.internet-magazin.de 5

AKTUELLES | News
Cloud Computing
Riesiges Wachstum
Der Markt für Cloud Computing
wächst in Deutschland im Jahr 2013
voraussichtlich um 47 Prozent auf
7,8 Milliarden Euro. Das berichtet
der Hightech-Verband Bitkom auf
Basis aktueller Prognosen der Experton
Group. Danach entfällt mit
4,6 Milliarden Euro der Großteil des
Marktes auf Cloud-Dienste für Unternehmen.
Das Wachstum liegt in
diesem Segment bei 53 Prozent. Der
Umsatz mit Cloud-Services für Privatkunden
steigt im laufenden Jahr
um 39 Prozent auf 3,2 Milliarden
Euro. Nach den Ergebnissen des
„Cloud Monitors 2013“ von
Bitkom und der Wirtschaftsprüfungs-
und Beratungsgesellschaft
Kpmg nutzten
Ende des Jahres 2012 in
Deutschland 37 Prozent
aller Unternehmen Cloud
Computing. Im Jahr zuvor
waren es erst rund 28 Prozent. Die
wichtigste Anforderung der Nutzer
an die Cloud-Service-Provider ist
für drei Viertel der Befragten die
Integrationsfähigkeit der eigenen
IT-Lösungen in das Cloud-Angebot.
Zwei Drittel der Befragten fordern,
dass der Anbieter sein Rechenzentrum
in Deutschland hat. Wichtig
sei vor allem, dass Cloud-Lösungen
sicher sind und bei der Verarbeitung
personenbezogener Daten der Datenschutz
gewährleistet wird.
www.bitkom.org
Mehr Engagement
Verlegerverbände appellieren
an EU-Institutionen
Die deutschsprachigen Verlegerverbände haben heute
in Wien in einer gemeinsamen Erklärung die Europäische
Kommission, den Rat und das Europäische
Parlament aufgefordert, wesentliche medienpolitische
Vorhaben entschiedener voranzutreiben.
Dazu haben die
deutschen, schweizerischen,
luxemburgischen und österreichischen
Verlagsvertreter
einen Forderungskatalog mit
fünf Eckpunkten vorgelegt.
Im Einzelnen forderten die
Verlegerverbände, den Mehrwertsteuersatz
auf Online-
Zeitungsausgaben zu senken, die Medienkompetenz
von Kindern und Jugendlichen zu stärken, die Online-Aktivitäten
des öffentlich-rechtlichen Rundfunks
kritisch zu prüfen, Leistungsschutzrechte für Presseverlage
einzuräumen und jüngst bekannt gewordenen
Plänen, eine europäische Medienaufsicht einzuführen,
eine klare Absage zu erteilen.
www.bdzv.de
Telekommunikation
Netzausbau hat Priorität
Die Nachfrage nach großen Bandbreiten steigt durch den
zunehmenden Konsum von Videos über das Internet, die
Verwendung datenintensiver Apps und den Siegeszug
des Cloud Computing. Die großen Mobilfunkunternehmen
stellen deswegen ihre UMTS- und HSPA-Netze auf
die leistungsfähigere LTE-Technologie um. Auch Festnetze
mit hohen Datenraten, wie Glasfaser, VDSL und das vom
klassischen Kabelfernsehen bekannte Koaxialnetz, sollen
weiter wachsen. Rund ein Viertel ihrer Umsätze wollen
deutsche Telekommunikationsunternehmen in die Infrastruktur
investieren.
Den aufwändigen Ausbau der Hochgeschwindigkeitsnetze
rentabel zu finanzieren wird aber immer schwieriger. Dieser
Herausforderung begegnen die Netzbetreiber mit unterschiedlichen
Strategien, insbesondere durch brancheninterne
und branchenübergreifende Kooperationen. Um die
Einnahmenseite zu verbessern, vertreiben einige Festnetzund
Mobilfunkanbieter zum Beispiel ihre Produkte gemeinsam
unter der Marke eines Partners. Um auf der Ausgabenseite
Kosten zu sparen, wollen vor allem regionale
Telekommunikationsunternehmen die Zusammenarbeit
mit Energie- und Wasserversorgern weiter verstärken.
www.steria.com
6 0513 internet magazin

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.

AKTUELLES | News
Strato
Cloud-Speicher um Webgalerie erweitert
Strato hat eine neue Funktion namens
Share Gallery in seinen Online-Speicher
HiDrive integriert. Mit
der Share Gallery können Nutzer direkt
im Online-Dateimanager
gespeicherte
Bilder markieren
und zu persönlichen
Webalben zusammenstellen.
Bilder aus Facebook
oder von der lokalen Festplatte des
PC oder Mac lassen sich ebenfalls
in diese Alben importieren. Die Zahl
der Alben, die erstellt werden können,
ist unbegrenzt und die Anzahl
der Bilder darin ist von der Größe
des jeweiligen Online-Speichers
Modern.IE
Kompatibilität testen
Microsoft bietet jetzt kostenlose Tools, mit denen jeder
Webentwickler seine online gestellte Website auf
Kompatibilitätsprobleme
prüfen kann.
Im Mittelpunkt der
Überprüfung steht
natürlich der Internet
Explorer, der insbesondere
bei älteren
Versionen oft zu unerwarteten
Ergebnissen
bei der Darstellung der eigenen Site führt. Aber
auch die Kompatibilität mit anderen Browsern wird
getestet. Zudem macht das Tool auch Verbesserungsvorschläge
zu den neuen Features von Windows 8 wie
zum Beispiel der Touchsteuerung. Zudem kann jeder,
der über Modern.IE BrowserStack aufruft, diesen Service
drei Monate kostenlos testen. Mit BrowserStack
können Entwickler umfangreiche Browsertests durchführen
und verschiedenste Betriebssysteme (Windows,
Mac, iOS, Android) emulieren.
www.modern.ie
abhängig. Jedes Album kann mit anderen
geteilt werden; direkt aus den
Alben heraus können Nutzer eine
Facebook-Nachricht schreiben und
auswählen, wo der
Albumlink gepostet
werden soll.
Damit nicht jeder
alle Fotos sehen
kann, können HiDrive-Nutzer die
Sichtbarkeit ihrer Alben einschränken.
Wird für ein Album die Erlaubnis
zum Download erteilt, können
die Bilder von anderen in Originalauflösung
heruntergeladen werden.
www.strato.de/online-speicher/
sharegallery
HTML 5 Spiele
Construct 2
Game Jam
Die Community-Seite Newsground
veranstaltet einen Game
Jam. Das Thema des Jams ist „Touch“, also die Optimierung
der Steuerung für Mobilgeräte. Die Spiele
werden mit dem HTML5-Game-Editor Construct
2 erstellt. Construct 2 richtet sich in erster Linie an
Nichtprogrammierer und arbeitet mit Drag-und-Drop
und Event-Listener-Funktionen. Construct 2 ist in drei
verschiedenen Versionen erhältlich: Die Free Edition
ist kostenlos, enthält aber nicht alle Funktionen und
ist in der die Komplexität der zu erstellenden Projekte
in puncto Events, Layer und Effekte beschränkt. Die
Personal Edition verfügt über den vollen Funktionsumfang
und die Business Edition kann auch zu kommerziellen
Zwecken eingesetzt werden.
www.scirra.com
WDC 2013
Konferenz für
Webentwickler
Die Web Developer Conference (WDC),
die Konferenz für Webentwickler, findet
vom 24. bis 27. Juni 2013 im NCC
Ost in Nürnberg statt und richtet sich
an Entwickler von Webapplikationen,
Agenturen und Webmaster. Abgedeckt
werden sämtliche Themen von HTML5
über Frameworks und Javascript bis zu
PHP. Auch zu Soft Skills werden Sessions
angeboten. An den ersten drei Tagen
können Besucher aus zahlreichen
Vorträgen wählen (jeder Vortrag dauert
60 Minuten). Der vierte Tag ist den
Workshops vorbehalten.
Dieses Jahr findet die Web Developer
Conference als Teil der Developer
Week statt; dazu gehören auch die Mobile
Developer Conference sowie die
.NET Developer Conference.
www.web-developer-conference.de
8 0513 internet magazin

News | AKTUELLES
Roomsurfer
Weltweit bei
Freunden übernachten
Das neue Social Travel Network bringt Reisende und Gastgeber
mit ähnlichen Interessen zusammen. Individuell reisen,
Freunde finden und sich überall auf der Welt zu Hause
fühlen – das ist das Konzept von Roomsurfer. Über die
Plattform können Globetrotter nicht nur einen Schlafplatz
suchen, sondern vor allem auch Gleichgesinnte aus der
ganzen Welt treffen. Ein gemeinsam mit dem Deutschen
Forschungszentrum für Künstliche Intelligenz (DFKI) entwickeltes
Matching-Verfahren macht das möglich. Neben
den Angaben aus den Profilen der Roomsurfer werden
dafür Informationen über Vorlieben und Interessen aus
sozialen Netzwerken und Diensten wie zum Beispiel Facebook,
LinkedIn. Google+, Spotify oder Foursquare herangezogen.
Der ermittelte Matching-Faktor für Gast und
Gastgeber, den auch beide sehen, gibt dann an, wie gut
die beiden zusammenpassen.
www.roomsurfer.com
GovData
Zentraler Zugang
zu Verwaltungsdaten
GovData bietet einen einheitlichen, zentralen Zugang zu
Verwaltungsdaten aus Bund, Ländern und Kommunen.
Ziel ist es, diese Daten an einer Stelle zu bündeln und so
einfacher nutzbar zu machen. Über die Internetseite können
Bürger und Unternehmen staatliche Daten nicht nur
abfragen, sondern dürfen sie auch gezielt verarbeiten und
verwenden. Dabei handelt es sich um datenschutzrechtlich
unbedenkliche Informationen
wie Statistiken,
Geo- und Umweltdaten
aus verschiedenen Institutionen
auf Bundes-, Landes- und kommunaler Ebene.
Diese können über eine einheitliche Plattform abgefragt
werden. Derzeit steht eine Public-Betaversion des Portals
online, das im Rahmen der Möglichkeiten schrittweise
ausgebaut und optimiert werden soll. Das Portal wird im
Rahmen des Testbetriebs laufend evaluiert und 2014 soll
voraussichtlich die Entscheidung über seine Fortführung in
Abstimmung mit den Ländern getroffen werden.
www.govdata.de
*zzgl. einmalige Einrichtungsgebühr von 139,- EUR
Angebot für Gewerbetreibende, zzgl. 19% MwSt.
Managed-Server-
Vollkomfort.
Profitieren Sie jetzt von einem Managed Server und geben Sie die
individuelle Server-Administration in die Hände des Experten-Teams
von internet24. Der technische Support ist rund um die Uhr telefonisch
und per E-Mail für Sie erreichbar. Bei uns beginnt der Support
nicht im Call-Center, sondern bei einem direkten Ansprechpartner.
Dienst- und Lastmonitoring sowie Entstörung (24/7)
Update- und Patchmanagement
Individuelle Konfiguration
Flexibel skalierbar (Loadbalancing, Hochverfügbarkeit)
Persönliche Ansprechpartner / Experten-Service
Partnerprogramme für
Reseller und Vermittler
ab 169,00 EUR* / Monat
www.internet-magazin.de
9
Telefon +49 (0)3 51 / 211 20 40
| info@ internet24.de

AKTUELLES | News
1&1 Mobile
Flexible Highspeed-Datenpakete
1&1 bietet ab sofort allen Nutzern der
1&1-Mobile-Tarife neue optionale Highspeed-Pakete.
Damit kann das Highspeed-Kontingent
aufgestockt werden,
wenn der schnelle Inklusiv-Traffic des
jeweiligen Tarifs verbraucht ist. Sobald
75 beziehungsweise 100 Prozent des Inklusivkontingents
verbraucht sind, erhalten
alle 1&1-All-Net-Flat-Nutzer künftig
eine SMS, die sie darüber informiert und
das Buchen einer Erweiterung
per SMS anbietet:
ein Highspeed-Paket über
500 MByte für 2,99 Euro.
1&1-Notebook- und Tablet-Flat-Kunden
können demnächst zwischen zwei Datenpaketen
zur Erweiterung des Highspeed-Inklusivkontingents
wählen: Das
Highspeed-Paket 500 umfasst für 2,99
Euro 500 MByte, das Highspeed-Paket
2000 bietet 2.000 MByte für
9,99 Euro. Für alle genannten
Pakete gilt, dass sie unmittelbar
nach Buchung zur
Verfügung stehen und jeweils die Bandbreite
des gebuchten Tarifs geliefert wird.
Die Pakete können beliebig oft bestellt
und bis Ablauf ihres Datenabrechnungszeitraums
genutzt werden.
www.1und1.de
GfK & OpSec
Studie zur Nutzung von
Sharehostern
Eine von der GfK und OpSec durchgeführte Studie kam zu dem Ergebnis,
dass Sharehoster vor allem für illegale Zwecke genutzt werden.
Auf Basis der ermittelten Nutzungen soll der Anteil sogar bei 96,5
Prozent liegen. Am beliebtesten sind Spielfilme und Serien, mehr
als 50 Prozent der Inhalte entfallen auf diese beiden Kategorien. Mit
rund 17 Prozent belegt Pornographie den dritten Platz und knapp 10
Prozent entfallen
auf den
Bereich Musik.
Bei den
legalen Nutzungen
belegen
Software
und Spiele-
Mod die Plätze
eins und
zwei. Die
Studie schätzt,
dass etwa 16
Prozent der deutschen Internetprivatnutzer auf mindestens einem
der untersuchten Sharehoster aktiv sind. Untersucht wurden die
Sharehoster Share-Online.biz, Uploaded und Rapidshare. Rapidshare
hat zwischenzeitlich zu der Studie Stellung genommen. Ihrer
Einschätzung zufolge wurden hier im Vorfeld zu stark vereinfachte
Annahmen getroffen, die zu einem Ergebnis führten, das den Auftraggebern
der Studie entgegen kommt.
www.ivd-online.de
Host Europe
Nachhaltigkeitsbericht
Host Europe hat nach 2009 jetzt seinen zweiten Nachhaltigkeitsbericht
veröffentlicht, der Maßnahmen für
einen energieeffizienteren und klimaneutralen Rechenzentrumsbetrieb
dokumentiert. Für ihre mehr
als 200.000 Geschäfts- und Privatkunden betreibt
die Host Europe
GmbH über
9.000 Server in
zwei Rechenzentren
in Köln.
Die hierfür benötigte Energie (24 GWh/Jahr) wird
vollständig aus erneuerbaren Energiequellen gedeckt
und die Abwärme des Rechenzentrums nutzt das Unternehmen
zum Heizen der darüber liegenden Büroräume.
Fortschritte erzielte Host Europe auch bei
der „Power Usage Effectiveness“ (PUE). Der PUE-Wert
gibt an, wie viel Energie effektiv für den Betrieb der
Serverhardware genutzt wird in Relation zur Energiemenge,
die vor allem für Peripheriegeräte sowie die
Klimatisierung aufgewendet werden muss. Das ideale
Rechenzentrum hätte einen PUE-Wert von 1. Während
einer Studie des Uptime Institute zufolge die untersuchten
Rechenzentren eine durchschnittliche PUE
von 1,8 hatten, konnte Host Europe den PUE seines
neuen Rechenzentrums von 1,64 im Jahre 2009 auf
1,38 Ende 2011 senken.
www.hosteurope.de/download/Host_Europe_
Nachhaltigkeitsbericht.pdf
10 0513 internet magazin

Homepage
Professional
Die 1blu-Homepage Professional ist die ideale
Lösung für komplexe Webanwendungen und
anspruchsvolle Internetpräsenzen. Das Angebot
gilt nur bis 30.04.2013!
1blu-Homepage Professional
> 3 Inklusiv-Domains
> 12 GB Webspace
> Unbegrenzter Traffic
> 600 E-Mail-Adressen
> 10 GB E-Mail-Speicher
> Joomla, Wordpress, Typo3 vorinstalliert
> 20 FTP-Zugänge
> 20 MySQL-Datenbanken, PHP5
> Telefon- und E-Mail-Support
5,90 ¤
1,-
¤ /Monat*
Angebot bis 30.04.2013!
* Preis/Monat inkl. 19% MwSt. Angebot verfügbar ab Anfang April 2013 (Näheres unter www.1blu.de). Die einmaligeige
Einrichtungsgebühr von jeweils 9,90 € entfällt bei Bestellung bis 30.04.2013. Bei Bestellung bis 30.04.2013 1blu-Homepage
Professional für 1,- €/Monat für die jeweils erste Vertragslaufzeit von 6 Monaten, danach regulärer Preis von 5,90 €/Monat.
Verträge jeweils jederzeit kündbar mit einem Monat Frist zum Vertragsende. Bei Software-Bestellung 7,90 € Versandkosten.
** Preis/Monat inkl. 19% MwSt. Angebote verfügbar ab Anfang April 2013 (Näheres unter www.1blu.de). Bei Bestellung bis
20.04.2013 jeder 1blu-Server mit einer Vertragslaufzeit von 12 Monaten für 1,- €/Monat in den ersten 6 Monaten; danachach
jeweils regulärer Preis/Monat (z.B. 1blu-vServer LP 7,90 €, 1blu-vServer 8P 49,- €). Es fällt keine Einrichtungsgebühr bei einer
Vertragslaufzeit von 12 Monaten an. Verträge jeweils jederzeit kündbar mit einem Monat Frist zum Ende der Vertragslaufzeit. Alle
Preisinformationen und Angebote für andere Vertragslaufzeiten siehe www.1blu.de. Bei Software-Bestellung 7,90 € Versandkosten.
n.
030 - 20 18 10 00 | www.1blu.de
1blu-vServer für 1,-¤/Monat **
> Bis zu 8 CPU-Kerne nutzen
> Bis zu 24 GB RAM garantiert, 48 GB RAM max.
> Bis zu 6 IP-Adressen, 800 GB HDD, Traffic inklusive
> cloud-ready: CPU, RAM, HDD flexibel buchen

AKTUELLES | News
Microsoft Surface
Lediglich 1,5 Millionen
Stück verkauft
Bloomberg will aus gut informierten Kreisen konkrete
Verkaufszahlen erfahren haben. Laut einem
Bericht des Wirtschaftsmagazins hat Microsoft bisher
rund 1,5 Millionen Surface Tablets verkauft. Davon
sollen gut eine Million Stück auf das Surface mit
Windows RT entfallen und etwa 400.000 Exemplare
auf das teurere und später gestartete Surface mit
Windows 8 Pro. Ursprünglich hatte das Unternehmen
mit rund zwei Millionen verkauften Surface RT
Tablets im letzten Quartal des Vorjahres gerechnet
und insgesamt drei Millionen Surface RT geordert.
Im Vergleich dazu: Apple konnte im selben Quartal
22,9 Millionen iPads verkaufen. Die weltweiten Tablet-Auslieferungen
erreichten 2012 laut IDC 128,3
Millionen Stück. Apples iPad hat damit 51 Prozent
des Marktes für sich beansprucht.
www.microsoft.com
Top-Level-Domains
.basketball, .köln oder .money
In diesem Jahr gehen die ersten der sogenannten neuen Top-Level-Domains
an den Start. Neben klassischen Domainendungen
wie .de und .com wird es damit in Zukunft eine Vielzahl weiterer
Endungen geben – insgesamt wurden bei der Internetverwaltung
ICANN 1930 Bewerbungen für eine neue TLD eingereicht. Mit
den neuen TLDs wird auf den nach wie vor wachsenden Bedarf
an Internetadressen reagiert. Mit den nTLDs soll dieser Engpass
behoben werden. Ob .basketball, .köln oder .money: Künftig soll
es für so gut wie jeden Lebensbereich eine eigene, passende Domainendung
geben. Voraussichtlich werden die ersten Endungen
der neuesten Generation im Herbst 2013 zur Registrierung bereitstehen.
Eine kostenlose und unverbindliche Vorbestellung ist aber
schon jetzt möglich. Das Unternehmen Checkdomain bietet zum
Beispiel die Möglichkeit einer kostenlosen und unverbindlichen
Vorbestellung, um sich eine neue Domain zu sichern.
www.checkdomain.de
Cyber-Sicherheitsstrategie
Friedrich stellt IT-Sicherheitsgesetz vor
Der Entwurf des IT-Sicherheitsgesetzes
enthält drei Schwerpunkte zur
Verbesserung der IT-Sicherheit. Die
Betreiber kritischer Infrastrukturen
werden zu einer Verbesserung des
Schutzes der von ihnen eingesetzten
Informationstechnik und zur Verbesserung
ihrer Kommunikation mit
dem Staat bei IT-Vorfällen verpflichtet.
Telemediendiensteanbieter, die
eine Schlüsselrolle für die Sicherheit
des Cyberraums haben,
werden stärker
als bisher hierfür
in die Verantwortung
genommen.
Das Bundesamt
für
Sicherheit in
der Informationstechnik
wird in seinen Aufgaben
und Kompetenzen ge-stärkt. Bereits
heute sind zwei Milliarden Menschen
global vernetzt. In Deutschland
verfügen derzeit 78 Prozent
der Haushalte über einen Internetzugang;
Smartphones und Tablets ermöglichen
den permanenten Netzzugang
zu jeder Zeit und an jedem
Ort. Einer Studie nach sind schon
heute 50 Prozent aller deutschen
Unternehmen abhängig vom Internet.
Das führt aber auch dazu, dass
einem deutschen Großunternehmen
pro Jahr im Schnitt 4,8 Millionen
Euro Kosten durch Cyberkriminalität
entstehen. Täglich werden 20.000
Webseiten mit Schadprogrammen
infiziert, 5-10 Spionageangriffe auf
die Bundesverwaltung registriert.
www.bmi.bund.de
TYPO3-Konferenz
Inspiring Flow
im April
Im Kesselhaus in Kolbermoor bei Rosenheim
findet am 19. und 20. April 2013
ein internationaler Event rund um das
PHP-Framework TYPO3 Flow statt. Im
Rahmen der Veranstaltung werden insgesamt
vier Workshops, zwei einen Tag vor
und zwei einen Tag nach der Konferenz,
angeboten. Die Konferenz, die in diesem
Jahr zum zweiten Mal stattfindet, bietet
eine Reihe von englischsprachigen Vorträgen.
Zu den Sprechern gehören unter
anderen Core-Entwickler Robert Lemke,
PHP-Experte Stefan Priebsch sowie
TYPO3-Community-Manager Ben van ‘t
Ende. Die Registrierung für die Konferenz
startet am Freitag den 19. April. Die Vorträge
beginnen um 9 Uhr 30. Am Samstag
um 17 Uhr schließt die Veranstaltung.
www.inspiring-flow.com
12 0513 internet magazin

1&1 ALL-NET-FLAT
D-NETZ QUALITÄT ZUM BESTEN PREIS!
FLAT
FESTNETZ
FLAT
FLAT
19, 99
29, 99
0,– €* NUR FÜR KURZE ZEIT!
Alles komplett: 1&1 All-Net-Flat für
19,99 €/Monat inklusive Samsung Galaxy.*
ALLE
HANDY-NETZE
INTERNET
99
€/Monat*
Sofort
starten:
1 NACHT
OVERNIGHT-
LIEFERUNG
In Ruhe
ausprobieren:
1 MONAT
TESTEN
Defekt? Morgen
neu bei Ihnen:
1 TAG
AUSTAUSCH
VOR ORT
1und1.de
0 26 02 / 96 96
*1&1 All-Net-Flat Special in den ersten 12 Monaten für 19,99 €/Monat, danach 29,99 €/Monat, inklusive Smartphone Samsung Galaxy Ace Plus. Einmaliger Bereitstellungspreis 29,90 €, keine Versandkosten.
24 Monate Mindestvertragslaufzeit.

AKTUELLES | News
Cebit 2013
Stärkste Veranstaltung seit Jahren
Apple hat heute bekanntgegeben,
dass die Downloads von iTunes-U-
Inhalten eine Milliarde übertroffen
haben. iTunes U bietet den momentan
weltweit größten Online-
Katalog für kostenlose Lerninhalte
von Hochschulen, Bibliotheken
und Museen. Mehr als 1.200 Universitäten
und weiterführende
Schulen sowie 1.200 Grundschulen
und Bezirke stellen über 2.500
öffentliche und tausende private
Kurse bereit, die Künste, Wissenschaften,
Gesundheit und Medizin,
Bildung, Wirtschaft und mehr
umfassen. Führende Universitäten
wie Duke, Yale, Cambridge, MIT
und Oxford bauen ihre Reichweite
kontinuierlich aus, indem sie mehr
Die Cebit als weltweit wichtigste Veranstaltung
für die digitale Wirtschaft hat in
diesem Jahr weiter an Qualität gewonnen.
„Das internationale Geschäft
stand klar im Vordergrund“,
sagte Frank
Pörschmann, Vorstand der
Deutschen Messe AG, am
Samstag zum Abschluss
der Cebit 2013 in Hannover.
„Ein gestiegener Fachbesucheranteil
von mehr
als 84 Prozent, eine starke Beteiligung aus
gut 120 Nationen und so viele IT-Entscheider
und Einkaufschefs wie seit Langem nicht
mehr haben die Cebit 2013 zur hochwertigsten
Veranstaltung seit Jahren gemacht.
In Hannover ging es in den vergangenen
fünf Tagen um internationale Geschäfte und
Vernetzung.“ Einhellig zeigten sich die Aussteller
mit ihren Ergebnissen der Cebit sehr
zufrieden. Insbesondere die Unternehmen,
die ihren Auftritt sorgfältig vorbereitet hatten,
berichteten, dass sie
ihre Zielwerte um mehr
als 50 Prozent übertroffen
haben. Insgesamt blieb
die Zahl der Geschäftsgespräche
während der fünftägigen
Veranstaltung mit
mehr als sieben Millionen
auf dem hohen Niveau des
Vorjahres stabil. Die Reichweite im Internet
weitete sich – auch durch soziale Medien
– weltweit deutlich aus. Pörschmann: „Wer
in Hannover dabei ist, wird zum weltweiten
Thema in der Netzgemeinde. Ein Millionenpublikum
beteiligte sich aktiv im Netz an
den Themen rund um die Cebit.“
www.cebit.de
iTunes U-Inhalte
Eine Milliarde Downloads übertroffen
als 100.000 Studenten in einzelne
U-Kurse immatrikulieren. Über
60 Prozent der Downloads der
iTunes- U-App wurden außerhalb
der USA ausgeführt. iTunes U gibt
Schulen jeglicher Größe
die Möglichkeit, ihre
Inhalte mit einem weltweiten
Publikum zu teilen.
Pädagogen können
U-Kurse in 30 Ländern
erstellen; kürzlich hinzugekommen
sind Brasilien, Südkorea, Türkei
und die Vereinig- ten Arabischen
Emirate. Auf diese Kurse und andere
Bildungsinhalte kann über
die iTunes-U-App in 155 Ländern
zugegriffen werden.
www.apple.com/de/itunes
• • • TICKER • • •
■ Dropbox kauft Mailbox
Der Cloud-Speicher-Anbieter
Dropbox übernimmt Orchestra,
den App-Entwickler, der
hinter dem Programm Mailbox
steht. Ein Preis für den
Kauf wurde nicht genannt.
www.dropbox.com
■ Green-IT: Infos für Unternehmen
Interessierte erhalten auf
der Website umfangreiches
Basiswissen zu Green IT. Zudem
gibt es Anwendungsbeispiele
aus der Praxis, wie
Unternehmen ihr Energiemanagement
durch Green
IT verbessert haben. Unterstützt
wird das Angebot der
Plattform durch Broschüren
und Studien.
www.green-it-wegweiser.de
■ Social Gaming verstehen
Online-Spiele in sozialen
Netzwerken sind mit einem
Branchenumsatz von 8,2
Milliarden Euro im Jahr 2012
und 750 Millionen Nutzern
weltweit ein bedeutender
Wirtschaftszweig. Bis jetzt
gab es wenig fundiertes Material
über diese Thematik.
Diese Lücke hat Dr. Günter
Schmid, Unternehmensberater
und ehemaliger CFO
der bwin-Gruppe, gemeinsam
mit Dr. Thomas Talos
und Nicholas Aquilina mit
dem Buch „Social Gaming
in Europe“ geschlossen.
produkte.lexisnexis.at/
Social_Gaming_in_Europe
14 0513 internet magazin

Überall zu Hause
Das Heimnetz mit FRITZ!
FRITZ!Box 7390
Die 1. Wahl
im Heimnetz
Wir danken allen Lesern, die
AVM wiederholt zur
Nr.1gewählt
haben! Besonders freuen wir
uns über 28.000
Stimmen, für
die FRITZ!-Produkte in gleich
zwei Kategorien die erste
Wahl im Heimnetz sind.
Höchstleistung und Komfort für Heimnetz und Internet!
Mit Topausstattung und innovativer Technik bringt FRITZ!Box 7390
eine beeindruckende Funktionsvielfalt an jeden DSL-Anschluss
und erfüllt zuverlässig alle Kommunikationswünsche.
Vielfach ausgezeichnet und von der Fachpresse empfohlen.
Über DSL mit bis zu 100 MBit/s rasant im Internet unterwegs
Flexibles Dual-WLANNmit 2x300 MBit/s gleichzeitig
Voller Telefonkomfort mit Telefonanlage und DECT-Basis
USB-Drucker und -Speicher (NAS) im gesamten Heimnetz
FRITZ!OS mit Mediaserver, MyFRITZ!, Cloud-Kontakten und mehr
Mehr erfahren unter avm.de/fritzbox
TESTSIEGER
GUT (1,6)
FRITZ!Box
7390
ImTest:
12 WLAN-Router
Ausgabe
03/2012
03/2011
„Der derzeit beste
WLAN-Router“
Und 68 weitere herausragende Auszeichnungen!
13/006
avm.de
AVM GmbH · Alt-Moabit 95 · 10559 Berlin · Telefon 030 39976-0·info@avm.de

VICTOR 2013
Das Fest
der Sieger
Victor
2013
Zum ersten Mal waren alle Leser der IT-Zeitschriften
von WEKA gemeinsam aufgerufen, die besten Firmen
aus 24 Kategorien zu wählen. Am 21. März wurden die
Preise im feierlichen Rahmen überreicht.
Fulminanter Schlusspunkt des Abends:
Die Gewinner des Victor 2013 versammelten
sich zum Gruppenbild.
Gastgeber mit guter Laune (v.l.n.r.): die Chefredakteure Jörg
Hermann (PCgo), Andreas Eichelsdörfer (Business+IT) und
Michael Suck (PC Magazin)
Einen Hauch von Hollywood hatte die lange Nacht des
Victors durchaus. Nur war diesmal nicht das Dolby Theatre
Schauplatz der Feierlichkeiten, sondern die Bavaria Filmstudios
im Süden von München. Insgesamt 28.300 Leser haben entschieden,
welche Firmen es in den abgefragten 24 Kategorien
auf das Treppchen schafften. Zusätzlich kürte eine Expertenjury,
die sich unter anderem aus den Chefredaktionen der Magazine
zusammensetzt, drei Sonderpreise: die Innovation des Jahres,
den Brand of the Year und die IT-Persönlichkeit des Jahres. Wir
gratulieren allen Siegern!
Andreas Eichelsdörfer
16 0513 internet magazin

Seit mehr als einem Jahrzehnt eine
feste Größe in der Branche: Christoph
Rösseler, Vice President Marketing &
PR bei Devolo.
Ausgezeichnet als IT-Marke des Jahres:
Gerold Gutti, Marketingchef bei IBM,
versprach auch für die Zukunft bahnbrechende
Produkte.
Oliver Gürtler, Leiter Windows bei
Microsoft, nahm den Innovationspreis
für Windows 8 begeistert entgegen.
Hollywood-reifes
Gruppenbild (v.l.):
Katja Meyer und
Eleonore Panciera
von Kaspersky
nehmen Hasan Ezdi
von waveline-mar.
com in ihre Mitte.
Amüsierten sich prächtig: Gisela
Nerke, Anzeigenleitung IT bei WEKA,
und Tobias Scherer von 1&1.
In Reih und Glied:
Die Victor-Statuen
warten auf ihre
Empfänger.
Fabian Maiwald von Samsung
konnte zusammen mit seinen
Kollegen gleich fünf Preise
entgegennehmen.
Victor
Das sind die Gewinner
Kategorie
Firma
All-in-one-PC-Systeme Hewlett-Packard
App des Jahres
Google (für Chrome)
Business-Netz des Jahres Telekom Deutschland
Cloud-Innovation
Microsoft Deutschland
CRM-Lösungen
SAP Deutschland
Document Solutions
Samsung Electronics
ERP-Lösungen
Microsoft Deutschland
Grafik/Foto/Design
Adobe Systems
Händler des Jahres
Amazon.de
Hoster
1&1 Internet
Internet-Provider
Telekom Deutschland
Kaufmännische Lösungen Haufe-Lexware
Monitore
Samsung Electronics
Multifunktionsgeräte
Samsung Electronics
Multimedia/Streaming AVM
(für Fritz!Box Fon WLAN 7390)
Notebooks
Samsung Electronics
Office Anwendungen
Microsoft Deutschland
Online-Dienstleistungen Microsoft Deutschland
(für Office 365)
Suchmaschinen/SEO
Google
Sicherheitssoftware
Kaspersky Labs
Smarthome
AVM
Smartphone
Samsung Electronics
Steuer- und Finanzsoftware Haufe-Lexware
Tablets
Amazon.de
Innovation des Jahres Microsoft Deutschland
(für Windows 8)
Brand of the Year
IBM Deutschland
IT-Persönlichkeit des Jahres Christoph Rösseler, devolo
www.internet-magazin.de 17

AKTUELLES | News
Shopping
Responsive Wordpress-Themes
Ein Dutzend frische
Wordpress-Themes,
die auch preisgünstig
im Bundle erhältlich
sind, finden Sie im
Themes-Shop von
Elmastudio.de. Die
minimalistischen,
auf mobile Endgeräte
optimierten Themes
mit vielen gut durchdachten
Features können jeweils in einer Live-Demo
gründlich unter die Lupe genommen werden. Pluspunkt:
Ein einmal erworbenes Theme darf beliebig oft und auch
für kommerzielle Projekte eingesetzt werden. Updates für
einzelne Themes sind im Preis enthalten; wer alle Themes
im Bundle kauft, erwirbt jährliche Upgrades.
http://www.elmastudio.de/wordpress-themes/
Toolbox
Social Media Image Maker
Jede Änderung am Facebook-Profil wird immer sofort
dem Bekanntenkreis angezeigt – ärgerlich, wenn
man mit verschiedenen
Bildern und
Grafiken experimentieren
möchte,
ohne dass
es jeder sofort
mitbekommt.
Abhilfe schafft der Social Media Image Maker,
der für Facebook und viele andere Netze die Möglichkeit
bietet, das neue Profilbild erst einmal in Ruhe zu
testen und dann mit dem perfekten Ergebnis an die
Öffentlichkeit zu gehen.
http://www.autreplanete.com/ap-social-mediaimage-maker/
CRM Tool
Feedbackstr
Empfängerbefragungen zur Messung
der Servicequalität schnell, einfach
und in Echtzeit durchführen können
Sie mit Feedbackstr: alle Bewertungen
sowie Kritik und Lob Ihrer Kunden in
einem System, das im Handumdrehen
für Kundenservice, Qualitätsmanagement
und Marketing einsatzbereit ist.
Eine kostenlose Demo ohne Anmeldung
ist online verfügbar.
https://www.feedbackstr.com/de/
Microblogging
Twitter Cards
Nutzer der Google Webfonts (www.
google.com/webfonts) und Open Web
Icons (pfefferle.github.com/openwebicons/)
werden sich über das aktuelle
Open-Source-Projekt von Tim Pietrusky
freuen: Dank „We love Icon Fonts“
können die Fonts mit wenigen Zeilen
CSS-Code integriert werden, Beispielcode
steht zur Verfügung unter
http://weloveiconfonts.com/
Webprojekte
deploydo
Deploydo ermöglicht das schnelle
und einfache Verteilen von Webprojekten
auf mehrere Server, indem es
externe Versionskontrolldienste wie
Github, Bitbucket oder Codebase mit
den Servern verbindet, auf denen das
anzupassende Projekt liegt, um anschließend
ein paralleles Rollout der
Änderungen durchzuführen. Auf dem
Server werden dann jeweils nur die
Daten aktualisiert und nicht der gesamte
Projektordner hochgeladen –
das spart Zeit und Traffic.
https://www.deploy.do/
18 0513 internet magazin

ANZEIGE
1. PLATZ
SICHERHEITS-SOFTWARE
DIE NUMMER 1
UNSERE LESER HABEN SICH ENTSCHIEDEN
UND KASPERSKY IN DER KATEGORIE
SICHERHEITS-SOFTWARE
ZUR MARKE NUMMER 1 GEWÄHLT!
Kaspersky Lab gehört zu den weltweit führenden Security-
Software-Herstellern. Für den bestmöglichsten Schutz forscht
das russische Unternehmen ständig an neuen Technologien
und ist dabei ein wichtiger Wegbereiter für neue Sicherheitsstandards.
Über 350 Millionen Heimanwender und etwa
250.000 Unternehmen weltweit vertrauen auf die Sicherheitslösungen
von Kaspersky Lab.
IM MITTELPUNKT: DER SCHUTZ
IHRER WERTVOLLSTEN DATEN
NEU
Kaspersky PURE 3.0
Total Security
Umfassender Schutz gegen komplexe PC-Malware
Vertrauen Sie auf die stärkste Security-Lösung von Kaspersky Lab –
zum größtmöglichen Schutz Ihres PCs, Ihrer Daten und Ihrer
digitalen Identität unterwegs in der virtuellen Welt.
www.kaspersky.de

SPECIAL | Compass-CSS
Compass: Der Turbo
fürs Stylesheet!
Compass basiert auf dem CSS-Präprozessor Sass und
bietet neben nützlichen Sass-Bausteinen allgemeine
CSS-Helferlein und Best-Practice-Tools. Es erleichtert
das rasche Prototyping und ermöglicht die Weitergabe
einzelner Komponenten als Compass-Plug-ins.
CSS-Präprozessoren wie LESS und
Sass ergänzen CSS um Komponenten,
die man bei CSS schon lange vermisst
hat: die Möglichkeit, Code besser
zu strukturieren, Teile wiederzuverwenden
und beispielsweise Variablen
zu nutzen. Damit lassen sich auch längere
Stylesheets bei größeren Projekten
leichter handhaben.
Ob man dem Präprozessor Sass oder
LESS den Vorzug gibt, sei jedem selbst
überlassen. Ein Vorteil von Sass aber ist
klar: Für Sass gibt es Compass. Compass
ist ein Sass-basiertes Projekt. Sie können
sich Compass als eine Art Sass-Bibliothek
vorstellen, die viele der bei den
unterschiedlichsten Projekten immer
wieder benötigten Komponenten enthält.
Im Gegensatz zu Bootstrap & Co.
ist Compass aber Design-agnostisch,
das heißt es legt Sie nicht auf irgendeine
Optik fest – stattdessen bietet es jede
Menge Arbeitserleichterungen. Im Artikel
erfahren Sie zuerst, wie Sie sich eine
Compass-Umgebung einrichten und mit
Compass arbeiten. Danach sehen wir uns
ausgewählte praktische Anwendungen
von Compass an. Sie erfahren, wie Sie
sich die Arbeit mit CSS3-Eigenschaften
vereinfachen, wie Sie sich automatisch
CSS-Sprites generieren lassen und wie
Sie die CSS-Dateien für den produktiven
Einsatz verkleinern.
Installation
Compass setzt Ruby voraus, das Sie installieren
müssen, sofern Sie es noch
nicht haben. Unter Windows geht dies
besonders komfortabel mit dem Ruby Installer.
Beim Mac ist Ruby normalerweise
schon vorinstalliert.
Anstatt Ruby zu installieren und Compass
über die Kommandozeile auszuführen,
können Sie auch eine graphische
Oberfläche wie Compass.app nutzen,
die es für 10 Dollar zu kaufen gibt. Allerdings
werden auch immer wieder einmal
Performance-Probleme bei der Nutzung
20 0513 internet magazin

Compass-CSS | SPECIAL
von Compass.app gemeldet, deswegen
soll hier die andere Variante vorgestellt
werden. Wenn Sie Ruby haben, können
Sie Compass installieren. Wechseln Sie
hierfür in die Eingabeaufforderung (Windows)
oder Konsole (Mac OS). Haben Sie
Ruby mit dem Installer unter Windows
installiert, geht es am einfachsten, wenn
Sie über das Startmenü im Ruby-Ordner
den Punkt „Start Command Prompt with
Ruby“ wählen. Schreiben Sie dann den
folgenden Befehl:
gem install compass
RubyGems, das hier verwendet wird, ist
das offizielle Paketsystem für Ruby. Ob
die Installation geklappt hat, verrät der
folgende Befehl:
compass –v
Das liefert die aktuell installierte Version
von Compass. Außerdem wird Ihnen
ein Link auf eine Internetseite angezeigt,
wo Sie für das Compass-Projekt spenden
können – was Sie sich durchaus überlegen
sollten, wenn Sie sich entscheiden,
mehr mit Compass zu arbeiten.
Erste Schritte
Jetzt können Sie ein Compass-Projekt
anlegen. Im Beispiel soll es neuesprojekt
heißen. Dafür schreiben Sie
compass create neuesprojekt
Das erzeugt ein Standardprojekt im Ordner
neuesprojekt. Es beinhaltet mehrere
Komponenten:
» . sass-cache ist ein Ordner mit gecachten
Dateien, den Sie selbst nicht
bearbeiten sollten.
» Der Ordner sass beinhaltet die SCSS-
Dateien, genau genommen drei:
ie.scss ist für IE-spezifische Styles gedacht,
print.scss für den Ausdruck und
screen.scss steuert die Standardformatierungen.
» Im Ordner stylesheets stehen die über
Sass erzeugten CSS-Dateien – parallel
zu den drei SCSS-Dateien sind es auch
drei CSS-Dateien: ie.css, print.css und
Die Website des
Compass-Projekts.
screen.css.
» Schließlich gibt es
noch die config.rb-
Datei, über die Sie
die Ordnernamen
anpassen können.
Zudem lassen sich
in dieser Konfigurationsdatei
weitere Projekte werden über die Kommandozeile gesteuert.
Am Anfang ungewohnt, dann aber sehr mächtig: Compassnützliche
Dinge
steuern; Sie können etwa festlegen,
css“ media=“screen, projection“
Die normale Vorgehensweise ist nun,
Damit Sie die Änderungen bei der Formatierung
sehen können, empfiehlt es sich, ner bearbeiten. Diese Dateien werden
dass Sie die SCSS-Dateien im Sass-Ord-
eine HTML-Datei zu erstellen, in der Sie kompiliert und daraus die CSS-Dateien
auf die CSS-Dateien verweisen. Wie Sie erzeugt. Die Kompilierung stoßen Sie
das machen, finden Sie sowohl in der manuell durch folgenden Befehl in der
Anzeige der Konsole nach Erstellung des Konsole an:
Projekts angezeigt als auch innerhalb compass compile neuesprojekt
von Kommentaren in den SCSS-Dateien: Komfortabler ist es, wenn Änderungen an
www.internet-magazin.de 21

SPECIAL | Compass-CSS
den SCSS-Dateien automatisch erkannt
und die CSS-Dateien laufend generiert
werden. Dafür schreiben Sie
compass watch neuesprojekt
Zum Beenden des Watch-Zustands drücken
Sie Strg+C. Am besten sollten Sie
das Prozedere einmal testen. Ergänzen
Sie einen einfachen CSS-Befehl in der
Datei screen.scss, etwa
body { background-color: orange; }
Lassen Sie dann auf einem der beiden
vorgestellten Wege die Neukompilierung
der Datei screen.scss ablaufen und
Sie werden sehen, dass in screen.css die
obige Zeile ergänzt ist.
Module importieren
Aber der Reiz von Compass liegt natürlich
nicht darin, dass Sie nur normale
CSS-Befehle schreiben. Interessanter ist,
dass Sie zum einen Sass-Befehle eingeben
und zum anderen auf die von Compass
zur Verfügung gestellten Module
zugreifen können. Um ein Modul zu
nutzen, müssen Sie es zuerst importieren.
Ein Beispiel hierfür sehen Sie bereits
in Ihrer screen.scss-Datei:
@import „compass/reset“;
Damit wird das Reset-Stylesheet eingebunden.
In der generierten CSS-Datei
screen.css ist der @import-Befehl durch
die in dieser Datei angegebenen Regeln
ersetzt worden. Das ist übrigens ein prinzipieller
Vorteil von CSS-Präprozessoren:
Sie können Ihren CSS-Code modulartig
auf mehrere Dateien aufteilen, das Ergebnis
ist aber trotzdem nur eine einzige
Datei. An sich funktioniert die Aufteilung
auf mehrere Dateien auch in CSS
pur und zwar mittels @import. Die Verwendung
von @import in CSS hat aber
eine Reihe von Nachteilen: Mehrere mit
@import eingebundene Dateien bedeuten
mehrere HTTP-Requests. Außerdem
ist aus Performance-Gründen prinzipiell
vom Einbinden externer Dateien mit @
import abzuraten. All diese Nachteile
Bei Compass hat man es mit zwei Dateien
zu tun: Die SCSS-Dateien werden
bearbeitet, die CSS-Dateien generiert.
können Sie sich ersparen, wenn Sie
Module per Compass importieren. Ein
recht praktisches Compass-Modul ist das
CSS3-Modul. Es bietet hilfreiche Verkürzungen
bei der Verwendung von CSS3-
Eigenschaften. Das Modul binden Sie
über folgenden Befehl ein:
@import „compass/css3“;
Damit wird das CSS3-Modul importiert,
was anscheinend aber keine Auswirkungen
hat: Das generierte CSS-Style
sheet zeigt sich unverändert. Der Grund
dafür ist, dass im CSS3-Modul nur Mixins
definiert sind, also wiederverwendbare
CSS-Komponenten. Diese Mixins treten
aber erst in Erscheinung, wenn man sie
benutzt – beispielsweise für Transitions.
Nehmen wir an, wir haben ein Element,
dem wir eine Transition zuweisen möchten:
Wird mit dem Mauszeiger auf das
Element gezeigt, soll ein langsamer
Wechsel der Hintergrundfarbe ablaufen.
Im normalen CSS müssten wir die Eigenschaft
transition mit mehreren Präfixen
schreiben. Compass nimmt uns diese Arbeit
durch den @include-Befehl ab:
.beispiel {
background-color: green;
@include transition(backgroundcolor
0.3s ease-in);
}
.beispiel:hover {
background-color: white;
}
Im erzeugten Stylesheet steht hingegen
der Code mit den herstellerspezifischen
Präfixen – das CSS3-Modul hat sie hingezaubert:
.beispiel {
background-color: green;
-webkit-transition: backgroundcolor
0.3s ease-in;
-moz-transition: background-color
0.3s ease-in;
-o-transition: background-color
0.3s ease-in;
transition: background-color 0.3s
ease-in;
}
.beispiel:hover {
background-color: white;
}
Das CSS3-Modul liefert solche Verkürzungen
auch für viele weitere CSS3-
Eigenschaften – von box-shadow über @
font-face, Transformationen bis hin zum
Mehrspaltenlayout und vielen mehr.
Welche Browser dabei unterstützt werden
sollen, können Sie übrigens über
Variablen steuern.
Compass-Module im Überblick
Neben dem gerade gezeigten CSS3-
Modul gibt es eine Reihe von weiteren
Modulen. Genauere Informationen dazu
finden Sie auf der Projekt-Website unter
dem Punkt „Reference“. Hier einmal im
Überblick:
» Das Core-Framework enthält Codes,
die sonst in mehreren Frameworks
wiederholt werden müssten.
» Im Modul Typography befinden sich
wiederverwendbare Sass-Befehle zur
Formatierung von Texten, wie beispielsweise
zur Einhaltung eines vertikalen
Rhythmus.
» Die Hilfsfunktionen („Helper Functions")
halten nützliche Befehle bereit,
beispielsweise um Farben zu verändern,
wie adjust-lightness() oder adjust-saturation()
und vieles mehr.
» Das Modul Layout integriert häufig
22 0513 internet magazin

ANZEIGE
+
5 1. PLATZ
UNSERE LESER HABEN SICH ENTSCHIEDEN UND
SAMSUNG FÜNF MAL ZUR NUMMER 1 GEWÄHLT.
NOTEBOOKS
Heute sind die Ansprüche an ein Notebook so unterschiedlich
wie seine Nutzer. Ob ultramobiler Begleiter, leistungsstarkes
Arbeitsgerät, komfortable Komplettlösung aus Rechner und
Bildschirm oder Multimedia-Gerät – Samsung bietet eine
breite Palette an hochwertigen Geräten für jeden Bedarf.
MULTIFUNKTIONSGERÄTE
Samsung offeriert ein komplettes Portfolio an Laser-Multifunktionsgeräten
in Farbe und Schwarz-Weiß. Vom kleinen,
Platz sparenden 3-in-1-Gerät für den Schreibtisch, über
schnelle Arbeitsgruppengeräte bis hin zu hoch leistungsfähigen
A3-Kopiersystemen finden Anwender immer das richtige
System für die unterschiedlichsten Aufgabengebiete.
MONITORE
Samsung steht für professionelle Premium-Qualitätsmonitore,
die den Bedürfnissen verschiedenster Nutzergruppen
gerecht werden und liefert aktuellste Technologie für
anspruchsvolle Anwender. So überzeugen alle neuesten
hochauflösenden Monitore mit exzellenter Bildqualität in
elegantem Design.
SMARTPHONES
Während der eine Konsument
ein einfaches Modell bevorzugt,
mit dem er vor allen Dingen telefonieren
und hin und wieder
im Netz surfen kann, möchte der
nächste ein Mobiltelefon, das
auch dem fordernden Einsatz auf
einer Baustelle oder beim Aktivsport
standhält. Andere wünschen
sich hingegen Smartphones
mit umfangreichen Leistungsreserven,
innovativen Funktionen
und atemberaubenden Displays.
Samsung befriedigt gekonnt alle
diese individuellen Wünsche und
begeistert seit Jahren mit neuester
Technik, richtungsweisenden
Funktionen, hoher Qualität und
klaren Designs.
DOCUMENT SOLUTIONS
Ausgezeichnete Hardware benötigt professionelle
Lösungen, um sie optimal nutzen zu
können. Aus diesem Grunde befindet sich bereits
im Lieferumfang der Samsung-Systeme ein
umfangreiches und leistungsstarkes Paket an
Dokumentenmanagement-Lösungen. Weitere
optionale Module aus dem Samsung M.I.S.-
Konzept ermöglichen die Anpassung an alle
modernen Office-Bedürfnisse.

SPECIAL | Compass-CSS
benötigte Layoutkomponenten wie
den Code für einen Sticky Footer
(eine Fußzeile, die immer am unteren
Browserfensterrand bleibt) oder Grid
Background, das ein Raster über CSS3-
Farbverläufe generiert – nützlich beim
Entwurf von Rasterlayouts.
» Utilities hilft bei gängigen Aufgaben –
unter anderem für die Erstellung von
CSS-Sprites.
Das Modul Blueprint hat eine Sonderstellung.
Es enthält neben Klassen für
die Erstellung eines Rasterlayouts auch
weitergehenden Formatierungen für die
Typographie, für Formulare, Buttons und
Tabs. Im Unterschied zu den anderen
Modulen ist es aber standardmäßig nicht
mitinstalliert. Wenn Sie es benötigen, geben
Sie das direkt bei der Erstellung des
Projekts an:
compass create meinprojekt --using
blueprint
Bei einem bestehenden Projekt schreiben
Sie hingegen:
compass install blueprint
Modulhierarchie
Die Module in Compass sind hierarchisch
angeordnet. Wenn Sie ein übergeordnetes
Modul importieren, werden
alle untergeordneten Module mitimportiert.
Wenn Sie beispielsweise vom CSS3-
Modul nur die Transitions benötigen, genügt
Folgendes:
@import „compass/css3/transition“;
Möchten Sie hingegen alle CSS3-Module
nutzen, so importieren Sie diese über:
@import „compass/css3“;
von geschweiften Klammern setzt, um
Blöcke zu kennzeichnen, und zum anderen
über die SCSS-Syntax. Letztere
kommt standardmäßig bei Compass
zum Einsatz und wurde auch bisher im
Artikel verwendet. Die SCSS-Syntax hat
den Vorteil, dass sie CSS-kompatibel ist
und Sie die geschweiften Klammern wie
in CSS üblich benutzen können. Zudem
lässt sich auch bestehender CSS-Code
direkt integrieren. Sehen wir uns einmal
die äußert praktischen Variablen bei Sass/
Compass an. Diese kann man beispielsweise
für Farben nutzen, wodurch sich
Anpassungen am Farbschema problemlos
vornehmen lassen. Zuerst definieren
Sie die Variable:
$logofarbe: #3fbfce;
Danach lässt sich die Variable nutzen,
wo man sie braucht:
.navigation {
background-color: $logofarbe;
}
Im erzeugten Stylesheet ist dann die Ersetzung
durchgeführt:
.navigation {
background-color: #3fbfce;
}
Außerdem bietet Sass/Compass nützliche
und recht intuitive Verkürzungen bei der
Schreibweise verschachtelter Selektoren.
In CSS müssen Sie Nachfahrenkombinatoren
immer einzeln angeben, also beispielsweise
so:
.navigation {
background-color: #3fbfce;
}
.navigation ul {
list-style-type: none;
}
In Sass/Compass geht das einfacher:
.navigation {
background-color: #3fbfce;
ul {
list-style-type: none;
}
}
Mixins
Ein besonders mächtiges Konzept sind
die sogenannten Mixins bei Sass/Compass.
Dank dieser können Sie CSS-
Schnipsel einmal definieren und dann
über einen kurzen Namen ansprechen.
In folgendem Beispiel wird ein Mixin mit
Namen links definiert:
@mixin links {
float: left;
margin-left: 20px;
width: 10%;
}
Ein Mixin verwenden Sie, indem Sie
es über @include einbinden – so wie
wir eben beim Transition-Beispiel auch
Compass setzt
auf Sass.
Wichtige Sass-Konzepte
Compass erweitert Sass durch nützliche
Vorlagen. Und jetzt ist es an der Zeit,
ein paar grundlegende Sass-Konzepte
zu erläutern. Erst einmal vorweg: Sass
können Sie in zwei Varianten schreiben,
zum einen in der ursprünglichen Sass-
Syntax, die auf Einrückungen anstelle
24 0513 internet magazin

Compass-CSS | SPECIAL
schon @include verwendet haben:
.beispiel {
@include links;
}
Dann wird der Code des Mixins an die
betreffende Stelle kopiert, das Ergebnis
ist in unserem Fall:
.beispiel {
float: left;
margin-left: 20px;
width: 10%;
}
Ebenfalls nützlich ist es, dass Sie in
Sass/Compass bedingte Anweisungen
verwenden können. Eine Auflistung
der Sass-Funktionen finden Sie auf
der Sass-Website.
Nützliches Links
Compass-Website
http://compass-style.org/
Installation von Ruby
http://www.ruby-lang.org/en/
downloads/
Installation von Ruby unter Windows
http://rubyinstaller.org/
Unterstützte Browser festlegen
http://compass-style.org/
reference/compass/support/
BlueprintCSS-Framework
http://www.blueprintcss.org/
Sass
http://sass-lang.com/
Compass.app – grafische Oberfläche
für Compass
http://compass.handlino.com/
Sprites automatisch erstellen
Für kleine Icons und ähnliche Bilder verwendet
man heute häufig CSS-Sprites.
Bei CSS-Sprites sind mehrere Bilder nebeneinander
und/oder untereinander zu
einem großen Bild montiert. Diese werden
an gewünschter Stelle per CSS als
Hintergrundbild zugewiesen. Die Eigenschaft
background-position sorgt dabei
dafür, dass jeweils der richtige Ausschnitt
des Hintergrundbildes und damit das
richtige Icon angezeigt wird. CSS-Sprites
sind die richtige Strategie, um die Anzahl
der HTTP-Requests zu beschränken, und
das ist ihr großer Vorteil. Sie sind aber
leider recht mühsam zu erstellen und
wesentlich umständlicher als Einzelbilder,
wenn es darum geht, Änderungen
einzupflegen. Mit Compass wird die Arbeit
mit Sprites wieder einfacher. Gehen
wir einmal von drei Bildern aus, die sich
innerhalb von images/meine-icons befinden.
Diese heißen eins.png, zwei.png
und drei.png. Um diese Bilder als Sprites
nutzen zu können, müssen wir sie zuerst
zu einem Bild zusammenmontieren.
Außerdem benötigen wir die einzelnen
Koordinaten, die wir als backgroundposition-Werte
nutzen können. Das alles
macht Compass für Sie automatisch,
wenn Sie die folgenden Zeilen innerhalb
von screen.scss ergänzen:
@import „meine-icons/*.png“;
@include all-meine-icons-sprites;
Nach einer Neukompilierung finden Sie
in Ihrem Ordner images das neu aus den
Einzeldateien erstellte Bild. Außerdem ist
die Datei screen.css um neue Klassendefinitionen
ergänzt, denen das Hintergrundbild
zugewiesen wird:
.meine-icons-sprite, .meine-iconsdrei,
.meine-icons-eins, .meineicons-zwei
{
background: url(‚/images/meineicons-s23dfd165ad.png‘)
no-repeat;
}
In einzelnen Regeln stehen die
benötigten Hintergrundpositionen:
.meine-icons-drei {
background-position: 0 -32px;
}
.meine-icons-eins {
background-position: 0 -64px;
}
.meine-icons-zwei {
background-position: 0 0;
}
Um ein Icon anzuzeigen, weisen Sie dem
Element die Klasse zu, etwa:
…
Praktischerweise können Sie die Größe
der Icons automatisch ermitteln lassen:
$height: meine-icons-sprite-height(eins);
$width: meine-icons-sprite-width(eins);
Diese Variablen lassen sich dann im
Code verwenden:
.icon {
width: $width;
height: $height;
}
Natürlich könnte man die Dimensionen
eines Icons auch direkt auslesen.
Der Vorteil der dynamischen Methode
ist aber, dass Sie keinerlei Änderungen
durchführen müssen, wenn beispielsweise
größere Icons zum Einsatz kommen.
Verkleinerung leicht gemacht
Aus Performance-Gründen wird empfohlen,
CSS-Dateien für den produktiven
Einsatz zu verkleinern und unnötige Leerzeichen
und Kommentare zu entfernen.
Auch diese Arbeit kann Compass erledigen.
Editieren Sie hierfür die Konfigurationsdatei
config.rb und schreiben Sie
output_style = :compressed
Wenn Sie danach die Kompilierung Ihrer
SCSS-Datei ausführen, erhalten Sie als
Ergebnis ein verkleinertes Stylesheet. Der
Artikel kann Ihnen nur einen Ausschnitt
aus den Möglichkeiten von Compass
präsentieren. Zusätzlich zu dem eigentlichen
Framework gibt es ja außerdem
noch eine Reihe von nützlichen Extensions;
so setzt beispielsweise das schöne
Framework Foundation auf Compass.
Selbstverständlich bringt der Umstieg
auf Sass/Compass eine gewisse Einarbeitungszeit
mit sich, auch an die Arbeit mit
der Eingabeaufforderung muss man sich
erst einmal gewöhnen. Dafür haben Sie
dann mit Compass ein äußerst mächtiges
Tool an der Hand, das gerade bei der Erstellung
und Wartung von umfangreichen
Stylesheet-Dateien seine Stärken zeigt.
Dr. Florence Maurice
www.internet-magazin.de 25

WEBDESIGN | Videos mit HTML 5
Videos mit HTML5
abspielen
Browser benötigen zur Wiedergabe von Videos künftig
keinen Player mehr. Denn dank HTML5 werden Videos
ohne Erweiterung direkt im Browser dargestellt.
Die Wiedergabe der meisten Videos
erfolgt heute immer noch auf Basis
von Flash. Damit grenzen Sie aber nicht
nur die Nutzer mobiler Apple-Geräte
aus, auch immer mehr Android-Geräte
unterstützen in der neuesten Version
des Betriebssystems kein Flash mehr.
Grund genug, sich nach einer Alternative
umzusehen.
Diese kommt mit HTML5 frei Haus, denn
die aktuelle HTML-Implementierung besitzt
nicht nur einen Player für Audiodateien,
sondern auch einen für Videos.
Auf der Website von Longtain Video
sehen Sie einen aktuellen Vergleich der
wichtigsten Browserimplementierungen
und deren Unterstützung von HTML5-
Video sowie Adobe Flash. In dieser
Übersicht ist ein klarer Trend in Richtung
Zukunft erkennbar: weg von Adobe Flash
und hin zu HTML5-Video.
Einfache Integration
Ein Grund dafür ist sicherlich die einfache
Integration eines Videos ohne größere
vorherige Konvertierungsschritte.
Mit Hilfe des video-Tags können Sie
einen Film mit wenigen Zeilen in Ihre
Website integrieren.
Die folgenden Zeilen platzieren Sie an
der gewünschten Stelle innerhalb des
body-Tags einer HTML-Seite.
Ihr Browser unterstützt die Video-
Funktionalität von HTML5 nicht.
Die Definition wird über das video-Tag
eingeleitet, dem Sie eine Reihe von Einstellungen
als Parameter mitgeben können.
Das obige Beispiel stellt das Video
mit einer Breite von 640 Pixeln und einer
Höhe von 480 Pixeln dar. Der Parameter
controls sorgt für die Anzeige der Kontrollelemente,
mit denen Sie innerhalb
des Videos navigieren können.
Die Verlinkung zum Video stellen Sie
über das Tag source her. Als Parameter
müssen Sie zwingend den Namen des
Videos samt Pfad sowie den Datentyp
der Datei angeben. In unserem Beispiel
haben wir einen Film vom Typ MP4 und
einen im alternativen Videoformat OGG
in die Website integriert. Zu beiden Einträgen
geben Sie über den Parameter type
das Format des Videos direkt an.
Als letzte Information innerhalb des
video-Tags sollten Sie denjenigen Besuchern
noch einen Hinweis geben, die
versuchen, das Video mit einem zu alten
Browser anzuzeigen.
Verschiedene Videoformate
Leider unterstützen nicht alle Browser
und Plattformen die gleichen Videofor-
Unterstützte Videoformate
Browser MP4 WebM OGG
Internet Explorer 9 Ja Nein Nein
Chrome 6 Ja Ja Ja
Firefox 3.6 Nein Ja Ja
Safari 5 Ja Nein Nein
Opera 10.6 Nein Ja Ja
26 0513 internet magazin

Videos mit HTML 5 | WEBDESIGN
mate. Die Auflistung in der unteren Tabelle
zeigt, dass es aktuell kein Videoformat
gibt, welches durchgängig von allen
Browsern unterstützt wird. Sie werden
somit nicht umhin kommen, Ihr Video in
mehreren Formaten abzuspeichern und
anzubieten. Wir haben für Sie die drei
gängigsten Formate und deren Browser-
Unterstützung gegenübergestellt.
Alle drei Videoformate werden lediglich
von drei Browseranbietern unterstützt
und von den anderen links liegen gelassen.
Aufgrund dieses Umstands sollten
Sie Ihre Videos immer im Ogg-Format
und zusätzlich entweder in WebM oder
MP4 anbieten.
Das Ogg-Format ist ein offenes Format,
welches mit dem Theora-Video-Codec
und dem Vorbis-Audio-Codec arbeitet.
WebM setzt im Audiobereich ebenfalls
auf Vorbis, nutzt allerdings VP8 als Video-Codec.
Den wohl bekanntesten Video-Codec
setzt MP4 mit H.264 ein, im
Audiobereich kommt AAC zu Einsatz.
Aus diesem Grund sollten Sie, wie im
ersten Beispiel gezeigt, immer zwei Videoformate
anbieten, damit auch alle Besucher
diese unabhängig vom favorisierten
Browser sehen können.
Darstellung des Videos
Die Wiedergabe des Videos lässt sich
über verschiedene Parameter, die Sie
dem video-Tag mitgeben können, optimal
an Ihre Anforderungen anpassen.
Die aktuelle Version des Tags unterstützt
insgesamt neun unterschiedliche Parameter,
die jedoch alle optional sind. Im
ersten Beispiel sind mit width, height und
control drei von ihnen zum Einsatz gekommen.
Eine komplette Übersicht aller
Parameter, deren Bedeutung und mögliche
Werte finden Sie in Tabelle 2.
Nicht nur das video-Tag besitzt verschiedene
Attribute, die es zu nutzen gilt.
Auch das source-Tag besitzt drei Parameter,
mit denen Sie neben der URL und
Auf der Website
Longtailvideo
finden Sie eine
Übersicht der
aktuellen Marktdurchdringung
verschiedener
Browserversionen
sowie deren
HTML5-Videounterstützung.
dem MIME-Typ auch die Art der Medienquelle
festlegen können. Die beiden letzten
Angaben sind jedoch nicht zwingend
notwendig erforderlich. Natürlich muss
ein Verweis auf die Videodatei gesetzt
werden, da ansonsten keine Wiedergabe
stattfinden kann. Wenn Sie den Webserver
selbst betreiben und zum ersten Mal
Videos ausliefern, dann sollten Sie in der
Datei httpd.conf kontrollieren, ob die
Videodateien mit dem korrekten MIME-
Typ ausgeliefert werden. Für die drei Dateiformate
sollten folgende Zeilen in der
Konfigurationsdatei vorhanden sein:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Anpassung der Oberfläche
Auf all diese Eigenschaften haben Sie
über das DOM-Modell direkten Zugriff.
Damit jedoch nicht genug. HTML5 in
Kombination mit Javascript ermöglicht
Mit Hilfe von Javascript können Sie
eigene Schaltflächen definieren und mit
Funktionen versehen.
Ihnen eine Anpassung des Videoplayers
an Ihre eigenen Bedürfnisse und Vorstellungen.
Das Ganze funktioniert im
Übrigen analog für den Audioplayer –
dies ist jedoch nicht Bestandteil dieses
Workshops. Sie können mit Hilfe von
Javascript auf die Methoden des Videoplayers
zugreifen und damit beispielsweise
einen Film abspielen, eine Pause
einlegen oder die Wiedergabe komplett
beenden. Die Eigenschaften erlauben
Ihnen zum einen den Überblick, auf
welchem Niveau die Lautstärke aktuell
eingestellt ist, und zum anderen einen
direkten Zugriff auf diese Werte.
Im folgenden Beispiel soll es im ersten
Schritt lediglich einen Knopf zum Starten
und Pausieren des Videos geben.
Dazu fügen Sie innerhalb des div-Tags
als erstes eine Schaltfläche hinzu. In unserem
Fall haben wir ein -Tag
verwendet und das Ereignis onlick mit
der Funktion start_stop() verbunden.
Damit Sie das Video auch per DOM
ansteuern können, versehen Sie das
video-Tag noch mit einer ID, wie etwa
„meinVideo“ und entfernen das Attribut
controls. Damit bekommen Sie beim
nächsten Aufruf das erste Bild des Videos
angezeigt und haben eine Schaltfläche,
www.internet-magazin.de 27

WEBDESIGN | Videos mit HTML 5
die allerdings noch ohne Funktion ist.
Abspielen/Pause
Ihr Browser unterstützt die
Video-Funktionalität von HTML5
nicht.
Die Funktion kommt im nächsten Schritt
per Javascript hinzu. Für den Zugriff auf
das Video-Objekt benötigen Sie eine Variable.
Die Verknüpfung wird über die
Eigenschaft document.getElementById()
realisiert.
var meinVideo1=document.
getElementById(„meinVideo“);
function start_stop() {
if (meinVideo1.paused)
meinVideo1.play();
else
meinVideo1.pause();
}
Die eigentliche Funktion start_stop() ist
denkbar einfach aufgebaut. Sie fragen lediglich
ab, in welchem Modus sich das
Video befindet und verändern diesen
entsprechend. So wird ein
Video, dessen Wiedergabe
aktuell pausiert, erneut wiedergegeben
und umgekehrt. Dies reicht bereits
für die Wiedergabe des Videos sowie die
Pause-Funktion aus.
Funktionen erweitern
Im nächsten Schritt sollen weitere Funktionen
für die Wiedergabe des Videos
hinzugefügt werden. Dabei soll nicht
eine vollständige Funktion wie im vorherigen
Beispiel zum Einsatz kommen,
sondern lediglich eine verkürzte Variante.
Mit dieser werden zwei Schaltflächen
„Lauter“ und „Leiser“ angelegt, die beim
Anklicken die Lautstärke jeweils um 0,1
Punkte erhöhen oder verringern.
Lauter
Leiser
Die Veränderung der Lautstärke wird
durch einen direkten Zugriff auf das
DOM-Objekt und die zugehörige Eigenschaft
volume erzielt. Dazu addieren
oder subtrahieren Sie vom aktuellen Wert
jeweils 0,1 Punkte.
Laden des Films stoppen
Wenn Sie einen größeren Film zur Verfügung
stellen, kann mit der Wiedergabe
bereits begonnen werden, wenn noch
Dienste und Programme zur Videokonvertierung
Für die Konvertierung des Videos gibt es zahlreiche Programme im Open-Source-Bereich.
Wir haben einige interessante Kandidaten für Sie zusammengestellt:
» Fireogg (http://firefogg.org/make/index.html): ein Online-Dienst, mit dem Sie
über ein Firefox-Plug-in Videos ins Ogg- oder WebM-Format konvertieren können.
» Handbrake (http://handbrake.fr/details.php): ein Programm für Windows, Mac OS X
und Linux zum flexiblen Konvertieren zwischen den meisten gängigen Formaten.
» Any Video Converter (http://www.any-video-converter.com/products/for_video_
free/): zum Konvertieren von Videoformaten unter Windows.
» Freemake Video Converter (http://www.freemake.com/de/): ebenfalls zum Konvertieren
unter Windows.
Es lassen sich nahezu alle Funktionen
per Javascript abbilden.
nicht der komplette Film geladen ist. Pausieren
Sie anschließend die Wiedergabe,
lädt die Website trotzdem im Hintergrund
noch weitere Daten herunter. Der
Standard sieht auch keinen Weg vor, diesen
Prozess zu stoppen. Allerdings gibt
es einen eleganten Behelf, wie Sie trotz
allem das Laden beenden können:
var meinVideo1 = document.
getElementById(„meinVideo“);
meinVideo1.pause();
meinVideo1.src = „“;
Im ersten Schritt benötigen Sie natürlich
wieder Zugriff auf das Video, das Sie als
nächstes in den Pause-Modus versetzen.
Damit das Laden anschließend auch
wirklich stoppt, löschen Sie einfach die
Verlinkung zwischen der Website und
dem Film auf Ihrem Webserver, indem
Sie die Eigenschaft src mit einem Leerstring
versehen.
Zeitliche Sprünge
Wenn Sie die klassischen Steuerelemente
einsetzen, dann haben Sie eine Zeitleiste
zur Verfügung, über welche Sie die Wiedergabeposition
festlegen. Wenn Sie Ihre
eigene Steuerung entwickeln, können Sie
entweder einen entsprechenden Regler
nachprogrammieren oder Sie steuern
dies über verschiedene Schaltflächen.
Welchen Weg auch immer Sie wählen,
der Programmcode und die notwendigen
Attribute sind immer die gleichen.
meinVideo1.seekable.start();
meinVideo1.seekable.end();
meinVideo1.currentTime = 99;
meinVideo1.played.end();
28 0513 internet magazin

Videos mit HTML 5 | WEBDESIGN
Verschiedene Player nutzen heute
bereits HTML5 und bieten eine
vordefinierte Oberfläche an.
Ein Video ist in ein oder mehrere sogenannte
Time-Range-Objekte unterteilt.
Dies sind zeitliche Abschnitte,
die Sie explizit ansteuern können.
Zu jedem dieser Objekte gibt es einen
Start- und einen Endpunkt. Die
erste Programmzeile gibt Ihnen den
Startpunkt zurück, die zweite entsprechend
den Endpunkt.
Wenn Sie die Wiedergabe an einer
bestimmten Stelle im Film beginnen
möchten, setzen Sie den Wert in Sekunden
über die Eigenschaft currentTime.
Mit diesem Parameter können Sie im
Übrigen auch die aktuelle Position in
Sekunden abfragen, an der Sie sich gerade
befinden. Die vierte Programmzeile
liefert Ihnen schließlich die Ende-Position
des aktuellen Abschnitts zurück.
Vorgefertigte Lösungen
Es gibt eine Reihe von Standardplayern,
bei denen Sie sich diesem Programmieraufwand
sparen können. Sie können
diese Player direkt mit der Standardoberfläche
integrieren oder nach Ihren eigenen
Wünschen konfigurieren.
Die Basis der Player ist HTML5. Somit ist
ein konsistentes Aussehen über die verschiedenen
Browserplattformen hinweg
garantiert. Besonders interessant sind
die Lösungen, die als Fallback-Lösung
noch die Wiedergabe von Flash-Dateien
erlauben. Die beiden Entwickler Gerrit
van Aaken und Philip Bräunlich haben
auf ihrer Website (http://praegnanz.de/
html5video/index.php) eine Liste von
Playern zusammengestellt und die einzelnen
Eigenschaften miteinander verglichen.
Besonders interessant ist die direkte
Integration der einzelnen Player in
die Website. Nachdem Sie den Namen
des Players in der Übersicht angeklickt
Parameter von
Parameter Bedeutung Wert
autoplay Video startet automatisch mit der Wiedergabe, wenn Autoplay
dieser Wert gesetzt ist. Standardwert ist false.
controls Zeigt die Kontrollleiste für die Steuerung der Videowiedergabe
controls
an. Standardwert ist false.
height Legt die Höhe des Fensters für die Videowiedergabe fest. Wert in Pixel
loop Legt fest, ob das Video in einer Schleife wiedergegeben loop
werden soll. Standardwert ist false.
muted Video startet ohne Tonwiedergabe. Standardwert ist false. muted
poster Sie können ein Bild angeben, das während des
Pfadangabe auf Datei
Ladens und bis zum Start des Videos angezeigt wird.
preload Ladestrategie des Videos während des Ladens der Website.
auto, metadata, none
Verschiedene Werte sind möglich.
src Link zur Videodatei URL
width Legt die Breite des Fensters für die Videowiedergabe fest. Wert in Pixel
haben, sehen Sie direkt den Player und
die Startsequenz eines Demovideos. Damit
können Sie sich gleich ein erstes Bild
über den Player machen.
Fazit
Die Wiedergabe eines Videos per HTML5
ist heute in nahezu jedem Browser möglich.
Lediglich Nutzer von Windows XP,
die noch den Internet Explorer einsetzen,
schauen in die Röhre. Die größere Herausforderung
ist die Wahl des passenden
Formats. Da sich die Browserhersteller bis
jetzt nicht auf einen durchgängigen Standard
einigen konnten, sollten Sie immer
zwei unterschiedliche Formate anbieten.
Das Konvertieren geht allerdings dank
zahlreicher Open-Source-Programme
und Webdienste einfach von der Hand.
Andreas Hitzig
www.internet-magazin.de 29

WEBDESIGN | Centurion CSS
Rapid Responsive
Prototyping
mit Centurion
HTML5- und CSS3-Frameworks schießen wie Pilze aus
dem Boden. Doch für welches soll man sich entscheiden?
Mit Centurion hat Justin Hough ein vielversprechendes
Framework realisiert, dessen Stärken im Prototyping
liegen. Doch lohnt die Einarbeitung und was
ist in Zukunft von dem Projekt zu erwarten?
Bei Webdesignern stehen HTMLund
CSS-Frameworks hoch im Kurs,
die auf sogenannten Gestaltungsrastern
basieren. In solchen Grid-Frameworks
kommen vordefinierte CSS-Klassen
zum Einsatz und erlauben die schnelle
und einfache Entwicklung von Website-
Prototypen. Das bekannteste CSS-Grid-
Framework dürfte das 960 Grid System
(960.gs) sein. Auch Twitters Bootstrap hat
viele Anhänger.
Mit Centurion schickt sich ein recht neues
Framework an, mehr und mehr Freunde
zu gewinnen. Auf den ersten Blick erinnert
Centurion sehr an Twitters Bootstrap
und an das 960 Grid System. Bei näherer
Betrachtung wird schnell deutlich, dass
es sich zwar nicht mit etablierten Umgebungen
messen kann, aber aufgrund
seiner einfachen und klaren Zielsetzung
ganz andere Stärken hat.
Als Web-Framework für das Prototyping
von Responsive Design nutzt es Sass und
CSS3 Media Queries. Das Erstellen von
Prototypen ist dank der simplen Syntax
einfach möglich. Das Framework nutzt
ein 960-Pixel-Raster, das Sie einfach auf
eine Breite von 320 Pixeln skalieren können.
Weitere Highlights sind benutzerdefinierte
CSS-Buttons, ein Menüsystem für
Desktop- und Mobile Client sowie die
Überschriftenskalierung auf Grundlage
der Browsergröße (Centurion verwendet
dabei em statt px).
Besonderheiten von Centurion
Der Centurion-Entwickler hatte von Anbeginn
des Projekts die schnelle Theme-
Entwicklung im Sinn. Das erklärt auch,
warum Centurion im direkten Vergleich
zu Groundwork, Gumby Framework &
Co. einen etwas schwachbrüstigen Eindruck
macht. Doch diese „Kompaktheit“
kann eine Stärke sein. Da das Framework
auf Sass setzt, behält der Webdesigner
recht einfach den Überblick. Das Besondere
an diesem Framework: Es ist so ausgelegt,
dass Sie damit ein Theme für ein
beliebiges Content-Management-System
oder ein Blog realisieren können. Auch
die reine Frontend-Entwicklung ist mit
Centurion möglich. Haben Sie sich also
einmal in die Umgebung eingearbeitet,
können Sie das System für alle gängigen
Webapplikationen nutzen. Aktuell ist
Centurion in Version 3.0 verfügbar. Mancher
wird sich fragen, warum ihm dieses
Projekt bislang entgangen ist. Die Frage
lässt sich recht einfach beantworten: Die
beiden ersten Versionen kamen nur bei
Projekten des Entwicklers zum Einsatz.
Erst seit Version 3.0 unterliegt Centurion
den beiden Lizenzen GPL und MIT.
Damit steht auch einem kommerziellen
Einsatz nichts im Wege.
Webentwickler, die bereits mit einem
Framework wie 960.gs gearbeitet haben,
werden sich schnell mit Centurion
anfreunden. Mit 960.gs hat dieses System
nicht nur die gleiche Ausdehnung
gemein, sondern auch die Syntax ist
ähnlich. Der Centurion-Entwickler hat
sich aber auch bei Twitters Bootstrap
bedient und das Konzept des grafiklosen
Styling der gängigen Bedien- und
Steuerelemente übernommen. Gerade
die Schaltflächen des Centurion-Frameworks
erinnern sehr stark an Bootstrap.
Damit bewegt sich diese Umgebung
irgendwo zwischen ihren berühmten
Vorbildern. In Sachen Responsive Design
setzt Centurion konsequent auf CSS
Media Queries.
Entwicklung mit Centurion
Centurion ist – im Unterschied zu 960.
gs – keineswegs auf ein 12-Spaltensystem
begrenzt. Zwar verwendet das Framework
standardmäßig ein 12-spaltiges
Raster, aber Sie können damit auch eines
30 0513 internet magazin

Centurion CSS | WEBDESIGN
mit 16, 18 oder mehr Spalten erzeugen.
Dabei kommt Centurion zu Gute, dass
das System auf Sass basiert.
Um die verfügbaren Spalten in vier identische
Container aufzuteilen, verwendet
man folgende Syntax:
class=“grid-3“
Die Standardversion von Centurion, die
Sie über die Github-Website beziehen
können, besitzt eine 12-spaltige
Konfiguration mit einer Breite von 960
Pixeln für die Darstellung der Inhalte
auf Desktop-Rechnern und eine per
CSS3-Media-Queries heruntergebrochene
Version für Smartphones mit 360
Pixeln Breite.
Sie können das 12-Spaltensystem
grid-12 in unterschiedliche Einzelspalten
aufteilen, beispielsweise in
grid-4 und grid-8:
…
…
Doch damit nicht genug: Sie können
auch verschachtelte Spalten anlegen,
ohne dass der Code dabei deutlich komplizierter
würde. Wenn Sie ein sechsspal-
So macht Web Prototyping Spaß: Mit wenig Aufwand können Sie eine Tabelle anlegen.
tiges Layout verwenden und drei Bilder
mit Bildunterschrift nebeneinander platzieren
wollen, und zwar unterhalb des
Bildunterschrift zu Bild 1
Haupttextblocks, müssen Sie dem Code
lediglich mobile-33 hinzufügen. Der
Wert 33 bestimmt dabei den Prozentsatz
Bildunterschrift zu Bild 2
der Breite der verschachtelten Spalten:
Hier findet sich der Text,
der durch die drei nachfolgenden
Bildunterschrift zu Bild 3
Bilder ergänzt wird.
Mit Centurion
lassen sich
die unterschiedlichsten
Spaltensysteme
für die
Template-
Gestaltung
realisieren.
Die Grid-Elemente Alpha und Omega
besitzen einen Seitenabstand von 10 Pixeln
und einen Standardabstand von 20
Pixeln zwischen jeder Spalte.
Einfach und effektiv:
Schaltflächen
Wenn Sie dabei sind, einen Website-
Prototypen zu erstellen, genügt es vollkommen,
wenn Sie die Schaltflächen
durch einfache Buttons realisieren, die
die gewünschte Funktionen wie die
Verarbeitung von Formulareingaben re-
www.internet-magazin.de 31

WEBDESIGN | Centurion CSS
präsentieren. Ein Button wird durch den
Aufruf der button-Klassen implementiert
– das war es auch fast schon. Die Standardklasse
kümmert sich um die Farbfüllung,
die Größe und die Formgebung. Ein
einfaches Beispiel:
Kleine Schaltfläche
Der Standard-Button besitzt den ihm
zugewiesenen Text und einen schwarzen
Hintergrund. Sollte Ihnen das nicht
zusagen, haben Sie die Wahl zwischen
folgenden weiteren Farben:
» Blau - blue
» Grün - green
» Grau - grey
» Rot - red
» Gelb - yellow
Wenn Sie eine rote Schaltfläche anlegen
wollen, sieht der Code wie folgt aus:
Eine rote Schaltfläche
Tabellen-
Header
Text
Langer Text
Text
Text
Text
Langer Text
Text
Text
Text
Langer Text
Text
Content
Mehr als
ausreichend:
Centurion
verfügt über
spezielle
Button-
Klassen für
das schnelle
Entwickeln
typischer
interaktiver
Funktionen.
Neben der Farbe können Sie auch die
Größe der Schaltflächen an Ihre Anforderungen
anpassen. Sollte Ihnen der
Standard-Button zu groß sein, können
Sie dessen Größe mit der small-Klasse
anpassen:
Ein kleiner Button
Sollte Ihnen die Form hingegen zu klein
erscheinen, verwenden Sie die large-
Klasse. Ein Beispiel:
Eine große blaue Schaltfläche
Professionelle Tabelle
Mit Centurion lassen sich mit wenigem
Aufwand ansprechende Tabellen realisieren.
Dabei sind Sie flexibel, was die Gestaltung
der Tabelle angeht. Eine einfache
Tabelle mit grau hinterlegter Kopfzeile
wird wie folgt angelegt:
Analog zu den Schaltflächen können Sie
auch Ihre Tabellen mit ähnlichen Farbschemata
gestalten. Das Framework stellt
folgende Farbklassen zur Verfügung:
» Blau - ctBlue
» Grün - ctGreen
» Grau - ctGrey
» Organe - ctOrange
» Rot - ctRed
» Gelb - ctYellow
Um die Farbe zu verwenden, müssen
Sie der Tabelle lediglich die gewünschte
Farbklasse zuweisen. Ein Beispiel:
Weitere Gestaltungsmöglichkeiten
Das Centurion-Framework bietet Ihnen
verschiedene weitere interessante Möglichkeiten.
Sie können beispielsweise
sehr einfach eine Warnung ausgeben.
Beim Standardwarnhinweis wird der
Text lediglich in einem grau hinterlegten
Dialog ausgegeben. Er wird wie
folgt angelegt:
Das ist der Standardhinweisdialog!
Neben diesem Standarddialog erlaubt
Centurion die Ausgabe spezieller Fehler-
und Erfolgsmeldungen. Eine Fehlermeldung
wird wie folgt definiert:
...
Eine Erfolgsmeldung legen Sie
folgendermaßen an:
...
Das Centurion-Framework hat verschiedene
weitere interessante Möglichkeiten
zu bieten. Wenn Sie in Ihrem Blog, Shop
oder Content-ManagementSystem sehr
32 0513 internet magazin

Centurion CSS | WEBDESIGN
Alternative Frameworks
Neben Centurion gibt es eine Vielzahl
weiterer Frameworks, die sich für die Entwicklung
eignen. Viele taugen auch für
den schnellen Entwurf von Prototypen.
Die Zahl der Web-Frameworks wächst kontinuierlich.
Dabei spielt das Responsive
Design eine immer größere Rolle. Sie vereinfachen
vielerlei Entwicklungsaufgaben
und unterstützen bei Standardaufgaben.
Außerdem lassen sich die vordefinierten
Styles eines Frameworks einfach über den
-Teil der Website einbinden.
» Bei Groundwork (http://groundwork.
sidereel.com) handelt es sich um ein
vollständig responsives Framework für
die Frontend-Entwicklung. Noch befindet
es sich in der Betaphase, bietet
aber schon jetzt eine Fülle vordefinierter
Klassen, mit denen sich neben
Standardelementen auch komplexe Elemente
wie Formulare implementieren
lassen. Für ein noch recht junges Projekt
ist es gut dokumentiert.
» Fast schon ein Klassiker ist das 960
Grid System (http://960.gs). Es ist
zweifelsohne das bekannteste CSS-Grid-
Framework. Mit diesem Framework können
Sie mit vordefinierten CSS-Klassen
Website-Layouts anlegen, die auf Gestaltungsrastern
basieren. Der Darstellungsbereich
des 960 Grid System ist
auf 960 Pixel Breite festgelegt, wobei
Sie die Spaltenzahl variieren können.
» Das von Twitter entwickelte Bootstrap
(http://twitter.github.com/bootstrap/)
ist kein reines CSS-Framework.
Es verwendet ein 12-spaltiges Grid,
das responsive-fähig ist. Bootstrap
ist ein Komplettpaket, das eine Fülle
von jQuery-Plug-ins, vordefinierte
Stylesheets für typographische Effekte,
Tabellen und ein umfangreiches
Iconset bereithält. Neben der Vielzahl
von Klassen verdient die Projekt-Site
besondere Beachtung, da die konkrete
Verwendung dort anhand vieler Beispiele
illustriert wird.
» Auch Foundation 3 (http://foundation.zurb.com)
eignet sich für die
schnelle Entwicklung von Prototypen
– aber nicht nur hierfür. Dieses Framework
basiert ebenfalls auf dem Sass-
CSS-Präprozessor und stellt für das
Prototyping schön gestaltete Buttons,
Formulare, Schaltflächen, Navigationsleisten
und Tabs bereit.
» Ein noch recht junges und unbekanntes
Grid-System ist Gumby Framework
(http://gumbyframework.com). Für
das Rapid Prototyping stellt es Schaltflächen,
Formulare, Auswahlmenüs
sowie verschiedene Javascripts und
Templates bereit. Das Framework ist
mit einem 12- und 16-spaltigen Grid
verfügbar.
Das Gumby
Framework macht
beim Prototyping
eine gute Figur.
umfangreiche Dokumente verwenden,
kann es sinnvoll sein, einen Seitenumbruch
samt Seitennummerierung einzuführen.
Auch hierfür hält das Framework
die passende Lösung bereit. Die Grundfunktion
wird dabei durch eine Liste der
einzelnen Dokumente realisiert, in die
Sie umfangreiche Seiten aufspalten. Eine
einfache Lösung sieht wie folgt aus:
«
1
2
3
»
In der nahen Zukunft wird Centurion einige
weitere Besonderheiten bringen. In
Version 3.1 können Sie Tooltips anlegen,
die dann eingeblendet werden, wenn
der Benutzer den Mauszeiger über einen
Link führt. Mit Centurion 3.1 können Sie
einen Hinweis definieren:
...
Version 3.1 wird auch die Entwicklung
von Registerkarten erlauben. Ein typisches
Tab-System wird dann wie folgt
erzeugt:
Tab 1
Tab 2
Tab 3
…
…
…
Mit der Klasse tabsBottom und tabsStacked
können Sie die Tabs im unteren Bereich
beziehungsweise
an der Seite
platzieren. Welche
weiteren Features Centurion in Zukunft
bieten wird, will der Entwickler noch
nicht preisgeben.
Fazit
Mit Centurion steht Webentwicklern
ein einfach zu handhabendes HTML5-
und CSS3-Framework zur Verfügung,
das sich hervorragend für das Prototyping
von Websites eignet. Funktional
dürfte es im momentanen Zustand dem
einen oder anderen Webdesigner zwar
nicht genügen, aber Centurions Urheber
scheint noch vieles vorzuhaben. Ein
echtes Manko ist bislang vor allem die
dürftige Dokumentation, aber interessierte
Anwender sind eingeladen, sich
aktiv an der Weiterentwicklung des Projekts
zu beteiligen.
Dr. Holger Reibold
www.internet-magazin.de 33

WEBDESIGN | Google Rich Snippets
Googles intelligente
Vorschau
Vielleicht haben Sie sich schon einmal gefragt, woher
diese kleinen, hilfreichen Zusatzinformationen wie Bilder,
Bewertungen oder Öffnungszeiten in den Google-
Suchergebnissen stammen. Das sind Rich Snippets –
Metainformationen auf Code-Ebene.
Der Nutzen für den Betrachter liegt
auf der Hand: Die Suchergebnisse
werden informativer und emotional ansprechender.
Doch was kann man damit
noch alles anstellen und für wen lohnt
sich der Einsatz dieser Technologie? Lassen
Sie uns einen kleinen Blick in die
Welt des semantischen Codes werfen.
Mit den Rich Snippets geht Google bereits
seit 2009 einen Weg, den auch Facebook
mit den Open-Graph-Tags eingeschlagen
hat. Auf Code-Ebene werden
zusätzliche Informationen zu der Seite
und deren Inhalt eingebettet, damit die
Daten neben Menschen auch für Maschinen,
insbesondere Suchmaschinen, aber
auch soziale Medien oder mobile Endgeräte
verständlich sind und entsprechend
genutzt werden können.
Hier ein kleines Beispiel: Man schreibe
seine Telefonnummer nicht einfach
lose in den HTML-Code, sondern gebe
zusätzlich die Information im Markup
mit, dass es sich dabei nicht um eine x-
beliebige Zahl handelt, sondern um die
eigene Telefonnummer:
HTML ohne Rich Snippets:
+49 (0) 89 12 34 56 78 90
HTML mit Rich Snippets:
+49 (0) 89 12
34 56 78 90
Die Idee hinter den Rich Snippets besteht
schon lange in den Theorien des
Semantic Web: Reale Dinge und deren
Beziehungen zueinander werden bereits
im Code durch Metadaten beschrieben,
da deren inhärente Bedeutung ohnedies
nur für Menschen erkennbar wird.
Im Semantic Web bedient man sich des
sogenannten Resource Description Framework
(RDF), welches Entitäten durch
Beziehungstripel, wie beispielsweise
„Batterien enthalten Säure” (Subjekt,
Prädikat, Objekt) beschreibt.
Einige Systeme wie etwa Drupal setzen
bereits auf die vereinfachte Variante
RDFa (RDF in attributes) um RDF mittels
Attributen in HTML einzubetten. Neben
Mikroformaten und Mikrodaten zählt
RDFa zu den bewährten Methoden, HT-
ML-Seiten mit computerlesbaren Zusatzinformationen
anzureichern.
Genug der Theorie. Rich Snippets sollen
Besuchern bereits auf den Suchergebnisseiten
(SERP) einen ersten Eindruck
darüber vermitteln, welche Inhalte sie
auf der Seite erwarten. Im Gegensatz zu
normalen Suchergebnissen, welche nur
aus Titel, Metabeschreibung und URL
bestehen, glänzen Rich Snippets durch
detaillierte Informationen wie Bewertungen
in Sternchenform, Zeitangaben
für Veranstaltungen oder Bildern zu Pro-
34 0513 internet magazin

Google Rich Snippets | WEBDESIGN
Ein Rezept als
Rich Snippet in
den Google-Suchergebnissen.
dukten. Damit bieten sie einen direkten
Mehrwert für den Nutzer und werden somit
zum Eyecatcher. Durch diese prominente
Darstellung können Rich Snippets
nachweislich die Klickrate (click-through
rate - CTR) erhöhen, auch wenn sie nicht
zu den ersten Suchtreffern zählen. Diese
Eigenschaft ist besonders wichtig für
alle, die etwas über das Internet verkaufen
wollen – also beispielsweise Online-
Händler, die ihre Produkte so mit zusätzlichen
Infos ausstatten können.
Der Aufbau von Rich Snippets
Prinzipiell können Rich Snippets mit drei
verschiedenen Arten von Markup aufgebaut
werden:
» Mikrodaten (microdata)
» Mikroformate (microformats)
» RDFa (Resource Description Framework
in attributes)
Google empfiehlt an dieser Stelle den
Einsatz von Mikrodaten (http://tinyurl.
com/bbw3p5s). Die großen Suchmaschinen
Google, Yahoo! und Bing haben
sich zusammengetan, um das Format
der Mikrodaten zu standardisieren. Die
komplette Referenz kann man auf schema.org
betrachten. Google unterstützt
aktuell Rich Snippets für die folgenden
Inhaltstypen:
» Erfahrungsberichte
» Personen
» Produkte
» Unternehmen und Organisationen
» Rezepte
» Veranstaltungen
» Musik
Auf schema.org gibt es allerdings wesentlich
mehr Inhaltstypen, die Sie nutzen
können und deren Informationen
eventuell früher oder später auch detaillierter
in den Suchergebnissen angezeigt
werden. Kommen wir nun zu einem
konkreten Beispiel. In diesem Fall handelt
es sich um ein Rich Snippet für eine
Organisation, genauer gesagt eine Praxis
für Naturheilkunde, mit Adresse und
Öffnungszeiten:
Naturheilpraxis
Lindner
Wormserstraße 1
80797 München
Praxis +49 (0) 89 307
011 55Mobil +49 (0)
176 993 952 85
E-Mail info@naturheilpraxislindner.com
Web www.naturheilpraxislindner.com
Öffnungszeiten
Mo. – Do.
8:00 – 20:00 Uhr
Fr. 8:00 –
16:00 Uhr
Termine nach Vereinbarung
Wie Sie sehen, wird der gesamte Adressblock
von einem div-Container mit dem
Attribut itemtype=“http://schema.org/
MedicalOrganization“ umschlossen. Damit
weiß Google, dass es sich bei diesem
Objekt um eine medizinische Organisation
handelt. Anschließend folgen Attribute
für den Namen der Organisation,
Adresse, Telefonnummer, E-Mail-Adresse
und zu guter Letzt die Öffnungszeiten
der Praxis. Wie werden die Rich Snippets
in einer Website dargestellt? Gar nicht! Es
handelt sich tatsächlich um für den Be-
Übersichtlich:
Referenz der
Mikrodaten auf
schema.org.
www.internet-magazin.de 35

WEBDESIGN | Google Rich Snippets
sucher unsichtbare Daten, die alleine
für Maschinen und Computer (Suchmaschinen,
Browser, mobile Endgeräte,
semantische Webservices und so weiter)
vorgesehen sind. Sie sind nur im Quellcode
sichtbar.
Das Testtool
Um sicher zu gehen, dass bei der Einbindung
des Zusatzmarkups keine Fehler
gemacht wurden, können Sie das
Testtool für strukturierte Daten aus den
Webmaster-Tools einsetzen (http://
www.google.com/webmasters/tools/
richsnippets). Dort hat man zwei Möglichkeiten:
Entweder man gibt eine URL
an, die analysiert werden soll, oder man
kopiert den entsprechenden HTML-Code
für die Analyse in ein Formular. Das Tool
zeigt Ihnen daraufhin an, welche Informationen
Google aus dem Markup Ihrer
Website auslesen kann. Beachten Sie,
dass es sich hierbei nur um eine Vorschau
handelt. Das tatsächliche Suchergebnis
muss nicht zwingend genauso aussehen.
Wie bei allen Änderungen an Markup,
Struktur oder Inhalten Ihrer Website
kann es eine Weile dauern, bis diese
sich in den Suchergebnissen oder auf
Google Places wiederfinden. Sollten sie
allerdings gar nicht auftauchen, so kann
das verschiedenste Gründe haben: Eventuell
haben Sie den Code nicht richtig
verschachtelt oder Sie haben gegen die
Nutzungsrichtlinien verstoßen. Da in der
Vergangenheit auch schon viel Schindluder
getrieben wurde, insbesondere
mit falschen Bewertungen, behält sich
Google vor, Rich Snippets unter Umständen
nicht anzuzeigen.
Rich Snippets im System
Wie kommen die Rich Snippets in Ihr Sys
-tem? Prinzipiell handelt es sich um eine
reine Frontend-Angelegenheit. Aus MVC-
Perspektive spielt sich alles in der View
ab, das heißt man kann eigentlich alle
Vollständig: Analyseergebnis aus dem
Testtool für strukturierte Daten.
Anpassungen über die Templates steuern.
Je nachdem, welches CMS, welche
Blog- oder Shop-Software Sie einsetzen,
können Sie den zusätzlichen Markup
direkt in die für die Ausgabe der Inhalte
verantwortlichen Dateien schreiben. Bei
Magento ist zum Beispiel die Datei
/app/design/frontend/*/*/template/
catalog/product/view.phtml
für die Darstellung der Produktdetails
zuständig.
Für die meisten Systeme existieren aber
auch Erweiterungen, die die entsprechenden
Funktionen automatisch in die
Seite einfügen.
Für Wordpress gibt es beispielsweise
den Schema Creator, mit dessen Hilfe
man Mikrodaten in den Inhalt einer Seite
oder eines Artikels einfügen kann (http://
wordpress.org/extend/plugins/schemacreator/),
oder das Rich Contact Widget
(http://wordpress.org/extend/plugins/
rich-contact-widget/), mit dem man ein
mit Metadaten angereichertes Adress-
Widget in die Sidebar einfügen kann.
Für Drupal gibt es die Module Schemaorg
(http://drupal.org/project/schemaorg)
und Microdata (http://drupal.org/project/
microdata), die in ihrer Funktion sehr
weit gehen und sehr flexibel systemweit
einsetzbar sind.
Auf Magento Connect findet man das
kostenlose Modul MSemantic, das
anscheinend sogar mit Bundesfördermitteln
entwickelt wurde und die Produktinformationen
im Shop mit entsprechenden
Rich Snippets anreichert
(http://www.magentocommerce.com/
magento-connect/msemantic-semantic-seo-for-rich-snippets-in-googleand-yahoo.html).
Fazit
Wann sollten Sie Rich Snippets einsetzen?
Wann immer es sinnvoll möglich
ist! Das klingt banal, aber falls es für Ihre
Inhalte entsprechende Schemata gibt,
sollten Sie diese auch unbedingt nutzen
– denn nicht nur Suchmaschinen können
etwas damit anfangen. Mobile Endgeräte
können die Daten zum Beispiel verwenden,
um eine Telefonnummer direkt
anzurufen oder eine Adresse zu finden.
In Zukunft wird es immer mehr Dienste
geben, die auf semantische Metadaten
zugreifen, daher lohnt sich der Einsatz
mit Sicherheit.
Selbstverständlich müssen die Informationen
im Quellcode wahrheitsgemäß
sein. Immer öfter hört man von Websites,
die Angaben manipulieren, um
sich besser darzustellen. Insbesondere
Bewertungen sind davon betroffen, da
die Informationen willkürlich eingetragen
werden können. Da Google aber
bekanntlich intelligent ist, werden solche
Täuschungen sofort wieder aus den
Suchergebnissen entfernt.
Thomas Kraehe
36 0513 internet magazin

XDEV Framework | WEBENTWICKLUNG
XDEV-Framework intern
Das XDEV-Framework automatisiert alle wichtigen
Prozesse zwischen grafischer Oberfläche und Datenbank
und vereinfacht damit die Entwicklung von
Datenbankanwendungen in Java radikal.
Im Java-Umfeld sind vor allem Eclipse
und Netbeans als Entwicklungsumgebung
bekannt. Für beide gibt es GUI Builder,
doch gelten diese als nicht besonders
komfortabel. Mit einem GUI Builder allein
erhält man in Java zudem nicht mehr als
eine nackte Oberfläche ohne Funktion.
Mit Eclipse und Netbeans ist dann auch
schon Endstation in Sachen visueller Unterstützung
und es wird schlagartig richtig
kompliziert. Datenbankoperationen in
Java erfordern den Einsatz komplexer Java-Enterprise-Technik
wie JPA oder Hibernate,
und für die Visualisierung der Daten
auf der Oberfläche muss sich der Entwickler
mit JDBC- und anspruchsvoller MVC-
Programmierung (Model View Controller)
auseinandersetzen. Die Praxis zeigt, dass
für den Einsatz von Hibernate eine Menge
Basis-Know-how und sehr viel Programmiererfahrung
notwendig ist. Wer
die objektorientierte Programmierung in
Java nicht aus dem Effeff beherrscht, hat
mit Hibernate keine Chance und kann
praktisch keine anspruchsvollen Datenbankanwendungen
in Java entwickeln.
Die Umstellung von prozeduraler auf objektorientierte
Programmierung, das Umdenken
von Tabellen, Datensätzen und
Relationen auf Klassen und Objekte und
dann auch noch die Umstellung bei Datenbankzugriffen
von SQL auf JPA ist so,
als müsste man vom Rechts- zum Linkshänder
werden.
Genau hier nun setzt XDEV 3 mit dem integrierten
XDEV-Application-Framework
an. Das Framework klinkt sich zwischen
Oberfläche und Datenbank und verbindet
beide Schichten nahtlos miteinander
(Data Binding). Die Verknüpfung der
Datenbanktabellen mit entsprechenden
GUI Controls erfolgt im GUI Builder per
Drag-and-Drop. Um alle anderen Dinge
kümmert sich das Framework vollautomatisch:
Um den Aufbau von Datenbankverbindungen,
das Absetzen von
Standard-Queries zum Füllen von Listen,
Tabellen und Trees oder um die Verarbeitung
und Aufbereitung der Abfrageergebnisse
(JDBC-Resultsets). Lazy Loading
wird mit Version 4 nun standardmäßig
unterstützt, was auch bei automatischen
Queries bestmögliche Performance garantiert.
Zudem stellt das Framework für
alle Controls passende GUI-Models und
Renderer zur Verfügung und bereitet alle
Daten in Form einer Tabellenstruktur auf,
sodass der Entwickler nicht zwingend Objekte
verwenden muss, sondern auch mit
Tabellen, Spalten, Datensätzen und Relationen
arbeiten kann. Auch um die Persistierung
der Daten, um die dabei wichtige
Transaktionssicherheit und um eine
verschlüsselte Übertragung der Daten
kümmert sich das Framework und sogar
konkurrierende Schreibzugriffe werden
ab Version 4 automatisch bewerkstelligt.
Damit stellt das XDEV-Application-Framework
eine durchgängige Basisarchitektur
mit voll funktionsfähiger Infrastruktur für
Datenbankanwendungen mit grafischer
Oberfläche zur Verfügung und befreit den
Entwickler von aufwändiger Infrastruktur-,
JDBC- und MVC- sowie von komplexer
OR-Mapper-Programmierung à la Hibernate.
Das vereinfacht die Anwendungsentwicklung
in Java radikal und stellt vor
allem für Java-Ein- und -Umsteiger einen
gewaltigen Mehrwert dar.
Datenbankunabhängigkeit
Das XDEV-Application-Framework ist
für Datenbankunabhängigkeit ausgelegt.
Dafür stellt es eigene Datenbankschnittstellen
zur Verfügung, die auf JDBC aufsetzen
und die JDBC-Treiber der jeweiligen
Datenbanken erweitern. Die Standarddatenbankschnittstelle
JDBC ermöglicht lediglich
die Kommunikation zwischen Java
und einer Datenbank. Die XDEV-Schnittstellen
dagegen gleichen die wichtigsten
Unterschiede bei der SQL-Syntax aus, die
bei den verschiedenen Datenbanken trotz
SQL-Standard zum Teil im erheblichen
Maße bestehen.
// MySQL
SELECT * FROM kunde LIMIT 0,10;
// MS SQL
SELECT TOP 10 * FROM kunde;
www.internet-magazin.de 37

WEBENTWICKLUNG | XDEV Framework
// Oracle
SELECT * FROM kunde WHERE ROWNUM

XDEV Framework | WEBENTWICKLUNG
Controls sind Renderer zuständig. All das
wird in XDEV 3 mit virtuellen Tabellen
vollständig automatisiert. Die virtuelle
Tabelle ist ein zentrales Architekturkonzept,
das das XDEV-Application-Framework
zur Verfügung stellt. Eine virtuelle
Tabelle ist eine Zwischenschicht zwischen
Oberfläche und Datenschicht. Mit
ihrer Hilfe lassen sich GUI-Controls auf
einfache Weise mit einer entsprechenden
Datenbanktabelle verdrahten (Data Binding)
und alles was zwischen Oberfläche
und Datenschicht passiert, wird durch
das Framework vollständig automatisiert.
Um Daten auf Ihre Oberfläche zu
bringen, müssen Sie in XDEV 3 lediglich
eine virtuelle Tabelle mit der Maus auf
ein GUI Control im GUI Builder ziehen.
Alles Weitere erledigt das Framework im
Hintergrund vollautomatisch für Sie. Das
Funktionsprinzip ist simpel: Eine virtuelle
Tabelle ist vereinfacht ausgedrückt eine
leere Kopie einer Datenbanktabelle, die
sich im Hauptspeicher des Clients befindet.
Nach jeder Datenbankabfrage werden
die Daten wie bei einem Datenpuffer
automatisch in die Tabelle geschrieben.
Für die Ausgabe der Daten stellt die virtuelle
Tabelle GUI-Models und Renderer für
alle GUI-Controls zur Verfügung, die vom
XDEV-3-GUI-Builder unterstützt werden.
Und sogar sämtliche Standardabfragen
lassen sich durch die virtuelle
Tabelle automatisch absetzen, sodass
Listboxen, Comboboxen, Tabellen und
Trees automatisch mit Daten gefüllt werden.
Die für die Abfragen über mehrere
Datenbanktabellen notwendigen Joins
werden ebenfalls automatisch generiert.
Voraussetzung dafür ist eine Definition
der Relationen zwischen den Tabellen.
Dafür gibt es in der XDEV-3-IDE einen
speziellen ER-Designer. Wer auf eine
existierende Datenbank aufsetzt, kann
seine bereits definierten Constraints bequem
importieren. SQL-Profis, die ihre
Abfragen nicht einem Framework überlassen,
sondern selber im Griff haben
möchten, können sämtliche Standard-
Queries durch eigene SQLs oder Stored
Procedures ersetzen. Auch der Zugriff
über JPA und Hibernate ist grundsätzlich
immer alternativ möglich.
Performance-Garantie
In Version 4 wird dieser Standardfuntionsumfang
um ein weiteres, mächtiges Feature
erweitert. Nach jeder Datenbankabfrage
übergibt das Framework an den
Client immer nur so viele Datensätze,
wie die zur Visualisierung verwendete
GUI-Komponente anzeigen kann (Lazy
Loading). Die restlichen Daten lassen sich
mit Hilfe einer Steuerleiste Seite für Seite
ausgeben (Paging) oder durch Bewegen
der Scrollbar satzweise on demand nachladen.
Dabei ist dem Framework egal, ob
die Abfrage vom Framework selbst oder
vom Entwickler als selbstdefinierte SQL-
Anweisung abgesetzt wird. Durch die
Verbindung von GUI-Komponente und
virtueller Tabelle findet jede Änderung der
Daten, egal ob in einer Tabelle oder mit
Hilfe eines Formulars, zunächst einmal
nur in einer virtuellen Tabelle statt. Erst
wenn ein bestimmtes Ereignis eintritt, der
Anwender zum Beispiel auf „Speichern“
klickt, wird die betroffene virtuelle Tabelle
mit der entsprechenden Datenbanktabelle
synchronisiert. Dafür stellt die Klasse
Virtuelle Tabelle die Methode synchronizeChangedRows
zur Verfügung.Die
Synchronisierung der Daten erfolgt auto-
Bestmögliche Performance
durch
Lazy Loading.
matisch als Transaktion,
sodass
Sie sich auch um
Transaktionssicherheit
nicht
kümmern müssen.
Ergänzend
dazu stellt der Code-Editor von XDEV 3
ein spezielles Transaktionscode-Template
zur Verfügung, in das man nur noch entsprechende
Queries einsetzen muss, die
man als Transaktion ausführen möchte.
Zur Laufzeit werden die für die angebundene
Datenbank optimierten SQLs vom
Framework dynamisch generiert.
Konkurrierende Zugriffe
Die neue Version 4 liefert nun auch das
letzte Puzzlestück für eine durchgängig
automatisierte Datenverarbeitung. Das
Framework kümmert sich jetzt nämlich
auch um konkurrierende Schreibzugriffe.
Vor jeder Datenänderung lassen
sich die betroffenen Datensätze auf
Datensatzebene sperren, wodurch ein
Überschreiben der Daten durch andere
Benutzer verhindert wird. Mit Hilfe eines
Assistenten lässt sich mit wenigen Mausklicks
konfigurieren, wie das gesamte
Sperrverfahren funktionieren soll, insbesondere
wann eine Sperre gesetzt wird,
wie Endbenutzer darüber informiert werden,
wie lange Sperren existieren dürfen,
wann sie automatisch durch das System
aufgehoben werden oder ob und unter
welchen Umständen Endbenutzer eigene
Sperren verlängern oder aufheben
können. Unterstützt werden sowohl das
optimistische als auch das pessimistische
Verfahren. Auch dieses Konzept funktioniert
datenbankunabhängig. Download
unter www.xdev-software.de.
Sven Neumann
www.internet-magazin.de 39

WEBENTWICKLUNG | Yeoman
Entwicklungen
automatisieren
mit Yeoman
Eine Reihe von Entwicklungsschritten ist in jedem
Projekt annähernd gleich und kostet doch eine Menge
Zeit. Google bietet Ihnen für eine Vielzahl dieser
Aufgaben mit Yeoman die passende Lösung an.
Yeoman geht mit dem Slogan „Modern nicht erschienen. Trotz allem ist es möglich,
Yeoman unter Windows zu betrei-
workflows for modern webapps“ an
den Start und beschreibt damit recht treffend
das Ziel der Werkzeugsammlung:
Sie dient zur Vereinfachung und Optimierung
verschiedener Arbeitsschritte bei
der Erstellung einer modernen Webapp.
Dies fängt bei der Anpassung von Bildern
für verschiedene Endgeräte an und hört
beim Unit Testing auf. Der Schwerpunkt
der integrierten Bibliotheken und Werkzeuge
liegt dabei klar auf Entwicklungen
mit Javascript und CSS.
ben; dies ist allerdings mit gewissen Vorarbeiten
verbunden. Praveen Vijayan hat
sich die Mühe gemacht und die notwendigen
Schritte auf der Website decodize.
com zusammengefasst (http://decodize.
com/css/installing-yeoman-front-end-development-stack-windows/#chocolatey).
Die Installation unter Linux und Mac OS
X hingegen ist denkbar einfach. Öffnen
Sie ein Konsolenfenster und geben Sie in
dieses den folgenden Befehl ein:
curl -L get.yeoman.io | bash
Einstiegspunkt
Aktuell gibt es Yeoman als Installationspaket
für Linux und Mac OS X. Eine Windows-Version
wurde bereits im September
2012 angekündigt, ist aber bis jetzt
Die Installationsroutine prüft, ob alle
Voraussetzungen für die Installation von
Yeoman auf Ihrem System gegeben sind,
und zeigt Ihnen alternativ an, welche
Programme noch nicht vorhanden sind.
Sollten noch Programmpakete
Voraussetzungen für die Installation
fehlen, sehen
Yeoman in der aktuellen Version setzt eine Reihe von Anwendungen
für den Betrieb voraus. Dies sind im Einzelnen:
Sie diese in der
Liste inklusive
» NodeJS >= 0.8.x
» Ruby >= 1.8.7
» Compass >= 0.12.1
» optipng
» jpegtran
» PhantomJS >= 1.6
der notwendigen
Aufrufe für die
Installation. Abhängig
von der
Installieren oder aktualisieren Sie diese, bevor Sie Yeoman in
Betrieb nehmen.
aktuellen Konfiguration
Ihres
Systems kann es eine Weile dauern, bis
Sie alle Pakete zusammenhaben. Gerade
die Installation des Pakets phantomjs ist
zeitlich etwas aufwändiger, da es auf Ihrem
System komplett neu gebaut werden
muss. Deswegen sollten Sie bei diesem
auf das Build-Paket zurückgreifen, das
auf der PhantomJS-Website angeboten
wird. Nachdem Sie dieses Ihrem System
hinzugefügt haben, rufen Sie das Skript
erneut auf. Sind jetzt alle Anwendungen
vorhanden, wird das Toolset automatisch
installiert. Weitere Installationshinweise
finden Sie auf den Hilfeseiten des Projektes
unter
https://github.com/yeoman/yeoman/
wiki/Manual-Install
Erste Schritte
Nachdem Sie die Installationshürde gemeistert
haben, sollten Sie sich erst einmal
einen Überblick verschaffen. Eine
komplette Übersicht aller zur Verfügung
stehenden Funktionen erhalten Sie über
den Befehl yeoman.
Zu den meisten der aufgelisteten Befehle
können Sie sich auch eine detaillierte
Beschreibung anzeigen lassen. Dazu fügen
Sie den Parameter --help hinzu. Die
entsprechende Befehlszeile für genauere
40 0513 internet magazin

Yeoman | WEBENTWICKLUNG
Informationen zum init-Befehl sieht dann
wie folgt aus:
yeoman init –-help
Wenn Sie eine übergreifende Hilfe für die
Nutzung von Yeoman benötigen, passen
Sie den Befehl entsprechend an:
yeoman --help
Für die folgenden Beispiele nutzen wir
ein imaginäres Webapp-Projekt mit dem
Namen internetmagazin. Damit Sie die
folgenden Beispiele nachvollziehen
können, benötigen Sie ein Verzeichnis
mit dem entsprechenden Namen. In
unserem Beispiel wird dieses direkt auf
dem Desktop angelegt. Dies können Sie
entweder über die grafische Oberfläche
oder per Terminal machen:
cd ~/Desktop
mkdir internetmagazin
cd internetmagazin
Nach Eingabe dieser drei Befehle befinden
Sie sich im neu erzeugten Ordner
internetmagazin, der sich auf dem
Desktop befindet.
Anschließend können Sie auch Yeoman
seine Arbeit verrichten und die Grundstrukturen
anlegen lassen. Dies geschieht
über den Befehl
yeoman init
Sie haben anschließend innerhalb
des Terminalfensters die Möglichkeit,
verschiedene Parameter zu setzen
und so das Aussehen Ihrer künftigen
Anwendung zu beeinflussen. Es wird
unter anderem gefragt, ob Sie Bootstrap
für Compass, Twitter Bootstrap,
RequireJS oder ECMAScript 6 nutzen
möchten. Entsprechend werden die
Programmbibliotheken Ihrem Projekt
hinzugefügt oder nicht.
Sind das zu viele Optionen oder benötigen
Sie nur das Grundpaket mit HTML5
Boilerplate, Modernizr und jQuery, dann
können Sie diesen Schritt noch einmal
verkürzen. Geben Sie dazu alternativ
den folgenden Befehl ein:
yeoman init
Der Betrieb von
Yeoman unter
Windows wird
aktuell nicht offiziell
unterstützt
und erfordert die
manuelle Installation
zahlreicher
Anwendungen.
quickstart
fügung stehen, bekommen Sie über den
Abhängig von Ihrer Auswahl sucht Yeoman
anschließend die notwendigen also yeoman init --help.
Aufruf der Hilfefunktion des Befehls init,
Daten bei Github zusammen. Zum Abschluss
erhalten Sie die Grundstrukturen Ein lokaler Webserver
Ihrer Website, welche dank H5BP eine Bei vielen Entwicklungen müssen Sie
Indexdatei und eine Fehlerseite enthält. einen lokalen Webserver zur Verfügung
Abhängig von der Auswahl Ihrer zusätzlich
installierten Bibliotheken haben Sie der direkten Installation eines Apache-
haben. Dies erreichen Sie entweder mit
mehr oder weniger viele Dateien im Servers oder über eine Serversammlung
Installationsverzeichnis Ihres Projekts. wie LAMP oder XAMPP – oder Sie nutzen
für diesen Fall auch Yeoman. Mit
Neben diesen beiden Möglichkeiten, ein
neues Projekt anzulegen, bietet Yeoman dem Befehl yeoman server starten Sie
noch einen differenzierteren Weg, der Ihnen
das Hinzufügen weiterer Templates Damit haben Sie die Basis für die lokale
einen Webserver auf dem Port 3501.
erlaubt. Dazu nutzt Yeoman Generatoren. Ausführung Ihrer Anwendung geschaffen.
Diese fügen Sie als weiteren Parameter Diese rufen Sie anschließend im Browser
beim Aufruf des init-Befehls hinzu: entsprechend über http://localhost:3501
yeoman init
und das entsprechende Verzeichnis auf.
Im folgenden Beispiel wird der Generator
angular verwendet samt einem Un-
auch direkt das passende Browserfenster
Mit dem Start des Servers öffnet Yeoman
tergenerator all. Mit diesen beiden fügen für Sie und zeigt die Einstiegsseite Ihres
Sie alle Dateien hinzu, _056AF_Weber_pcm_N_05.ps;S: 1;Format:(90.00 x 60.00 mm);02. Mar 2011 07:54:29
welche für eine neue
Anwendung auf Basis
von AngularJS notwendig
sind.
yeoman init
angular:all
Eine komplette Liste,
welche Generatoren in
der von Ihnen verwendeten
Version zur Ver-
www.internet-magazin.de
41
M51

WEBENTWICKLUNG | Yeoman
Die Schritte von Yeoman beim Build-Prozess
Yeoman durchläuft eine Reihe von Schritten während des Build-Prozesses und versucht
damit, den vorhandenen Code endgültig zu analysieren und zu verbessern. Die Schritte
sind im Einzelnen:
» Prüfung aller Javascript-Dateien mit Hilfe von JSHint
» Rekompilierung aller Coffeescript- und Sass-Dateien
» Einsatz von r.js zur Kompilierung und Optimierung aller AMD-Module
» Zusammenfassung und Komprimierung von Skripten und Stylesheets
» Komrimierung von Bildern unter Einsatz von OptiPNG für PNG-Dateien und
JPEGtran-turbo für JPEGs.
» Erzeugen eines Appcache-Manifests für Webanwendungen auf Basis von confess.js
» Versionierung von Dateinamen
Projekts an. Eine weitere Funktion, welche
Yeoman in diesem Zusammenhang
zur Verfügung stellt, ist die Bibliothek
Livereload. Diese beobachtet Ihr Projekt
und die getätigten Änderungen, kompiliert
diese automatisch im Hintergrund
und lädt die Website neu. Haben Sie
Aktualisierungen in Ihren Coffeescriptoder
Compass-Dateien gemacht und abgespeichert,
werden diese automatisch
erkannt und Sie müssen keine manuellen
Schritte unternehmen, um die Ergebnisse
im Browser betrachten zu können. Näheres
zu LiveReload und den Konfigurationsmöglichkeiten
finden Sie auf der
Projekt-Website
http://livereload.com/
Mit dem Aufruf von yeoman server wird
automatisch ein build-Verzeichnis in ihrem
Projektordner angelegt. In diesem
finden Sie anschließend auch die aktualisierten
kompilierten Dateien wieder.
Serverprofile
Damit Sie nicht zu viel Konfigurationsarbeit
in den Server stecken müssen, hat
Yeoman ihn bereits mit Hilfe mehrerer
Profile vorkonfiguriert und mit verschiedenen
zusätzlichen Aktionen gekoppelt.
Diese können Sie beim Start des Servers
als Konfigurationsinformationen mitgeben.
Aktuell stehen vier unterschiedliche
Konfigurationen zur Verfügung:
» yeoman server und yeoman server:app
kompilieren und führen die Inhalte des
/temp-Verzeichnisses aus, in welchem
sich die aktuelle build-Version Ihrer
Anwendung befindet.
» yeoman server:dist liefert eine optimierte
Endversion Ihrer Anwendung
aus. Dazu bedient sich Yeoman des
/dist-Verzeichnisses und führt den Yeoman
Build im Vorfeld aus.
» yeoman server:test führt zusätzlich die
konfigurierten Unit-Tests aus und stellt
sicher, dass alle Änderungen an Ihrem
Programmcode automatisch per Livereload
berücksichtigt werden.
» yeoman server:reload nutzt Livereload
auf dem Port 35729 und unterbindet
das automatische Starten des Standard-
browsers. Dieses ermöglicht die
parallele Installation von Livereload auf
einem weiteren Server und gegebenenfalls
auch den gemeinsamen Betrieb.
Vereinfachtes Unit Testing
Während der Entwicklung Ihrer Anwendung
kann Sie Yeoman im nächsten
Schritt beim Unit Testing unterstützen.
Dafür ist das Mocha-Framework direkt
mitinstalliert. Die Konfiguration der Tests
müssen Sie natürlich im Vorfeld festlegen.
Falls Sie noch nie mit dem Mocha-
Framework gearbeitet haben, sollten Sie
sich als Erstes die Dokumentation zu Gemüte
führen unter
http://visionmedia.github.com/mocha/
und anschließend mit der Definition der
Tests beginnen. Sie müssen sich jedoch
nicht mehr um die Konfiguration der Umgebung
kümmern, denn dies hat Yeoman
bereits für Sie erledigt. Sie starten die Ausführung
der Tests nun mit dem Befehl
yeoman test
Yeoman übernimmt in diesem Prozess die
meiste Arbeit für Sie: Die Dateien Ihres
Projektes werden zusammengesammelt,
die Testdateien werden geladen, die Tests
durchgeführt und anschließend erhalten
Sie die Ergebnisse zurückgespielt.
Neben dem Mocha-Framework sieht
Yeoman zusätzlich die Analyse mit Testacular
vor. Dieses Framework wird jedoch
nicht direkt zu Beginn mitinstalliert. Sie
können es mit Hilfe eines Generators und
dem init-Befehl nachinstallieren:
yeoman init testacular:app
Build-Prozess optimieren
Vor der Auslieferung einer Anwendung
wird in der Regel eine Reihe von Optimierungsschritten
durchlaufen, welche
den Programmcode und die Objekte
entsprechend vorbereiten sollen.
Yeoman nutzt für diese Belange die Bibliothek
Grunt
http://gruntjs.com/
welche auf die Optimierung von Javascript-Projekten
fokussiert ist. Eine
genauere Auflistung der durchlaufenen
Schritte finden Sie im Kasten „Durchlaufende
Schritte beim Build-Prozess“.
Die Basis für die Optimierungsschritte
stellt die Datei Gruntfile.js dar, welche
automatisch beim Erzeugen eines neuen
Projekts mit Yeoman direkt mitangelegt
wird. Sie können diese Datei natürlich
entsprechend Ihren Belangen anpassen,
Pfade verändern und neue Funktionen
Aktionen beim Build
standard
text
buildkit
basics
minify
42 0513 internet magazin

Yeoman | WEBENTWICKLUNG
hinzufügen. Den kompletten Leistungsumfang
von Grunt finden Sie entsprechend
auf der Projekt-Website.
Paket mit dem angegebenen Namen und
lookup sucht nach einem
Es gibt zwei Aktionen, bei denen Ihre liefert eine entsprechende Bestätigung,
Compass- und Coffeescript-Anwendungsdaten
kompiliert werden. Dies den sein. Wenn Sie sich in Bezug auf
sollte es unter diesem Namen vorhan-
ist zum einen beim Aufruf des Webservers
und zum anderen, wenn Sie den die Variante yeoman search
den Namen nicht sicher sind, sollten Sie
build-Befehl ausführen. Im ersten Fall verwenden, und Sie bekommen eine
werden alle relevanten
Daten in das Verzeichnis
/temp geschoben;
wenn Sie den build-
Prozess aktiv starten,
wird entsprechend
das dist-Verzeichnis
erzeugt und die optimierten
Versionen Ihrer
Anwendungsdaten
werden dorthin abgelegt.
Es gibt – wie auch
bei der Ausführung des
Servers – verschiedene
Parameter, welche Sie
beim Aufruf des build- Sie können verschiedene Programmpakete ganz individuell
Befehls mitgeben können.
Abhängig davon
zu Ihrem Projekt hinzufügen.
werden verschiedene Kombinationen entsprechende Treffermenge angezeigt.
von Optimierungen durchlaufen. Wir Natürlich gibt es zu den verschiedenen
haben die verschiedenen Aktionen für Bibliotheken in gewissen Abständen Aktualisierungen.
Diese werden nicht auto-
Sie zusammengefasst.
matisch, können jedoch über den Befehl
Installieren von Zusatzpaketen yeoman update individuell
installiert werden.
Yeoman bietet Ihnen darüber hinaus eine
flexible Möglichkeit, den Funktionsumfang
zu erweitern, und hat dazu einen eigenen
Paketmanager namens Bower mit Yeoman liefert einen interessanten An-
Fazit
integriert. Diesen rufen Sie über den Befehl
yeoman install auf und sehen dann Webanwendungen. Gerade wenn Sie mit
satz für die Entwicklung und den Test von
die zur Verfügung stehenden Pakete. einer Reihe von Bibliotheken arbeiten,
Wenn Sie anschließend den Paketnamen die Sie jedoch nur fallweise mit in ein
mit anfügen, sammelt Yeoman eigenständig
die notwendigen Dateien zusammen Werkzeug viel Zeit und Mühe. Yeoman
Projekt integrieren, sparen Sie mit diesem
und installiert die Anwendung. Mit yeoman
list sehen Sie darüber hinaus alle Pa-
konzentrieren und nicht auf die Installa-
hilft Ihnen, sich auf die Entwicklung zu
kete, die Sie aktuell installiert haben. Für tion von Bibliotheken und Servern.
die Suche innerhalb der Paketverwaltung
Andreas Hitzig
www.internet-magazin.de
sieht Yeoman zwei Befehle vor: yeoman
43
Linux oder Windows
vServer für 4,49 € im Monat
Voller Root- und
Administrator-Zugriff
• Cloud-Funktion mit höchster Flexibilität
• Kostenkontrolle durch tagesgenaue Abrechnung
• Garantiert in 12 Stunden verfügbar
• Jetzt ab sofort mit PrePaid-Funktion
NEU: HP DL385 Gen8
Hostsystem von HP
Jetzt informieren & bestellen Tel.: 0211 / 545 957 - 300
www.webtropia.com
PLATINUM PARTNER
vServer S 2.0
Core`s (jeweils 2.000 MHz) 1
RAM
1.024 MB
RAM Dynamisch
2.048 MB
Festplatte
100 GB
Traffic
100 MBit
Neu!
Full-Flatrate
Betriebssysteme
Windows 2008 Standard oder
Debian 6.0, CentOS 6,
openSUSE 12.2, Ubuntu 12.04
.de Domain inkl.
IPv4 Adressen inkl.
IPv6 Subnetz (/64) inkl.
Extras
Monatsgrundgebühr
ab dem vierten Monat
Monatsgrundgebühr
für die ersten drei Monate
powered by
1
1
Firewall, Reboot, Recovery,
Monitoring, Reverse DNS,
Plesk 11 Admin-Panel
8,99 €
4,99 €

WEBENTWICKLUNG | Tipps für performante Websites
search-ranking.html). Dort wurde die
Geschwindigkeit der Website als eines
der Kriterien – allerdings eines von Hunderten
– genannt. Generell gilt es hier
aus Google-Sicht, massive Fehler zu vermeiden
und die Seiten mit ordentlicher
Geschwindigkeit anzubieten. Die Angaben
im Webmaster-Toolkit sind dabei nur
Download-Zeiten für die Seite an sich,
also für den HTML-Inhalt.
Website-Tuning
Um die Geschwindigkeit einer Website zu verbessern,
gibt es sehr viele verschiedene Ansatzpunkte. Im ersten
Schritt wird immer der Engpass ermittelt. Zwickt
es in der Datenbank, ist das Frontend langsam oder
hakt es im Backend? Diese und weitere Fragen klärt
dieser Artikel und gibt Tipps zur Optimierung.
In den meisten Fällen treten Performance-Probleme
bei einer Website
erst zu Tage, wenn sie einige Zeit gelaufen
ist. Schleichend treten dann Probleme
auf und Nutzer fühlen die mangelnde
Geschwindigkeit. Ausnahmen
sind Seiten, die von Anfang an unter
hoher Last stehen und quasi überrannt
werden. Manchmal fallen Probleme
auch nur auf, wenn die Leitung des
Nutzers langsam ist. In diesem Fall
wirken Websites mit Performance-Problemen
im Vergleich zu gut optimierten
Sites oft deutlich langsamer.
Und auch bei Websites ohne wirkliche
Performance-Probleme ergibt ein wenig
Optimierung Sinn. Zum einen werden
dann künftige Probleme bei gestiegener
Last vermieden, zum anderen freuen
sich Nutzer und auch Suchmaschinen.
In der Tat hat Google der Performance-
Optimierung im Jahr 2010 mit einem eigenen
Artikel weitere Nahrung gegeben
(http://googlewebmastercentral.blogspot.
de/2010/04/using-site-speed-in-web-
Der Flaschenhals
Bei Performance-Problemen gleicht die
Suche nach der Ursache manchmal der
Arbeit eines Trüffelschweins. Man muss
vom Browser über den Webserver bis zur
Datenbank alle Teile der Anwendung im
Blick haben. Wenn die Problem akut auftreten,
sollte besonderes Augenmerk dem
zuletzt hinzugefügten oder aktualisierten
Teil gelten. Sehen wir uns die relevanten
Teile noch einmal im Detail an:
» Frontend – im Browser und bei den Daten,
die an den Browser geliefert werden
» Webserverkonfiguration – in den Einstellungen
und bei der Auslagerung
von Dateien
» Backend – im eigentlichen Code, beim
Caching, beim Zusammenbau von
Templates und so weiter
» Datenbank – beim Abruf oder Schreiben
von Daten
Ein erster Ansatz bei der Suche nach der
Ursache von Performance-Problemen
kann eine Analyse aus dem Browser heraus
sein. Hier reicht zuerst einmal ein
Tool wie Firebug, das den Netzwerkverkehr
beobachtet. Natürlich sind die Angaben
dort abhängig von vielen Faktoren,
unter anderem von der Geschwindigkeit
Suchmaschinenzugriff: Google misst hier nur das Liefern von Seiten, sprich HTML.
44 0513 internet magazin

Tipps für performante Websites | WEBENTWICKLUNG
der Internetleitung. Dennoch geben sie
ganz vereinfacht einen ersten Hinweis:
Ist dort die eigentliche HTML-Seite langsam,
so deutet das eher auf ein Problem
aufseiten des Servers hin. Über die genaue
Ursache, Konfiguration, Programmierung
oder Datenbank ist dabei noch
nichts gesagt. Ist die HTML-Seite dagegen
eher schnell und dennoch dauert es,
bis die Seite geladen ist, deutet das auf
das Frontend hin.
Frontend
Im Frontend steckt für die Performance-
Optimierung oft das größte Potenzial,
denn bis zu 80 Prozent der Ladezeit
wird im Frontend verbracht. Dementsprechend
haben hier in den letzten Jahren
viele große Webunternehmen Know
-how aufgebaut und weitergegeben, allen
voran Yahoo und Google. Einen ersten
Eindruck liefert https://developers.
google.com/speed/pagespeed/insights.
Hier können Sie beliebige Websites
eingeben und sich nach Prioritäten sortiert
entsprechende Frontend-Maßnahmen
ausgeben lassen. Das Wichtigste
zu Anfang: Die meisten modernen
Optimiermethoden sind nicht invasiv.
Das heißt, sie verändern das Layout
der Website nicht. Es wäre auch wenig
sinnvoll, nur aus Performance-Gründen
wieder auf Textwüsten zu setzen und
auf Bilder zu verzichten.
Weniger Daten
Die erste generelle Regel für eine Performance-Optimierung
im Frontend lautet:
die Menge der übertragenen Daten reduzieren.
Im Fokus stehen hier vor allem
die vielen Dateien, die Teil jedes modernen
Website-Layouts sind: Javascript,
CSS und Bilder.
Eine pauschale Datenkomprimierung
bietet schon der Webserver: GZip. Sie
können diese Komprimierung per Webserverkonfiguration
oder auch per PHP
auslösen. Hier ein einfaches Beispiel aus
der Apache-2.x-Konfiguration mit dem
zuständigen Modul mod_deflate:
SetOutputFilter DEFLATE
# Nicht komprimieren
SetEnvIfNoCase Request_URI
\.(?:gif|jpe?g|png)$ no-gzip dontvary
SetEnvIfNoCase Request_URI
\.(?:exe|t?gz|zip|bz2|sit|rar)$
no-gzip dont-vary
Sie sehen, dass hier Bilder und Archive
ausgeschlossen werden. Speziell bei den
Bildern bringt eine GZip-Komprimierung
meist keine guten Resultate mehr. Generell
funktioniert die GZip-Komprimierung
bei allen textlastigen Dateien wie
HTML, CSS und Javascript sehr gut. Ob
die Komprimierung aktiviert ist, verrät die
HTTP-Antwort mit dem Header Content-
Encoding: gzip.
Einziger Nachteil bei GZip ist, dass sowohl
der Webserver als auch der Browser
ein wenig mehr rechnen müssen. Der
Webserver muss die Komprimierung
vornehmen und der Browser muss sie
entpacken. Das ist in der Praxis bei
chronischer Webserverüberlastung oder
bei sehr schwachbrüstigen mobilen End-
Ladezeit: Firebug
zeigt die Requests
und die Ladezeit.
geräten manchmal ein kleiner Nachteil.
Generell gilt aber, dass GZip meist sehr
gut funktioniert.
Der nächste Schritt für weniger Daten ist
das Verkleinern von Javascript- und CSS-
Dateien. Hier befinden sich viele Zeilenabstände
und Leerzeichen im lesbaren
Code, die vom Browser nicht benötigt
werden. Wenn man sich Javascript-Code
beispielsweise bei Google ansieht, erkennt
man außerdem, dass dort sogar
Variablennamen auf einen oder zwei
Buchstaben verringert werden.
Ein erster Ansatz sind hier auf jeden Fall
die von Ihnen verwendeten Javascript-Bibliotheken.
So gibt es beispielsweise vom
Marktführer jQuery eine minimalisierte
Produktionsvariante, die mit 91 Kilobyte
deutlich kleiner ist als die 263 Kilobyte
„schwere“ Variante mit sauberem Code.
Für eigenen Code existiert eine Menge
an Tools zur Komprimierung. Exemplarisch
seien hier zwei genannt, die auch
online getestet werden. UglifyJS finden
Sie unter https://github.com/mishoo/UglifyJS
– wer es im Einsatz testen möchte,
verwendet den Dienst unter http://jscompress.com/.
Und auch aus der YUI gibt
es einen sogenannten Compressor: http://
yui.github.com/yuicompressor/. Online
ist er beispielsweise hier http://refresh-sf.
www.internet-magazin.de 45

WEBENTWICKLUNG | Tipps für performante Websites
com/yui/ im Einsatz. Die Google-Lösung
aus diesem Bereich ist der Closure Compiler,
als Java-Anwendung und auch als
API verfügbar (https://developers.google.
com/closure/compiler/).
Der YUI Compressor kann beispielsweise
neben Javascript auch CSS komprimieren.
Hier stehen vor allem Whitespaces
und Einrückungen auf dem Speiseplan
der gefräßigen Komprimiermaschinen.
Und auch Online-Dienste gibt es; als
Beispiel sei hier http://www.cleancss.
com/ erwähnt. Hier geben Sie den CSS-
Code ein oder eine URL an und können
festlegen, was alles vom Komprimierer
erledigt werden soll. Der Online-Dienst
wiederum basiert auf http://csstidy.sourceforge.net/,
einem Open-Projekt.
Die Komprimierung von HTML-Code
verspricht sicherlich in der Praxis nicht
allzu viel Gewinn, denn die Namen der
HTML-Tags sind ja vorgegeben. Dennoch
gibt es immer Vereinfachungsmöglichkeiten
wie eine einfachere Struktur. Ein
automatisches Tool für diesen Bereich ist
beispielsweise HtmlCompressor (http://
code.google.com/p/htmlcompressor).
Ein weiterer interessanter Punkt sind
die verwendeten Bilder. Hier sollte man
überprüfen, ob Bilder im richtigen Format
vorliegen, also beispielsweise Fotos
als JPEG, Grafiken dagegen als PNG und
GIF. Auch bei der Komprimierung kann
man noch einmal nachjustieren oder gar
Spezialisten wie JPEGmini (http://www.
Hilfreich: Das
Google-Tool
Pagespeed Insights
analysiert
das Frontend und
gibt wertvolle
Optimiertipps.
jpegmini.com/) und das verlustfrei arbeitende
Smush.it (http://www.smushit.com/
ysmush.it/) verwenden.
Dateien ausliefern
Der zweite generelle Ansatz für die Frontend-Optimierung
ist die Reduktion der
gleichzeitigen HTTP-Verbindungen. Zum
einen erzeugt natürlich jede Verbindung
auf dem Webserver Last, zum anderen
haben gerade ältere Browser teilweise
Beschränkungen auf nur zwei oder vier
gleichzeitige Verbindungen von einer
Domain beziehungsweise Subdomain.
Daraus ergeben sich einige Empfehlungen.
Zum einen sollte man Dateien
auf verschiedene Subdomains und Domains
auslagern. Das ist allerdings mit
Vorsicht zu genießen und sollte einen
Sinn ergeben: Eine sinnvolle Variante
wäre beispielsweise ein eigener Auslieferungsserver
für statische Inhalte wie
Bilder, CSS und Javascript, der dann auch
unter einer eigenen Subdomain läuft.
Hier bietet es sich auch an, nicht auf einen
komplexen Webserver wie Apache,
sondern eine leichtgewichtigere Lösung
wie beispielsweise lighttpd zu setzen.
Verkleinert: Die
verkleinerte
jQuery-Version
ist das Tool der
Wahl für die Produktivumgebung.
Wer größeren Bedarf hat, kann natürlich
auch Daten in die Cloud verfrachten und
beispielsweise so genannte Content Delivery
Networks wie Akamai nutzen. Für
den kleineren Bedarf ist das Auslagern
von Videos auf YouTube und Co. eine
sinnvolle Möglichkeit, dem Server Arbeit
abzunehmen. Und auch Javascript-
Bibliotheken wie jQuery lassen sich von
potenten Anbietern wie Google aus der
Cloud liefern. Hier finden Sie eine Übersicht
über die verfügaren Bibliotheken:
https://developers.google.com/speed/
libraries/devguide. Beim eigenen Code
kann man natürlich Requests einsparen
und bei CSS und Javascript Inhalte
in eine Datei packen. Hier gilt es allerdings
zu überlegen, ob es nicht teilweise
besser ist, auf Unterseiten immer nur
den jeweils benötigten Code zu laden.
Eine weitere Variante wäre, Javascript
asynchron, das heißt erst dann zu laden,
wenn sichtbare Inhalte wie Bilder schon
geladen sind. Dies funktioniert immer
dann sehr gut, wenn der Javascript-Code
erst nach dem Laden der Seite an sich
benötigt wird. Und auch bei Bildern ist
die Reduktion von Dateien und damit
Requests möglich. Lösungsansatz sind
die so genannten CSS-Sprites. Dabei
werden in ein Bild mehrere Button-Zustände
oder Buttons zusammengefasst
und nur über die CSS-Position des Bildes
angesteuert. Die manuelle Erstellung ist
natürlich aufwändig, deswegen gibt es
einige Tools für diesen Zweck. Exemplarisch
seien hier http://spriteme.org/
mit einem Bookmarklet-Link und http://
spritegen.website-performance.org/ als
Formularlösung genannt.
46 0513 internet magazin

Tipps für performante Websites | WEBENTWICKLUNG
Vielfalt:
Verschiedene
Buttons sind in
einem Bild zusammengefasst.
Cache ist nicht gleich Cache
Der dritte Ansatz zur Performance-
Optimierung ist Caching, also das Zwischenspeichern
von Inhalten, die sich
nicht so häufig ändern. Er ist einerseits
eine Frontend-Maßnahme, wenn Sie
nämlich dem Browser erlauben, Dateien
wie CSS im Browser über mehrere Seiten
hinweg vorzuhalten. Andererseits findet
Caching auch auf dem Server statt.
Die verschiedenen Varianten sehen wir
uns nun näher an. Generell hilft es, den
Browsercache zu verwenden. Gerade
wiederkehrende Dateien wie CSS und JS
kann der Browser sehr effektiv in seinen
Cache übernehmen und fragt den Server
dann überhaupt nicht mehr an. Sie sehen
das beispielsweise im Firebug, wenn Sie
eine Seite ein zweites Mal aufrufen und
viele dieser Inhalte nicht erneut übertragen
werden. Gesteuert wird das Browserverhalten
hauptsächlich über die HTTP-
Header Expires und Cache-Control.
Diese Angaben werden übrigens auch
von Proxy-Servern eingesetzt, um festzustellen,
wann Inhalte neu geholt werden
müssen. Eine weitere Caching-Möglichkeit
im Frontend gibt es mit HTML5:
einen eigenen Anwendungscache, der
mit einer so genannten Manifestdatei gesteuert
werden kann. Hiermit sind noch
wesentlich mehr Möglichkeiten denkbar,
beispielsweise auch offline verfügbare
Dateien, aber generell wäre auch ein
zukünftiger Einsatz zur Performance-
Optimierung denkbar. Nun wechseln
wir vom Frontend zum Server. Auch hier
existieren verschiedene Caching-Optionen.
Beispielsweise bieten Content-
Management-Systeme wie TYPO3 ein
eingebautes Caching auf verschiedenen
Ebenen der Anwendung. Hier wird oft
eine Seite in den Zwischenspeicher gelegt,
sobald sie einmal aufgerufen wurde.
Wird der Inhalt dann bearbeitet, muss
der Cache gelöscht werden. Auch einzelne
Teile einer Seite können zwischengespeichert
werden, man spricht hier von
Partial Caching. Auf sehr fortgeschrittenem
Level ist es auch möglich, Objekte
und Datenbankresultate beispielsweise
im Hauptspeicher zwischenzulagern. In
PHP gibt es dafür beispielsweise Memcache
als Lösung.
Diese Ansätze sind allerdings recht invasiv.
Wer schnelle Resultate benötigt, ist
unter Umständen mit einem vorgeschalteten
Cache, einem so genannten Fullpage
Cache, besser beraten. Ein bekannter
Vertreter ist Varnish (http://www.varnishcache.org/).
Code und Datenbank
Je nach serverseitiger Programmiersprache
kann auch der Code an sich ein Engpass
sein. Speziell sehr komplexe Aufbauten,
unnötige Schleifen und unendlich verschachtelte
Dateikonstrukte können hier
Probleme machen. Allerdings ist hier in
den meisten Fällen die Analyse aufwändig,
weswegen es Sinn macht, zuerst zu
überprüfen, ob nicht vielleicht die Datenbank
das eigentliche Problem darstellt.
Bei der Datenbank gilt es zuerst herauszufinden,
welche Abfragen betroffen sind.
Je nach Datenbank ist das Vorgehen hier
unterschiedlich. In MySQL gibt es das so
genannte Slow Query Log. MySQL kann
dieses Protokoll entweder in eine Datei
oder ab MySQL 5.1.6 wahlweise auch in
eine Tabelle schreiben. Ausgehend von
den langsamen Abfragen gilt es nun, Maßnahmen
zu treffen. Grob unterteilen lassen
sich diese in: allgemeine Konfigurationseinstellungen,
beispielsweise erhöhte
Zwischenspeicherzeiten, Vereinfachung
der Abfragen an sich und Einsatz datenbankspezifischer
Optimierungen wie
beispielsweise eines Index auf bestimmte
Spalten. Bei MySQL ist oft auch die Frage
nach dem Tabellentyp MyISAM oder InnoDB
relevant. InnoDB ist hier für Lese-
Beibehalten: Im
Antwort-Header liefert
der Server Expires und
Cache-Control mit.
operationen deutlich schneller, kann aber
bei Schreibvorgängen der Engpass sein.
Das Thema Performance ist umfangreich.
Mit diesem Artikel haben Sie einen ersten
Einblick in mögliche Engpässe und verschiedene
Stellschrauben zur Behebung
erhalten. Je nach vorliegender Website
lohnt es sich nun, in einzelne Bereiche
tiefer einzusteigen. Dabei tun sich unterschiedliche
Welten auf: Die Frontend-
Optimierung liefert oft für den Nutzer ein
deutlich verbessertes Erlebnis, serverseitiges
Caching und Datenbankoptimierung
haben dagegen noch einmal ganz
spezifische Anforderungen. Generell gilt,
dass es sehr viele Optimierungsmöglichkeiten
gibt, bevor der Schritt zu mehr und
dickerer Hardware fällig ist.
Tobias Hauser
www.internet-magazin.de 47

WEBENTWICKLUNG | Widget-Programmierung
Alles selbst
gemacht!
Android-Widgets sind der letzte
Schrei unter Programmierern. Um durchstarten zu
können, finden Sie hier alle wichtigen Grundlagen.
Viele mobile Geräte nutzen intern
das von Google entwickelte und
auf Linux basierende Open-Source-
Betriebssystem Android. Dieses kommt
auf Smartphones, Tablet-PCs oder auch
Notebooks zum Einsatz. Wie bei anderen
Systemen auch, führen Sie unter
Android Anwendungsprogramme, Tools
sowie Spiele im Vordergrund oder auch
Dienste im Hintergrund aus. Starten Sie
das System, dann gelangen Sie zunächst
auf den Homescreen. Dieser beinhaltet
– wie der Desktop anderer Systeme –
Desktop-Symbole, Bedienelemente oder
auch ausgeführte Minianwendungen, die
so genannten Android-Widgets.
Potenzial der Widgets
Die Widgets haben Funktionen vergleichbar
den in Windows Vista und Windows
7 bekannten Minianwendungen. Sie
wurden mit dem Android SDK (Software
Development Kit) 1.5 eingeführt. Sie legen
Informationen auf dem Homescreen
offen, die je nach Bedarf zeitbasiert oder
anhand von Systemrückmeldungen aktualisiert
werden. Widgets setzen
Sie aber nicht nur zur Informationsausgabe,
sondern auch zur
Steuerung ein.
Ferner unterstützt Android Hybrid-
Widgets, die Informationen ausgeben
und zusätzlich Steuerungsfunktionen
anbieten (zum Beispiel
Musiktitel pausieren und fortsetzen).
Je nach Anwendungstyp
(App oder Widget) erfolgt auch
die Kodierung unterschiedlich.
Bekannte Widgets erlauben den
Home sweet Homescreen:
Auf diesem Nexus 7 laufen
die Wetterapp von Beautiful
Widgets samt Akku-Widget,
die anmierte Strandszene von
My Beach sowie die Digitaluhr
von Google.
Zugriff auf ausgewählte Informationen,
das Abrufen standortbasierter Wetterdaten
oder aber eine permanente Überwachung
ausgewählter Systeminformationen
(Speichergröße, Uhrzeit, Kalenderdaten
und so weiter).
Die Android-Systemarchitektur
Die Systemarchitektur bestimmt, wie
Sie Anwendungen für mobile Geräte
als Entwickler umsetzen und welche
Werkzeuge Sie dafür zur Hand haben.
Das Android-System setzt sich dabei
aus dem Systemkern, Funktionsbibliotheken,
einer Laufzeitumgebung und
dem Application Framework zusammen.
Darauf setzen die Anwendungen auf,
die Bestandteil des Systems sind oder
von Drittanbietern oder Ihnen selbst bereitgestellt
werden (siehe Funktionsdiagramm
rechts).
Der Linux-Systemkern übernimmt in
An droid die Aufgaben für die Energie-,
Speicher- und Prozessverwaltung, bietet
Sicherheitsfunktionen und bindet
Gerätetreiber ein (Tastatur, Bildschirm,
Kamera, Flashspeicher, WiFi, Audio).
Über den Binder-Treiber wird die Kommunikation
zwischen unterschiedlichen
Prozessen realisiert. Als Runtime wird
in Android die Dalvik Virtual Machine
(DVM) genutzt. Darüber und über die
zugehörigen Java-Klassenbibliotheken
werden Java-Anwendungen in einem
48 0513 internet magazin

Widget-Programmierung | WEBENTWICKLUNG
speziellen Binärcode ausgeführt, der
von herkömmlichem Java-Bytecode abweicht.
Ausführbare Programme erhalten
das Kürzel dex (Dalvic EXevcutables)
und Programmpakete werden in Android
Packages verpackt (APK). Die DVM
wurde für mobile Geräte optimiert und
ist speicherschonend auch in mehreren
Instanzen ausführbar.
Zeitkritische Routinen
Zeitkritische Routinen werden über C/
C++ implementiert und über gesonderte
native Bibliotheken angebunden.
Darüber stehen Funktionen zur Datenverwaltung
(SQLite), zur Grafikprogrammierung
(OpenGL, Open GL ES, SGL
Graphics Engine), zum Internetzugriff
(WebKit), zur sicheren Datenübertragung
(SSL – Secure Sockets Layer), zur Multimediaverwaltung
(Media Framework),
zur Schriftenausgabe (FreeType), zur
Oberflächenverwaltung (Surface Manager)
sowie wichtige Systembibliotheken
(libc) bereit. Libc ist hierbei eine von
Google entwickelte Bibliothek für den
C-Compiler, die den Namen Bionic trägt.
Widgets legen Informationen und Bedienfunktionen auf Home- und Lockscreens
offen oder aggregieren Informationen zu einem „Collection Widget“ wie Googles
Currents rechts im Bild (Quelle: Google).
Die Systemarchitektur
von Android –
Grundlage zur
Anwendungsentwicklung.
Kostenfreie Entwicklungstools für Android
Programm URL Beschreibung
Netbeans DIE 7.3 http://netbeans.org Java-Entwicklungsumgebung
NBAndroid www.nbandroid.org Java-IDE für die Entwicklung mobiler Anwendungen (32-/64-Bit-Editionen) für Windows,
Linux und Mac OS, die kein ADT enthält.
Eclipse for mobile
Developers
Eclipse ADT Plugin
http://eclipse.org/mobile
http://developer.android.com/sdk/
instal ling/installing-adt.html
Die Java-IDE für die Entwicklung mobiler Anwendungen steht in 32- und 64-Bit-Version
für die Systeme Linux, Mac OS und Windows zur Verfügung, integriert aber nicht das ADT.
Hinweise zur Installation des ADT-Plug-ins für Eclipse
Android ADT Bundle
ADT (SDK Tools)
JDK/JRE
Android App Widget
Templates Pack 4.0
http://developer.android.com/sdk/
index.html
http://developer.android.com/sdk/
index.html
http://www.oracle.com/technetwork/java/javase/downloads/index.
html
http://developer.android.com/
guide/practices/ui_guidelines/
widget_design.html
Das Android ADT Bundle beinhaltet mobiles Eclipse mit dem ADT-Plug-in, das Android-
SDK und gesonderte Plattformtools sowie das letzte Systemabbild für den Emulator. Das
Bundle ist in 32- und 64-Bit-Edition für Linux, iOS und Windows erhältlich. Optional
können über diese Seite die SDK-Tools auch ohne Eclipse-IDE heruntergeladen werden.
Das eigenständige Android Development Toolkit nutzen Sie, wenn Sie Eclipse als Entwicklungsumgebung
bereits auf Ihrem Rechner installiert haben.
Das Java Development Kit (JDK, 32-/64-Bit-Editionen) beinhaltet die JRE (Java Runtime
Environment). Die 32-Bit-Variante wird für 32-Bit-, die 64-Bit-Variante für 64-Bit-
Anwendungen benötigt.
Vorlagen für die Programmierung von Android-App-Widgets.
www.internet-magazin.de 49

WEBENTWICKLUNG | Widget-Programmierung
Das Application Framework ist das Rahmengerüst
für Anwendungen, hinter dem
sich die Programmierschnittstellen verbergen
(APIs – Application Programming
Interfaces). Per API werden Java-Klassen
angeboten, die Entwickler
in eigenen Anwendungen
nutzen. Das Application
Framework gibt den Aufbau
von Anwendungen vor
und macht Funktionalitäten
anwendungsübergreifend
verfügbar. Auf das Anwendungs-Framework
setzen die einzelnen
Android-Anwendungen auf. Diese werden
teilweise bereits mit dem System
ausgeliefert. Als Entwickler erstellen Sie
Anwendungen für Android wahlweise
unter Windows, Mac OS oder Linux.
Um mobile Anwendungen direkt auf
Desktop-Systemen zu testen und auszuführen,
stehen konfigurierbare Emulatoren
bereit. Der abschließende Test
einer fertiggestellten Anwendung erfolgt
auf dem mobilen Gerät. Sie können Anwendungen
wahlweise direkt überspielen,
über das Internet URL-basiert an
mehrere Anwender verteilen oder über
Google Play, dem Anwendungsmarkt für
Android-Anwendungen, einer breiten
Masse von Android-Geräten online
kostenfrei oder zum Kauf
anbieten. In Google Play
werden alle Anwendungen
versionsbasiert
verwaltet.
So ist sichergestellt,
dass das mobile Gerät
direkt erkennen kann, ob bestimmte
Android-Anwendungen kompatibel und
damit nutzbar sind oder nicht (siehe Abbildung
unten).
Unter der Internetadresse http://developer.android.com/reference/packages.
html rufen Sie, bezogen auf einen bestimmten
API-Level, die Informationen
zu den unterstützten Programmierschnittstellen
ab. Kontrollieren Sie bei einer
Programmentwicklung für ein eigenes
Gerät aber immer erst, welche Funktio-
Versionsunterschiede: Von Cupcake bis Jelly Bean
Jede Android-Anwendung wird für eine bestimmte Systemversion entwickelt. Diese legt die
grundlegende Funktionalität und die verwendbaren Programmierschnittstellen fest.
Widgets erst seit Android 1.5
Android liegt in unterschiedlichen
Versionen vor, wobei
bekannte Versionen zusätzliche
Namen tragen. Die Version 1.5
machte erstmals die Unterstützung
von Widgets verfügbar. Diese
Version trägt den englischen
Namen Cupcake und ist dem
API-Level 3 zugeordnet. Die Version
4.2 ist die derzeit neueste
Version, trägt den Namen Jelly
Bean und definiert den API-
Level 17. In der letztgenannten
Version stehen Widgets nicht nur
auf dem Homescreen, sondern
auch auf dem Lockscreen zur
Verfügung. Jede Version ist
ihrerseits mit einem bestimmten
API-Level verknüpft. Dieser legt
fest, welche Systemfunktionen
für ein Gerät nutzbar sind.
Android-Version API-Level Name
1.0 1 Base
1.1 2 Base
1.5 3 Cupcake
1.6 4 Donut
2.0 5 Eclair
2.0.1 6 Eclair
2.1.x 7 Eclair
2.2.x 8 Froyo
2.3, 2.3.1, 2.3.2 9 Gingerbread
2.3.3, 2.3.4 10 Gingerbread
3.0.x 11 Honeycomb
3.1.x 12 Honeycomb
3.2 13 Honeycomb
4.0, 4.0.1, 4.0.2 14 Ice Cream Sandwich
4.0.3, 4.0.4 15 Ice Cream Sandwich
4.1, 4.1.1 16 Jelly Bean
4.2 17 Jelly Bean
nalitäten nutzbar sind. Nur so ersparen
Sie sich den Ärger, dass selbst entwickelte
Anwendungen auf Ihrem eigenen Gerät
später nicht lauffähig sind.
In einem Anwendungsmanifest legen Sie
später fest, welche Mindestversion für die
Lauffähigkeit einer Anwendung vorhanden
sein muss (minSdkVersion), welches
Zielsystem adressiert wird (targetSdkVersion)
und welche höchste Versionsnummer
eines Systems generell unterstützt
wird (maxSdkVersion). Die Versionsnummern
werden dabei über die Ganzzahl
des zugeordneten API-Levels angegeben.
Die allgemeine Syntax im Anwendungsmanifest
hat den folgenden Aufbau:
Anhand dieser Zuweisungen wird im
Rahmen der Installation oder Aktualisierung
einer Anwendung entschieden, ob
diese zulässig ist oder nicht. Damit ist
gewährleistet, dass solche Anwendungen
oder Widgets gar nicht erst installiert werden,
die auf einem vorhandenen System
nicht lauffähig sind.
Android-Anwendungsarchitektur
Herkömmliche Android-Anwendungen
setzen sich aus ein oder mehreren Activities-,
Services-, Content- und Broadcast-Elementen
zusammen. Eine Activity
ist eine Anwendungskomponente, die
einen Bildschirm für die Interaktion und
Benutzereingaben verfügbar macht. Die
Haupt-Activity wird auch als main activity
bezeichnet. Diese wird nach dem
Starten einer Anwendung angezeigt. Jede
Activity kann ein oder auch mehrere Activities
nachladen, wobei eine Aktivität
aktiv ist und deaktivierte Aktivitäten unmittelbar
angehalten werden. Zwischen
den Aktivitäten kann nach Bedarf gewechselt
werden. Services sind Dienste,
die bei Anwendungen genutzt werden,
50 0513 internet magazin

Widget-Programmierung | WEBENTWICKLUNG
die im Hintergrund arbeiten. Sie werden
wahlweise durch eine Activity oder den
Binder gestartet. Content Provider liefern
die Dateninhalte für eine Anwendung
(SQLite, XML oder auch entfernte Datenspeicher
in der Cloud). Über Sie greifen
auch mehrere Aktivitäten oder Dienste
vereinfacht auf den gleichen Datenbestand
zu, wobei die Datenabfrage, das
Hinzufügen von Daten oder auch das Löschen
von Daten über URIs (Uniform Resource
Identifier) erfolgt. Broadcasts sind
schließlich Sender für Nachrichten, auf
die Empfänger (Broadcast Receiver) mit
bestimmten Aktionen reagieren können.
Der Eingang einer SMS, das Läuten eines
Telefons, das neue Erkennen oder Wegfallen
von WLAN-Netzwerken, die Uhrzeit-
oder Datumsänderung oder auch
Änderungen am Ladezustand des Akkus
werden systemintern überwacht und versendet.
Damit eine Anwendung diese Änderungsmitteilungen
entgegen nehmen
und verarbeiten kann, muss diese einen
BroadCast-Empfänger definieren.
Minianwendungen für Android
App-Widgets sind ein spezieller Anwendungstyp,
bei dem anders als bei
Über den API-Level legen Sie die
Funktionen offen, die im Rahmen der
Programmentwicklungen für mobile
Geräte nutzbar sind.
Widget-Platzierung: Homescreen oder Lockscreen?
Erst mit der Version 4.2 von Android können Sie Widgets nicht nur auf dem Home-, sondern
wahlweise auch auf dem Lockscreen platzieren.
Je nach Android-Version bieten mobile Geräte
mitunter mehrere Homescreens an. Auf
sämlichen Homescreens (in der Regel 1, 3
oder 5), zwischen denen Sie per Gestensteuerung
wechseln, öffnen Sie nach Bedarf auch
eines oder mehrere Widgets. Um fehlerhafte
Tastatureingaben zu unterbinden, wird neben
den Homescreens ein gesonderter Lockscreen
(Sperrbildschirm) angeboten. Dessen Sperrfunktion
müssen Sie über eine gesonderte
Wischbedienung oder aber ein gesondertes
Bedienelement aufheben. Erst auf Android-
Systemen der Version 4.2 lassen sich Widgets
auch direkt auf dem Sperrbildschirm ablegen.
Ob ein Widget als Homescreen- und oder
Lockscreen-Widget nutzbar ist, geben Sie
herkömmlichen Anwendungen nicht
die Activities, sondern ein Broadcast-
Empfänger im Vordergrund steht. Die
wesentlichen Bestandteile eines Widgets
sind ein Anwendungsmanifest, das Anwendungsinformationen
im XML-Format
(eXtended Markup Language) verwaltet,
und eine BroadCastReceiver-Klasse, die
festlegt, wie auf Nachrichten und Informationen
zu reagieren ist und die im
zweiten Teil behandelt werden.
Android bietet unterschiedliche Widget-
Typen an: Information-Widgets machen
aktualisierbare Informationen verfügbar,
deren Anwahl eine zugeordnete, größere
Anwendung oder eine Detailansicht offenlegt.
Collection-Widgets geben dagegen
entsprechend die Informationen zu
mehreren Elementen des gleichen Typs,
beziehungsweise einer Kollektion aus,
wie zum Beispiel Bildersammlungen
oder Nachrichten. Über die Collection-
Widgets wählen Sie einzelne Elemente an
und öffnen diese in einer Detailansicht.
Control-Widgets dienen als Fernsteuerungsanwendung,
mit der ausgewählte
Funktionen durch eine Schaltflächenanwahl
abgesetzt werden. Control-
Widgets bieten in der Regel nur ausge-
über die XML-Metadatendatei im Bereich
appwidget-provider an:
Widget ist auf dem Homescreen ausführbar
android:widgetCategory=“ home_
screen“>
Widget ist auf dem Lock- und Homescreen
ausführbar
android:widgetCategory=“keyguard|
home_screen“>
wählte Funktionen einer Anwendung an
und mitunter auch Querverweise zur
Hauptanwendung oder einer Detailansicht.
Hybrid-Widgets kombinieren, wie
eingangs erwähnt, Informationen und
Steuerungsfunktionen. Im Rahmen der
Entwicklung bestimmen Sie nicht nur die
Widget-Inhalte (Content), sondern auch
die Navigation sowie das Layout und die
Größenänderung, die seit der Android-
Version 3.1 steuerbar ist. Dabei kann
und muss die vom jeweiligen Gerät bereitgestellte
Display-Größe berücksichtigt
werden. Benötigen Widgets bestimmte
Konfigurationseinstellungen, definieren
Sie diese ebenfalls auf Quelltextebene.
Sobald das Widget dann auf den Homescreen
platziert wird, erfolgt die Abfrage
der erforderlichen Konfigurationseinstellungen
automatisch. Generell gilt: Der
Funktionsumfang einer Minianwendung
ist kompakt und beschränkt sich auf eine
bestimmte Funktionalität.
Im nächsten Teil dieser Serie wird gezeigt,
wie Sie mit mobile Eclipse und
dem ADT Minianwendungen für Android
selbst über XML-Dateien definieren
und in Java-Syntax programmieren.
Dipl.-Ing. Andreas Maslo
www.internet-magazin.de 51

WEBBUSINESS | Customer Journey Workshop
Die Reise des Kunden
Kunden wählen von der Inspiration bis zum Produktkauf
sehr unterschiedliche Wege. Sind diese unbekannt,
bleibt jede Werbemaßnahme allgemein und
oberflächlich. Präzises Targeting ist angesagt.
Blätterbare Online-Kataloge lassen
sich leicht herstellen und einige Kundinnen
lieben sie, sagt Phillipp Winklhofer.
Er spricht von diesen kleinen Flash-
Anwendungen, bei denen sich die Ecken
der Seiten aufrollen und mit der Maus
umblättern lassen. Für Winklhofer, der
den Online-Shop von Atelier Goldener
Schnitt (kurz AGS) verantwortet und dort
Damenoberbekleidung verkauft, sind die
kleinen Flash-Filmchen ein No-Brainer:
machen und nicht darüber nachdenken.
„Wir kommen heute noch nicht ohne einen
Katalog aus“, sagte Sabine Tietz von
Lascana vor einem Jahr. Obwohl der Online-Shop
des Dessousanbieters gut auf
Konversion optimiert ist, setzt die Otto-
Tochter nach wie vor auf die analoge
Form der Ansprache mit Papier. Das hat
auch der Pure Player und Branchenriese
Zalando begriffen. Jedes Quartal druckt
Zalando inzwischen Kataloge in Millionenauflage.
Und Notebooksbilliger – ein
ehemaliger Pure Player – geht sogar noch
einen Schritt weiter und eröffnet demnächst
die zweite echte Filiale.
„Man glaubt fast nicht, wie viele Innovationen
im Online-Lebensmittelhandel
möglich sind“, so Mo Mosavi auf dem
Kongress Online-Handel Ende Januar in
Bonn. Mosavi zeigte in seinem Vortrag,
dass der vermeintlich ausdefinierte Markt
für Lebensmittel noch viel Raum für Erfindungsreichtum
lässt. Eines der Beispiele,
die der Iraner zeigt, arbeitet mit
Lebensmittel-Packages für bestimmte Anlässe
wie das Candle Light Dinner oder
den Fußballabend mit Freunden. Ein anderes
Beispiel erlaubt dem Kunden nur
52 0513 internet magazin

Customer Journey Workshop | WEBBUSINESS
Zalando hat die Bedeutung
von Papiermarketing erkannt
und druckt Kataloge.
solche Produkte in den Warenkorb zu
legen, die ein bestimmtes Allergen nicht
beinhalten oder zum Beispiel glutenfrei
sind. Mosavis eigener Shop Saymo.de hat
zum Beispiel den Kauf auf Rechnung als
Mehrwert für die Kunden ausgemacht.
Alle drei Beispiele eint eines: Winklhofer,
Tietz und Mosavi schauen sich ihre Kunden
ganz genau an. Sie lassen sich nicht
blenden von allgemeinen Statistiken und
älterer Literatur, die das Kundenverhalten
zu einer Zeit skizziert, als die Telefone
noch Kabel hatten. Sie verschaffen sich
ein Bild von der Reise des Kunden, beginnend
bei der ersten Inspiration bis hin
zum Produktkauf und darüber hinaus.
Sie ordnen jeder Informationsquelle, die
der potenzielle Kunde konsultiert, einen
Messwert zu, und versuchen die Bedürfnisse
zu ermitteln, die der Kunde genau
an dieser Stelle hat. Daraus leiten die
Shopbetreiber dann die Werbemaßnahmen
und -inhalte ab, die die Recherche
beeinflussen sollen. Das Ziel: Alle wollen
die Entscheidung frühzeitig in Richtung
ihres Shops dirigieren, denn sobald der
Kunde ein konkretes Produkt vor Augen
hat, entzündet sich im Web ein gnadenloser
und vielfach ruinöser Preiskampf.
Die Idee von der
Customer Journey
Reisewege zum Produkt gibt es so viele,
wie es Kunden gibt und selbst der einzelne
Kunde geht selten zweimal den gleichen
Weg. Die Möglichkeiten, mit einem Thema
in Berührung zu kommen, das später
eine Konsumrelevanz haben könnte, sind
praktisch unendlich. Im Groben lassen
sich jenseits der digitalen Welt folgende
Segmente filtern: Freunde und Bekannte,
analoge Werbung in TV, Zeitschriften, auf
Plakaten, Medienberichterstattung, Konsultation
von Experten, lokale Kontakte
auf Veranstaltungen oder der Bummel
durch die Fußgängerzone. Hinzu kommt
eine Vielzahl digitaler Kontaktpunkte.
Hierzu zählen Bannerwerbung, SEA,
SEO, Affiliate-Programme, Social Media,
Firmen-Websites, Foren, Blogs, redaktionelle
Websites, Portale und Shopping-
Portale, E-Mail-Marketing und natürlich
Preissuchmaschinen.
In der Theorie bekommt jeder so genannte
Touchpoint einen Wert zugeschrieben.
Dieser Wert bemisst sich am Beitrag, den
ein Kanal zum Verkauf beiträgt. In der Digitalbranche
ist es vergleichsweise einfach,
ein solches Attributionsmodell zu
entwerfen. Man setzt bei jedem Werbe-
Der Zero Moment
of Truth entsteht
in vielen Fällen
bereits bevor der
Nutzer den Laden
oder den Online-
Shop betritt.
mittelkontakt ein Cookie und zählt nach
dem Kauf, was sich der Nutzer angesehen
hat. Mit einem solchen Verfahren lassen
sich auch Hilfseffekte messen. Die treten
ein, wenn zum Beispiel ein Banner auf
einer redaktionellen Website einen User
dazu bringt, bei Google nach einem Thema
zu suchen und letztlich auch zu kaufen.
Würde man nur die Konversion der
Adwords-Kampagne messen, so könnte
man die wichtige Zusatzwirkung des
Banners nicht in der Analyse sehen.
Wesentlich problematischer ist es, solche
Attributionsmodelle auch auf analoge
Touchpoints auszudehnen. Bei Plakaten,
Anzeigen oder TV-Spots ist die Messung
der Werbewirkung meistens an Panels
www.internet-magazin.de 53

WEBBUSINESS | Customer Journey Workshop
gebunden. Das ist häufig teuer und unscharf
im Ergebnis. Wer die Wirkung seines
analogen Marketing messen will, tut
gut daran, eine offensive Verknüpfung in
die digitalen Kanäle zu installieren. Bei
Print und Plakat kann das zum Beispiel
Das Customer
Journey Mapping
Game macht aus
dem CJ-Workshop
einen vergnüglichen
Vormittag.
ein abzuscannender QR-Code sein. Ein
hinterlegter und entsprechend kommunizierter
Gutschein kann die Motivation
zur Nutzung steigern. Bereits die Landeseite
der Kampagne ist in der Lage, die
ob es im Laden
Käufe gab, die auf
Online-Werbung
zurückzuführen
Effekte der Werbung zu messen. Ist ein sind. Parfümhändler
Gutschein im Spiel, weiß das Shopsystem
Douglas
auch, woher dieser kommt.
testete letzen
Bei den zeitgebundenen Sendeschemata
von Fernsehen und Radio verhält es sich
etwas anders. Hier muss sehr präzise
gemessen werden, wie sich der Website-
Traffic verhält, während der Spot gesendet
wird. Der Berliner Trackingspezialist
Webtrekk hat für den Kunden „Wirkaufens“
festgestellt, dass deutlich mehr
Reichweite erzielt wurde, während der
Sommer, wie Kunden reagieren, wenn
ein Gutschein im Netz und in der Filiale
eingelöst werden kann. Das Ergebnis:
Ein Drittel der Einlösungen fand in den
Läden statt und erzeugte entsprechendes
Potenzial für Spontankäufe. „Man muss
nicht immer einen Gutschein einsetzen“,
sagt Mo Mosavi, „manchmal kann man
die Kunden einfach auch fragen.“ Außerdem
gibt es noch
eine Reihe subtiler
Methoden,
die den Kunden,
der ein Produkt
gekauft hat, dazu
verführen, online
mit dem Unternehmen
in Kontakt
zu treten. Ein
Klassiker ist die
Produktregistrierung.
Wie wichtig sind die Bewertungen, die in der Google-Suche
erscheinen, für den Vertrauensaufbau eines Unternehmens? Epson exer-
ziert das, indem
den Kunden kurze
Spot auf Pro7 lief. Eine deutlich höhere
Konversion erzielte der Spot aber auf Kabel1.
Webtrekk misst hierbei nicht nur die
primären Effekte, wenn die Nutzer direkt
Workshops zur Benutzung des Druckers
angeboten werden. In Maßen lassen sich
bei solchen Registrierungen ebenfalls Befragungen
durchführen.
auf die Site gehen, sondern kann auch
extrahieren, wer von Google kommt und
welcher Begriff häufig gesucht wurde.
Noch schwerer wird es für den Filialbetreiber.
Der muss zusätzlich erfassen,
Der Workshop
Die empirische Methode durch Tracking
hat einen wichtigen Nachteil: Sie weiß
nichts über Interessenten, die nie auf der
eigenen Website angekommen sind. Es
kann also sein, dass ein kompletter Kanal
vergessen wurde oder dass die Zielgruppenansprache
nicht stimmte. Einer
solchen Lücke im Marketingmix kommt
man mit einer anderen Methode auf die
Schliche, dem Customer-Journey-Workshop.
Er funktioniert in Form klassischer
Metaplanarbeit. Man nehme eine Gruppe
von Mitarbeitern, Kunden oder Freunden
und sperre sie für einen Tag in ein
Zimmer. Der Workshopleiter startet mit
einer offenen, indirekten Befragung und
versucht Inspirationsquellen zu ermitteln.
Eine Frage könnte lauten: „An welche
drei Erlebnisse aus letzter Zeit erinnert
Ihr euch beim Thema Fahrradfahren“.
Ausgehend von einer definierten Inspiration
und einem formulierten Anspruch
(„Neues Fahrrad, vielleicht ein eBike“)
notiert dann jeder Teilnehmer seine primäre
Informations- und Recherchequelle.
Adobe-Manager Hartmut König stellt fest,
dass Freunde längst nicht bei jedem Thema
die richtigen Ansprechpartner sind:
„Die fahren nicht so ambitioniert Fahrrad
wie ich, deshalb habe ich mehr in Foren
gesucht“. Wichtig hierbei ist nicht nur
die Quelle der Recherche, sondern auch
der Suchbegriff, der gewählt wird, beziehungsweise
die Problemstellung, die den
Kunden beschäftigt. Hartmut König hatte
zum Beispiel ein Ausschlusskriterium
54 0513 internet magazin

Customer Journey Workshop | WEBBUSINESS
gefunden, nämlich die Belastbarkeit des
Rennradrahmens. Produkte, die keine
100 Kilo tragen konnten, sollten frühzeitig
aus der Recherche ausscheiden.
Die Metaplantechnik sieht vor, dass die
Teilnehmer dann in einer zweiten Runde
die eigenen Vorschläge und die der Kollegen
mit Punkten bewerten. So entsteht
eine Liste der Prioritäten. Die wichtigsten
Touchpoints sind die, die mit Budgets
auszustatten sind, die wichtigen Fragestellungen
die, die es in Kampagnen und
im Content-Marketing durchzuspielen
gilt. Nun setzt der Testleiter einen Punkt
und definiert die nächste Stufe. Nach
der grundlegenden Recherche wird zum
Beispiel die Produktauswahl in einem
bestimmten Sortiment aufgebaut. Wie
recherchieren die Teilnehmer das?
Das Spielchen geht weiter bis zum Kauf.
Theoretisch ergeben sich Hunderte möglicher
Kombinationen von Touchpoints.
In der Praxis haben eine Handvoll Punkte
bei besonderen Fragestellungen eine hervorgehobene
Bedeutung. Für Hartmut
König zum Beispiel führte der Weg zum
lokalen Fahrradhändler über das Händlerverzeichnis
eines bestimmten Herstellers.
Händler, die dort nicht gelistet
waren, fielen durch sein Raster.
QR-Codes am Point of Sale stellen die
schnelle Verbindung zwischen Online-
Tracking und Filiale her.
Langfristige Strategien
Neben einer Liste der nächsten wichtigen
Marketingaktivitäten erhält der
Coach im Idealfall einen Satz von Archetypen
von Kunden, die so genannten
Personas. Im Falle Hartmut Königs ist
das der dynamische Geschäftsmann, der
einen sehr hohen Anspruch an sein Produkt
hat, und die Recherche akribisch
vorbereitet. Eine besondere Bedeutung
haben für ihn Fachforen. Wer König im
Visier hat, sollte die Meinungsführer zu
Markenbotschaftern machen. Die Ausdefinition
von Personas ist ein probates
Hilfsmittel für den Marketingalltag.
Nicht selten übersehen Marketingabteilungen
einzelne Zielgruppensegmente,
weil sie persönlich nicht in der Marketingabteilung
vertreten sind. Die Macher
des Longboard-Shop hatten sich stets
auf die naheliegende Kernzielgruppe
der 16- bis 25-jährigen jungen Männer
konzentriert. Bei einer nach Geschlecht
und Altersgruppen segmentierten Facebook-Anzeigenkampagne
ergab sich,
dass es auch eine sehr aktive weibliche
Zielgruppe zwischen 12 und 20 gab, die
laut Tracking sogar über Kaufkraft verfügt.
Nach seinem Wechsel von Baur
zu AGS beschäftigte sich Philip Winklhofer
einen Monat lang fast nur damit,
seine neue Zielgruppe präziser zu fassen.
„Best Ager sind das einzige Alterssegment,
bei dem es noch Wachstum in
der Online-Nutzung geben wird. Diese
Zielgruppe hat ein überdurchschnittliches
Qualitäts- und Preisbewusstsein.
Best Ager nutzen unterdurchschnittlich
oft soziale Netzwerke, deswegen muss
man sich gut überlegen, ob und wie
viele Ressourcen man ins Social Marketing
steckt“, so Winklhofer. Während
der Recherche entdeckte der Wahlfranke,
dass in der einschlägigen Literatur
jede Menge überkommene Klischees zu
finden waren. Zum Beispiel gelten Senioren
generell als innovationskritisch.
Links zum Thema
Customer-Journey-Studie von GFK
http://www.gfk.com/group/press_
information/press_releases/
010697/index.de.html
Der Einfluss von Social Media auf den
Shopumsatz steigt
http://www.marketing-boerse.de/
News/details/1249-Umsatzstei
gerung-bei-Online-Shops-mit-
Social-Media/39662
Das Customer Journey Mapping Game
http://prezi.com/1qu6lq4qucsm/
customer-journey-mapping-gametransport/
Weitere Quellen zum Customer Journey
Mapping
http://experiencinginformation.
wordpress.com/2010/05/10/
customer-journey-mappingresources-on-the-web/
AGS kann hingegen bereits eine recht signifikante
Rate an Zugriffen von Tablets
messen. Winklhofer: „Tablets machen
die Nutzung des Internets so einfach:
Mit einem Fingerwischen liegt einem
alles offen und dafür muss man weder
eine telefonbuchstarke Bedienungsanleitung
lesen noch ein Betriebssystem
instandhalten“.
Für die langfristige Strategie ist es vielleicht
eine gute Idee, den wichtigsten
Archetypen Namen zu geben, sich in
der Google-Bildersuche ein passendes
Bild dazu zu suchen, diese Bilder zusammen
mit einigen Kriterien wie einen
Steckbrief auszudrucken und an die
Bürowand zu pinnen. Dem einen oder
anderen Mitarbeiter wird das helfen, sich
in die Bedürfnisse der Kunden hineinzu
versetzen. Und denken Sie daran: Die
Customer Journey ist ein lebender Organismus,
der sich ständig verändert. Man
muss sie immer wieder neu definieren,
denn jede saisonale Schwankung, jede
Aktivität von Wettbewerbern beeinflusst
auch die Reise Ihrer Kunden.
Frank Puscher
www.internet-magazin.de 55

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.de-Gutschein
im Wert von10Euro oder die Logitech Digital Speakers 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.de-Gutschein (K971) für 14,99 Euro (Österreich 19,99 Euro*,Schweiz 29,99 sfr*)
❏ die Logitech Digital Speakers (K153) 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
Geldinstitut
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
✃
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.
WK30i2M05
Gleich Coupon ausfüllen und einsenden

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 GB Speicherstick oder Logitech
Digital Speakers oder 10 Euro-Amazon.de-
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.de-Gutschein
im Wert von 10,- Euro
Ein Heft GRATIS bei Bankeinzug!
Wählen Sie
eine dieser
attraktiven
Prämien!
SATTE
32 GB
TOP-PRÄMIE
DES MONATS!
Logitech Digital Speakers
Das Lautsprechersystem für Ihren Computer
Das System für USB-2.0 mit 1,2 Watt RMS ermöglicht eindrucksvollen
Klang mit kraftvollen Bässen. Audioübertragung
und Stromversorgung über USB. 3Jahre Garantie.
oder online bestellen unter www.internet-magazin.de/angebot

WEBBUSINESS | E-Commerce-Logistik
Logistik im
E-Commerce
Für den Erfolg eines Online-Shops sind zahlreiche
Faktoren verantwortlich. Neben der ganz offensichtlichen
Produktvielfalt und ansprechender Darstellung
des Warensortiments gehören dazu auch die Prozesse
rund um die Logistik.
Gründer und Startups im Versandhandel
werden schnell Opfer des eigenen
Erfolges. Der Aufwand, der betrieben
werden muss, um die von den Kunden
bestellten Waren pünktlich auszuliefern,
und auch die zwangsläufig einsetzenden
Retouren und deren Abwicklung erweisen
sich als zeit- und kostenintensiv. Das
ist eine kritische Phase, denn saubere
Abwicklungsprozesse haben durchaus
Einfluss auf den Erfolg des eigenen Geschäftsmodells.
Warum Logistik Einfluss
auf den Umsatz hat
Die Liebe zu den eigenen Produkten,
eine ansprechende Präsentation und
eine breite Angebotspalette dürften auf
längere Sicht nicht ausreichen, um im
Internetversandhandel erfolgreich zu
sein. Um eine Analogie zum stationären
Handel zu ziehen: Wer kauft auf Dauer
gern in einem Geschäft ein, in dem
er stundenlang an der Kasse schlangestehen
muss oder sich das Personal mit
Händen und Füßen gegen die Rücknahme
von Artikeln wehrt? Wie der Kunde
seinen Einkauf im Online-Shop als
Ganzes bewertet, hängt auch von den
Erfahrungen ab, die er nach dem Klick
auf den Bestell-Button macht.
Branchenriesen wie Amazon, Tchibo
und Otto haben es vorgemacht. Der
Kunde erfährt hier bereits wenige Minuten
nach Absenden seines Warenkorbs,
58 0513 internet magazin

E-Commerce-Logistik | WEBBUSINESS
welchen Status seine Bestellung hat, und
kann auch zuverlässig und zeitnah verfolgen,
wo sich seine Ware befindet. Eine
erfüllte Forderung nach transparentem
Service, der sich damit auch zwangsläufig
kleinere Unternehmen ausgesetzt
sehen. Ausgefeilte Logistikprozesse und
die Wahl des richtigen Dienstleisters helfen
Shopbetreibern dabei, Kundenwünschen
gerecht zu werden.
Die Bestandteile von
Logistik und Fulfillment
Um darüber entscheiden zu können,
welche Dienste in Anspruch genommen
werden sollen, ist es wichtig, sich die
mit dem so genannten Fulfillment beziehungsweise
der Logistik in Verbindung
stehenden Prozesse genauer anzusehen.
Hat der Kunde seine Bestellung abgesendet,
müssen die Waren aus einem Lager
genommen und zusammengestellt (kommissioniert)
werden. Alles muss sicher
verpackt werden, damit es den anschließenden
Versand unbeschadet übersteht.
Sowohl das Unternehmen als auch der
Kunde müssen wissen, wo sich die Ware
befindet, der Versandweg muss also verfolgbar
sein (Tracking). Schließlich sind
Rechnungen – entweder bereits vor dem
Versand oder unmittelbar danach – zu
schreiben, die Zahlungen abzuwickeln
und eventuelle Mahnungen zu schreiben.
Und schließlich sollte nicht vergessen
werden, dass Kunden Waren aus unterschiedlichsten
Gründen auch wieder
zurückgeben und dann Prozesse passend
zum Kundenwunsch angestoßen und abgewickelt
werden müssen.
Grob lassen sich die genannten Prozesse
in zwei Arten von Dienstleistungen zusammenfassen.
Logistiker bieten den Unternehmen
den reinen Versand an, das
Unternehmen holt also die verpackten
Waren ab oder erwartet deren Einlieferung
in einem Versandzentrum und übernimmt
anschließend den Transport. Das
Kunden erwarten heute Transparenz
darüber, wo sich die Waren während
des Versandes befinden. Spezielle Apps
für iOS- oder Android-Geräte fragen die
Systeme der Logistiker dazu ab.
Angebot von Unternehmen, die das Fulfillment
anbieten, geht dagegen weit über
diesen reinen Transport hinaus. Dort hin
können mehr oder weniger modular alle
bereits genannten Prozesse ausgelagert
werden, die nach dem Bestelleingang in
einem Unternehmen anfallen.
Der optimale Logistiker
Bei der Wahl des optimalen Logistikers
steht zu Beginn die Fragestellung, an wen
Sie überwiegend Ihre Pakete senden werden
und welche Liefergebiete zu berücksichtigen
sind. Gehören zu Ihren Kunden
eher private Haushalte, ist es besser, sich
für einen Versender zu entscheiden, der
sich auf dieses Segment spezialisiert hat,
und etwa auch an stationäre Shops oder
Paketstationen ausliefert.
Viele der Komfortfunktionen für den Absender,
zum Beispiel die elektronische
Übermittlung einer Nummer für die
Verfolgung der Sendung, sind bei den
meisten Unternehmen an den Status des
Geschäftskunden gekoppelt. Und dieser
Status ist üblicherweise an eine Mindestmenge
an Paketen, die pro Jahr versendet
werden müssen, gebunden. Diese
Menge liegt etwa zwischen 300 (DHL,
Hermes) und 500 Paketen (GLS) pro Jahr.
Eine Variante dieses Modells ist etwa die
Herausgabe einer Software für die Übermittlung
der Versanddaten, die erst nach
einer Mindestanzahl an Paketen erfolgt.
Wer so viele Pakete versendet, erhält
dafür dann aber auch preisliche Sonderkonditionen
und kann Sendungen direkt
abholen lassen.
Bei der Entscheidung für oder gegen einen
Logistiker können auch noch weitere
Gesichtspunkte eine Rolle spielen.
Gibt es Grenzen hinsichtlich der Abmessungen
eines Pakets oder des Gewichts
der Sendung? Bis zu welchem
Wert ist die Sendung gegen Verlust versichert?
Wie viele Zustellversuche sind
inkludiert? Kann der Kunde seine Bestellung
danach an einer Niederlassung
selbst abholen? Oder wird die Angabe
eines vom Kunden gewünschten Versandzeitpunkts
angeboten?
Unter den Logistikern finden Sie auch
Anbieter, die sich in erster Linie auf das
Business-to-Business-Segment spezialisiert
haben und eher den Kurierdiensten
zuzuordnen sind. Hierzu zählen Fed-
Ex, TNT oder auch General Overnight
(GO!). Sie bringen die Waren zwar extrem
schnell zum Kunden, ihre Gebühren
dürften aber regelmäßig gerade im
Mengengeschäft den finanziellen Rahmen
eines Shopbetreibers sprengen.
Logistiker in der Übersicht
Jedes Kind kennt die gelben Fahrzeuge
von DHL. Der größte Vorteil des Unternehmens,
das zum Konzern Deutsche
Post gehört, ist sicherlich das flächendeckende
Netz an Zustellstützpunkten
und die große Fahrzeugflotte. Komfortabel
für den Kunden sind die Packstationen,
an die Pakete ausgeliefert werden
www.internet-magazin.de 59

WEBBUSINESS | E-Commerce-Logistik
können. Im Falle der Nichterreichbarkeit
können Kunden die Ware in den Filialen
des Unternehmens abholen und Sendungen
auch am Sonnabend erhalten.
Der Kunde kann mit der Sendungsverfolgungsnummer
jederzeit nachsehen,
wo sich seine Ware befindet. Die Preise
für den Versand sind abhängig von der
Menge. Um in den Status des Geschäftskunden
zu gelangen, müssen mindestens
300 Pakete im Jahr versendet werden.
Hermes ist ein Tochterunternehmen der
Otto-Gruppe und entsprechend auch primär
im Privatkundengeschäft aufgestellt.
Hermes liefert auch am Samstag aus und
unterhält inzwischen bundesweit eine
fünfstellige Zahl an Paketshops, in denen
Kunden Waren im Falle der Nichterreichbarkeit
oder auch auf Wunsch abholen
können. Das Preisniveau ist gegenüber
Wettbewerbern eher niedrig, da Hermes
seinen Marktanteil signifikant steigern
möchte. 300 Pakete pro Jahr sind für
den Status „Geschäftskunde“ nötig. Eine
kostenlose Abholung ist ab vier Paketen
möglich. Bei kleineren Mengen wird ein
Zuschlag erhoben.
DPD hat als Versender im B2B-Bereich
begonnen. In der Fläche ist das Unternehmen
derzeit noch mit deutlich weniger
Paketshops als die Mitbewerber
vertreten. Das Privatkundengeschäft
soll aber weiter ausgebaut werden.
500 Sendungen im Jahr erwartet der
Dienst von seinen Geschäftskunden.
Das Preisniveau ist letztlich abhängig
von der Empfängerstruktur und der Zahl
der Pakete und wird im Rahmen eines
individuellen Angebots ausgehandelt.
Eine Besonderheit für die Versender von
größeren Elektrogeräten wie zum Beispiel
Kaffeevollautomaten: DPD bietet
spezielle Rückholboxen an, in denen
solche Geräte versendet werden können.
So gelangen empfindliche Waren
gut geschützt in die Werkstatt.
GLS gleicht in vielen Belangen seinem
Konkurrenten DPD. Zur Selbstabholung
stehen einige Tausend
Stützpunkte zur Verfügung, und auch
die Historie ist ähnlich. Die Preise für
den Versand sind flexibel gestaltet, die
Hürde für Geschäftskunden mit 500
Paketen identisch.
Die braunen Wagen von UPS sind ebenfalls
sehr bekannt. Aufgrund seiner eher
hohen Preise ist der Dienst in erster Linie
für zeitkritische Sendungen an Geschäftskunden
und Privathaushalte zu
empfehlen. Kunden können sich nach
mehreren erfolglosen Zustellversuchen
die Pakete in einem Depot abholen. Die
Depots sind allerdings regional recht
grob verteilt.
Fulfillment-Center
erledigen den
kompletten Bestellablauf
von der
Lagerhaltung bis
zum Versand des
Artikels.
Das komplette Programm:
Fulfillment
Unternehmen, die sich auf das Fulfillment
spezialisiert haben, bieten ein
deutlich breiteres Spektrum an als Logistiker.
Wer seine Waren und Artikel
bei einem solchen Unternehmen lagert,
dort zu Sendungen zusammenstellen
und verpacken lässt, muss dafür natürlich
auch bezahlen. Dieser „Aufschlag“
gegenüber dem reinen Versand muss
betriebswirtschaftlich bei der Preisgestaltung
der einzelnen Produkte berücksichtigt
werden. In engen Märkten,
in denen noch dazu Produkte mit einer
überschaubaren Marge angeboten wer-
60 0513 internet magazin

E-Commerce-Logistik | WEBBUSINESS
Dienstleister für
das Fulfillment
bieten umfangreiche
Lösungen
für alle Shopbetreiber
an.
Deren Integration
und Nutzung sind
aber in aller Regel
Teil eines größeren
Projekts.
den, muss hier schon mit sehr spitzem
Bleistift gerechnet werden, um die Entscheidung
dafür zu treffen, die Aufgaben
auszulagern. Generell sind die Preise
abhängig von der Anzahl der gebuchten
Dienstleistungen, der Zahl der Sendungen
und auch stark
vom Volumen der Waren
oder Sendungen,
da ja die Lagerkapazitäten
des Anbieters
refinanziert
werden müssen.
Während die Daten,
die für die
Übermittlung eines
Versandauftrags an einen
Dienstleister zu übermitteln sind,
recht einfach strukturiert sind, nimmt
die Komplexität der Informationen zu,
wenn auch Lagermengen zu ermitteln
und mit dem eigenen Shop zu koppeln
sind. Bei der Auswahl eines Fulfillment-
Dienstleisters spielt die Kompatibilität
der beteiligten IT-Programme eine wichtige
Rolle. Schon allein deshalb ist das
Aufsetzen eines solchen Projekts höchst
individuell. Fulfillment by Amazon nennt
sich das Spezialangebot des Versandriesen.
Händler lagern ihre Artikel dort ein
und können die komplette Prozesskette
in Anspruch nehmen. Die Waren werden
konfektioniert, verpackt und versendet.
Auf Wunsch kümmert sich Amazon auch
um den Kundenservice für die entsprechenden
Bestellungen.
In
erster Linie ist
das Unternehmen an
Waren interessiert, die
schnell umgeschlagen
werden. Deshalb
fallen besondere Gebühren
für alle eingelagerten
Artikel an,
die länger als 365
Tage im Lager von
Amazon verbleiben.
Besonders
einfach verläuft die
Integration, wenn Sie als Anbieter auch
den Marketplace von Amazon als Shop-
Plattform einsetzen. Die Anbindung externer
Systeme ist indes möglich.
Auch Powerseller können
Firmendienste nutzen
DHL bietet mit dem Produkt eParcel
ebenfalls ein Fulfillment-Angebot, das
alle Stationen eines Artikel von der
Bestellung bis hin zur eventuellen Retoure
umfasst. Die Serviceleistungen sind
www.internet-magazin.de
61

WEBBUSINESS | E-Commerce-Logistik
Logistiker in der Übersicht
DPD DHL GLS Hermes UPS
URL
https://www.dpd. www.dhl.de/de/paket/ https://gls-group.eu/ https://profipaket www.ups.com/
com/de/
geschaeftskunden.html DE/de/gls-versand service.hlg.de
Telefon für
Business-Kunden
(01805) 373 200 (01805) 345 22 55 (0180) 52 52 700 (01805) 008 008 (01805) 882 663
Mindestanzahl Pakete
für Status pro Jahr
500 300 500 300 Einzelversand möglich,
Spezialsoftware ab 10
Paketen pro Tag
Tarife Individuelle Tarife Individuell, abhängig
von Volumen
Besonderheiten
Verpackungen
Zustellmöglichkeiten
Bemerkungen
Spezielle Versandtaschen
für Dokumente
erhältlich. „Backbox“
für die Rückholung
von Geräten
8.000 Paketshops zur
Selbstabholung
Anbieter, der zunächst
im B2B-Umfeld tätig
war
DHL bietet Packsets an
Neben Fahrzeugzustellung
Anlieferung
in Packstationen und
allen Postfilialen.
Bundesweites Netz
Individuell, durch
Maut- oder Dieselgebühren
variabel
Kartonagen sind optional
in den Paketshops
erhältlich.
Rund 6.000 Paketshops
bundesweit oder
Abholung im Depot
Entscheidend ist allein
die Größe des Pakets.
Recht günstig
In Hermes Shops sind
optional Kartonagen
erhältlich.
Über 14.000 Paketshops
bundesweit
– Ähnelt DPD. Tochter der OTTO-
Gruppe
Hochpreisiger Dienst
Für Dokumente gibt es
Spezialtaschen, die der
Fahrer mitbringt.
Abholung nach mehrmaligem
Nichtantreffen
nur in regionalen
Depots möglich. Kein
dichtes Netz an Stützpunkten
Eher für den schnellen
Express-Versand
geeignet
modular aufgebaut. Über die Grundstufe
(Lagerung, Konfektionierung,
Versand, Retourenabwicklung) hinaus
besteht auch die Option, eigene Systeme
und Programme mit der Warenwirtschaft
des Unternehmens zu koppeln, um so
einen Überblick in Echtzeit über die Produkte
zu behalten.
Weitere Infos und Adressen
Hermes bietet ein Modulkonzept
Hermes Fulfillment ist das B2B-Angebot
der Hermes-Logistik-Gruppe. Das Unternehmen
stellt einzeln buchbare Module
zur Verfügung. Neben der klassischen
Distribution und Retouren können auch
das Zahlungsmanagement ausgelagert
oder die Dienste eines Call-Centers genutzt
werden. Hermes kann im Bereich
des Fulfillments natürlich auf die in der
Otto-Gruppe gesammelten Erfahrungen
und Leistungen zurückgreifen. Damit
eignet sich das Unternehmen auch für
Anbieter von Möbeln oder sogenannter
„weißer Ware“, die einen Aufstell- be-
» Actindo (www.actindo.de/) ist eine Software für die Warenwirtschaft, die Schnittstellen
zu vielen aktuellen Shopsystemen auf der einen Seite sowie den größten
Logistikern und Fulfillment-Anbietern auf der anderen Seite hat.
» Afterbuy (www.afterbuy.de) heißt eine Anwendung, die aufgrund ihrer Herkunft
eine starke Verzahnung mit Ebay ermöglicht. Optional können aber auch andere
Shops angebunden werden. Bei den Fulfillment-Partnern sind DHL und Hermes
integriert.
» PVS: Unter www.pvs-ff.com/services.php sind die Dienstleistungen und Möglichkeiten
des Unternehmens einzusehen.
ziehungsweise Aufbauservice benötigen
oder von mindestens zwei Personen
ausgeliefert werden müssen. Das Unternehmen
PVS zählt zum Mittelstand und
gehört keinem Konzern an. Es hat seinen
Schwerpunkt im Produktversand. Um diese
Kerndisziplin herum werden weitere
Leistungen angeboten. Textilien etwa, die
aus einer Rücksendung stammen, werden
optional wieder aufbereitet, damit
sie erneut in den Versand gehen können.
Schon ambitionierte Ebay-Powerseller
können schnell das Versandvolumen erreichen,
das zur Nutzung von Firmenkunden-Diensten
bei Logistikern berechtigt.
In Kombination mit einer passenden
Logistiksoftware wie zum Beispiel Afterbuy
von Ebay wird die Übermittlung der
Daten einfacher. Etwas aufwändiger ist
allerdings die Verbindung von eigenen
Programmen oder Shops mit den Diensten
eines Fulfillment-Anbieters.
Stephan Lamprecht
62 0513 internet magazin

Hostingprovider-Portrait: Mittwald | WEBBUSINESS
Die Profis für
Business-Kunden
Die Spezialität des niedersächsischen Webhosters
Mittwald sind optimierte Hosting-Pakete und Managed
Server für Online-Shops und Content-Management-Systeme.
Internet Magazin stellt den Business-
Webhoster vor.
Von der einfachen Basis-Website für
monatlich 1,99 Euro über Managed
vServer ab 29,99 Euro und dedizierte
Managed Server von 99 bis 379 Euro bis
hin zu individuell konfigurierten, gemanagten
Serverclustern deckt Mittwald die
ganze Palette des Business-Webhosting
ab. Die Preise verstehen sich übrigens
zuzüglich Mehrwertsteuer, denn Mittwald
richtet sich ausschließlich an Gewerbetreibende.
Besondere Spezialität
des niedersächsischen Hosting-Experten
ist die Optimierung der Hosting-Pakete
und Server auf die Anforderungen der
gängigsten Content-Management- und
Online-Shop-Systeme.Zusätzlich bietet
Mittwald zahlreiche gute Lösungen für
Webagenturen und hat als einer von
ganz wenigen Anbietern die sehr leis
-tungsstarke Open Source Enterprise-
Suchapplikation Solr im Programm. Für
Typo3 ist die Solr-Extension sogar schon
komplett vorkonfiguriert und dadurch
sofort einsetzbar. Ebenfalls ein Highlight
ist Varnish-Hosting zur Performance-
Optimierung. Der Varnish-Proxy, in der
günstigsten Ausführung für 39,99 Euro,
sichert bei großem Besucheransturm die
Erreichbarkeit des eigentlichen Webservers,
ohne dass der Server oder die Applikationen
verändert werden müssen.
Optimiertes CMS-Hosting
Bereits beim klassischen Webhosting ist
eine Spezialität von Mittwald die Optimierung
auf gängige Content-Management-
und E-Commerce-Systeme wie
Typo3, Joomla, Wordpress, Drupal, Magento,
Oxid eShop, xtCommerce, web-
Edition, MediaWiki, phpBB und einige
mehr. Auch bei der Grafikunterstützung
wird der Profikunde nichts vermissen:
ImageMagick, GDLib und Free Type sind
Standard. Ein spezieller Versionsmanager
macht die Aktualisierung von CMS-Systemen
sehr unkompliziert.
Die Profi-Webhosting-Tarife sind zusätzlich
zu den Features der Businesstarife
auf höhere Performance abgestimmt und
beinhalten garantierte Werte für CPU-
Leistung und RAM. In diesen Tarifen steht
dann auch ein tägliches Vollbackup der
letzten zwei bis vier Wochen zur Verfügung,
in den einfacheren Tarifen werden
die letzten ein bis sieben Tage gesichert.
Funktionen für Webagenturen
Wer Websites für seine Kunden erstellt,
findet bei Mittwald speziell für diesen
Zweck optimierte Hosting-Pakete,
die das Verwalten mehrerer Kunden-
Websites stark vereinfachen. Mit einem
Design-Manager tut sich die Agentur
leicht, Kundenoberflächen optisch anzupassen.
Der Kunde sieht – ganz im Sinne
der Kundenbindung – ausschließlich
die Corporate Identity der Agentur statt
eines Mittwald-Logos. Und ein Fakturierungsmodul
ermöglicht das Erstellen und
manuelle oder auch regelmäßig automatische
Versenden von Rechnungen aus
der Admin-Oberfläche heraus.
Service und Support
Der individuelle, schnelle und sachkundige
Support wird von Mittwald-Kunden
häufig als entscheidender Grund für die
Zufriedenheit mit dem Webhoster genannt.
Der reguläre technische Support
steht während der Woche von 9 bis 18
Uhr bereit, nachts und an Wochenenden
ist die Nothilfe aber rund um die
Uhr erreichbar und löst dringende Probleme
schnellstmöglich.
Franz Neumeier
www.internet-magazin.de 63

WEBBUSINESS | vServer unter Linux
vServer im Wandel
Der klassische vServer hat vielleicht bald ausgedient:
Vollvirtualisierung und dynamische Cloud-Funktionen
übernehmen das Marktsegment und die Grenzen verwischen
immer mehr. Internet Magazin stellt die
aktuellen vServer-Angebote von 13 Webhostern vor.
Sie waren der Renner, als sie neu
auf den Markt kamen. Sie brachten
zusammen, was zuvor nicht vereinbar
war: Flexibilität fast wie bei einem eigenständigen
Rootserver zu Preisen, die
man bis dahin nur von besseren Shared-
Hosting-Paketen kannte. Perfektionierte
und erschwingliche Technik bei der Vollvirtualisierung
sowie die zunehmende
Begeisterung für Cloud-Services verdrängen
die klassischen vServer nun aber zusehends.
Oft geschieht der Wandel ganz
unauffällig. Manche Hosting-Provider
ersetzen die bisherige vServer-Technik
durch Vollvirtualisierung, ohne groß darüber
zu reden. Oft ist das der Produktbeschreibung
nicht einmal anumerken.
Und am anderen Ende der Skala stehen
Hoster, die Managed Server oder Rootserver
anbieten, die in Wirklichkeit ebenfalls
vollvirtualisiert sind, ohne dass der
Kunde das auf den ersten Blick erkennt.
So kommen die beiden Produktklassen
– klassische vServer und physikalisch eigenständige,
dedizierte Server, einst strikt
getrennt – immer näher zusammen. Das
Gute daran: Für den Kunden spielt die
Technologie im Hintergrund in den meis
-ten Fällen kaum noch eine Rolle. vServer
werden von Website-Betreibern nicht nur
für technisch anspruchsvolle Websites
genutzt werden, sondern beispielsweise
auch als günstige Entwicklungsserver und
für viele andere Zwecke mehr.
Dynamischer in der Cloud
In diesem Umfeld wird der zweite, deutliche
Trend immer nützlicher: Dynamische
Cloud-Funktionen halten Einzug.
Je nach Anforderungen kann der Kunde
hier die Leistungswerte seines Hosting-
Pakets flexibel und kurzfristig anpassen
– zum Testen eines neues Designs reicht
vielleicht die Minimalkonfiguration für
64 0513 internet magazin

vServer unter Linux | WEBBUSINESS
wenig Geld. Soll aber ein aufwändiges
Shopsystem getestet werden, zahlt man
eben vorübergehend mehr für ein aufgestocktes
Paket, ohne dabei gleich einen
ganzen Server auf ein neues Paket oder
gar einen anderen Server umziehen zu
müssen. Zwar sind auch herkömmliche
vServer bei den meisten Anbietern in
Hinblick auf die CPU-Leistung schon
dynamisch: Eine gewisse Mindestleistung
wird meist garantiert, höhere
Leistung steht bei Bedarf automatisch
und kostenlos zur Verfügung. Dies aber
eben nur, wenn der physikalische Server
die- se zusätzliche Beanspruchung
auch gerade hergibt. Bei den Cloud-
Services bezahlt der Kunde dagegen
selektiv für mehr Leistung, die dann
auch garantiert bereitsteht.
Viele kleine Details
Auch wenn sich die vServer-Angebote
auf den ersten Blick ähneln und Cloud-
Features allzu verlockend sind, verstecken
sich ganz wesentliche Unterschiede
in den Details – vorausgesetzt man benötigt
bestimmte, nicht überall inkludierte
Funktionen. Bei der Auswahl des richtigen
Webhosters kommt es daher auch
die individuellen Anforderungen an. Die
Skriptsprache Python wird beispielsweise
nicht immer unterstützt, auch Server
Side Includes nicht. Cronjobs sind meist
inklusive, gelegentlich aber auch nur
gegen Aufpreis zu haben. Wer auf diese
Dinge angewiesen ist, sollte den Hoster
mit Bedacht auswählen, um später nicht
in der Sackgasse zu enden oder teuer dazubuchen
zu müssen.
vServer mit Cloud-Funktionen
und Cloud-Server
Bei den vServer-Paketen bieten drei
Webhoster Cloud-angereicherte vServer-Varianten
an: 1blu, Server4you und
Webtropia. Weitere Anbieter setzen auf
Produkte, die noch weiter über das klassische
vServer-Modell hinausgehen.
Dazu gehören der Dynamic Cloud
Server von 1&1, Stratos Server Cloud
und auch Domain Factorys Jiffy Box.
Da die Cloud-Features in der Übersichtstabelle
nicht abbildbar sind und
die Cloud-Server mangels direkter Vergleichbarkeit
gar nicht in der Tabelle
vorkommen, stellen wir diese Produkte
hier etwas ausführlicher vor.
1blu: vServer „Cloud-ready“
Bei 1blu wächst das Angebot an vServern
mit Cloud-Funktionen und die Pakete werden
immer leistungsfähiger. Die Serverleistung
ist flexibel anpassbar durch Zubuchung
sogenannter Tuneups: zusätzliche
CPU-Kerne, Arbeitsspeicher in 1-GByte-
Schritten sowie Festplatten in 50-GByte-
Schritten. Die Abrechnung erfolgt bei
1blu monatlich, dafür aber vergleichsweise
günstig: 1 GByte RAM, ein zusätzlicher
CPU-Kern oder 50 GByte Speicherplatz
kosten jeweils 4,90 Euro pro Monat und
sind beliebig kombinierbar. Maximal sind
pro vServer 8 CPU-Kerne, 24 GByte garantierter
RAM-Speicher (dynamisch bis
48 GByte) und bis zu 800 GByte Festplattenspeicher
zubuchbar. Zusätzliche gebuchte
Leistung steht laut 1blu innerhalb
weniger Stunden zur Verfügung.
Server4you: Server Cloud
Mit einem „Booster” genannten Regler
schrauben Server4you-Kunden
die Leistung ihres vServers in die
Höhe. Abgerechnet wird die zusätzliche
Leistung tageweise. Erhältlich
sind hier zusätzliche CPU-Leis -tung
und weiterer GByte RAM-Speicher.
Die Kosten für zusätzliche Leistung
aus der Cloud betragen bei Server4you
20 Cent pro Mbyte RAM-Speicher
pro Tag und 20 Cent pro 2 MHz-CPU-
Leistung je Tag, an dem der Kunde
die Extrapower in Anspruch nimmt.
Cloud-Features bei Webtropia
Zusätzlichen RAM-Arbeitsspeicher, CPU-
Leistung oder Festplattenspeicher buchen
Webtropia-Kunden wahlweise auf Tagesoder
Monatsbasis. Heruntergerechnet ist
der Monatstarif dabei deutlich günstiger
als der Preis für einzelne Tage. Trotzdem:
So bleibt der Kunde flexibel und kann
sich zusätzliche Leistung auch mal nur
für ein oder zwei
Tage einkaufen.
Die Kosten für zusätzliche
Leistung
ergeben sich bei
Webtropia aus
einer Tabelle auf
der Website des
Hosters, da der
Preis im Verhältnis
zur Leistung nicht
linear steigt. Die
Preise bewegen
Klassisches
vServer-Konzept:
volle Kontrolle zu
günstigen Preisen
bei Euserv.
www.internet-magazin.de 65

WEBBUSINESS | vServer unter Linux
vServer auf Linux-Basis
Anbieter 1&1 1blu Alfahosting.de Euserv Internet Evanzo
Website www.1und1.de www.1blu.de www.alfahosting.de www.euserv.de www.evanzo.de
Produkte
KONDITIONEN
Virtual-Server L
Virtual-Server XL
Virtual -Server XXL
1blu-vServer LP
1blu-vServer 2P
1blu-vServer 4P
1blu-vServer 6P
1blu-vServer 8P
Preis pro Monat in Euro 9,99/19,99/29,99 7,90/12,90/16,90/
24,90/49
vServer M
vServer L
vServer XL
vServer XXL
vServer vM
vServer vL
vServer XL
vServer Pro M
vServer Pro L
vServer Pro XL
10,99/15,99/28,99/38,99 7,90/11,90/19,90/17,90/
27,90/37,90
Evanzo-vServer
9,90
Einrichtungsgebühr in Euro / / 0 oder 9,90 19,99 (3 Monate Laufzeit)
oder 9,99
Vertragslaufzeit in Monaten 1 1 oder 12 3, 6 oder 12 3 oder 12 3
aktuelle Rabatte wechselnde Rabatte
Serverstandort Karlsruhe, Baden-Airpark Frankfurt Düsseldorf Jena Frankfurt/M.
Backbone in GBit/s über 280 keine Angabe 75 350 keine Angabe
TECHNISCHE AUSSTATTUNG
garantierter Arbeitsspeicher
in MByte
dynamischer Arbeitsspeicher
in MByte
1024/2048/4096 2048/3072/4096/
8192/24576
2048/4096/8192 4096/6144/8192/
16384/49152
reservierte CPU-Leistung 1/2/4 Cores bis zu 1/2/3/4/8 CPU-
Kerne verfügbar
2048/4096/8192/16384 512/1024/2048/1024/
2048/4096
4096/8192/16384/32768 1024/1536/2560/2048/
4096/8192
/ / / 1 CPU mit bis zu 1 GHz,
Pro: 2x1,5 GHz
Bandbreitengarantie in MBit/s 100/100/100 100/100/100/100/100/100
garantierte Netzverfügbarkeit
in Prozent
garantierte Hardware-
Verfügbarkeit in Prozent
Überwachung der Serverfunktionsfähigkeit
99,99 99 99,8 99 99
99,99 99 99,8 99 99
/ / ***** ▲/▲/▲/▲/▲ (Hostsystem)
▲/▲/▲/▲ ▲/▲/▲/▲/▲/▲ ▲
Speicherplatz in GByte 50/100/200 80/100/200/300/800 60/120/350/600 30/50/100/50/100/200 30
1024
4096
▲ = ja = nein = optional ∞ = unbegrenzt
automatisches Backup / / (redundantes
Storage, Desaster Backup)
separater FTP-Backup-Speicherplatz
für eigene Backups
/ / / / ▲/▲/▲/▲ / / / / /
/ / ▲/▲/▲/▲/▲ ▲/▲/▲/▲ ▲
Serverneustart auf Knopfdruck ▲/▲/▲ ▲/▲/▲/▲/▲ ▲/▲/▲/▲ ▲/▲/▲/▲/▲/▲ ▲
automatische Neuinstallation ▲/▲/▲ ▲/▲/▲/▲/▲ ▲/▲/▲/▲ ▲/▲/▲/▲/▲/▲ ▲
auf Knopfdruck
FEATURES
Inklusivdomains 1/1/1 1/1/2/3/4 / / / / / / / / 1
DNS-Verwaltung ▲/▲/▲ ▲/▲/▲/▲/▲ ▲/▲/▲/▲ / / / / / ▲
IP-Adressen 1/1/1 2/3/4/5/6 1/1/1/1 1/1/1/4/4/4 1
enthaltenes Transfervolumen in
GByte/Monat
zusätzliches Transfervolumen
in Euro/GByte
∞/∞/∞ ∞/∞/∞/∞/∞ ∞/∞/∞/∞ 2048/4096/6144/10240/
10240/10240 ******
kostenlos kostenlos* kostenlos 6,50 pro TByte kostenlos*
* bei 1blu-vServer A und Evanzo: individuelle Vereinbarung
mit dem Kunden bei wiederholter Überschreitung
2500
** Preise bei Vertragslaufzeit 12 Monate
*** Drosselung auf 10 Mbit/s ab 1 TByte; 100 Mbit/s für 9,99 Euro pro TByte
66 0513 internet magazin

vServer unter Linux | WEBBUSINESS
Hetzner Host Europe http.net Internet internet24 Server4you Strato
www.hetzner.de www.hosteurope.de www.http.net www.internet24.de www.server4you.de www.strato-pro.de
vServer VQ7
vServer VQ12
vServer VQ19
Virtual Server Linux L 6.0
Virtual Server Linux XL 6.0
Virtual Server Linux XXL 6.0
Virtual Server Linux MAX 6.0
VServer.START
VServer.PLUS
VServer.PROFI
VServer.PREMIUM
BIZ 3.0 VS L
BIZ 3.0 VS XL
vServer PRO X4
vServer PLUS X4
vServer PREMIUM X4
vServer PLATINUM X4
Virtual Server Linux Level 1
Virtual Server Linux Level 2
Virtual Server Linux Level 3
Virtual Server Linux Level 4
7,90/12,90/19,90 12,99/16,99/29,99/39,99 3,00/6,00/12,00/24,00 25/49 8,85/18,85/28,85/38,85 7,90/14,90/19,90/29,90
0/0/0 0 9,99/ / / 59 0
0/0/0 1 1/1/1/1 3 1, 12 oder 24 1
1 Monat kostenlos erste 6 Monate kostenlos,
bei 12 und 24 Monaten
Mindestlaufzeit
Falkenstein Köln Berlin Dresden Straßburg (F), St. Louis (USA) Berlin
200 40 2 22 550 50
512/1024/2048 2048/4096/8192/16384 512/768/1024/2048 1024/2048 1024/3072/4096/5120 512/2048/3072/4096
/ / 4096/8192/16384/32768 / / / / 2048/6144/8192/10240 2048/4096/6144/8192
Single-core / /2x1,5 GHz/4x1,5
GHz
1 GHz/1,5 GHz/2 GHz/3
GHz
100/100/100/100 100/100/100/100 100/100
/ 3 GHz/4 GHz/5 GHz/10
GHz
1 CPU/1 CPU/2 CPU/3 CPU
99% 99,999 99,99 99,99 99 99
99,95 99,95 99,5 99 99
▲/▲/▲ ▲/▲/▲/▲ ▲/▲/▲/▲ ▲/▲ / / / ▲/▲/▲/▲
20/40/80 50/125/250/500 15/25/40/60 25/50 25/50/75/100 25/100/150/200
/ / ▲/▲/▲/▲ / / / ▲/▲ ▲/▲/▲/▲ ▲/▲/▲/▲
/ / / / / / / / ▲/▲ / / / / / /
▲/▲/▲ ▲/▲/▲/▲ ▲/▲/▲/▲ ▲/▲ ▲/▲/▲/▲ ▲/▲/▲/▲
▲/▲/▲ ▲/▲/▲/▲ ▲/▲/▲/▲ / ▲/▲/▲/▲ ▲/▲/▲/▲
/ / / / / über Partnersystem / 1/1/1/1 0/0/0/0
▲/▲/▲ ▲/▲/▲/▲ über Partnersystem / ▲/▲/▲/▲ ▲/▲/▲/▲
1/1/1 1/1/1/1 (weitere ) 1/1/1/1 (weitere gratis) 1/1 1/1/1/1 2/2/2/2
1024/2048/4096 ****** ∞/∞/∞/∞ ∞/∞/∞/∞ 500/1000 5000/6000/7000/8000 ∞/unbegrenzt/∞/∞
6,90 pro TByte kostenlos kostenlos 0,49 0,19 kostenlos
**** InterNetX macht keine Angaben zu den Ressourcen. Die Hostsysteme
seien so groß dimensioniert, dass es zu keinen Engpässen komme.
***** Netzwerkmonitoring durch den Kunden via Mobile Apps
****** bei Überschreitung Drosselung auf 10 Mbit/s oder Zukauf von Traffic
www.internet-magazin.de 67

WEBBUSINESS | vServer unter Linux
sich aber etwa in folgendem Rahmen: 2
MHz zusätzliche CPU-Power kosten 50
Cent pro Tag oder 5 Euro pro Monat, ein
zusätzliches GByte RAM-Arbeitsspeicher
ist für täglich 25 Cent oder monatlich
2,50 Euro zu haben und 50 GByte zusätzlicher
Festplattenspeicher werden mit 25
Cent pro Tag oder 2,50 Euro pro Monat
abgerechnet. Maximal sind 8 MHz CPU-
Leistung, 8 GByte RAM-Speicher und
300 GByte Festplattenplatz möglich.
Neuestes Proukt
aus der Welt der
Cloud-Angebote:
Die Strato Server
Cloud.
Dynamic Cloud Server von 1&1
Mit dem Dynamic Cloud Server
(hosting.1und1.de/cloud-server) setzt
1&1 auf stundengenaue Abrechnung.
Hier lassen sich zusätzliche Leistungseinheiten
bei CPU, Arbeitsspeicher und
Festplattenplatz also auch sehr kurzzeitig
und damit extrem günstig einsetzen.
Zusätzliche Leistungseinheiten kosten
bei 1&1 den minimal möglichen Betrag
von 1 Cent pro Stunde – pro Tag also 24
Cent, pro Monat rund 7 Euro. Für einen
Cent pro Stunde gibt es dementsprechend
einen zusätzlichen CPU-Kern,
ein GByte zusätzlichen Arbeitsspeicher
oder 100 GByte Festplattenspeicher. Abgerechnet
wird je angefangene Stunde
und der Kunde nimmt die Änderungen
über ein Browser-Interface selbst vor.
Insgesamt lässt sich ein Dynamic Cloud
Server auf bis zu 6 CPU-Kerne, 24 GByte
RAM und 800 GByte Festplattenplatz
hochschrauben – was dann allerdings im
Gesamtpaket knapp 300 Euro im Monat
kosten, aber auch satt Leistung bedeuten
würde. Für die genaue Zusammenstellung
der Leistungsfaktoren hat 1&1 außerdem
vier Standardkonfigurationen
vorgegeben, die der Kunde direkt auswählen
kann: Datenbank-, Web-, Application-
oder Game-Server.
Neu hinzugekommen ist die Snapshot-
Funktion, die mit Hilfe von Wiederherstellungspunkten
den Server sichert.
Nettes, mitunter sehr nützliches Feature
am Rande: Der Server lässt sich mit einer
iPhone- oder Android-App per Smartphone
managen und überwachen.
Domain Factory: Jiffy Box
Jiffy Box von Domain Factory (www.
jiffybox.de) geht komplett von der Idee
eines „Hosting-Pakets“ weg und stellt
quasi sämtliche Leistungen on-demand
mit sekundengenauer Abrechnung der
tatsächlich genutzten Ressourcen bereit.
Innerhalt eines Accounts kann der Kunde
daher bis zu 20 einzelne Jiffy-Boxen als
virtuelle Server anlegen, beliebig kopieren,
einfrieren oder reaktivieren.
Mit verschiedenen Leveln werden
Grundkonfigurationen vorgegeben, die
auf Level 1 mit 1 GByte RAM, 50 GByte
Festplatte und 2 CPU-Kernen für 2 Cent
pro Nutzungsstunde (maximal 14,88
Euro monatlich) beginnen und sich bis
16 GByte RAM, 600 GByte Festplatte
und 4 CPU-Kerne in Level 5 steigern
(25 Cent pro Stunde). Interessant ist das
Konzept des Einfrierens einer Jiffy-Box:
Der Server kann so komplett mit allen
Daten konfiguriert erhalten und jederzeit
reaktiviert bleiben, kostet aber in
der eingefrorenen Zeit je nach Level nur
zwischen 0,5 und 4 Cent pro Stunde,
pro Monat also nur ein paar Euro.
Strato: Server-Cloud
Das neueste Produkt in dieser Kategorie
ist die Server-Cloud von Strato, die dem
Konzept der Jiffy Box in vielem ähnelt.
Die Abrechnung erfolgt hier stundenweise,
dafür aber in einem sehr eingängigen
System nach Leistungseinheiten, die jeweils
immer ein „Credit“ kosten, wobei
ein Credit grundsätzlich einem Cent entspricht
– beispielsweise 1 GByte RAM
oder 100 GByte Festplatte pro Stunde.
Die Minimalkonfiguration mit 20 GByte
Festplatte, 0,5 GByte RAM und einer
CPU kostet monatlich 10 Euro. Wer pfiffig
vorausplant, kauft monatliche Credits
im Paket mit deutlichem Rabatt – beim
größten Paket kostet ein Credit dann nur
noch 0,33 Cent. Per Klonen lassen sich
virtuelle Maschinen in der Server-Cloud
per Mausklick vervielfältigen, was vor
allem für Testumgebungen – also selbst
für einen schnellen und unkomplizierten
Test eines potenziell kritischen Plug-in-
Updates von Wordpress – sowie für standardisierte
Kundenprojekte sehr viel Zeit
spart. Zudem lassen sich vorhandene
virtuelle Maschinen unter Beibehaltung
sämtlicher Daten und Konfigurationen
deaktivieren, sodass während der deaktivierten
Zeit lediglich die Kosten für den
belegten Festplattenplatz anfallen.
Die maximal konfigurierbaren
Leistungswerte der Strato-Server-Cloud
liegen bei 32 GByte RAM, 1 TByte Festplatte,
8 CPU-Kernen und bis zu 100
virtuellen Maschinen, jeweils mit eigener
externer IP-Adresse.
Franz Neumeier
68 0513 internet magazin

Testen Sie jetzt:
3 × PC Magazin für nur 14,99 € + ein Geschenk!
TOP-GESCHENK
Brennenstuhl Funkschalter-Set
RCS 1000N Comfort
Sichere und komfortable Lösung zum
Schalten elektrischer Geräte. Ein- und
Ausschalten per Funk (einzeln oder gesammelt).
Schaltleistung max. 1.000 Watt/
Empfänger. Inkl. 12 V Batterie (Typ A27) für
den Handsender. Reichweite bis zu 25 m.
32 GB USB-Stick
USB-Schnittstelle 2.0 (abwärtskompatibel).
Kapazität: 32 GB. Für alle Betriebssysteme.
Beliebig oft beschreib- und löschbar.
Blu-ray Skyfall
Der erfolgreichste Bond aller Zeiten.
Großartiger Cast (Daniel Craig, Javier
Bardem, Judi Dench und Ralph Fiennes) &
oscargekrönter Regisseur (Sam Mendes).
Mehr als7Millionen Kinobesucher in
Deutschland.
Diese und weitere tolle Angebote finden Sie unter:
www.pcmagazin.de/angebot
Vorteile im Überblick:
Preisvorteil gegenüber Einzelkauf
Keine Zustellgebühr
1 Heft gratis vorab bei Bankeinzug
Ein Geschenk Ihrer Wahl
als Dankeschön
Gleich bestellen:
Online:
www.pcmagazin.de/angebot
Per Telefon:
07816394548
Per Fax:
07818461 91
Per Post/Coupon:
PC Magazin Kundenservice
Postfach 180, 77649 Offenburg
Impressum: PC Magazin erscheint im Verlag
WEKA MEDIA PUBLISHING, Richard-Reitzner-Allee 2, 85540 Haar,
Handelsregister München, HRB 154289
Ja, ich teste PC Magazin für zunächst
3 Ausgaben zum Vorteilspreis!
Als Dankeschön wähle ich folgendes Geschenk:
(Bitte ankreuzen)
Brennenstuhl Funkschalter-Set RCS 1000N Comfort (K665)
32 GB USB-Stick (K958)
Blu-ray Skyfall (K881)
Ich wähle folgende Variante:
(Bitte ankreuzen)
PC Magazin DVD: 3 Ausgaben mit jeweils 1 Heft-Themen-DVD
für z. Zt. 14,99 €, Österreich 19,99 €, Schweiz 29,99 SFR
PC Magazin DVD XXL: 3 Ausgaben mit jeweils 1 Heft-Themen-
DVD für z. Zt. 14,99 €, Österreich 19,99 €, Schweiz 29,99 SFR–
bei Verlängerung zum Jahresabo erhalten Sie einmal jährlich
eine zusätzliche DVD mit den gesammelten Inhalten der letzten
2 Jahre.
PC Magazin Super Premium: 3 Ausgaben mit jeweils 3 DVDs
inkl. Heft-Themen-DVD, Spielfilm-DVD und Spezial-Themen-
DVD (z.B. zu den Themen Foto, Video oder Office) für z. Zt.
19,99 €, Österreich 24,99 €, Schweiz 39,99 SFR
Wenn ich PC Magazin nach 3 Ausgaben weiter beziehen möchte, brauche
ich nichts weiter zu tun. Ich erhalte PC Magazin dann zum regulären Abopreis
(12 Ausgaben PC Magazin DVD für z. Zt. 61,90 €, Österreich 78,90 €,
Schweiz 123,90 SFR, 12Ausgaben PC Magazin DVD XXL für z.Zt.70,90 €,
Österreich 87,90 €, Schweiz 141,90 SFR, 12 Ausgaben PC Magazin Super
Premium für z. Zt. 99,90 €, Österreich 119,90 €, Schweiz 199,90 SFR).
Das Jahresabo kann ich nach Ablauf des ersten Bezugsjahres jederzeit
wieder kündigen. Wenn ich PC Magazin nicht weiter beziehen möchte,
genügt ein kurzes Schreiben bis 3Wochen vorAblauf des Miniabos (Datum
Poststempel) an den PC Magazin Kundenservice, Postfach 180, 77649
Offenburg. Dieses Angebot gilt nur in Deutschland, Österreich, Schweiz.
Ihr Geschenk erhalten Sie nach Zahlungseingang.
Name
Straße, Nr.
PLZ
E-Mail
Geldinstitut
BLZ
Datum, Unterschrift
Ort
Vorname
Geburtsdatum
Ich bin damit einverstanden – jederzeit widerruflich –, dass mich der
Verlag WEKA MEDIA PUBLISHING künftig per E-Mail und telefonisch
über interessante Vorteilsangebote informiert.
Zahlungsweise:
per Rechnung
ich bezahle bequem und bargeldlos durch Bankeinzug
und erhalte zusätzlich ein kostenloses Heft.
Nur in Deutschland möglich.
Konto-Nr.
1 HEFT GRATIS!
Aktionsnummer: WK30M9M

TIPPS & TRICKS | Online-Recht
Urheberrecht
in der Wolke
Heutzutage werden immer mehr Dateien oder auch
Software in der Datenwolke bereitgestellt und nicht
mehr auf Nutzerrechnern lokal installiert. Rein rechtlich
betrachtet ist das jedoch durchaus problematisch.
Musik, E-Books, Filme, Software –
es gibt eigentlich keinen digitalen
Inhalt, den man nicht auch zentral mittels
Cloud Computing vorhalten könnte.
Zudem lässt sich schnell, einfach und
preiswert fast unbegrenzter Serverspeicherplatz
bei den unterschiedlichsten
Anbietern erwerben. So praktisch und
kosteneffizient Cloud-Dienstleistungen
auch sein mögen, sie bringen unweigerlich
diverse juristische Probleme mit
sich, die nicht außer Acht gelassen werden
dürfen.
Grundlagen
Cloud Computing umschreibt grundsätzlich
den Ansatz, abstrahierte IT-Infrastrukturen
wie etwa Rechenkapazität, Datenspeicher,
Netzwerkkapazitäten oder
auch Software dynamisch an den Bedarf
angepasst über ein Netzwerk zur Verfügung
zu stellen. Dem Nutzer erscheint
die zur Verfügung gestellte abstrahierte
IT-Infrastruktur fern und undurchsichtig,
Der Autor
Der Autor Michael
Rohrlich ist Rechtsanwalt
und unter
anderem auf das
Recht der neuen Medien
spezialisiert.
www.ra-rohrlich.de
eben wie in einer „Wolke“ verhüllt.
Bei der Cloud gilt es verschiedene
Liefer- und Servicemodelle zu unterscheiden.
Im Wesentlichen existieren
drei Liefermodelle, die je nach Ausgestaltung
unterschiedliche technische
Grundlagen aufweisen:
» „Plattform as a Service“ (PaaS): Derartige
Cloud-Dienste bieten Zugang zu
Programmierungs- oder Laufzeitumgebungen
mit flexiblen, dynamisch
anpassbaren Rechen- und Datenkapazitäten.
Mit Hilfe von PaaS-Dienstleistungen
können Nutzer eigene Anwendungen
entwickeln oder innerhalb
einer vom Dienstanbieter bereitgestellten
Softwareumgebung ausführen
lassen. Beispiele sind Microsoft Azure
oder Salesforce.
» „Infrastructure as a Service“ (IaaS):
Cloud-Dienste mit dieser Struktur
bieten Zugang zu virtualisierten
Hardwareressourcen, also Rechnern,
Netzwerken und Speichern. Hierbei
können die Nutzer frei ihre eigenen
virtuellen Computer-Cluster gestalten
und sind für Auswahl, Installation und
Betrieb ihrer Software selbst verantwortlich.
Beispiele sind Amazon Simple
Storage Service, Dropbox, Wuala,
Teamdrive und andere.
» „Software as a Service“ (SaaS): Solche
Cloud-Dienste bieten Zugang zu Soft-
waresammlungen oder Anwendungs-
programmen. Es wird in aller Regel
eine spezielle Auswahle von ware angeboten, daher auch
Softdie
alternative Bezeichnung
als „Software on demand“.
Beispiele sind Apple iWorks,
Google Docs, Microsoft Office
365 oder auch Adobe Photoshop Express
Online-Apps.
Unabhängig von den unterschiedlichen
Cloud-Typen sind unterschiedliche Liefermodelle
zu differenzieren:
» „Public Cloud“: Hierbei handelt es
sich um eine öffentliche Cloud, welche
von beliebigen Nutzern in Anspruch
genommen werden kann. Auf die Form
und den physischen Ort der Datenspeicherung
hat der Cloud-Nutzer in aller
Regel keinen Einfluss.
» „Private Cloud“: Bei den privaten Datenwolken
steht im Vordergrund, dass
sich sowohl Anbieter als auch Nutzer
im selben Unternehmen befinden,
wodurch sämtliche Probleme aus dem
Bereich Datensicherheit mehr oder
minder hinfällig werden.
» „Hybrid Cloud“: Diese Art kann
als Mischform angesehen werden.
Hierbei betreibt ein Unternehmen
eine eigene private Cloud und nutzt
zusätzlich, etwa bei Lastspitzen,
eine öffentliche Cloud.
» „Community Cloud“: Die gemeinschaftliche
Cloud bietet Cloud-Dienstleistungen
wie die öffentliche Cloud
auch. Allerdings ist sie auf einen
kleineren Nutzerkreis ausgerichtet,
der sich die Kosten teilt, etwa mehrere
städtische Behörden, Universitäten,
Unternehmen mit ähnlichen Interessen
oder Forschungsgemeinschaften.
Urheberrecht
Unabhängig davon, welches Lieferoder
Servicemodell genutzt wird, muss
bei den in der Cloud zu speichernden
70 0513 internet magazin

Online-Recht | TIPPS & TRICKS
Checkliste zum Datenschutz beim Cloud Computing
Die nachfolgende Checkliste soll als praktische Orientierungshilfe
dienen. Um ein möglichst hohes Datenschutzniveau zu gewährleisten,
wurden hierbei die Mindestanforderungen an ein
datenschutzkonformes Cloud Computing nach dem Maßstab des
deutschen Datenschutzrechts zu Grunde gelegt:
» Serverstandort: Deutschland, EU oder ein Land mit „angemessenem
Datenschutzniveau“ beziehungsweise USA bei
vorhandener Registrierung gemäß Safe-Harbor-Abkommen;
auf keinen Fall Nutzung von Cloud-Anbietern mit Serverstandorten
in unsicheren Drittstaaten (wie China und anderen).
» Verschlüsselung: Falls eine Verschlüsselung der Daten vor
Upload in die Cloud möglich ist, sollte diese Technik genutzt
werden, sofern sie dem aktuellen Stand der Technik entspricht.
» Anonymisierung: Unter Umständen ist es sinnvoll, falls möglich,
die Daten anonymisiert in der Cloud zu speichern.
» Vertragliche Grundlagen: Mit dem Cloud-Dienstleister sollte
ein schriftlicher Vertrag zur Auftragsdatenverarbeitung geschlossen
werden, gegebenenfalls ist zusätzlich die Vereinbarung
der EU-Standardvertragsklauseln notwendig.
» Datenarten: Die Speicherung von personenbezogenen Daten
besonderer Art, unter anderem Angaben über rassische und
ethnische Herkunft, politische Meinungen und so weiter,
sollte vermieden werden.
» Datensicherheit: Sofern möglich, sollte ein Cloud-Rechenzentrum
gewählt werden, welches nach internationalen Sicherheitsnormen
zertifiziert ist.
» Transparenz: Je transparenter ein Cloud-Anbieter offenlegt,
an welchen Serverstandorten er die Kundendaten abspeichert,
desto besser.
» Trennungsprinzip: Es sollte darauf geachtet werden, dass die
Daten der einzelnen Kunden des betreffenden Cloud-Dienstleisters
eindeutig voneinander getrennt werden.
» Zugriff: Der Cloud-Anbieter selbst sollte keine Zugriffsmöglichkeit
auf die Daten seiner Kunden haben.
» Prüfungsmöglichkeit: Von Seiten des Cloud-Anbieters sollten
verschiedene Monitoring- beziehungsweise Reporting-Systeme
bereitgestellt werden.
» Steuerdaten: Bei der Speicherung von Steuerdaten sollte
vorab die Bewilligung der zuständigen Finanzbehörde eingeholt
werden.
Inhalten stets das Urheberrecht beachtet
werden. Handelt es sich um selbst
geschaffene Werke, also eigene Texte,
selbst aufgenommene Fotos, selbst komponierte
Musik, so gibt es mit dem Urheberrecht
jedenfalls keine Probleme.
Denn als Urheber darf man mit seinen
eigenen Werken prinzipiell das
machen, was man für
richtig hält und was
nicht gegen andere
Gesetze verstößt
wie etwa gegen das
Strafrecht oder das Recht am eigenen
Bild einer anderen Person.
Bei fremden Werken sieht die Lage natürlich
anders aus. Als Faustregel ist zu
beachten: Werke fremder Urheber dürfen
nur dann genutzt und in einen Cloud-
Speicher abgelegt werden, wenn entweder
eine entsprechende Einwilligung des
Urhebers vorliegt oder ein Gesetz dies
gestattet. Urheber haben generell die
Möglichkeit, Dritten die Nutzung ihrer
Werke zu ermöglichen. Sie können dabei
frei entscheiden, welche Rechte und
Pflichten dabei vereinbart werden sollen.
Links zum Thema
Weitergehende Informationen zum Thema
E-Commerce
http://www.rechtssicher.info/
Homepage des Autors
http://www.ra-rohrlich.de
Blog des Autors zum Thema Onlinerecht
für Webmaster
http://www.webmaster-onlinerecht.de
Blog des Autors zum Thema Onlinerechte
von Verbrauchern
http://www.verbraucherrechteonline.de/
Es kann jedoch nicht immer davon ausgegangen
werden, dass die Einräumung
von Nutzungsrechten auch automatisch
das Recht zum Ablegen von Kopien in
Cloud-Speicher umfasst. Vielmehr kommt
es hier auf die individuelle Vereinbarung
im konkreten Einzelfall an. Umgekehrt ist
es oft fraglich, ob etwa die Nutzer von
Musik-Clouds das Recht haben, Kopien
der online verfügbaren Musikwerke herzustellen,
um sie dann offline auf dem
eigenen MP3-Player anzuhören. Auch
hierbei ist ein Blick in die Klauseln der
jeweiligen Nutzungsbestimmungen sinnvoll
und notwendig. Erfolgt beispielsweise
der Upload eines legal erworbenen
Musikalbums in einen Cloud-Speicher,
so kann dies prinzipiell als Privatkopie
und damit als zulässige Vervielfältigung
angesehen werden. Voraussetzung ist
hierbei natürlich, dass die digitale Kopie
tatsächlich nur zu rein privaten Zwecken,
also nicht für die öffentliche Vorführung
genutzt wird. Zwar darf die eigene Musik
im Wolkenspeicher auch mit dem einen
oder anderen Freund geteilt werden,
bei mehr als sieben Teilhabenden wird
jedoch die Grenze der Privatheit überschritten.
Außerdem darf die Kopie nicht
von einer kopiergeschützten Vorlage, einer
offensichtlich rechtswidrig hergestellten
oder öffentlich zugänglich gemachten
Vorlage erstellt werden. Im Hinblick
auf die genannten Voraussetzungen gibt
es zum Teil verschiedene Rechtsauffassungen.
Wichtig für Cloud-Nutzer ist das
eigene Bauchgefühl, denn auch als juristischer
Laie hat man zumeist ein gutes
Gespür dafür, was noch erlaubt und was
dagegen verboten ist.
Rechtsanwalt Michael Rohrlich
www.internet-magazin.de 71

TIPPS & TRICKS | MySQL, Python, PHP, AWS
TIPPS & TRICKS
Auf MariaDB umsatteln: So erfüllen
Sie die Voraussetzungen für eine
problemlose Migration
Der Exodus von MySQL-Entwicklern lässt nicht nach und beginnt, die Zukunft der
beliebten SQL-Datenbank in Frage zu stellen.
Die Mitgründer der MySQL-Bewegung, Ulf Michael Widenius,
David Axmark und Allan Larsson, haben MySQL
inzwischen den Rücken gekehrt und befassen sich nun mit
dem Ableger von MySQL,
Maria-DB. Ausschlaggebend
war hierbei nicht nur
für Widenius die schwere
Hand Oracles bei der Fortführung
von MySQL. Sergei
Golubchik, der übrigens
in Deutschland ansässige
Vizepräsident der DBMS-
Architektur bei MariaDB, bemängel wie auch die meisten
anderen MySQL-Entwickler die Tatsache, dass sich MySQL
unter der neuen Leitung von Oracle in ein intransparentes
Closed-Source-Projekt verwandelt, bei dem selbst die Bugs
nun praktisch geheim sind. Oracle nehme die Sicherheit von
MySQL zunehmend auf die leichte Schulter.
„Oracles Ansatz zur Sicherheit von MySQL bereitet mir zunehmend
Sorgen“, so Sergei Golubchik,
Vizepräsident der DBMS-Architektur
bei MariaDB und zuvor verantwortlich
für die Sicherheit von MySQL.
Wer MySQL im Zuge einer sorgsam
vorbereiteten Migration durch Maria-DB
austauschen möchte, sollte
Das offizielle Logo von beginnen, solange es noch geht.
Oracle MySQL.
Oracle könnte der problemlosen Migration
von MySQL zu MariaDB beispielsweise durch interne
Änderungen mehr oder weniger unbeabsichtigt einen Riegel
vorschieben. Innerhalb derselben Basisversion wie etwa 5.1
oder 5.6 können Sie derzeit
MySQL noch ganz einfach
gegen MariaDB austauschen,
indem Sie MySQL
deinstallieren und durch
eine neue Installation ihres
Nachfolgers ersetzen. Praktischerweise
ist es hierbei
zum Glück nicht nötig, erst
einen Dump zu erstellen, um die Datenbanken wiederherzustellen.
Im Normalfall sollte alles problemlos verlaufen.
Dennoch sollten Sie wie bei jedem Upgrade zuvor ein
komplettes Backup erstellen, um für alle Eventualitäten
gewappnet zu sein.
Wer zu seiner MySQL-Version eine passende MariaDB-Version
benötigt, wird unter der folgenden Adresse schnell fündig:
http://blog.mariadb.org/mariadb-5-5-29-5-3-12-5-2-14-5-
1-67-now-available/
Hier gibt es zusätzlich zu den Release Notes und Change Logs
praktischerweise auch die Download-Links zu MariaDB in den
älteren Versionen: 5.1.67, 5.2.14, 5.3.12 und 5.5.29.
Wer zudem auch die passenden Quelltexte, kompilierte Binärversionen
und betriebssystemspezifische Packages benötigt,
wird unter der folgenden Adresse fündig:
https://downloads.mariadb.org/
72 0513 internet magazin

MySQL, Python, PHP, AWS | TIPPS & TRICKS
Python
Leistung einer Python-Applikation
unter die Lupe nehmen
Um die Leistung einer Webapplikation in Python zu verbessern,
hilft es, diese in Echtzeit zu überwachen. Das geschieht zum
Beispiel mit dem Dienst New Relic. Unter der Adresse
http://newrelic.com/lp/python-monitoring
können Sie Ihre Python-App nach einer kostenfreien Anmeldung
aufstellen und Messwerte sammeln. Der Dienst
erlaubt es Ihnen, dank der aufschlussreichen Daten die
inneren Werte Ihrer App einschließlich SQL/NoSQL-Performance
unter die Lupe zu nehmen, um potenziellen
Schwachstellen auf die Spur zu kommen und das Optimierungspotenzial
besser auszuloten.
Außer Python und den Python-Frameworks Django, Web2PY,
Bottle, CherryPie, Flash und Pylons unterstützt der Dienst auch
die Sprachen Java, PHP, Ruby, das .NET-Framework und die
Node.js-Bibliothek.
Die Konfiguration erfordert die Einrichtung eines Python-
Agenten mittels
pip install newrelic
Mit dem Befehl
newrelic-admin generate-config LIZENZSCHLUESSEL newrelic.ini
erzeugen Sie anschließend die Konfigurationsdatei newrelic.
ini, wobei die Zeichenkette „LIZENZSCHLUESSEL“ durch den
echten API-Schlüssel aus Ihrem Account ersetzt werden muss.
Außerdem gilt es, die Umgebungsvariable ‚NEW_RELIC_CON-
FIG_FILE‘ wie folgt zu setzen:
NEW_RELIC_CONFIG_FILE=newrelic.ini newrelic-admin
run-program python manage.py run_gunicorn
Damit der Agent geladen wird, muss zudem Ihr selbstverständlich
WSGI-konformer Server mit der Anweisung
newrelic-admin run-program
gestartet werden.
In der Basisausführung („Lite“) ist der Dienst für eine unbeschränkte
Zeit kostenfrei. Erst die erweiterte Funktionsbandbreite
schlägt je nach Leistungsumfang des Dienstes mit bis zu 149
US-Dollar pro Monat zu Buche.
Unabhängig von der Überwachung einzelner Python-Applikationen
können Sie Serverüberwachungsdienste von
New Relic für Ubuntu, Debian, Red Hat, Cent OS und
andere Linux-Distributionen sowie Windows Server kostenlos
in Anspruch nehmen.
PHP
Eckdaten einer Videodatei
serverseitig ermitteln
Wer Metadaten einer Videodatei wie die Wiedergabedauer
oder die Framegröße serverseitig ermitteln möchte, kann dies
mit Hilfe der PHP-Klasse getID3() leicht bewerkstelligen. Zum
Beispiel so:
$getID3 = new getID3;
$file = $getID3->analyze($filename);
echo(„Wiedergabedauer: „.$file[‚playtime_string‘].“ /
Dimensionen: „.$file[‚video‘][‚resolution_x‘].“ Breite und
„.$file[‚video‘][‚resolution_y‘].“ Höhe“. „ / Dateigröße:
„.$file[‚filesize‘].“ Bytes “);
New Relic, ein Dienst zur Überwachung der Leistung von
Webapplikationen (newrelic.com)
Die PHP-Klassen getID3() finden Sie unter:
http://getid3.sourceforge.net/
Leider ist die Unterstützung von Multimediadateien auf nur wenige
Standards beschränkt. Falls Sie über die Möglichkeit verfügen,
die PHP-Konfiguration auf Ihrem Server zu modifizieren,
können Sie sich mit der Erweiterung ffmpeg-php behelfen:
apt-get install php5-ffmpeg
Diese Erweiterung bietet Ihnen eine objektorientierte API zum
Zugriff auf Videodateien. So können Sie beispielsweise die Abspieldauer
in Erfahrung bringen:
$movie = new ffmepg_movie(„Pfad/zum/Video.flv“);
$duration_in_seconds = $movie->getDuration();
Mittels
$cmd = „ffmpeg -i „ . $videoPath . „ 2>&1“;
if (preg_match(‚/Duration: ((\d+):(\d+):(\d+))/s‘,
www.internet-magazin.de 73

TIPPS & TRICKS | MySQL, Python, PHP, AWS
`$cmd`, $time)) {
$total = ($time[2] * 3600) + ($time[3] * 60) + $time[4];
}
exec($cmd);
print_r ($time[0]);
erhalten Sie die Wiedergabelänge im Format 00:00:00. Wenn
Sie nur die Minuten und Sekunden ausgeben möchten, können
Sie sich zum Beispiel mit substr() behelfen.
Im Lieferumfang der ffmpeg-Distribution finden Sie ein
Tool namens ffprobe. Mit diesem können Sie die benötigten
Informationen gleich in der Kommandozeile etwa
wie folgt ermitteln:
ffprobe -show_format -pretty -print_format json -v quiet
Videodatei.mp4
Das Resultat beinhaltet die folgenden Informationen:
{
„format“: {
„filename“: „Videodatei.mp4“,
„nb_streams“: 2,
„format_name“: „mov,mp4,m4a,3gp,3g2,mj2“,
„format_long_name“: „QuickTime/MPEG-4/Motion JPEG 2000
format“,
„start_time“: „0:00:00.000000“,
„duration“: „0:00:52.350000“,
„size“: „9.489486 Mibyte“,
„bit_rate“: „1.438423 Mbit/s“,
„tags“: {
„major_brand“: „M4VH“,
„minor_version“: „1“,
„compatible_brands“: „M4VHM4A mp42isom“,
„creation_time“: „2013-02-12 14:05:54“
}}}
Mittels
ffprobe -show_streams -pretty -print_format json
-v quiet Videodatei.mp4
können Sie außerdem unter anderem die durchschnittliche
Bitrate und die tatsächliche Framerate in Erfahrung
bringen. Seien Sie allerdings gewarnt: Diese Informationen
müssen Sie auf Basis der Rohdaten der Ausgabe erst
einmal berechnen.
Ein Beispiel: Im Falle der tatsächlichen Framerate in der JSON-
Ausgabe entspricht der Wert
„r_frame_rate“: „30000/1001“,
genau 29.97 fps.
Cloudfront
Private Videodistribution streamt
nicht: Probleme mit ACL-Berechtigungen
beheben
Sollten sich trotz einer scheinbar fehlerfreien Konfiguration einer
privaten Cloudfront-Distribution die betreffenden Videos nicht
streamen lassen, ist die Ursache unerwarteterweise oft an einer
völlig anderen Stelle zu finden. Fehlt dem Origin-Bucket die
passende ACL-Berechtigung, kann Cloudfront auf die Daten
nicht zugreifen. Im Bereich „Cloudfront“ der AWS-Konsole sieht
es dann aber so aus, als ob alles korrekt funktionieren würde.
Um dem Problem auf die Spur zu kommen, navigieren Sie in
der Konsole zu dem S3-Bucket, in dem sich das problematische
Video befindet, und lassen sich die Eigenschaften der Videodatei
anzeigen. Im Abschnitt „Permissions/Berechtigungen“ der betreffenden
Videodatei muss sich ein Eintrag in der Form
„Grantee: CloudFront Origin Access“
befinden. Fehlt dieser Eintrag, müssen Sie diesen erzeugen.
Öffnen Sie hierzu die Anwendung CloudBerry S3 Explorer, klicken
Sie mit der rechten Maustaste auf den Bucket-Container
und rufen Sie den Befehl „CloudFront / Edit Distribution...“ auf.
Im folgenden Dialog navigieren Sie mit der Schaltfläche „Weiter/
Next“ zum Dialog „Private Content“ und aktivieren hier die Optionen
„Enable Private Content Distribution“ und „Add Myself
as a Trusted Signer“. Dadurch wird die Einstellung „CloudFront
Origin Access Identity“ in der Liste der ACL-Berechtigungen für
die Objekte in dem betreffenden Bucket verzeichnet. Zu guter
Letzt sollten Sie dieser Identität noch die „Read“-Berechtigung
erteilen. Achten Sie auch unbedingt darauf, dass Ihre eigene
Identität als Eigentümer der Streaming-Dateien verzeichnet ist.
Eine öffentliche Cloudfront-Distribution erfordert darüber hinaus
öffentliche Rechte. Eine private Streaming-Distribution mit
Cloudfront erlaubt es Ihnen, Ihr anvisiertes Publikum auf einen
firmeninternen IP-Bereich festzulegen. Signierte URLs funktionieren
aber nur, wenn die Berechtigungen des Origin-Servers
korrekt eingestellt sind. Wie Sie diese in den Griff bekommen,
erfahren Sie im folgenden Tipp.
IAM, Cloudfront, S3
Korrekte Zugriffsrechte von Cloudfront
auf S3 trotz mehrerer berechtigter
Benutzer
Fehlerhafte Zugriffsrechte auf S3-Buckets können extrem hartnäckige
Probleme verursachen, denn sie sind leicht zu überse-
74 0513 internet magazin

MySQL, Python, PHP, AWS | TIPPS & TRICKS
hen und können durch scheinbar harmlose Handlungen ausgelöst
werden. Das kann beispielsweise ein Kopiervorgang mit
einer falschen AWS-Identität sein.
Wenn der AWS-Administrator einer Medienagentur das Recht
erteilt, Videodateien in dem betreffenden S3-Bucket abzulegen
um darauf eine Cloudfront-Streaming-Distribution einzurichten,
funktioniert die Distribution plötzlich nicht mehr richtig.
Bei jedem Upload in ein S3-Bucket erhält derjenige Benutzer
die Eigentümerrechte an den Dateien, der den betreffenden
Kopiervorgang oder Upload ausgelöst hat. Sollte das der Fall
sein, müssen Sie als Besitzer der Cloudfront-Distribution den
ursprünglichen Eigentümer in der ACL-Konfiguration durch Ihre
eigene AWS-Benutzeridentität ersetzen. Das System verweigert
nämlich die Zuweisung von Zugriffsrechten an S3-Objekten
durch einen Benutzer, bei dem es sich nicht um den Eigentümer
dieser Daten handelt. Es gibt mehrere Möglichkeiten, um diese
Rechtezuweisung anzupassen. Zum einen könnte man die Eigentümerrechte
an den Besitzer des betreffenden Buckets mit
Hilfe einer Anweisung in der POST-Anfrage übertragen, doch
diese Vorgehensweise ist selten praktikabel und schließt sich
mit der Verwendung grafischer Tools aus. Zum anderen könnte
der Besitzer des Buckets die Dokumente innerhalb derselben
Region in einen anderen Bucket und wieder zurück kopieren,
doch auch dieser Behelf ist nicht wirklich empfehlenswert.
Zum Glück hat Amazon inzwischen eine elegantere Lösung
für dieses Problem gefunden.
Um Probleme mit Berechtigungen dauerhaft zu lösen, sollten
Sie anstelle von AWS-Identitäten Amazons IAM-Dienste nutzen.
Hierzu erstellen Sie in Ihrem AWS-Account einen neuen
IAM-Benutzer und weisen diesem das Recht zu, Dateien in
das betreffende S3-Bucket hochzuladen. Detaillierte Berechtigungen
legt in diesem Fall die zugehörige IAM-Richtlinie
fest. Eine so erstellte Benutzeridentität verfügt über ihr eigenes
Schlüsselpaar. Dieses Schlüsselpaar, bestehend aus
einem Zugriffs- und einem Geheimschlüssel, nutzen Sie gemeinsam
mit dem Videoverantwortlichen, welcher für die
Uploads kodierter Videodateien verantwortlich zeichnet.
Optional können Sie auch ein Benutzerkonto zum Zugriff auf
die AWS-Konsole erzeugen. Wenn jetzt dieser IAM-Benutzer
Videodateien in Ihrem S3-Bucket ablegt, sind Sie automatisch
der Eigentümer dieser Dokumente.
Allerdings sollten Sie beachten, dass Änderungen der Konfiguration
eines S3-Buckets, bei dem es sich um den Origin-Server
einer Cloudfront-Distribution handelt, leider nicht sofort in
Kraft treten. Die neuen Parameter müssen sich erst durch das
CDN propagieren. Sicherheitshalber sollten Sie bei jeder Änderung
der Konfiguration eine Invalidation-Anfrage erstellen,
um die alte Konfiguration zu verwerfen. Spätestens nach 20
Minuten sollten dann aber die signierten URLs funktionieren
und die Videos streamen.
Python
Probleme mit virtualenv
in Cygwin unter Windows
Benutzer von Cygwin unter Windows 7 und 8 einschließlich
Pro, die in Python entwickeln möchten, erhalten beim
Versuch, eine virtuelle Umgebung zu erstellen, lediglich die
Fehlermeldung
$ mkvirtualenv --distribute --no-site-packages --python=/
usr/bin/python2.7.exe temp
Running virtualenv with interpreter /usr/bin/
python2.7.exe
New python executable in temp/bin/python2.7
(...)
OSError: [Errno 2] No such file or directory
Einrichtung von virtualenv aus dem Entwicklerzweig in Cygwin
unter Windows 8 Pro.
Der Fehler scheint auf die Versionen 1.8.3 und 1.8.4 von virtualenv
im Zusammenhang mit Cygwin beschränkt zu sein. Um
das Problem zu umgehen, können Sie entweder eine ältere stabile
Version von virtualenv oder eine neuere Version aus dem
Entwicklerzweig nutzen. Entwicklerversionen finden Sie im
Git-Archiv unter der Adresse
https://github.com/pypa/virtualenv
Die Installation können Sie ganz einfach mittels
pip install https://github.com/pypa/virtualenv/tarball/
develop
oder durch
easy_install https://github.com/pypa/virtualenv/tarball/
develop
auslösen.
www.internet-magazin.de 75

TIPPS & TRICKS | MySQL, Python, PHP, AWS
AWS
EC2-Instanzen geschickt reservieren
Wer kurzfristig einen Server benötigt, um eine Webapplikation
zu debuggen, greift oft zur Kostensenkung auf Cloud-Dienste
zurück. So lässt sich ganz einfach auch die Belastbarkeit der
Anwendung austesten. Oft kommt hierbei EC2, kurz für Elastic
Compute Cloud, zum Einsatz. EC2 ist ein Cloud-Angebot virtueller
Server des Cloud-Hosting-Discounters Amazon.
eine dauerhaft reservierte Instanz, die rund um die Uhr läuft,
nicht zu viel zahlen, müssen Sie sich für eine Instanz mit der
maximalen Auslastung entscheiden. Dieser Parameter hat bei
Amazon nämlich nichts mit der Hardwareausstattung zu tun,
sondern definiert lediglich den Anteil der Laufzeit pro Abrechnungszeitraum,
in der Ihre Instanz arbeitet. Würden Sie eine
EC2-Instanz mit einer geringen Auslastung reservieren und
darauf etwa einen Webserver rund um die Uhr betreiben, um
Ihrem Auftraggeber in der Testphase komfortablen Zugriff zu
gewähren, würde Ihnen Amazon den Überschuss an Leistung
pro Stunde in Rechnung stellen. Doch keine Sorge: Wer die
falsche Art von EC2-Instanzen reserviert hat, kann neuerdings
den Vertrag auflösen, indem er die nicht benötigte Instanz weiterverkauft.
Mehr dazu im folgenden Tipp.
Initialisieren
einer EC2-Instanz.
Reservierte EC2-Instanzen sind bekannterweise deutlich günstiger
als Spot-Instanzen, dies setzt jedoch voraus, dass Sie
Ihre reservierten Instanzen hinreichend auslasten.
Die Selbstbedienung bei Amazon hat
nämlich den Nachteil, dass die Kosten für EC2
unter Umständen schnell aus dem Ruder laufen
können, wenn man den Überblick verliert. Wer
EC2 einsetzen möchte, sollte daher gut planen.
Falls Sie einen zusätzlichen Server nur gelegentlich
zur Webentwicklung oder zum Testen
benötigen, sind Sie mit einer Spot-Instanz unter
Umständen ganz gut bedient.
Falls Sie jedoch auf einer EC2-Instanz einen
Web- oder Applikationsserver dauerhaft betreiben
möchten, kommen Sie mit einer reservierten
Instanz deutlich günstiger weg, da
reservierte Instanzen mit einem geringeren
Stundenpreis zu Buche schlagen. Einige AWS-Benutzer versuchen
allerdings, ihre Kosten zu drücken, indem sie reservierte
Instanzen mit der Option für eine geringe oder mittelschwere
Auslastung buchen. Das ist leider völlig verkehrt! Damit Sie für
AWS
Kosten drücken durch den Weiterverkauf
reservierter EC2-Instanzen
Wer seine reservierten EC2-Instanzen nicht mehr benötigt, kann
sie zwar nicht an Amazon zurückgeben, dafür aber an Dritte
verkaufen. Amazon bietet nämlich seit Kurzem einen Marktplatz
für „gebrauchte“ reservierte EC2-Instanzen unter:
http://aws.amazon.com/de/ec2/reserved-instances/
marketplace/
So müssen Sie Ihre reservierten EC2-Instanzen weder im Leerlauf
betreiben, noch brach liegen lassen und können sich ei-
Reservierte EC2-Instanzen von einem Drittanbieter unterscheiden
sich durch die Laufzeit des Vertrages und selbstverständlich
auch durch die anfallenden Kosten, sie sind jedoch
inhaltlich identisch mit „originalen“ AWS-Instanzen.
76 0513 internet magazin

MySQL, Python, PHP, AWS | TIPPS & TRICKS
nen Teil der Kosten vom Käufer zurückerstatten lassen. Für den
Käufer sind die so erworbenen Instanzen von „brandneuen“
Instanzen qualitativ nicht zu unterscheiden. Sie unterscheiden
sich lediglich durch die übrig gebliebene Laufzeit, denn beim
Verkauf „gebrauchter“ reservierter EC2-Instanzen handelt es
sich nicht um physikalische Geräte, sondern um das Recht,
eine virtuelle Computing-Umgebung auf Amazons Infrastruktur
in der Wolke auszuführen. Auf einer EC2-Instanz können
Sie beispielsweise einen Webserver oder Mailserver oder eine
nahezu beliebige andere Software ausführen. Reservierte Instanzen
sind günstiger als die so genannten Spot-Instanzen, die
auf Abruf gestartet werden, sie haben jedoch – wie ihr Name
andeutet – eine vorab reservierte Laufzeit. Amazon stellt dem
Kunden diese Laufzeit unabhängig davon in Rechnung, ob die
EC2-Instanz ausgeführt wird oder nicht. Der Marktplatz für
„gebrauchte“ EC2-Instanzen erlaubt es, nicht mehr benötigte
virtuelle Server zu verkaufen.
Der Vorteil für den Käufer besteht entweder in einem günstigeren
Preis oder in einer besseren Restlaufzeit, zum Beispiel
zehn Monate statt drei Jahren. Der einzige Nachteil: Derzeit
befindet sich der Marktplatz noch in der Betaphase und so ist
die Bedienoberfläche noch nicht vollständig lokalisiert.
PHP, AWS
Signierte Streaming-URLs
skriptgesteuert erzeugen
Wenn Sie signierte URLs für eine private Streaming-Distribution
über Cloudfront via API einrichten, sollten Sie darauf
achten, diese korrekt zu signieren. Setzt sich der S3-Pfad zu
Ihrer Streaming-Datei innerhalb des Buckets zum Beispiel
wie folgt zusammen:
/Verzeichnis/Dateiname.mp4
müssen Sie unbedingt darauf achten, den Pfad inklusive Dateiname,
jedoch ohne die Dateierweiterung zu signieren:
/Verzeichnis/Dateiname
Erst nach dem Signieren der noch unvollständigen URL kommt
dann die Dateierweiterung hinzu. Im Beispiel ist das .mp4.
Die Berechnung der Signatur und das Zusammensetzen der
signierten URL zur Streaming-Datei können Sie zum Beispiel
in PHP implementieren.
Die folgende Funktion lädt den privaten Schlüssel, berechnet
die Signatur, entlädt den Schlüssel aus dem Speicher, und gibt
die Signatur zurück:
function rsa_sha1_sign($policy, $private_key_filename) {
$signature = „“;
$fp = fopen($private_key_filename, „r“);
$priv_key = fread($fp, 8192);
fclose($fp);
$pkeyid = openssl_get_privatekey($priv_key);
openssl_sign($policy, $signature, $pkeyid);
openssl_free_key($pkeyid);
return $signature;
}
Mit einer Funktion wie dieser lassen sich die problematischen
Zeichen +, =, / durch -, _, ~ ersetzen:
function url_safe_base64_encode($value) {
$encoded = base64_encode($value);
return str_replace(
array(‚+‘, ‚=‘, ‚/‘),
array(‚-‘, ‚_‘, ‚~‘),
$encoded);
}
Der Name des Streams entsteht mittels
function create_stream_name($stream, $policy, $signature,
$key_pair_id, $expires) {
$result = $stream;
// falls Parameter bereits angegeben, neue Parameter
anhängen
// sonst Parameter hinzufügen
$separator = strpos($stream, ‚?‘) == FALSE ? ‚?‘ : ‚&‘;
// ein Ablaufdatum deutet auf eine Standardrichtlinie hin
if($expires) {
$result .= $path . $separator . „Expires=“ . $expires .
„&Signature=“ . $signature . „&Key-Pair-Id=“ . $key_pair_id;
}
// falls keine Standardrichtlinie, die Richtlinie anhängen
else {
$result .= $path . $separator . „Policy=“ . $policy .
„&Signature=“ . $signature . „&Key-Pair-Id=“ . $key_pair_id;
}
// entferne Zeilenvorschub
return str_replace(‚\n‘, ‚‘, $result);
}
function encode_query_params($stream_name) {
// Anfrageparameter für Adobe Flash Player mit Hilfe
URL-codierter Zeichen bereinigen
return str_replace(
array(‚?‘, ‚=‘, ‚&‘),
array(‚%3F‘, ‚%3D‘, ‚%26‘),
www.internet-magazin.de 77

TIPPS & TRICKS | MySQL, Python, PHP, AWS
$stream_name);
}
Unter Angabe der Standardsicherheitsrichtlinie nimmt die benötigte
Funktion diese Form an:
function get_canned_policy_stream_name($video_path,
$private_key_filename, $key_pair_id, $expires) {
// codiere die Richtlinie URL-kompatibel mittels base64
$canned_policy = ‚{„Statement“:[{„Resource“:“‘ . $video_
path . ‚“,“Condition“:{„DateLessThan“:{„AWS:EpochTime“:‘.
$expires . ‚}}}]}‘;
// URL-inkompatible Zeichen in der Richtlinie mittels
base64 codieren
$encoded_policy = url_safe_base64_encode($canned_policy);
// signiere die ursprüngliche Version der Richtlinie
(nicht die codierte)
$signature = rsa_sha1_sign($canned_policy, $private_key_
filename);
// codiere die Signatur für die Uebergabe als URL-Parameter
$encoded_signature = url_safe_base64_encode($signature);
// setze die Sicherheitsrichtlinie und die URL der
Streaming-Datei zusammen
$stream_name = create_stream_name($video_path, null,
$encoded_signature, $key_pair_id, $expires);
// ein Workaround für einen Bug in Flash Player
return encode_query_params($stream_name);
}
Unter Angabe der benutzerdefinierten Sicherheitsrichtlinie
sieht die benötigte Funktion nun etwa so aus:
function get_custom_policy_stream_name($video_path,
$private_key_filename, $key_pair_id, $policy) {
// codiere die Richtlinie URL-kompatibel mittels base64
$encoded_policy = url_safe_base64_encode($policy);
// signiere die ursprüngliche Richtlinie (nicht die
base64-codierte)
$signature = rsa_sha1_sign($policy, $private_key_filename);
// codiere die Signatur für die Uebergabe als URL-Parameter
$encoded_signature = url_safe_base64_encode($signature);
// setze die Sicherheitsrichtlinie und die URL der
Streaming-Datei zusammen
$stream_name = create_stream_name($video_path, $encoded_
policy, $encoded_signature, $key_pair_id, null);
// ein Workaround für einen Bug in Flash Player
return encode_query_params($stream_name);
}
Anschließend müssen Sie in Ihrer PHP-Datei noch den Pfad
zu Ihrem Schlüsselpaar angeben:
$private_key_filename = ‚/var/www/keys/pk-
APXXXXXXXXXXXXXXXXXXXX.pem‘;
$key_pair_id = ‚APXXXXXXXXXXXXXXXXXXXX‘;
Diese Dateien dürfen natürlich nicht aus dem Internet zugänglich
sein. In Ihrer Variablen müssen Sie nur den Dateinamen
erfassen, also müssen Sie die Erweiterung der Videodatei unbedingt
weglassen:
$video_path = ‚‘;
$expires = time() + 30; // in 30 Sekunden
$canned_policy_stream_name = get_canned_policy_stream_
name($video_path, $private_key_filename, $key_pair_id,
$expires);
$client_ip = $_SERVER[‚REMOTE_ADDR‘];
$policy = ‚{‚. ‚“Statement“:[‚.‘{‚.‘“Resource“:“‘.
$video_path . ‚“,‘.‘“Condition“:{‚.‘“IpAddress“:
{„AWS:SourceIp“:“‘ . $client_ip .‘/32“},‘.‘“DateLessThan“
:{„AWS:EpochTime“:‘ . $expires . ‚}‘.‘}‘.‘}‘.‘]‘.‘}‘;
$custom_policy_stream_name = get_custom_policy_stream_
name($video_path, $private_key_filename, $key_pair_id,
$policy);
Im -Abschnitt der Webseite können Sie die
Streaming-Datei jetzt zum Beispiel wie folgt referenzieren:
var so_canned = new SWFObject(‚http:///jwplayer/player.
swf‘,‘mpl‘,‘640‘,‘360‘,‘9‘);
so_canned.addParam(‚allowfullscreen‘,‘true‘);
so_canned.addParam(‚allowscriptaccess‘,‘always‘);
so_canned.addParam(‚wmode‘,‘opaque‘);
so_canned.addVariable(‚file‘,‘‘);
so_canned.addVariable(‚streamer‘,‘rtmp://.cloudfront.net/cfx/st‘);
so_canned.write(‚canned‘);
var so_custom = new SWFObject(‚http:///jwplayer/player.swf‘,‘mpl‘,‘640‘,‘360‘,‘9‘);
so_custom.addParam(‚allowfullscreen‘,‘true‘);
so_custom.addParam(‚allowscriptaccess‘,‘always‘);
so_custom.addParam(‚wmode‘,‘opaque‘);
so_custom.addVariable(‚file‘,‘‘);
so_custom.addVariable(‚streamer‘,‘rtmp://.cloudfront.net/cfx/st‘);
so_custom.write(‚custom‘);
Anna Kobylinska und
Filipe Pereira Martins
78 0513 internet magazin

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 CLOUD
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
Cloud Application Builder - ohne Programmierung.
Erstellen Sie sich individuelle und sofort einsatzbereite Web-Applikationen.
Mit Zugriffsregelung, Formulargenerator, Suchfunktionen, Google-Maps, Umkreissuche
u.v.m. Ihre fertige Anwendung mieten sie als Cloud-Komplettlösung
zu einem monatlichen Festpreis, Hosting, Sicherheit, Backup und Verfügbarkeitsgarantie.
- alles inclusive. datenbanken24.de ist zertifiziert für ISO
9001 und Auftragsdatenverarbeitung.
@ 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
www.internet-magazin.de 79

BRANCHENVERZEICHNIS
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
80 0513 internet magazin

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
@ 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
www.internet-magazin.de 81

SERVICE | Vorschau
Ausgabe 6/2013 erscheint am 10. Mai 2013
Entwicklung mobiler Apps
in der Praxis
Mobile Webentwicklung muss weder teuer noch besonders
mühsam sein. Anstatt mit Hilfe der entsprechenden
SDKs native Apps für nur eine Plattform zu
schreiben, kann man vorhandenes HTML5, CSS3
oder Javascript-Know-how nutzen, um mobile Apps
wie normale Websites zu entwickeln. Wir zeigen in
unserer nächsten Ausgabe, wie Sie mobile Apps im
Handumdrehen realisieren.
So bekämpfen Sie negative SEO
Was tun, wenn die eigene Site aus dem Google- oder Bing-Index verschwindet, weil
Neider oder Konkurrenten ein Projekt als Spam denunziert haben? Unser Artikel beschreibt
Schritt für Schritt, wie Sie solche Probleme lösen und in Zukunft verhindern.
QR-Codes nutzen
QR-Codes werden nur selten kreativ und
mit maximaler Wirkung genutzt. Wir zeigen
anhand erstaunlicher Beispiele, was
mit QR-Codes alles möglich ist.
WEIT ERE TH E M EN
HTML5
Die neuen Elemente
Design im Browser
Sites direkt im Browser entwickeln
Alternativer Inhalt
Teasern mit optimierter Vorschau
IMPRESSUM
Redaktion
Bereichsleiter: Jörg Hermann (v.i.S.d.P.)
Projektleiter: Stefan Schasche (sschasche@wekanet.de)
Producer: Rene Wirth
Mitarbeiter dieser Ausgabe: Susanne Nötscher (Korrektorat),
Daniel Engler, Tobias Hauser, Carola Heine, Andreas Hitzig, Anna
Kobylinska, Thomas Kraehe, Stephan Lamprecht, Filipe Pereira
Martins, Andreas Maslo, Dr. Florence Maurice, Sven Neumann, Franz
Neumeier, Frank Puscher, Dr. Holger Reibold, Michael Rohrlich
Redaktionsassistenz: Gerlinde Drobe, Sabine Steinbach
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.
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: Marion Werber, Tel: (089) 2 55 56-1101,
mwerber@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, Postfach 1232, 85702 Unterschleißheim,
Telefon: (0 89) 3 19 06 – 0, Fax: (0 89) 3 19 06 – 113,
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.
© 2013 WEKA MEDIA PUBLISHING GmbH
Druck: Vogel Druck und Medienservice, Leibnitzstr. 5,
97204 Höchberg
ISSN: 1433-3511
82 0513 internet magazin

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/angebot
Nur im Inland gültig. Angebot solange Vorrat reicht. Sollte der abgebildete Artikel nicht
mehr lieferbar sein, erhalten Sie einen qualitativ gleichwertigen Ersatzartikel.

„Kein Hosting-Paket ist
günstiger als bei STRATO.
Außer bei STRATO!“
PowerWeb Basic
6 Monate
für
0,–€/Mon.*
Aktion bis 30.4.2013
Vergleichen lohnt sich!
HOSTING 1&1
Dual Basic
STRATO
PowerWeb Basic
Standardpreis 6,99 €/Mon. 4,99 €/Mon.
Einrichtungsgebühr 9,60 € 8,60 €
Inklusivdomains 4 4
Postfachspeicher 2GB 5GB
Webspace 10 GB 10 GB
Stand 6. März 2013. Mindestvertragslaufzeit STRATO 12 Monate, 1&1: 6 Monate. Preise inkl. MwSt.
Sie sparen bis zu 25€ im Jahr!
Marcus Welt
chrom.tv
HOSTED
IN GERMANY
* Aktion bis 30.04.2013: PowerWeb Basic 6 Monate für 0 €/Mon., anschließend 4,99 €/Mon.
Einmalige Einrichtungsgebühr 8,60 €. Mindestvertragslaufzeit 12 Monate. Preise inkl. MwSt.
Servicetelefon: 030 - 300 146 - 21