Internet Magazin Facebook Graph Search (Vorschau)

4/13<br />

KNOWHOW FÜR W EB-PROFIS<br />

€ 4,50<br />

Österreich € 5,10<br />

BeNeLux € 5,10<br />

Italien € 6,00<br />

Spanien € 6,00<br />

Schweiz sfr 9,00<br />

Griechenland € 7,00<br />

www.internet-magazin.de<br />

WEBENTWICKLUNG<br />

Flexbox-Layouts<br />

Klassische Designprobleme<br />

ganz elegant gelöst<br />

Wordpress-Doping<br />

Mit Wordpress-Multisite<br />

mehrere Websites verwalten<br />

Map-APIs<br />

Standorterkennung<br />

und Benutzerortung<br />

für Apps nutzen<br />

WEBBUSINESS<br />

SEO-Strategien<br />

Mehr mobile Besucher<br />

für Ihre Website generieren<br />

E-Mail-Marketing<br />

Der optimale Newsletter<br />

für Smartphones und Tablets<br />

<strong>Facebook</strong><br />

<strong>Graph</strong> <strong>Search</strong><br />

Wie man<br />

zu Geld macht<br />

NEU:<br />

Zum Sammeln!<br />

Quick Reference Guide<br />

Google Analytics<br />

Teil 7 in diesem Heft<br />

CHEAT<br />

SHEET

---

Und wie flexibel ist Ihr Server?<br />

Flexibel skalierbare CloudServer On Demand<br />

mit nutzungsbasierter Abrechnung und Traffic-Flatrate<br />

Bis 31.03.2013 anmelden und 50 € Startguthaben sichern<br />

www.jiffybox.de<br />

Foto: Akhilesh Sharma / Fotolia

---

EDITORIAL<br />

VERLOST<br />

SEO-Video-Training<br />

Die Suche mit<br />

sozialem Kontext<br />

Das soziale Netzwerk <strong>Facebook</strong> hat laut neuester Zählung<br />

weltweit mehr als eine Milliarde Mitglieder, die Tag für Tag<br />

und Minute für Minute mehr Details über ihr Privatleben ins<br />

<strong>Internet</strong> stellen. Auf den Servern des Unternehmens schlummern<br />

Daten in immenser und stetig wachsender Menge – ein<br />

Informationspotential, das viele Unternehmen bereits in naher<br />

Zukunft in bare Münze verwandeln können. Wie das gehen<br />

soll? Nun, ganz sicher nicht mit ziellos eingestreuten Werbeeinblendungen,<br />

Bannern oder gesponserten Links.<br />

Viel effektiver ist es, die sozialen Interaktionen und Beziehungen,<br />

die "Gefällt mir"-Klicks und negative Kommentare der<br />

Mitglieder ganz direkt für Marketingzwecke zu nutzen. Genau<br />

für diesen Einsatzbereich hat <strong>Facebook</strong> die "Social <strong>Graph</strong><br />

<strong>Search</strong>" entwickelt, eine Suchanfrage mit sozialem Kontext, die<br />

momentan bereits für ausgesuchte <strong>Facebook</strong>-Nutzer zur Verfügung<br />

steht. Was genau es mit <strong>Facebook</strong>s Social <strong>Graph</strong> <strong>Search</strong> auf<br />

sich hat, wie die Suche funktioniert und welche Möglichkeiten<br />

und Gefahren sich dadurch auch für Sie ergeben könnten, verrät<br />

unser Artikel auf Seite 56.<br />

Viel Spaß beim Lesen dieser Ausgabe wünscht<br />

Die SEO-Schulung vom Profi! Ihr<br />

persönlicher Trainer zeigt Ihnen<br />

anhand zahlreicher Praxisbeispiele,<br />

wie Sie eine Keyword-Recherche<br />

durchführen und Schritt für<br />

Schritt das Ranking Ihrer<br />

Website verbessern. Dabei<br />

lernen Sie nützliche Analysewerkzeuge<br />

wie Google Analytics,<br />

Bing Webmaster Tools und <strong>Search</strong>metrics<br />

anzuwenden und optimieren den Quellcode Ihrer<br />

Site. In den Workshops des Video-Trainings<br />

"Suchmaschinen-Optimierung" (Galileo Computing,<br />

ISBN 9-7838362-1981-5, 39,90 Euro)<br />

erfahren Sie zudem, welchen Einfluss Social<br />

Media auf Ihr Ranking hat und wie Sie für<br />

Google optimierte Texte schreiben.<br />

Marketingverantwortlichen in kleinen<br />

und mittleren Unternehmern,<br />

Freiberuflern, Selbstständigen und<br />

anderen professionellen Anwendern<br />

bietet Google+ eine neue Plattform<br />

für die Kommunikation mit Kunden,<br />

Interessenten und Meinungsmachern.<br />

Mit dem Buch "Google+"<br />

(Hanser Verlag, ISBN 9-783446-432598, 20,50<br />

Euro) setzen Sie grundlegende und fortgeschrittene<br />

Funktionen im Handumdrehen optimal<br />

ein: Von der Einrichtung einer aufmerksamkeitsstarken<br />

Präsenz über die treffsichere Publikumsansprache<br />

mit Kreisen bis zum eigenen<br />

TV-Kanal mit Hangouts on Air.<br />

Stefan Schasche<br />

Projektleiter<br />

sschasche@wekanet.de<br />

Machen Sie mit bei unserer Verlosung und gewinnen<br />

Sie unter<br />

www.internet-magazin.de/verlosung<br />

www.internet-magazin.de 3

---

SERVICE | Inhalt<br />

4/13<br />

Flexbox-Layouts<br />

Der attraktive Newcomer unter den CSS3-Layoutmodulen ist Flexbox: Es<br />

ermöglicht eine sehr flexible Anordnung von Bereichen, wodurch sich<br />

viele klassische Layoutprobleme elegant lösen lassen.<br />

S. 14<br />

<strong>Facebook</strong>s Social<br />

<strong>Graph</strong> <strong>Search</strong><br />

Mit seiner neuen Social-<strong>Graph</strong>-Suche<br />

schickt sich <strong>Facebook</strong> an, das Marketing<br />

neu zu definieren und die Marktforschung<br />

nachhaltig zu verändern.<br />

Genutzt werden soziale Verknüpfungen<br />

und private Vorlieben.<br />

S. 56<br />

AKTUE LLE S<br />

News & Trends . . . . . . . . . . . . . . 6<br />

Trackback . . . . . . . . . . . . . . . . 12<br />

Spannende, interessante und witzige Fundstücke<br />

aus dem Web<br />

SPECIAL<br />

Flexbox-Layouts . . . . . . . . . . . 14<br />

Alles über den CSS3-Layout-Newcomer<br />

W E BDE S I GN<br />

Responsives Webdesign . . . . . . 20<br />

Techniken zur Performance-Steigerung<br />

Map-APIs: Google & Alternativen 26<br />

Mobile Geofunktionen werden immer wichtiger<br />

Design in Adobe Illustrator CS6 . 32<br />

So nutzen Sie das Illustrationsprogramm richtig<br />

Professionelles Blogdesign . . . . 36<br />

Blogs erstellen mit Wordpress<br />

WEB E NTWICKLUNG<br />

Google Analytics . . . . . . . . . . . 40<br />

Erfahren Sie mehr über die Besucher Ihrer Site<br />

Java-Power mit XDEV 3 . . . . . . . 46<br />

Die perfekte Umgebung für den Umstieg auf Java<br />

Multisite: Doping für Wordpress . 52<br />

Mehrere Wordpress-Sites verwalten<br />

<strong>Facebook</strong>s Social <strong>Graph</strong> <strong>Search</strong> . . 56<br />

Gezieltes Marketing über <strong>Facebook</strong><br />

WEBBUSI N E SS<br />

Provider-Porträt . . . . . . . . . . . . 60<br />

<strong>Internet</strong>24<br />

Newsletter für mobile Geräte . . . 62<br />

E-Mail-Marketing für Smartphone und Tablet<br />

Mobile Besucher analysieren . . 64<br />

SEO-Strategien für mobile Surfer<br />

4 0413 internet magazin

---

Inhalt | SERVICE<br />

Map-APIs<br />

Die mobile Revolution löst einen<br />

enormen Bedarf an ortsgebundenen<br />

Funktionen aus. Entwickler<br />

mobiler Apps verhelfen ihren<br />

Diensten mit Benutzerortung<br />

und Standorterkennung zu mehr<br />

Benutzerfreundlichkeit.<br />

S. 26<br />

Newsletter für<br />

mobile Geräte<br />

Mobile Endgeräte wie Smartphones<br />

oder Tablets stellen besondere<br />

Anforderungen an das E-Mail-Marketing.<br />

Worauf Sie achten müssen,<br />

lesen Sie in diesem Artikel.<br />

S. 62<br />

Multisite: Doping<br />

für Wordpress<br />

Multisite dient der einfachen Erzeugung<br />

und Administration eines<br />

Netzwerks von Websites. Nur wenige<br />

Nutzer verwenden es und ignorieren<br />

damit eines der leistungsfähigsten<br />

Wordpress-Werkzeuge.<br />

S. 52<br />

T I PPS & TRICKS<br />

<strong>Internet</strong> Explorer. ........70<br />

• Entwickeln mit modern.IE<br />

• Inkompatibilitäten beheben<br />

Windows 8 .............71<br />

• Priorität für Touch<br />

• Websites als Kacheln<br />

AWS ..................71<br />

• Elastischer Lastverteiler<br />

.htaccess ..............71<br />

• Code-Igniter: URLs bereinigen<br />

SEO ..................72<br />

• APIs nutzen<br />

Geolocation ............72<br />

• Kostenlose Datenbanken von Maxmind<br />

cron ..................72<br />

• Datum und Uhrzeit automatisch setzen<br />

Javascript ..............72<br />

• Minifizierer und Komprimierer<br />

• Fehlersuche mit Tracekit<br />

Fiddler . . . . . . . . . . . . . . . . 72<br />

• Websites debuggen<br />

CSS. ..................74<br />

• Webschriften selber hosten<br />

• Workarounds für elastische Layouts<br />

• Automatisches Skalieren<br />

PHP ..................75<br />

• Textzeichenketten prüfen<br />

• Zeilenumbrüche entfernen<br />

Online-Recht. ...........76<br />

• AGB - Das Kleingedruckte<br />

Google Analytics<br />

Neben der Arbeit an den Rankings<br />

mit den Webmaster-Tools und dem<br />

Chrome-Browser setzen Webmaster<br />

verstärkt auf die Analysemöglichkeiten<br />

mit Google Analytics, um<br />

mehr über die Besucher ihrer Site<br />

zu erfahren.<br />

S. 40<br />

S ERVICE<br />

Editorial . . . . . . . . . . . . . . . . . 3<br />

Branchenverzeichnis . . . . . . . 79<br />

Impressum . . . . . . . . . . . . . . 82<br />

<strong>Vorschau</strong> . . . . . . . . . . . . . . . . 82<br />

www.internet-magazin.de 5

---

AKTUELLES | News<br />

Strato<br />

Server-Cloud und Hidrive<br />

Auf der Cebit in Hannover stellt<br />

Strato seine neue Servercloud vor.<br />

Wer einen neuen Server anlegt,<br />

kann in der Webverwaltung der<br />

Public-Cloud-Lösung die Größe des<br />

Arbeitsspeichers zwischen 512 MB<br />

und 32 GB bis auf das Megabyte<br />

genau konfigurieren – beim Festplattenspeicher<br />

geht das zwischen<br />

20 und 1.000 GB bis auf das Gigabyte.<br />

Die Prozessorleistung lässt<br />

sich ebenfalls frei wählen: Ein bis<br />

acht Kerne stehen zur Verfügung.<br />

Steigt der Bedarf an Ressourcen,<br />

können CPU und Arbeitsspeicher<br />

flexibel angepasst werden. Sie können<br />

passgenaue virtuelle Maschinen<br />

für Ihren Einsatzzweck anlegen, zum<br />

Beispiel einen FTP-Server mit wenig<br />

RAM und viel Festplattenspeicher<br />

oder einen Serverklon. Dieser kann<br />

zum Beispiel kurzfristig als separate<br />

Testumgebung genutzt werden, um<br />

Patches und Updates zu testen, ohne<br />

das Produktivsystem zu beeinträchtigen.<br />

Zusätzlich lässt sich der Klon<br />

der eigenen Produktivumgebung flexibel<br />

anpassen, um die Systemanforderungen<br />

neuer Software zu testen.<br />

In puncto Sicherheit bietet Strato Features<br />

wie zum Beispiel Securityscan.<br />

Damit können Kunden die nach außen<br />

sichtbaren Ports ihrer virtuellen<br />

Server scannen und so mögliche Sicherheitslücken<br />

oder veraltete Software<br />

aufspüren. Der Securityscan<br />

lässt sich für jede virtuelle Maschine<br />

manuell auf Knopfdruck durchführen<br />

oder über einen Job automatisieren.<br />

Zum Einsatz kommen HP-Server mit<br />

Mehrkernprozessoren des Typs Intel<br />

XEON E5 und HP 3PAR als separates<br />

Speichersystem.<br />

Des Weiteren stellt Strato auf der Cebit<br />

seine neue Windows-8-App für<br />

Hidrive vor. Die Entwicklerversion<br />

der Hidrive-App kommt mit einem<br />

touchfreundlichen Interface daher,<br />

das sich komplett in das Look-and-<br />

Feel der neuen Windows-Benutzeroberfläche<br />

einfügt. Direkt nach<br />

dem Login werden Dateien, Ordner<br />

und Fotos, die auf dem Cloud-Speicher<br />

liegen, als Miniaturansicht angezeigt.<br />

Dateien in der Hidrive-App<br />

lassen sich mit anderen Apps öffnen,<br />

ansehen und bearbeiten – die vorgenommenen<br />

Änderungen werden<br />

danach automatisch auf Hidrive<br />

hochgeladen. Wer Hidrive auch unter<br />

Windows 8 als Laufwerk im Windows<br />

Explorer einbinden möchte,<br />

kann die bereits verfügbare Software<br />

für Windows XP, Vista und Windows<br />

7 auch unter Windows 8 nutzen.<br />

www.strato.de<br />

payleven<br />

Mobile Chip & PIN Lösung<br />

Payleven, startet seine Chip-&-PIN-Lösung. Ab heute können<br />

sich Gewerbetreibende unter payleven.de registrieren<br />

und zum Einführungspreis von 49<br />

Euro (zuzüglich Mehrwertsteuer) ihren<br />

Chip & PIN-Kartenleser erwerben. Das<br />

Lesegerät verbindet sich via Bluetooth<br />

mit einem Smartphone oder Tablet. Es<br />

bietet dabei die gleichen Sicherheitsstandards<br />

wie klassische Kartenterminals:<br />

Das Gerät ist EMV-Level-2 und PCI zertifiziert und<br />

bietet so einen optimalen Schutz für Gewerbetreibende.<br />

www.payleven.de<br />

Checkliste<br />

Der richtige Webhoster<br />

Man möchte Geld im <strong>Internet</strong> verdienen, die Idee für<br />

den <strong>Internet</strong>auftritt nimmt langsam Formen an, eigentlich<br />

kann’s losgehen. Fehlt nur noch der Hosting-Partner<br />

für das Online-Projekt – und da hat man die Qual<br />

der Wahl. Das Angebot des Hosters sollte flexibel gestaltet<br />

sein, die Größe oder Ausstattung der eigenen<br />

Website unproblematisch an den aktuellen Bedarf angepasst<br />

werden können.Der Hoster sollte Laufzeiten<br />

und Preise wie einmalige Einrichtungsgebühr und monatliche<br />

Miete transparent darstellen. Eine Checkliste<br />

von Verio bietet eine Orientierungshilfe.<br />

www.verio.de<br />

6 0413 internet magazin

---

News | AKTUELLES<br />

Schadsoftware<br />

Die zehn größten Gefahren im <strong>Internet</strong><br />

Die größte Bedrohung<br />

für <strong>Internet</strong>nutzer sind<br />

derzeit so genannte<br />

Drive-by-Downloads.<br />

Dabei handelt es sich<br />

um Schadprogramme,<br />

die sich Nutzer beim<br />

Besuch manipulierter<br />

Webseiten einfangen<br />

können. Hierbei<br />

laden sich <strong>Internet</strong>nutzer<br />

unbewusst<br />

Schadsoftware auf<br />

den eigenen Rechner. Dabei werden<br />

in der Regel Sicherheitslücken<br />

von Browsern oder Plug-Ins ausgenutzt.<br />

Auf dem zweiten Platz liegen<br />

Würmer und Trojaner. Das berichtet<br />

der Hightech-Verband BITKOM<br />

im Rahmen eines Rankings der<br />

zehn größten Gefahren aus dem<br />

<strong>Internet</strong> im Jahr 2013. Basis der<br />

Angaben ist ein aktueller Bericht<br />

<strong>Internet</strong>sicherheit<br />

Passwörter merken<br />

der European Network and Information<br />

Security Agency. Weitere<br />

Gefahren sind Attacken auf Datenbanken<br />

und Webanwendungen,<br />

massenhaft gekaperte und ferngesteuerte<br />

Computer (Botnets) oder<br />

betrügerische Mails und Websites<br />

(Phishing). Mehr Informationen<br />

und Schutztipps finden Sie unter<br />

www.bitkom.org<br />

Laut Studien<br />

greifen 60 Prozent<br />

der <strong>Internet</strong>nutzer<br />

lediglich<br />

auf eine<br />

sehr begrenzte<br />

Auswahl von<br />

Buchstaben<br />

und Zahlen<br />

zurück. Das<br />

weltweit am meisten verwendete<br />

Passwort ist die Ziffernfolge<br />

„123456“. Auf den Plätzen zwei<br />

und drei rangierten „12345“ und<br />

„123456789“. Hacker könnten<br />

einen solch schwachen Zugangsschutz<br />

mit automatisierten Methoden<br />

innerhalb einer Sekunde<br />

knacken. Um ein Passwort zu finden,<br />

dass man sich leicht merken<br />

kann, wird geraten, sich einen Satz<br />

auszudenken, der Wörter, Zahlen<br />

und Zeichensetzung enthält. Als<br />

Beispiel wählt er den Satz „Mein<br />

zweites Auto war ein VW Golf!“<br />

Nehme man den ersten Buchstaben<br />

eines jeden Worts, die Zahl<br />

und das Satzzeichen und schreibe<br />

dies hintereinander auf, ergebe<br />

sich aus diesem Merksatz das<br />

Passwort „M2.AweVWG!“<br />

hpi.uni-potsdam.de<br />

• • • TICKER • • •<br />

■ Amazon senkt EC2-Preise<br />

Amazon hat, knapp ein Jahr<br />

nach der letzten Preissenkung,<br />

die Kosten für On-Demand-<br />

Instanzen in seinem Cloud-<br />

Dienst EC2 ab 1 Februar 2013<br />

reduziert. Die Preissenkung<br />

gilt nur für die Linux-Varianten.<br />

www.amazon.de<br />

■ <strong>Facebook</strong> fährt ersten<br />

Gewinn ein<br />

Trotz eines Gewinnrückgangs<br />

von 548 Millionen auf 523 Millionen<br />

US-Dollar weist <strong>Facebook</strong><br />

den ersten Gewinn seit<br />

dem Börsengang 2012 aus.<br />

Der Gewinnrückgang sei vor<br />

allem auf gestiegene Kosten<br />

zurückzuführen.<br />

www.facebook.de<br />

■ Etherpad-Patch<br />

Eine Sicherheitslücke, die zu<br />

Serverabstürzen durch modifizierte<br />

Client-Nachrichten<br />

führen kann, wurde mit dem<br />

Update auf die Version 1.2.7<br />

von Etherpad geschlossen.<br />

Das Update sollte möglichst<br />

schnell installiert werden.<br />

etherpad.org<br />

■ <strong>Internet</strong>sperrfantasien<br />

Mit der Entscheidung, dass ein<br />

<strong>Internet</strong>zugang zur Grundversorgung<br />

gehört, beendet der<br />

Bundesgerichtshof eine lange<br />

politische Debatte: Eine <strong>Internet</strong>sperre,<br />

wie sie die Rechteverwertungsindustrie<br />

als Strafe<br />

für Urheberrechtsdelikte<br />

fordert, wäre damit unzulässig.<br />

www.bundesgerichtshof.de<br />

www.internet-magazin.de 7

---

AKTUELLES | News<br />

WLAN-Nutzung<br />

Bald kostenloses WLAN<br />

für alle Münchener?<br />

Im Rahmen seines Vortrages über die aktuellen Entwicklungen<br />

im Medienbereich in Bayern vor Mitgliedern und<br />

Gästen des Medien-Club<br />

München e.V., griff Siegfried<br />

Schneider, Präsident<br />

der Bayerischen Landeszentrale<br />

für neue Medien,<br />

das Thema kostenlose<br />

WLAN-Nutzung auf und<br />

kündigte entsprechende Gespräche an. Eberhard Sinner,<br />

MdL und Vorsitzender des Medien-Club München,<br />

forderte die kostenlose WLAN-Nutzung in München. Als<br />

Vorbild dient das Berliner Pilotprojekt: Seit November<br />

2012 können Berliner und Berlin-Besucher an belebten<br />

Straßen und Plätzen in den Bezirken Mitte und Prenzlauer<br />

Berg 30 Minuten kostenlos im <strong>Internet</strong> surfen. Nutzer von<br />

Smartphones, Tablet-PCs und Notebooks erhalten an 44<br />

Hotspots einen kostenlosen Highspeed-<strong>Internet</strong>zugang<br />

mit bis zu 100.000 Kbit/s im Download. Weitere 60<br />

Hotspots werden bis zum Sommer 2013 dazukommen.<br />

Insgesamt entsteht so ein WLAN-Netz mit mehr als 100<br />

Highspeed-Hotspots in Berlin und Potsdam.<br />

www.medien-club-muenchen.com<br />

Initiative D21<br />

Sicherheit beim<br />

Online-Banking<br />

Immer mehr Bürger möchten ihre<br />

Bankgeschäfte mobil und bequem<br />

zu jeder Zeit erledigen. Aktuell<br />

nutzen 70 Prozent der regelmäßigen<br />

<strong>Internet</strong>nutzer häufig den<br />

Computer für ihre Bankgeschäfte.<br />

Über 95 Prozent von ihnen legen<br />

dabei großen Wert auf Sicherheit<br />

und Datenschutz. Dafür etwas tun<br />

oder bezahlen wollen aber immer<br />

weniger Menschen: Aktuell erwarten<br />

57 Prozent der <strong>Internet</strong>nutzer<br />

sichere Transaktionen kostenlos<br />

von ihrer Bank. Dies sind die zentralen<br />

Ergebnisse der fünften Auflage<br />

der Studie „Online-Banking<br />

– Mit Sicherheit!“, herausgegeben<br />

von der Initiative D21 e.V. sowie<br />

der Fiducia IT AG und durchgeführt<br />

von TNS Infratest.<br />

www.initiatived21.de<br />

Jiffybox<br />

Cloud-Server<br />

Der Webhoster Domainfactory bietet seinen Kunden<br />

ab jetzt einen Cloud-Server an, bei dem keine<br />

Gebühren für den Datentransfer anfallen. Ab sofort<br />

ist jede Jiffybox mit einer Traffic-Flatrate ausgestattet.<br />

Das gilt sowohl für neue als auch für bestehende Installationen.<br />

Die Kunden bezahlen ihre Cloud-Server<br />

sekundengenau nach der tatsächlichen<br />

Nutzungsdauer. Pro Stunde kostet<br />

eine Jiffybox je nach Leistung zwischen<br />

zwei und 25 Cent. Dafür<br />

stehen zwei bis vier CPU-Kerne,<br />

bis 16 GByte Arbeitsspeicher und<br />

50 bis 600 GByte Festplattenspeicher<br />

zur Verfügung. Zwei verschiedene Linux-Kernel und<br />

sieben Linux-Distributionen stehen vorinstalliert zur<br />

Wahl. Neukunden, die sich bis Ende März für eine<br />

Jiffybox entscheiden, werden mit einem zusätzlichen<br />

Startguthaben von 50 Euro belohnt.<br />

www.jiffybox.de<br />

Video-Streaming<br />

Das <strong>Internet</strong> wird<br />

zur Videothek<br />

Filmfans greifen zunehmend online<br />

auf legale Videoangebote zu. Mehr<br />

als jeder vierte Bundesbürger bezieht<br />

Filme und Serien online, entweder als<br />

Download oder indem er Datenträger<br />

wie Blu-rays oder DVDs per <strong>Internet</strong><br />

bestellt. Das entspricht 41 Prozent der<br />

<strong>Internet</strong>nutzer in Deutschland. Zudem<br />

nutzen 3,5 Millionen Deutsche kostenpflichtige<br />

Streaming-Dienste. Das<br />

ist das Ergebnis einer repräsentativen<br />

Umfrage im Auftrag des Hightech-<br />

Verbands BITKOM. Vor allem 18- bis<br />

29-jährige <strong>Internet</strong>nutzer beziehen<br />

Filme online. Bei den 30- bis 49-Jährigen<br />

ist es jeder Zweite.<br />

www.bitkom.org<br />

8 0413 internet magazin

---

Hetzner Online unterstützt mit der<br />

Verwendung von 100% regenerativem<br />

Strom aktiv den Umweltschutz.<br />

Entscheiden Sie sich gemeinsam<br />

mit uns für eine saubere Zukunft.

---

AKTUELLES | News<br />

Breitbandanschluss<br />

Großer Nachholbedarf bei kleinen Unternehmen<br />

In Deutschland haben im vergangenen Jahr fast neun<br />

von zehn Unternehmen einen Breitbandanschluss<br />

genutzt, dagegen waren es 2003 noch deutlich<br />

weniger als die Hälfte. Damit hat sich die Breitbandnutzung<br />

in der Wirtschaft innerhalb von zehn<br />

Jahren mehr als verdoppelt. Allerdings hat sich der<br />

Anteil der Unternehmen mit Breitbandanschlüssen<br />

seit 2009 nicht<br />

mehr weiter erhöht. Vor allem<br />

kleine Unternehmen verzichten derzeit noch häufig<br />

auf einen schnellen <strong>Internet</strong>anschluss. Von den Unternehmen<br />

mit weniger als fünf Beschäftigten verfügen<br />

nur rund zwei Drittel über einen festen Breitbandzugang.<br />

Bei Unternehmen mit weniger als 10 Beschäftigten<br />

sind es bereits 79 Prozent, bei weniger als 50<br />

Beschäftigten 86 Prozent. Bei Unternehmen mit 50 bis<br />

249 Beschäftigten beträgt die Quote bereits 95 Prozent,<br />

ab 250 Beschäftigten steigt sie dann auf 98 Prozent. Im<br />

Branchenvergleich sind die ITK-Branche selbst mit 99<br />

Prozent sowie die Medienbranche mit 98 Prozent die<br />

Spitzenreiter bei der Nutzung fester Breitbandanschlüsse.<br />

Schlusslichter sind Baugewerbe mit 83 Prozent und<br />

die Verkehrsbranche mit 82 Prozent.<br />

www.bitkom.org<br />

Höhenflug<br />

Europa-Domain hoch im Kurs<br />

Die Wirtschaft setzt immer mehr auf Europa:<br />

Kaum etwas zeigt dies so eindrucksvoll<br />

wie die Investitionsbereitschaft in die<br />

Europa-Domain .eu, deren<br />

überdurchschnittlicher<br />

Auftrieb sich ungebremst<br />

fortgesetzt hat. Der Preisausreißer<br />

nicht berücksichtigende<br />

„Median“ stieg von<br />

150 Euro im Jahr 2010 und<br />

264 Euro im Vorjahr auf<br />

650 Euro im Jahr 2012. Dies geht aus der<br />

alljährlichen Domainmarktstudie der weltgrößten<br />

Domainhandelsbörse Sedo hervor,<br />

die das Unternehmen soeben vorgelegt<br />

hat. Stark im Kommen sind auch wieder<br />

Domains mit landestypischer Endung wie<br />

.fr und .at, wo der Median ebenfalls einen<br />

kräftigen Auftrieb erfahren<br />

hat. So rangieren unter den<br />

Top-10-Spitzenverkäufen<br />

des Jahres etliche Domains<br />

mit landestypischer Endung,<br />

die dem bisherigen<br />

Favoriten .com Konkurrenz<br />

machen. Das momentan<br />

starke Interesse an Gold und Silber hat darüber<br />

hinaus zu einer Vielzahl an Verkäufen<br />

thematisch passender Domains geführt.<br />

www.sedo.de<br />

Mindbreeze Insite<br />

Website-Suche samt intelligentem Baukasten<br />

Mindbreeze Insite, die Suchlösung des österreichischen<br />

Softwareherstellers Mindbreeze,<br />

löst aktuelle Herausforderungen für Website-Besucher<br />

und -Betreiber. <strong>Internet</strong>nutzer<br />

erwarten heute semantische, individuelle<br />

und umfassende Suchergebnisse, die ihnen<br />

einen klaren Mehrwert bieten. Unternehmen<br />

müssen die dafür notwendigen Suchmaschinen<br />

aber nicht selbst programmieren,<br />

denn das innovative Baukastenprinzip von<br />

Mindbreeze Insite bietet eine Lösung, mit<br />

der einfach individuelle Suchanwendungen<br />

erstellt werden können.<br />

www.mindbreeze.com<br />

Oberlandesgericht Hamm<br />

Ungenaue<br />

Lieferfristen<br />

unzulässig<br />

Das Oberlandesgericht Hamm<br />

in Nordrhein-Westfalen hat in<br />

einem am 29.01.2013 veröffentlichen<br />

Urteil (Az.: I-4 U 105/12)<br />

entschieden, dass im <strong>Internet</strong>handel<br />

Klauseln mit ungenauen Lieferfristen<br />

in den Allgemeinen Geschäftsbedingungen<br />

unzulässig<br />

sind, und bestätigte damit einen<br />

Urteilsspruch des Landgerichtes<br />

Essen. Demzufolge sind Klauseln<br />

wie „Angegebene Lieferfristen<br />

stellen nur einen Richtwert dar<br />

und gelten daher nur annähernd<br />

vereinbart (Zirka-Fristen)“ in den<br />

AGB ungültig und verstoßen gegen<br />

das Wettbewerbsrecht. Das<br />

Urteil des OLG Hamm ist jedoch<br />

noch nicht rechtskräftig und beschäftigt<br />

derzeit den Bundesgerichtshof<br />

(Az.: I ZR 205/12).<br />

www.justiz.nrw.de<br />

10 0413 internet magazin

---

News | AKTUELLES<br />

Bertelsmann<br />

Online-<br />

Lernplattform<br />

Bertelsmann engagiert sich bei<br />

einem weltweit agierenden Unternehmen<br />

aus der Education-<br />

Branche. Gemeinsam mit dem<br />

indischen Private Equity Fund<br />

Kaizen beteiligt sich der deutsche<br />

Konzern mit vier Millionen US-<br />

Dollar (etwa drei Millionen Euro)<br />

an WizIQ. Bei der 2007 gegründeten<br />

Plattform haben sich weltweit<br />

mehr als 2,5 Millionen Schüler<br />

und Studenten sowie 200.000<br />

Lehrer in rund 100 Ländern bei<br />

WizIQ eingeschrieben.<br />

www.wiziq.com<br />

SEMSEO University<br />

Handfestes Wissen statt Trendpropaganda<br />

Die SEMSEO Fachkonferenz für Suchmaschinenmarketing<br />

und Optimierung wird<br />

am 25. und 26. April 2013 zum siebten<br />

Mal in Hannover stattfinden. Bei dem<br />

etablierten Veranstaltungsformat der<br />

ABAKUS <strong>Internet</strong> Marketing GmbH<br />

gibt es drei Neuerungen: Der Veranstaltungstermin<br />

fällt bereits ins<br />

Frühjahr, die Location ist erstma-<br />

lig das Congresscentrum Wienecke<br />

XI. nahe dem Messegelände und ein<br />

neues Konzept wartet auf die Teilnehmer.<br />

Auf der SEMSEO 2013 wird es am 26.<br />

April nur einen einzigen Vortragsstrang geben,<br />

in dem die Inhalte von den hochkarätigen<br />

Referenten tiefer vermittelt werden.<br />

Das Konferenzprogramm wird außerdem<br />

durch die eine zweitägige Workshopstrecke<br />

„SEMSEO University“ ergänzt, die von<br />

den SEMSEO-Teilnehmern ohne Aufpreis<br />

besucht werden kann. In den insge-<br />

samt zwölf Intensiv-Workshops<br />

kommen Interessierte in Gruppen<br />

von bis zu 30 Leuten zusammen,<br />

um von Online-Experten<br />

praxisnah Know-how vermittelt zu<br />

bekommen. Am 26. April findet nach<br />

dem Programm im Tanzsaal des Congresscentrums<br />

Wienecke XI. traditionell die<br />

Pubcon statt, die zu den größten Networking-Events<br />

der Branche zählt.<br />

semseo.abakus-internet-marketing.de<br />

_0A56M_internet24_IM_04_13.pdf;S: 1;Format:(210.00 x 137.00 mm);14. Feb 2013 10:42:06<br />

Hochverfügbarkeits-Shopserver<br />

Hochverfügbarkeitssysteme von internet24 garantieren, dass Ihr Online-Shop rund um die Uhr erreichbar ist. Fällt<br />

ein Serversystem aus, springt automatisch ein zweiter, permanent aktualisiert mitlaufender Server ein, um alle<br />

Aufgaben zu übernehmen. Ergänzt wird diese Leistungsfähigkeit durch eine hochverfügbare Rechenzentrumsinfrastruktur,<br />

eine redundante <strong>Internet</strong>anbindung mit 99,99 % garantierter Verfügbarkeit, Markenhardware von DELL<br />

und einem Expertenservice mit 24/7 Premium-Support.<br />

Informieren Sie sich bei Ihrem persönlichen Ansprechpartner über beeindruckend individuelle Shopserver-Qualität.<br />

internet24 GmbH | Bayrische Straße 18 | 01069 Dresden Telefon +49 (0)3 51 / 211 20 40 info@internet24.de

---

AKTUELLES | Trackback<br />

Social Media News Chart<br />

10000flies.de<br />

Welche Themen und Artikel<br />

deutschsprachiger Medien werden<br />

in den sozialen Netzwerken<br />

heiß diskutiert? 10000flies.de<br />

veröffentlicht tägliche Charts der<br />

Beiträge mit den meisten Likes,<br />

Shares und Kommentaren bei<br />

<strong>Facebook</strong>, Verlinkungen innerhalb<br />

von Tweets bei Twitter und +1-Klicks bei Google+<br />

und setzt dabei auf einen hohen Nachrichtenwert und<br />

die Philosophie, dass User einen Artikel nur bei einer gewissen<br />

Qualität empfehlen werden. Ermittelt werden die<br />

Daten mit Hilfe der offiziellen API-Schnittstellen der sozialen<br />

Netzwerke, kommentiert wird die Entwicklung des<br />

Dienstes und seiner Charts im Begleitblog.<br />

http://www.10000flies.de/<br />

XING<br />

Marktplatz für Freiberufler<br />

„XING Projekte“ für Freiberufler und Auftraggeber ist<br />

der neue Marktplatz für XING-Mitglieder aus Deutschland,<br />

Österreich und der Schweiz – und für Freelancer<br />

kostenlos. Unternehmen<br />

können<br />

das Produkt bis<br />

Mitte des Jahres<br />

ebenfalls kostenlos<br />

nutzen, anschließend<br />

wird<br />

für eine Ausschreibung<br />

ein Betrag<br />

von 195 Euro für 30 Tage fällig. XING Projekte ist über<br />

die XING-Hauptnavigation verfügbar und kann ohne<br />

gesonderte Registrierung aufgerufen werden.<br />

https://www.xing.com/projects<br />

Google Apps<br />

Draw.io<br />

Diagramme online erstellen und über<br />

Google Drive in die eigene Googlebasierte<br />

Cloud integrieren: draw.io ist<br />

ein Open-Source-Grafik-Tool, das zahlreiche<br />

Gestaltungsmöglichkeiten ebenso<br />

wie durchdachte Exportfunktionen bietet.<br />

Prozesse und andere Zeichnungen<br />

lassen sich komfortabel erstellen, die Bedienung<br />

ist größtenteils intuitiv. Auch für<br />

mehrere User zusammen, auf Deutsch,<br />

auch ohne Anmeldung zu nutzen und<br />

insgesamt für die Online-Zusammenarbeit<br />

eine gute Powerpoint-Alternative.<br />

https://www.draw.io/<br />

Media Assets<br />

Pixelboxx<br />

Mit der webbasierten Pixelboxx können<br />

Fotos, Zeichnungen, Video- und<br />

Audiodaten, PDFs oder reine Layoutdaten<br />

medienneutral gespeichert und<br />

komfortabel verwaltet werden. Vorteile:<br />

zentrale Ablage aller Media-Daten, ein<br />

Qualitätssicherungssystem, automatische<br />

Konvertierungen, definierte Workflows<br />

und geregelter Zugriff über die Schnittstelle<br />

des CMS. Mitarbeiter, Kunden und<br />

Agenturen haben schnellen Zugriff auf<br />

passende Grafiken in hoher Qualität.<br />

pixelboxx.de/Plone/loesungen/<br />

iPad Apps<br />

Coffeeminute<br />

Coffeeminute ist eine iPad-App, die<br />

viel über Sie wissen will und täglich<br />

dazulernt, indem Ihre History auf <strong>Facebook</strong>,<br />

Twitter und Google angezapft<br />

wird. Das angestrebte Ergebnis ist Ihre<br />

ganz persönliche Scheibe vom Zeitgeist,<br />

denn CoffeeMinute will Sie mit<br />

Hilfe ausgeklügelter Algorithmen kennenlernen<br />

und Ihnen dann automatisch<br />

Artikel aufs iPad senden, die zu Ihrem<br />

Interessensprofil passen. So sparen Sie<br />

Zeit und lernen neue Quellen kennen,<br />

während Sie über Themen informiert<br />

werden, die Sie interessieren.<br />

http://www.coffeeminute.com/de/<br />

12 0413 internet magazin

---

1&1 DYNAMIC<br />

CLOUD SERVER<br />

1&1 Dynamic Cloud Server<br />

Ob als Web-, Datei-, Applikations- oder<br />

Business-Server. Nutzen Sie maximale<br />

Flexibilität mit voller Kostenkontrolle!<br />

■ Basiskonfiguration: 1 CPU, 1 GB RAM,<br />

100 GB Festplatte<br />

■ Unlimited Traffic mit 100 Mbit/s Bandbreite<br />

ohne Zusatzkosten und ohne Drosselung<br />

■ Mehr Sicherheit durch externe IP-Firewall<br />

(Cisco basiert)<br />

■ Freie Wahl aus CentOS, Debian, Ubuntu,<br />

openSUSE oder Windows (optional)<br />

■ Nur bei 1&1: Optional SUSE<br />

Linux Enterprise Server<br />

■ Nur bei 1&1: Server-Management<br />

und -Monitoring per Mobile App<br />

■ NEU! 1&1 Snapshot: Definieren<br />

Sie einfach einen Wiederherstellungszeitpunkt<br />

für Ihren Server.<br />

■ 24/7 Service und Support durch<br />

1&1 Server Expertenteam.<br />

0,– € *<br />

Aktionspreis<br />

für 3 Monate.*<br />

39, 99<br />

€/Monat*<br />

VOLLER ROOT-ZUGRIFF<br />

Komfort und Funktionsumfang eines Root<br />

Servers, mit dedizierten Ressourcen.<br />

HÖCHSTE FLEXIBILITÄT<br />

CPU, RAM und Festplattenspeicher<br />

unabhängig voneinander zubuchbar.<br />

Per Mausklick bis zu 99 virtuelle<br />

Maschinen zubuchbar–ohne Migration!<br />

VOLLE KOSTENKONTROLLE<br />

Absolute Kostentransparenz durch stundengenaue<br />

Abrechnung. Parallels ® Plesk Panel 11<br />

inklusive –ohne Domainbegrenzung.<br />

AUSFALLSICHER<br />

Redundant gespiegelte Speicher- und<br />

Recheneinheiten schützen Ihren Cloud-<br />

Server automatisch vor Ausfällen.<br />

0 26 02 / 96 91<br />

0800 / 100 668<br />

1und1.info<br />

* 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.<br />

Einrichtungsgebühr 39,– €. 12 Monate Mindestvertragslaufzeit. Preise inkl. MwSt.

---

SPECIAL | Flexbox<br />

Flexbox-Layouts<br />

Der attraktive Newcomer unter den CSS3-Layoutmodulen<br />

ist Flexbox: Es ermöglicht eine sehr flexible Anordnung<br />

von Bereichen, wodurch sich viele klassische<br />

Layoutprobleme elegant lösen lassen. Der Artikel<br />

zeigt, wie Sie damit arbeiten.<br />

Layouts mit float zu erstellen macht<br />

eigentlich nicht so richtig Spaß, weil<br />

es nicht intuitiv ist. Als Entschädigung<br />

spendiert uns das W3C gleich eine ganze<br />

Reihe von CSS3-Modulen, um Layouts zu<br />

gestalten. Eines der attraktivsten ist Flexbox.<br />

Der Name verrät es schon: Damit<br />

können Sie Elemente ganz frei platzieren,<br />

ihre Reihenfolge beliebig festlegen<br />

und die Anordnung zueinander exakt bestimmen.<br />

Wenn Sie möchten, können Sie<br />

Elemente auch je nach verfügbarem Platz<br />

einzeilig oder mehrzeilig anordnen. Es<br />

lässt sich präzise steuern, wie eventuelle<br />

Leerräume verteilt werden, und die Definition<br />

flexibler Breiten ist in mehreren<br />

Varianten möglich. Daraus ergeben sich<br />

viele praktische Arbeitserleichterungen:<br />

Mit Flexbox brauchen Sie sich nicht mehr<br />

abzumühen, damit Spalten gleich hoch<br />

sind. Eine stets unten platzierte Fußzeile<br />

(Sticky Footer), ist ein Kinderspiel<br />

und auch das vertikale Zentrieren von<br />

Elementen unbekannter Höhe geht problemlos<br />

vonstatten. Die Anordnung ist<br />

vollständig unabhängig von der Reihenfolge<br />

der Elemente im Quellcode, deshalb<br />

ist Flexbox geradezu prädestiniert<br />

für Responsive Webdesign und macht es<br />

leicht, voneinander völlig unabhängige<br />

Anordnungen je nach verfügbarem Platz<br />

zu realisieren. Ein weiterer Pluspunkt von<br />

Flexbox: Die entsprechende Spezifikation<br />

ist seit September 2012 eine Candidate<br />

Recommendation, es befindet sich<br />

also nur noch wenige Schritte vor der<br />

14 0413 internet magazin

---

Flexbox | SPECIAL<br />

Verabschiedung. Damit ist Flexbox im<br />

Verabschiedungsprozess schon wesentlich<br />

weiter als beispielsweise die Module<br />

für Transitions oder Animations.<br />

Flexbox-Versionen<br />

Bei so viel Positivem muss es natürlich<br />

auch Schattenseiten geben, und die gibt<br />

es in der Tat: Die Flexbox-Spezifikation<br />

existiert schon länger und die früheren<br />

Versionen – beispielsweise die von Juni<br />

2009 oder März 2011/März 2012 – sind<br />

nicht kompatibel zur jetzt aktuellen Candidate<br />

Recommendation vom September<br />

2012. In einer Reihe von Browsern ist die<br />

neueste Flexbox-Version implementiert:<br />

» Opera ab Version 12.1 unterstützt sie,<br />

benötigt also kein eigenes Präfix bei<br />

den Eigenschaften.<br />

» In Chrome ab Version 21 funktioniert<br />

Flexbox ebenfalls, allerdings<br />

müssen Sie die Eigenschaften beziehungsweise<br />

Werte mit dem Präfix<br />

–webkit- versehen.<br />

» Firefox interpretiert die neue Flexbox<br />

in Version 18 und 19 mit dem Präfix<br />

–moz-. Das geht allerdings erst,<br />

nachdem Sie Firefox entsprechend<br />

konfiguriert haben. Geben Sie hierfür<br />

in der Adresszeile von Firefox<br />

„about:config“ ein. Nachdem Sie die<br />

Warnung akzeptiert haben, suchen<br />

Sie in der Liste den Punkt „layout.css.<br />

Flexbox .enabled“. Dieses steht standardmäßig<br />

auf dem Wert „false“. Ein<br />

Doppelklick ändert den Wert in „true“<br />

und aktiviert die Unterstützung für<br />

Flexbox. Ab Firefox 20 soll Flexbox<br />

standardmäßig unterstützt werden,<br />

sodass das Schrauben an der Konfiguration<br />

dann ein Ende hat.<br />

Folgende Browser unterstützen Flexbox-<br />

Vorversionen:<br />

» Safari unterstützt nur die ältere Flexbox-Version<br />

von 2009.<br />

» Der <strong>Internet</strong> Explorer interpretiert in<br />

seiner Version 10 die Zwischenversion<br />

vom 12. März 2012, die sich in<br />

wesentlichen Punkten von der neuen<br />

Version unterscheidet.<br />

Die folgenden Beispiele, die das Grundprinzip<br />

erläutern, testen Sie am besten<br />

Auf einen Blick<br />

Das CSS3-Layoutmodul Flexbox ermöglicht<br />

die flexible Anordnung von<br />

Elementen und erleichtert dadurch die<br />

Arbeit ungemein. Leider ist die Browserunterstützung<br />

momentan noch eher<br />

dünn, doch dürfte sich das bereits in<br />

absehbarer Zeit ändern. Wie man mit<br />

Flexbox Websites flexibel und für verschiedene<br />

Browser gestaltet, verrät Ihnen<br />

dieser Artikel.<br />

in Opera oder Chrome. Am Schluss des<br />

Artikels kommen wir aber selbstverständlich<br />

zu praktischen Einsatzmöglichkeiten<br />

für Flexbox mit Fallbacklösung, damit<br />

die Anordnung auch browserübergreifend<br />

funktioniert.<br />

Neues Vokabular<br />

Flexbox bringt ein neues Vokabular mit<br />

sich. Wichtig sind die Begriffe Flexcontainer,<br />

Flexitems und die beiden Achsen.<br />

Einen Flexcontainer brauchen Sie immer:<br />

So nennt sich das umfassende Element<br />

der flexibel angeordneten Elemente.<br />

In ihm können die darin befindlichen<br />

Kindelemente, die Flexitems, angeordnet<br />

werden, und zwar vertikal und horizontal.<br />

Wenn Elemente nebeneinander<br />

angeordnet werden, ist die Horizontale<br />

die Hauptachse. Zusätzlich gibt es noch<br />

die querende Achse (cross axis), die für<br />

die Ausrichtung relevant ist. So können<br />

Sie beispielsweise bei nebeneinander-<br />

Konzepte von Flexbox in der<br />

Spezifikation des W3C<br />

www.internet-magazin.de 15

---

SPECIAL | Flexbox<br />

Mögliche Ausrichtungen bei den Flexitems.<br />

liegenden Elementen unterschiedlicher<br />

Höhe bestimmen, ob diese unten bündig<br />

angeordnet, zentriert oder gestreckt werden<br />

sollen. In diesem Fall ist die Hauptachse<br />

die horizontale und die querende<br />

Achse die vertikale.<br />

Sehen wir uns das praktisch an und nehmen<br />

wir als HTML-Struktur ein umfassendes<br />

div-Element mit drei Absätzen.<br />

<br />

1<br />

2<br />

3<br />

<br />

Diese drei Absätze sollen mit Flexbox<br />

Flexbox im Kreis der Layoutmodule<br />

Neben Flexbox gibt es weitere Layoutmodule.<br />

» Multicolumn (http://www.w3.org/TR/<br />

css3-multicol/) dient zur Aufteilung<br />

von Inhalten auf mehrere Spalten,<br />

also für einen Spaltensatz, wie man<br />

ihn aus dem Printbereich kennt. Es ist<br />

aber nicht für Mehrspaltenlayouts im<br />

klassischen Sinn gedacht.<br />

» Gridlayout (http://www.w3.org/TR/<br />

css3-grid-layout/) ist ein weiteres<br />

Modul, das für die erleichterte Layouterstellung<br />

vorgesehen ist. Der Name<br />

verrät schon, dass hier Rasterlayouts<br />

das Ziel sind. Bei der Layouterstellung<br />

mit dem Gridlayout können Sie<br />

Spalten und Zeilen definieren und die<br />

nebeneinander angeordnet werden.<br />

Der erste Schritt besteht grundsätzlich<br />

darin, den umfassenden Container in<br />

einen Flexcontainer umzuwandeln. Das<br />

geschieht über die in CSS bekannte Eigenschaft<br />

display, die den neuen Wert<br />

flex erhält.<br />

display: flex;<br />

Chrome interpretiert Flexbox, aber nur<br />

mit seinem herstellerspezifischen Präfix.<br />

Dieses schreiben Sie aber in diesem Fall<br />

nicht bei der Eigenschaft display, sondern<br />

beim zugewiesenen Wert. Wenn<br />

Sie außerdem Firefox mitberücksichtigen<br />

wollen, ergibt das:<br />

Elemente dann anhand dieses Rasters<br />

verteilen. Derzeit ist das Gridlayout<br />

nur im IE 10 implementiert.<br />

» CSS Regions (http://www.w3.org/TR/<br />

css3-regions/) ist das vierte im Bunde<br />

der Layoutmodule. Die CSS Regions ermöglichen<br />

<strong>Magazin</strong>-ähnliche Layouts<br />

mit CSS. Damit kann man beispielsweise<br />

Text auf Kreissegmente oder<br />

andere Formen verteilen. CSS Regions<br />

eignen sich daher gut für raffinierte<br />

printähnliche Effekte auf größeren<br />

Bildschirmen.<br />

Hinsichtlich der Browserunterstützung<br />

können Sie das Multicolumn-Layout heute<br />

schon einsetzen, die anderen Module<br />

aber noch nicht.<br />

display: -moz-flex;<br />

display: -webkit-flex;<br />

Im <strong>Internet</strong> finden Sie viele Artikel, die<br />

die älteren, heute nicht mehr relevanten<br />

Versionen von Flexbox beschreiben.<br />

Dass es sich um ältere Versionen handelt,<br />

erkennen Sie daran, dass für display<br />

andere Werte angegeben werden als das<br />

heutige gültige flex. So wurde an dieser<br />

Stelle in der älteren Version der Flexbox-<br />

Spezifikation display: box benutzt, in einer<br />

Zwischenversion lautete die Angabe<br />

hingegen display: flex-box.<br />

Als Nächstes müssen Sie bestimmen,<br />

wie die Kindelemente des Flexcontainers<br />

angeordnet werden sollen. Dafür<br />

gibt es die Eigenschaft flex-direction, bei<br />

der unterschiedliche Werte angegeben<br />

werden können. Die zwei wichtigsten<br />

Werte sind:<br />

1. flex-direction: row bewirkt, dass die<br />

Kindelemente in einer Zeile, also nebeneinander<br />

angeordnet werden. Darüber<br />

lassen sich zum Beispiel mehrspaltige<br />

Layouts realisieren.<br />

2. flex-direction: column wiederum ordnet<br />

die Kindelemente untereinander<br />

an. Das können Sie für eine Fußzeile<br />

einsetzen, die unten stehen soll.<br />

Im Beispiel wollen wir die Elemente<br />

nebeneinander anordnen. Für Chrome/<br />

Firefox müssen wir diese Angabe mit<br />

Präfix schreiben:<br />

16 0413 internet magazin

---

Flexbox | SPECIAL<br />

-webkit-flex-direction: row;<br />

-moz-flex-direction: row;<br />

flex-direction: row;<br />

Übrigens könnten Sie die Angabe in<br />

diesem Fall auch weglassen, da flex-direction:<br />

row der Standardwert ist. Damit<br />

sind die Formatierungen für den Flexcontainer<br />

abgeschlossen und sehen nun<br />

folgendermaßen aus:<br />

.container {<br />

display: -webkit-flex;<br />

display: -moz-flex;<br />

display: flex;<br />

-webkit-flex-direction: row;<br />

-moz-flex-direction: row;<br />

flex-direction: row;<br />

}<br />

Die Flexitems erhalten im Beispiel unterschiedliche<br />

Hintergrundfarben und<br />

außerdem passende Breitenangaben –<br />

zu einer flexibleren Lösung kommen<br />

wir später noch. Damit ist das erste<br />

Beispiel fertig: Die Elemente sind nebeneinander<br />

angeordnet. Außerdem<br />

sind sie immer gleich hoch, sie passen<br />

sich also automatisch an das höchste<br />

Element an. Faux-Columns ade –<br />

Tricksereien sind künftig also nicht<br />

mehr notwendig. Zusätzlich können<br />

Sie beim Flexcontainer die Eigenschaft<br />

flex-wrap nutzen. Wenn Sie hier den<br />

Wert wrap zuweisen, dann werden die<br />

horizontal angeordneten Flexitems bei<br />

Bedarf mehrzeilig dargestellt. Außerdem<br />

können Sie flex-direction und flex-wrap<br />

zusammenfassen und die gewünschten<br />

Werte direkt hinter flex-flow schreiben.<br />

Strecken oder zentrieren<br />

Dass sich alle Elemente am höchsten Element<br />

orientieren, können Sie durch die<br />

Eigenschaft align-items auch vorgeben, indem<br />

Sie ihr den Wert stretch zuweisen:<br />

.container {<br />

/* alles andere wie gehabt */<br />

-webkit-align-items: stretch;<br />

-moz-align-items: stretch;<br />

align-items: stretch;<br />

}<br />

Neben stretch stehen weitere Werte zur<br />

Verfügung. Mit align-items: center werden<br />

die Elemente zentriert, mit flex-start<br />

im Beispiel alle oben angeordnet sowie<br />

mit flex-end alle unten.<br />

Varianten für die Verteilung des<br />

überschüssigen Platzes.<br />

Eigenschaften für Flexitems<br />

Im letzten Beispiel haben wir mit festen<br />

Breiten gearbeitet, die so gewählt waren,<br />

dass die Aufteilung auch klappte.<br />

Flexbox erlaubt hier aber natürlich weitere<br />

Flexibilisierungen. Nehmen wir an,<br />

wir wählen Breitenangaben so, dass der<br />

Flexcontainer nicht vollständig gefüllt<br />

ist. Dann können wir mit der Eigenschaft<br />

www.internet-magazin.de 17

---

SPECIAL | Flexbox<br />

justify-content bestimmen, was mit dem<br />

übrigen Platz geschehen soll und wie dieser<br />

verteilt werden soll. Mit space-around<br />

wird der Abstand regelmäßig verteilt.<br />

-webkit-justify-content: space-around;<br />

-moz-justify-content: space-around;<br />

justify-content: space-around;<br />

Wählen Sie stattdessen justify-content:<br />

space-between, so wird der Leerraum<br />

nur zwischen den Elementen angeordnet,<br />

also nicht vor dem ersten und nicht<br />

nach dem letzten.<br />

Automatische Breitenangaben<br />

Die bisher vorgestellten Eigenschaften waren<br />

immer auf den Flexcontainer bezogen.<br />

Eine Reihe von weiteren Eigenschaften<br />

sind für die Flexitems vorgesehen. So<br />

können Sie beispielsweise mit der Eigenschaft<br />

flex die Breitenangaben flexibler<br />

gestalten. Im einfachsten Fall schreiben<br />

Sie hinter flex eine Zahl, die bestimmt, zu<br />

welchen Teilen die Inhalte verteilt werden<br />

sollen. Im Folgenden wird der Kürze halber<br />

auf die Angaben mit den herstellerspezifischen<br />

Präfixen verzichtet.<br />

.eins {<br />

flex: 2;<br />

}<br />

.zwei {<br />

flex: 3;<br />

}<br />

.drei {<br />

flex: 1;<br />

}<br />

Wenn wir davon ausgehen, dass das<br />

umfassende Element eine Breite von 450<br />

Pixel hat, dann ergibt sich folgende Aufteilung:<br />

Insgesamt gibt es 2 + 3 + 1, also<br />

6 Teile. 450 Pixel geteilt durch 6 macht<br />

75 Pixel. Damit lassen sich die Breiten<br />

folgendermaßen bestimmen:<br />

» . eins: 2 * 75 Pixel = 150 Pixel<br />

» . zwei: 3 * 75 Pixel = 225 Pixel<br />

» . drei: 1 * 75 Pixel = 75 Pixel<br />

Die Breiten passen sich natürlich flexibel<br />

an, wenn der umfassende Container eine<br />

andere Breite erhält.<br />

Weiterhin können Sie hinter flex auch<br />

eine präferierte Pixelangabe schreiben,<br />

diese mit dem Teilungsfaktor kombinieren<br />

und einen weiteren Faktor angeben,<br />

der festlegt, wie stark das Element<br />

schrumpfen darf.<br />

Die Freiheit der Reihe<br />

Es gibt immer wieder Fälle, in denen<br />

man eine bestimmte Reihenfolge bei den<br />

Elementen im Quellcode braucht, aber<br />

eine andere Reihenfolge in der Anzeige.<br />

Meist bekommt man das irgendwie mit<br />

CSS-Tricksereien hin, aber einfacher und<br />

intuitiver geht es, wenn man die Reihenfolge<br />

mit Flexbox über die Eigenschaft order<br />

festlegt. Hinter order geben Sie eine<br />

Zahl an und je höher sie ist, desto später<br />

erscheint das entsprechende Element.<br />

Standardmäßig haben alle Elemente den<br />

Wert order: 0. Wenn mehrere Elemente<br />

denselben Wert für order haben, bestimmt<br />

die Quellcode-Reihenfolge ihre<br />

Anordnung. Deswegen lautete bei den<br />

bisherigen Beispielen die Reihenfolge<br />

schlicht eins – zwei – drei. Das können<br />

wir ändern, indem wir beispielsweise die<br />

dritte Spalte ganz links platzieren, und<br />

zwar so:<br />

.drei {<br />

order: -1;<br />

}<br />

Bei den anderen Elementen machen wir<br />

keine order-Angabe. Damit werden die<br />

Spalten jetzt in der Reihenfolge drei –<br />

eins – zwei angezeigt.<br />

Alles fürs Responsive Webdesign<br />

Gerade beim Responsive Webdesign<br />

ist Flexbox ungeheuer praktisch. So<br />

kann man beispielsweise Elemente<br />

bei viel verfügbarem Platz nebeneinander<br />

anordnen:<br />

.container {<br />

display: flex;<br />

flex-direction: row;<br />

}<br />

Und bei weniger verfügbarem Platz lässt<br />

man sie untereinander anordnen:<br />

@media screen and (max-width: 600px) {<br />

.container {<br />

flex-direction: column;<br />

}<br />

}<br />

Auf kleinen Bildschirmen wird im Allgemeinen<br />

das „Content First“-Prinzip<br />

empfohlen, somit steht der Inhalt vor der<br />

Navigation. Auch das ist dank order kein<br />

Problem mit Flexbox. Und schließlich<br />

lassen sich auch komplexere Layoutvarianten<br />

realisieren,<br />

indem beispielsweise<br />

bei mittelgroßen Bildschirmen<br />

die Inhalte<br />

teilweise nebeneinan-<br />

Die Reihenfolge ist<br />

rasch geändert.<br />

18 0413 internet magazin

---

Flexbox | SPECIAL<br />

der, teilweise untereinander dargestellt<br />

werden – flex-wrap macht‘s möglich.<br />

Flexbox schon jetzt?<br />

Wie aber kann man Flexbox heute schon<br />

einsetzen in Anbetracht einer eher durchwachsenen<br />

Browserunterstützung? Dafür<br />

hat Zoe Gillenwater zwei Vorschläge:<br />

Zum einen lässt sich Flexbox für kleine<br />

Layoutverbesserungen verwenden im<br />

Sinne des Progressive Enhancements.<br />

Und zum anderen kann man alternative<br />

Formatierungen für Browser bereitstellen,<br />

die Flexbox nicht implementiert haben.<br />

Sehen wir uns ein Beispiel für Letzteres<br />

anhand einer horizontalen Navigation<br />

an. In Browsern, die Flexbox unterstützen,<br />

profitieren wir von den ausgefeilten<br />

Steuermöglichkeiten mit Flexbox. Für andere<br />

Browser setzen wir die Anordnung<br />

mit CSS-Tabellen über die Eigenschaft<br />

display mit den Werten table und row.<br />

Die HTML-Basis ist eine klassische Navigationsleiste<br />

mit dem umfassenden nav-<br />

Element und einer ungeordneten Liste.<br />

<br />

<br />

Navpunkt<br />

<br />

<br />

<br />

Um zu ermitteln, ob Flexbox unterstützt<br />

wird, bietet sich Modernizr an. Ein angepasstes<br />

Modernizr-Skript können Sie auf<br />

der Modernizr-Download-Seite herunterladen.<br />

Wählen Sie hierfür das Kästchen<br />

„Flexible Box Model (Flexbox)“ aus. Modernizr<br />

müssen Sie dann im Kopfbereich<br />

Ihres Dokuments einbinden.<br />

Modernizr modifiziert das HTML-Start-<br />

Tag. Wenn ein Browser Flexbox unterstützt,<br />

lautet das HTML-Start-Tag:<br />

<br />

Wird Flexbox nicht unterstützt, sieht das<br />

HTML-Start-Tag hingegen so aus:<br />

<br />

Damit können wir unterschiedliche Formatierungen<br />

definieren. Zuerst kommen<br />

die Formatierungen für alle Browser: Das<br />

umfassende ul wird in eine Tabellendarstellung<br />

gebracht und die einzelnen li-<br />

Elemente definieren wir als Zellen.<br />

nav ul {<br />

display: table;<br />

width: 100%;<br />

margin: 0;<br />

padding: 0;<br />

list-style: none;<br />

}<br />

nav li {<br />

display: table-cell;<br />

text-align: center;<br />

}<br />

Diese Formatierungen überschreiben wir<br />

mit den Flexbox-Angaben, sofern Flexbox<br />

unterstützt wird. In diesem Fall hat das<br />

HTML-Start-Tag die Klasse flexbox und<br />

dann greift der Selektor .flexbox nav ul.<br />

Wir definieren die Flexbox-Darstellung<br />

und können beispielsweise festlegen,<br />

dass der Platz gleichmäßig zwischen allen<br />

Elementen aufgeteilt wird.<br />

.flexbox nav ul {<br />

display: flex;<br />

justify-content: space-between;<br />

}<br />

Leider wird derzeit bei der Überprüfung<br />

von Modernizr der IE 10 als Flexbox-fähig<br />

eingestuft wird, obwohl er lediglich<br />

eine Vorversion unterstützt. Deswegen<br />

sollten Sie noch die Angaben für ihn ergänzen,<br />

und zwar:<br />

.flexbox nav ul {<br />

/* Ergänzung IE10 */<br />

display: -ms-flexbox;<br />

-ms-flex-direction: row;<br />

-ms-flex-pack: justify;<br />

}<br />

Für die einzelnen li-Elemente müssen<br />

wir die vorher gewählte Tabellenzellendarstellung<br />

aufheben. Dafür setzen wir<br />

Links zum Thema<br />

Flexbox-Spezifikation<br />

http://www.w3.org/TR/css3-<br />

flexbox/<br />

Einführung in Flexbox<br />

http://dev.opera.com/articles/<br />

view/flexbox-basics/<br />

Layoutherausforderungen mit Flexbox<br />

lösen<br />

http://css3-leitfaden.<br />

de/2013/01/28/layouts-mitflexbox/<br />

Zoe Gillenwater über die neuen Layoutmodule<br />

http://zomigi.com/blog/futurecss-layout-fowd/<br />

Modernizr<br />

http://modernizr.com/download/<br />

https://github.com/Modernizr/<br />

Modernizr/issues/744<br />

Flexbox-Eigenschaften interaktiv testen<br />

http://demo.agektmr.com/flexbox/<br />

die display-Eigenschaft auf den ursprünglichen<br />

Wert – list-item – zurück.<br />

.flexbox nav li {<br />

display: list-item;<br />

padding: 0 10px;<br />

}<br />

Nach diesem Prinzip lässt sich Flexbox<br />

also mit Fallbacklösungen benutzen.<br />

Warum aber soll man sich eigentlich<br />

schon heute mit Flexbox beschäftigen,<br />

wo es noch keine breite Unterstützung<br />

dafür gibt? Weil man bei allen CSS3-<br />

Neuerungen und auch bei den Herausforderungen,<br />

die das Webdesign heute an<br />

uns stellt, um das Thema Flexibilisierung<br />

nicht mehr herumkommt. Damit verbunden<br />

ist die Frage, wie man „gestalten“<br />

kann, ohne genaue Kontrolle zu haben.<br />

In dieser Hinsicht ist das Flexbox-Modul<br />

wegweisend und wer sich nicht von dem<br />

zu erwartenden Durchbruch von Flexbox<br />

überrollen lassen will, sollte sich frühzeitig<br />

damit auseinandersetzen – zumal es<br />

ja auch so viele schöne und praktische<br />

Möglichkeiten für Webdesigner bietet.<br />

Dr. Florence Maurice<br />

www.internet-magazin.de 19

---

WEBDESIGN | Responsives Webdesign<br />

Mehr Performance fürs<br />

Responsive Webdesign<br />

Trotz aller Verzüge gibt es auch einen Schwachpunkt beim Responsive Webdesign:<br />

Die Performance ist oft schlecht, da dieselben Ressourcen für stationäre und mobile<br />

Geräte verwendet werden. Der Artikel zeigt nützliche Techniken, wie Sie dem<br />

Performance-Problem beikommen.<br />

Die Performance von Websites wird<br />

oft vernachlässigt, man konzentriert<br />

sich lieber auf augenfälligere Elemente<br />

erschwerend hinzu, dass die Verbindung<br />

meist schlechter und zudem die Latenzzeit<br />

größer ist. Aber, könnte man einwen-<br />

»<br />

zuvor waren es nur 58 Prozent – die<br />

Tendenz ist also steigend.<br />

74 Prozent der mobilen Nutzer war-<br />

wie schicke Layoutentwürfe und ausge-<br />

den, ist das wirklich so schlimm? Haben<br />

ten nur 5 Sekunden oder kürzer, bis die<br />

feilte grafische Effekte. Allerdings ist Per-<br />

Nutzer, wenn Sie mobil ins <strong>Internet</strong> ge-<br />

Seite geladen ist.<br />

formance alles andere als unwichtig, im<br />

hen, nicht auch entsprechend mehr Ge-<br />

»<br />

60 Prozent der mobilen Nutzer war-<br />

Gegenteil. Beim mobilen Zugriff kommt<br />

duld? Dass das nicht der Fall ist, zeigt die<br />

ten nur 3 Sekunden, bis eine Seite<br />

Auf einen Blick<br />

Gerade auf mobilen Geräten mit oft<br />

nicht gerader schneller <strong>Internet</strong>verbindung<br />

ist die Performance einer Website<br />

von entscheidender Bedeutung. Dieser<br />

Artikel verrät, wie Sie Sites beim Responsive<br />

Webdesign optimal auf Leistung<br />

trimmen.<br />

Untersuchung „Mobile Web Experience<br />

Survey“ von Equation Research. Ein paar<br />

alarmierende Fakten:<br />

» 71 Prozent der mobilen Nutzer erwarten,<br />

dass Websites auf einem mobilen<br />

Gerät genauso schnell laden wie auf<br />

einem Desktop-Rechner. Der Wert<br />

stammt übrigens aus einer Untersuchung<br />

aus dem Jahr 2011. Zwei Jahre<br />

»<br />

»<br />

»<br />

geladen ist.<br />

77 Prozent der mobilen Seiten der<br />

wichtigsten Firmen erfüllen gerade die<br />

Bedingung der kurzen Ladezeit nicht.<br />

57 Prozent der Benutzer würden eine<br />

langsam ladende Seite nicht empfehlen.<br />

43 Prozent der Nutzer werden wahrscheinlich<br />

nicht zu einer langsam ladenden<br />

Seite zurückkommen.<br />

20 0413 internet magazin

---

Responsives Webdesign | WEBDESIGN<br />

Gerade beim Responsive Webdesign<br />

(RWD) ist aber die Performance problematisch.<br />

Das Grundprinzip beim RWD<br />

ist, dass ein- und dieselbe Basis für die<br />

mobilen und die anderen Nutzer bereitgestellt<br />

wird. Damit hat man natürlich<br />

beim RWD weniger Möglichkeiten,<br />

gezielt Performance-Optimierungen<br />

für mobile Nutzer vorzunehmen, als<br />

wenn man eine separate mobile Webseite<br />

erstellt. Aber glücklicherweise gibt<br />

es auch dafür Lösungen. Sehen wir uns<br />

erst einmal allgemeine Strategien für die<br />

Methodik an und befassen wir uns dann<br />

mit zwei Themen im Detail: Bildoptimierungen<br />

und Conditional Loading.<br />

Höhere Priorität<br />

für die Performance<br />

Ein wichtiger Schritt hin zu einer besseren<br />

Performance ist es, sich das Problem<br />

überhaupt bewusst zu machen und die<br />

Performance von Anfang an mit zu berücksichtigen,<br />

anstatt die größten Fehler<br />

erst im Nachhinein zu beseitigen. Und<br />

das heißt immer auch: testen! Dabei<br />

hilft Mobitest von Akamai; mit diesem<br />

Online-Tool können Sie die Performance<br />

von Websites auf echten mobilen Geräten<br />

simulieren und erhalten detaillierte<br />

Ergebnisse. Wichtig ist natürlich ebenso<br />

der Test auf echten Geräten – aber dann<br />

bitte auch unter „echten“ Umständen,<br />

also nicht nur im komfortablen WLAN.<br />

Progressive Enhancement: Man geht<br />

also von einer funktionierenden Basis<br />

für kleine Viewports aus und passt dann<br />

schrittweise für größere Viewports an.<br />

Die Angaben für die kleinen Viewports<br />

stehen außerhalb von Media Queries.<br />

Danach folgen weitere Media Queries<br />

mit min-width-Angaben, die das Layout<br />

sukzessive für größere Viewports<br />

anpassen. Das kann dann etwa wie im<br />

Beispiel unten aussehen – die gewählten<br />

Größen sind natürlich willkürlich<br />

gewählt und sollten von den aktuellen<br />

Inhalten beziehungsweise den Erfordernissen<br />

des aktuellen Layouts bestimmt<br />

werden.<br />

/* Allgemeine Angaben und Angaben für<br />

kleine Viewports */<br />

@media screen and (min-width: 25em) {<br />

/* Anpassungen bei einer Viewportgröße<br />

von 25em */<br />

}<br />

@media screen and (min-width: 40em) {<br />

/* Anpassungen für eine Viewportgröße<br />

von 40em */<br />

}<br />

Die Sache mit den Bildern<br />

Ein heikler Punkt beim Responsive<br />

Webdesign sind die Bilder. Die von<br />

Ethan Marcotte ursprünglich vorgesehene<br />

Lösung für Bilder im RWD ist sehr<br />

einfach anzuwenden. Bei ihr werden<br />

Bilder so skaliert, dass sie nie größer<br />

werden als der sie umgebende Container.<br />

Konkret bedeutet das, dass meist<br />

die großen, für Desktop-Rechner vorgesehenen<br />

Bilder mit folgendem Code<br />

kleingezurrt werden:<br />

img { max-width: 100%; }<br />

Das Problem daran: Auch bei kleinem<br />

Viewport werden die großen (groß in<br />

puncto Abmessungen und Datenvolumen)<br />

Bilder geladen. Wie gravierend<br />

das im Einzelfall ist, hängt von der<br />

Anzahl der auf diese Art behandelten<br />

Bilder und Dateigröße ab.<br />

Die Alternative ist klar: Bei kleinem<br />

Viewport müssen eigenesangepasste<br />

Bilder ausgeliefert werden. Dafür gibt<br />

es verschiedene Techniken.<br />

Recht praktisch lässt sich das Ausliefern<br />

unterschiedlicher Bilder beispielsweise<br />

Mobile First<br />

Beim Responsive Webdesign gibt es<br />

unterschiedliche Herangehensweisen.<br />

Oft geht man von einer bestehenden<br />

Desktop-Version aus oder erstellt zuerst<br />

das Desktop-Layout. Darauf basierend<br />

werden dann die Anpassungen für die<br />

kleinere Viewports vorgenommen. Für<br />

eine verbesserte Performance ist hingegen<br />

der umgekehrte Ansatz – Mobile<br />

First – erfolgsversprechender. Mobile<br />

First hat einen ähnlichen Ansatz wie<br />

Mobitest testet die Performance von Websites auf echten mobilen Geräten.<br />

www.internet-magazin.de 21

---

WEBDESIGN | Responsives Webdesign<br />

mit dem Skript Adaptive Images von Matt<br />

Willcox bewerkstelligen. Bei Adaptive<br />

Images übernimmt ein PHP-Skript serverseitig<br />

die Skalierung der Bilder, danach<br />

werden die größenoptimierten Bilder an<br />

die Browser ausgeliefert. Ausgelöst wird<br />

die Skalierung der Bilder durch eine<br />

.htacess-Datei, die die Bildanfragen an<br />

das PHP-Skript weiterleitet. Schließlich<br />

ist noch ein Javascript-Codeschnipsel<br />

beteiligt, das die Viewportgröße ausliest<br />

und in einem Cookie speichert.<br />

Und so verwenden Sie Adaptive Images:<br />

Die .htaccess-Datei und das PHP-Skript<br />

adaptive-images.php speichern Sie im<br />

Wurzelverzeichnis des Webprojekts. In<br />

der Datei adaptive-images.php geben<br />

Sie über ein Array die Bildschirmgrößen<br />

vor, für die eigene Bilder erzeugt werden<br />

sollen:<br />

$resolutions = array(1382, 992, 768, 480);<br />

Erstellen Sie außerdem ein beschreibbares<br />

Verzeichnis ai-cache, in dem die<br />

skalierten Bilder gespeichert werden.<br />

In den Kopfbereich Ihrer einzelnen Dokumente<br />

fügen Sie dann noch den folgenden<br />

Javascript-Code ein:<br />

document.<br />

cookie=‘resolution=‘+Math.max(screen.<br />

width,screen.height)+‘; path=/‘;<br />

Ab Version 1.5 von Adaptive Images<br />

ist eine Unterstützung für Retina-Bildschirme<br />

enthalten, wenn Sie diese nutzen<br />

wollen, lautet der Javascript-Code:<br />

document.<br />

cookie=‘resolution=‘+Math.<br />

max(screen.width,screen.<br />

height)+(„devicePixelRatio“ in window<br />

? „,“+devicePixelRatio : „,1“)+‘;<br />

path=/‘;<br />

Adaptive Images ist nur eine von mehreren<br />

möglichen Techniken, um Bilder<br />

anzupassen. Und es wird in Zukunft weitere<br />

Lösungen geben. In welche Richtung<br />

der Trend geht, zeigt ein Blick in die Ergebnisse<br />

der Arbeitsgruppe des W3C, die<br />

sich mit diesem Thema befasst.<br />

Zukunftsbilder<br />

Die W3C-Arbeitsgruppe will nicht nur<br />

das Problem der richtigen Bildgröße lösen,<br />

sondern auch noch um Lösungen<br />

für hochauflösende Displays ergänzen.<br />

Es werden also dafür eigens optimierte<br />

Bilder verwendet, sofern es die Bandbreite<br />

der Verbindung zulässt.<br />

Und noch einen weiteren Punkt hat die<br />

Arbeitsgruppe im Blick: Nicht immer<br />

ist eine reine Größenänderung bei den<br />

Bildern wie etwa bei Adaptive Images<br />

eine gute Lösung. In manchen Fällen ist<br />

es sinnvoller, wenn das Bild beschnitten<br />

wird, damit das Wesentliche auch auf<br />

dem kleinen Bild gut zu erkennen ist.<br />

Nehmen wir an, eine Person wird vor<br />

einem Gebäude fotografiert. Dann kann<br />

es günstiger sein, dass bei wenig verfügbarem<br />

Platz Teile des Hintergrunds entfernt<br />

werden, damit das Wichtigste auf<br />

dem Foto – die Person – nicht zu klein<br />

wird.<br />

Der derzeitige Vorschlag, der all die verschiedenen<br />

Punkte berücksichtigt, sieht<br />

folgendermaßen aus:<br />

<br />

<br />

<br />

<br />

<br />

Accessible text<br />

<br />

Innerhalb des neu eingeführten Elements<br />

picture stehen mehrere mögliche Quellen<br />

(source-Elemente) für das Bild bereit,<br />

das angezeigt werden soll. Durch das<br />

zusätzliche media-Attribut können vom<br />

Viewport abhängige Bilder angegeben<br />

werden. Über die srcset-Angabe lassen<br />

sich dann noch unterschiedliche Bilder<br />

je nach Auflösung bestimmen, die der<br />

Browser nach Situation anfordern kann.<br />

Inzwischen gibt es schon einen vielversprechenden<br />

Polyfill, sodass man das<br />

picture-Element bereits einsetzen könnte.<br />

Die Website<br />

der Responsive<br />

Images AG<br />

demonstriert die<br />

Anforderungen<br />

an wirklich flexible<br />

Bilder.<br />

22 0413 internet magazin

---

Responsives Webdesign | WEBDESIGN<br />

Allerdings sollte man damit erst anfangen,<br />

wenn zumindest ein Browser das<br />

picture-Element auch nativ unterstützt.<br />

Bis dahin greifen wir besser zu anderen<br />

Techniken wie Adaptive Images– was<br />

sonst noch an Lösungsansätzen zur Verfügung<br />

steht, finden Sie in einer nützlichen<br />

Tabelle von Chris Coyier (Link zur<br />

Tabelle im Kasten rechts).<br />

Links zum Thema<br />

Untersuchungen zur Performance-Erwartung<br />

mobiler Nutzer<br />

http://www.gomez.com/wpcontent/uploads/CPWR-MWD-<br />

Infographic-FNL3.pdf<br />

Performance von Webseiten auf mobilen<br />

Geräten testen<br />

http://mobitest.akamai.com/<br />

Responsive Images<br />

http://adaptive-images.com/<br />

http://responsiveimages.org/<br />

http://css-tricks.com/whichresponsive-images-solutionshould-you-use/<br />

Conditional Loading<br />

http://24ways.org/2011/<br />

conditional-loading-forresponsive-designs/<br />

http://bradfrostweb.com/demo/<br />

mobile-first/article.html<br />

http://filamentgroup.com/lab/<br />

ajax_includes_modular_content/<br />

Conditional Loading<br />

Oft werden beim Responsive Webdesign<br />

Inhalte, die bei bestimmten Viewports<br />

nicht gewünscht sind, mit display:<br />

none ausgeblendet. Die so formatierten<br />

Elemente sind dadurch zwar nicht mehr<br />

sichtbar, sie werden aber trotzdem heruntergeladen.<br />

Das heißt, auch wenn<br />

Sie etwa einen großen Werbeblock mit<br />

display: none bei kleinem Viewport ausblenden<br />

lassen, muss ihn das Mobilgerät<br />

aus dem Netz saugen – und das braucht<br />

Ladezeit, die der mobile Nutzer teuer bezahlt,<br />

wobei er die Inhalte nicht einmal<br />

zu sehen bekommt.<br />

Eine bessere Strategie, ausgewählte Inhalte<br />

nur unter bestimmten Bedingungen<br />

darzustellen, bietet das Conditional Loading.<br />

So kann man beispielsweise bei<br />

kleinem Viewport die wesentlichen Informationen<br />

anzeigen, bei größerem<br />

Viewport weitere Details. Ein Beispiel für<br />

Conditional Loading zeigt Brad Frost auf<br />

seiner Shopdemo-Seite: Die Rubrik „ähnliche<br />

Produkte“ wird bei kleinem Viewport<br />

erst auf Aufforderung, bei großem<br />

Viewport hingegen direkt geladen.<br />

Sehen wir uns anhand eines Beispiels an,<br />

wie das funktioniert. Zuerst benötigen<br />

wir ein externes HTML-Dokument, das<br />

im Beispiel zusatz.html heißen soll und<br />

die weiterführenden Informationen innerhalb<br />

eines div-Elements mit id=“content“<br />

beinhaltet.<br />

Kommen wir zum Hauptdokument, in<br />

dem Inhalte konditional geladen werden<br />

sollen. Im HTML-Code gibt es ein umfassendes<br />

Element mit einem Link auf die<br />

Zusatzinfos. Damit steht schon einmal<br />

eine funktionierende Minimallösung,<br />

falls Javascript nicht unterstützt wird:<br />

Die Inhalte können ganz normal über<br />

den Link angefordert werden.<br />

<br />

Zusatzinfos<br />

<br />

Jetzt können wir mit Javascript die Ergänzungen<br />

ab einer bestimmten Breite des<br />

Viewports laden:<br />

if (document.documentElement.<br />

clientWidth > 440) {<br />

laden();<br />

}<br />

In der nun zu erstellenden Funktion laden()<br />

– im Beispiel wird jQuery eingesetzt<br />

– definieren wir zuerst einmal ein<br />

paar Variablen, die wir im Weiteren brauchen:<br />

zusatz verweist auf das Element<br />

mit der Klasse zusatz, in das die Inhalte<br />

geladen werden sollen. Die Variable zusatzLink<br />

greift auf das darin befindliche<br />

a-Element zu und zusatzFragment holt<br />

sich den bei href angegebenen Pfad.<br />

function laden() {<br />

var zusatz = $(‚.zusatz‘),<br />

zusatzLink = $(‚.zusatz a‘),<br />

zusatzFragment = zusatzLink.<br />

attr(‚href‘);<br />

Nun fehlt noch das magische Laden.<br />

Dafür erstellen wir zuerst ein neues<br />

div-Element. Für dieses rufen wir die<br />

von jQuery vordefinierte Ajax-Funktion<br />

load() auf. Ihr übergeben wir den Pfad<br />

zum Dokument samt Identifier für den<br />

Ausschnitt. Als zweiter Parameter steht<br />

eine Callback-Funktion, die – wenn der<br />

Ladevorgang abgeschlossen ist – das div-<br />

Element mit den neuen Inhalten an unser<br />

zusatz-Element anhängt.<br />

$(‚‘).load(zusatzFragment +‘<br />

#content ‚,function() {<br />

$(this).appendTo(zusatz);<br />

});<br />

} /* schließende Klammer von laden() */<br />

Damit ist das Beispiel abgeschlossen. Bei<br />

kleinem Viewport oder deaktiviertem Javascript<br />

werden die Basisinformationen<br />

angezeigt, die zusätzlichen Informationen<br />

können per Link angefordert werden.<br />

Bei größerem Viewport und aktiviertem<br />

Javascript werden die Inhalte<br />

hingegen automatisch per Ajax geladen<br />

und angezeigt. Das Beispiel lässt sich<br />

noch in mehrerer Hinsicht verbessern:<br />

» Es wäre sinnvoll, einen Test durchzuführen,<br />

ob die Inhalte nicht schon<br />

geladen sind – beispielsweise könnte<br />

man zusätzlich auch eine Klasse ergänzen,<br />

die den Zustand anzeigt.<br />

» Der Link auf die zusätzlichen Informationen<br />

ist auch bei großem Viewport<br />

aktiv, obwohl man ihn dort natürlich<br />

nicht braucht.<br />

» Bei der derzeitigen Version können<br />

Benutzer kleiner Bildschirme die zusätzlichen<br />

Inhalte nur durch Klick auf<br />

Links erreichen, wodurch sie auf die<br />

neuen Unterseiten gelangen. Schöner<br />

wäre es, wenn durch Klick auf einen<br />

www.internet-magazin.de 23

---

WEBDESIGN | Responsives Webdesign<br />

Link die Inhalte mit Ajax direkt in das<br />

angegebene Dokument geladen werden<br />

würden.<br />

» Im Beispiel wird nur beim Aufruf der<br />

Website überprüft, ob die Inhalte per<br />

Ajax geladen werden. Man könnte<br />

auch einen zusätzlichen Event Handler<br />

einbauen, der Änderungen an der Größe<br />

des Browserfensters abfängt. Wobei<br />

aber natürlich fraglich ist, wie viele<br />

Nutzer die Größe des Browserfensters<br />

verändern und von angepassten Inhalten<br />

profitieren – abgesehen von den<br />

RWD-fixierten Webdesignern.<br />

Skript fürs Conditional Loading<br />

Die Filament Group, die an der Realisierung<br />

der Boston-Globe-Webseite beteiligt<br />

war, hat ein Skript entwickelt, das<br />

den Vorgang des Conditional Loading<br />

vereinfacht. Dieses Skript können Sie bei<br />

Github herunterladen.<br />

Das Prinzip ist folgendes: Im HTML-<br />

Code werden Elemente, bei denen es<br />

zusätzliche Informationen gibt, besonders<br />

gekennzeichnet und diese enthalten<br />

außerdem einen Links auf die Datei,<br />

die dann per Ajax geholt werden kann.<br />

Im folgenden Beispiel steht beim HTML-<br />

Element ein selbstdefiniertes Attribut mit<br />

Namen data-after, das festlegt, dass Inhalte<br />

danach erscheinen sollen. Als Wert<br />

dieses Attributs steht der Pfad zur Datei<br />

mit den Informationen. Außerdem kann<br />

mit dem Attribut data-media festgelegt<br />

werden, ab welcher Viewportgröße der<br />

zusätzliche Inhalt geladen wird.<br />

Related External Links<br />

In diesem Fall werden die in der Datei<br />

links.html stehenden zusätzlichen Informationen<br />

ab einer Größe von 40em<br />

direkt angezeigt, sie können allerdings<br />

bei kleinerem Bildschirm auch normal<br />

per Link angefordert werden. Damit das<br />

… und werden auf<br />

größeren Bildschirmen<br />

per Ajax nachgeladen.<br />

Beispiel funktioniert, müssen Sie eine<br />

Reihe von Javascript-Dateien einbinden<br />

und das Skript starten:<br />

$( „[data-after]“ ).ajaxInclude( );<br />

Im Download-Ordner des Projekts bei<br />

Github finden Sie Beispiele für die unterschiedlichen<br />

Optionen. Praktisch ist<br />

auch eine Variante, die die einzelnen<br />

externen Dateien zusammenfasst; das<br />

ist gerade dann sinnvoll, wenn mehrere<br />

einzelne Komponenten per Conditional<br />

Loading geladen werden.<br />

Mehr Performance-Optimierung<br />

Die richtige Strategie für Bilder und das<br />

Conditional Loading sind für die Leistung<br />

beim RWD von gleicher Wichtigkeit. Darüber<br />

hinaus empfiehlt es sich, allgemeine<br />

Performance-Optimierungen durchzuführen.<br />

Dabei sollte man die Anzahl<br />

der HTTP-Requests möglichst klein halten.<br />

Hilfreich kann hier Folgendes sein:<br />

» Statt Formatierungen über Grafiken zu<br />

realisieren, greifen Sie – falls möglich<br />

– lieber zu CSS. So können Sie beispielsweise<br />

Farbverläufe für Buttons<br />

direkt über CSS3 realisieren und auf<br />

Hintergrundgrafiken verzichten.<br />

» UTF-8 beinhaltet nicht nur viele Buchstaben,<br />

sondern auch eine große Anzahl<br />

an Symbolen. Wenn Sie diese<br />

Conditional Loading bei der Demoseite von<br />

Brad Frost: Auf kleinem Bildschirm sind die<br />

ähnlichen Produkte ausgeblendet …<br />

anstelle von Bildern einsetzen, sparen<br />

Sie sich etliche HTTP-Requests.<br />

» Mehrere Hintergrundbilder lassen sich<br />

zu einem Bild zusammenfassen, wobei<br />

über background-position dann immer<br />

der passende Ausschnitt ausgewählt<br />

wird (CSS-Sprites).<br />

» Kleine Bilder können Sie über Data-<br />

URLs direkt im Dokument integrieren.<br />

Zur weiteren Performance-Verbesserungen<br />

gehört auch die richtige Caching-<br />

Strategie, die verhindert, dass Dateien, die<br />

sich nicht geändert haben, erneut geladen<br />

werden. Außerdem können Sie die Größe<br />

von CSS- und Javascript-Dateien durch<br />

Minimierung verkleinern.<br />

Performance ist wichtig. Wenn man nur<br />

eine Sache für die mobilen User tun<br />

kann, sollte man die Performance optimieren.<br />

Das, so behauptet Jason Grigsby,<br />

sei sogar wichtiger als ein per RWD<br />

angepasstes Layout (http://blog.cloudfour.com/first-thing-you-should-do-tooptimize-your-desktop-site-for-mobile/).<br />

Vielen mag diese Aussage zu extrem<br />

erscheinen. Eines aber ist sicher: Eine<br />

Site, die sich zwar optisch hübsch an die<br />

kleineren Bildschirme anpasst, aber ewig<br />

lange Ladezeiten hat, bietet den mobilen<br />

Nutzern nicht das, was sie gern hätten.<br />

Dr. Florence Maurice<br />

24 0413 internet magazin

---

Die 1blu-Homepage „2in1“<br />

ist Homepagepaket und<br />

Onlinespeicher in einem.<br />

Erhältlich ist das Produkt zum<br />

Dauerpreis von 2,89 €/Monat*<br />

nur bis Ende März 2013!<br />

Diese beiden sind unzertrennlich<br />

Homepage 2 in 1<br />

Homepage<br />

> 4 .de-Inklusiv-Domains<br />

> 50 GB Webspace<br />

> Unbegrenzter Traffic<br />

> Unbegrenzte E-Mail-Postfächer<br />

> 50 GB E-Mail-Speicher<br />

> Unbegrenzte FTP-Zugänge<br />

> 50 MySQL-Datenbanken<br />

> PHP5, Perl, Python, SSI, SSH<br />

Onlinespeicher 100 GB<br />

> 100 GB Onlinespeicher für Ihre Daten<br />

> Web-Bedienoberfläche und WebDav-Zugriff (SSL)<br />

> Multiuser – 2 Benutzerkonten<br />

> Keine Download- oder Traffic-Limits<br />

> Dateisharing- und Multiupload-Funktion<br />

> Kostenlose Apps für<br />

mobile Geräte (iOS/Android)<br />

* Preis/Monat inkl. 19% MwSt. Angebot verfügbar ab 22. Februar 2013 (Näheres unter www.1blu.de). Es fällt keine<br />

Einrichtungsgebühr an. Vertragslaufzeit jeweils 6 Monate, jederzeit kündbar mit einem Monat Frist zum Vertragsende.<br />

Bei Software-Bestellung 7,90 € Versandkosten.<br />

Dauerpreis<br />

2, 89<br />

¤/Monat*<br />

Homepage + Onlinespeicher<br />

030 - 20 18 10 00 | nur unter www.1blu.de/2in1

---

WEBDESIGN | Map APIs<br />

als 0,35 Prozent würden das freie Kontingent<br />

dauerhaft überschreiten.<br />

Dennoch blieben Googles stolze Preisforderungen<br />

nicht ohne Auswirkungen<br />

auf die Landschaft der Karten-APIs. Bei<br />

Google Maps API handelt es sich um<br />

eine ganze Sammlung von leistungsstarken<br />

APIs, mit denen Sie Geofunktionen<br />

in Ihre Websites wie beispielsweise<br />

mit Google Maps Javascript API v3 oder<br />

Google Earth API sowie in mobile Apps<br />

einbauen können.<br />

Bild: 1000 Words / shutterstock.com<br />

Map-APIs: Google<br />

& die Alternativen<br />

Die mobile Revolution hat einen enormen Bedarf an<br />

ortsgebundenen Funktionen ausgelöst. Entwickler mobiler<br />

Apps verhelfen ihren Diensten daher mit Benutzerortung<br />

und Standorterkennung zu mehr Bedienungsfreundlichkeit.<br />

Dabei dreht sich alles um Karten-APIs.<br />

Karten-APIs gibt es viele und es<br />

schießen immer wieder neue Lösungen<br />

wie Pilze aus dem Boden. Inzwischen<br />

muss sich der Marktführer<br />

Google nicht nur gegen eine Handvoll<br />

erbitterter Erzrivalen, sondern auch<br />

noch gegenüber einem halben Dutzend<br />

innovativer Herausforderer bewähren.<br />

Mit Karten-APIs von Microsoft (Bing),<br />

Nokia, Apple und neuerdings Amazon<br />

haben Webentwickler es nicht leicht,<br />

den Durchblick im Markt für mobile<br />

Geofunktionen zu wahren.<br />

Google Maps API<br />

Google, der Platzhirsch im Navigationsund<br />

Kartengeschäft für Webdienste,<br />

verwandelte sein API bereits letztes<br />

Jahr in einen kommerziellen Dienst<br />

und wollte sich API-Anfragen teuer bezahlen<br />

lassen. Nach einem Sturm der<br />

Entrüstung in der Entwicklergemeinde<br />

gab Google im Juni letzten Jahres nach<br />

und erweiterte das freie Kontingent<br />

auf 25.000 Anfragen pro Monat. Laut<br />

Google liegen nahezu alle Websites<br />

unterhalb dieser Grenze und weniger<br />

Apple: iOS Maps API und<br />

das Map Kit Framework<br />

Noch bis einschließlich iOS 5.1 nutzte<br />

Apples Map Kit Framework den Mobile<br />

Maps-Dienst von Google (GMM), um<br />

kartografische Daten abzurufen. Ab iOS<br />

6 ist das nicht mehr der Fall. Das Map<br />

Kit Framework von Apple kann jedoch<br />

zumindest intelligent umschalten zwischen<br />

dem neuen API auf iOS-6-Geräten<br />

und dem Google Maps API auf älteren<br />

iOS-Geräten. Solange Entwickler in ihren<br />

Apps keine iOS-6-spezifischen Features<br />

bereitstellen, brauchen sie sich um die<br />

Kompatibilität keine Sorgen zu machen.<br />

Wollen sie jedoch auf die neuen Kartenfunktionen<br />

in iOS nicht verzichten,<br />

müssen sie im Code die entsprechenden<br />

Weichen einbauen oder die neuen Features<br />

mit Hilfe von respondsToSelector-<br />

Abfragen umschiffen, damit die neuen<br />

Features Ihrer Apps Benutzern älterer<br />

Geräte keine Probleme bereiten.<br />

Apple hatte außer Googles Preisforderungen<br />

jedoch noch einen anderen<br />

Grund für den Ausbau der eigenen Kartentechnologie:<br />

den Kampf um die Vormachtstellung<br />

gegen Android OS. Dabei<br />

hatte Apple es sehr eilig, sich von Googles<br />

mobilen Apps für iOS wie dem beliebten<br />

kostenlosen Dienst Google Maps<br />

für das iPhone und iPad zu trennen, um<br />

gegen Samsungs Android-basierte Geräte<br />

gerichtlich zu Feld zu ziehen.<br />

26 0413 internet magazin

---

Map APIs | WEBDESIGN<br />

Als Ersatz für Google Maps führte Apple<br />

mit der Vorstellung von iOS 6 eine eigene<br />

mobile App namens “Karten” auf Basis<br />

von Tomtom ein, und landete damit einen<br />

monumentalen Misserfolg.<br />

Nur wenige Stunden nach der Vorstellung<br />

des iPhone 5 musste der Tablet-<br />

Pionier und Hersteller wegweisender<br />

Elektronik auf seiner Website die eigenen<br />

Anwender für die Fehler und Ungereimtheiten<br />

der Software um Verzeihung<br />

bitten. Falsch platzierte Hochhäuser,<br />

fehlende Flüsse, Autobahnauffahrten im<br />

Stil der Möbius-bandes, geschmolzene<br />

Eisenbahnlinien, irrsinnig surrealistische<br />

Denkmäler und sogar ganze Stadtteile,<br />

die aussahen, als sei ein Raytracing-Rendering-Vorgang<br />

abgestürzt, sorgten für<br />

Schlagzeilen und Spott in der Weltpresse.<br />

Die Karten-App war ein voreiliger<br />

Versuch von Apple, Googles Karten-App<br />

für iOS durch eine eigene Lösung zu ersetzen,<br />

doch die Integration der Kartentechnologie<br />

des von Apple aufgekauften<br />

GPS-Navigationsinnovators Tomtom ist<br />

Apple im großen Stil misslungen. Inzwischen<br />

musste der Konzern einlenken<br />

und Google Maps, auf massiven Druck<br />

der Anwender hin, für iOS 6 wieder<br />

zulassen. Apple arbeitet inzwischen<br />

fieberhaft an einer Korrektur der Fehler,<br />

doch der PR-Schaden und Vertrauensverlust<br />

der Entwicklergemeinde sind<br />

bereits eingetreten. Inzwischen können<br />

Sie aber problemlos auf Googles Maps<br />

SDK für iOS mit Unterstützung für 3D-<br />

Karten ausweichen.<br />

Maps-APIs von Nokia<br />

Totgesagte leben länger und so hat sich<br />

Nokia etwas überraschend zu einem der<br />

relevantesten Mitstreiter auf dem Markt<br />

für Kartentechnologie entwickelt.<br />

Die Kartendienste von Nokia bilden inzwischen<br />

die Grundlage für die Standortfunktionen<br />

auf Flickr.com, CNN<br />

sowie für die APIs anderer Anbieter,<br />

Nein, das ist kein<br />

surrealistisches<br />

Kunstwerk von<br />

Salvador Dalí,<br />

sondern Apples<br />

Version der<br />

Brooklyn Bridge<br />

in New York in<br />

seiner Karten-<br />

App für iOS 6 auf<br />

dem iPad.<br />

darunter Microsofts Bing Maps, Yahoo!<br />

Maps und Trapster.<br />

Für den Zugriff auf das eigene Maps-API<br />

hat Nokia drei Ansätze entwickelt: ein<br />

Javascript-API, eine Sammlung von REST-<br />

APIs und Nokias Framework MH5.<br />

Nokias Maps-API für Javascript ermöglicht<br />

Ihnen die Integration von interaktiven<br />

Kartendiensten mit Hilfe von Klassen-<br />

und Methodenbibliotheken. Das<br />

API unterstützt sowohl mobile Apps als<br />

auch Websites. Der Funktionsumfang<br />

beinhaltet eine leistungsfähige Suche,<br />

Routenermittlung, sowie das Untersuchen<br />

von Verkehrsströmen. Der Einsatz<br />

von HTML5 ist rein optional.<br />

Um Nokias Maps-API für Javascript zu<br />

Google bietet mit<br />

seinem Maps-<br />

API eine ausgereifte<br />

Sammlung<br />

innovativer APIs<br />

mit üppigem<br />

Funktionsumfang,<br />

möchte die Entwickler<br />

erfolgreicher<br />

Apps<br />

und Websites<br />

aber gerne zur<br />

Kasse bitten.<br />

integrieren, fügen Sie Ihrem Dokument<br />

nach der -Deklaration die<br />

benötigten Informationen im -<br />

Abschnitt hinzu, zum Beispiel:<br />

Nokia Maps-API im Einsatz<br />

<br />

<br />

Aus dem -Abschnitt der Website<br />

heraus rufen Sie die benötigten Bibliotheken<br />

mittels Javascript wie folgt auf:<br />

<br />

Sie sind gut beraten, die Version des APIs<br />

www.internet-magazin.de 27

---

WEBDESIGN | Map APIs<br />

nach Bedarf zu aktualisieren und, falls<br />

gewünscht, die Parameter einzuschränken.<br />

Die Angabe von Deutsch als Sprache<br />

ist nicht erforderlich, denn Nokias<br />

API lokalisiert die Daten entsprechend<br />

der Systemsprache des Benutzers rein<br />

automatisch.<br />

Der -Abschnitt der HTML-Seite<br />

muss ein Element beinhalten, welches<br />

die Kartendaten bereitstellen soll, zum<br />

Beispiel ein :<br />

<br />

Auf dieses Element folgt nun ein -<br />

Element, in dem Sie die gewünschten<br />

API-Aufrufe tätigen. Hierzu benötigten<br />

Sie von Nokia – für eine Website wie<br />

auch eine mobile App – eine so genann-<br />

… und die<br />

Möglichkeiten<br />

der Technologie<br />

in Bezug auf Ihre<br />

eigenen Webprojekte<br />

erforschen<br />

te Ap-ID und einen Token, die Sie als<br />

Entwickler gegenüber Nokia authentifizieren.<br />

Diese beiden Dienste müssen Sie<br />

ganz am Anfang des Skriptes wie folgt<br />

verzeichnen:<br />

<br />

nokia.Settings.set( „appId“, „Ihre<br />

App-ID“);<br />

nokia.Settings.set( „authenticationToken“,<br />

„Ihr Token“);<br />

Die App-ID und den Token erhalten Sie<br />

von Nokia nach einer kostenlosen Registrierung,<br />

indem Sie in Ihrem Profil eine<br />

neue App anlegen.<br />

Nach dem Code zur Authentifizierung Ihrer<br />

Web- oder mobilen Applikation folgt<br />

nun der eigentliche Code, zum Beispiel:<br />

var mapContainer = document.<br />

getElementById(„map“);<br />

var DefaultLatitude = 48.136944;<br />

Mit dem Javascript<br />

API<br />

Explorer von<br />

Nokia können Sie<br />

durch konkrete<br />

Anwendungsbeispiele<br />

des APIs<br />

mit Leichtigkeit<br />

navigieren …<br />

var DefaultLongitude = 11.575278;<br />

var defaultZoomLevel = 16;<br />

var mapOptions = {<br />

baseMapType: nokia.maps.map.Display.<br />

NORMAL, center: new nokia.maps.geo.<br />

Coordinate(DefaultLatitude,<br />

DefaultLongitude), zoomLevel:<br />

defaultZoomLevel, components: []<br />

};<br />

var map = new nokia.maps.map.<br />

Display(map, mapOptions);<br />

<br />

Nokias REST-APIs beinhalten das Map-<br />

Image-API und das Places API. Mit Hilfe<br />

des Map-Image-APIs gewähren Sie Ihren<br />

Besuchern schnellen Zugriff auf fertig<br />

gerenderte – also im Gegensatz zum<br />

Map-API für Javascript nicht interaktive<br />

– Kartenbilder unter Verwendung einer<br />

URL mit einer Sammlung von Parametern<br />

zum Bestimmen der geografischen Position,<br />

des Kartentyps, der Zoomstufe und<br />

so weiter. Mit Hilfe des Places-API können<br />

Sie Ihren Benutzern die Funktionen<br />

von Nokias Places im Rahmen der Kartendienste<br />

bereitstellen. Indem Sie dieses<br />

API ansprechen, können Sie für Ihre Benutzer<br />

konkrete Standorte wie etwa ein<br />

Fußballstadium finden und detaillierte<br />

Informationen dazu abrufen.<br />

Das MH5-Framework (MH5 steht für Mobile<br />

HTML5) unterstützt die Entwicklung<br />

plattformübergreifender Web-Apps mit<br />

vorgefertigten Komponenten, die Sie in<br />

eigenen Code einbinden. Mittels externer<br />

Frameworks und Bibliotheken wie jQuery<br />

touch, YUI oder Sencha touch können<br />

Sie Ihre Apps um zusätzliche Funktionen<br />

erweitern und unter Verwendung von<br />

Phonegap auf mehreren Marktplätzen<br />

veröffentlichen. MH5 ist derzeit noch in<br />

der Betaphase und daher uneingeschränkt<br />

kostenlos; Nokia äußert sich jedoch nicht<br />

zu künftigen Preisen. Mit dem API Explorer<br />

bietet Nokia ein Online-Werkzeug,<br />

mit dem Sie die APIs ausprobieren können.<br />

Die Standardversion erlaubt bis zu<br />

28 0413 internet magazin

---

Map APIs | WEBDESIGN<br />

Links zum Thema<br />

Im Inneren von Amazons Tablets werkelt zwar ein Fork von Googles Android OS,<br />

doch Amazons Maps-API greift anstelle von Googles Maps-API auf Nokias Kartendienste<br />

zurück.<br />

eine Million kostenfreie Aufrufe pro Monat.<br />

Mehr API-Aufrufe sind bei Nokia allerdings<br />

kostenpflichtig.<br />

Amazons Maps-API für Kindle Fire HD<br />

Zu den etablierten Anbietern von Map-<br />

APIs möchte sich schon länger Amazon<br />

gesellen. Das kürzlich vorgestellte Maps-<br />

API ist bereits der zweite Versuch Amazons,<br />

auf dem hart umkämpften Markt<br />

Fuß zu fassen. Mit der AWS-Sparte zählt<br />

der unermüdlich innovierende Online-<br />

Händler und Hersteller von Android-basierten<br />

Tablets auch noch zu den größten<br />

Cloud-Hostern der Welt. Nebenbei<br />

betätigt sich Amazon außerdem als Betreiber<br />

der Suchmaschine A9. Mit dem<br />

neuen Maps-API adressiert Amazon vor<br />

allem diejenigen Android-Entwickler,<br />

die mobile Apps für die Kindle-Tablets<br />

entwickeln und Googles Maps-API ausweichen<br />

möchten. Anders als Amazons<br />

ursprünglicher Versuch mit den inzwischen<br />

eingestellten A9-Karten greift das<br />

neue Maps-API nicht auf eigene Datenbestände<br />

des Anbieters, sondern greift<br />

auf Kartendienste von Nokia zurück. Es<br />

ermöglicht Apps für die Amazon-Tablets<br />

Kindle Fire oder Kindle Fire HD – allerdings<br />

mit Ausnahme des Kindle Fire der<br />

ersten Generation –, den Benutzer zu<br />

orten, um ortsbezogene Angebote anzeigen<br />

zu können.<br />

OpenstreetMap-APIs und<br />

kleinere Herausforderer<br />

Alternativen zu den führenden Karten-<br />

APIs beinhalten eine Handvoll interessanter<br />

Entwickungsschnittstellen zum<br />

Zugriff auf kartographische Daten von<br />

OpenstreetMap.org. Dazu zählen das<br />

OpenstreetMap API (OSM API), Map-<br />

Script und die Maps-API von Mapquest.<br />

Letzteres gibt es in einer Edition für iOS<br />

und Android OS mit vergleichsweise moderat<br />

ausgelegten Nutzungsbedingungen.<br />

Zu den prominentesten Anwendern von<br />

OpenstreetMap-Diensten zählt das ortsgebundene<br />

soziale Netzwerk Foursquare.<br />

Weitere interessanteste Herausforderer<br />

sind die kostenlose designerfreundliche<br />

Bibliothek Modestmaps, außerdem Polymaps,<br />

das sich durch die Unterstützung<br />

von SVG sowie die gelungene Integration<br />

mit GeoJSON auszeichnet, sowie Leaflet<br />

von Cloudmade. Wer ausschließlich für<br />

Google Maps API<br />

https://developers.google.com/<br />

maps/<br />

Nokia Mobile HTML 5 (MH5), ein Javascript-Framework<br />

für den Zugriff auf<br />

Nokias Dienste rund um Karten, Routing<br />

und andere standortbezogene Dienste.<br />

http://developer.here.net/<br />

mobile_html5<br />

Google Maps SDK für iOS<br />

https://developers.google.com/<br />

maps/documentation/ios/<br />

Mapquest Maps API für Android und iOS<br />

http://developer.mapquest.com/<br />

Mapscript<br />

http://mapserver.org/mapscript/<br />

index.html/mapscript<br />

Openlayers<br />

http://openlayers.org/<br />

Modestmaps<br />

http://modestmaps.com/<br />

Polymaps<br />

http://polymaps.org/<br />

Leaflet von Cloudmade<br />

http://leaflet.cloudmade.com/<br />

Browser entwickelt, kann sich außerdem<br />

bei der völlig kostenlosen Javascript-Bibliothek<br />

Openlayers (http://openlayers.<br />

org/) bedienen.<br />

Fazit<br />

Navigations- und Ortungsdienste sind,<br />

insbesondere für mobile Websites, zu<br />

einer unverzichtbaren Brot- und Butter-<br />

Technologie geworden, deren Bedeutung<br />

im Rahmen der stark wachsenden<br />

Nahfeldkommunikation weiter zunehmen<br />

wird. Apples peinlicher Fauxpas<br />

mit Apple Maps in iOS 6 und Googles<br />

ursprünglich unrealistische Preisvorstellungen<br />

haben ungewollt den Mitbewerbern<br />

zu verstärkter Relevanz verholfen.<br />

Insbesondere Nokias APIs entwickeln<br />

sich zu einem großen Erfolg, bekommen<br />

aber inzwischen auch schon Gegenwind<br />

durch kleinere, innovative Mitstreitern.<br />

Filipe Pereira Martins und<br />

Anna Kobylinska<br />

www.internet-magazin.de 29

---

DAS BESTE<br />

WLAN<br />

HIGHSPEED-WLAN!<br />

Mit bis zu 300 MBit/s und optimaler<br />

Frequenzwahl.<br />

BESTE REICHWEITE!<br />

Höchste Reichweite und bester Datendurchsatz<br />

dank MIMO Mehrantennentechnik.<br />

ECO-MODE!<br />

Funkleistung nur bei aktiver Datenübertragung,<br />

dadurch geringstmöglicher Stromverbrauch.<br />

SICHERHEIT!<br />

IntegrierteFirewall und WPA2-<br />

Verschlüsselung.<br />

GAST-ZUGANG!<br />

Eigener WLAN-Zugang für Gäste–getrennt von<br />

Ihrem Heimnetzwerk zum Schutz Ihrer Daten.<br />

100 GB ONLINE-SPEICHER!<br />

100 GB Online-Speicherplatz in einem der<br />

1&1 Hochleistungs-Rechenzentren für Ihre Dateien,<br />

Bilder, Musik etc.<br />

Auszeichnung der<br />

1&1 HomeServer-Familie<br />

Ausgabe 03/2012<br />

*1&1 Surf-Flat 6.000 für 24 Monate 19,99 €/Monat, danach 24,99 €/Monat. In den meisten Anschlussbereichen verfügbar. Inklusive <strong>Internet</strong>-Flat. Telefonie (Privatkunden): für 2,9 ct/Min. ins dt. Festnetz oder immer<br />

kostenlos für 5,– €/Monat mehr mit der 1&1 Telefon-Flat. Anrufe in alle dt. Mobilfunknetze 19,9 ct/Min. 1&1 HomeServer für 0,–€(Hardware-Versand 9,60 €). 24 Monate Mindestvertragslaufzeit.

---

1&1 DSL<br />

INTERNET<br />

UND TELEFON<br />

19, 99<br />

€/Monat *<br />

Sparpreis für volle 24 Monate,<br />

danach 24,99 €/Monat.<br />

ab<br />

6.000 – 50.000 kBit/s zum Sparpreis –<br />

inklusive 1&1 HomeServer! *<br />

In Ruhe<br />

ausprobieren:<br />

1 MONAT<br />

TESTEN<br />

Expertenrat?<br />

Jederzeit:<br />

1 ANRUF<br />

GENÜGT<br />

Defekt? Morgen<br />

neu bei Ihnen:<br />

1 TAG<br />

AUSTAUSCH<br />

VOR ORT<br />

1und1.de<br />

0 26 02 / 96 90

---

WEBDESIGN | Webdesign mit Illustrator<br />

Webdesign in<br />

Adobe Illustrator CS6<br />

UX-Designer nutzen Adobe Illustrator immer öfter als das<br />

Webdesign-Werkzeug der Wahl für die Gestaltung von Drahtgittermodellen<br />

über die Prototypenerstellung bis hin zu len Designs von Vektor- und Pixelelementen. Lesen Sie in die-<br />

finasem<br />

Artikel, wie Sie das preisgekrönte Illustrationsprogramm<br />

für das Webdesign einsetzen.<br />

Als integraler Bestandteil jeder Edition<br />

der Creative Suite von Adobe<br />

liegt Illustrator ist das Programm auf vielen<br />

Webdesignern bereits installiert. Nur<br />

genutzt wird diese leistungsstarke Applikation<br />

viel zu selten und gleichermaßen<br />

oft unterschätzt. Denn gerade Illustrator<br />

besitzt die Fähigkeit, dank der Vektorbasierten<br />

Arbeitsweise alle Auflösungsdichten<br />

und damit alle Endgeräte mit<br />

optimierten Dateien auf der Basis einer<br />

einzigen Ausgangsillustration zu adressieren.<br />

Da die Quelldatei als eine auflösungsunabhängige<br />

Vektorgrafik vorliegt,<br />

behält der Webdesigner alle Freiheiten<br />

bezüglich der Ausgabe.<br />

Mit Illustrator lassen sich nicht nur konventionelle<br />

Illustrationen wie Logos<br />

oder Schaltflächen, sondern auch anspruchsvolle<br />

Website-Hintergründe und<br />

Auf einen Blick<br />

Der Adobe Illustrator ist ein leistungsfähiges<br />

Webdesign-Werkzeug, das zu<br />

Unrecht ein gewisses Schattendasein<br />

fristet. Lesen Sie in diesem Artikel unter<br />

anderem, wie Sie mit Illustrator Muster<br />

für Website-Hintergründe erstellen<br />

und sich wiederholende Webdesign-<br />

Aufgaben bequem automatisieren.<br />

Drahtgittermodelle des Layouts sowie<br />

klickbare Prototypen erstellen.<br />

Ein Website-Layout aus Illustrator:<br />

Erstellen der Ausgangsdatei<br />

Wer Adobe Illustrator als Prototypingoder<br />

UI-Werkzeug in der Webgestaltung<br />

nutzen möchte, der sollte das Programm<br />

und die einzelnen Illustrator-Dokumente<br />

entsprechend konfigurieren (Profil<br />

"Web"). Erstellen Sie ein neues Illustrator-Dokument<br />

("Datei > Neu...") auf Basis<br />

von Pixeln. Als Farbmodus wählen Sie<br />

RGB. Setzen Sie die Einstellung "Rastereffekte"<br />

auf den gewünschten Wert, wählen<br />

Sie den Eintrag "Pixel" als Einheit für<br />

den <strong>Vorschau</strong>modus und aktivieren Sie<br />

die Option "Neue Objekte an Pixelraster<br />

ausrichten". Diese Option finden Sie<br />

später auch in der erweiterten Ansicht<br />

des Bedienfeldes "Transformieren" der<br />

aktuellen Auswahl. Außerdem empfiehlt<br />

es sich, in den Voreinstellungen von Illustrator<br />

alle Einheiten auf Pixel zu setzen.<br />

Muster für Hintergrundbilder<br />

generieren<br />

Mit dem Mustergenerator können Sie aus<br />

jedem Objekt, welches nicht bereits ein<br />

Muster beinhaltet, ein Muster erstellen,<br />

das sich beim Zusammensetzen nahtlos<br />

ineinander fügt. Zum Erstellen eines Musters<br />

wählen Sie das gewünschte Objekt<br />

auf der Arbeitsfläche aus und verwenden<br />

den Befehl "Muster > erstellen" aus dem<br />

Menü "Objekt".<br />

Adobe Illustrator fügt dem Bedienfeld<br />

„Farbfelder“ das neu erstellte Muster hinzu<br />

und wechselt in den Modus des Mustergenerators.<br />

Diesen Modus erkennen<br />

Sie an einer zusätzlichen Symbolleiste,<br />

die Sie direkt unterhalb der Registerkarte<br />

und der gegebenenfalls eingeblendeten<br />

Lineale des aktuellen Dokumentfensters<br />

finden. Auf der Arbeitsfläche sehen Sie<br />

das soeben erstellte Muster mit den aktuell<br />

eingestellten Parametern. Diese<br />

Parameter können Sie im Bedienfeld<br />

"Musteroptionen" anpassen. Nach Abschluss<br />

Ihrer Optimierungen klicken<br />

Sie auf die Schaltfläche "Fertig", um die<br />

neue Konfiguration zu übernehmen oder<br />

auf "Abbrechen", um sie zu verwerfen.<br />

Die Schaltfläche "Kopie speichern" fügt<br />

den Farbfeldern eine Kopie des aktuellen<br />

Mus-ters hinzu, nachdem Sie diese<br />

mit einem Namen versehen haben. Mit<br />

einem Klick auf den Pfeil, der sich links<br />

vom Namen des aktiven Musters befindet,<br />

verlassen Sie den Bearbeitungsmo-<br />

32 0413 internet magazin

---

Webdesign mit Illustrator | WEBDESIGN<br />

dus und kehren zurück zur Leinwand des<br />

Hauptdokumentes. Noch kam Ihr Muster<br />

hier nicht zum Einsatz, es befindet sich<br />

lediglich im Bedienfeld "Farbfelder". Um<br />

es wieder bearbeiten zu können, müssen<br />

Sie es hier lediglich doppelt anklicken<br />

und schon wechselt Illustrator CS6 wieder<br />

in den Bearbeitungsmodus.<br />

Erstellen einer<br />

Illustrator-Datei<br />

für das Web<br />

als Zielmedium.<br />

Musteroptionen:<br />

Muster gekonnt verfeinern<br />

Zum Optimieren des Musters im Mustergenerator<br />

dient das Bedienfeld "Musteroptionen".<br />

Die wohl wichtigste Einstellung<br />

in diesem Bedienfeld trägt die<br />

Bezeichnung "Musterelementtyp" und<br />

bestimmt die Form des Rasters:<br />

» "Horizontaler Versatz" beziehungsweise<br />

"vertikaler Versatz" erstellt ein Raster<br />

auf Basis von Rechtecken, die sich horizontal<br />

direkt nebeneinander oder direkt<br />

vertikal untereinander einreihen.<br />

» Mit den Optionen "6-seitig vertikal"<br />

beziehungsweise "6-seitig horizontal"<br />

entsteht ein hexagonales Raster mit<br />

Bausteinen, die sich vertikal direkt<br />

untereinander oder horizontal direkt<br />

nebeneinander einreihen.<br />

Die Verschiebung der Kacheln steuert die<br />

Option "Ziegelversatz". Diese ist direkt<br />

unterhalb des Menüs "Musterelementtyp"<br />

im Bedienfeld der Musteroptionen<br />

zu finden. Die Höhe und Breite der "Ziegel"<br />

können Sie nur dann frei wählen,<br />

wenn die Option "Musterelementgröße<br />

an Bildmaterial anpassen" deaktiviert<br />

bleibt. Die Option "Musterelement mit<br />

Bildmaterial verschieben" stellt sicher,<br />

dass das Muster mit der Grafik mitwandert.<br />

Die vertikalen und horizontalen<br />

Abstände lassen sich entweder per Tastatureingabe<br />

in den Feldern "H Abstand"<br />

und "V Abstand" festlegen oder, und das<br />

ist viel intuitiver, direkt auf der Arbeitsfläche<br />

mit Hilfe der Maus. Um von der<br />

letzteren der beiden Möglichkeiten Gebrauch<br />

zu machen, aktivieren Sie ganz<br />

Erstellen eines<br />

Musters für ein<br />

Hintergrundbild<br />

einer Website.<br />

einfach das Musterelement-Werkzeug im<br />

oberen Bereich des Bedienfeldes der Musteroptionen.<br />

Illustrator stellt Ihnen dann<br />

die benötigten Steuerelemente direkt an<br />

der Hauptkachel des aktuellen Musters<br />

zur Verfügung. Indem Sie diese Steuerelemente<br />

greifen und verschieben, können<br />

Sie die Abstände zwischen den Ziegeln<br />

präzise regulieren.Wenn Sie diese Abstände<br />

reduzieren, werden sich die einzelnen<br />

Kacheln überlappen. Ob und wie<br />

sich die einzelnen Kacheln überlappen<br />

sollen, das legen Sie mit den zugehörigen<br />

Symbolen im Bedienfeld der Musteroptionen<br />

fest.<br />

Tipp: Beim Skalieren von Objekten mit<br />

Mustern in Illustrator CS6 sollten Sie unbedingt<br />

auf die korrekte Einstellung der<br />

Optionen des Skalierwerkkzeugs achten.<br />

Ein Doppelklick auf dieses Werkzeug in<br />

der Werkzeugleiste zeigt Ihnen was passiert,<br />

wenn Sie das betreffende Objekt<br />

transformieren.<br />

Illustrator-Symbole: Mehrere<br />

Instanzen einer Schaltfläche<br />

automatisch aktualisieren<br />

Alle Design-Elemente, die mehr als einmal<br />

zum Einsatz kommen, sollten in<br />

Illustrator als Symbole vorliegen. Wenn<br />

Hinzufügen von SVG-Interaktivität<br />

in Adobe Illustrator CS6.<br />

www.internet-magazin.de 33

---

WEBDESIGN | Webdesign mit Illustrator<br />

Sie ein Symbol bearbeiten, aktualisiert<br />

das Programm alle Instanzen des Symbols<br />

im ganzen Dokument, zum Beispiel<br />

alle Instanzen der "Weiter"-Schaltfläche.<br />

Falls Sie bestimmte Vorkommen<br />

eines Objektes von der Aktualisierung<br />

ausschließen möchten, müssen Sie einfach<br />

nur die logische Verknüpfung der<br />

jeweiligen Instanz mit dem zugehörigen<br />

Symbol aufheben – schon ist diese ein<br />

eigenständiges Designelement.<br />

Illustrator bringt einige Bibliotheken<br />

nützlicher Symbole für Schaltflächen,<br />

Fortschrittsbalken und andere Seitenelemente<br />

mit. Die jeweils zugehörige Bibliothek<br />

können Sie aus dem Bedienfeld<br />

"Symbole" heraus aufrufen.<br />

Variablen in Illustrator sind ein mächtiges<br />

Werkzeug zur Automatisierung sich<br />

wiederholender Webdesign-Aufgaben.<br />

Insbesondere Textvariablen können die<br />

Erstellung von Webgrafiken wie Navigationsschaltflächen<br />

oder Werbebannern<br />

erheblich vereinfachen, denn Illustrator<br />

kann Datensätze aus XML-Variablenbibliotheken<br />

beziehen. Dadurch erweitert<br />

das Programm die gestalterische Freiheit<br />

des Webdesigners und minimiert repetitive<br />

Aufgaben wie die Dateneingabe.<br />

Zum Erstellen einer dynamischen Designvorlage<br />

mit Variablenunterstützung<br />

greifen Sie auf das Bedienfeld "Variablen"<br />

aus dem Menü "Fenster" in Adobe<br />

Illustrator zurück. Wählen Sie das betreffende<br />

Objekt am besten mit einem Mausklick<br />

auf das Kreissymbol im Bedienfeld<br />

"Ebenen" aus und suchen Sie den passenden<br />

Befehl im Optionenmenü des Bedienfeldes<br />

"Variablen". Alternativ klicken<br />

Sie auf das Symbol "Dynamisch machen"<br />

in der unteren Leiste des Bedienfeldes.<br />

Außer den Variablentypen Textstring zum<br />

Modifizieren von Textinhalten und Sichtbarkeit<br />

zum Ein- und Ausblenden von<br />

Elementen der Illustration unterstützt<br />

das Programm auch Variablen vom Typ<br />

Verknüpfte Datei für das dynamische Verlinken<br />

externer Objekte und Diagrammdaten<br />

zur dynamischen Umsetzung von<br />

Illustrator-Diagrammen.<br />

Um einem Textabschnitt eine Variable vom<br />

Typ Textstring zuzuweisen, wählt man den<br />

Aufruf der Bibliothek<br />

„Web-Schaltflächen“<br />

in Illustrator CS6.<br />

zugehörigen Textrahmen aus und aktiviert<br />

die Schaltfläche "Text dynamisch machen".<br />

Das funktioniniert jedoch nicht für<br />

einzelne Textzeichen, der Mauszeiger darf<br />

sich hierbei nicht im Textfeld befinden.<br />

Illustrator unterstützt sehr flexible Kombinationen<br />

von Variablen im Zusammenhang<br />

mit fast beliebigen Elementen der<br />

Vektorzeichnung. Dies betrifft insbesondere<br />

Sichtbarkeitsvariablen, die sowohl eine<br />

als auch mehrere Objektebenen beeinflussen<br />

können. Beim Einsatz von Variablen<br />

vom Typ Textstring im Webdesign sollten<br />

Sie beachten, dass der Textrahmen nachträglich<br />

nicht mehr an die eventuell geänderte<br />

Textlänge angepasst werden kann.<br />

Für Textstring-Variablen unterschiedlicher<br />

Länge gilt es daher, vorab für die maximale<br />

Textlänge zu planen. So können Sie<br />

zum Beispiel mehrere sich überlagernde<br />

Textrahmen erstellen und jeweils mit einer<br />

Text- und einer Sichtbarkeitsvariable<br />

versehen, damit man sie dann wahlweise<br />

ein- und ausblenden kann.<br />

Erfassen von Datensätzen in und<br />

außerhalb von Illustrator CS6<br />

Das Erfassen von Datensätzen in Adobe<br />

Illustrator ist sehr einfach. Verfügt das<br />

Dokument bereits über die benötigten<br />

Variablen, so genügt einfach ein Klick<br />

auf die Schaltfläche mit Kamerasymbol<br />

im Bedienfeld "Variablen", um die aktuellen<br />

Werte der Variablen aus der Illustrator-Datei<br />

als einen Datensatz zu erfassen.<br />

Danach können Sie die gewünschten Änderungen<br />

an den betreffenden Objekten<br />

direkt auf der Leinwand vornehmen, indem<br />

Sie zum Beispiel den Variablentext<br />

bearbeiten und die Sichtbarkeit verstellen.<br />

Ein erneuter Klick auf das Kamerasymbol<br />

erfasst diese Einstellungen nun<br />

als einen neuen Datensatz. In Adobe<br />

Illustrator angelegte Datensätze lassen<br />

sich als XML-Datei exportieren, um sie<br />

in einer externen Applikation um zusätzliche<br />

Einträge zu erweitern. Ein Web-<br />

34 0413 internet magazin

---

Webdesign mit Illustrator | WEBDESIGN<br />

Ausgabe für das<br />

Web mit Hilfe<br />

der Stapelverarbeitung<br />

von<br />

dynamischen<br />

Datensätzen in<br />

Illustrator CS6.<br />

Entwickler könnte Datensätze zudem aus<br />

einer Datenbank über den XML-Import<br />

als Illustrator-Variablen einlesen.<br />

Automatisierung repetitiver<br />

Webdesign-Aufgaben<br />

Auf Grund fehlender Unterstützung für<br />

SVG-Objekte weiß Adobes Webentwicklungs-Flaggschiff<br />

Dreamweaver in der<br />

Version CS6 mit Illustrator-Variablen leider<br />

nichts anzufangen. Für Unternehmen<br />

bietet Adobe den Personalisierungsserver<br />

Scene7 zur Umsetzung von Variablen-basierten<br />

Automatisierungsvorgängen beim<br />

dynamischen Bereitstellen von Websites.<br />

Webdesigner können Variablen in Illustrator<br />

CS6 ohne Zusatzsoftware nutzen,<br />

um die Erstellung von Grafiken zu beschleunigen.<br />

Nutzen Sie hierzu ganz<br />

einfach die eingebaute Automatisierung<br />

in Illustrator CS6: das Bedienfeld "Aktionen"<br />

und die Stapelverarbeitung.<br />

Schritt 1: Nach dem Zuweisen von Variablen<br />

zu Elementen der Illustration und<br />

dem Erfassen oder Importieren von Datensätzen<br />

zeichnen Sie eine Aktion am<br />

Beispiel eines einzigen der vorhandenen<br />

Datensätze auf.<br />

Schritt 2: Mit einem Befehl aus dem Optionenmenü<br />

des Bedienfeldes "Aktionen"<br />

öffnen Sie das Dialogfenster der Funktion<br />

Stapelverarbeitung. Im Abschnitt "Abspielen"<br />

wählen Sie hier die zuvor erstellte<br />

Aktion aus und aktivieren Sie die Option<br />

"Datensätze" im Menü "Quelle".<br />

Schritt 3: Nach einer Bestätigung des<br />

Vorgangs durchläuft Illustrator alle Datensätze<br />

der aktuellen Datei und führt<br />

die gewünschte Aktion aus. Hierbei<br />

könnte es sich etwa um die Ausgabe einer<br />

einzelnen Illustrator-Grafik in mehreren<br />

Hundert Versionen im Format FXG<br />

(Flash XML <strong>Graph</strong>ics), JPEG oder PNG<br />

handeln, oder auch um die Ausgabe der<br />

Zeichenfläche als ein HTML-Prototyp der<br />

Webseite in mehreren Sprachversionen.<br />

Die Webvorschau in Illustrator<br />

Um das entstehende Design im Detail in<br />

gerasterter Form einzusehen, so wie es<br />

ein Browser rendern würde, aktivieren<br />

Sie die Pixelvorschau mit dem Befehl<br />

"Ansicht > Pixelvorschau" und stellen<br />

Sie die gewünschte Zoomstufe ein. Mit<br />

dem Befehl "Fenster > Neues Fenster"<br />

können Sie eine zusätzliche Ansicht des<br />

aktuellen Dokumentes einrichten und<br />

die beiden Ansichten mit einem Befehl<br />

aus dem Menü "Fenster > Anordnen"<br />

neben- oder untereinander positionieren,<br />

um das Design in zwei Skalierungsstufen<br />

oder an zwei verschiedenen Stellen<br />

gleichzeitig zu überprüfen.<br />

Datensätze simultan verarbeiten<br />

Wer Illustrationen oder Multimedia-<br />

Daten in großen Stückzahle erstellen<br />

möchte, hatte bisher nur zwei Optionen<br />

zur Auswahl. Der erste Weg bestand darin,<br />

die benötigten Daten manuell Schritt<br />

für Schritt zu erzeugen. Solange es sich<br />

lediglich um ein Dutzend Datensätze<br />

handelt, ist das Konzept zwar mühsam<br />

und zeitraubend, aber durchaus machbar.<br />

Was aber, wenn es mehr Datensätze<br />

sein müssen, wie etwa 100, 1.000 oder<br />

gar 100.000? Zwar könnte man mittels<br />

Aktionen in Adobe Illustrator CS6 das<br />

Problem zumindest teilweise vermeiden,<br />

aber eben doch nicht ganz. Um ein Minimum<br />

an persönlicher Interaktion kommt<br />

man keinesfalls herum. Der zweite Weg<br />

bestünde in der Nutzung eines leistungsfähigen,<br />

aber kostspieligen Multimedia-<br />

Datenservers wie Adobe Scene7, doch<br />

dieser kommt sicher nur für eine Handvoll<br />

von Projekten in Betracht. Zum<br />

Glück gibt es einen dritten Weg: Mittels<br />

der Funktion "Stapelverarbeitung..." mit<br />

der Option "Datensätze" können Sie<br />

praktisch beliebig viele Datensätze – jedoch<br />

nur vorab und nicht zur Laufzeit<br />

– mit Hilfe einer vorab erstellten Aktion<br />

bearbeiten. Wieviele personalisierte<br />

Webgrafiken Sie insgesamt erzeugen<br />

müssen, spielt so zum Glück keine Rolle.<br />

Für jeden, der ohnehin bereits über<br />

Illustrator CS6 im Rahmen der Creative<br />

Suite jeder beliebigen Edition oder über<br />

das monatliche Cloud-Abonnement verfügt,<br />

fallen keine Kosten an.<br />

Filipe Pereira Martins/Anna Kobylinska<br />

www.internet-magazin.de 35

---

WEBDESIGN | Blog-Design<br />

Professionelles<br />

Blog-Design<br />

Blogs ersetzen immer mehr traditionell gestaltete<br />

Homepages, wenn es um Kontakt mit dem Nutzer<br />

geht. Ideal dafür ist das kostenlose WordPress – es<br />

ist mächtig und einfach zugleich.<br />

m Blogs zu gestalten und – noch<br />

U schwieriger – einfach und „stressfrei“<br />

zu verwalten, bietet sich ein Content<br />

Management System (CMS) an. Die<br />

bekannteste und weltweit verbreitetste<br />

kostenlose CMS-Software ist Word-<br />

Press. Das CMS wird ständig weiterentwickelt.<br />

Bei Redaktionsschluss aktuell<br />

war Version 3.4.2, die wir für diesen<br />

Beitrag verwenden.<br />

Download ohne Ärger<br />

Suchen Sie dazu die Download-Adresse<br />

im <strong>Internet</strong>, finden Sie eine Vielzahl von<br />

Adressen, die zum größten Teil einen<br />

zwar kostenlosen, aber werbebelegten<br />

Zugang bieten. Nun ist Werbung nicht<br />

per se etwas Negatives. Aber es ist ärgerlich,<br />

wenn Sie durch grell hervorspringende<br />

Download-Button immer wieder<br />

zum Herunterladen von kostenpflichtiger<br />

Software verleitet werden sollen. Mit den<br />

von uns nachfolgend angegebenen Seiten<br />

vermeiden Sie solchen Ärger. Beachten<br />

Sie den Unterschied zwischen zwei<br />

Adressen:<br />

» wordpress.com ist ein Blog-Service zur<br />

Einrichtung kostenloser Blog-Seiten.<br />

» Unter wordpress.org dagegen finden<br />

Sie die Seite, von der Sie die Programmierumgebung<br />

WordPress herunterladen.<br />

Mit dem Präfix de. schalten<br />

Sie jeweils auf die deutsche Seite:<br />

Von de.wordpress.org laden Sie die<br />

deutschsprachige WordPress-Version<br />

herunter. Alternativ steht wpde.org<br />

zur Verfügung. Diese Seite wird von<br />

einer deutschen Firma verwaltet, die<br />

kommerziell Blog-Erstellung und -Betreuung<br />

anbietet. Sie haben die für Ihre<br />

Arbeit mit WordPress erforderlichen<br />

Datei, die Sie jetzt noch entpacken.<br />

Wie Sie dies machen, zeigen wir Ihnen<br />

in der PDF-Datei Schritte zum Blog.<br />

pdf, die Sie auf der CD/DVD im Ordner<br />

<strong>Magazin</strong>\WordPress\ finden.<br />

Im PDF stehen weitere Abschnitte, in denen<br />

Sie erfahren, wie Sie einen lokalen<br />

Apache-Server auf Ihrem PC installieren.<br />

Auf diesem Server können Sie Ihre Blog-<br />

Seiten komplett entwickeln. Das erspart<br />

Ihnen gegenüber der Arbeit auf einem<br />

Webserver die ständige Online-Präsenz.<br />

Für die Veröffentlichung Ihrer Webseite<br />

benötigen Sie aber entsprechenden Speicherplatz<br />

im Web.<br />

Blog im Netz oder lokal<br />

entwickeln<br />

Entwickeln Sie Ihren Blog im Netz, laden<br />

Sie nur noch den auf Ihrem Rechner<br />

entpackten Ordner WordPress mit der<br />

geänderten wp-config.php auf den Server.<br />

Danach starten Sie WordPress über<br />

/wordpress/wp-admin/<br />

index.php.<br />

Arbeiten Sie dagegen auf dem lokalen<br />

Rechner, starten Sie vorher im XAMPP-<br />

36 0413 internet magazin

---

Blog-Design | WEBDESIGN<br />

Controlcenter den Apache-Server sowie<br />

die MySQL-Datenbank und verwenden<br />

Sie als Serveradresse http://<br />

localhost. Sie können den Server auch<br />

durch Eingabe im Ausführen-Fenster starten.<br />

Wenn alles geklappt hat, befinden<br />

Sie sich jetzt auf der Anmeldeseite von<br />

WordPress. Für den lokalen Server geben<br />

Sie den Benutzernamen admin und das<br />

von Ihnen vergebene Passwort ein. Beim<br />

Webserver gelten dessen Daten.<br />

Nachdem Sie WordPress als admin gestartet<br />

haben, befinden Sie sich auf der Seite<br />

Dashboard im Administrator-Bereich,<br />

dem Backend Ihres WordPress-CMS. Von<br />

hier haben Sie den Zugriff auf die Texte<br />

und andere Gestaltungselemente.<br />

Vorlagen konfigurieren<br />

Für Sie geht es nun zunächst darum, aus<br />

dem Standard-Blog Ihren eigenen Blog<br />

zu entwickeln. Legen Sie Ihren Blog lokal<br />

auf localhost an, können Sie ihn vor der<br />

Veröffentlichung im Netz noch gründlich<br />

überprüfen. Das Heraufladen ist zwar<br />

nicht schwierig, es hindert Sie aber an<br />

einer voreiligen Freigabe Ihres Blog.<br />

Individuelle Einstellungen für Wordpress-Blog<br />

Gleiche Grundeinstellungen für alle Seiten<br />

eines Blog helfen Ihnen beim Umgang mit<br />

WordPress und Ihrem Leser beim Erfassen<br />

Ihrer Seiten. Die mit WordPress mitgelieferten<br />

Einstellungen sind in der Regel<br />

schon dahingehend optimiert. Aber es<br />

gibt ein paar Stellen, an denen Sie individuelle<br />

Änderungen vornehmen können, ja<br />

sogar sollten. WordPress erlaubt nämlich<br />

Sie haben über die im Textkasten Individuelle<br />

Einstellungen für WordPress-Blogs<br />

auf der vorangegangenen Seite dieses<br />

Beitrags beschriebenen Einstellungen Titel<br />

und Untertitel Ihres Blog entsprechend<br />

festgelegt? Machen Sie nun aus dem vorgefertigten<br />

Beitrag den ersten Ihres Blog.<br />

Sie befinden sich im Dashboard? Dann<br />

gehen Sie über einen Doppelklick auf die<br />

Rubrik Artikel oder Artikel/Alle Artikel in<br />

der Menübar auf Artikel. Wechseln Sie<br />

hier auf die Zeile Mein Blog und klicken<br />

Sie auf Editieren. Im Editor ändern Sie die<br />

Themenüberschrift und schreiben Ihren<br />

Text. Vergessen Sie nicht, den Aktualisieren-Button<br />

anzuklicken.<br />

eine Vielzahl von Änderungen über die<br />

Submenüs in Einstellungen. Auf jeden Fall<br />

prüfen und anpassen sollten Sie Blogtitel<br />

und Untertitel. Durchlesen sollten Sie<br />

ebenfalls die Rubrik Diskussion. Wissenswert<br />

ist es beispielsweise, dass Bilder, etc.<br />

in den Ordner wp-content/uploads kommen.<br />

Klicken Sie stets vor dem Verlassen<br />

der Menüs auf den Übernehmen-Button.<br />

Tipp: Klicken Sie nie auf den Schließen-<br />

Button des Browsers, in dem WordPress<br />

gestartet wurde, wenn Sie ihn im Tab-<br />

Modus betreiben. Mit dem Browser wird<br />

auch WordPress geschlossen. Schließen<br />

Sie immer erst die Reiter! Sehen Sie sich<br />

zur Kontrolle noch Ihr Ergebnis an. Nicht<br />

schlecht, das Ganze, und das ohne eine<br />

einzige Codezeile zu schreiben. Weiteren<br />

Artikeln und zusätzlichen Seiten für<br />

Ihren Blog steht nichts mehr im Wege.<br />

Design folgt Vorlage<br />

Beachten Sie, dass Sie als Admin jederzeit<br />

Änderungen und Ergänzungen im<br />

Text und – begrenzt – am Design vor-<br />

Sehen Sie sich<br />

Ihre erste Seite<br />

an, die Sie mit<br />

WordPress-<br />

Unterstützung<br />

gestaltet haben<br />

– und das ohne<br />

einen Federstrich.<br />

Mit Hilfe<br />

der CMS-Software<br />

WordPress lassen<br />

sich schnell<br />

Blogs entwickeln<br />

und einfach<br />

verwalten.<br />

www.internet-magazin.de 37

---

WEBDESIGN | Blog-Design<br />

nehmen können. Die Grenzen setzt die<br />

aktuelle Designvorlage. Wenn es Ihnen<br />

bisher nicht aufgefallen ist: WordPress<br />

hat automatisch eine Design-vorlage<br />

vorgegeben. Alle Seiten entsprechen<br />

dem Schema dieser Vorlage. WordPress<br />

bezeichnet solche Designvorlagen als<br />

Themes. In der aktuellen WordPress-Version<br />

3.4.2 sind zwei Themes integriert,<br />

Twenty Ten und das aktuellere Twenty<br />

Eleven. Letzteres ist aktiviert.<br />

Farbschema und Position der<br />

Widget-Sidebar bestimmen<br />

Das Theme bietet einige individuelle<br />

Einstellungen in der Menü-Sidebar. Klicken<br />

Sie auf Design und gehen Sie zu<br />

Wordpress-Themes bearbeiten<br />

1<br />

2<br />

Für nahezu alle Themen des Blogs bietet<br />

sich eine Mischung aus Texten, Fotos<br />

und anderen Inhalten an.<br />

den Themes-Optionen. Sie können hier<br />

festlegen, welches Farbschema verwendet<br />

wird oder wo die Widget-Sidebar auf<br />

den Seiten erscheint. Unter Kopfzeile<br />

erhalten Sie Möglichkeiten, die Kopfzeile<br />

zu verändern, zum Beispiel durch<br />

Wer den Code fertiger Themes anpassen<br />

will, sollte dazu Vorkenntnisse haben und<br />

in jedem Fall Änderungen nie direkt am<br />

Original vornehmen.<br />

Über das Menü Design/Editor öffnen Sie<br />

den Editor. Er ist ein einfacher Texteditor<br />

ohne Formatierungsmöglichkeiten.<br />

Sie können den Code aus dem Editor in<br />

Ihren eigenen komfortableren HTML/PHP-<br />

Editor kopieren. Alternativ gehen Sie direkt<br />

in den Ordner wordpress/wp-content<br />

und dann zu /themes. Dort finden Sie die<br />

Ordner der aktuell in Ihrer Entwicklungsumgebung<br />

vorhandenen Themes. Auch<br />

hier sollten Sie nicht an den Originalen<br />

arbeiten, wenn Sie nicht über einschlägige<br />

Erfahrung verfügen. Aber Sie können<br />

den Ordner des Themes kopieren und mit<br />

der Kopie arbeiten.<br />

Beachten Sie, dass der kopierte Ordner<br />

zusätzlich im Themes-Vorlagenfenster<br />

(Design/Themes) angezeigt<br />

wird. In der ComboBox oben rechts<br />

wählen Sie das Theme, das Sie bearbeiten<br />

wollen. Klicken Sie danach auf<br />

die Auswählen-Schaltfläche.<br />

Der Editor für Themes findet sich unter Design (1). Er arbeitet mit CSS (2).<br />

Auch Templates (3) lassen sich editieren.<br />

3<br />

ein anderes Bild. Auch im Hintergrund<br />

können Sie ein Bild platzieren. Wenn Ihr<br />

Bild zu klein ist, wird es gekachelt. Statt<br />

eines Bildes haben Sie die Option, eine<br />

Farbe um Ihre Seiten laufen zu lassen.<br />

Mit den Widgets legen Sie fest, welche<br />

Informationen in der Sidebar zu sehen<br />

sind. Diese Einstellmöglichkeiten bietet<br />

das Thema Twenty Eleven.<br />

Themes hinzufügen<br />

Sie können weitere Themes in Ihr Word-<br />

Press einfügen. Dazu öffnen Sie Design/<br />

Themes und dann das Register Themes<br />

installieren. Die Installation läuft vollautomatisch<br />

ab. Installation bedeutet in<br />

diesem Zusammenhang Herunterkopieren<br />

eines kompletten NameDesThemes-<br />

Unterordners in den wp-content/themes-<br />

Ordner von WordPress.<br />

Manuell installieren Sie Themes, indem<br />

Sie sie entpacken und den kompletten<br />

Ordner in den /themes-Ordner kopieren.<br />

Zum Deinstallieren genügt demnach das<br />

Entfernen des Ordners aus /themes.<br />

Die beschriebene Vorgehensweise gilt<br />

auch für alle anderen Erweiterungselemente<br />

von WordPress wie Plug-ins.<br />

Diese werden im WordPress-Ordner /<br />

plugins abgelegt.<br />

Zugangsberechtigungen einstellen<br />

Die Verwaltung Ihres Blog umfasst<br />

auch die Zugangsberechtigungen. Die<br />

allgemeinen Regeln dafür bestimmen<br />

Sie im Dashboard unter Einstellungen/<br />

Diskussion. Wollen Sie auch anderen<br />

Personen schreibende Zugangsrechte<br />

geben, müssen Sie dafür Benutzerprofile<br />

anlegen. WordPress verwendet für<br />

die unterschiedlichen Berechtigungen<br />

das Rollen-Konzept und definiert dazu<br />

fünf Berechtigungsebenen: Administrator,<br />

Redakteur (Editor), Autor (Author),<br />

Mitarbeiter (Contributor) und Abonnent<br />

(Subscriber). Die englischen Namen sind<br />

genannt, weil sie oft noch in deutschen<br />

38 0413 internet magazin

---

Blog-Design | WEBDESIGN<br />

Über 1600 frei<br />

erhältliche<br />

Themes stehen<br />

für WordPress<br />

im Netz frei<br />

zur Verfügung.<br />

Eines passt<br />

sicher.<br />

Die geltenden Richtlinien für barrierefreies<br />

Webdesign finden Sie unter<br />

www.barrierefreies-webdesign.de/<br />

richtlinien/<br />

Veröffentlichungen erscheinen. Der<br />

Administrator darf alles, der Redakteur<br />

eigene Beiträge veröffentlichen, diese<br />

und Fremdbeiträge sowie Kommentare<br />

bearbeiten. Der Autor darf eigene Beiträge<br />

veröffentlichen und bearbeiten,<br />

während der Mitarbeiter eigene Beiträge<br />

verfassen und bearbeiten, diese aber<br />

nicht veröffentlichen kann. Der Abonnent<br />

darf Beiträge lesen, Kommentare<br />

lesen und schreiben.<br />

Bevor Sie Ihren Blog jetzt auf die Menschheit<br />

loslassen, sollten Sie sich noch ein<br />

paar Gedanken zum Thema Sicherheit<br />

machen. Haben Sie bisher im Localhost<br />

gearbeitet, ist Ihnen inzwischen vielleicht<br />

entfallen, dass Sie immer noch als<br />

der Benutzer admin auftreten. Sie sollten<br />

sich aber eine weitere Administrator-<br />

Identität zulegen. Das gilt besonders,<br />

wenn Sie bisher auf einem Webserver<br />

experimentiert haben. Dazu gehen Sie<br />

im Dashboard auf Benutzer/Neu erstel-<br />

len. Geben Sie sich einen ungewöhnlichen<br />

Namen und wählen Sie ein ganz<br />

besonderes Passwort, das aus Groß-,<br />

Kleinbuchstaben gemischt mit Zahlen<br />

und Sonderzeichen besteht. Verwenden<br />

Sie eine andere Mailadresse als für die<br />

bisherigen WordPress-Versuche. Sie erhalten<br />

sonst die Meldung: Diese E-Mail-<br />

Adresse wurde bereits registriert....<br />

Legen Sie Ihre Rolle als Administrator<br />

fest, damit Sie mit der neuen Identität<br />

auch wieder alles tun dürfen bei Ihrem<br />

WordPress-Konto. Vergessen Sie nicht,<br />

auf den Button Neuen Benutzer hinzufügen<br />

zu klicken. Loggen Sie sich zuletzt<br />

aus und direkt unter den neuen Zugangsdaten<br />

wieder ein.<br />

Horst F. Haupt<br />

www.internet-magazin.de 39

---

WEBDESIGN | Cheat Sheet<br />

NEU: DAS C<br />

Google Analytics –<br />

Quick Reference Guide<br />

Um Google führt kein Weg herum, wenn man eine<br />

erfolgreiche Website betreiben will: Neben der Arbeit<br />

an den Rankings mit den Webmaster-Tools und dem<br />

Chrome-Browser setzen Webmaster verstärkt auf die<br />

Analysemöglichkeiten mit Google Analytics, um mehr<br />

über die Besucher ihrer Site zu erfahren.<br />

Auf einen Blick<br />

Unser Cheat Sheet hilft bei der täglichen<br />

Arbeit: Einfach das doppelseitige<br />

Blatt aus der Heftmitte trennen<br />

und laminieren. So hält es auch größeren<br />

Belastungen stand, wie etwa<br />

Developer-Kaffee.<br />

Google Analytics in Betrieb zu nehmen,<br />

um unabhängig von der Größe<br />

einer <strong>Internet</strong>präsenz das leistungsstarke<br />

Tracking in Anspruch zu nehmen, das<br />

dauert nur einen Moment: Der Tracking-<br />

Code ist buchstäblich in Minuten eingebaut,<br />

und damit steht Ihnen kostenlos<br />

eine der stärksten Webanalyse-Solutions<br />

auf dem Markt zur Verfügung. Mit<br />

Google Analytics finden Sie heraus, wie<br />

Nutzer Ihre Website verwenden, wie sie<br />

dorthin kamen und wie Sie aus diesen<br />

Nutzern regelmäßige Besucher machen<br />

können. Mit den Echtzeit-Berichten<br />

können Sie Aktivitäten genau dann erfassen,<br />

wenn sie stattfinden. Die Standardberichte<br />

helfen bei der schnellen<br />

und unkomplizierten Messung von Interaktionen<br />

und mit wenigen Klicks lassen<br />

sich benutzerdefinierte Berichte und<br />

Besuchergruppen zusammenstellen.<br />

Was tun die Besucher auf Ihrer<br />

Site und wie lange bleiben sie?<br />

Mit den benutzerdefinierten Berichten<br />

bestimmen Sie dann selbst, was Sie<br />

analysieren möchten, und stellen sich<br />

in wenigen Minuten ein persönliches<br />

Dashboard mit den interessantesten<br />

Messwerten zusammen. Mit den Variablen<br />

erstellen Sie eigene Segmente und<br />

analysieren genau die Nutzerdaten, die<br />

für Ihr Unternehmen relevant sind. Die<br />

erweiterte Segmentierung wiederum<br />

unterstützt Webmaster bei der Analyse<br />

ausgewählter Traffic-Segmente. Dabei<br />

können sie vordefinierte Segmente wie<br />

„Besuche mit Conversions“ und „Organische<br />

Zugriffe“ nutzen oder eigene<br />

Segmente erstellen. Google Analytics<br />

bietet eine große Auswahl an Visualisierungstools,<br />

wie für den Besucherfluss<br />

und die In-Page-Analyse, mit der Sie<br />

veranschaulichen, wie Nutzer mit Ihren<br />

Seiten interagieren. Auch eine Zusam-<br />

Analytics-IQ – Ausbildung durch Google<br />

Mit Google Analytics kann man einfach<br />

und schnell die Anzahl an Besuchern messen<br />

– oder tief und professionell in die<br />

Analyse des Nutzerverhaltens einsteigen.<br />

Wie tief, das kommt auf Ihren persönlichen<br />

Ehrgeiz an – bis hin zum zertifizierten<br />

Power-User, der sich in Google-<br />

Schulungen immer auf den aktuellsten<br />

Stand bringen lässt. An der Conversion<br />

University bietet Google kostenlose Online-Schulungen<br />

zu Google Analytics und<br />

Datenanalyse an. Mit Bestehen des Tests<br />

erhalten Sie eine in der Branche anerkannte<br />

Qualifikation. Online-Schulungen<br />

unter http://www.google.com/analytics/<br />

iq.html und Testcenter besuchen https://<br />

google.starttest.com/. Im offiziellen<br />

Youtube-Kanal von Google Analytics gibt<br />

es außerdem Videos zu diversen Themen<br />

für Anfänger bis hin zu Profis.<br />

Freiwillig auf die Schulbank mit von<br />

Google angebotenen Qualifikationsprüfungen<br />

mit Zertifikat: https://google.<br />

starttest.com/<br />

40 0413 internet magazin

---

HEAT SHEET<br />

Cheat Sheet | WEBDESIGN<br />

Links zum Thema<br />

menarbeit im Team wird innerhalb von<br />

Google Analytics unterstützt. Die Tools<br />

zum Teilen von Inhalten ermöglichen<br />

eine reibungslose Zusammenarbeit mit<br />

dem SEO-Team und der Redaktion.<br />

Vom Messen der Besucherzahlen<br />

bis hin zur Conversion<br />

Während Skeptiker auf Alternativen ausweichen,<br />

um dem Suchgiganten Google<br />

nicht zu viele Ihrer Daten zur Verfügung<br />

zu stellen, nutzen die meisten professionellen<br />

Optimierer bevorzugt die Tools<br />

der Suchmaschine, in der es Rankings<br />

zu erzielen gilt. Die kostenlosen Analyse-Tools<br />

von Google Analytics für eine<br />

beliebige Anzahl von Projekten, Accounts<br />

und Zielen erlauben es, die Besucherdaten<br />

einer Website bis ins letzte<br />

Detail zu durchleuchten. Google Analytics<br />

Premium ist zwar momentan nur<br />

in den USA, Kanada und Großbritannien<br />

verfügbar, doch in Sachen Support<br />

und professionelle Dienstleitung für die<br />

kostenlose in Deutschland verfügbare<br />

Version sind weiterführende Informationen<br />

im Angebot: Von Ressourcen für<br />

Entwickler (https://developers.google.<br />

com/analytics/) über das offizielle GA-<br />

Mit Hilfe von Regex Google Analytics<br />

besser nutzen<br />

http://www.reachblog.de/mithilfe-von-regex-google-analyticsbesser-nutzen/7568/<br />

Youtube Channel von Google Analytics<br />

http://www.youtube.com/user/<br />

googleanalytics<br />

Google Analytics Community auf G+<br />

https://plus.google.com/u/0/<br />

communities/1120791750<br />

65515050052<br />

Benutzerdefinierte Segmente in Google<br />

Nützliche Hilfe bei der Verwaltung<br />

diverser Projekte und Ziele: http://ganalyticsblog.de/analy-<br />

Analytics<br />

Google Analytics Configuration<br />

tics-tutorials/benutzerdefinierte-<br />

segmente-in-google-analytics/<br />

Tool (http://gaconfig.com/)<br />

und<br />

http://www.thomashutter.com/<br />

Blog (http://analytics.blogspot.com/) bis index.php/2011/10/googleanalytics-umgang-und-nutzenhin<br />

zum Nutzerforum (http://groups.<br />

von-erweiterten-segmenten/<br />

google.com/a/googleproductforums.<br />

Google-Analytics-Code mit dem “Google<br />

com/forum/#!forum/analytics). Unser Tag Manager” integrieren<br />

Cheat Sheet hilft Ihnen beim Einstieg in http://ganalyticsblog.de/<br />

die Arbeit mit Google Analytics und verschafft<br />

Ihnen einen Überblick über die<br />

analytics-allgemein/googleanalytics-code-mit-dem-neuengoogle-tag-manager-integrieren/<br />

Möglichkeiten, die es zu erkunden gilt.<br />

Insbesondere Filter und Regular Expressions<br />

werden Ihnen dabei helfen, das<br />

Verhalten Ihrer Besucher zu steuern und<br />

besser zu verstehen.<br />

Tracken 10 Einsatzgebiete von Analytics<br />

Sie ausgehende<br />

Leitende Angestellte erhalten Antworten auf folgende Fragen:<br />

Links und die<br />

» Welche Marketingmaßnahmen sind am effizientesten?<br />

Downloads von » Wie sehen die genauen Zugriffsmuster der Website aus?<br />

Dokumenten, behalten<br />

Sie Abrufe<br />

» Welche Kunden und Kundensegmente sind am wertvollsten?<br />

Marketingfachleute erhalten Antworten auf folgende Fragen:<br />

auf Umleitungen<br />

» Woher kommen die Besucher, wie agieren sie auf der Website?<br />

im Auge und verwalten<br />

Sie dyna-<br />

» Welche Keywords führen zu Conversions?<br />

» Wie kann die Website mehr Besucher zu Kunden machen?<br />

mische oder variable<br />

URLs, um bis<br />

» Welche Online-Anzeige ist am effektivsten?<br />

ins letzte Detail<br />

Content- und Webentwickler erhalten Antworten auf<br />

folgende Fragen:<br />

zu erfahren, was<br />

» Wo verlassen Nutzer die Website?<br />

Ihre Anwender » Auf welchen Seiten bleiben die Besucher am längsten?<br />

bei Ihnen suchen » Mit welchen Suchbegriffen wird die Website gefunden?<br />

– und finden. (Quelle: http://www.google.com/analytics)<br />

Carola Heine<br />

www.internet-magazin.de 41

---

WEBDESIGN | Cheat Sheet<br />

TEIL 7: GOOGLE ANALYTICS – QUICK REFERENC<br />

Google Analytics Cheat Sheet<br />

Setup: Es dauert bis zu 24 Stunden, bevor die ersten Berichte abgerufen werden können<br />

Sie können einem Analytics-Konto weitere Nutzer hinzufügen: Auf Kontoebene (Konto > Nutzer) und auf Profilebene (Konto > Property > Profil ><br />

Nutzer). Wenn Sie nun einen weiteren Nutzer hinzufügen, identifizieren Sie diese Person mit Hilfe einer Google-Mail-Adresse.<br />

Code integrieren 1. Melden Sie sich für ein neues Google-Analytics-Konto an.<br />

2. Richten Sie eine Eigenschaft ein: Website, mobile Anwendung, Blog usw.<br />

Hinweis: Sie haben die Wahl, ob eine Eins-zu-eins-Beziehung genutzt werden soll, also ein Konto entspricht einer Property (oder ob<br />

Ihrem Konto mehrere Eigenschaften zugewiesen werden sollen. (Sie können auch auf mehrere Analytics-Konten zugreifen.)<br />

3. Richten Sie Ihren Tracking-Code für diese Property ein.<br />

4. Fügen Sie die Analytics-Tracking-ID sowie den Tracking-Code in Ihre Website/App ein.<br />

Hinweis: Das Code-Snippet gehört unmittelbar vor den schließenden Tag .<br />

Überprüfen Sie, ob der Tracking-Code die richtige Web-Property-ID für Ihr Profil enthält (diese ID sollte von der Seite "Profileinstellungen"<br />

kopiert werden), siehe auch die weiteren Infos zur Überprüfung unter https://support.google.com/analytics/bin/<br />

answer.py?hl=de&answer=1008083<br />

Tipp: Wenn Sie Google Analytics mit Ihrem AdWords-Konto verknüpfen, protokolliert Analytics automatisch das Verhalten aller<br />

Besucher, die von Ihren Anzeigen weitergeleitet werden.<br />

Tracking von... Weiterleitungen machen die Seite durch die Weiterleitung zur Verweis-URI fürs Ziel. Der Tracking-Code wird auf Weiterleitungsund<br />

Zielseite integriert, sofern technisch möglich.<br />

Download-Links (PDF, AVI, WMV) erfordern eine Anpassung des HTML-Codes, wenn sie getrackt werden sollen:<br />

Bei virtuellen Seitenaufrufen _trackPageview() ergänzen, um dem Link einen Pfad beziehungsweise Seitennamen zuzuweisen.<br />

Bei Ereignis-Tracking zur Einrichtung von Kategorien, Aktionen und Labels für die zu analysierende Download-Datei die Funktion<br />

_trackEvent() ergänzen<br />

Beim Ereignis-Tracking werden Klicks auf Links nicht in der Gesamtanzahl an Seitenaufrufen Ihrer Website berücksichtigt. Außerdem<br />

können Sie 3 mögliche Segmente für den Link konfigurieren (Kategorie, Aktion und Label). Weitere Infos unter Ereignis-<br />

Tracking unter https://support.google.com/analytics/bin/topic.py?topic=1033067<br />

Ausgehenden Links: Tracking von nach extern führenden Verlinkungen erfolgt durch Google Analytics nicht automatisch – alle<br />

zu analysierenden Verweise sind manuell mit einem Tag zu versehen. (benutzerdefinierter JavaScript-Code mit Methode _trackEvent<br />

zusätzlich zum Tracking-Code).<br />

Alternativ: _trackPageview zur Analyse, wenn man begleitend eine Erhöhung der Seitenaufrufe durch diese Methode in Kauf<br />

nimmt.<br />

Flash-Elementen oder flash-basierten Websites: Infos unter http://code.google.com/intl/de-DE/apis/analytics/docs/tracking/<br />

flashTrackingIntro.html<br />

Warenkorb beziehungsweise E-Commerce: Weiterführende Infos unter https://support.google.com/analytics/bin/answer.<br />

py?hl=de&answer=1009612<br />

Besuchern mittels angepasstem Besucher-Tracking: Länge der Sessions bestimmen oder den Informationstyp festlegen, den<br />

Sie über den Browser des Besuchers sammeln möchten. Weitere Infos über besucherbezogene Konfiguration unter https://code.<br />

google.com/intl/de-DE/apis/analytics/docs/tracking/gaTrackingVisitors.html<br />

Ereignissen: Alles außer Seitenaufrufe erfassen, so wie Ajax-basierte Dienstprogramme, Gadgets, Videos. Siehe Weiterführendes<br />

unter https://code.google.com/intl/de-DE/apis/analytics/docs/tracking/gaTrackingVisitors.html<br />

Nutzer-Timings: Seitenladezeiten werden in Google Analytics automatisch erfasst, mit benutzerdefiniertem Tracking messen Sie<br />

die Timings für das Laden von Ajax-basierten Vorgängen und Ressourcen. Weitere Informationen unter https://developers.google.<br />

com/analytics/devguides/collection/gajs/gaTrackingTiming<br />

Conversion Eine Conversion wird gemeldet, wenn ein Besucher ein Ziel erreicht.<br />

Es gibt drei Arten von Zielen: URL-Ziel, Besuchszeit auf Website und Seiten pro Besuch. Sie definieren die Grenzwerte selbst. Mit<br />

der Vergabe von Zielen ermitteln Sie, wann Besucher einzelne Aktionen ausführen, und können so messen, wie weit die Site oder<br />

App die Zielvorgaben erfüllt: zum Beispiel verbrachte Zeitdauer oder Transaktionen mit einem Mindestbetrag.<br />

Im Menü "Profil" finden Sie den Tab "Ziele". Siehe auch Beispiele für die Strukturierung von Zielgruppen: http://analytics.<br />

blogspot.de/2012/06/ga-advocate-justin-cutroni-answers-your.html<br />

• Informationen zu • Dynamisch erstellte oder variable URLs<br />

• Feste URLs • Identische URLs bei mehreren Schritten<br />

• E-Commerce-Ziele • Ziele für mehrere Kriterien<br />

Weiterführende Informationen unter Conversion in der Hilfe zu Google Analytics unter https://support.google.com/analytics/bin/<br />

topic.py?topic=1631741<br />

42 0413 internet magazin

---

E GUIDE<br />

Cheat Sheet | WEBDESIGN<br />

Filter<br />

Regex: Anlegen von Filtern und Segmenten, um die mit Google Analytics erhobenen Daten besser zu verstehen.<br />

Anwendungsbeispiele: Suchmaschinen-Referrer für eine oder mehrere <strong>Search</strong> Engines ausblenden, eigene IP von der Erfassung ausnehmen, mit<br />

Segmenten sehen, wer über einen Newsletter auf die Site kam, mit Platzhaltern mehrere Schreibweisen filtern, Verweise über ein bestimmtes Social-<br />

Media-Netzwerk (oder alle) separat erfassen.<br />

Tipp: Regex so simpel wie möglich halten, um die wiederholte Verwendung einfach zu machen<br />

Platzhalter . Übereinstimmung mit jedem einzelnen Zeichen, egal ob Buchstabe, Zahl oder Symbol: ap.el stimmt überein mit apfel, appel,<br />

ap5el, ap&el<br />

* Übereinstimmung mit null oder mehr der vorherigen Elemente: Das vorherige Element ist standardmäßig das vorherige Zeichen:<br />

goo*gle stimmt mit gooogle und goooogle überein.<br />

+ Verhält sich wie ein Stern, außer dass das Pluszeichen mit mindestens einem vorherigen Element übereinstimmen muss.<br />

? Übereinstimmung mit null oder einem der vorherigen Elemente. Beispiel von Google: Kets?chup stimmt mit Ketchup und<br />

Ketschup überein.<br />

| Übereinstimmung mit "oder" - a|b stimmt mit a oder b überein<br />

Mehr zur Anwendung von umgekehrten Schrägstrichen "\" und Punkt "." unter http://support.google.com/analytics/bin/answer.<br />

py?hl=de&answer=1034332<br />

Anker<br />

^ Ihre Daten müssen am Anfang des Felds stehen: ^site stimmt mit site überein, aber nicht mit meinesite.<br />

$ Ihre Daten müssen am Ende des Felds stehen: site$ stimmt mit site überein, aber nicht mit sitescannen.<br />

Anker verhelfen Ihnen zu präziseren Übereinstimmungen. Um festzulegen, dass ein Ausdruck mit site beginnen und enden<br />

muss, setzen Sie ^site$ mit einem Anker am Anfang (^) und einem am Ende ($).<br />

Erläuterungen zum Caret-Zeichen ^ unter http://support.google.com/analytics/bin/answer.py?hl=de&answer=1034376 und zum $<br />

in Verbindung mit + unter http://support.google.com/analytics/bin/answer.py?hl=de&answer=1034378<br />

Gruppierung () Klammern zum Erstellen eines Eintrags anstelle des Standards. Dank(e|schön) stimmt mit Danke und Dankeschön überein.<br />

[] Mit eckigen Klammern erstellen Sie eine Liste mit Elementen für die Übereinstimmung: [abc] erstellt eine Liste, die a, b und c<br />

enthält.<br />

- Mit Bindestrichen und Klammern wird eine Liste erweitert: [A-Z] erstellt eine Liste des Alphabets in Großbuchstaben<br />

Mehr zu eckigen Klammern und Bindestrichen unter http://support.google.com/analytics/bin/answer.py?hl=de&answer=1034328<br />

Andere<br />

\ Wandelt ein Zeichen für einen regulären Ausdruck in ein gewöhnliches Zeichen um: meinedomain\.de verhindert, dass der<br />

Punkt als Platzhalter angesehen wird.<br />

Siehe auch: Mehr zur Anwendung von umgekehrten Schrägstrichen (\) und Punkt (.) unter http://support.google.com/analytics/<br />

bin/answer.py?hl=de&answer=1034332<br />

Profilfilter: vordefiniert und benutzerdefiniert<br />

Anwendungsbeispiele: Interne Zugriffe aus Berichten ausschließen durch Sperre auszuschließender IPs, Aktivitäten nur für bestimmte Directories<br />

auswerten (oder eines ausschließen), separate Profile für Subdomains anlegen und Berichte pro Domain ausgeben, URLs dynamischer Seiten in lesbare<br />

Zeichenfolgen konvertieren<br />

Der Administrator einen Google-Analytics-Konto hat die Möglichkeit, die Traffic-Daten eines Profils mit Filtern zu begrenzen und zu verändern.<br />

Vordefiniert Zugriffe nur auf eine bestimmte Domain erfassen/ausschließen<br />

Zugriffe nur über bestimmte IP-Adressen erfassen/ausschließen<br />

Zugriffe nur auf bestimmte Unterverzeichnisse erfassen/ausschließen<br />

Benutzerdefiniert<br />

Suchen und Ersetzen: Austausch eines Treffers durch eine Alternative<br />

Kleinschreibung/Großschreibung: Wandelt den gesamten Feldinhalt in Groß- oder Kleinbuchstaben um. Diese Filter betreffen<br />

nur Buchstaben.<br />

Muster ausschließen: Die mit diesen Zeichen übereinstimmenden Treffer werden vollständig ignoriert, alle anderen Protokolldaten<br />

ebenfalls ausgeblendet.<br />

Muster einschließen: Sämtliche nicht übereinstimmenden Treffer werden ignoriert und stehen für Berichte nicht zur Verfügung.<br />

Erweitert: Ermöglicht das Erstellen eines Felds aus mindestens einem anderen Feld.<br />

Weitere Informationen zu erweiterten Filtern: http://support.google.com/analytics/bin/answer.py?hl=de&answer=1034836<br />

Filter auf Kontoebene<br />

1. Im Analytics-Konto auf "Verwaltung" klicken<br />

2. das Konto auswählen, das gefiltert werden soll<br />

3. "Filter", "Neuer Filter"<br />

4. Name für den neuen Filter vergeben<br />

5. Vordefinierten Filter wählen oder benutzerdefinierten erstellen.<br />

www.internet-magazin.de 43

---

Testen Sie jetzt 3x <strong>Internet</strong> <strong>Magazin</strong> und erhalten Sie<br />

Sofort zu<br />

Nutzen Sie weiter die Vorteile des <strong>Internet</strong> <strong>Magazin</strong>-Premium-Abos!<br />

Ja, ich nehme Ihr Super-Testangebot an. Ich möchte drei Ausgaben des <strong>Internet</strong> <strong>Magazin</strong>s<br />

testen. Dazu erhalte ich als Prämie wahlweise den 32 GB USB-Stick, den Amazon.de-Gutschein<br />

im Wert von10Euro oder die revolt Powerbank für nur 14,99 €.<br />

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

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

INTERNET MAGAZIN-TESTABO<br />

JA, ich möchte die nächsten drei Ausgaben des <strong>Internet</strong> <strong>Magazin</strong>s testen. Außerdem erhalte ich<br />

wahlweise als Prämie gratis<br />

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

❏ den 10 Euro-Amazon.de-Gutschein (K971) für 14,99 Euro (Österreich 19,99 Euro*,Schweiz 29,99 sfr*)<br />

❏ die revolt Powerbank (K830) für 14,99 Euro (Österreich 19,99 Euro*,Schweiz 29,99 sfr*)<br />

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

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

Name, Vorname<br />

E-Mail (Für Korrespondenzzwecke)<br />

Straße, Nr.<br />

PLZ, Ort<br />

Gewünschte Zahlungsweise: Bequem durch Bankeinzug Gegen Rechnung<br />

Dafür erhalte ich 1Heft gratis (Nur im Inland!)<br />

BLZ<br />

Geldinstitut<br />

Kontonummer<br />

Sofort online bestellen:<br />

www.internet-magazin.de/<br />

angebot<br />

Per Post<br />

<strong>Internet</strong> <strong>Magazin</strong><br />

Kunden-Service<br />

Postfach 180<br />

77649 Offenburg<br />

oder faxen/anrufen:<br />

Fax: 0781 -846191<br />

Tel: 0781 -639 45 48<br />

✃<br />

Datum, Unterschrift<br />

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

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

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

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

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

telefonisch über interessante Vorteilsangebote informiert.<br />

WK30i2M04<br />

Gleich Coupon ausfüllen und einsenden

---

eine tolle Prämie dazu!<br />

Gleich online bestellen unter:<br />

www.internet-magazin.de/angebot<br />

greifen!<br />

Ab jetzt<br />

5€<br />

günstiger!<br />

Jetzt nur 14,99 €<br />

statt 19,99 €<br />

NEU!<br />

3x <strong>Internet</strong> <strong>Magazin</strong><br />

plus 32 GBSpeicherstick oder revolt-<br />

Powerbank oder 10 Euro-Amazon.de-<br />

Gutschein ab €14,99<br />

32 GB USB-Stick<br />

Der Speichergigant für den Alltag<br />

Der 32 GB USB-Stick ist angenehm klein,<br />

bietet aber genügend Speicherplatz für<br />

IhreDaten, wie etwa32.000 MP3s, 60.000<br />

Fotos, 12 Stunden Film oder eben<br />

32 Gigabyte Daten.<br />

Amazon.de-Gutschein<br />

im Wert von 10,- Euro<br />

Ein Heft GRATIS bei Bankeinzug!<br />

Wählen Sie<br />

eine dieser<br />

attraktiven<br />

Prämien!<br />

SATTE<br />

32 GB<br />

TOP-PRÄMIE<br />

DES MONATS!<br />

revolt Powerbank<br />

mit 4000 mAh<br />

Das Energiebündel für unterwegs:<br />

Sorgt für neue Energie und spendet Licht<br />

Sie bietet Strom abseits der Steckdose für iPhone,<br />

iPod, Navi, MP3-Player,Handy, Smartphone.Der kleine<br />

Kraftprotz hat drei USB-Adapter mit dabei. Damit<br />

macht er Geräte mit Dock Connector,Mini-USB und<br />

Micro-USB wieder fit. Ab €14,99! *<br />

Weitere Infos unter www.pearl.de!<br />

oder online bestellen unter www.internet-magazin.de/angebot

---

WEBENTWICKLUNG | XDEV 3<br />

Java-Power mit XDEV 3<br />

Wer schnell und einfach von Access, Oracle Forms, Visual Basic oder anderen 4gl-<br />

Lösungen auf Java umsteigen möchte, erhält mit XDEV 3 die perfekte Umgebung<br />

dafür. Kurz vor der Version 4 werfen wir einen Blick auf den Status Quo.<br />

Java ist für viele IT-Entscheider die<br />

Wunschtechnologie, wenn es um die<br />

Entwicklung von Individualsoftware für<br />

den Unternehmenseinsatz geht. Vielen<br />

galt Java jedoch bislang als zu kompliziert.<br />

Ohne langjährige Java-Erfahrung ist<br />

die Umsetzung einer größeren Geschäftsanwendung<br />

praktisch nicht möglich. Den<br />

meisten IT- und Fachabteilungen blieb<br />

in der Vergangenheit gar nichts anderes<br />

übrig, als auf sehr viel einfachere 4gl-<br />

Lösungen wie Microsoft Access, FoxPro,<br />

Oracle Forms, Visual Basic oder Delphi<br />

zurückzugreifen und die Nachteile zu<br />

akzeptieren. Mit XDEV 3 gibt es nun<br />

seit etwa zwei Jahren eine Alternative.<br />

XDEV 3 ist die erste Java- Entwicklungsumgebung,<br />

die wie Access, Visual Basic,<br />

Oracle Forms und andere 4gl-Lösungen<br />

funktioniert. Das Resultat ist jedoch eine<br />

Java-Anwendung, die sich nicht nur unter<br />

Windows, Linux und auf dem Mac,<br />

sondern auch als Webanwendung im<br />

Browser ausführen lässt. Damit tun sich<br />

für Java-Ein- und -Umsteiger völlig neue<br />

Möglichkeiten auf, denn ein schneller<br />

und einfacher Umstieg ist jetzt möglich.<br />

Zielgruppe sind Entwickler in IT- und<br />

Fachabteilungen, die möglichst schnell<br />

und einfach von einer 4gl-Lösung wie<br />

Access oder Forms auf Java umsteigen<br />

möchten. XDEV 3 läuft unter Windows,<br />

Linux und auf dem Mac und ist völlig<br />

lizenzkostenfrei verfügbar unter www.<br />

xdev-software.de. Das komplette Framework<br />

ist als Open Source unter der LGPL<br />

Lizenz veröffentlicht. Sie dürfen mit<br />

XDEV 3 entwickelte Anwendungen also<br />

auch kommerziell verbreiten, ohne dafür<br />

Lizenzgebühren zahlen zu müssen.<br />

Das XDEV-Projekt schreitet mit beeindruckender<br />

Dynamik voran. Seit unserem<br />

letzten Bericht im Mai 2012 hat sich eine<br />

Menge getan. Besonders positiv fällt auf,<br />

dass die Entwickler sehr stark auf die Be-<br />

46 0413 internet magazin

---

XDEV 3 | WEBENTWICKLUNG<br />

dürfnisse und Wünsche der Community<br />

eingehen und Feature-Wünsche überraschend<br />

schnell umsetzen. Grund genug,<br />

uns die neuesten Features und die bevorstehende<br />

Version 4 genauer anzusehen.<br />

Für alle, die XDEV 3 noch nicht kennen,<br />

hier zunächst ein kurzer Überblick über<br />

die wichtigsten Features und die Funktionsweise<br />

der Umgebung.<br />

Einfaches Oberflächendesign<br />

Eines der Highlights von XDEV 3 ist der<br />

GUI-Builder, der ähnlich wie Visual<br />

Basic funktioniert. Wie bei einem Grafikprogramm<br />

lassen sich alle zur Verfügung<br />

stehenden Controls mit Dragand-Drop<br />

in die Arbeitsfläche einfügen<br />

und dort völlig frei und pixelgenau positionieren.<br />

Neben Buttons, Labels und<br />

Formular-komponenten gehören eine<br />

Tabellen-komponente, Trees, Splitter,<br />

Tabs sowie verschiedene Fenstertechniken<br />

zum Standardumfang. Mit dem<br />

Einsatz von Layoutmanagern können<br />

sich Oberflächen auch an unterschiedlichste<br />

Auflösungen anpassen. Formulare<br />

und Trees<br />

lassen sich ganz<br />

leicht per Assistent<br />

XDEV Starter-Days 2013<br />

Sie möchten XDEV 3 genauer kennenlernen und alle wichtigen<br />

generie-<br />

Funktionen live erleben, sehen was möglich ist und individuelle<br />

Fragen stellen? Dann nutzen Sie die Gelegenheit und kommen<br />

ren. Auch für<br />

zur XDEV 3 Starter Workshop Roadshow 2013! Hier die Termine<br />

die Erstellung der Workshops in diesem Frühjahr:<br />

von Menüs und<br />

mehrsprachigen 9. April in Nürnberg 23. April in München<br />

Oberflächen gibt<br />

10. April in Hamburg 24. April in Berlin<br />

11. April in Stuttgart 25. April in Köln<br />

es intuitive Wizards.<br />

Bei jeder 17. April in Wien<br />

30. April in Ratingen<br />

16. April in Zürich 29. April in Frankfurt<br />

Änderung im<br />

GUI-Builder wird<br />

der Java-Quellcode<br />

Die Teilnahmegebühr beträgt 289,- Euro zzgl. 19% MwSt.<br />

Leser des <strong>Internet</strong>-<strong>Magazin</strong>s melden sich auf xdev-software.de/<br />

automatisch<br />

starter-days mit dem Anmeldecode internetmagazin2013 an und<br />

erhalten einen Rabatt von 200 Euro netto für den Workshop!<br />

im Hintergrund<br />

generiert, sodass<br />

der UI-Designer keine Java-Kenntnisse<br />

benötigt, sondern sich voll auf das Designen<br />

der Oberfläche konzentrieren<br />

kann. Beim Blick auf den generierten<br />

Code stellt man nicht nur eine erfreulich<br />

gute Struktur fest, es beeindruckt<br />

vor allem, wie viel Codierarbeit man<br />

sich mit XDEV 3 bei der Oberflächenentwicklung<br />

spart.<br />

Die Power steckt im Framework<br />

Mit einem GUI-Builder allein kommt<br />

man in Java nicht besonders weit. Denn<br />

vor allem das, was sich zwischen Datenbank<br />

und Oberfläche abspielt, ist in<br />

Java richtig kompliziert und erfordert den<br />

Einsatz komplexer Java-Enterprise-Technologien<br />

wie JPA oder Hibernate. Diese<br />

Frameworks setzen jedoch voraus, dass<br />

Der GUI-Builder funktioniert wie Visual Basic.<br />

www.internet-magazin.de 47

---

WEBENTWICKLUNG | XDEV 3<br />

man die objektorientierte Programmierung<br />

in Java aus dem Effeff beherrscht.<br />

Wer dagegen auf seine SQL-Kenntnisse<br />

setzen möchte, wird sich wundern, wie<br />

viel Code man bereits schreiben muss,<br />

nur um einige Datensätze in einer Tabelle<br />

anzuzeigen.<br />

Um das Vakuum zwischen Datenbank<br />

und GUI zu schließen, liefert XDEV<br />

3 ein Application Framework mit,<br />

das dem Entwickler die komplette<br />

Architektur und Infrastruktur für eine<br />

Der Code-Editor bietet<br />

alles, was Profis brauchen.<br />

Für Subversion<br />

gibt es jetzt<br />

eine feine<br />

Integration.<br />

Datenbankanwendung<br />

out-of-thebox<br />

zur Verfügung<br />

stellt.<br />

Herzstück des<br />

Frameworks<br />

ist ein Data<br />

Binding samt Schnittstellen zu allen<br />

wichtigen Datenbanken, mit der sich<br />

die Datenbank mit der Oberfläche<br />

verdrahten lässt und dabei sogar SQL<br />

unterstützt. Das Framework kümmert<br />

sich auch darum, dass editierte Daten<br />

transaktionssicher abgespeichert<br />

werden, erleichtert den Umgang mit<br />

Stored Procedures, den Zugriff auf<br />

Dateien und Desktop und vereinfacht<br />

damit die Anwendungsentwicklung<br />

mit Java insgesamt radikal.<br />

Code-Editor für Profis<br />

Was XDEV 3 nicht generieren kann, ist<br />

die individuelle Geschäftslogik Ihrer Applikation,<br />

die Sie direkt in Java implementieren<br />

können. Dafür bietet XDEV 3<br />

einen Java-Code-Editor mit Java-Compiler<br />

und -Debugger. Neben einer schnellen<br />

Autovervollständigung beherrscht<br />

XDEV 3 Syntax-Highlighting, Code-Folding,<br />

Code-Templates, unterstützt benutzerdefinierte<br />

Code-Templates, bietet<br />

ein schnelles Refactoring, eine globale<br />

Suche, Code-Generatoren für Klassen,<br />

Getter und Setter und seit Neuesten<br />

Integrationen für Subversion und Find-<br />

Bugs. Der Funktionsumfang dürfte auch<br />

den erfahrenen Profi überraschen, und<br />

in Sachen Geschwindigkeit kann XDEV<br />

3 ebenfalls mit Eclipse mithalten. Damit<br />

ist man mit XDEV 3 auch für große Projekte<br />

bestens eingerichtet.<br />

Eine Anwendung für viele<br />

verschiedene Plattformen<br />

Beim Deployment kann XDEV 3 nochmals<br />

richtig punkten. Per Assistent<br />

entscheidet der Entwickler, ob er sein<br />

Projekt als Java-Applikation für Windows,<br />

Linux oder Mac OS-X, als Java-<br />

Webstart oder als Webanwendung fertigstellen<br />

möchte. Auch auf den neuen<br />

Windows-8-Tablets sind XDEV-3-Anwendungen<br />

lauffähig. Die für ein vollständiges<br />

Deployment nötigen Skripte<br />

auf Basis von Apache Ant generiert<br />

XDEV 3 ebenfalls automatisch.<br />

Viele Extras als Add-on<br />

Als Add-on zu XDEV 3 steht mit der<br />

XDEV Component Suite die umfangreichste<br />

GUI-Control-Sammlung im gesamten<br />

Java Umfeld zur Verfügung, mit<br />

der man jede Business-Software praktisch<br />

ohne zusätzlichen Programmieraufwand<br />

mächtig aufwerten kann. Die Suite beinhaltet<br />

unter anderem verschiedene Data<br />

Grids, die ein Filtern und Gruppieren<br />

48 0413 internet magazin

---

XDEV 3 | WEBENTWICKLUNG<br />

Alle Anwendungen laufen auf dem Desktop,<br />

im Browser und auf Windows-8-Tablets.<br />

der Daten erlauben, verschiedene Filterkomponenten,<br />

Autovervollständigung,<br />

einen Richtext-Editor, List of Values, ein<br />

dockbares Fensterset und sogar eine vollständige<br />

Kalenderkomponente.<br />

Neue Features beeindrucken<br />

Seit dem letzten Teil unserer XDEV-3-<br />

Serie von 2012 sind zahlreiche neue<br />

Features dazu gekommen. Eine der wichtigsten<br />

Neuerungen haben die Entwickler<br />

am Framework vorgenommen, genau<br />

genommen an den Datenbankschnittstellen.<br />

Bei sämtlichen Datenbankabfragen,<br />

die von XDEV 3 automatisch im Hintergrund<br />

durchgeführt werden, erfolgt die<br />

Datenausgabe nun seitenweise. Dadurch<br />

können Speicherüberläufe gänzlich ausgeschlossen<br />

werden. Bei Listen und<br />

Tabellen wird neben Paging auch Lazy<br />

Loading unterstützt. Nicht nur schöner,<br />

sondern auch deutlich besser ist der vollständig<br />

neue ER-Designer, der nun auch<br />

verknüpfte Fremdschlüssel unterstützt.<br />

Die Verknüpfungen sind nun rechtwinkelig<br />

und Tabellen können hervorgehoben<br />

werden. Zusammen mit einer<br />

Zoom-Funktion sorgt dies vor allem bei<br />

umfangreichen Datenmodellen für eine<br />

deutlich bessere Übersicht. Ein echter<br />

Leckerbissen ist der neue Assistent für Internationalisierung.<br />

Ein Dialog listet alle<br />

Controls eines Fensters auf, ersetzt sämtliche<br />

Beschriftungen auf der Oberfläche<br />

durch Variablennamen und generiert für<br />

alle gewünschten Sprachen automatisch<br />

eine Sprach-Ressourcen-Datei. Damit<br />

ist auch eine nachträgliche Internationalisierung<br />

vieler Programmfenster sehr<br />

schnell umsetzbar. Ein Meilenstein aus<br />

technischer Sicht ist die neue Javabean-<br />

Integration, die auf den ersten Blick erst<br />

einmal nur dadurch auffällt, dass im<br />

GUI-Builder deutlich mehr Eigenschaften<br />

angezeigt werden. XDEV 3 unterstützt<br />

damit jedoch den Javabean-Standard<br />

nun vollständig, insbesondere Typen,<br />

Eigenschaften und Ereignisse. Externe<br />

GUI-Komponenten lassen sich nahtlos in<br />

_09Z8P_Webhoster_Neu_IM_03_webhoster_de_210x95.pdf;S: 1;Format:(210.00 x 95.00 mm);21. Jan 2013 13:25:44<br />

BESTE PERFORMANCE<br />

FÜR GESCHÄFTSKUNDEN.<br />

9,99<br />

EURO/MONAT<br />

BUSINESS TARIF<br />

P<br />

P<br />

P<br />

75 GB Speicherplatz<br />

100 GB Datentransfer/Monat<br />

eine eigene Domain<br />

P<br />

P<br />

P<br />

P<br />

100 weitere FTP Zugänge<br />

500 Subdomains<br />

1000 eMail Adressen<br />

75 x MySQL Datenbanken<br />

www.webhoster.de

---

WEBENTWICKLUNG | XDEV 3<br />

GanttChart,<br />

Kalender und<br />

Reporting gibt<br />

es "out of the<br />

box".<br />

den GUI-Builder einbinden und genauso<br />

wie die mitgelieferten Standard-Controls<br />

verwenden. Auch dynamische Eigenschaften<br />

werden jetzt unterstützt, sodass<br />

sich bei allen Eigenschaften nun auch<br />

benutzerdefinierter Code hinterlegen<br />

lässt. Mit Version 3.2 wurden sämtliche<br />

Datenbankschnittstellen in das XDEV-<br />

Framework übernommen und sind damit<br />

nun auch Open Source. Gleichzeitig<br />

werden mit den Schnittstellen für Ingres<br />

und Firebird zwei von der Community<br />

vielfach nachgefragte Datenbanken<br />

ebenfalls unterstützt. Auch der Code-<br />

Editor wurde kräftig mit neuen Features<br />

aufgerüstet. Die bedeutendste Neuerung<br />

ist die gelungene Integration von Apache<br />

Subversion (SVN), der beliebtesten Versionsverwaltung<br />

im Java-Bereich. Ebenfalls<br />

erwähnenswert ist die neue Find-Bugs<br />

-Integration. Das Tool analysiert Java-Bytecode<br />

automatisch nach bekannten Fehlermustern,<br />

ohne dabei das Programm<br />

ausführen zu müssen. Mit der XDEV BI<br />

Suite (Business Intelligence) steht nun<br />

eine zweite Komponentensammlung<br />

speziell für die Entwicklung von BI- und<br />

Reporting-Lösungen zur Verfügung. Das<br />

Paket enthält eine enorm mächtige Gantt-<br />

Chart-Komponente samt Konfiguratoren<br />

sowie ein Data Binding für die freie Java<br />

Report-Engine JasperReports.<br />

Maßgeschneiderte Java-Oberflächen<br />

sind im Handumdrehen<br />

konstruiert und lauffähig.<br />

Fazit<br />

XDEV 3 ist die erste Java-Entwicklungsumgebung,<br />

die wie Access, FoxPro,<br />

Oracle Forms, Visual Basic, Delphi und<br />

andere 4gl-Tools funktioniert. Das Ergebnis<br />

ist jedoch 100 Prozent Java. Damit<br />

vereinfacht XDEV 3 die Anwendungsentwicklung<br />

mit Java radikal und ermöglicht<br />

einen einfachen Umstieg auf Java. Der<br />

Hersteller finanziert das Open-Source-<br />

Projekt mit Services rund um Java und<br />

steht damit auf soliden Füßen. Das Projekt<br />

entwickelt sich mit großer Dynamik<br />

und begeistert durch seine Anwendernähe.<br />

Wer sich entscheidet, mit XDEV 3 zu<br />

entwickeln, der wird bis zu 80 Prozent<br />

kürzere Entwicklungszeiten erreichen<br />

und kann demnach mit deutlich geringeren<br />

Entwicklungskosten kalkulieren, als<br />

dies bei konventionellen Java-Projekten<br />

üblich ist. XDEV 3 ist lizenzkostenfrei<br />

verfügbar unter www.xdev-software.de.<br />

Als Einstieg empfehlen wir die Teilnahme<br />

an einem von zahlreichen Starter Days<br />

im April, gesponsort vom <strong>Internet</strong> <strong>Magazin</strong>.<br />

Anmeldung über<br />

www.xdev-software.de/starter-days<br />

Details entnehmen Sie dem Kasten XDEV<br />

Starter-Days 2013!<br />

Sven Neumann<br />

50 0413 internet magazin

---

DER MODERNE<br />

MUSIKREKORDER<br />

IM WEB.<br />

DEIN<br />

PERSÖNLICHER<br />

MUSIK REKOR-<br />

DER IM<br />

WEB.<br />

JETZT<br />

FREE-ACCOUNT<br />

ERSTELLEN<br />

UND KOSTEN-<br />

LOS TESTEN.<br />

LEGAL<br />

MUSIK WÜNSCHEN<br />

- AUFNEHMEN -<br />

ALS MP3 DAUER-<br />

HAFT BEHALTEN.<br />

GALAXYMUSIC DE<br />

DEIN PERSÖNLICHER MUSIKREKORDER IM WEB

---

WEBENTWICKLUNG | Wordpress Multiside<br />

Multisite: Doping<br />

für Wordpress<br />

Multisite ist ein in Wordpress integriertes Feature,<br />

das der einfachen Erzeugung und Administration<br />

eines Netzwerks von Websites dient. Nur wenige Nutzer<br />

kennen und verwenden es – und ignorieren damit<br />

eines der leistungsfähigsten und trotzdem recht einfach<br />

zu nutzenden Werkzeuge.<br />

Wer in Wordpress mehr als eine<br />

Handvoll Websites oder -Blogs<br />

betreibt, Wordpress-Sites seiner Kunden<br />

aktiv verwaltet oder den Besuchern<br />

seiner Wordpress-Website ermöglichen<br />

möchte, selbst eigene Blogs zu veröffentlichen,<br />

wird sich eher früher als später<br />

ein System wünschen, das die Installation<br />

und Pflege aller dieser Sites erleichtert<br />

oder vereinheitlicht. Wordpress<br />

Multisite, nachfolgend kurz Multisite<br />

genannt, ist ein solches System. Multisite<br />

ist nicht wirklich neu, es stammt<br />

von dem ursprünglich von Wordpress<br />

Auf einen Blick<br />

Wir stellen Ihnen Wordpress-Multisite<br />

vor und zeigen,<br />

» was Multisite leistet und wo es vorteilhaft<br />

eingesetzt werden kann,<br />

» wo sich der Einsatz von Multisite<br />

eher nicht empfiehlt und<br />

» wie einfach es ist, Multisite zu<br />

aktivieren.<br />

getrennt gepflegten Projekt Wordpressμ<br />

(oder Wordpress MU, MU für Multi-<br />

User) ab. Wordpressμ war die Version,<br />

die Wordpress mit Netzwerkfähigkeiten<br />

ausstattete und ansonsten einen Großteil<br />

des eigentlichen Wordpress-Codes<br />

nutzte. Natürlich war es nicht ideal,<br />

auf Dauer zwei getrennte Projekte zu<br />

pflegen. Auf die dadurch entstandenen<br />

Probleme, muss hier nicht weiter eingegangen<br />

werden, sie sind Geschichte.<br />

Denn seit Anfang 2010 ist Wordpressμ in<br />

Wordpress vollständig integriert und zu<br />

52 0413 internet magazin

---

Wordpress Multiside | WEBENTWICKLUNG<br />

dem geworden, was wir heute Multisite<br />

nennen. Was vielen Wordpress-Nutzern<br />

nicht bewusst ist: „Vollständig integriert“<br />

bedeutet unter anderem, dass Multisite<br />

tatsächlich bei jeder frisch heruntergeladenen<br />

oder aktualisierten Wordpress-<br />

Version mit an Bord ist – es ist lediglich<br />

zu aktivieren. Die Aktivierung erfordert<br />

allerdings etwas mehr als einen Mausklick,<br />

was vielleicht einer der Gründe ist,<br />

warum selbst Wordpress-Nutzer, für die<br />

sich der Einsatz von Multisite anbieten<br />

würde, lieber bei der Standardinstallation<br />

von Wordpress bleiben. Ein anderer<br />

Grund dürfte sein, dass Multisite mehr<br />

Serverressourcen benötigt als eine typische<br />

Wordpress-Website. Shared Hosting<br />

ist also für Mutisite nicht zu empfehlen.<br />

Und einige Hosting-Provider<br />

unterstützen Multisite erst gar nicht. Vor<br />

dem Einstieg sollten Sie also unbedingt<br />

klären, ob der Hosting-Provider mitspielt.<br />

Ausprobieren kann man Multisite<br />

aber auch auf einer lokalen Maschine.<br />

Viele Einsatzmöglichkeiten<br />

für Multisite<br />

Vor der Aktivierung von Multisite bildet<br />

Wordpress das Basissystem für genau<br />

eine Website oder einen Blog. Nach<br />

der Aktivierung ist es fast ein Kinderspiel,<br />

über ein modifiziertes Wordpress-<br />

Dashboard weitere Sites oder Blogs zu<br />

starten, die sich den größten Teil des<br />

einmal installierten Wordpress-Codes<br />

teilen. Der vereinfachte Launch neuer<br />

Blogs oder Websites ist aber nur einer<br />

von vielen Vorteilen, die Multisite bietet.<br />

Es gibt noch viele weitere: Es reicht,<br />

Wordpress-Aktualisierungen nur noch<br />

ein einziges Mal herunterzuladen und<br />

der Administrator muss nicht mehr jede<br />

Site einzeln aktualisieren. Dies gilt auch<br />

für Plugins und Themes. Auch sie sind<br />

nur noch ein einziges Mal zu installieren<br />

oder zu aktualisieren. Die frisch installierten<br />

Plugins und Themes stellt der<br />

Admin dann, falls er das wünscht, allen<br />

Sites und Blogs gewissermaßen per<br />

Knopfdruck zur Verfügung. Zusätzliche<br />

Multisite-Plugins eröffnen noch weitere<br />

Möglichkeiten, darunter folgende:<br />

» Das Multipost-Plugin (wordpress.<br />

org/extend/plugins/multipost-mu) erlaubt<br />

es, einen Beitrag nur einmal zu<br />

schreiben und ihn dann gleichzeitig<br />

in allen Blogs des Netzwerks zu veröffentlichen.<br />

Oder anders herum: Ein<br />

Blog für alle Posts, egal von welchem<br />

Sub-Blog sie kommen. Ermöglichen<br />

tut dies das Wordpress-MU-Sitewide-Tags-Pages-Plugin<br />

(wordpress.<br />

org/extend/plugins/wordpress-musitewide-tags).<br />

» Mit dem Domain-Mapping-Plugin<br />

(wordpress.org/extend/plugins/wordpress-mu-domain-mapping)<br />

ist es sehr<br />

einfach, Sites oder Blogs auf eine anderen<br />

Domain zu mappen, sie "on top"<br />

der anderen Domain laufen zu lassen.<br />

» Während Multisite eine gute Basis für<br />

Versionen einer Website in verschiedenen<br />

Sprachen bildet, bietet das<br />

Multisite-Language-Switcher-Plugin<br />

(wordpress.org/extend/plugins/<br />

multisite-language-switcher) einen<br />

einfachen Weg, die Beziehungen der<br />

Posts, Seiten, Kategorien, Tags und so<br />

weiter in der mehrsprachigen Multisite-Installation<br />

zu verwalten.<br />

Beispiele für Multisite im Einsatz gibt es<br />

viele. Mit mehr als 60 Millionen Sites<br />

oder Blogs ist Wordpress.com bei <strong>Internet</strong>nutzern,<br />

die schnell und einfach<br />

persönliche Blogs erzeugen möchten,<br />

extrem populär. Vermutlich wissen nur<br />

die wenigsten dieser 60 Millionen Nutzer,<br />

dass Wordpress.com auf Multisite<br />

basiert. Damit ist Wordpress.com nicht<br />

nur einer der größten Blogging-Dienste,<br />

sondern sicher auch die größte Multisite-<br />

Installation. Aber es geht auch kleiner:<br />

Ein sehr interessantes Projekt, das auf<br />

Multisite basiert, ist „Spotted by Locals“<br />

(http://www.spottedbylocals.com). Die<br />

Site gibt für 44 Städte Europas Tipps zu<br />

Restaurants, Bars, Cafés, Sehenswertem<br />

und mehr. Interessant<br />

daran ist,<br />

dass diese Tipps<br />

von Menschen<br />

stammen, die in<br />

diesen Städten leben.<br />

Multisite zunutze<br />

macht sich<br />

auch der Blog der<br />

Berliner „tageszei-<br />

Im Dashboard<br />

der Netzwerkverwaltung<br />

aktiviert und<br />

deaktiviert der<br />

Administrator<br />

Plugins und<br />

Themes für alle<br />

Sites des Netzwerks<br />

gleichzeitig.<br />

www.internet-magazin.de 53

---

WEBENTWICKLUNG | Wordpress Multiside<br />

tung“ (blogs.taz.de). Mehr Beispiele sind<br />

im Wordpress-Showcase (wordpress.org/<br />

showcase/flavor/wordpress-ms) zu finden.<br />

Wer sich einige der Beispiele ansieht<br />

und auf Wordpress.com die Liste<br />

der speziell für Multisite geschriebenen<br />

Plugins studiert, gewinnt schnell einen<br />

Eindruck davon, wie vielfältig und flexibel<br />

Multisite genutzt wird, beispielsweise<br />

für:<br />

» Community-Sites, wo Besucher oder<br />

Mitglieder selbst eigene Blogs starten<br />

können, oder<br />

» ein vereinfachtes Management mehrerer<br />

eigener Sites oder Sites von Kunden.<br />

Nicht überall geeignet<br />

Weniger einfach lässt sich herausfinden,<br />

wo sich ein Einsatz von Multisite nicht<br />

unbedingt empfiehlt. Unterm Strich ist<br />

dies allerdings genauso wichtig. Wer einen<br />

einzelnen Blog betreibt, ist in den<br />

meisten Fällen gut beraten, bei einer<br />

Worpress-Einzelinstallation zu bleiben,<br />

selbst wenn es viele Kategorien, Themen<br />

und mehrere Autoren gibt. So lange alles<br />

unter einem Site-Namen bleibt, ist diese<br />

Installation einfach genug zu pflegen.<br />

Dies gilt auch für Portfolio- oder Showcase-Websites<br />

mit Bildern, Fallstudien<br />

und so weiter. Eine Ausnahme bilden<br />

hier vielleicht Sites, die in mehreren<br />

Sprachen verfügbar sein sollen, denn<br />

die existierenden Multi-Language-Plugins<br />

für Wordpress arbeiten nicht immer<br />

zufriedenstellend.<br />

Multisite vereinfacht und zentralisiert<br />

das Management mehrerer Websites. Da<br />

gibt es nichts daran zu rütteln, allerdings<br />

ist diese Aussage etwas einzuschränken:<br />

Wenn es nämlich um mehrere Websites<br />

geht, die völlig unterschiedliche<br />

Ziele verfolgen sowie verschiedenartige<br />

Themes und Plugins nutzen, dann ist<br />

es in der Regel besser, auf Multisite zu<br />

verzichten. Es kann zwar mit Multisite<br />

funktionieren, wie man am Beispiel<br />

von Wordpress.com sieht, aber hinter<br />

Der Showcase auf wordpress.<br />

org bietet eine gute Übersicht<br />

darüber, wie vielfältig und<br />

flexibel Wordpress-Nutzer<br />

Multisite einsetzen.<br />

54 0413 internet magazin

---

Wordpress Multiside | WEBENTWICKLUNG<br />

Wordpress.com steckt auch eine große<br />

Organisation und Plugins stehen dort gar<br />

nicht erst zur Verfügung.<br />

Wordpress-Multisite aktivieren<br />

Neugierig auf Multisite geworden? Warum<br />

probieren Sie es dann nicht selbst<br />

aus? Für das Setup von Multisite gibt es<br />

zwar keine berühmte 5-Minuten-Methode,<br />

aber viel länger dauert es trotzdem<br />

nicht. Da die Aktivierung von Multisite<br />

zu einigen Änderungen in der Datenbank<br />

führt, ist es ratsam, die Site, mindestens<br />

aber die Datenbank zuvor zu<br />

sichern. Die Aktivierung beginnt dann<br />

damit, in der Datei wp-config.php eine<br />

Zeile einzutragen, die Wordpress bittet,<br />

etwas später im Wordpress-Backend ein<br />

paar Informationen anzuzeigen, die beschreiben,<br />

was genau wann, wie und wo<br />

zu tun ist.<br />

Öffnen Sie die Datei wp-config.php in<br />

Ihrem bevorzugten Editor und suchen Sie<br />

die folgende Kommentarzeile:<br />

/* That‘s all, stop editing! Happy<br />

blogging. */<br />

Fügen Sie nun oberhalb dieser Zeile folgende<br />

Zeile ein:<br />

define(‚WP_ALLOW_MULTISITE‘, true);<br />

Speichern Sie die Datei, melden Sie sich<br />

als Administrator bei Wordpress neu an<br />

und wechseln Sie ins Dashboard. Deaktivieren<br />

Sie dort zunächst alle Plugins,<br />

Sie können sie später wieder aktivieren.<br />

Öffnen Sie dann das Menü "Werkzeuge"<br />

und klicken Sie darin auf "Netzwerk-<br />

Einrichtung". Daraufhin öffnet sich eine<br />

Seite, die zur Eingabe einiger weniger<br />

Informationen auffordert, die zur Konfiguration<br />

des Site-Netzwerks erforderlich<br />

sind. Diese Seite sieht nicht in jeder Situation<br />

gleich aus, bei einer lokalen Installation<br />

fehlen beispielsweise ein paar<br />

Optionen.<br />

Eine Entscheidungen, die hier zu treffen<br />

ist, betrifft die Art, in der die einzelnen<br />

Sites später hinzugefügt werden:<br />

Wordpress selbst liefert detaillierte Anweisungen, welche Dateien wie zu editieren<br />

sind, um Multisite zu aktivieren.<br />

» Subdomain-Installation oder<br />

» Subverzeichnis-Installation.<br />

Bei einer Entscheidung für Subdomains<br />

muss der jeweilige Hosting-Provider das<br />

natürlich unterstützen, indem er Wildcard-Subdomains<br />

aktiviert. Die Alternative<br />

ist eine Subverzeichnis-Installation.<br />

Im ersten Fall werden die URLs später so<br />

aussehen: site1.meinesite.de, site2.meinesite.de<br />

und so weiter. Im zweiten Fall<br />

so: meinesite.de/site1, meinesite.de/site2<br />

und so weiter. Die Entscheidung liegt<br />

ganz bei Ihnen. Füllen Sie die Felder aus<br />

und klicken Sie dann auf "Installieren".<br />

blogs.dir, wp-config.php<br />

und .htaccess<br />

Jetzt öffnet sich eine Seite, die erfreulicherweise<br />

die Informationen liefert, um<br />

die wir Wordpress im ersten Schritt durch<br />

Einfügen der Zeile WP_ALLOW_MULTI-<br />

SITE in der Datei wp-config.php gebeten<br />

hatten. Im weiteren Verlauf sind zwei<br />

Dateien zu editieren, erstens erneut die<br />

Datei wp-config.php, zweitens die Datei<br />

.htaccess. Beherzigen Sie den Vorschlag<br />

von Wordpress, und sichern Sie<br />

diese beiden Dateien zuerst. Die Datei<br />

.htaccess sollte sich wie die wp-config.<br />

php im Wordpress-Rootordner befinden.<br />

Falls Sie diese Datei dort nicht sehen, erzeugen<br />

Sie sie.<br />

Folgen Sie einfach den Anweisungen, die<br />

Wordpress auf der Seite ausgibt. Ältere<br />

Wordpress-Versionen fordern noch dazu<br />

auf, innerhalb des Ordners wp-content<br />

den Ordner blogs.dir zu erzeugen. Dieser<br />

Ordner dient zum Speichern von Dateien,<br />

die über die später erzeugten Sites<br />

hochgeladen werden, er ist vergleichbar<br />

mit dem Ordner "uploads" einer regulären<br />

Wordpress-Installation. Seit der<br />

Wordpress-Version 3.5 ist dieser Ordner<br />

aber nicht mehr erforderlich, Wordpress<br />

speichert diese Dateien ab dieser Version<br />

im automatisch erzeugten Ordner "uploads/sites".<br />

Wenn Sie den Instruktionen<br />

von Wordpress bis ans Ende gefolgt sind,<br />

sollte das Wordpress-Multisite-Netzwerk<br />

nun laufen und Sie können damit beginnen,<br />

dem Netzwerk Sites hinzuzufügen.<br />

Neue Websites oder Blogs erzeugen Sie<br />

von nun an nochmals deutlich schneller,<br />

als mit der 5-Minuten-Methode. Einmal<br />

auf den Geschmack gekommen, werden<br />

Sie es vermutlich nie wieder anders machen<br />

wollen.<br />

Dirk Jarzyna<br />

www.internet-magazin.de 55

---

WEBENTWICKLUNG | <strong>Facebook</strong><br />

<strong>Facebook</strong>s Social<br />

<strong>Graph</strong> <strong>Search</strong><br />

Mit <strong>Facebook</strong> <strong>Graph</strong> <strong>Search</strong> wirft der Online-Gigant<br />

datenhungrigen Marketingmanagern einen saftigen<br />

Köder zu. Doch was sind die Implikationen für Unternehmen<br />

und Endanwender?<br />

Die Statistik beweist es: Wer nach<br />

Informationen sucht, der tut dieses<br />

mit Google. Dennoch ist Google+ bisher<br />

noch kein besonders erfolgreiches<br />

soziales Netz. Bei <strong>Facebook</strong> is es genau<br />

umgekehrt: Als soziales Netzwerk<br />

ist es ein durchschlagender Erfolg und<br />

kann inzwischen auf eine stolze Milliarde<br />

Anwender verweisen. Eine Milliarde<br />

<strong>Facebook</strong>-Anwender haben 240<br />

Milliarden Bilder für Freunde freigegeben<br />

und eine Billion Verbindungen<br />

zueinander aufgebaut. Im Bereich der<br />

Online-Suche hat <strong>Facebook</strong> bisher<br />

keine bahnbrechenden Innovationen<br />

vorweisen können. Dieses soll <strong>Graph</strong><br />

<strong>Search</strong> nun ändern.<br />

Open <strong>Graph</strong>, ein Vorläufer von <strong>Graph</strong> <strong>Search</strong>, kommt nur bei wenigen Marken und<br />

Diensten zum Einsatz; hier am Beispiel von Spotify Deutschland (spotify.com/de/).<br />

Wer sucht, der findet<br />

Die „Gefällt mir“-Klicks hatten bisher<br />

lediglich eine dekorative Funktion,<br />

doch seit <strong>Facebook</strong> sich zum Ziel gesetzt<br />

hat, Benutzerdaten aktiv zu monetisieren,<br />

sieht die Situation nun völlig<br />

anders aus.<br />

Der Name „<strong>Graph</strong> <strong>Search</strong>“ bezieht sich<br />

nicht auf die Visualisierung der Resultate,<br />

sondern auf die Tatsache, dass diese<br />

Funktion den so genannten „Social<br />

<strong>Graph</strong>“ von Facebok durchforstet, also<br />

die Datenstrukturen, die sich aus sozialen<br />

Beziehungen der Mitglieder zueinander<br />

ergeben.<br />

<strong>Graph</strong> <strong>Search</strong> ermöglicht es, mit intelligenten,<br />

kontextsensiblen Suchanfragen<br />

sehr fein granulierte Informationen über<br />

die Anwender von <strong>Facebook</strong> zu extrahieren.<br />

Wer etwa seinen Geburtstag feiert<br />

und Freunde einladen möchte, kann<br />

<strong>Facebook</strong> beispielsweise zu Rate ziehen,<br />

um zu ermitteln, was seine Freunde gerne<br />

essen, welche Musik sie am liebsten<br />

hören, oder welche Restaurants vor Ort<br />

sie gerne besuchen.<br />

Dennoch ist <strong>Graph</strong> <strong>Search</strong> nicht etwa<br />

ein Geschenk an den Verbraucher, sondern<br />

primär an Marketingpraktiker gerichtet.<br />

Für die Marktforschung kommt<br />

das Tool nämlich wie gerufen. Noch nie<br />

konnte man so gezielt und so präzise<br />

die Präferenzen der anvisierten Zielgruppe<br />

erforschen und demografische<br />

Kriterien mit persönlichen Vorlieben<br />

im Kontext sozialer Interaktionen untersuchen.<br />

Ein Marktforscher könnte<br />

beispielsweise die Gemeinsamkeiten<br />

verschiedener <strong>Facebook</strong>-Benutzer untersuchen,<br />

die ein bestimmtes Hotel in<br />

München mögen, und deren Einfluss<br />

auf ihren unmittelbaren Freundeskreis<br />

unter die Lupe nehmen.<br />

Die Kombination aus Big Data und<br />

der Verarbeitung natürlicher Sprache<br />

verleiht dem Konzept eine sehr hohe<br />

Flexibilität. Sobald die ersten Anwendungen<br />

auf Basis der <strong>Graph</strong>-API das<br />

Licht der Welt erblicken, bricht die Ära<br />

fein abgestimmter „sozialer“ Marktforschung<br />

erst recht an.<br />

56 0413 internet magazin

---

<strong>Facebook</strong> | WEBENTWICKLUNG<br />

<strong>Facebook</strong>s neue Suchanfragen<br />

mit sozialem Kontext<br />

<strong>Graph</strong> <strong>Search</strong> steht bisher lediglich handverlesenen<br />

Benutzern innerhalb von <strong>Facebook</strong><br />

zur Verfügung.<br />

Aktiviert man <strong>Graph</strong> <strong>Search</strong>, so verschwindet<br />

das klassische Suchfeld. Die<br />

Suchanfrage trägt man nun links in die<br />

obere <strong>Facebook</strong>-Leiste ein. Das aktualisierte<br />

Design der <strong>Facebook</strong>-Navigationsschaltfläche<br />

hat nun ein Lupensymbol<br />

und sieht damit der Adressleiste eines<br />

Browsers frappierend ähnlich aus.<br />

Nach der Aktivierung der Funktion<br />

auf der Willkommen-Seite können<br />

Sie eine Suchanfrage in natürlicher<br />

Sprache formulieren und zwischenmenschliche<br />

Beziehungen in die<br />

Suchkriterien einbeziehen.<br />

Bereits beim Eintragen der Suchphrase<br />

versucht <strong>Facebook</strong>, dem Benutzer kontextbezogene<br />

Vorschläge zu unterbreiten.<br />

Aktivieren von <strong>Facebook</strong> <strong>Graph</strong> <strong>Search</strong>.<br />

Verschickt der Benutzer die Abfrage, erhält<br />

er je nach Suchkriterien entweder<br />

eine Liste einzelner Fundstellen (zum<br />

Beispiel eine Liste der Profile von Bewohnern<br />

Münchens, denen das iPhone<br />

gefällt) oder aggregierte Resultate<br />

wie etwa eine Liste der verschiedenen<br />

Hobbys, denen die Mitglieder von <strong>Facebook</strong><br />

in einer bestimmten Altersgruppe<br />

nachgehen.<br />

So kann der Benutzer etwa nach Fotos<br />

suchen, die von seinen Freunden oder<br />

deren Kindern kommentiert wurden<br />

(„photos of my friends and their children<br />

commented on“), Interessensbereiche einer<br />

bestimmten Berufsgruppe erforschen<br />

(„Favorite interests of people who work<br />

as hair stylists “) oder <strong>Internet</strong>lesegewohnheiten<br />

bestimmter Altersgruppen<br />

ausloten und diese auf einen geografisch<br />

signifikanten Wohnort beschränken<br />

(„Pages liked by people who are older<br />

than 25 and live in Bavaria“).<br />

<strong>Graph</strong> <strong>Search</strong> und der Schutz<br />

der Privatsphäre<br />

Es ist erstaunlich, was <strong>Graph</strong> <strong>Search</strong> alles<br />

an Informationen über <strong>Facebook</strong>-Benutzer<br />

und ihre Interaktionen in Sekundenschnelle<br />

ans Tageslicht fördert. Eltern<br />

können die <strong>Facebook</strong>-Aktivitäten ihrer<br />

Kinder besser beaufsichtigen („Party-Fotos<br />

von meiner Tochter und ihren Freunden“),<br />

doch auch ein potenzieller Arbeitgeber<br />

kann <strong>Graph</strong> <strong>Search</strong> zu Rate ziehen.<br />

Sobald ein Benutzer einen Kommentar<br />

schreibt, ein Update postet, ein Foto freigibt,<br />

oder die „Gefällt mir“-Schaltfläche<br />

einmal anklickt, sind die Informationen<br />

für die Suche zugänglich.<br />

In diesem Kontext stellt sich die Frage,<br />

ob eine derart umfassende Freigabe persönlicher<br />

Informationen nicht die Privatsphäre<br />

des Einzelnen verletzt. Schließlich<br />

hat der Benutzer realistisch gesehen<br />

keine Möglichkeit, die Veröffentlichung<br />

privater Daten rückgängig zu machen,<br />

außer jeden „Gefällt mir“-Klick einzeln<br />

zu entfernen. Ob die Datenschützer der<br />

aktuellen Implementierung auf die Dauer<br />

den Zuspruch erteilen, ist zumindest<br />

fragwürdig. Die Betaversion des Dienstes<br />

gibt aber bereits den Vorgeschmack darauf,<br />

was <strong>Facebook</strong> über die Benutzer<br />

alles ermitteln kann.<br />

Marketingimplikationen<br />

von <strong>Graph</strong> <strong>Search</strong><br />

Die Bedeutung von <strong>Facebook</strong>s <strong>Graph</strong><br />

<strong>Search</strong> für das Marketing sind enorm.<br />

Marktforscher können dank der neuen<br />

Suche fein abgestimmte Informationen<br />

ans Tageslicht fördern, die ihnen erlauben,<br />

die Zielgruppe für Produkte und Dienstleistungen<br />

besser zu segmentieren.<br />

Die Suche nach den beliebtesten Aktivitäten<br />

der Deutschen im Alter von unter<br />

25 Jahren („Favorite activities of people<br />

who are younger than 25 and live<br />

in Germany“) verrät zum Beispiel, dass<br />

sich in dieser Zielgruppe 4,6 Millionen<br />

Menschen für den Fußball und 18,6<br />

Millionen Menschen fürs Fotografieren<br />

interessieren. Inwiefern diese Daten<br />

akkurat sind und ein vollständiges Bild<br />

über die Interessen dieser demografischen<br />

Zielgruppe liefern, ist allerdings<br />

noch unklar. Die aktuelle Betaversion<br />

von <strong>Graph</strong> <strong>Search</strong> unterstützt leider nur<br />

die Suche auf Englisch und die Resultate<br />

sind nur so gut wie die Informationen im<br />

Netzwerk. Ironisch gemeinte und ernsthaft<br />

gemeinte „Gefällt mir“-Klicks kann<br />

<strong>Facebook</strong> genauso wenig auseinander<br />

halten wie die Entwicklung der Benutzerpräferenzen<br />

im Verlauf der Zeit. Jemand,<br />

der vor drei Jahren Apple, Google oder<br />

Microsoft als Marke mochte, hat inzwischen<br />

möglicherweise völlig andere Präferenzen.<br />

Der Otto Normalverbraucher<br />

wird sich typischerweise nicht die Mühe<br />

geben, die einzelnen „Gefällt mir“-Klicks<br />

manuell aus seinem Profil zu entfernen,<br />

damit diese seine aktuelle Meinung adäquater<br />

reflektieren. Insofern gibt es einen<br />

großen Bedarf an intelligenten Algorithmen,<br />

welche das Besucherverhalten im<br />

Verlauf der Zeit und im Kontext anderer<br />

Aktivitäten auswerten. Das Konzept von<br />

www.internet-magazin.de 57

---

WEBENTWICKLUNG | <strong>Facebook</strong><br />

<strong>Facebook</strong>s <strong>Graph</strong> <strong>Search</strong> ist noch nicht<br />

völlig ausgereift, aber bereits in dieser<br />

frühen Form äußerst viel versprechend.<br />

Jeder Klick zählt – und wird<br />

gezählt<br />

Genauso wie bei einer politischen Wahl<br />

auf Bundes-, Landes- oder kommunaler<br />

Ebene scheint der Einfluss des Einzelnen<br />

nahezu vernachlässigbar zu sein,<br />

doch letztlich bestimmen alle abgegebenen<br />

Einzelstimmen das Endergebnis.<br />

Analog ist es bei den <strong>Facebook</strong>-Likes:<br />

Jeder Klick zählt. Wenn sich Millionen<br />

von <strong>Facebook</strong>-Benutzern für ein neues<br />

Smartphone oder einen neuen Musiktitel<br />

aussprechen, weil dieser ihren Freunden<br />

auch gefällt, kann der Absatz explosionsartig<br />

zunehmen. Da sich das Schneeballprinzip<br />

nachvollziehen lässt, können es<br />

die Marketingverantwortlichen für andere<br />

Produkte replizieren.<br />

Das Potenzial für die virale Verbreitung<br />

einer „Gefällt mir“-Stimme oder eines<br />

durch <strong>Facebook</strong> authentifizierten Kommentars<br />

– im Gegensatz zum anonymen<br />

Surfen im „offenen“ Web – erhöht die<br />

Relevanz der Benutzeraktivitäten aus<br />

Marketingsicht. Die Likes stellen bereits<br />

heute eine relevante Größe dar, mit der<br />

sich Web- und Datenanalytiker befassen<br />

müssen.<strong>Facebook</strong> <strong>Graph</strong> <strong>Search</strong><br />

könnte in naher Zukunft zu einem relevanten<br />

Marketinginstrument werden. Für<br />

die Werbeeinnahmen von Google und<br />

Bing stellt <strong>Graph</strong> <strong>Search</strong> aufgrund der<br />

gigantischen Größe der <strong>Facebook</strong>-Gemeinde<br />

eine ernsthafte Bedrohung dar.<br />

Damit es allerdings für Marketingpraktiker<br />

zu umsetzbaren Erkenntnissen führt,<br />

bedarf es leistungsfähiger Applikationen,<br />

welche die enorme Informationsflut zielgerichteter<br />

auswerten können.<br />

lichen Objekte lassen sich unter<br />

search?type=location&center=<br />

https://graph.facebook.com/search 37.76,-122.427&distance=<br />

durchsuchen. Das Format einer gültigen 1000&access_token=OAUTH_ACCESS_TOKEN<br />

Anfrage lautet:<br />

Anstelle von OAUTH_ACCESS_TOKEN<br />

https://graph.facebook.com/<br />

müssen Sie natürlich einen gültigen Authentifizierungsschlüssel<br />

eingeben.<br />

search?q=QUERY&type=OBJECT_TYPE<br />

Die unterstützten Objekttypen beinhalten Um den privaten Newsfeed eines Benutzers<br />

zu durchsuchen, der nur seinen<br />

alle öffentlichen Posts, Benutzer, Seiten<br />

(unter Angabe eines Zugangsschlüssels), Freunden zur Verfügung steht, benötigen<br />

Ereignisse, Applikationen, Gruppen, Sie eine Anfrage in der Form<br />

Orte, Check-ins und andere.<br />

https://graph.facebook.com/me/home?q=<br />

Zum Durchsuchen von Objekten an facebook&access_token=OAUTH_ACCESS_<br />

einem spezifischen Standort, verwenden TOKEN<br />

Sie eine Anfrage in der Form:<br />

Das angezeigte Resultat ist in diesem<br />

https://graph.facebook.com/<br />

Fall leider nicht aktuell; das Problem<br />

search?type=location&center=<br />

ist bekannt. <strong>Facebook</strong> arbeitet an der<br />

37.76,-122.427&distance=1000<br />

Fehlerbehebung. Bei Verwendung der<br />

konkret also zum Beispiel:<br />

<strong>Facebook</strong> <strong>Graph</strong>-API können Sie einen<br />

https://graph.facebook.com/<br />

Stapel von Anfragen auf einmal abschi-<br />

Das Suchfeld von <strong>Graph</strong> <strong>Search</strong>: Solange sich der Mauszeiger an einer neutralen<br />

Position befindet, ist das Suchfeld nicht offensichtlich.<br />

Suche mit Hilfe der <strong>Graph</strong>-API<br />

<strong>Facebook</strong>s zentrale API für die Suche ist<br />

die <strong>Graph</strong>-API. Alle öffentlich zugäng-<br />

Das Eingabefeld für <strong>Facebook</strong>s <strong>Graph</strong> <strong>Search</strong> offenbart sich im Browser erst nach einem<br />

Klick in die obere Leiste.<br />

58 0413 internet magazin

---

<strong>Facebook</strong> | WEBENTWICKLUNG<br />

<strong>Graph</strong> <strong>Search</strong><br />

mag noch in den<br />

Kinderschuhen<br />

stecken, das<br />

Konzept ist aber<br />

für das Online-<br />

Marketing der<br />

Zukunft vielversprechend.<br />

Abschicken einer Suchanfrage an <strong>Facebook</strong> <strong>Graph</strong> <strong>Search</strong>.<br />

cken, unabhängig davon, ob Sie eine<br />

oder mehrere Methoden in einem benutzen.<br />

Um Stapelanfragen abzuschicken,<br />

erstellen Sie ein JSON-Objekt,<br />

welches jeden einzelnen Vorgang beschreibt,<br />

und senden Sie es unter Verwendung<br />

der POST-Methode an die<br />

Endstelle der <strong>Graph</strong>-API unter:<br />

https://graph.facebook.com<br />

Der Code im folgenden Beispiel greift auf<br />

die Profilinformationen des betreffenden<br />

Benutzers zu und bezieht die ersten 50<br />

seiner Freunde ein<br />

curl \<br />

-F ‚access_token=…‘ \<br />

-F ‚batch=[{„method“:“GET“,<br />

„relative_url“:“me“},{„method“:“GET“,<br />

„relative_url“:“me/friends?limit=<br />

50“}]‘ \<br />

https://graph.facebook.com<br />

Wurden beide Operationen abgeschlossen,<br />

gibt <strong>Facebook</strong> eine detaillierte<br />

Antwort zurück. Diese beinhaltet<br />

für jeden einzelnen Vorgang einen<br />

Statuscode, den Header und zu guter<br />

Letzt auch den Body-Abschnitt, in<br />

dem sich ein mit einer Textzeichenkette<br />

codiertes JSON-Objekt befindet.<br />

Im konkreten Beispiel sieht das<br />

dann etwa so aus:<br />

Eine Liste von Fundstellen bei der Suche nach Interessen der <strong>Facebook</strong>-Benutzer im<br />

erweiterten Freundeskreis.<br />

[<br />

der obersten Ebene fungiert in diesem<br />

{ „code“: 200,<br />

Fall als Fallback-Token und kommt zum<br />

„headers“:[<br />

Einsatz, wenn eine individuelle Anfrage<br />

nicht über einen eigenen Authenti-<br />

{ „name“: „Content-Type“,<br />

„value“: „text/javascript; charset= fizierungsschlüssel verfügen sollte. Die<br />

UTF-8“ }<br />

Anzahl von Anfragen in einem Stapel<br />

],<br />

ist derzeit auf 50 limitiert. Jede Anfrage<br />

„body“: „{\“id\“:\“\“}“},<br />

{ „code“: 200,<br />

beim Berechnen der API-Anfragenkontingente<br />

und der Ressourcenfreigabe.<br />

„headers“:[<br />

{ „name“:“Content-Type“,<br />

<strong>Graph</strong> <strong>Search</strong> steht bisher lediglich<br />

„value“:“text/javascript; charset= wenigen Hand verlesenen Benutzern<br />

UTF-8“}<br />

und nur innerhalb von <strong>Facebook</strong> zur<br />

],<br />

Verfügung. Mit der Social-<strong>Graph</strong>-Suche<br />

„body“:“{\“data\“: [{}]}}<br />

technisch gesehen das Marketing neu<br />

]<br />

zu definieren und die Marktforschung<br />

Die Batch-API von <strong>Facebook</strong>, welche nachhaltig zu verändern. Fragwürdig<br />

die Stapelverarbeitung von Anfragen ist jedoch, ob <strong>Facebook</strong>s Eindringen<br />

auswertet, unterstützt die Einbindung in die persönliche Privatsphäre der<br />

mehrer Authentifizierungstokens, wobei<br />

maximal ein Token für jede indivi-<br />

Datenschützer finden wird.<br />

Endanwender auch den Zuspruch der<br />

duelle Anfrage zulässig ist. Der Token<br />

Filipe Martins / Anna Kobylinska<br />

www.internet-magazin.de 59

---

WEBBUSINESS | Provider-Portrait: <strong>Internet</strong>24<br />

E-Commerce-Profis<br />

Seit über 15 Jahren ist <strong>Internet</strong>24 bereits am Markt<br />

und hat sich in dieser Zeit zu einem leistungsstarken<br />

Anbieter vor allem für Business-Kunden im E-Commerce-Bereich<br />

entwickelt. <strong>Internet</strong> <strong>Magazin</strong> stellt den<br />

Dresdner Hoster genauer vor.<br />

Das Hosting anspruchsvoller E-Commerce-Projekte<br />

sieht <strong>Internet</strong>24 inzwischen<br />

als Schwerpunkt der eigenen<br />

Arbeit. Und so kommen regelmäßig neue<br />

Leistungen in diesem Bereich hinzu, zuletzt<br />

beispielsweise ein eigenes, weltweites<br />

Content Delivery Network (CDN),<br />

das vor allem international tätigen Kunden<br />

eine schnellere Auslieferung ihrer<br />

Website-Inhalte ermöglicht. Zu den Kunden<br />

von <strong>Internet</strong>24 zählen Melitta, Netto,<br />

Teekanne oder auch AMD. Insgesamt<br />

sind es 20.000 Kunden mit über 60.000<br />

Domains, die in den beiden Dresdner<br />

Rechenzentren des Unternehmens auf<br />

über 1.500 Servern bedient werden.<br />

Der Dresdner Webhosting-Provider, der<br />

schon seit 1997 im Geschäft ist, kombiniert<br />

leistungsfähige Technik mit individueller<br />

Betreuung seiner Kunden. Das<br />

macht <strong>Internet</strong>24 zu einem sehr guten<br />

Hosting-Partner für kleine bis große Unternehmen,<br />

die sowohl Standardprodukte<br />

als auch individuelle Lösungen mit guter<br />

Beratung benötigen.<br />

Einstieg: Shared Hosting<br />

Von diesem professionellen Umfeld profitieren<br />

aber auch kleinere Kunden, denn<br />

<strong>Internet</strong>24 hat nach wie vor auch günstige<br />

Shared-Hosting-Pakete sowie virtuelle<br />

Server im Angebot, die sich für kleine<br />

Unternehmen und sogar Hobby-Projekte<br />

eignen. Beim Shared Hosting beginnt<br />

<strong>Internet</strong>24 trotz des Schwerpunkts auf<br />

Business Hosting beim kleinsten Linux-<br />

Paket schon bei 4,90 Euro pro Monat.<br />

Mit Spezialpaketen wie beispielsweise<br />

für Adobes Webtechnologie Cold Fusion<br />

unter Windows sowie das in zwei Versionen<br />

verfügbare Hosting speziell für das<br />

Content-Management-System Typo3 auf<br />

Linux-Basis schließt sich der Kreis dann<br />

wieder zum Business-Hosting.<br />

Preisbewusst: Virtuelle Server<br />

Mit vServer deckt <strong>Internet</strong>24 das Segment<br />

der preisgünstigen Server ab und beginnt<br />

hier schon bei 25 Euro monatlich<br />

für einen vServer mit einem GByte RAM-<br />

Speicher, 25 GByte Speicherplatz sowie<br />

separaten 25 GByte Speicher für Backups<br />

als Garantieleistung. Darüber gibt es einen<br />

mit doppelter Leistung ausgestatteten<br />

vServer, oberhalb dessen die dedizierten<br />

Serverangebote übernehmen. Auch in<br />

einer Managed-Server-Version sind übrigens<br />

beide vServer-Varianten erhältlich.<br />

Hier überwacht der Hoster die Systeme,<br />

Bildquelle: © internet24 GmbH<br />

<strong>Internet</strong>24 ist bekannt für plakatives<br />

Marketing – hier die Visualisierung<br />

eines Managed Servers.<br />

kümmert sich um Serveradministration<br />

und Sicherheit. Zu den Managed vServern<br />

gehören zudem zusätzliche Features<br />

wie eine Inklusivdomain, Webmail und<br />

Mail-Konten mit Spam- und Virenfiltern.<br />

Königsklasse: Dedizierte Server<br />

Für Business-Kunden deckt <strong>Internet</strong>24<br />

alle relevanten Hosting-Bereiche ab:<br />

Von Spezialpaketen für Typo3 und Cold<br />

Fusion über virtuelle und dedizierte Server<br />

sowohl gemanagt als auch als Rootserver<br />

mit Varianten in Linux und Windows,<br />

für Magento und für Agenturen bis<br />

hin zum Server-Housing im eigenen Rechenzentrum<br />

in Dresden, einschließlich<br />

individueller Load-Balancing-Lösungen,<br />

CDN und Hochverfügbarkeitsclustern.<br />

Darüber hinaus bietet <strong>Internet</strong>24 standardmäßig<br />

auch zusätzliche Leistungen wie<br />

beispielsweise Backup- und Monitoring-<br />

Dienste, SSL-Zertifikate, Newsletter-Versand,<br />

MS-SQL-Server in verschiedenen<br />

Ausführungen sowie einen professionellen<br />

Webmailer, der kürzlich auf Open-<br />

Xchange-Technologie umgestellt wurde.<br />

Besondere Beachtung erfordert der Ressourcen-Hunger<br />

des E-Commerce-Systems<br />

Magento. <strong>Internet</strong>24 stellt hier optimierte<br />

Server bereit, die nicht nur entsprechend<br />

den Systemanforderungen von Magento<br />

ausgestattet sind, sondern auch weitere<br />

Optimierungen für Caching und eine angepasste<br />

Nutzung von PHP umfassen. Ein besonderes<br />

Augenmerk legt <strong>Internet</strong>24 auch<br />

auf die Bedürfnisse von Webagenturen<br />

und stellt hier angepasste Serverleistungen<br />

zur Verfügung. Bei diesen Paketen nimmt<br />

der Hoster den Agenturen beispielsweise<br />

große Teile der Systempflege ab und bietet<br />

viele Möglichkeiten, die Untereinheiten<br />

des Servers für die Kunden der Agentur flexibel<br />

und detailliert zu konfigurieren. Und<br />

nicht zuletzt setzt <strong>Internet</strong>24 auch stark auf<br />

ein Netz an Wiederverkäufern, die in ähnlicher<br />

Weise unterstützt werden.<br />

Franz Neumeier<br />

60 0413 internet magazin

---

GRATIS ZUM JAHRESABO!<br />

JETZT BESTELLEN<br />

UND VORZUGSANGEBOT SICHERN!<br />

12 Ausgaben <strong>Internet</strong> <strong>Magazin</strong> im Abo<br />

+ HTML5-Handbuch<br />

HTML5-Handbuch<br />

€ 52,90<br />

für nur € 52,90<br />

HTML5-Handbuch<br />

Das Kompendium für Entwickler, Blogger,<br />

Webautoren und Programmierer!<br />

HTML5 ist die Sprache des Web. Und das Buch von<br />

Stefan Münz und Clemens Gull ist die Grammatik<br />

dazu. Wie einst die von Stefan Münz mitbegründete<br />

Onlinereferenz SELFHTML beantwortet dieses<br />

Buch alle Fragen zum neuen <strong>Internet</strong>standard. Immer<br />

wichtiger wird dabei die Ausgabe auf Smartphones<br />

und Tablets, deshalb ist diesem Thema hier<br />

ein eigenes Kapitel gewidmet. Das unverzichtbare<br />

Standardwerk für jeden Webprofi!<br />

Jetzt bestellen unter<br />

www.internet-magazin.de/angebot<br />

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

mehr lieferbar sein, erhalten Sie einen qualitativ gleichwertigen Ersatzartikel.

---

WEBBUSINESS | Mobile Newsletter<br />

hat. Entsprechend schwer ist für den<br />

Empfänger die Entscheidung, ob es sich<br />

lohnt, eine E-Mail überhaupt zu öffnen<br />

oder ungelesen zu löschen. Häufig verursacht<br />

der Datenabruf umfangreicherer<br />

Nachrichten auch zusätzliche Kosten<br />

durch den Verbrauch von Traffic-Volumina,<br />

so dass sich die Lektüre aus Sicht<br />

des Nutzers lohnen muss. Der wichtigste<br />

Anhaltspunkt für diese Entscheidung<br />

bleibt also die stets angezeigte Betreffzeile.<br />

Um die Chancen auf eine gute<br />

Öffnungsrate zu erhöhen, sollten Sie diese<br />

Zeile noch genauer formulieren und<br />

die Vorteile in den Vordergrund stellen,<br />

die der Leser beim Öffnen der Mail hat.<br />

Viele Clients bieten zusätzlich auch die<br />

Anzeige eines so genannten Pre-Headers<br />

an. Direkt unter der Betreffzeile sind in<br />

diesem Fall etwa die ersten beiden Zeilen<br />

des Mailings zu lesen. Ergreifen Sie<br />

die Chance, dort bereits neugierig auf<br />

den Inhalt zu machen und vergeuden<br />

Sie diesen Platz nicht mit dem Hinweis<br />

darauf, was der Kunde tun soll, falls sich<br />

der Newsletter nicht korrekt öffnet.<br />

Optimale Newsletter<br />

für mobile Geräte<br />

Mobile Endgeräte wie Smartphones oder Tablets stellen<br />

besondere Anforderungen an das E-Mail-Marketing. Worauf<br />

Sie achten müssen, lesen Sie in diesem Artikel.<br />

Die Nutzung mobiler Endgeräte wie<br />

Smartphones und Tablets nimmt<br />

ungebremst zu. Allerdings fordern unterschiedliche<br />

Displaygrößen und sehr<br />

verschiedene technische Möglichkeiten<br />

in den jeweils installierten E-Mail-<br />

Programmen ein Umdenken beim Versenden<br />

von Newslettern. Die meisten<br />

Mailprogramme auf Smartphones oder<br />

Tablets besitzen keinen eigenen <strong>Vorschau</strong>bereich,<br />

wie ihn etwa Outlook<br />

Auf einen Blick<br />

Mobile Newsletter gewinnen mit dem<br />

anhaltenden Boom zu mobilen Endgeräten<br />

stetig an Bedeutung. Dieser<br />

Artikel zeigt Ihnen, wie Sie Ihren<br />

Newsletter für den Empfang und die<br />

Darstellung auf Smartphones oder Tablets<br />

optimieren.<br />

Knackpunkt "Bedienbarkeit"<br />

Ein erfolgreicher Newsletter sollte den Leser<br />

immer in Richtung einer Aktion führen, ob<br />

das nun der Abruf weiterer Informationen<br />

oder die Bestellung von Waren ist. Daher<br />

sollte bei der Gestaltung des Newsletters<br />

stets darauf geachtet werden, dass sich alle<br />

Links oder Aktionsschalter gut mit dem<br />

Finger antippen lassen. Produktbilder oder<br />

Teaser im Kopfbereich des Newsletters stellen<br />

in dieser Hinsicht weniger ein Problem<br />

dar. Anders sieht es indes aus, wenn der<br />

Nutzer die Bildübertragung abgeschaltet<br />

hat oder reine Textlinks verwendet werden<br />

sollen. Der Nutzer könnte natürlich auch<br />

die Zoomfunktion seines Geräts einsetzen,<br />

aber dazu müsste ihn die Botschaft schon<br />

sehr stark interessieren. Besser also, wenn<br />

der Newsletter ohne diese zusätzliche Aktion<br />

auskommt.<br />

Links werden für den Leser leichter nutzbar,<br />

wenn sie durch Leerzeilen oder größere<br />

Zeilenabstände deutlicher hervorgehoben<br />

und mit ausreichend Abstand<br />

zur nächsten Verlinkung gewählt werden.<br />

Oder man setzt auf größere Buttons, deren<br />

Beschriftung gleich zu einer Aktion auffordert.<br />

Achten Sie bei der Bedienung auch<br />

auf Kleinigkeiten: Wenn Sie im Newsletter<br />

dem Kunden die Option einräumen, Sie bei<br />

Rückfragen auch telefonisch zu erreichen,<br />

müssen Sie darauf achten, dass die im Text<br />

genannten Telefonnummern auch korrekt<br />

formatiert sind. Die mobilen Betriebssysteme<br />

verfügen über integrierte Parser, die<br />

dem Anwender anbieten, ein Gespräch mit<br />

einer als Rufnummer erkannten Zahlenfolge<br />

zu beginnen oder diese in das Adressbuch<br />

zu übernehmen. Mit der klassischen<br />

Notation im internationalen Format sind<br />

62 0413 internet magazin

---

Mobile Newsletter | WEBBUSINESS<br />

keine Probleme zu erwarten: Landeskennzahl<br />

ohne führende Nullen, die Vorwahl<br />

ohne Null sowie die Rufnummer im Format<br />

+498912345678.<br />

Das Layout optimieren<br />

Viele Newsletter werden heute in einem<br />

mehrspaltigen Layout versendet. Damit<br />

kann der Leser zwar mehr Informationen<br />

auf einen Blick erfassen, auf einem<br />

Smartphone erweist sich der Mehrspaltensatz<br />

dagegen regelmäßig als kontraproduktiv.<br />

Der Grund: Die einzelnen<br />

Bereiche sind einfach zu kleinteilig oder<br />

es zeigen sich hässliche Umbrüche.<br />

Besser ist es also, einen einspaltigen<br />

Newsletter zu versenden. Ist der Versand<br />

verschiedener Fassungen über Ihren<br />

Dienstleister nur schwer umzusetzen<br />

oder mit sehr großem Aufwand verbunden,<br />

bieten Sie eine optimierte Fassung<br />

für mobile Geräte über einen Link an.<br />

Optimierungspotenzial bietet auch die<br />

Typographie. Mobile Betriebssysteme<br />

nutzen bestimmte Fontgrößen in ihren<br />

Applikationen und vergrößern im Zweifel<br />

Schriften, die unter dem jeweiligen<br />

Schwellenwert liegen. Um die beste<br />

Lesbarkeit zu gewährleisten, dürfte alle<br />

gängigen Smartphones und Tablets eine<br />

Größe von 14 Pixeln für Fließtext und<br />

22 Pixeln bei Überschriften ein guter<br />

Kompromiss sein. Im Zweifel sollten Sie<br />

auf Navigationsleisten innerhalb des<br />

Layouts verzichten. Diese sind ohnehin<br />

meist zu klein und daher kaum zuverlässig<br />

anklickbar. Oder sie brechen um<br />

und verschwenden auf diese Weise den<br />

ohnehin knappen Platz auf dem Display.<br />

Jeder Gerätetyp besitzt eine andere Auflösung.<br />

Teilweise zoomt das Betriebssystem<br />

automatisch heran, um Details für<br />

den Nutzer erkennbar zu machen. Das<br />

funktioniert aber nicht immer fehlerfrei<br />

und gerade Besitzer älterer Smartphones<br />

müssen im Zweifel auf diesen Komfort<br />

verzichten. Im Ergebnis ist der Nutzer<br />

gezwungen, ständig zu scrollen oder zu<br />

zoomen. Das ist natürlich alles andere<br />

als optimale. Wesentlich besser ist es,<br />

den Newsletter gleich auf eine maximale<br />

Breite von 320 bis 550 Pixel hin zu<br />

optimieren. Der Einsatz eines responsiven<br />

Layouts, dessen CSS-Klassen flexibel<br />

auf die Media Querys reagieren,<br />

kann hier sehr viele Probleme lösen, erhöht<br />

aber natürlich auch den Aufwand,<br />

der für ein funktionierendes Template<br />

betrieben werden muss. Ebenfalls nicht<br />

zu vernachlässigen sind alternative Beschriftungen<br />

für eingebundene Bilder,<br />

da der Nutzer E-Mails wahlweise zunächst<br />

auch ohne Grafiken dargestellen<br />

lassen kann. Das erhöht die Übertragungsgeschwindigkeit<br />

und spart wiederum<br />

Datenvolumen. Um zu vermeiden,<br />

dass der Nutzer eines Smartphones Grafiken<br />

herunterladen muss, die von der<br />

Auflösung eher einem großen Monitor<br />

entsprechen, können Sie mit einfachen<br />

Lösungen wie Adaptive-Images<br />

http://adaptive-images.com/<br />

Der Platz im Posteingang des Anwenders<br />

ist umkämpft. Ergreifen Sie dort bereits<br />

die Chance, über den Pre-Header mehr<br />

über den Inhalt zu verraten.<br />

dafür sorgen, dass für die verschiedenen<br />

in der Media Query definierten Auflösungen<br />

das jeweils optimal passende<br />

Bildmaterial abgerufen wird. Dazu genügen<br />

die Einbindung einer PHP-Funktion<br />

und die Definition der verschiedenen<br />

Auflösungen im Quelltext der Seiten.<br />

Kontrolle Ihrer Auswertungen<br />

Generell sind alle Optimierungen eines<br />

Newsletters in Hinblick auf mobile Geräte<br />

bereits heute sinnvoll, da deren<br />

Nutzung ja noch weiter zunehmen wird.<br />

Wie umfassend diese Optimierungen<br />

sein sollten, zeigt ein tieferer Blick in Ihre<br />

Auswertungen zu den bisherigen Newsletter-Ausgaben.<br />

Überprüfen Sie dort<br />

die Anteile der verschiedenen Mailprogramme.<br />

So stellen Sie im Zweifel fest,<br />

ob Sie überhaupt einen HTML-Newsletter<br />

in mehreren Variationen benötigen<br />

oder ob reiner Text nicht bereits ausreicht.<br />

Für den optimalen Erfolg einer Kampagne<br />

wäre es mehr als empfehlenswert,<br />

zumindest eine zentrale Landing Page<br />

des Newsletters für die mobile Nutzung<br />

zu optimieren. Dies gilt insbesondere für<br />

Bestellseiten oder andere Formulareingaben,<br />

die vom Leser erwartet werden.<br />

Hier können die neuen Input-Typen, die<br />

in HTML5 bereitgestellt werden, dem<br />

Anwender die Eingaben deutlich erleichtern.<br />

So führt ein<br />

E-mail: <br />

auf dem iPhone dazu, dass ein spezielles,<br />

einfacheres Keyboard eingeblendet wird.<br />

Dieses bietet das @-Zeichen bereits an.<br />

Nur die wenigsten Unternehmen haben<br />

bereits alle Seiten eines <strong>Internet</strong>auftritts<br />

vollständig auf mobile Geräte optimiert.<br />

Wird von der Landing Page auf einen Bereich<br />

verwiesen, der noch nicht überarbeitet<br />

wurde, kann über die Media Query zumindest<br />

ein Hinweis eingestreut werden,<br />

dass hier noch Handlungsbedarf besteht.<br />

Stephan Lamprecht<br />

www.internet-magazin.de 63

---

WEBBUSINESS | Mobiles SEO<br />

Besucher mit mobilen<br />

Endgeräten analysieren<br />

Das Surfen mit Smartphones und Tablets wird immer beliebter. Kein Besitzer einer<br />

Website kann sich diesem Trend länger verschließen. Im folgenden Workshop erfahren<br />

Sie, was Sie für einen hohen Ranglistenplatz bei mobilen Surfern tun müssen.<br />

Haben Sie schon einmal eine Auswertung<br />

über die mobile Nutzung<br />

Ihrer Website gemacht und die Ergebnisse<br />

analysiert? Das lohnt, denn der<br />

Besucherstrom über mobile Endgeräte<br />

nimmt stetig zu.<br />

Dies hat auch die meisten Anbieter von<br />

Analysesoftware bewogen, eine entsprechende<br />

Rubrik innerhalb der Auswertungen<br />

anzubieten, denn die mobilen<br />

Surfer hinterlassen eindeutige Spuren in<br />

den Logdateien Ihres Webservers.<br />

Google Analytics beispielsweise bietet<br />

innerhalb der Auswertungen eine eigene<br />

Rubrik „Mobil“ an. Auf unserer Testwebsite<br />

gab es generell nur wenig Traffic,<br />

dafür waren das hauptsächlich mobile<br />

Besucher. In einer ersten Übersicht sagt<br />

Ihnen Google Analytics, ob die Besucher<br />

mobil unterwegs waren oder aus einem<br />

lokalen Netzwerk kamen. In einer Detailansicht<br />

bekommen Sie zudem noch<br />

aufgelistet, mit welchen Endgeräten die<br />

Besucher auf Ihre Websites zugreifen, mit<br />

welchem Betriebssystem und sogar mit<br />

welcher Display-Auflösung.<br />

Wachsende Bedeutung<br />

mobiler Endgeräte<br />

Damit haben Sie einen ersten Anhaltspunkt,<br />

wie es um Ihre mobilen Gäste<br />

bestellt ist. Sind die Zahlen noch nicht<br />

so überzeugend, dann sollten Sie sich<br />

Gedanken darüber machen, woran das<br />

Auf einen Blick<br />

Mehr als 10 Prozent aller Website-<br />

Zugriffe auf Webseiten werden heute<br />

bereits mit mobilen Endgeräten wie Samartphones<br />

oder Tablets durchgeführt.<br />

Lesen Sie in diesem Artikel, wie Sie Ihre<br />

Website für den mobilen Zugriff und das<br />

Suchmaschinen-Ranking optimieren.<br />

liegen könnte und ob Sie Ihre Website<br />

vielleicht mit Hilfe von SEO für mobile<br />

Geräte pushen sollten. Eins ist auf jeden<br />

Fall klar: Der Anteil mobiler Endgeräte<br />

im <strong>Internet</strong> wird unaufhaltsam steigen.<br />

Die 10-Prozent-Marke wurde laut Aussagen<br />

von Statista (http://de.statista.<br />

com/themen/258/mobiles-internet/infografik/587/<br />

anteil-mobileendgeraete-ander-internetnutzung/)<br />

bereits<br />

im Oktober<br />

2012 geknackt.<br />

Es gibt verschiedene<br />

Wege, wie<br />

Google Analytics<br />

zeigt Ihnen, wie<br />

viele mobile<br />

Endgeräte auf<br />

Ihre Website<br />

zugegriffen<br />

haben.<br />

64 0413 internet magazin

---

Mobiles SEO | WEBBUSINESS<br />

Mehr als 10<br />

Prozent der<br />

Surfer nutzen<br />

ein Smartphone<br />

oder Tablet für<br />

den Zugriff aufs<br />

<strong>Internet</strong>.<br />

Sie eine mobile<br />

Website zum<br />

einen attraktiv<br />

für Ihre Besucher<br />

und zum<br />

anderen für die<br />

Suchmaschinen-<br />

Crawler machen, was in der Regel nicht<br />

minder interessant ist.<br />

Angepasste Strategie<br />

Dies ist besonders deswegen wichtig,<br />

weil die Suchmaschinen inzwischen<br />

deutlich zwischen mobilen Websites<br />

und klassischen Desktop-Websites unterscheiden.<br />

Zuzuschreiben ist dies<br />

nicht zuletzt der unterschiedlichen<br />

Hardware, sondern auch dem abweichenden<br />

Nutzerverhalten auf Smartphones<br />

und Tablets. Die Suche auf<br />

einem Smartphone wird in der Regel<br />

durch ein Ereignis ausgelöst. Dies kann<br />

beispielsweise ein Einkauf sein, die Suche<br />

nach einem Restaurant oder einer<br />

beliebigen anderen Information sein.<br />

Aktionen, die längere Zeit in Anspruch<br />

nehmen, wie etwa der Abschluss einer<br />

Versicherung oder das Beantragen<br />

eines Kredits, werden normalerweise<br />

eher per Desktop-PC oder mit einem<br />

Tablet durchgeführt. Dies erkennen<br />

Sie deutlich an bekannten und erfolgreichen<br />

Apps: Die Amazon App bindet<br />

beispielsweise einen Barcode-Scanner<br />

für die Preisermittlung ein, verschiedene<br />

andere Apps liefern Ihnen zu Ihren<br />

Standortdaten passende Ergebnisse, wie<br />

etwa die günstigste Tankstelle oder das<br />

nächste Fastfood-Restaurant. Die Welt<br />

der mobilen Nutzer besteht somit nicht<br />

nur aus einem Browser, sondern vorrangig<br />

aus Apps, welche eine bestimmte<br />

Funktion in einer Anwendung kapseln.<br />

Auch für diese kann eine SEO-Strategie<br />

angewendet werden, wenn sich<br />

die App vorrangig oder ausschließlich<br />

klassischer Websites bedient und diese<br />

lediglich angepasst darstellt.<br />

Smartphone-Benutzer nutzen eher wenige<br />

Suchbegriffe um eine Website zu finden.<br />

Wichtige Punkte für die<br />

Optimierung<br />

Als Erstes sollten Sie sich ein Bild davon<br />

verschaffen, ob Ihre Website überhaupt<br />

von mobilen Endgeräten besucht wird<br />

und an welcher Stelle diese Ihre Site inder<br />

Regel wieder verlassen. Sollten Sie<br />

so gut wie keine mobilen Besucher haben,<br />

kann dies entweder an den Inhalten<br />

Ihrer Website liegen oder aber an deren<br />

Format. Wenn Sie selbst ein Smartphone<br />

nutzen, werden Sie sicherlich auch bei<br />

sich selbst ein verändertes Suchverhalten<br />

beobachtet haben. Da die Eingabe<br />

gerade bei einem kleineren Endgerät aufgrund<br />

der Tastatur eher schwerfällig ist,<br />

beschränkt man sich in der Regel auf wenige<br />

Suchbegriffe. Sie sollten deswegen<br />

die Keywords für eine mobile Website<br />

auf diese Situation hin entsprechend anpassen.<br />

Wählen Sie am besten sogenannte<br />

„Shorthead Keywords“, mit denen Sie<br />

den Inhalt Ihrer Website beschreiben.<br />

Dabei handelt es sich um Schlüsselbegriffe,<br />

die in der Regel nur aus einem<br />

Wort bestehen.<br />

Wenn Ihre Website einen hohen lokalen<br />

Bezug hat, sollten Sie dies ebenfalls bei<br />

der Wahl Ihrer Keywords beachten. Beispielsweise<br />

werden Suchanfragen nach<br />

einem Restaurant in der Nähe sehr oft<br />

von einem mobilen Endgerät aus gestartet.<br />

Der Suchende befindet sich in der<br />

Regel bereits vor Ort und sucht auf die<br />

Schnelle nach einem passenden Ergebnis.<br />

Ein weiterer Punkt, der bei mobilen<br />

Endgeräten zu massiven Problemen<br />

führt ist die Darstellung von Inhalten auf<br />

Basis von Flash. iPhones und iPads unterstützen<br />

diese generell nicht und auch<br />

aktuelle Android-Geräte bieten keine<br />

Flash-Unterstützung mehr an. Wenn<br />

Sie diese Technologie für die Darstellung<br />

wesentlicher Inhalte Ihrer Website<br />

nutzen, sollten Sie über einen Technologiewechsel<br />

nachdenken, um nicht von<br />

vornherein einen Großteil der mobilen<br />

Nutzer auszusperren.<br />

Empfehlungen von Google<br />

Neben diesen allgemeinen Tipps gibt es<br />

seit Mitte 2012 auch einen Leitfaden von<br />

Google (https://developers.google.com/<br />

www.internet-magazin.de 65

---

WEBBUSINESS | Mobiles SEO<br />

Google gibt<br />

Entwicklern und<br />

Webmastern<br />

verschiedene<br />

Hinweise für die<br />

Optimierung mobiler<br />

Websites.<br />

webmasters/smartphone-sites/). In die-<br />

sem wird beschrieben, welches die wich-<br />

tigsten Punkte des Google Crawlers bei<br />

der Indizierung mobiler Websites sind.<br />

Generell klassifiziert Google<br />

die mobilen Endgeräte<br />

in zwei Kategorien.<br />

Die erste be-<br />

steht aus Smart-<br />

phones, die eine<br />

Website wie ein<br />

normaler Desk-<br />

top-PC darstel-<br />

len können. Der<br />

auf diesen Geräten<br />

installierte Browser be-<br />

herrscht HTML. In diese Kategorie fallen<br />

auch alle aktuellen Tablets. Google und<br />

die anderen Suchmaschinenbetreiber<br />

unterscheiden zwischen diesen beiden<br />

Gerätetypen in der Regel nicht. Alle deren Geräte laufen unter der Kategorie<br />

an-<br />

„Feature Phone“ und benötigen eine<br />

spezielle Aufbereitung der Website beispielsweise<br />

im WAP-, WML oder CHT-<br />

ML-Format. Die zentrale Empfehlung<br />

von Google lautet, mobile Websites auf<br />

Basis von Responsive Design umzusetzen.<br />

Dies ist natürlich nur für Geräte der<br />

oben beschriebenen ersten Kategorie<br />

möglich, denn die älteren Geräte unterstützen<br />

kein HTML5. Google begründet<br />

seine Empfehlung anhand unterschiedlicher<br />

Argumente. Ein Besucher merkt<br />

sich am liebsten nur eine URL für seine<br />

Lieblingswebsite und kann diese unabhängig<br />

vom Endgerät nutzen. Wenn es<br />

nur eine einzige Website gibt, welche<br />

von allen Endgeräten genutzt wird, kann<br />

diese unter Umständen auch schneller<br />

geladen werden, zumindest falls keine<br />

Weiche vorgeschaltet ist, mit der im ersten<br />

Schritt das anfragende Gerät ermittelt<br />

wird. Allerdings kann dies auch ein<br />

Trugschluss sein, denn Sie können eine<br />

Website auch speziell für mobile Endgeräte<br />

optimieren, indem Sie Bilder und<br />

andere Inhalte entsprechend anpassen.<br />

Natürlich hat auch der Suchmaschinenhersteller<br />

Vorteile, denn die Algorithmen<br />

liefern bessere Ergebnisse, wenn sich<br />

alle Inhalte unter einer URL befinden<br />

und es nicht abhängig vom Endgerät<br />

unterschiedliche Einstiegspunkte gibt.<br />

Auch der dritte Grund resultiert aus der<br />

Arbeitsweise der Suchmaschinen-Crawler:<br />

Gibt es nur eine Website auf die alle<br />

Endgeräte zugreifen, benötigt der Crawler<br />

weniger Zeit für die Indizierung einer<br />

Website und kann gegebenenfalls mehr<br />

Inhalte indizieren, falls er nur eine limitierte<br />

Zeit auf einer Website verbleibt.<br />

Der Umbau gerade bei größeren Websites<br />

auf ein komplett neues Design ist<br />

jedoch in der Regel recht aufwändig<br />

und daher entweder gar nicht oder nur<br />

schrittweise zu bewältigen. Deswegen<br />

zeigt Google in seinem Leitfaden noch<br />

weitere Alternativen auf.<br />

66 0413 internet magazin

---

Mobiles SEO | WEBBUSINESS<br />

Vary-HTTP-header<br />

In einem solchen Fall können Sie natürlich<br />

auch verschiedene HTML-Seiten<br />

für die unterschiedlichen Endgeräte verwenden<br />

und diese entweder über eine<br />

gemeinsame URL mit einer Weiche oder<br />

direkt unter verschiedenen URLs verwalten.<br />

Für die einzelnen Szenarien gibt<br />

Google allerdings klare Empfehlungen,<br />

damit der Googlebot die verschiedenen<br />

Websites auch entsprechend identifiziert<br />

und die Zusammenhänge zwischen den<br />

einzelnen Inhalten herstellen kann.<br />

Nutzen Sie verschiedene HTML-Seiten,<br />

sollten Sie dem Googlebot einen entsprechenden<br />

Hinweis im HTTP-Header<br />

geben. Damit helfen Sie nicht nur den<br />

verschiedenen Crawlern, sondern sorgen<br />

auch für eine korrekte Auslieferung<br />

von gecachten Inhalten. Dank der Vary-<br />

HTTP-Header gibt sich eine Website klar<br />

als mobiles Exemplar oder als Desktop-<br />

Variante zu erkennen.<br />

Die entsprechenden Informationen sendet<br />

der Webserver als Antwort auf die<br />

Anfrage eines Browsers. Diese unterscheidet<br />

sich abhängig davon, welche<br />

Art von Endgerät beim Webserver anfragt.<br />

Das folgende Beispiel zeigt eine typische<br />

Anfrage und die Antwort des Webservers.<br />

Entscheidend an dieser Stelle ist die Zeile<br />

„Vary: User-Agent“, mit der auf abweichende<br />

Inhalte für unterschiedliche Endgeräte<br />

hingewiesen wird:<br />

GET /page-1 HTTP/1.1<br />

Host: www.meinewebsite.de<br />

(...es folgen die restlichen http<br />

Anfrage Header...)<br />

HTTP/1.1 200 OK<br />

Content-Type: text/html<br />

Vary: User-Agent<br />

Content-Length: 5710<br />

(...es folgen die restlichen http<br />

Antwort Header...)<br />

Weitere Hinweise zur Umsetzung dieser<br />

Vorgehensweise finden Sie bei Google<br />

Developers unter<br />

https://developers.google.com/web<br />

masters/smartphone-sites/redirects<br />

Komplett unterschiedliche<br />

Websites<br />

Die zweite Alternative, welche auch eine<br />

Vielzahl der großen, erfolgreichen Websites<br />

verwendet, ist die komplette Trennung<br />

der Inhalte zwischen der Desktop-<br />

Variante und der mobilen Variante über<br />

eine unterschiedliche URL. Dies ist oftmals<br />

auch dem eingesetzten Content-<br />

Management-System geschuldet. So finden<br />

Sie beispielsweise die mobile Bild.<br />

de Website unter der URL http://wap.<br />

bild.de, die mobile Version des Spiegels<br />

unter http://m.spiegel.de.<br />

Wenn Sie diesen Weg ebenfalls favorisieren,<br />

dann können Sie ihn auf verschiedene<br />

Weise implementieren. Der erste<br />

führt über einen entsprechenden Verweis<br />

auf die alternative Website gleichen Inhalts,<br />

aber spezieller Aufbereitung für das<br />

jeweilige Endgerät. Das folgende Beispiel<br />

bedient drei unterschiedliche Varianten:<br />

» www.meinewebsite.de/seite1.html repräsentiert<br />

die Desktop-Variante,<br />

» mobil.meinewebsite.de/seite1.html ist<br />

für aktuelle Smartphones und Tablets<br />

und<br />

» wap.meinewebsite.de/seite1.html ist<br />

für ältere Telefone mit einem einfachen<br />

HTML-Browser.<br />

In diesem Fall fügen Sie auf der Desktop-Website<br />

einen Verweis auf die beiden<br />

anderen Alternativen ein und auf<br />

den beiden Ausprägungen innerhalb der<br />

Sub-domains jeweils einen Verweis auf<br />

die Desktop-Variante. Die Verlinkung<br />

findet jeweils über das link-Tag statt, wo-<br />

_09Z8N_Webhoster_Neu_IM_03_homepage_info_210x95.pdf;S: 1;Format:(210.00 x 95.00 mm);21. Jan 2013 13:25:49<br />

DER EINFACHSTE WEG<br />

ZU IHRER EIGENEN<br />

HOMEPAGE<br />

JETZT<br />

KOSTENLOS<br />

TESTEN<br />

ÜBER 100 DESIGN<br />

www.internet-magazin.de THEMEN ZUR AUSWAHL<br />

67<br />

WWW.HOMEPAGE.INFO

---

WEBBUSINESS | Mobiles SEO<br />

bei bei dieser Konstellation die Desktop-<br />

Variante als Hauptseite die beiden anderen<br />

mit der Beziehung alternate versieht.<br />

Die mobile und die WAP-Variante stellen<br />

die Beziehung entsprechend über canonical<br />

her und setzen auf diesem Weg eine<br />

Rückreferenzierung.<br />

<br />

<br />

Wie Sie an diesen beiden Zeilen erkennen,<br />

funktioniert die Identifizierung<br />

über das media-Tag. Die erste<br />

Zeile verweist alle Smartphones und<br />

Tablets mit einer maximale Breite von<br />

640 Pixeln auf die Mobil-Subdomain,<br />

die zweite Zeile entsprechend alle älteren<br />

Geräte auf die wap-Subdomain.<br />

Alle anderen Anfragen verbleiben auf<br />

der Hauptdomäne. Die Rückreferenzierung<br />

sieht auf beiden Alternativ-<br />

Sites gleich aus.<br />

<br />

Haben Sie sich für diesen Weg entschieden,<br />

dann sollten Sie auch Ihre Sitemap<br />

anpassen. Das folgende Beispiel zeigt<br />

den obigen Fall, in welchem die Desktop-Seiten<br />

den Standard darstellen und<br />

die beiden Subdomains die fallspezifischen<br />

Ausnahmen.<br />

<br />

<br />

<br />

http://www.meinewebsite.de/<br />

seite1.html/<br />

<br />

<br />

<br />

<br />

Googlebot-Mobile<br />

Eine mobile Website ist nur dann erfolgreich,<br />

wenn die Suchmaschinen<br />

auch davon Notiz nehmen. Wenn Ihre<br />

klassische Website bereits im Index<br />

vorhanden ist und Sie die Verweise auf<br />

die mobilen Websites entsprechend gesetzt<br />

haben, ist es nur eine Frage der<br />

Zeit, bis diese auch indiziert werden.<br />

Ob Google bereits seine mobilen Bots<br />

vorbeigeschickt hat, können Sie an zwei<br />

unterschiedlichen Agents in Ihrem Webserver-Log<br />

erkennen. Der Smartphone-<br />

Googlebot-Mobile identifiziert sich mit<br />

Mozilla/5.0 (iPhone; U; CPU iPhone<br />

OS 4_1 like Mac OS X; en-us)<br />

AppleWebKit/532.9 (KHTML, like Gecko)<br />

Version/4.0.5 Mobile/8B117<br />

Safari/6531.22.7 (compatible;<br />

Googlebot-Mobile/2.1;<br />

http://www.google.com/bot.html)<br />

Für die älteren mobilen Endgeräte gibt<br />

es zwei Bots: Der eine kommt mit einer<br />

Samsung-Kennung, der zweite mit der<br />

Kennung DoCoMo. Die entsprechenden<br />

Einträge in Ihrer Protokolldatei sollten<br />

wie folgt aussehen:<br />

SAMSUNG-SGH-E250/1.0 Profile/<br />

MIDP-2.0 Configuration/CLDC-1.1<br />

UP.Browser/6.2.3.3.c.1.101 (GUI)<br />

MMP/2.0 (compatible; Googlebot-<br />

Mobile/2.1; +http://www.google.com/<br />

bot.html)<br />

DoCoMo/2.0 N905i(c100;TB;W24H16)<br />

(compatible; Googlebot-Mobile/2.1;<br />

+http://www.google.com/bot.html)<br />

Fazit<br />

Den goldenen Weg für das Mobile SEO<br />

gibt es aktuell noch nicht. Generell ist<br />

das Mobile SEO eher eine Mischung<br />

aus guter Analyse des Besucherverhaltens<br />

und Website-Optimierung im Rahmen<br />

der technischen Möglichkeiten.<br />

Wenn Sie eine Website komplett neu<br />

aufsetzen, dann sollten Sie dies auf Basis<br />

von Responsive Design tun. In allen<br />

anderen Fällen sollten Sie die Variante<br />

wählen, welche technisch mit vertretbarem<br />

Aufwand umsetzbar ist. Achten<br />

Sie bei der Implementierung darauf,<br />

den eingeschlagenen Weg wie aufgezeigt<br />

den Suchmaschinen-Crawlern<br />

transparent zu machen. Mit der Zeit<br />

wird sich der gewünschte Erfolg und<br />

ein positives Suchmaschinen-Ranking<br />

entsprechend einstellen.<br />

Andreas Hitzig<br />

68 0413 internet magazin

---

Jetzt testen!<br />

3x für 11,90 €<br />

+<br />

ein Geschenk<br />

Ihrer Wahl.<br />

Europas größtes <strong>Magazin</strong><br />

für Telekommunikation<br />

connect ist die anerkannte Test-Institution<br />

für alle Themen der Telekommunikation<br />

und der ultimative Kauf- und Praxisratgeber<br />

rund um die vernetze Welt. Kein anderes<br />

<strong>Magazin</strong> informiert so fundiert, zuverlässig,<br />

umfassend und aktuell wie connect.<br />

Umfangreiche Marktübersichten, Servicetests,<br />

Ratgeber und Tarifvergleiche geben<br />

Orientierung. connect - Ihr Berater für<br />

Telekommunikation; jeden Monat neu.<br />

8 GB Mini USB-Stick<br />

• Hochwertig verarbeitetes Gehäuse mit Schutzkappe<br />

• USB 2.0-Anschluss<br />

• Für alle Betriebssysteme<br />

• Maße: ca. 29 x 11 x2mm<br />

• Gewicht: ca. 2g<br />

• Abbildung ähnlich<br />

Gratis<br />

i-Stylo - Stift mit Touch-Funktion<br />

• Stift in Kugelschreiber-Optik mit Touch-Funktion für<br />

Smartphones<br />

• Durch Berühren des Clips wird die nötige Spannung<br />

erzeugt, um kapazitive Touchscreens zu bedienen<br />

• Treffsicheres Verfassen, bequemeres Navigieren<br />

• Lieferung mit Etui<br />

Gratis<br />

Ihre Vorteile im Abo:<br />

• 20% Preisvorteil gegenüber Einzelkauf<br />

• Ein Geschenk Ihrer Wahl<br />

• 1 Heft gratis vorab bei Bankeinzug<br />

• Keine Zustellgebühr<br />

Dieses und viele weitere interessante<br />

Angebote gleich online bestellen:<br />

www.connect.de/abo<br />

Coupon ausfüllen, abtrennen und einsenden<br />

So einfach geht‘s:<br />

Online unter:<br />

www.connect.<br />

de/abo<br />

Per Telefon:<br />

0781-639 45 48<br />

Ja, ich teste<br />

Als Dankeschön wähle ich folgendes Geschenk:<br />

für zunächst 3 Ausgaben zum Vorteilspreis von nur 11,90 € mit Preisvorteil!<br />

Name Vorname Geburtsdatum<br />

Straße/Nr.<br />

Mini USB-Stick (K558) i-Stylo Stift weiß (K831) schwarz (K832)<br />

Schicken Sie mir die nächsten 3 Hefte connect zum Vorteilspreis von nur 11,90 € (Österreich 16,90 €, Schweiz SFr 23,80) und ich erhalte als Dankeschön<br />

ein Geschenk meiner Wahl. Wenn ich connect danach weiter beziehen möchte, brauche ich nichts weiter zu tun. Ich erhalte connect dann zum regulären<br />

Abopreis (12 Ausgaben für z.Zt. 57,90 EUR) mit 3,5% Preisvorteil (Österreich 67,90 €, Schweiz SFr 115,80). Das Jahresabo kann ich nach Ablauf des ersten<br />

Bezugsjahres jederzeit wieder kündigen. Das Dankeschön erhalte ich umgehend nach Zahlungseingang. Eine eventuelle Zuzahlung zum Geschenk wird per<br />

Nachnahme / Rechnung erhoben. Wenn ich connect nicht weiter beziehen möchte, genügt ein kurzes Schreiben bis 3 Wochen vor Ablauf des Miniabos (Datum,<br />

Poststempel) an den connect Leserservice, Postfach 180, 77649 Offenburg. Dieses Angebot gilt nur in Deutschland, Österreich, Schweiz und solange der<br />

Vorrat reicht. Weitere Auslandskonditionen auf Anfrage: weka@burdadirect.de<br />

Per Fax:<br />

0781-84 61 91<br />

PLZ/Ort<br />

E-Mail-Adresse<br />

Telefon<br />

Ich bin damit einverstanden – jederzeit widerruflich-, dass mich der Verlag WEKA MEDIA PUBLISHING künftig per E-Mail und telefonisch über interessante Vorteilsangebote informiert.<br />

Per Post:<br />

connect Kunden-Service<br />

Postfach 180, 77649 Offenburg<br />

Datum<br />

Unterschrift<br />

Ich bezahle bequem per Bankeinzug:<br />

(nur in Deutschland möglich) und erhalte dafür ein Heft GRATIS vorab (KB01).<br />

1 Heft GRATIS!<br />

BLZ<br />

Kontonummer<br />

connect erscheint im Verlag WEKA MEDIA PUBLISHING GmbH,<br />

Richard-Reitzner-Allee 2, 85540 Haar, Handelsregister München,<br />

HRB 154289<br />

Geldinstitut<br />

Datum Unterschrift WK 3009 M

---

TIPPS & TRICKS | HTML, CSS, Javascript, PHP & Windows 8<br />

TIPPS & TRICKS<br />

<strong>Internet</strong> Explorer: Testen und<br />

Entwickeln mit Modern.IE<br />

Das Entwickeln und Testen von Websites für den <strong>Internet</strong> Explorer bereitet Webdesignern<br />

seit jeher Probleme. Microsoft hat sich der IE-Misere angenommen und<br />

versucht, ihnen mit neuen Lösungen unter die Arme zu greifen.<br />

Einen neuen Dienst von Microsoft zum Testen und Optimieren<br />

von Websites unter Einhaltung von W3C-Standards finden<br />

Sie unter der Adresse<br />

http://www.modern.ie/<br />

Hier können Sie registrierungs- und kostenfrei Ihren Webprojekten<br />

auf den Zahn fühlen, um Problemstellen aufzudecken<br />

und Optimierungspotenzial auszuloten. Selbstverständlich verfolgt<br />

Microsoft hierbei ein Eigeninteresse: Neben reinen Webstandards<br />

wie HMTL5 und CSS3 können Sie auch Microsoft-<br />

eigene Technologien wie Touch-Apps für Windows 8 sowie die<br />

Xbox austesten. In Zusammenarbeit mit Browserstack bietet<br />

Ihnen Modern.IE unter anderem eine virtualisierte Umgebung<br />

zum Testen Ihrer Webprojekte in allen gängigen Browsern auf<br />

einer Vielzahl unterstützter Betriebssysteme, darunter Mac OS X<br />

Ab etwa 15 Euro<br />

(19 USD) pro Monat<br />

bietet Ihnen<br />

browserstack.com<br />

die Möglichkeit,<br />

Ihre Webprojekte<br />

in einer virtualisierten<br />

Umgebung<br />

auf nahezu<br />

allen Browsern zu<br />

testen.<br />

und Linux, sowie auf zahlreichen Mobilgeräten, wahlweise<br />

auf Ihrem lokalen System oder in der Wolke bei Microsoft.<br />

Benutzer von Chrome und Firefox können die Dienste von<br />

Browserstack mit Hilfe kostenloser Add-ons integrieren.<br />

Nach einer Anmeldung mit Ihrem <strong>Facebook</strong>-Profil können<br />

Sie die virtuelle Umgebung drei Monate lange kostenlos<br />

nutzen; danach schlägt die Virtualisierung mit etwa 15 Euro<br />

pro Monat zu Buche.<br />

Modern.ie von Microsoft ist ein neuer Dienst<br />

zum Testen von Websites.<br />

70 0413 internet magazin

---

HTML, CSS, Javascript, PHP & Windows 8 | TIPPS & TRICKS<br />

Windows 8<br />

Anheften von Websites als Kacheln<br />

auf dem Startbildschirm<br />

Benutzer von Windows 8 haben die Möglichkeit, einzelne<br />

Websites auf dem Startbildschirm anzuheften. Damit sie dort<br />

eine gute Figur machen, sollte man die betreffende Website<br />

mit einer Windows-8-kompatiblen Kachel ausstatten. Das geschieht<br />

folgendermaßen:<br />

<br />

<br />

Das PNG-Logo ersetzt das Standardlogo einer Website und<br />

Die Farbe und das Symbol<br />

der Kachel auf dem<br />

Startbildschirm kann der<br />

Webdesigner mit Hilfe<br />

entsprechender -Tags<br />

beeinflussen.<br />

erhöht den Wiedererkennungswert der Site auf dem Startbildschirm<br />

von Windows 8.<br />

AWS<br />

Elastischer Lastverteiler<br />

und elastische IPs<br />

Benutzer von <strong>Internet</strong><br />

Explorer 10 unter<br />

Windows 8 können eine<br />

Website zum Startbildschirm<br />

hinzufügen.<br />

Wer auf einer EC2-Instanz mehrere Websites auf verschiedenen,<br />

statischen IPs hosten und diese mit einem elastischen<br />

Lastverteiler ausstatten möchte, versucht im ersten Anlauf meistens,<br />

mehrere statische IPs zu konfigurieren. Das ist jedoch der<br />

falsche Weg. Amazons elastischer Lastverteiler kann derzeit mit<br />

mehreren Netzwerkschnittstellen und sekundären elastischen<br />

IPs ohnehin nichts anfangen, da ein ELB Besucheranfragen an<br />

die primäre private IP-Adresse auf der ETH0-Schnittstelle der<br />

jeweiligen EC2-Instanz weiterleitet. Anstatt sich über die nicht<br />

unterstützte Konfiguration eines Lastverteilers mit mehreren<br />

IPs den Kopf zu zerbrechen, sollten Sie lieber gleich mehrere<br />

ELBs nutzen. Verweisen Sie dazu jeden ELB auf eine konkrete<br />

Portnummer der jeweiligen EC2-Instanz, so dass jede Website<br />

über einen eigenen elastischen Lastverteiler verfügt. Dadurch<br />

können Sie gleichzeitig mehrere Websites mit SSL auf verschiedenen<br />

Ports Ihrer EC2-Instanzen (tcp 5000, tcp 5001, tcp5002,<br />

tcp5003, und so weiter) lauschen lassen. Jedem ELB können Sie<br />

zudem beispielsweise mit Route53 den passenden Domainnamen<br />

zuweisen. Indem Sie die Anzahl Ihrer EC2-Instanzen mit<br />

Hilfe elastischer Lastverteiler für die benötigte Anzahl von Websites<br />

angemessen auslegen, können Sie Ihre Kosten minimieren,<br />

ohne die Instanzen zu überlasten.<br />

.htaccess<br />

Code-Igniter in einem Unterverzeichnis:<br />

URLs bereinigen<br />

Wer das quelloffene PHP-Framework Code-Igniter (http://<br />

ellislab.com/codeigniter) in einem Unterverzeichnis wie beispielweise<br />

http://domainname.de/Projektname/Appname/<br />

einrichtet, wird die Datei index.php aus den URLs von Code-<br />

Igniter nicht so leicht los. Die Lösung besteht ganz einfach darin,<br />

im Verzeichnis der Code-Igniter-Installation eine .htaccess-<br />

Datei mit dem folgenden Inhalt abzulegen:<br />

RewriteEngine On<br />

RewriteCond %{REQUEST_FILENAME} !-f<br />

RewriteCond %{REQUEST_FILENAME} !-d<br />

RewriteRule ^(.*)$ index.php/$1 [L]<br />

<strong>Internet</strong> Explorer<br />

Inkompatibilitäten untersuchen und<br />

beheben<br />

Wer potenzielle Inkompatibilitäten einer Website mit älteren<br />

und neueren Versionen des <strong>Internet</strong> Explorers untersuchen und<br />

beheben möchte, der kann dazu ein kostenloses Werkzeug namens<br />

IE10 Compat Inspector nutzen.<br />

Hierzu müssen Sie in den Header jeder zu testenden Website<br />

vor alle anderen Skripte die folgende Zeile einfügen:<br />

www.internet-magazin.de 71

---

TIPPS & TRICKS | HTML, CSS, Javascript, PHP & Windows 8<br />

<br />

und die betreffende Website mit dem <strong>Internet</strong> Explorer 10<br />

besuchen. Ein Statussymbol in der rechten oberen Ecke des<br />

Browserfensters gibt Ihnen Auskunft über potenzielle Inkompatibilitäten.<br />

Wer sich für manuelles Einfügen von Code in den<br />

Header-Abschnitt aller Websites nicht erwärmen kann, dem<br />

steht es frei, die benötigten Code-Schnipsel mit Hilfe von Tools<br />

wie Fiddler zur Laufzeit automatisch einzufügen.<br />

SEO<br />

APIs nutzen, um Inhalte verfügbar<br />

zu machen<br />

Bisher fokussierte SEO auf Suchmaschinen, doch seit es intelligente<br />

Suchagenten wie Apples Siri oder Samsungs S-Voice<br />

gibt, gilt es umzudenken. Siri und S-Voice laufen in riesigen<br />

Rechenzentren, wo sie das <strong>Internet</strong> nach relevanten Inhalten<br />

durchsuchen. Damit auch Ihre Daten im Web gefunden werden<br />

können, müssen die passenden APIs unterstützt werden. Diese<br />

drei Websites können Ihnen hierbei behilflich sein:<br />

» Mashery.com hilft Ihnen, eine eigene API zu planen, zu entwickeln<br />

und in die Hände von anderen Entwicklern zu bringen.<br />

» Geofeedia.com sammelt Daten aus sozialen Netzen und<br />

dem Web und bietet diese Unternehmen und Webentwicklern<br />

sortiert nach Ort („loaction aware“) an.<br />

» Mashape.com ist ein API-Marktplatz für Entwickler von APIs.<br />

Einen Überblick der APIs finden Sie unter:<br />

https://www.mashape.com/explore/All?page=1<br />

Geolocation<br />

Kostenlose Geolocation-Datenbanken<br />

von Maxmind<br />

Unter der Adresse<br />

http://dev.maxmind.com/geoip/geolite<br />

finden Sie Geolocation-Datenbanken Geolite von Maxmind,<br />

die Sie unter der Lizenz für Creative Commons Attribution Sharealike<br />

3.0 Unported kostenlos nutzen können. Die Geolite-<br />

Country-Datenbank wird monatlich aktualisiert. Damit dieser<br />

Vorgang auf Ihrem Server automatisch ausgeführt wird, speichern<br />

Sie die folgenden Kommandozeilenbefehle – nach eventueller<br />

Anpassung der Pfade – in einer sh-Datei ab:<br />

#!/bin/sh<br />

cd /usr/share/GeoIP<br />

wget -q http://geolite.maxmind.com/download/geoip/<br />

database/GeoLiteCountry/GeoIP.dat.gz<br />

gzip -d -f GeoIP.dat.gz<br />

und fügen Sie den Pfad zu diesem Skript in die cron-Tabelle auf<br />

Ihrem Server ein.<br />

cron<br />

Datum und Uhrzeit automatisch setzen<br />

Mittels cron können Sie das Datum und die Uhrzeit Ihres Servers<br />

automatisch via NTP von einem Zeitserver beziehen. NTP<br />

steht für das „Network Time Protocol“. Das geschieht so:<br />

(crontab -l 2>/dev/null | grep -Fv ntpdate ; printf --<br />

„*/3 * * * * /usr/sbin/ntpdate 162.165.7.23“) | crontab<br />

Hierbei sorgt das Hilfsprogramm grep dafür, dass nur die Zeile<br />

mit der ntpdate-Anweisung in der cron-Tabelle geändert wird.<br />

Die übrigen Anweisungen bleiben davon unberührt.<br />

Javascript<br />

Minifizierer, Komprimierer und Variablennamenreduzierer<br />

Wer die Performance einer Website maximieren möchte,<br />

kommt nicht umhin, Javascript zu minifizieren, zu komprimieren<br />

und die Variablennamen zu kürzen. Das ist das so genannte<br />

„Mangling“. Mit kostenlosen Utilities wie:<br />

» UglifyJS2 (github.com/mishoo/UglifyJS),<br />

» Google Closure (developers.google.com/closure/) oder<br />

» Esmangle (github.com/Constellation/esmangle)<br />

können Sie die benötigten Optimierungen ganz leicht umsetzen.<br />

Unter der Adresse<br />

http://closure-compiler.appspot.com/home<br />

steht Ihnen Googles Closure Compiler für Javascript als ein<br />

Web-Dienst zur Verfügung. So können Sie sich die Installation<br />

sparen.<br />

Fiddler<br />

Websites debuggen: Zusätzliche Anweisungen<br />

automatisch einfügen<br />

Wer sich für manuelles Einfügen von Code in den Header-Abschnitt<br />

von Websites zum Debuggen im <strong>Internet</strong> Explorer nicht<br />

erwärmen kann, dem steht es frei, die benötigten Code-Schnipsel<br />

mit Hilfe von Fiddler automatisch zur Laufzeit einzufügen.<br />

72 0413 internet magazin

---

HTML, CSS, Javascript, PHP & Windows 8 | TIPPS & TRICKS<br />

Gehen Sie hierzu wie folgt vor.<br />

Schritt 1: Die aktuelle Version von Fiddler erhalten Sie unter<br />

der Adresse:<br />

http://www.fiddler2.com/Fiddler2/version.asp<br />

Schritt 2: Wählen Sie den Befehl "Rules > Customize Rules".<br />

Schritt 3: Innerhalb des OnBeforeResponse()-Handlers, fügen<br />

Mit Fiddler können Sie unter anderem das Mark-up von Websites<br />

zur Laufzeit modifizieren.<br />

Sie Ihrem Fiddlerscript die folgende Zeile hinzu:<br />

InjectInspectorScript(oSession);<br />

Schritt 4: Am Ende von Fiddlerscript, aber noch innerhalb der<br />

Handlers-Klasse, fügen Sie dem Skript diesen Code hinzu:<br />

public static RulesOption(„Verwende Compat Inspector“)<br />

var m_UseCompatInspector: boolean = false;<br />

static function InjectInspectorScript(oSession: Session)<br />

{<br />

if(!m_UseCompatInspector) return;<br />

// stellt sicher, dass das Skript neue Anweisungen<br />

nur innerhalb von HTML einfügt<br />

if (oSession.url.EndsWith(„.js“)) return;<br />

if (oSession.url.EndsWith(„.css“)) return;<br />

if (!oSession.oResponse.MIMEType.Contains(„text/html“))<br />

return;<br />

// ermittelt den Inhalt der Antwort<br />

var sBody = oSession.GetResponseBodyAsString();<br />

// Eine abschliessende Überprüfung stellt sicher,<br />

dass es sich um HTML handelt<br />

if (!/^\uFEFF?\s*

---

TIPPS & TRICKS | HTML, CSS, Javascript, PHP & Windows 8<br />

Meta-Tag (falls vorhanden)<br />

if (meta != -1) meta = sBody.IndexOf(„>“, meta + 1);<br />

if (meta != -1 && meta != sBody.Length - 1) pos = meta<br />

+ 1;<br />

// Platzierung erfolgt vor allen Skript-Tags, die sich<br />

vor der aktuellen Position im Quelltext befinden<br />

if (script != -1 && script < pos) pos = script;<br />

// Schließlich wird nun der Quelltextabschnitt<br />

an der ermittelten Position durchgeführt<br />

oSession.utilSetResponseBody(<br />

sBody.Insert(pos, „“)<br />

);<br />

}<br />

Schritt 5: Nach dem Abspeichern der Änderungen erscheint<br />

im Menü "Rules" der Befehl "Verwende Compat Inspector".<br />

Wenn Sie jetzt diesen Befehl aktivieren und im <strong>Internet</strong> Explorer<br />

9 oder 10 eine Website aufrufen, finden Sie in der<br />

rechten oberen Ecke des Browserfensters ein Statussymbol<br />

des Compat Inspectors.<br />

Aktivieren des<br />

Compat Inspectors<br />

mit Hilfe des neu<br />

erstellten Befehls<br />

im Rules-Menü von<br />

Fiddler.<br />

Schritt 6: Ein Klick auf das Statussymbol des Compat Inspectors<br />

gibt Ihnen eine detaillierte Auskunft über etwaige Inkompatibilitäten<br />

der Seite und Hinweise zur<br />

Fehlerbehebung.<br />

Ein Detailbericht des IE 10 Compat Inspectors im <strong>Internet</strong><br />

Explorer 10.<br />

CSS<br />

Webschriften selber hosten<br />

Wer seine Schriften selbst hosten möchte, anstatt sich mit dem<br />

beschränkten oder teuren Angebot von Schriftendiensten im<br />

Web abzufinden, kann sich hierzu der folgenden @font-face-<br />

Regel von Font Squirrel behelfen:<br />

@font-face {<br />

font-family: ‚MeineWebSchrift‘;<br />

src: url(‚webfont.eot‘); /* IE9-Kompatibilitätsmodus */<br />

src: url(‚webfont.eot?#iefix‘) format(‚embedded-open<br />

type‘), /* IE6 bis IE8 */<br />

url(‚webfont.woff‘) format(‚woff‘), /* modern Webbrowser */<br />

url(‚webfont.ttf‘) format(‚truetype‘), /* Safari,<br />

Android, iOS */<br />

url(‚webfont.svg#svgFontName‘) format(‚svg‘); /*<br />

Altlasten-iOS */<br />

}<br />

body {<br />

font-family: ‚MeineWebSchrift‘, Fallback, sans-serif;<br />

}<br />

Diese Regeln funktionieren in Opera ab Version 11, Firefox ab<br />

Version 3, und im <strong>Internet</strong> Explorer ab Version 6.<br />

CSS<br />

Workarounds für elastische Layouts<br />

Das Box-Modell in CSS bereitet Webdesignern Probleme, da es<br />

zu umständlichen Berechnungen führt. Die tatsächliche Breite<br />

beziehungsweise Höhe eines Kastens entspricht nicht automatisch<br />

der Breite oder der Höhe des betreffenden Elements,<br />

sondern setzt sich zusammen aus der definierten Breite zuzüglich<br />

der padding-Eigenschaft an beiden Seiten und der Breite<br />

eventuell vorhandener Ränder. Befindet sich ein -Element<br />

innerhalb eines anderen -Elements mit einer definierten<br />

Breite von 600 Pixeln, wird sich das Kindelement ohne zusätzliches<br />

CSS auf die maximale Breite des Vaterelementes erweitern.<br />

Wenn Sie dem Kindelement die padding-Eigenschaft und<br />

einen Rand mit einem Wert ungleich null hinzufügen, schrumpft<br />

die tatsächliche Breite dieses Elementes, da sich diese aus dem<br />

verfügbaren Platz ableitet. Weisen Sie dem Kindelement eine<br />

explizite Breite von 100 Prozent des Vaterelementes zu, wird es<br />

seine Grenzen de facto überschreiten. Damit die beiden Kästen<br />

präzise ineinander passen, muss dieser Wert in die Berechnung<br />

mit hinein fließen. Noch problematischer gestaltet sich das Ganze,<br />

wenn das übergeordnete -Element mit Hilfe elastischer<br />

74 0413 internet magazin

---

HTML, CSS, Javascript, PHP & Windows 8 | TIPPS & TRICKS<br />

Einheiten wie Prozente statt Pixel angelegt wurde. Die beste Lösung<br />

besteht darin, die Deklaration der Breite des Kindelementes<br />

zu entfernen. Ein -Eingabefeld belegt nur genau die<br />

Breite, die sich aus dem cols-Attribut ableiten lässt – es sei denn,<br />

Sie definieren die Breite explizit. Das -Element müsste<br />

die Werte der padding- und der border-Eigenschaften von seiner<br />

Breite (100 Prozent) abziehen:<br />

textarea {<br />

-webkit-box-sizing: border-box; /* WebKit einschließlich<br />

Safari/Chrome */<br />

-moz-box-sizing: border-box; /* Gecko einschließlich<br />

Firefox */<br />

box-sizing: border-box; /* Opera ab Version 8.5 und IE<br />

ab Version 8 */<br />

}<br />

Die CSS3-Eigenschaft box-sizing wird in jeder Version von<br />

Chrome, in Safari ab Version 5.1, im <strong>Internet</strong> Explorer ab Version<br />

8 und in Opera 8.5 und höher unterstützt. Firefox benötigt<br />

das herstellerspezifische Präfix der Gecko-Familie:<br />

-moz-box-sizing<br />

Safari 3 bis einschließlich Version 5 versteht ebenfalls nur die<br />

herstellerspezifische Version der Eigenschaft, und zwar:<br />

-webkit-box-sizing<br />

Die Eigenschaft box-sizing verträgt sich problemlos mit Deklarationen<br />

von min-width, max-width, min-height und max-height,<br />

allerdings mit zwei Ausnahmen: Ältere Versionen von Firefox<br />

und <strong>Internet</strong> Explorer 9 im Kompatibilitätsmodus zu IE 8 ignorieren<br />

in diesem Fall die Eigenschaft box-sizing.<br />

CSS<br />

Automatisches Skalieren von<br />

textarea-Elementen unterdrücken<br />

Wer automatisches Skalieren von textarea-Elementen in Webkit-Browsern<br />

(Chrome und Safari) deaktivieren möchte, fügt<br />

dem CSS einfach nur diese Anweisung hinzu:<br />

textarea { resize: none }<br />

und das Problem ist behoben.<br />

output.xml<br />

die resultierende Datei wie folgt bereinigen:<br />

\s+<br />

Anna Kobylinska und Filipe Pereira Martins<br />

_056AF_Weber_pcm_N_05.ps;S: 1;Format:(90.00 x 60.00 mm);02. Mar 2011 07:54:29<br />

PHP<br />

Prüfen einer Textzeichenkette auf<br />

Vorhandensein von HTML-Mark-up<br />

Wer prüfen möchte, ob eine Textzeichenkette HTML-Mark-up<br />

beinhaltet, kann das zum Beispiel per PHP tun:<br />

www.internet-magazin.de<br />

M51

---

TIPPS & TRICKS | Online-Recht<br />

Das Kleingedruckte<br />

Für Unternehmer ein notwendiges Übel, für die<br />

Verbraucher oft ein Greuel: Allgemeine Geschäftsbedingungen<br />

liest sich niemand gerne durch. Sie<br />

sind jedoch notwendig und äußerst sinnvoll.<br />

Der Autor<br />

Der Autor Michael<br />

Rohrlich ist Rechtsanwalt<br />

und unter anderem<br />

auf das Recht der<br />

neuen Medien spezialisiert.<br />

www.ra-rohrlich.de<br />

Niemand ist wirklich vom „Kleingedruckten“<br />

angetan, aber Allgemeine<br />

Ge-schäftsbedingungen (AGB) gehören<br />

nun einmal zum geschäftlichen Alltag.<br />

Um gleich mit einem nach wie vor weit<br />

verbreiteten Irrglauben aufzuräumen: Es<br />

besteht grundsätzlich keine Verpflichtung<br />

zur Verwendung von AGBs. Werden<br />

sie jedoch eingesetzt, dann müssen<br />

sie natürlich den juristischen Vorgaben<br />

entsprechen und insbesondere inhaltlich<br />

korrekt sein. Denn Fehler gehen im<br />

Zweifel zu Lasten des Verwenders, also<br />

des Online-Händlers. Verstöße gegen<br />

die gesetzlichen AGB-Regelungen im<br />

Bürgerlichen Gesetzbuch stellen in aller<br />

Regel Wettbewerbsverstöße dar, wie<br />

unter anderem der Bundesgerichtshof<br />

geurteilt hat (Urteil vom 31. Mai 2012,<br />

Aktenzeichen: I ZR 45/11).<br />

Im B2C-Umfeld, also gegenüber Verbrauchern,<br />

sind AGBs für Online-Händler<br />

praktisch und ergeben als zentrale Sammelstelle<br />

zur Erfüllung der diversen fernabsatzrechtlichen<br />

Informationspflichten<br />

durchaus Sinn. Zwar können per AGB<br />

nicht die gesetzlichen Gewährleistungsregelungen<br />

ausgehebelt<br />

oder die eigene Haftung<br />

„auf null“ reduziert werden,<br />

aber etwa im Bereich<br />

Versanddauer oder Portooder<br />

Rücksendekosten<br />

sind sinnvolle Angaben<br />

möglich. Es gibt allerdings<br />

eine große Anzahl an Verbraucherschutzvorschriften<br />

auf EU-Ebene und auch in<br />

Deutschland, sodass Händlern<br />

im B2C-Bereich faktisch<br />

kaum Möglichkeiten für Klauseln<br />

bleiben, die den Rechtsrahmen<br />

zu ihren Gunsten gestalten. Auf dem<br />

B2B-Sektor, also im Verhältnis von Unternehmern<br />

untereinander, bieten AGBs<br />

durchaus gute Chancen, um bei Verträgen<br />

den einen oder anderen Aspekt zum<br />

eigenen Vorteil zu regeln. Wer als Webshop-Betreiber<br />

also keine eigenen AGB<br />

bereithält, ist nicht unbedingt im Vorteil.<br />

Insbesondere aufgrund der Pflicht<br />

zur Vereinbarung der Rücksendekosten<br />

nach ausgeübtem Widerrufsrecht sind<br />

die eigenen AGB für Online-Händler inzwischen<br />

ein Muss.<br />

Der Einsatz von Muster-AGB kann übrigens<br />

nicht unbedingt empfohlen werden,<br />

da solche Muster zum einen aktuell<br />

und aus einer seriösen Quelle stammen<br />

und zum anderen auch zum jeweiligen<br />

Online-Shop passen müssen. Zwar finden<br />

sich diverse AGB-Muster für den<br />

Online-Verkauf von Waren, aber unterschiedliche<br />

Branchen erfordern in aller<br />

Regel auch an die jeweilige Situation angepasste<br />

Vertragswerke. Absolut tabu ist<br />

das Kopieren des AGB-Textes vom Mitbewerber<br />

oder das Zusammenschreiben<br />

per „google, copy & paste“. Abgesehen<br />

davon, dass hierdurch gegen fremde<br />

Urheberrechte verstoßen wird, besteht<br />

außerdem das Risiko, das man eine veraltete,<br />

nicht passende oder schlichtweg<br />

falsche Vorlage verwendet.<br />

Voraussetzungen<br />

Juristisch korrekte AGB haben bestimmte<br />

Voraussetzungen zu erfüllen. Diese Voraussetzungen<br />

sind:<br />

» für eine Vielzahl von Verträgen<br />

» vorformuliert<br />

» ausdrücklicher Hinweis durch<br />

Verwender<br />

» Vorliegen spätestens bei Vertragsschluss<br />

76 0413 internet magazin

---

Online-Recht | TIPPS & TRICKS<br />

» Kenntnisnahme in zumutbarer Art<br />

und Weise möglich<br />

Insbesondere die letzten drei Punkte sind<br />

in der Praxis oft problematisch.<br />

Die praktische Umsetzung<br />

Am besten sollte im Online-Shop ein eigener<br />

Menüpunkt mit der Bezeichnung<br />

„AGB“ oder auch „Allgemeine Geschäftsbedingungen“<br />

in der Hauptnavigationsebene<br />

oder im Site-Footer beziehungsweise<br />

-Header angelegt werden.<br />

Eine Bezeichnung dieses Punktes als<br />

„Infos“ oder „Rechtliches“ dürfte nicht<br />

ausreichend deutlich sein. Die verlinkte<br />

Unterseite sollte dann nicht nur den eigentlichen<br />

AGB-Text enthalten, sondern<br />

zusätzlich auch die Möglichkeit zum<br />

Ausdruck und Download des Textes.<br />

Während des Bestellvorgangs sollte<br />

dann spätestens im letzten Schritt, also<br />

bevor es zur verbindlichen Bestellung<br />

kommt, eine Checkbox eingebunden<br />

werden. Diese muss aktiv vom Kunden<br />

angehakt werden, damit der Bestellvorgang<br />

überhaupt abgeschlossen werden<br />

kann. Der Text solch einer Checkbox<br />

kann etwa „Ich habe die AGB gelesen<br />

und akzeptiert“ lauten. Hierbei sollte<br />

„AGB“ als sprechender Link gestaltet<br />

sein. Zwar ist das Einbinden einer solchen<br />

Checkbox keine vom Gesetzgeber<br />

verlangte Voraussetzung, so hat es auch<br />

schon der BGH in seinem Urteil vom 14.<br />

Juni 2006 (Aktenzeichen: I ZR 75/03)<br />

entschieden. Die Checkbox erleichtert<br />

dem Online-Händler unter Umständen<br />

jedoch die Protokollierung und damit<br />

den Nachweis, dass er seine AGB korrekt<br />

eingebunden hat. Die AGB sollten<br />

keinesfalls in einem kleinen Fensterausschnitt<br />

dargestellt werden. Wenn die<br />

Kunden den Text erst seitenlang durchscrollen<br />

müssen, um ihn komplett lesen<br />

zu können, kann nicht mehr davon<br />

Rede sein, dass er ihnen „zumutbar“<br />

zur Kenntnis gelangt ist.<br />

Auftretende Problemfälle<br />

Mit schöner Regelmäßigkeit sind einzelne,<br />

zum Teil von vielen Händlern<br />

schon lange Zeit verwendete Klauseln<br />

Gegenstand juristischer Auseinandersetzungen.<br />

Zivilgerichte müssen sich<br />

des Öfteren mit den entsprechenden<br />

Rechtsfragen beschäftigen. Fast schon<br />

als Klassiker können AGB-Klauseln mit<br />

zu unbestimmten beziehungsweise irreführenden<br />

Lieferzeitangaben bezeichnet<br />

werden. Angaben, wie „Die Lieferfrist<br />

beträgt in der Regel 3-4 Werktage<br />

nach Zahlungseingang“ oder ähnliche<br />

Zirka-, Ungefähr- oder In-etwa-Angaben<br />

finden sich in zahlreichen Webshop-AGB.<br />

Diverse Gerichte, so zum<br />

Beispiel auch das Oberlandesgericht<br />

(OLG) Hamm (Urteil vom 12. Januar<br />

2012, Aktenzeichen: I-4 U 107/11),<br />

haben derartigen Klauseln eine Absage<br />

erteilt und sie als Verstoß gegen das<br />

Wettbewerbsrecht eingestuft.<br />

Oftmals wird auch versucht, Angaben<br />

zur Vertragslaufzeit oder zum Kaufpreis<br />

ausschließlich im Kleingedruckten unterzubringen.<br />

Dass eine so unseriöse<br />

Praxis rechtswidrig ist, haben unter anderem<br />

das Landgericht (LG) Berlin mit<br />

Urteil vom 21. Oktober 2011 (Aktenzeichen:<br />

50 S 143/10) oder auch das<br />

Amtsgericht Minden mit Urteil vom 19.<br />

Dezember 2012 (Aktenzeichen: 22 C<br />

463/12) entschieden.<br />

Viele AGB enthalten folgende oder ähnliche<br />

Bestimmungen:<br />

„Die Aufrechnung mit nicht anerkannten<br />

oder nicht rechtskräftig festgestellten<br />

Gegenforderungen des Käufers<br />

ist ausgeschlossen.“<br />

Nach der Auffassung des LG Freiburg<br />

(Urteil vom 17. Dezember 2012, Aktenzeichen:<br />

12 O 64/12) ist eine solche<br />

Klausel sowohl im B2C- als auch im B2B-<br />

Bereich unwirksam. Gleichwohl dürfte<br />

sie in nicht wenigen Webshop-AGB nach<br />

wie vor enthalten sein. Häufig vertreten<br />

ist auch die Klausel:<br />

„Offensichtliche Mängel sind dem Verkäufer<br />

unverzüglich, spätestens jedoch<br />

zwei Wochen nach Übergabe des Kaufgegenstandes,<br />

schriftlich anzuzeigen.“<br />

Mit Urteil vom 24. Mai 2012 (Aktenzeichen:<br />

I-4 U 48/12) hat das OLG Hamm<br />

dieser und inhaltsgleichen Klauseln eine<br />

Absage erteilt.<br />

Fast ebenso oft finden sich Angaben,<br />

nach denen die Gültigkeit von Gutscheinen<br />

auf eine bestimmte Zeitspanne<br />

beschränkt wird. Die Frage nach<br />

der grundsätzlichen Zulässigkeit der<br />

zeitlichen Befristung von Gutscheinen<br />

ist noch nicht abschließend geklärt. Jedenfalls<br />

darf eine solche Befristung nicht<br />

zu einer einseitigen Benachteiligung des<br />

Gutscheinerwerbers führen. Da diese<br />

Befristungen in aller Regel als AGB einzustufen<br />

sind, gilt für sie ein strenger<br />

Beurteilungsmaßstab. Eine zeitliche<br />

Beschränkung von Gutscheinen auf ein<br />

Jahr hält das OLG München jedenfalls<br />

für rechtswidrig (Urteil vom<br />

14. April 2011, Aktenzeichen: 29<br />

U 4761/10). Das OLG Hamburg<br />

hat in seinem Urteil vom 21. September<br />

2000 (Aktenzeichen: 10<br />

U 11/00) die Ansicht vertreten,<br />

dass eine zeitliche Begrenzung<br />

jedenfalls ohne Ausstellungs-<br />

beziehungsweise Verkaufsdatum<br />

unzulässig ist. Aufgrund der dreijährigen<br />

Verjährungsfrist, der auch Gutscheine<br />

regelmäßig unterliegen, sollte also nicht<br />

allzu lange gewartet werden, um sie<br />

einzulösen oder wieder umzutauschen.<br />

Bei einem Umtausch muss deshalb unter<br />

Umständen auch eine angemessene<br />

Bearbeitungsgebühr in Kauf genommen<br />

werden. So hat es jedenfalls das LG Berlin<br />

entschieden (Urteil vom 25. Oktober<br />

2011, Aktenzeichen: 15 O 663/10).<br />

Rechtsanwalt Michael Rohrlich<br />

www.internet-magazin.de 77

---

2.2013<br />

NEU!<br />

iPhone, iPad, Mac, iTunes & Co<br />

2.2013<br />

Gaming via Apple TV!<br />

Hier<br />

sind die besten<br />

Apps<br />

Deutschland € 7,90<br />

Fern<br />

M<br />

iP<br />

TV<br />

Spezial<br />

Fernsehen mit iPad,<br />

Premium-Apps<br />

Wow!<br />

Der neue<br />

iMac<br />

Schlank, schick<br />

und superschnell<br />

Mac<br />

& iPhone<br />

Machen<br />

Sie mehr<br />

Die b<br />

Bu<br />

aus Ihrem iPad!<br />

Die besten Apps für Bildbearbeitung<br />

Business E-Learning E-Book-Reader<br />

Top-Speaker<br />

für unterwegs<br />

SO MUSS<br />

MUSIK<br />

ment1023383882674933551.indd 1 15.01.2013<br />

PLUS:<br />

iPhone-Outdoor-<br />

Hüllen, NAS-Server,<br />

Finanzsoftware<br />

KLINGEN<br />

Österreich € 9,00 / Schweiz sfr. 16,00<br />

Italien, Spanien € 10,00, BeNeLux € 9,30<br />

JETZT<br />

AM KIOSK!<br />

DAS HEFT FÜR<br />

APPLE-FANS

---

BRANCHENVERZEICHNIS<br />

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<br />

@ APPLICATION SERVICE PROVIDER CLOUD<br />

PLZ<br />

38100<br />

datenbanken24.de<br />

Ein Service der MANETEC GmbH & Co. KG<br />

Lange Straße 61<br />

38100 Braunschweig<br />

Tel.: (0531) 12 08 480, Fax: (0531) 12 08 499<br />

info@datenbanken24.de<br />

www.datenbanken24.de<br />

Cloud Application Builder - ohne Programmierung.<br />

Erstellen Sie sich individuelle und sofort einsatzbereite Web-Applikationen.<br />

Mit Zugriffsregelung, Formulargenerator, Suchfunktionen, Google-Maps, Umkreissuche<br />

u.v.m. Ihre fertige Anwendung mieten sie als Cloud-Komplettlösung<br />

zu einem monatlichen Festpreis, Hosting, Sicherheit, Backup und Verfügbarkeitsgarantie.<br />

- alles inclusive. datenbanken24.de ist zertifiziert für ISO<br />

9001 und Auftragsdatenverarbeitung.<br />

@ CONTENT<br />

PLZ<br />

32051<br />

content.de AG<br />

Nordstr. 14<br />

32051 Herford<br />

Tel.: (05 22 1) 85 49 9 0<br />

Fax: (05 22 1) 85 49 9 - 99<br />

info2012@content.de<br />

http://www.content.de<br />

Suchmaschinenoptimierte Texte für erfolgreiche Webprojekte!<br />

content.de, die technische Plattform mit persönlicher und kompetenter<br />

Kundenbetreuung, liefert mit seinen mehr als 4.000 Autoren einzigartige,<br />

suchmaschinenoptimierte Texte (unique content). Diese Fakten haben<br />

schon viele Kunden von uns überzeugt:<br />

- attraktive Preise pro Wort<br />

- einfach zu bedienendes System<br />

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

- übersichtliches Projektmanagement (für viele Textaufträge ausgelegt)<br />

- durchdachte Features mit Mehrwert (Wordpress-API, Keyword-Generator)<br />

- u.v.m.<br />

Wann steigern Sie Ihren Traffic durch neue Texte?<br />

@ E COMMERCE<br />

PLZ<br />

36041<br />

PSW GROUP GmbH & Co. KG<br />

Flemingstraße 20-22<br />

36041 Fulda<br />

Tel.: (0661) 48 02 76-10<br />

Fax: (0661) 48 02 76-19<br />

Hotline: (0800) 50 37 50-1<br />

Fax: (0800) 50 37 50-9<br />

support@psw.net<br />

www.psw.net<br />

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

Provider für <strong>Internet</strong>lösungen mit einem besonderen Schwerpunkt auf <strong>Internet</strong><br />

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

E-Mail-Kommunikation – Zertifikats-, Signatur-, Verschlüsselungs- und Authentifizierungslösungen<br />

an.<br />

Das umfassende Produktportfolio reicht von SSL-Zertifikaten über Code-Signing-<br />

Zertifikate bis hin zu qualifizierten elektronischen Signaturen und DE-Mail. Aber<br />

auch Sicherheitslösungen wie das PCI- und Malware-Scanning, Secure CDN, DNS-<br />

SEC und AntiSpam sowie Gütesiegel und Kundenbewertungssysteme speziell für<br />

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

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

<strong>Internet</strong>-Sicherheit, IT-Recht sowie Hosting- und Domaindienstleistungen. Zu den<br />

Kunden der PSW GROUP zählen Webhoster, Webdesign- und Marketing-Agenturen<br />

sowie Online-Shops.<br />

@ E MAIL MARKETING<br />

SuperMailer<br />

PLZ<br />

04319<br />

Mirko Böer Softwareentwicklungen<br />

Malachitstraße 16<br />

04319 Leipzig<br />

Tel.: (03 41) 8 63 28 42, Fax: (03 41) 8 63 28 43<br />

info@wt-rate.com<br />

www.supermailer.de/<br />

Ansprechpartner: Mirko Böer<br />

Versand von personalisierten Newslettern, Marketing-Newslettern,<br />

Produktinfos, weitere <strong>Internet</strong>software, Entwicklung von Windows-Software<br />

www.internet-magazin.de 79

---

BRANCHENVERZEICHNIS<br />

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

@ E PAYMENT<br />

PLZ<br />

50679<br />

Deutsche Card Services GmbH<br />

Kaltenbornweg 1–3<br />

50679 Köln<br />

Tel.: (0221) 9 95 77 - 0,<br />

Fax: (0221) 9 95 77 - 720<br />

info.deucs@db.com<br />

www.deutsche-card-service.com<br />

www.deucs.com<br />

Als Teil der Deutschen Bank Gruppe bietet die Deutsche Card Services<br />

internationale Full-Service-Lösungen für den bargeldlosen kartengestützten<br />

Zahlungsverkehr von der Kreditkarte über Maestro, ELV und giropay aus<br />

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

technische Plattform der Pago eTransaction Services auf. Bewährte Risikominimierungssysteme<br />

sorgen dafür, dass bargeldloses Bezahlen im<br />

E-Commerce, im Versandhandel und am Point of Sale einfach, schnell<br />

und sicher abläuft. Einzigartige Online-Steuerungssysteme bieten Kunden<br />

weltweit jederzeit den vollen Überblick über ihre Transaktionen.<br />

@ FULL SERVICE PROVIDER<br />

PLZ<br />

12165<br />

http.net <strong>Internet</strong> GmbH<br />

Grunewaldstraße 22,<br />

12165 Berlin<br />

Tel.: (030) 21 00 90-0, Fax: (030) 21 00 90-90<br />

info@http.net<br />

www.http.net<br />

Ansprechpartner: Helga Krüger<br />

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

Geschäftskunden spezialisiert. Unser Schwerpunkt liegt im Bereich der<br />

Domainservices. Bei http.net können Sie über 500 Domain-Endungen<br />

registrieren. Darüber hinaus bieten wir SSL-Zertifikate, Webspace, Hosting<br />

und individuelle Virtualisierungs-Lösungen.<br />

PLZ<br />

40599<br />

OpenIT GmbH<br />

In der Steele 33a–41<br />

40599 Düsseldorf<br />

Tel.: (02 11) 23 95 77-0<br />

Fax: (02 11) 239577-10<br />

isp@openit.de<br />

www.openit.de<br />

Full-Service-Provider für Businesskunden, von virtuellen Servern bis zu<br />

dedizierten Clusterumgebungen im BSI zertifizierten Rechenzentrum inkl.<br />

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

Anwendungsentwicklung für den B2B Bereich.<br />

@ INTERNET FOREN<br />

PLZ<br />

10827<br />

TwoCom<br />

Hauptstraße 26 / 2. Hof - 2. OG<br />

10827 Berlin<br />

Tel.: (0 30) 78 00 09 4 - 0,<br />

Fax: (0 30) 78 00 09 4 - 9<br />

sales@2-com.de<br />

www.2-com.de<br />

Ansprechpartner: Sascha Petruschke<br />

Draytek Online Forum – Hilfe von Usern für User rund um Produkte der<br />

Draytek Familie & Online Shop<br />

@ ONLINEMARKETING & SUCHMASCHINENMARKETING<br />

PLZ<br />

44139<br />

SUMAX®<br />

Rheinlanddamm 199<br />

44139 Dortmund<br />

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

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

www.sumax.de<br />

info@sumax.de<br />

(Google AdWords Qualified Company)<br />

Google AdWords- & Suchmaschinenoptimierung, Suchmaschinenmarketing,<br />

Webshops, Usability<br />

80 0413 internet magazin

---

BRANCHENVERZEICHNIS<br />

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<br />

@ SHOP-SYSTEME<br />

PLZ<br />

45964<br />

Webagentur Niewerth – <strong>Internet</strong>lösungen<br />

Humboldtstr. 2, 45964 Gladbeck<br />

Tel.: (0 20 43) 20 97 - 0<br />

FreeCall: (0 800) 34 56 90 0<br />

info@weban.de<br />

www.webagentur-online.de<br />

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

Ihrem ERP-System und zur Logistik. Alle gängigen Zahlungsarten, Schnittstellen<br />

zu Preisagenturen. Bestellverwaltung, Rechnungsmodul und Marketingtools.<br />

Mit Amazon- und Ebay-Anbindung und vieles mehr.<br />

Die Webagentur Niewerth betreut Sie von der Strategieberatung bis zum<br />

optimalen Marketingmix. Wir sind Trusted-Shops Partner, Google Adwords<br />

Professional und <strong>Facebook</strong>-Experten.<br />

Jetzt anrufen und unverbindlich beraten lassen!<br />

@ SMS DIENSTLEISTER<br />

PLZ<br />

73262<br />

mes.mo GmbH<br />

Stuttgarter Str. 4<br />

73262 Reichenbach<br />

Tel.: (0 71 53) 55 88 35<br />

Tel.: (0 71 53) 55 88 36<br />

office@mesmo.net<br />

www.any-sms.info<br />

Ansprechpartner: Christian Rapp<br />

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

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

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

@ WEB AGENTUREN<br />

PLZ<br />

81927<br />

MAXXmarketing GmbH<br />

Englschalkinger Straße 224<br />

81927 München<br />

Tel.: (0 89) 92 92 86 - 0<br />

Fax: (0 89) 92 92 86 - 75<br />

marketing@maxx-marketing.net<br />

www.webdesigner-profi.de<br />

Ansprechpartner: Klaus Huber<br />

Webdesign und Webprogrammierung für nur 19,- Euro per Arbeitsstunde<br />

Spürbar mehr Erfolg durch Ihren professionellen Webauftritt! Bereits ab<br />

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

HTML, Flash, Javascript & Java. Besonders das hochwertige Design, Beispiele<br />

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

erzeugt den bekanntlich sehr wichtigen ersten positiven Eindruck für Ihren<br />

Webbesucher. Sprechen Sie uns jetzt an und testen Sie uns! Durch unsere<br />

günstigen Preise haben auch andere Werbeagenturen die Möglichkeit, uns<br />

als SUB-Unternehmen für die Erstellung Ihrer Projekte einzusetzen.<br />

Faszination iPhone!<br />

Geheime Funktionen nutzen<br />

Freiheit für IhriPhone: SIM-Lock legal entfernen, versteckteFeatures freischalten.<br />

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

Steuerung, Reise,Musik &mehr.Alles steht in diesem Buch.<br />

FRANZIS<br />

ISBN 978-3-645-60146-7<br />

10,– EUR<br />

Praxiswissen vonFranzis<br />

www.franzis.de<br />

www.internet-magazin.de 81

---

SERVICE | <strong>Vorschau</strong><br />

Ausgabe 05/2013 erscheint am 12. April 2013<br />

Google Rich Snippets<br />

Videos mit HTML5<br />

Videos sind von vielen Websites nicht<br />

mehr wegzudenken und in HTML5 existieren<br />

zur Integration eines Videoplayers<br />

verschiedene Optionen. Der Artikel zeigt,<br />

wie Sie die Oberfläche zu diesem Zweck<br />

optimal anpassen, wie Sie Schaltflächen<br />

zufügen, die Kompatibilität der verschiedenen<br />

Audio- und Videoformate sicher stellen und zentrale Funktionen per HTML5<br />

und Javascript in den Player integrieren.<br />

Hinter den Bildern und Bewertungen in den Google-Suchergebnisseiten verbergen<br />

sich Google Rich Snippets. <strong>Internet</strong> <strong>Magazin</strong> zeigt, welche Möglichkeiten diese Auszeichnungen<br />

bieten und wie man diese am besten einsetzt.<br />

Compass CSS<br />

Compass basiert auf dem CSS-Präprozessor<br />

SASS und bietet neben nützlichen<br />

SASS-Bausteinen zahlreiche CSS-Helfer<br />

und Best-Practice-Tools.<br />

WEIT ERE TH E M EN<br />

E-Commerce-Logistik<br />

Den optimalen Dienstleister finden<br />

Centurion CSS<br />

Framework für Responsive Prototyping<br />

Customer Journey Workshop<br />

Online-Marketing für Ihre Zielgruppe<br />

IMPRESSUM<br />

Redaktion<br />

Bereichsleiter: Jörg Hermann (v.i.S.d.P.)<br />

Projektleiter: Stefan Schasche (sschasche@wekanet.de)<br />

Producer: Rene Wirth<br />

Mitarbeiter dieser Ausgabe: Susanne Nötscher (Korrektorat),<br />

Daniel Engler, Carola Heine, Andreas Hitzig, Dirk Jarzyna, Anna<br />

Kobylinska, Stephan Lamprecht, Filipe Pereira Martins, Dr. Florence<br />

Maurice, Sven Neumann, Franz Neumeier, Michael Rohrlich<br />

Redaktionsassistenz: Gerlinde Drobe, Sabine Steinbach<br />

Produkt-Manager Software/Lizenzen: Arnd Wängler<br />

Business Development Manager: Anja Deininger<br />

Leitung Layout: Sandra Bauer, Silvia Schmidberger<br />

Layout: Marcus Geppert, Andreas Geyh, Michael Grebenstein,<br />

Dorothea Voss, Rene Wirth<br />

Fotografie: Josef Bleier, Stefan Rudnick<br />

So erreichen Sie die Redaktion:<br />

Redaktion <strong>Internet</strong> <strong>Magazin</strong><br />

Telefon: (089) 2 55 56-11 11, Fax: (089) 2 55 56-16 27<br />

E-Mail: redaktion@internet-magazin.de<br />

Web: www.internet-magazin.de<br />

Manuskripteinsendungen:<br />

Manuskripte, Programme, Tipps & Tricks, Leserbriefe bitte an die<br />

Redaktionsanschrift. Für unverlangt eingesandte Manuskripte,<br />

Datenträger sowie Fotos übernimmt der Verlag keine Haftung. Die<br />

Zustimmung zum Abdruck wird vorausgesetzt. Das Verwertungsrecht<br />

für veröffentlichte Manuskripte, Fotos und Programme liegt<br />

ausschließlich beim Verlag. Mit der Honorierung von Manuskripten<br />

und Programmen erwirbt der Verlag die Rechte daran. Insbesondere<br />

ist der Verlag ohne weitere Honorierung berechtigt zur weltweiten<br />

und uneingeschränkten Veröffentlichung auf Papier und elektronischen<br />

Trägermedien. Der Autor erklärt mit der Einsendung,<br />

dass eingereichte Materialien frei sind von Rechten Dritter.<br />

Eine Haftung für die Richtigkeit der Veröffentlichung kann trotz<br />

sorgfältiger Prüfung durch die Redaktion vom Herausgeber nicht<br />

übernommen werden. Für veröffentlichte Manuskripte übernimmt<br />

der Verlag weder Gewähr noch Haftung. Schaltungen und verwendete<br />

Bezeichnungen müssen nicht frei sein von gewerblichen<br />

Schutzrechten. Die geltenden Bestimmungen sind zu beachten.<br />

Nachdruck, Übersetzung sowie Vervielfältigung oder sonstige<br />

Verwertung von Texten sind nur mit schriftlicher Genehmigung des<br />

Herausgebers erlaubt. Namentlich gekennzeichnete Beiträge geben<br />

nicht in jedem Fall die Meinung der Redaktion wieder.<br />

Anzeigenabteilung<br />

Ihr Kontakt zum Anzeigenteam<br />

Gerlinde Drobe und Sabine Steinbach<br />

Telefon: (089) 2 55 56-11 71, Fax: (089) 2 55 56-11 96<br />

Anzeigenleitung (verantwortlich für Anzeigen):<br />

Gisela Nerke (-12 11) gnerke@wekanet.de<br />

Mediaberatung:<br />

Markus Matejka (05655) 92 48 94, mmatejka@wekanet.de<br />

Direktmarkt/Stellenmarkt:<br />

Jürgen Auselt (-11 72) jauselt@wekanet.de<br />

Leitung Sales Corporate Publishing & Media Services:<br />

Richard Spitz (-11 08) rspitz@wekanet.de<br />

Head of Digital Sales:<br />

Christian Heger (-11 62)cheger@wekanet.de<br />

International Representatives<br />

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

Santo, Cambridge House, Gogmore Lane, Chertsey, GB - Surrey<br />

KT16 9AP, phone: 0044-1932-564999, fax: 0044-1932-564998,<br />

rachel.disanto@husonmedia.com<br />

USA/Canada - West Coast: Huson International Media<br />

(Corporate Office), Huson International Media (Corporate Office)<br />

Ms Allison Padilla, Pruneyard Towers, 1999 South Bascom<br />

Avenue, Suite #450, USA – Campbell, CA 95008, phone: +1 408<br />

8796666, fax: +1 408 8796669, allison.padilla@husonmedia.com<br />

USA/Canada - East Coast: Huson International Media,<br />

Mr Jorge Arango, The Empire State Building,<br />

350 5th Avenue, Suite #4610, USA - New York, NY 10118,<br />

phone: 001-212-2683344, fax: 001-212-2683355,<br />

Jorge.arango@husonmedia.com<br />

Korea: Young Media Inc., Mr Young J. Baek, 408 Jinyang Sangga,<br />

120-3 Chungmuro 4 ga, Chung-ku, Seoul, Korea 100-863,<br />

phone: 0082-2-2273-4818, fax: 0082-2-2273-4866,<br />

ymedia@ymedia.co.kr<br />

Anzeigendisposition: Astrid Brück (-1471) abrueck@wekanet.de<br />

Sonderdrucke: Marion Werber, Tel: (089) 2 55 56-1101,<br />

mwerber@wekanet.de<br />

Anzeigengrundpreise:<br />

Es gilt die Preisliste Nr. 17 vom 01.01.2013<br />

Verlag<br />

Anschrift des Verlags:<br />

WEKA MEDIA PUBLISHING GmbH<br />

Richard-Reitzner-Allee 2, 85540 Haar bei München,<br />

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

Geschäftsführung: Wolfgang Materna, Werner Mützel, Kai Riecke<br />

Herstellungsleitung: Marion Stephan<br />

Vertriebs-/Marketingleitung: Robert Riesinger<br />

Vertrieb Handel: MZV Moderner Zeitschriften Vertrieb GmbH &<br />

Co. KG, Breslauer Straße 5, 85386 Eching,<br />

Telefon: (0 89) 3 19 06 – 0, Fax: (0 89) 3 19 06 – 1 13,<br />

E-Mail: MZV@mzv.de<br />

Aboservice<br />

Abonnementverwaltung:<br />

Burda Direct GmbH, Postfach 180, 77649 Offenburg,<br />

Telefon 0781/639 4548, Fax 0781/639 4549,<br />

E-Mail: weka@burdadirect.de<br />

Einzelheftbestellung:<br />

Burda Direct GmbH, Postfach 180, 77649 Offenburg,<br />

Telefon 0781/639 4548, Fax 0781/639 4549,<br />

E-Mail: weka@burdadirect.de<br />

Erscheinungsweise: monatlich<br />

Abonnementverwaltung Schweiz:<br />

Thali AG, Industriestrasse 14, CH-6285 Hitzkirch,<br />

Tel: 041 919 66 11, Fax: 041 919 66 77,<br />

E-Mail: abo@thali.ch, <strong>Internet</strong>: www.thali.ch<br />

Premium-Abonnement mit Jahres-CD:<br />

Abo mit 12 Ausgaben 60,90 Euro<br />

Studenten-Abo<br />

53,90 Euro<br />

Europäisches EU-Ausland 77,90 Euro<br />

Schweiz<br />

121,90 sfr<br />

Classic-Abonnement ohne Jahres-CD:<br />

Abo mit 12 Ausgaben 52,90 Euro<br />

Studenten-Abo<br />

47,90 Euro<br />

Europäisches EU-Ausland 69,90 Euro<br />

Schweiz<br />

105,90 sfr<br />

Außereuropäisches Ausland auf Anfrage<br />

Das Jahresabonnement ist nach Ablauf des ersten Jahres<br />

jederzeit kündbar. Alle Abonnementpreise incl. MWST und<br />

Versandkosten.<br />

© 2013 WEKA MEDIA PUBLISHING GmbH<br />

Druck: Vogel Druck und Medienservice, Leibnitzstr. 5,<br />

97204 Höchberg<br />

ISSN: 1433-3511<br />

82 0413 internet magazin

---

Jetzt wird Steuern sparen<br />

zum Kinderspiel!<br />

DIE<br />

ORIGINAL<br />

SOFTWARE<br />

nur<br />

€ 9,99 *<br />

Sparen Sie 2,– Euro<br />

Versandkosten!<br />

* inkl. 2,- Euro<br />

Versandkosten!<br />

Ab sofort<br />

im Handel!<br />

Gleich online bestellen unter<br />

www.pcgo.de/quicksteuer

---

Linux oder Windows vServer für 4,49 € im Monat<br />

Voller Root- und Administrator-Zugriff<br />

• Cloud-Funktion mit höchster Flexibilität<br />

NEU: HP DL385 Gen8<br />

Hostsystem von HP<br />

• Kostenkontrolle durch tagesgenaue Abrechnung<br />

• Garantiert in 12 Stunden verfügbar<br />

• Jetzt ab sofort mit PrePaid-Funktion<br />

vServer S 2.0 vServer M 2.0 vServer L 2.0 vServer XL 2.0<br />

Core`s (jeweils 2.000 MHz)<br />

RAM<br />

1<br />

1.024 MB<br />

2<br />

2.048 MB<br />

3<br />

4.096 MB<br />

4<br />

8.192 MB<br />

RAM Dynamisch<br />

2.048 MB 4.096 MB 8.192 MB 16.384 MB<br />

Festplatte<br />

100 GB 150 GB 200 GB 300 GB<br />

Traffic<br />

Neu! 100 MBit Full-Flatrate<br />

Betriebssysteme<br />

Windows 2008 Standard oder Debian 6.0, CentOS 6, openSUSE 12.2, Ubuntu 12.04<br />

.de Domain inkl.<br />

IPv4 Adressen inkl.<br />

IPv6 Subnetz (/64) inkl.<br />

1<br />

1<br />

2<br />

2<br />

3<br />

3<br />

4<br />

4<br />

Extras<br />

Firewall, Reboot, Recovery, Monitoring, Reverse DNS, Plesk 11 Admin-Panel (für 10 Domains inklusive)<br />

Monatsgrundgebühr<br />

ab dem vierten Monat<br />

ab dem vierten Monatsgrundgebühr<br />

für die ersten drei Monate<br />

8,99 €<br />

4,99 €<br />

18,99 €<br />

9,99 €<br />

38,99 € 38,99 €<br />

14,99 € 19,99 €<br />

Jetzt informieren & bestellen Tel.: 0211 / 545 957 - 300 www.webtropia.com<br />

PLATINUM PARTNER<br />

powered by