Know-how & Tutorials für Profis WordPress jQuery EÍHTML5 3 CSS

5Si

t i/

A

C°c /t 4l/(* C o'4 o

in

SEO für WordPressImmer noch ein unterschätztes Thema

CSS 3 TutorialObjekte ohne Flash & JavaScript animieren

HTML NewsletterWir zeigen Ihnen wies funktioniert

Europas Nr. 1 kreative Ressource21 Mio. lizenzfreie Fotos, Videos und Vektoren ab 0,75€.Tel. +49 (0)30 208 96 208 | www.fotolia.de

EDITORIAL

Ltí j g g stcrrr

Willkommen !

O nline Shops stellen als Webseiten eine Besonderheit dar, da für den Betreiber von der Funktionalität dieser _ _ Seiten enorm viel abhängt. Inzwischen ist der Markt für

Shopsysteme riesig und die Entscheidung für eines dieser Syste­me und gegen seine Konkurrenzprodukte erfordert eine intensive Recherche, da zum einen die Kosten für das Shopsystem und den Support sich stark voneinander unterscheiden. Zum anderen muss unbedingt sichergestellt werden, dass das System Zukunfts­fähigkeit ist und genügend Möglichkeiten für einen Ausbau bie­tet. Aus diesem Grund haben wir uns eine Auswahl von insgesamt 18 Shopsystemen in Bezug auf den Funktionsumfang näher ange­schaut und die Ergebnisse in einem großen Ratgeber zusammen­

getragen. Zur besseren Vergleichbarkeit wurden die wichtigsten Kriterien in einer Tabelle zusammen­geführt.Daneben findet auch das Thema WordPress natürlich in dieser Ausgabe statt. Wer ein WordPress-The- me nach eigenen Vorstellungen umbaut, wird sich spätestens beim Installieren des ersten Updates für das zugrundeliegende Theme wundern, wenn nämlich die vorgenommenen Änderungen dabei ein­fach überschrieben werden. Eine Lösung für dieses Problem ist die Ausgliederung der Änderungen in so genannte Child-Themes. Wie genau diese funktionieren und was Sie dabei beachten sollten, erfah­ren Sie in dem Tutorial ab Seite 94. In weiteren Tutorials zeigen wir Ihnen außerdem, wie Sie mit CSS3- Animationen umgehen, was sie bei HTML-Newslettern beachten sollten oder welche vielversprechen­den Möglichkeiten Web Storage und Super-Cookies für Websites bieten.

Viel Spaß mit der vorliegenden Ausgabe!

Jürgen Ortmann,, Redaktion Webdesigner

web

webdesigner erscheint zehnmal jährlich beiSonic Media - ein Geschäftsbereich der music support group GmbH Hauptstraße31,53604 Bad HonnefTel.: 02224 98826 0, Fax -79Mail: info@webdesigner-magazin.dewww.webdesigner-magazin.de

Herausgeber und Chefredakteur

Redaktion

Fraqen an die Redaktion

Autoren dieser Ausgabe

Grafik & Layout

Lektorat

Gesamtanzeigen-leitung

Key Account Manager

Druck

Vertrieb

Bezugsmöglich­keiten

Preise

Dipl.-Ing. Hans-Günther Beer (V.i.S.d.P) hgbeer@sonic-media.de

Jürgen Ortmann jortmann@sonic-media.de

Tobias Henke thenke@sonic-media.de

redaktion@webdesigner-magazin.de

Oliver Berghold, Daniel Flöter, Tobias Henke, Andreas Hitzig Jürgen Ortmann

Ronald M. Stirner rstirner@sonic-media.de

Dagmar Schellhas-Pelzer

Daniyal Rahman Tel.: 02224 9882635Fax: 02224 9882679 drahman@sonic-media.de

Brigitta Reinhart,Telemarketing Lehmkuhl Tel.: 089 464729, Fax: 089 463815 breinhart@der-bildbearbeiter.de

Karl Reinhart, RMSGmbHTel.: 089 464729, Fax: 089 463815kreinhart@der-bildbearbeiter.de

Senefelder Misset,Mercuriusstraat 35,7006 RK Doetinchem Niederlande

IPS Pressevertrieb GmbH Meckenheim

Zeitschriftenhandel,Fachhandel, Abonnement

Einzelbezug 12,95 €Jahresabonnement Inland 109 € für 10 Ausgaben inkl. MwSt und Porto (Ausland: 126 Euro inkl. Porto)

Abobestellung Einzelheftbestellung Kundenservice

Sonic Media Aboservice Postfach 1331

53335 Meckenheim Tel.: 02225/7085-367 Fax: 02225/7085-399

abo-sonicmedia@ips-d.de www.sonic-media.de

music support group GmbH Geschäftsführer: Rüdiger J.Veith, Dr. DirkJohannsen Hauptsitz: Brücker Str. 10,82223 Eichenau Amtsgericht München: HRB196730 USt-ldNr.: DE281259857

Bankverbindung Commerzbank MünchenKto. 150 757 300 BLZ: 70040041IBAN: DE92 70040041 0150 7573 00 BIC: COBADEFFXXX

© Für alle Beiträge, Messdaten, Diagramme und Abbildungen bei Sonic Media - Ein Geschäftsbereich der music support group GmbH. Die Zeitschrift und alle in ihr enthaltenen Beiträge sind urheberrechtlich geschützt. Mit Ausnahme der gesetz­lich zulässigen Fälle ist eine Verwertung ohne vorherige schriftliche Einwilligung des Verlages verboten. Übersetzungen, Nachdruck oder Vervielfältigung und Spei­cherung sind - mit Ausnahme zum privaten Gebrauch - nur mit ausdrücklicher Einwilligung des Verlages zulässig. Eine Haftung für die Richtigkeit der Veröffentli­chungen kann trotz sorgfältiger Prüfung durch die Redaktion weder vom Heraus­geber noch vom Verlag übernommen werden. Für unverlangte Einsendungen wird keine Haftung/Gewähr übernommen. Für namentlich gekennzeichnete Bei­träge übernimmt die Redaktion nur die presserechtliche Verantwortung. Pro­duktbezeichnungen und Logos sind zu Gunsten der jeweiligen Hersteller als Wa­renzeichen und/oder eingetragene Warenzeichen geschützt. www.webdesigner-magazin.de

1

> 1

> 1

InhaltWebdesigner 04/2012

IMPRESSUM

KOLUMNEIst das noch innovativ oder kann das weg? 6

8

NEWS & BUCHREZENSIONENNews und BuchvorstellungenNeuigkeiten rund ums Web

Buchrezension"Photoshop CS6" von Markus Wäger

JOB BOERSEStellenangebote für Webworker 106

104

WEB-GALERIEInteressante Single PagesAufwändig gestaltete Einseiter

Online ShopsWeb Designs für Online Vertriebsplattformen

48

100

RATGEBERWeb-Anwendungen offline nutzbar machen 14Web Storage, Application Cache und IndexedDB

Shopsysteme im Vergleich18 Systeme und ihre Stärken und Schwächen

Workflow für Web DesignerMehr Effektivität durch geregelte Abläufe

SEOfür WordPressDie wichtigsten Techniken für besseres Page Ranking

Child Themes in WordPressWas Web Designer SEO-technisch beachten sollten

24

34

72

88

m anifest

M an ifes t-D ate i: Beschreibt den

A nw endungscache

* O )

Cache ist noch leer :

W eb se ite a m e ig en und in den A nw endungscache laden

oderCache ist angelegt :

A nw endungvcache : Cached d ie in d e f

M a n ifes t-D a te i s tehenden D ate ien

M a n ifes t D ate i ändern:• D ate ien au fn etunen• D ate ien löschen• Version aktualisieren

# A nw endungscache aktualisieren

W ebserver C lien t/B ro w ser

à

Web-Anwendungen offline nutzbar machenDank sogenannter Super-Cookies können auch kom­plexe Web-Anwendungen verfügbar gemacht werden, wenn die Internetverbindung unterbrochen wird.

\ KONZEPr iONi tRuMG L j w u r - f

Umsetzung

T e s t i n g unK o r r e k t u r

Workflow für Web DesignerMit den richtigen Arbeitsabläufen können auch größere Projekte bewältigt werden und es lässt sich effizienter arbeiten.

4 der webdesigner 04/2013

>~n

*>t

j*> jt.

j *

88Child Themes in WordPressDamit individuelle Anpassungen bei einem WP-Theme nicht mit dem nächsten Update des Themes überschrieben werden, sind Child Themes die optimale Lösung.

!«■««• •• I M f » «

«Ar« Ulf UV

I.«

■

30 • R M f f PKT>

ES IST UNSER 1. GEBURTSTAG!UM DAS ZU FEIERN. GIBT SS DAS HIER:

20% RABATT AWJEDEN ZWEITEN ARTIKEL!

RAIATT INCCT AM MTTIWOCH. M H 27. PISRUAft

M*M» MC o u» sca n e « « n w w mm».•twWM'Ä'iAI'WMl «MW» »W *0

82 HTML-Newsletter gestaltenMail-Clients können HTML-Seiten nicht immer einwandfrei darstellen. Mit einigen Kniffen lässt sich HTML trotzdem sehr gut für die Gestaltung von Newslettern nutzen.

»— * - V t i J V 123 » fr »4 **• I« I * MM. « «

I -

* <

I J t J p ~4 ^ 2 » I I 41

4 % ; Jl*

; •> .T .w iSA\J **\H ln ^ jŒ-Jo-r.iJiA *• I ?

92 Auf zu den SternenMit Illustrator lassen sich trendige Retro-Grafiken und -Banner gestalten. Grundlage dafür ist die Arbeit mit Bezierkurven.

somc-meaia.

der-webdesigner.

TUTORIALS

Profi-TechnikenSchritt für Schritt erklärt

ü J iW :

Best Practice für flexible Websites 40Stylesheets von vornherein RD-tauglich gestalten

Grafiken mit SVG & HTML5 erzeugen ........ 44Grafiken direkt im Code anlegen

Design für eine App-Downloadseite, Teil 1 ........ 54Aufwändige Hintergründe als Bühne für den Content

Videos für WordPress 60Filme richtig in WordPress-Seiten einbinden

Social Media-Buttons ansprechend gestalten 66Web-2.0-Schaltflächen mit Photoshop

Als Objekte laufen lernten 76CSS3-Animationen einsetzen

HTML-Newsletter gestalten ........ 82Web- und Email-Clients richtig ansprechen

Auf zu den Sternen 92Mit Illustrator Banner im Retro-Look gestalten

Inserentenverzeichnis 105

Download-Anleitung 112

Vorschau 114

Das benötigte Material für die Workshops können Sie bequem von unserer Webseite herunterladen. Mit dem exklusiven Leserpasswort haben Sie die Dateien immer und überall zur Hand.

04/2013 der webdesigner 5

KOLUMNE

WILLY WEB MASTERIst das innovativ oder kann das weg?Manchmal schreibt das digitale Zeitalter wirklich seltsame Geschichten. Man fragt sich, ob die vermeintliche Innovationskraft, die für Dinge wie Google Glass aufgewendet wird, nicht sinnvoller genutzt werden könnte. Wer will schließlich schon mit einer Brille telefonieren?Auch wenn man bei Googles Datenbrille vielleicht noch geteilter Meinung sein kann, ist spätestens der Nutzen von sprechenden Schuhen, wie Google sie kürzlich in Texas vorgestellt hat, kaum noch nachvollziehbar. DieGoogle-Schu-

he sollen unter anderem mit Hilfe mehrerer Sensoren Bewegungen messen können. Ob es wirklich einen Nutzen hat, wenn sich plötzlich die Schu­

he mit Sprüchen wie„Das ist super langweilig" melden, darf bezweifelt werden. Allerdings befindet sich das Projekt „TaIking Shoe" noch weit

entfernt von jeglicher Marktreife. Ähnlich hat man aber bis vor Kur­zem auch über Google Glass gedacht und die Datenbrille soll nun

im Januar 2014 tatsächlich in den Verkauf gehen. Auch bei App­les iWatch stellt sich die Frage, ob die Armbanduhr wirklich neu erfunden werden musste. Okay, ein Smartphone in Form einer Uhr gibt es bisher noch nicht. Aber reicht das als Argument aus, um ein solches Produkt auf den Markt zu bringen? Auffällig bei diesen Innovationen ist vor allem die Koppe­lung von Software an einen Gebrauchsgegenstand. Es scheint auch einem „klassischen" Internetunternehmen wie Google viel daran zu liegen, seine Kunden mit diver­sen Geräten auszurüsten. Und sicherlich hat dieser Trend auch damit zu tun, dass man bei den Unternehmen fie­berhaft nach neuen Wegen sucht, noch mehr Daten über seine Kunden zu sammeln. Denkbar wäre, dass die Google-Brille Daten über die Umgebung ihres Trägers übermittelt, ohne dass es ihm unbedingt bewusst ist. Eine Armbanduhr lässt man nicht mal eben liegen wie ein Smartphone oderTablet, sondern trägt sie am Handgelenk

überall mit hin. Gleiches gilt für Schuhe.Es bleibt abzuwarten, wie erfolgreich diese Produkte sein

werden, sofern sie denn auf den Markt kommen. Bei den neuen Innovationen handelt es sich nicht zuletzt um Acces­

soires, die damit auch modischen Aspekten unterliegen. Nicht jeder wird eine Brille tragen wollen, die genauso verbreitet ist

wie heutzutage das iPhone. Vermutlich werden die Produktzyk­len im Falle des Erfolgs ähnlich rasant sein, wie beim iPhone, sodass

praktisch im Jahrestakt neue Versionen auf den Markt kommen. Und sicherlich sind die neuen Versionen außer mit einem neuen Design

auch mit jeder Menge neuer Technik ausgestattet, deren Nutzen für den Anwender nicht immer ersichtlich ist.

1011101

01101 1 1 1 0 0 0 1 0 0 1

6 webdesigner 04/2013

Aktuell 2u iOS 6

A U t u e U

zu \OS 6

JW** ' v « 4

*®p‘

cat a<

i c t o n c » - N S S ea rchP A thF o rD i r e c t o r i< :ft - ( d i r a c t o r l e * o t> ) e c tA t In d e x !0 | ;

I ( r e s u l t « o fc je c tA t In d e x r ( ia d e x P a th

M le c te d S ^ iM m t In d e x ) — 1 ) < jo r » e tU b lq u lto u a * N O lt«n * tU 9 U «su rl

d e a t in a t lo n U R L : (K5UHL filoU R LM

App-Entwicklung mit iOS 61012 Seiten, mit DVD, 39,90 €

ISBN 978-3-8362-1915-0

Apps programmieren für iPhone und iPad

Das umfassende Handbuch

► Grundlagen der A nw endungsen tw ick lung mit dem SDK 6► Apps entwickeln, testen, abs.chern und vcroffei.ll.chen► Inkl. Xcode. ¡Cloud. Twitter. Debugging, V e rste u e ru n g ,

zahlreicher Praxisbeispiele

LEHR-Progra/Tiingemaft

*14Ju Sch G

S S AlleRm*«'* T o o K ^ rV .d eo -U k1.onen Galileo Com puting

Professionelle App-Entwicklung!Profitieren Sie vom Wissen der iOS-Experten Klaus M. Rodewig und Clemens Wagner.Auf über 1.000 Seiten erfahren Sie, wie Sie professionelle Apps für iPhone und iPad ent­wickeln, testen, absichern und im App Store veröffentlichen. Inkl. Xcode, Debugging, Versionierung, zahlreichen Praxisbeispielen und Sicherheit. Darüber hinaus bieten wir Ihnen Bücher zu Android, WebApps und Windows Store Apps. Viel Spaß beim Stöbern!

Unsergesamtes Programm

»www.GalileoComputing.de

f » facebook.com/GalileoPressVerlag » » twitter.com/Galileo_Press R+ » gplus.to/GalileoPress

Galileo ComputingWissen, wie's geht.

NEWS_________________Neuigkeiten aus der Welt des Webdesigns

NEWS......- «5.**

«*VW|

M i m H * 1

r ~ T«n

•t

• ••

• I

• M

O UMH t

Onpage mit Xovi - Erfolg dank WDF*IDFAuch wenn es nach dem Pinguin-Update Googles vielleicht den Anschein gehabt haben mag: Die Onpage-Optimierung ist nicht out. Im Gegenteil: Überlegungen wie diezurTermingewichtung SEO-Texten, WDF*IDF als„Zauberformel", bezeugen den hohen Stellenwert der Onpage-Optimierung.Auch die Xovi GmbH, Vertreiber der gleichnamigen SEO Controlling und Online Marketing Suite, sieht die Zeit für mehr Onpage-Optimierung gekommen und er­weitert das hauseigene Onpage-Tool.Die Grundlegenden Aufbereitung sind dabei gleich geblieben: Weiterhin erfährt der Nutzer, ob es doppelte Inhalte auf der Seite gibt, Seiten nicht erreichbar und falsch weitergeleitet sind, Überschriften und Formatierungen suboptimal verwen­det werden, Metaangaben hinterlegt wurden und dergleichen mehr. Hinzugekommen sind nun zwei weitere Rubriken des Onpage-Tools, die allesamt zum Ziel haben SEO-Texte optimal zu gestalten und zielführend zu gestalten.Mit Karl Kratz' berühmter Formel „WDF*IDF" arbeitend, können Nutzer damit nicht nur einsehen, welche Mitbewerber besser optimierte Seiten für das entsprechende Keyword aufweisen, sondern noch einen wichtigen Schritt weiter gehen: Mit dem integrierten WDF-Editor live Texte editieren und analysieren. Das Ergebnis ist klar - der optimale SEO-Text.

Business Hoster internet24 mit Preisaktion zum 15. JubiläumDer Dresdner Business Hoster internet24 GmbH startete zum Jahreswechsel bereits in das 16. Jahr der Geschäftstätigkeit. Zu diesem besonderen Anlass hat der Hoster exklusiv für die Leser des Webdesigners eine ganz spe­zielle Aktion: Neukunden, die sich bis zum30.04.2013 für einen dedizierten Server von internet24 entscheiden, erhalten auf die er­sten drei Monatsgebühren 50 Prozent Erlass.Bei der Bestellung muss einfach nur das Co­dewort 15i24 angegeben werden.Bei den dedizierten Servern können Neukun­den zwischen einem Managed oder einem Root Server wählen, je nachdem, welcher technische Background im Unternehmen vorhanden ist. Managed Server bieten sich insbesondere dann an, wenn die technische Einrichtung sowie die Serveradministration lieber ausgelagert werden soll. Für Web- und Werbeagenturen, die ihren Kunden auch

Webhosting-Leistungen anbieten möchten, hat internet24 spezielle Agenturserver-Tarife und Reseller-Angebote im Portfolio. Das Ser­vermanagement erfolgt dabei über inter- net24, so dass die Agentur sich auf ihr eigent­liches Kerngeschäft Rahmen einer Zu­sammenarbeit mit internet24 können Agenturen wäh­len, ob die Dienst­leistungen unter eigenem Namen verkauft werden sollen, oder ob die Agenturen als Ver­mittler auftreten möchten. Beim Kundenkontakt legt internet24 be-

konzentrieren kann. Im

sonderen Wert auf eine persönliche Betreu­ung. Deshalb beginnt der Support nicht in einem Callcenter, sondern bei einem direkten Ansprechpartner. Das zertifizierte Technik- Team ist rund um die Uhr, auch an Feiertagen, per Telefon und E-Mail erreichbar.

8 webdesigner 04/2013

NEWSNeuigkeiten aus der Welt des Webdesigns

* • • V J

/

T/ •

- S v w . ;' m t p -

O *

Adobe Creative Cloud für Teams RoadshowBesuchen Sie die Adobe Creative Cloud für Teams Roadshow in einer Stadt in Ihrer Nähe und erfahren Sie von renommierten Adobe Experten, welche Vorteile Ihnen der Einsatz der Creative Cloud für Teams in Ih­rem Unternehmen bietet. Die Veranstaltung richtet sich an Unternehmen, die innovative Ideen für Design, Web und Video umsetzen und mehrere Kreativarbeitsplätze haben. Die Adobe Creative Cloud für Teams bietet das ultimative Kreativ-Toolset für die Krea­tivabteilung von Unternehmen, speziell auf Teamarbeit abgestimmte Features und ein einfaches Lizenz-Management.DieTermine der Roadshow in der Übersicht:

09.04. Hamburg11.04. Stuttgart12.04. München18.04. Wien19.04. Köln23.04. Berlin

Mit der Creative Cloud für Teams können die kreativen Mitarbeiter in Ihrer Firma oder Arbeitsgruppe sämtliche Desktop- Applikationen der Adobe Creative Suite 6 sowie weitere Programme und Dienste nutzen, darunter Adobe Lightroom 4, Ad­obe Acrobat XI, Adobe Muse, Adobe Edge Tools & Services und viele mehr!Die Abo-Lizenz umfasst zudem optional pro Arbeitsplatz 100 GB Speicherplatz in der Cloud sowie Zugriff auf Online-Dien­ste für Zusammenarbeit innerhalb priva­ter Arbeitsgruppen. Hinzu kommen neue Publishing-Lösungen für innovative Apps und Medieninhalte. Neue Features und Applikationen stehen unmittelbar nach Veröffentlichung zum Download bereit. Während der Abolaufzeit nutzen Sie immer die neueste Software - Upgradekosten entfallen vollständig.Für einen günstigen Monatsbeitrag „mie­ten" Sie einen Kreativarbeitsplatz anstatt Lizenzen zu kaufen - zum günstigen Pro­

mopreis von nur € 49,- pro Monat zzgl. MwSt. Dieses Modell bietet Ihnen nur CANCOM. Informieren Sie sich jetzt bei Ihrem CANCOM Ansprechpartner! Adobes langjähriger Kooperationspartner berät Sie umfassend über das neue Adobe VIP Lizenzprogramm.Sie entscheiden, ob Sie die Abo-Kosten für Ihre Kreativarbeitsplätze als Einmalzahlung oder bequem in 12 Monatsraten bezahlen! Bitte wenden Sie sich bei Fragen und be­züglich der Finanzierung an unser Creative Cloud Competence Center!Das Arbeiten mit der Creative Cloud für Teams bietet Agenturen, Verlagen und Kreativabteilungen völlig neue Möglichkei­ten im Einsatz und bei der Verwaltung von Adobe Software. Kreativteams arbeiten immer mit der neuesten Adobe Software, neuen Diensten und den innovativsten Tools und können Projekte gemeinsam planen und bearbeiten.Lernen Sie die neuen exklusiven Creative Cloud Features kennen und erfahren Sie, wie Sie mit neuen Applikationen wie Ado­

be Muse oder Adobe Edge Tools arbeiten oder mit HTML, CSS und JavaScript ein­drucksvolle Inhalte und Apps für mobile Endgeräte erstellen.Erleben Sie live, wie Teammitglieder dank der neuen Funktionen, Programme und Apps effizienter zusammenzuarbeiten - intern aber auch extern mit Kunden und Partnern. Lernen Sie die neue Verwal­tungskonsole für Lizenzmanagement und Teamverwaltung kennen und erfahren Sie, welche Vorteile Ihnen das neue VIP Lizenz­programm im Vergleich zur Lizenzierung über herkömmliche Lizenzprogramme bietet.Im Vortrag über iPad Publishing lernen Sie, wie Sie Inhalte, die mit InDesign erzeugt wurden, mit wenigen Handgriffen in digi­tale App-Dateien umwandeln und qualita­tiv hochwertigen digitalen Content erzeu­gen können.Und zuletzt präsentieren wir Ihnen in ei­nem exklusiven Apple Vortrag, welche Vorteile Ihnen die neuesten Apple Techno­logien

04/2013 webdesigner 9

NEWS_________________Neuigkeiten aus der Welt des Webdesigns

Na c h h a l t i g e V e r b e s s e r u n g e n

f ü r U n t e r n e h m e n e n t s t e h e n

i m D i a l o g m i t M i t a r b e i t e r n ,

Ku n d e n u n d d e r G e s c h ä f t s -

f u h r u n g .

.heidischerm.de

IT-Sicherheit, Qualitätsmanagement, Prozessoptimierung und Datenschutz

Sicheres Hosting mit Hostserver.deDie Hostserver GmbH, ein Spezialanbieter für Managed Hosting, ist nach dem führenden internationalen Si­cherheitsstandard ISO 27001:2005 durch den TÜV SÜD zertifiziert. Hostserver betreut für Agenturen und Unter­nehmen komplexe Webanwendungen und Server mit hohen Sicherheitsanforderungen.„Datenschutz und IT-Sicherheit sind heute die zentralen Anforderungen für professionelles Hosting von Anwen­dungen und Daten. Als zertifizierter Anbieter stehen wir unseren Kunden in Fragen des Hostings, des Betriebs, des Datenschutzes und der IT-Sicherheit kompetent und beratend zur Seite. So können sich unsere Kunden ganz auf Ihre Anwendungen und Webprojekte konzen­trieren," erklärt Geschäftsführer Julian Wyneken.Die Zertifizierung umfasst das ganze Unternehmen mit allen Standorten und legt den Fokus auf die tech­nischen Kernprozesse Managed Hosting, Domain- und Nameservice, sowie den Kundensupport. Damit ist die Hostserver GmbH einer von wenigen nach ISO 27001 „IT-Sicherheit" und ISO 9001 „Qualitätsmanagement" zertifizierten Anbieter in Deutschland, die individuelles Managed Hosting anbieten.Im Zuge der Zertifizierung hat Hostserver ein struktu­riertes Informations-Sicherheits-Management-System (kurz ISMS) eingeführt, das den Vorgaben des ISO- Standards 27001 folgt. Neben dem Kernteam um den

Informationssicherheits- beauftragten Fred van Gestel, waren alle Mitarbeiter und Abteilungen von der Evalu­ierung und Erarbeitung bis zur Implementierung betei­ligt.„Nach der erfolgreichen Einführung von ISO 9001 „Qua­litätsmanagement" 2011 haben wir darauf aufbauend unser Informations-Sicherheits-Management-System nach ISO 27001 intern in nur einem Jahr umgesetzt. Wir sind sehr stolz darauf, dass der hohe Standard der Informationssicherheit, den wir in unserem Unterneh­men haben, jetzt unabhängig bestätigt wurde", erklärt Marcus Schäfer, Geschäftsführer der Hostserver GmbH. Informationssicherheitsbeauftragter (ISB) Fred van Ge­stel bestätigt:„Der bewusste Verzicht auf externe Berater und vorgefertigte Lösungen bei der Umsetzung von ISO 27001 hat zu einer besonders tiefen Verankerung des Sicherheitsbewusstseins im Unternehmen geführt, das täglich aktiv durch unsere Mitarbeiter gelebt wird." Alle Maßnahmen des Informations-Sicherheits-Ma- nagement-Systems der Hostserver GmbH sind doku­mentiert und werden bei rechtlichen, technischen oder organisatorischen Veränderungen angepasst. Ein ISMS ist ein kontinuierlicher Prozess, an dem unser Informa- tionssicherheitsteam unter Leitung des ISB permanent arbeitet. Der TÜV SÜD prüft jährlich die ISO-konforme Umsetzung im Rahmen eines Überwachungsaudits.

1 0 webdesigner 04/2013

_________________ NEWSNeuigkeiten aus der Welt des Webdesigns

Telekom plant„WLAN to go//

Die Deutsche Telekom will WLAN künftig stär­ker nutzen und ihr Netz von derzeit 12.000 auf 2,5 Millionen Hotspots im Jahr 2016 ausbauen. Die Telekom will das Produkt unter dem Namen WLAN to go vertreiben. Ab Juni 2013 soll der DSL-Router W724V den Festnetzanschluss des Kunden zum Access Point machen. Da die Tele­kom jährlich rund 2 Millionen DSL-Router aus­tauscht, soll die Zahl der Hotspots rasch steigen. Kunden, die ihren Festnetzanschluss für WLAN to go bereitstellen, können im Gegenzug auf das komplette Hotspot-Netz der Telekom und die Fon-Hotspots weltweit zugreifen. Dazu ist nach

Angaben des Unternehmens nicht zwingend ein Anschluss der Telekom erforderlich, wohl aber ein spezieller Router. Die Telekom will ihre Festnetzanschlüsse auch in anderen Ländern mit WLAN-Hotspots nachrüsten.Die Telekom will einen dichten "WLAN- Teppich" schaffen, der die durch den Smartphone- und Tablet-Boom immer stärker in Anspruch genommenen Mo­bilfunknetze in den Ballungszentren entla­sten und dafür ansonsten brachliegende Ka­pazitäten der Festnetzanschlüsse der eigenen Kunden nutzen.

Suchmaschinenoptimierung. Das umfassende HandbuchDas Handbuch zur Suchmaschinen-Optimierung von Sebastian Erlhofer gilt in Fachkreisen zu Recht als das deutschsprachige Standardwerk.Es bietet Einsteigern und Fortgeschrittenen fundierte Informationen zu allen wichtigen Bereichen der Such- maschinen-Optimierung. Tauchen Sie ein in die Welt des Online-Marketings. Verständlich werden alle rele­vanten Begriffe und Konzepte ausführlich erklärt und erläutert. Neben ausführlichen Details zur Planung und Erfolgsmessung einer strategischen Suchmaschinen- Optimierung reicht das Spektrum von der Keyword- Recherche, der wichtigen Onpage-Optimierung Ihrer Website über erfolgreiche Methoden des Linkbuildings bis hin zu Ranktracking, Monitoring und Controlling.Auch ergänzende Bereiche wie Google AdWords, die Konversionsraten-Optimierung und Google Analytics

Auf einen BlickTitel: Suchmaschinenoptimierung.Das umfassende HandbuchAutor: Sebastian ErlhoferVerlag: Galileo ComputingISBN: 978-3-8362-1898-6Preis: 39,90 Euro, als Onlineausgabe 34,90 Euro

kommen nicht zu kurz.Die aufgabenorientierte Struktur und die anschau­lichen Beispiele ermöglichen Ihnen die direkte und schnelle Umsetzung in der Praxis.

Sebastian Erlhofer

JO

Suchmaschinen-Fm ' O ptim ierung

Das umfassende Handbuch

► G r u n d la g e n , f u n k t i o n » w f i% * n u n d R a n k in * - O p t im i r r u « g

► P la n u n g u n d D u n h fü h ru n g fü r C o o g l« und Co► K o n v * r * i o n \ i a t e n . t e i g e m , G o o g l r Ä d W o , d s . W e b A n a l y « ^

" S .C a l i l lo C o m p u tin g

04/2013 webdesigner

NEWSNeuigkeiten aus der Welt des Webdesigns

Host Europe Root Server 2.0: Mehr Performance zum gleichen Preisschinen Vorbehalten waren.

Mit der neuen Produktgeneration „Root Ser­ver 2.0" erhalten die Kunden bei Host Europe ab sofort eine hochgeschraubte Server-Per- formance - bei gleichem Preis. Denn Host Eu­rope stattet seine Root-Server mit mehr RAM und zusätzlichen Prozessorkernen aus. Inter­essierte können unter sieben Leistungsklas­sen die für ihre Anforderungen ideale Lösung auswählen.Host Europe Root Server 2.0 kosten zwischen49 und 399 Euro monatlich und können jeder­zeit mit einer Frist von 4 Wochen zum Monat­sende gekündigt werden. Im Preis enthalten ist bereits der Support, der an 365 Tagen im Jahr 24 Stunden am Tag kostenlos per E-Mail oderTelefon (0800 Rufnummer) erreichbar ist.

„Conference on Animation, Effects, Games and Transmedia" vom 23. bis zum 26. April im Stuttgarter Haus der WirtschaftKnapp einen Monat Monate vor Veranstaltungsbeginn freut sich Europas einflussreichste Konferenz für Animation, Effekte,Games und Transmedia über weitere bestätigte Programm- Highlights: Disney Pixars Regisseur und Drehbuchautor Saschka Unseld präsentiert auf der FMX 2013 sein neuestes Projekt, den Kurzfilm The Blue Urmbrella. Technische Schwer­punkte bilden in diesem Jahr unter anderem die Themenrei­hen Cloud Gaming und Cloud Computing, die Jon Peddie mit einer Keynote eröffnet. Besonderes Augenmerk liegt im Rahmen der „Innovative Places"-Reihe auf den Standorten Österreich, Toronto und der Türkei. Marktführer wie Adobe und Autodesk laden die Besucher in Stuttgart zu spannen­den Workshops ein, und die erstmalig ins Leben gerufene „Fast Forward Education" schlägt die Brücke zwischen inter­nationalen Medien-Hochschulen und der digitalen Industrie.Jon Peddie, Pionier der digitalen Medienindustrie und vielzitierter tiver neuer Möglichkeiten auch Kompromisse eingehen muss. Unter­Fachautor zu komplexen Multimediathemen, hält auf der FMX gleich stützt wird Peddie dabei von JPR-Vizepräsidentin Kathleen Mäher, die zwei Vorträge. In seiner Keynote der von Ludwig von Reiche (NVIDIA unter dem Motto„Managing and Making Entertainment" an aktuellen ARC) kuratierten „Cloud Computing"-Reihe geht der Gründer von Jon Beispielen die Vorteile und Herausforderungen bei der Erstellung von Peddie Research (JPR) der Frage nach, was die Cloud für Design, Ani- digitalem Content in der Cloud erläutert. In einer zweiten Präsentation mation und Visual Effects bedeutet. Dabei konzentriert er sich auf Aug- im Rahmen der „New Technology"-Reihe gibt Peddie einen globalen mented Reality, Displays und die verschiedenen Endgeräte und erklärt, Überblick über die neuesten technischen Veränderungen vor dem warum der Nutzer bei der Multi-Plattform-Visualisierung trotz attrak- Hintergrund des aktuell stattfindenden Paradigmenwechsels.

12 webdesigner 04/2013

Host Europe hat die Leistung seines Root-Ser- vers erhöht. Künftig erhalten Neukunden von Root Server 2.0 bis zu 50 Prozent mehr RAM und bis zu 8 zusätzliche Prozessorkerne.

Host Europe Root Server arbeiten mit der innova­tiven Vollvirtualisierung von Parallels Server Bare Metal, die die Vorzüge von virtuellen und dedizierten Servern in einer Lösung vereint:Dank dedizierter Hardware liefern sie die Performance eines physikalischen Hochleistungsservers und ermöglichen vollen Root-

Zugriff auf alle Hardware-Ressourcen. Gleich­zeitig überzeugen Root Server durch einfache und komfortable Installations- und Admini­strationsroutinen, die bislang virtuellen Ma

NEWSNeuigkeiten aus der Welt des Webdesigns

Firefox hat keine Lust auf AppleWeil unabhängige Entwickler für iPhone und iPad keine Browser mit eigener Darstel­lungstechnologie anbieten dürfen verzichtet Mozilla auf die Entwicklung eines eigenen Browsers für iphone und ipad. Deshalb ist es unmöglich, einen schnelleren Browser als das Apple-eigene Produkt zu vertreiben.Solange Apple unabhängige Entwickler be­nachteiligt, wird die Mozilla-Stiftung keine Ver­sion des Firefox-Browsers für iPhone und iPad entwickeln, sagte Firefox-Produktmanager Jay Sullivan bei der Konferenz SXSW in Austin Sullivan beklagt, dass Apple unabhängigen Entwicklern Browser-Innovationen erheblich erschwert. So sei es verboten, über Apples App Store Browser zu vertreiben, die eine an­dere Technologie zum Darstellen von Websi­tes und Ausführen von JavaScript nutzen als

die von Apple vorgeschriebene. Mozilla könnte deshalb beim ei­genen Firefox-Browser unter iOS nicht die eigenen, besonders schnellen Verfahren zur Dar­stellung von Web-Inhalten nutzen.Apple schreibt Entwick­lern vor, dass sie zur Dar­stellung von Websites die von Apple vorgegebene Komponente UlWebView nutzen. Apple hingegen nutzt für seinen eigenen Safari-Browser unter iOS eine andere Technologie, unter ande­rem die Nitro-Engine, die Apple- Software Vorbehalten ist.

Universität Paderborn entwickelt P2P-FacebookAuf der CeBIT hat ein hauptsächlich an der Universität Paderborn ansässiges Team um den in Düsseldorf lehrenden Juniorprofes­sor Kälmän Graffi ein peer-to- Peer-Framework für dezentrale soziale Netzwerke vorgestellt, in denen die Nutzer ihre Da­ten nicht mehr einem großen Unternehmen überantworten müssen, sondern auf eigener Flardware speichern, wo sie deutlich mehr Kontrolle dar­über haben.Dies ist unter anderem des­halb der Fall, weil Nutzungs­bedingungen nicht beliebig geändert werden können und weil ein Anreiz fehlt, mit einem mehr oder weniger heimli­chen Verkauf von Daten Geld zu verdienen. Außerdem können Oberflächen so gestaltet werden, dass die Sichtbarma­chung nicht versehentlich für einen weitaus

größeren als den eigentlich vorgesehenen Personenkreis erfolgt. Letzteres garantiert das Framework auch dadurch, dass alle Daten ver­

schlüsselt und signiert werden. Graffi selbst sieht den Einsatz seiner Entwicklung, deren Prototyp bereits an den Universitäten Pader-

born und Düsseldorf läuft, allerdings eher bei Unternehmen, im öffentlichen Dienst und bei NGOs, wo sie beispielsweise Schulungen

oder örtliche verstreute Ar­beitsgruppen nutzen könn­te. Durch das P2P-Prinzip wären dazu keine großen Investitionen in neue Server notwendig, weil die dezen­tral vorhandenen Kapazitä­ten genutzt werden. NGOs in Staaten mit Zensurpro­blem hätten darüber hin­aus den Vorteil, dass sich ein solches Netzwerk aufgrund seiner verteilten Struktur nur schwer vollständig ab­schalten lässt.Grundsätzlich soll die Tech­nologie aber jeder nutzen

können - egal ob er damit ein eigenes Netz­werk für zehn Freunde oder ein neues Face- book betreiben will.

/ .

a

Social Media

04/2013 webdesigner 1 3

RATGEBERWeb Storage, Application Cache und IndexedDB von Daniel Flöter

Web Storage, Application Cache und IndexedDB

Web-Anwendungen offline nutzbar machenServerseitige Anwendungen sind praktisch sofern ein Internetzugang verfügbar ist. Dank neuer Standards und Technologien zur Nutzung von Browsercaches sind immer mehr Web- Anwendungen auch offline nutzbar.

Cache ist noch leer:

.manifest

Manifest-Datei: Beschreibt den

Anwendungscache

Webseite anzeigen und in den Anwendungscache laden

Anwendungscache: Cached die in der

Manifest-Datei stehenden Dateien

*«

oder Cache ist angelegt

Manifest-Datei ändern:• Dateien aufnehmen• Dateien löschen• Version aktualisieren>----- ------ J

Anwendungscache aktualisieren

Durch neue Techno­logien wie Applica­tion Cache können wesentlich größere

Datenmengen im Browsercache vor­

gehalten werden, als dies bisher m it Cookies

möglich war.

Webserver

C ookies sind in der Webentwicklung nicht mehr wegzudenken. Mit HTML5 & Co. sollten auch die Cookies eine Überarbeitung bekommen, und

zwar eine, die gleich etwas größer ausfällt. Dabei sollten die bestehenden alten Cookies nicht einfach ersetzt wer­den, sondern mit den neuen einen großen Bruder be­kommen. Man erahnte dann wohl so viel Potenzial für die neuen Cookies, dass sie sogar ihren eigenen Standardisie­rungsprozess erhielten. Inzwischen haben sich nun drei neue Namen für die Supercookies etabliert, die die Vortei­le der neuen Cookies verdeutlichen sollen:„Web Storage", „Application Cache" und „IndexedDB". Der Vollständigkeit wegen soll hier auch ein Standardisierungsprozess nicht unerwähnt bleiben, der allerdings schon wieder als aufge­geben gilt, und zwar„Web SQL".Cookies erlauben es Daten dauerhaft im Browser zu spei­chern, ähnlich wie es der Browsercache eigenständig tut. Beide Möglichkeiten der Zwischenspeicherung im Client

Client/Browser

haben ihre eigene Funktionalität zu erfüllen. Zwar besit­zen diese Speichertechniken eine gewisse Genialität und eine unglaublich wichtige Funktionalität in der Weben­twicklung, es lässt sich nicht von der Hand weisen, dass bei der Entstehung beider Konzepte auch Fragen unbe­antwortet gelassen werden mussten, um die Verbreitung und die Implementierung in allen Browsern zu schaffen.So helfen Cookies dabei Anmeldedaten, Artikel in einem Einkaufswagen oder Klickverhalten bei Werbebannern über mehrere Seitenwechsel hinweg zu erfassen, jedoch ist die Größe der zu speichernden Daten recht begrenzt und die Cookies werden unverschlüsselt übertragen. Für den Browsercache gilt, dass er keinerlei API zur Verfügung stellt und so zwar zur Verbesserung eines schnelleren Sei- tenaufbaus verhilft, aber man keine Chance hat determi­nistischen Programmcode um den Browsercache zu sch­reiben. Genau an diesen Schwächen wurde gearbeitet und neue Standards definiert.

14 webdesigner 04/2013

RATGEBERWeb Storage, Application Cache und IndexedDB

Web Storage

Das neue Web Storage erweitert das JavaScript-Win- dow-Objekt um zwei Funktionen, den Local Storage und den Session Storage. Letzterer ist am ehesten mit Cookies zu vergleichen. Während Local Storage die Da­ten auch dann noch speichert, wenn der Browser ge­schlossen wird, ist der Session Storage an eine Anwen­dung oder Seite sowie an ein Tab und Browserfenster gebunden. Außerhalb einer solchen Session sind die Daten nicht mehr gültig. Je nach verwendetem Brow­ser können zwischen fünf MB und zehn MB große Da­ten als Key/Value-Paar gespeichert werden. Bei den Cookies sind es nur vier kilobyte und sie sind auf eine Anzahl zwischen 20 bis 50 Cookies begrenzt. Dabei las­sen sich nur Werte vom Typ String speichern, weshalb beim W3C auch über einen Zugriff auf SQL-Basis disku­tiert wird. Bis dies aber umgesetzt ist, kann man sich mitJSON.stringifyO" undJSON.parseO" behelfen. ►

• O trM Im »* » P \* f V*wTwfca Qm*S Ort«« Ç\wàm-ém Trw*elMi I%mm

Cougle

Orve

n

• My t>w*

ShndttMn« :ttr%sÜK«r4AdNt»

j 0*1 rm 0*m

Ow#*w1 rVaq/w f>*M

Edü OoooWí Documontt and v*w Ooogto Sp w d tfiM t»

1. 8«t V0 Offlin« ttec«fcwgm Ou u ii f t i mrä C m fm ZZniDiNNfi «■ t» MM« 10«Mtu«#r LMf monC « PU*-; CT

öff-1 in M O I f W O o c i

1 In »Uli V* Om* Q n m ;You r « M M i O n r a «M i i m * ** - r » CWN rtori

Google Does kann im Chrome-Browser auch offline verwendet werden.

Application Cache

Mit dem Application Cache oder dem Offline Cache ist ein weiterer Cache im Browser entstanden, der eine hundertprozentige Stabilität und Zuverlässigkeit ga­rantiert, um ganze Anwendungen im Browser offline verfügbar zu machen. Was Google hier mit Applikatio­nen für den Chrome Browser bei den Offline-Modi von Google Docs (Abbildung 1), Gmail und Google Calen- dar Vormacht, ist auch für Notizanwendungen wie Evernote verfügbar. An dieser Stelle ist jedoch hinzuzu­fügen, dass diese nur mit der kostenpflichtigen Premi- umversion für iOS, Android und Windows Phone funk­tionieren. Der Application Cache wird mit JavaScript aktualisiert und verwaltet, setzt aber zusätzlich eine Manifest-Datei auf dem Webserver voraus, die die zu cachenden Dateien auflistet. Ohne die Manifest-Datei würde der Application Cache nicht funktionieren (sie­he Abbildung 2). Da der Cache ohne Ablaufdatum funktioniert, sollte man sich über das Konzept dahinter im Klaren sein, sonst werden Webseiten im Browser nach einem Update möglicherweise nicht mehr oder nicht richtig aktualisiert.Beim Application Cache sind zwei Zustände zu unter­scheiden:

1 . Der Application Cache ist noch leer bzw. noch nicht angelegt und der Cache ist gefüllt und muss aktuali­siert werden.2. Der Application Cache geht davon aus, dass die Än­derungen, die gemacht werden, vom Benutzer kom­

men und nicht vom Server, weshalb er auch den Na­men „Offlinecache" bekommen hat.Eine Aktualisierung ist natürlich möglich, es sind aber zwei Seiten- oder JavaScript-Aufrufe nötig. Der Erste dient dazu, den Cache zu aktualisieren, der zweite hat die Funktion die Daten aus dem Cache auch anzuzeigen. Beide Speichermöglichkeiten, Web Storage und Appli­cation Cache, sollen hier betrachtet werden. Beide wer­den von allen gängigen Browsern unterstützt. Der Appli­cation Cache steht allerdings erst im Internet Explorer ab der Version 10 zur Verfügung, welcher nun aber auch für Windows 7 downloadbar ist.

IndexedDB

Bei IndexedDB ist die Browserunterstützung recht gut fortgeschritten, sie ist aber noch nicht ganz gegeben und soll deshalb hier auch nicht im Detail erläutert wer­den. Auch wenn die beiden Browser Chrome und Safari die gleiche Browserengine Webkit verwenden, funktio­niert IndexedDB im Safari„noch" nicht. Gleiches gilt auch für Opera. Chrome und Safari kommen zusammen auf etwa fünf bis sechs Prozent Marktanteile, was zwar nach wenig klingt, aber dennoch sollten die beiden Webkit- Browser nicht vernachlässigt werden, zumal ihr Marktan­teil in den letzten Jahren recht konstant blieb. IndexedDB lässt sich bei den NoSQL Speicherarten ein- ordnen und unterstützt die Suche nach Indizes. Der Vor­teil ist eine sehr schnelle Suche nach Objekten, die ei­nem bestimmten Feld entsprechen, ohne jedes Objekt

04/2013 webdesigner 15

RATGEBERWeb Storage, Application Cache und IndexedDB

im Speicher zu durchlaufen. Zu den Nachteilen zählt im Moment noch, dass die Browserimplementierungen un­terschiedlich und miteinander inkompatibel sein kön­nen. Dennoch wird derTechnologie ein großes Potenzial vorausgesagt. IndexedDB-lnteressierte können sich un­ter,http://nparashuram.com/lndexedDB/" näher mit der Materie vertraut machen.

Für Web SQL ist von Seiten vonseiten der W3C Vorsicht geboten, da das Konsortium die Spezifikation nicht wei­ter pflegen und entwickeln möchte. Mit Web SQL sollte die SQLite-Datenbank in den Browser fest eingebaut werden, um dann per SQL-Befehle Daten lesen und sch­

reiben zu können. Mozilla bekannte sich beispielsweise, hauptsächlich aus philosophischen Gründen, gegen eine Verwendung von SQL im Client per JavaScript-API und stuft das Vorhaben in verschiedenen Gesprächen auf dem eigenen Mozilla Campus, mit Microsoft oder mit dem ChromeTeam als besonders anspruchslos ein. Un­ter anderem verweist man dort auf die umstrittene Be­nutzung von SQL auf Webservern, gerade im Zusam­menhang mit der Speicherung von großen Datenmengen im Browser. Es müsse erst eine geeignete SQL-Implementierung gefunden werden, welche die be­nötigte Funktionalität im Browser mit sich bringt ohne einen bestehenden Standard, wie SQLite, ändern zu müssen. Was z.B. mit IndexedDB zutrifft, („https:// hacks.m ozilla.org/2010/06/beyond-htm l5-databa- se-apis-and-the-road-to-indexeddb/")

Web SQL

Warum Offline-Daten praktisch sind

Mit den zwei aktuell wichtigsten neuen HTML5-Standards, dem Web Storage und dem Application Cache, werden vom Internetbrowser neue Speichertechniken angeboten, die von allen gängigen Browsern unterstützt werden. Die folgende Übersicht zeigt, ab welcher Version der jeweilige Browser welchen Standard unterstützt.

Chrome für AndroidFirefox für Android 15.0 15.0

Opera MinOpera MobileBlackberry Browser

Insgesamt lässt sich sagen, dass die Speicherarten ausgereifter sind und ein Caching zulassen, ähnlich wie sie bisher auf dem Server eingesetzt wurden. Ein möglicher Vorteil von Zwischenspeicherung im Browser ist, dass der FITTP- Aufruf (Web-Cycle) nicht mehr zwischen Server und Browser liegt und damit wegfällt. Im Falle des Application Caches ist dieTechnik so stabil konzipiert worden, dass sogar davon ausgegangen werden kann, dass alle benötigten Daten aus dem Cache geholt werden können und vorrätig sind. Dies gestattet eine temporäre Trennung vom Brow­ser (bzw. Browsercache) und Server, wodurch Offline-Anwendungen ermöglicht werden.

webdesigner 04/2013

RATGEBERWeb Storage, Application Cache und IndexedDB

Vorteile für Offline-Anwendungen

Für Offline-Anwendungen gibt es mehrere verschiedene Gründe:

•Im Flugzeug ist es nicht erlaubt eine mobile Verbin­dung zum Internet zu nutzen. Für viele Passagiere ist es praktisch, wenn sie Anwendungen trotzdem nutzen können, die sie sonst auch zur Kommunikation verwen­den, und diese nach dem Flug leicht synchronisieren können. E-Mail-Entwürfe, Artikel, Newsletter, Webaus­schnitte können im Offlinespeicher abgelegt werden und arbeiten quasi wie mit vorhandener Internetanbin­dung.

•Auf Konferenzen, Open-Air-Veranstaltungen oder in freier Natur ist die Netzverbindung oft schlecht oder unter Umständen überhaupt nicht möglich. Bestimmte Daten, wie Telefonnummern oder Wegbeschreibun­gen, oder aber auch bestimmte Programme können mit der neuen Technik in diesen Situationen verfügbar gemacht werden.

• Auch digitale Notizzettel, Einkaufzettel oder ToDo-Lis- ten können problemlos auch ohne Netz mit einer Web- Anwendung erstellt werden und bei nächster Gelegen­heit über das Internet synchronisiert werden, sobald eine Verbindung wieder verfügbar ist.

•Viele Mobilfunknutzer haben volumengebundene Tari­fe oder wollen den mobilen Internetzugang wegen ho­her Roaming-Gebühren nicht oder nur eingeschränkt nutzen. Viele Aufgaben lassen sich dank Web Storage und Application Cache ohne Netzzugang erledigen.

•Zunehmend werden auch professionelle Anwendun­gen wie etwa Bildbearbeitungs- oder DTP-Software als mietbare Cloud-Lösungen angeboten. Die temporäre Unabhängigkeit von einem Internetzugang steigert den Nutzen solcher Dienste für den Anwender unge­mein.

Bisher konnte sich die Kombination aus Application Cache und Web Storage in den oben genannten großen Anwendungen behaupten. Es ist aber auch zu sagen, dass Google Does - Offline Does nur im Chrome-Brow- ser als Desktopinstallation oder in den Chrome Books von Google unterstützt wird. Der Chrome-Browser für Android sowie andere Browser erkennen die Funktion noch nicht.

Auch stellt sich die Frage, warum es sich eigentlich um zwei Technologien handelt. Das hat vor allem damit zu tun, dass nach wie vor eine Kommunikation zwischen Browser und Server stattfinden muss, um das offline Ar­beiten zu gewährleisten. Zum einen kommen die benö­tigen Daten für eine Anwendung von einem Server, wie etwa HTML-, CSS-, JavaScript-Dateien oder Bilder. Zum anderen macht der Benutzer Eingaben in Form von bei­spielsweise Formulardaten, in Textfeldern, Checkboxen oder Dropdown-Auswahlmenüs. Für beide Arten von Daten gibt es eine eigene Speichermethode im Browser bzw. im Browser und auf dem Server, denn der Applica­tion Cache wird eigentlich im Webserver definiert und geändert, wo er schließlich vom Browser aktualisiert wird. Der Web Storage ist dagegen für die Benutzerein­gaben zuständig.

Der Vergleich von Web Storage und Cookies

Der Web Storage wird oft mit Cookies verglichen. Und ähnlich wie Cookies können sitzungsabhängig oder do­mänenspezifische Key/Value-Daten gespeichert wer­den. Ein großer Vorteil ist aber, dass sich beim Web Sto­rage Speicherbereiche nicht mehr gegenseitig stören können. Im Zuge der Offlineverhaltensweisen, z.B. das lokale Speichern von Werten für die spätere Verbin­dungsaufnahme mit dem Server, verhält sich der Web Storage eindeutiger, da er keinen Informationsverlust duldet. Gerade bei mehreren offenen Tabs oder Fenstern kann es bei Cookies leicht passieren, dass das gleiche Cookie gelesen und beschrieben wird, so dass zum Bei­spiel beim Onlineshoppen der Warenkorb plötzlich leer ist oder aber zwei gleiche Artikel hinzugefügt wurden. Der Speicherbereich unterscheidet sich aber auch grundlegend von dem der Cookies. Es werden keine Da­ten zum Server geschickt, wie es bei Cookies der Fall ist, noch laufen die Daten in einem lokalen Speicherbereich jemals ab. Im Gegensatz zu den Cookies ist die JavaScript­API umfangreicher und kann so leichter auf einzelne Da­ten zugreifen.

Die API-Schnittstelle sieht folgende Eigenschaf­ten und Methoden vor:

.getltem(„key")Ruft dem Key zugeordneten aktuellen Wert ab.

.setltem(„key" „value")Legt ein KeyA/alue Paar an.

.lengthRuft die Länge der Key/Value Liste ab.

Caching Techniken verwenden

04/2013 webdesigner

RATGEBERWeb Storage, Application Cache und IndexedDB

.remove(„key")im iE: .removeltem(„key")Löscht ein KeyA/alue Paar.

.dear()Entfernt alle KeyA/alue Paare.

.remainingSpaceRuft den verbleibenden Speicherbereich ab, in Bytes.

Zudem gibt es auch Events:

,storage' im iE:,onstorage'Wird an document-Object ausgelöst, wenn ein Speicher­bereich geändert wird. Alle Dokumente, die denselben Sitzungskontext nutzen und die Dokumente, die mo­mentan eine Seite von derselben Domäne anzeigen, empfangen das Ereignis.

Der Zugriff mit JavaScript ist folgender:

window.addEventListener(,storage', function(event){ console.og(event.key + „ wurde geändert von „ + event. oldValue + „ in „ + event.newValue);}, false);

if(typeof(Storage)!=="undefined"){

// Das localStorage und sessionStorage Objekt wird unterstütztlocalStorage.setltem(„name", „Simone"); localStorage.setltem(„name", „Susanne"); var strName = localStorage.getltem(„name");}else{// Kein Web Storage Support!}

Um daraus eine Offline Anwendung zu machen, sind die ,online'- und ,offline'- Events sowie die navigator.onLine-Property wichtig. Speichert man also den aktu­ellen Verbindungsstatus, sollte die Anwendung im „online"-Fall alle Benutzerdaten unverzüglich zurück zum Server senden. lm„offline"-Fall gehen alle Benutzer­daten in den Web Storage. Ob es sich dabei um localSto­rage oder sessionStorage handeln soll, muss sich der Webentwickler überlegen. Hierbei ist die Überlegung wichtig, ob die auch zur Verfügung stehen sollen, wenn der Browser geschlossen wird, oder ob sie so lange ver­fügbar sind, bis die Seite bzw. der Tab geschlossen wird. Außerdem muss eine Abfrage eingerichtet werden, die bei der nächsten Internetverbindung prüft, ob eventuell

vorhandene Benutzerdaten im Web Storage vorhanden sind, worauf diese Daten dann mit den Daten auf dem Server synchronisiert werden können. Also immer die Daten vom Server und die vom Web Storage anzeigen und beim Übertragen zum Server die Daten aus dem Web Storage nicht vergessen zu übertragen und dann aus dem Web Storage zu löschen.Um beide Zustände (online/offline) zu testen, gibt es im Firefox mit „Datei -> Offline arbeiten" eine Funktion, mit der die Internetverbindung unterbrochen werden kann.

window.addEventListener(,offline', function(event) { console.log(„Browser ist jetzt offline.");}, false);

window.addEventListener(,online', function(event) { console.log(„Browser ist jetzt online."); var request = new XMLHttpRequestO; request.open(,get', ,save.php?query=' + localStorage. getltem(„query"), true); request.send(null);}, false);

if (navigator.onLine) { console.log(„Browser ist online.") var request = new XMLHttpRequestO; request.open(,get', ,save.php?query=data', true); request.send(null);} eise {console.log(„Browser ist offline."); localStorage.setltem(„query", „data");

Die Vorteile des Application Cache

Der Application Cache hat die Besonderheit, dass die Implementierung bzw. die Programmierung client- und serverseitig erfolgt, wie in Abbildung 2 gezeigt wird. Serverseitig liegt die Manifest-Datei, in der alle Dateien aufgelistet sind, die gecached werden sollen. Diese Manifest-Datei kann mit beliebigen serverseiti­gen Programmiersprachen geändert werden. Eine Än­derung der Datei ist zwingend erforderlich, selbst wenn es nur um einen geänderten Versionskommentar handelt, der besagt, dass aktualisierte Dateien vom Cli­ent angefordert werden können. Damit der Client mit der Manifest-Datei umgehen kann, muss sie im rnani- fest-Attribut des html-Tags stehen. Dadurch weiß der Browser, wo er die Manifest-Datei findet, kann sie ausle- sen und alle darin stehenden Dateien cachen.

chtml manifest="example.manifest">

webdesigner 04/2013

RATGEBERWeb Storage, Application Cache und IndexedDB

Hier ist auch anzumerken, dass der Application Cache ein Offlineverhalten zeigt, das besagt: Wird die Mani­fest-Datei mithilfe des manifest-Attributs referenziert, müssen immer alle benötigten Dateien im Applica­tion Cache stehen. Es wird dann nämlich nicht ver­

sucht, Dateien vom Server anzufordern und nachzula­den. Wenn es sich um Background-Images, CSS-Files oder ähnliche Dinge handelt, gibt es anstatt 200-0« Statusmeldungen (wie in Abb. 3 zu sehen) nur 404-Fehlermeldungen. ▼

o R esources | N e tw o rk Sources ( j t T im e lin e ^ P rofiles A u d its C on so le

N a m eP ath M e th o d S ta tu s

T e x t T y p e In i t ia to r S izeC o n te n t l$rro

<>c a r .h tm l/A p p C a c b e

CET2 0 0o k

te x t /h tm l O th e r (fro m cach e)4m s4 m s ^

s ty le s h e e tx s s/A p p C a c b e

GET2 0 0OK

te x t /c s sc a r .h tm l.4P a n e r

(fro m cache)0m s0 m s

m a in js__Ü /A p p C a c h e /s c r ip tt

CET2 0 0OK

a p p lic a t io n /p v a s c r .p tc a r.h tm l; S Parser

(fro m cach e)0 m s0 m s

c a rg p g 2 0 0 c a r.h tm l; 18(fro m cache)

9 m sCET

OK•m a g e /jp e g

Parser 9 m s j* M l

/A p p C a c h f / im *qr\

4 r t q u t i d 1 0 8 I r i n i f i r r t d 1 3 6 m » (o n lo a d : 3 8 m s , D O M C o n te n tL o a d e d : 2 8 m i )

e . >2 Q . • Q O D o c u m e n ts S ty le s h e e ts Im a g e s S c rip ts X H R F o n ts W e b S o c k e ts O th e r

Alle Daten werden aus dem Cache geladen.

Da es sich um einen relativ neuen Mimetyp handelt, sollte man prüfen ob er in die Konfigurationsdatei auf­zunehmen ist unter[Laufwerksbuchstabe]:\xampp\apache\conf\mime.ty-pes:

text/cache-manifest appcachetext/cache-manifest manifest

Alternativ kann man die .htaccess-Datei mit AddType modifizieren[Laufwerksbuchstabe]:\xampp\htdocs\forbidden\.ht-access:

AddType text/cache-manifest .manifest AddType text/cache-manifest .appcache

Die eigentliche Dynamik findet auf dem Server statt, dort liegt die Manifest-Datei. Anstoß von Cacheände­rungen gehen von Änderungen dieser Manifest-Datei aus. Entweder man ersetzt sie mit neuen Inhalten, än­dert sie oder löscht dort Dateien mit einer Webserver- programmiersprache, wie PHP oder C#.

<?php$add = „styles.css";Sdelete = „jquery.js";SAppCache = file ( „example.manifest");$fp = fopen ( „example.manifest", „w "); if($fp){

flock ( $fp, 2);$nl = ehr (13 ). ehr (10);

foreach ( SAppCache as $line) {if (strpos ( $line, ,#') === 0) //

startsWidth #: revision {

fputs ( $fp, „# „. date ( „d-m-Y H:i:s"). $nl); //update

else if (strpos ( $line,,CACHE:') !== false){

fputs ( $fp, ,,{$line}" );fputs ( $fp, ,,{$add}". $nl); // add new line

}

else if (strpos ( $line, .NETWORK:') !== false){

//... same as CACHE: for NETWORK: and FALLBACK:

}

else if (strpos ( $line, Sdelete) !== false){

//delete: not add}

else{

fputs ( $fp, ,,{$line}"); // no change: copy}

echo „Applicatio Cache wurde aktualisiert.<p>"; flock ( $fp, 3 ); fclose ( $fp );

} else {

04/2013 webdesigner 19

RATGEBERWeb Storage, Application Cache und IndexedDB

echo „Datei konnte nicht zum"; echo „ Schreiben geöffnet werden";

}

Die Dateien lassen sich relativ oder absolut angeben. Es kann also die jQuery CDN Adresse verwendet werden, um den Application Cache zu füllen.

Die Manifest-Datei kann die folgenden Einträ­ge besitzen:

CACHE:Alles was gecacht werden soll. Keine Teilpfade.

NETWORK:Alles was nicht gecacht werden soll. Überschreibt CACHE. Es sind Teilpfade erlaubt im Gegensatz zu CACHE.

FALLBACK:Ersatzdatei. Ist die Anwendung offline, werden diese Erstzdateien angezeigt. Teilpfade erlaubt, wie: / Offline, html, mit / für root Ordner.

Beispiel Manifest-Datei:

CACHE MANIFEST

CACHE:index.htmlhttp://ajax.googleapis.eom/ajax/libs/jquery/1.7.0/jquery.min.js

FALLBACK:Offline.html

Soll der Cache refreshed werden, um beispielsweise neue Seiteninhalte oder ein geändertes CSS-File zu la­den, muss immer die Manifest-Datei geändert werden. Für den Fall dass die geänderte Datei nicht umbenannt werden soll, da sonst auch keine neuen Dateien hinzu­kommen oder entfernt werden, kann man sich eines Tricks bedienen und Versionskommentare in die Datei überschreiben, wie zum Beispiel:

# new version at 2012-12-30_14:13:11.

Damit der neu geladene Cacheinhalt auch auf der Seite angezeigt wird, muss man die Seite neu laden mit„win- dow.location.reloadO . Ist die Manifest-Datei geändert worden und wird der Cache neu geladen, wird immer der ganze Cache neu geladen, wie er von der Manifest

Datei beschrieben wird (vergleiche Abbildung 4). ▼

^ I k r w n s ^ ftrw u rio ^ S f lw t 0 Timc'inc ^ Flo'i'«) [ ^ ConxAe

Creatu n Application Cache « ith aarufest http.//localtost/AppCache/Ae«{ache.app<a<*eApplication Cochc CKccWmg cv«*t Application CiChaApplication lach« *»r©fir«st «voM (• ot Kl loci m o i t / A p p i . H O o*vaappluannn P ro fr# « #M8J8I < 1 ftf Hl Mr«*-//lnfalhA*r/A|»f»rafh#//ar.h»«lAptrluaUu»» Cad»c P » t* rc » c»cwl <2 ul 81 tiLla.//luv.«Htm L / A t f t t Ca i i a c / l i La lApplication Coch« Pr& crc» ewent <3 of 0) Ktt0;//locaUt4»t/AppCac*</scriot>/»aift.j jAppli<atiO* Cachc fro«rc»» Cv«M <4 of 8) H t l;/ / Ig M lte ll/ A M C a tfc / lU lt lh S f il i 111Application Cach« Pro fratt «v«M (S ot 81 l» tf»// lo ca lh—t/A—CaOw/iaaaaa/loaa. i map p u o tion lacna «v*n» <* of 8) Mtp'//local*»ott/apptacn#/i*a*ai/car.jpfappitrarinn farn# Prn$r*<< <7 nt Mt httft;//1nraltecr/Aftprarn*/A vw lu iU u n Cdcltc P ivg rc»* e*cn l <8 ul 81 Application Cach« Cachcd event

Gefeuerte Events beim Cache aktualisieren.

Erst durch die Änderung der Manifest-Datei kann der An­wendungscache im Browser aktualisiert werden, mit den Anweisungen „window.applicatoncache.updateö" und „.relaodO". Soll kein„.reload()" verwendet werden, da die Seite sonst unschön neu geladen wird, kann „.swap- CacheO" benutzt werden. Mit „.swapCacheO" wird der neu geladene Seiteninhalt noch nicht angezeigt. Es wird nur der Cache dabei aktualisiert, der beim nächsten Sei­tenwechsel (oder„F5") angezeigt wird. Das„.swapCache()" wird genauso mit bei einem Neuladen der Seite mit F5 oder mit der Anweisung „window.location.relaodO" er­reicht und kann weggelassen werden, wenn eines der beiden genannten Ereignisse eintritt.Damit der neu geladene Seiteninhalt auch angezeigt wird, würde man eher auf das „.reloadO" zurückgreifen, was bei „.swapCacheO" noch nicht der Fall ist.Alternativ kann aber auch DOM-Manipulation eigensetzt werden, um einen „.reloadO" zu vermeiden. Denn auch AJAX-Aufrufe bedienen sich voll aus dem Application Cache, vorausgesetzt das html-Tag besitzt eine gültige Manifest-Datei als manifest-Attribut.

Beim Befüllen des Caches können einige Statusevents gefeuert werden, deren Event-Typ in der Handlermetho- de abgefragt und unterschieden werden können.

window.applicationCache.addEventListener(,checking'; handleCacheEvent, false);

window.applicationCache.addEventListener(,downloading', handleCacheEvent, false);window.applicationCache.addEventListener(,progress', handleCacheEvent, false); window.applicationCache. addEventListener(,updateready', handleCacheEvent, false);window.applicationCache.addEventListener(,error', handleCacheError, false);

window.applicationCache.addEventListener(,noupdate', handleCacheEvent, false);

webdesigner 04/2013

RATGEBERWeb Storage, Application Cache und IndexedDB

function handleCacheError(event) { console.log(„State is: „ + window.applicationCache.

status + „ - Eventtype: „ + event.type);}

function handleCacheEvent(event) { var strCacheStatus = „Not supported"; if (window.applicationCache) {

var oAppCache = window.applicationCache; switch (oAppCache.status) {

case oAppCache.UNCACHED: strCacheStatus = „Not cached"; break;

case oAppCache.lDLE: strCacheStatus = „Idle"; break;

case oAppCache.CHECKING: strCacheStatus = „Checking"; break;

case oAppCache.DOWNLOADING: strCacheStatus = „Downloading"; break;

case oAppCache.UPDATEREADY: strCacheStatus = „Update ready"; window.applicationCache.swapCacheO; window.location.reloadO;break;

case oAppCache.OBSOLETE: strCacheStatus = „Obsolete"; break;

default:strCacheStatus = „Unexpected Status ( „ +

oAppCache.status.toStringO + „)";break;

}

}

console.log(„State is: „ + strCacheStatus + „ - Eventtype: „ + event.type);}

Dem Anwendungscache stehen Inhalte nur pro Website zur Verfügung, im Gegensatz zum Browsercache, der pro Browser gilt und immer allen Webseiten zur Verfügung steht (siehe Abbildung 5). ▼

Der Application Cache ist im Grunde also nicht schwerzu verstehen und anzuwenden, besitzt aber einige Tü­cken, die genau betrachtet werden sollten. Deshalbeine stichpunktartige Auflistung mit Fehlerquellen:• Im Application Cache gecachte Seiten werden nur

neu geladen, wenn die Manifest-Datei geändert wur­de.

• Alle Ressourcen einer Seite, wie Images, externe CSS Dateien, etc., müssen für die Seite im Application Cache gespeichert bzw. in der Manifest Datei stehen, sonst kann es sein, dass sie der Browser nicht lädt bzw. findet.

• Eine HTML-Seite, die das manifest-Attribut enthält, muss nicht noch einmal im Manifest selber aufge­führt sein, um im Cache zu landen.

• Deaktiviertes JavaScript ist für die Anwendung töd­lich, da der Application Cache nicht mehr aktualisiert werden kann! Auch das "Seite aktualisieren" (2x: Cache laden, anzeigen) hilft ohne aktivem JavaScript nichts. Es muss zwingend geprüft werden, ob Ja­vaScript aktiv ist, sonst sollte man auf jeden Fall einen Benutzerhinweis einrichten, wie es Google Docs bei deaktiviertem JavaScript macht.

• Fehler beim Laden, wie etwa 404-Fehler, die durch falsche Einträge in der Manifest-Datei mit falschen Dateinamen oder Dateiendungen, gelöschte Bilder und ähnlichem verursacht werden, bricht den ge­samten Ladevorgang ab. Was im günstigsten Fall so viel heißt wie, dass der Application Cache erst gar nicht angelegt wird. Im schlimmsten Fall kann auch hier wieder der Application Cache nicht mehr aktua­lisiert werden.

• Ein Unterschied im Verhalten, den es zu beachten gilt, ist, ob die Seite angezeigt wird und noch kein Cache angelegt ist oder ob der Cache schon ange­legt ist und aktualisiert werden soll. Ein Beispiel: Wur­de die Manifest-Datei geändert, wird die Seite mit dem alten Cache angezeigt und gleichzeitig der neue Cache geladen. Die Seite muss reloaded wer­den, um den neuen Cache auch anzuzeigen.

• Wichtig ist aber, dass bei einer HTML-Datei das mani- fest-Attribut im HTML-Tag vergeben wurde. Es müs­sen alle externen Ressourcen der HTML in der Mani- fest-Datei stehen, damit sie im Application Cache

o Ü*/r*r.<í i ( j ) NctWO* ^ S o u rc e s ^ jT i r o f l .n « ^ Proles ^ A u d i t t ^ Conto*

* Cu *•I jWebSQt* I irt0««*aDB► £ local Storage fr ¿ ! S*tl«OA

► %Cook*i? J Appt<4t>o* Cach«T i ï AopLJCf« ippcjcn«

fei KrmJ)

Hn» / AtçCéchc/AeeCftc»* j * pcacH<TypeM W ctt f l «

mtpy/iou*cst/A3ecxr#;car mmj IX PKK •/V»btto '/locafcosi/AocCache/imaoes/HimJKono Cxofccft 1.22ahtt» 7/1oc**«5i/AteCacht / images / HavtC. 0«9 tupfte* 129.3*1nno7/»oa«o«‘Wtacf>e/ifTuçej,cif r*09 U p M lZ V .* iUhno //>ouftosi/AdtiCxhe/imiots/looo.iDQ Dtofick 76.50Uhup UM1«r EMpKA 1711Mtp //ioc4iest/AopCjcr>e/scripts/ruJn.ji tXpBCft 54*1

1 http //locafcost/AeoCache.itvieihertcis brpidl

Die Entwicklerkonsole im Chrome und Safari bieten unter Ressource sehr viel Kontrollmöglichkeiten

04/2013 webdesigner

RATGEBERWeb Storage, Application Cache und IndexedDB

gespeichert werden können, da sich der Application Cache dann wie ein Offlinecache verhalten soll.

• Die Application Cache Events werden nur dann ge­feuert, wenn das HTML-Tag der Webseite das mani- fest-Attribut mit Angabe des Namens der Manifest- Datei enthält.

• Extern eingebundene Dateien wie CSS, Images und Scripte werden nicht automatisch im Application Cache gespeichert.

Mit dem Chrome Browser kann der Application Cache einfach über die URL-Adresszeile erfragt oder gelöscht werden („chrome://appcache-inernals/", vergleiche

Abbildung 6). Die gute Unterstützung kommt nicht von ungefähr, denn Google bietet auch in vielen eige­nen Anwendungen einen Offlinemodus an.Für den Firefox gibt es das„CacheViewer Continued Ad- dOn". Allerdings muss man wissen, dass einzelne Datei­en im Application Cache den Eintrag „Device=offline" haben. Löschen lässt sich der Application Cache im Firefox unter „Alt -> Extras -> Einstellungen -> Erweite­rungen -> Netzwerk".

Für den Safari muss man das Menü für Entwickler akti­vieren, unter„Safari -> Einstellungen -> Erweiterungen -> Menü Entwickler in der Menüleiste anzeigen", und hat dann die gleichen Möglichkeiten wie im Chrome, es sei denn die Abfrage über die Adressleise ist nicht implementiert.

Application Cache überwachen

j A pp C ache In te rn a ls x ^ O f f l f l« - G o o g le D rrve x

C c h ro m e ://a p p c a c h e -in te rn a ls

Manifest:

RemoYfi VHtaEnüitt• S ize 3 .3 M B• Creation Tim e Sam stag. 12. Januar 2013 20.47:11• Last Update Tim e: Sam stag. 12. Januar 2013 20 47:11• Last Access Tim e Sam stag. 12. Januar 2013 20 49 11

Manifest: https V/docs googte com /olfiin^offlm e/m am fest

FtemoYfl Yiowfntrl«• S ize: 242 kB• Creation T im e Sam stag. 12. Januar 2013 20.47:01• Last Update Tim e Sam stag. 12. Januar 2013 20 47 04• Last Access Tim e Sam stag. 12. Januar 2013 20 47:41

Manifest: N J j? g 7 /^ g .g g g g l^ .g g n V a M rg x x /Q (? ljn ^ m ^ fO T t.? Q g ^ w 7 1 fl2 6 b 3 b Q M lM »

Rem ove View Entries

• S ize: 82 9 kB• Creation Tim e Sam stag, 12. Januar 2013 20 47 05• Last Update Time: Sam stag, 12. Januar 2013 20 47 05• Last A ccess Tim e Sam stag. 12. Januar 2013 20 47:42

Manifest:

BfltnoYü Vxm Entriss• S ize 1.9 MB• Creation T im e Sam stag. 12. Januar 2013 20 47 05• Last Update Tim e: Sam stag. 12. Januar 2013 20:47:05• Last Access Time: Sam stag. 12. Januar 2013 20 47 42

Manifest m u » . / / i > T y g . l m A n ä i g a l

Bernov.e Yh>w Entfto• S ize 6 9 kB• Creation Tim e Sam stag. 12. Januar 2013 20 47:05• Last Update Time: Sam stag, 12. Januar 2013 20 47 05• Last Access Tim e Sam stag. 12. Januar 2013 20 47:42

So einfach wie m it dem Chrome Browser lässt sich der Offline Cache (Application Cache)m it keinem anderen Browser überwachen.

Fazit: Der Applicaton Cache wird auf dem Ser­ver per Manifest-Datei vorkonfiguriert und be­nötigt Root-Rechte. Er muss je nach Bowserein- stellung auch vom Internetbenutzer bestätigt werden. Web Storage ist eine rein clientseitige JavaScript-API und ist auf die aktuell weitver­breitete Browserunterstützung angewiesen. Wie der Web Storage zeigt der Application Cache ein Offlineverhalten, das beim Application Cache noch deutlicher wird. Will man hier Problemen aus dem Weg gehen, sollte der Cache erst ange­fordert werden, wenn der Benutzer offline gehen will. Mit den neuen Standards bekommen die Browser vollwertige Möglichkeiten, um Daten auf dem Client zuverlässig und über Sessions hinweg zu speichern. Dabei gilt noch keiner der Standards als wirklich fertiggestellt, obwohl alle aktuellen Browser die Technik bereits unterstüt­zen. Echte Offline-Applikationen für mittlere und größere Projekte zu programmieren werden die eleganten Web-APIs nach wie vor an ihre Gren­zen bringen. Man muss auch einzelne Standards untereinander kombinieren, weshalb die Wart­barkeit, Fehleranfälligkeit und Cross-Browser- Kompatibilität dem Entwickler viel abverlangt. Caching birgt auch Fehlerquellen, meist sind es aber HTML- oder PHP-Programmierfehler, wie falsche Linknamen und Dateiendungen oder JavaScript-Fehler, die das Caching fehleranfällig machen. Jedoch ist der Nutzen dieser Anstren­gungen klar erkennbar, werden doch Offline-Ap­plikationen immer mehr in State of the Art Web­anwendungen verwendet oder bei den teureren Premium-Apps angeboten.

22 webdesigner 04/2013

plentymarkets' S - C o iu L u Z r c e , u n e Ic h e s u r if l.

Höher. Schneller. Weiter.Die perfekte E-Commerce-Komplettlösung

Mit plentymarkets lassen sich alle Prozesse des Online-Handels komfortabel organisieren, effizient steuern und in Echtzeit verwalten.

plentymarkets wird von über 2.500 Unternehmen für den Online-Handel genutzt.

Webshop/Multichannel

Cloud Hosting

Software­wartung

Warenwirtschaft/Statistik

Payment/Faktura

Beratung / Support

L Logistik/Fulfillment

Das plentymarkets-Prinzip: E-Commerce as a Service

CRM

www.plentymarkets.com

RATGEBER

Die Auswahl an Shopsystemen ist inzwischen unüberschaubar geworden. Wir haben uns insgesamt 18 Shopsysteme von sieben verschiedenen Anbietern näher angeschaut und sie auf ihre Stärken und Schwächen hin untersucht.

er einen Online-Shop betreiben möchte, steht vor der großen

Frage, welches Shop-System für das jeweilige Pro­jekt am besten geeignet ist. Die meisten Herstel­

ler bieten verschiedene Produkte an, die sich oft nur in einigen wenigen Punkten unterscheiden, da in vielen Fällen bereits die Standard-Installation über zahl­reiche wichtige Features verfügt. Hier heißt es dann ge­nau hinsehen, um den optimalen Anbieter, beziehungs­weise das optimale Shopsystem zu finden. Grundsätzlich wird zwischen drei Modellen von Online-Shopsystemen unterschieden:

*1 Open Source System\ J I -Bei den Open-Source-Sytemen fallen keine Kosten für die Installation an, da diese in der Regel von den Shop-Betreibern selbst durchgeführt werden muss. Der Shop wird auf einem eigenen Server installiert. Be­zahlt werden muss jedoch in aller Regel für Support und Updates.

/"V Mietshop\ J ^ - Bei dieser Variante wird die gesamte technische Struktur von einem Provider zur Verfügung gestellt und es ist eine monatliche Gebühr fällig.

/"V Q Kaufshopv J Sie zahlen eine Lizenzgebühr und können in­nerhalb kürzester Zeit mit Ihrem Shop auf Ihrem eigenen Server loslegen.

In unserer Übersicht sind die Open-Source-Lösungen und die Kaufshops in der Überzahl. Insgesamt haben wir uns mit 18 Produkten von sieben verschiedenen Herstel­lern beschäftigt. Es werden acht Open-Source-Lösun- gen, sechs Kaufshops und zwei Mietshops vorgestellt. Die Hersteller sind Magento, Zaunz Publishing, Plenty- markets, Gambio, Shopware, Oxid e-Sales und Modfield. Bei allen Anbietern hat man die Möglichkeit, sich einen Demoshop herunterzuladen, um sich so im Backend ei­nen „Live-Eindruck" des jeweiligen Shopsystems zu ver­schaffen.

Cosmoshop

Wie viele andere Anbieter bietet auch die in Süddeutsch­land ansässige Firma Zaunz Publishing mit ihrem Shop­system Cosmoshop mehrere „Ausbaustufen" ihres Shop­systems an. Diese nennen sich„eStart", ePRO,„eMAX und „Mandant". Die Kaufshopsysteme von Cosmoshop war­ten mit einer Besonderheit auf, da man das System ent-

Shopsysteme im Vergleich von Tobias Henke

Shopsysteme im Vergleich

24 webdesigner 04/2013

RATGEBERShopsysteme im Vergleich

weder kaufen oder sich für einen Mietkauf entscheiden kann. Die Lizenzkosten liegen zwischen 795 € und 11995 € (für die Version „Mandant"). Für den Mietkauf sind zwi­schen 89 und 585 € pro Monat fällig. Die Kosten für den Support werden prozentual nach dem Kaufpreis berech­net, was eine Besonderheit im Vergleich zu anderen Sho­psystemen darstellt. Die monatlichen Support-Kosten richten sich nach dem Produkt und dem Kaufpreis inklu­sive aller hinzu gekauften Extras. Sie liegen zwischen 1,5% und 2,5% der Anschaffungskosten Schon in seiner Grundfunktion bietet Cosmoshop sehr viele interessante Features und Funktionen an, wie bei­spielsweise eine Facebook-Einbindung und einen Link­manager. Auf der Cosmoshop-Website bietet der Her­steller einen Überblick über die Funktionen seiner Produkte. ►

Version eSTART

Starttn S it 9tr o rttnt B u tw ts s rrwt d e s * ' W f sicn un».orr^o«rt uod »cftneU E n Upg»*dt auf h o fw t V»rs*ontn istmfepcfi

£ r* ;• Hrçh/içhts V tfjjo n

► ws zu 250* 20c*n*ns «ttj► 1 z«r**>0ss<taast«itt +«!*<*

OptKXHl

► Kun3*<Tr*rvi arturvg

► Fr#rrv3»pf*th*n► SO0f4çrtt*t

fr Dthtoiç *it<t vanjnîen

► ßtsieibtrftanuno► TemcüÄesfStem► NewsleBers-rStcrn

Sajtaötctn► 2ahfcr>gsscfvrtttr*!i«n► Cfos s-Stw»g und Zut>#r»o*

U*Wisttrtiiink»o*► tmp«rt-Æ>p4<tscftnmst*ftt► uvm

Version ePRO

Proftsswtfct AÄfOgridiOSwng fur 5«s zu 1000 ¿rtktt J«c«r^ertupgra<j4Ddi &£* auchflviibtl trwttt«C*r

ru&atä>cft« H»gWigf*s i*sor .'•ft»on► t#s 1000 ArtMl nog*K** 4 O O flM lrtS in id

► 2 ZaNooosscfwvasttlitn. *tUft opftonjl

► Gutsch«tf*ffwafeing inWHier »orvvfrn CutKftW« m*nM#0 OöH duct\ autO'Tttfesiert trztu# *erdtn.

*

Version eMAX

ua<im»jf u o fM ik » « « und vo i* ifcxxM ffa«

▲ Für Shops m it sehr vielen Artikeln sollten Sie sich für die Enterprise- Variante entscheiden

wo(!*r* ä«s»( Vtruon

► ï»S(4 100.000 AflfctKfltttirtStgfctf»

► • Dornums «IM► JZahiuogssctinittsteBen

«0OMI» J *» *9 « /K 4 U U 0 d U► Z*hJu<v9*scimftsttBt a i S*nUod*r

8 jr.». (CC Ban*) Of*r>t Fin*\M«uftg► C€C Scoimçscvitts»»«#

► t#m

Neben den Standard-Funktionen sind etliche kosten­pflichtige Erweiterungen möglich. ▼

6 weitere M odule

Massenüberarbeitung von Artikeln v

Lexikon-Plugin V

Merklistenfunktion enthalten ab Version 10.1

Mediafiles je Artikel

Gutscheinverwaltung

Angebot statt Kauf Modul

Wunschzettel-Funktion

Massenbestellformular

ab 18 Modul

Look & Feel Farb- Grafikanpassung

V

V

V

V

V

V

V

_ _ _ _ I

✓ 'S 'S 'S<s 'S 'S 'S'S 'S 'S 'S'S 'S 'S 'S

optional 'S 'S 'Soptional optional ✓

optional optional optional optional

optional optional optional optional

optional optional optional optional

optional optional optional optional

4 Praktisch: Durch Klick a u f den roten Pfeil werden die Funktionen der Er­weiterungen erklärt.

i-' I i.F - ■ r ; : t *■ 8

Die maximale Größe des Shops hängt stark vom jeweili­gen Produkt ab und schwankt zwischen 250 und 50000 möglichen Artikeln.

Shopware

Die im münsterländischen Schöppingen ansässige Shopware AG bietet ebenfalls vier verschiedene Varian­ten seines Shopsystems an. Die Standard-Version ist die

Community-Edition. Das Besondere an dieser Open Source-Variante ist, dass auch für den Support keine Kos­ten fällig werden. Der Support für die Community-Versi­on erfolgt vielmehr ausschließlich über die große Com­munity im Online-Forum von Shopware - hier ist also der Name Programm.Ein negativer Aspekt ist, dass es in der Community-Editi­on keine Gewährleistung, keinen Wartungsvertrag und keinen Herstellersupport gibt. Daher ist man als Nutzer der Community-Edition komplett auf die Hilfe im Forum

04/2013 webdesigner 25

RATGEBERShopsysteme im Vergleich

CQMMuwrr»(»HON Eomo«

T'«krf*y«*ft*n «CM«) o o V Vi - - 1 —*-— mftnoppinf o o V y/

BunW-f iKkfclion 0 0 ✓ V

Butin«*» («MntiaU 0 0 y V

fhMNpt o oPr«dvtclb«r>t«r 0 o V V

• rhu 0 o V Vlfrt«tllg«nlar NmtU(l«r o o V V

8oau« 0 0 V V

(Bild vcrfugbjr) ReMrvaaioA« 0 0 <✓ «✓10*44 Cr*»p Shoppi+f o o V V

iB»U vwfwgtjr; Abo Ctmmtrct 0 0 V V

S»*9*ng VTH-SyU »m X V V V

Atirrt Oif«d«ry Q X X V V

Vjrn*»h 3 X X X VSwcH* mil KH.R B»ck*rtd Q X X X Vr i a i t M - U X X X V

angewiesen. Die Kosten für den Support betragen bei der Professional Edition 49 bis 99 Euro im Monat und bei der Enterprise Edition je nach Support-Level zwischen 49 und 249 Euro.

4 Wenn man sich für die Community-Version von Shopware entscheidet, sollte man idealerweise also über eine gewisse Programmiererfahrung verfügen. Die wichtigsten Unterschiede zwischen den einzelnen Produkten liegen auch bei Shopware in der Anzahl der verkauften Produkte. Schon in der Standard-Installati- on können Sie allerdings bis zu 10000 Artikel verwal­ten. Auch ist in der Standard-Installation bereits ein in­tegriertes CMS enthalten, allerdings in einer ziemlich abgespeckten Version. Wer viel Wert auf ein vollum­fängliches CMS legt, sollte in ein Premium-Plugin inves­tieren. Eine Übersicht über verfügbare Premium-Plug- ins finden Sie hier:

4 Die Kreise markieren die Plugins, die m an optional kaufen kann.

In der Community-Variante ist der Support sehr stark eingeschränkt. ►

( « M H 0 » « 4

M M

Ut . P,

U «JlW r

V W- * Ä . •» Ä ÜÄ w »

X HM< * «MacX WIMM» ummm✓ ✓ ✓ Vs ✓ ✓ ✓V V V VX X X V* V V V 3X X X V 3u.■VX X V <u.X X X V <X X X VX m m mX X X ✓X X XX X X ✓X * VX m nsX X X

i m I m W i M IM I^--— - A ». .9 »W '!•> 9 ^ ^ *9 * 9 •» 9

N W

*9ß9 9

■MM* SM M */* IMIMÜM àAMftâS

Für viele Shop-Betreiber ist der Support ein entschei­dender Faktor bei der Entscheidung für oder gegen ein bestimmtes Produkt. Shopware bietet hier auf sei­ner Homepage eine detaillierte Auflistung des Sup­ports für die verschiedenen Versionen.

4 Shopware arbeitet zurzeit an einem Tool, mit des­sen Hilfe sich Shops untereinander vernetzten kön­nen. Mit Hilfe des Systems Namens Bepado soll es möglich sein, dass ein Händler Lieferant eines ande­ren werden, oder dessen Ware einstellen kann.Mit der Beta-Version, die im April 2013 in Betrieb geht, wird Bepado zunächst nur mit Shopware-Shopsyste- men funktionieren. Spätestens im Juni soll das System auch mit anderen Shopsystemen kompatibel sein.

Plenty Markets

Bei der in Kassel ansässigen Plenty Markets GmbH ha­ben Sie die Wahl zwischen der Professional und der Enterprise-Version.Die Professional-Version ist die Mietversion, die Enter- prise-Version ist die Kaufversion. Die Produkte von Plenty-Markets eignet sich laut Angaben des Herstel­ler sehr gut für größere Projekte mit Multisites. Hier finden Sie eine Übersicht über die Funktionen: ►

26 webdesigner 04/2013

RATGEBER

W ebshop

<*) l*r*j»uoflC *5tg* iiMr HTML uo3 CSS ir-r«r*2c*«f» m c n \ u t

^ Z0C*vfiX*»O*

^ IAÄ»ir»5üjt»UI (VTF1 »öfttoim;

^ BM urU M C

^ CtüechoMm»au4

^ G«Ci»»n*tKW

^ v»*:-ogi S;q-Ucou»

ffj Kwv3#n>e*wn

^ C tMdk

OUB#<

Kjtt->V)w» <5 E » n f o )

^ PniSOlutACA <M S M il|r« it«

£ / ft^Ü N

<+j l’<*Jtt EtfMAM FN tttM

d^lKiMen

^ 9>;e09 *rt*9»:*m9«*Jrt0t«

Trui*3-Sncp*-Ki*v3«nc>#***ji^

^ *Kam»Kuo4«fti<»t«%K»pen

TrutMO-SAOpS «'XUrtÖC**1«f l'ltMrtoe

Crttct-Cnf ««riom äM BwOcn-<.owj«s

^ *A>m9»**rt«r »rneort *0« C00«< ¿9not**UA4 (T Rk M KifVM«)

SvcN-vM<Hft9«*9%A*0i« HV*WI»oc> * * « 9C0m*rt#rt UGU S90-MP TB99. 0**«ftC*Oft«. My*0*09

LKe-StKfto **v«r>6oe<&m0tt««fscftc'fl«tc>*»**o<3« Cf^Mrn»» v M u id 4«« £ r ji6 f< W i»

<£/ SucmiufrSA »o w « s£»n4arat*tt<«> Sch**ört«n a Socf-*r>S«*1#m «ff« Proc*ooc urtff *CT*.oö«r

£:<r laScnnCiiri* i*i«: jr>c<-Anji i«

o * »ceboc* «\r>r«>3*no

O « W M «

6*r4U<-A/ie*rt<juvj

^ )M é iO M to n « r t j

<«J

<*J 'Bta> U ir> tw ; H.fftrv^n ?.* 6 f ^ n - *5 g ? !•—« j»»ef fMsrwtwt *ÄUi9 O «»*0 tltt»r

Q £ r < 3 n $ # ir > }\ * n r -J i& '. i& n < r )

<*j LK SftopCif.; «wl CcHrto^nuftflUw*- *;# o*tWafwvt««an6< «i P tw r t

ruy***n

^ rcf-S«kf

S iW if lö » :« »

^ AUMdWUM

UMlktMA

^ Kv«VH«**cmj **>0«*puCC0rt

K*wur*mm«K*rT»wif>0#n»Of«ö

B**l*tt*^nvT\ü# ,F»H» ttftta ä » UMr-vOuftg nM n nli«9ift tvnfu an e»»>«®v**g X»vJi t*r»i K«#*0*«» )

<*j FS*1«U©CU

Shopsysteme im Vergleich

Wie bei vielen Mietshops richtet sich der monatlich zu zahlende Betrag nach der Größe des Shops. Die Kosten liegen zwischen 99 und 4299 Euro pro Monat.Die Kosten für den Support sind ebenfalls stark gestaffelt und liegen zwischen. Auf der Homepage von Plenty-Markets finden Sie eine detaillierte Übersicht über die Preise, die sich sehr stark an der Größe des jeweiligen Shops orientieren.

1. W a h le n S ie e in T ftn fp eket:

% tri i|.« 4_j4 4.# A fcj. .Am AM »B i“fc* ,,r» - » a ^ ISA1 v v " 1 ^ « *e

6 » (*M »| * ««< » • X M ♦ '9*t D K * «» M «< M » M M M f M (« « t «M tvm *tfU > «<n «M iM t l » ; « • « »M » * W ^ l> « k » M H M i « UK V 4A*»'*ia— 3*n Dato«? i u i ^ i Ij M <etfe**e C»»*u» m n d e * ' w f c f l

t « * ( M l «M M » Trtflfc 1•*+** AlWUt IflCOMl

m m u o N iS W » t J K * U W JW 8 llN V U b M M t f y a b i ( o : f l

M n w w tWO »«•EU** N C M ie jo o o ue WO00 d r a - S « M i

N i n m n U M O 1W CU*** 40 00JMB 4J00 ue >9 900

M u i im » 2 IO O iOOlUÄ* n a » 1* 4 t00U II 40000 > *;•* v . w « i

400 F l« * 1«4 0 t tM * 7> ttU R «OttO

t 000 'm u H * 0900 m 00 o w

10900 m e u r J94 990M8 »900 MB 90 900

r ^ H 4 A » l ! 3 0 } 1 441 CUR* «ooo&ouo 12 900 IC 100 009 f l t t t j t M Hl

30 900 1 990 EU«* (M M 3 U C 14 400 *48 110 009 C4M

M H m m I M W } r * o c u > * t0 0 O tt U6 14 KD US 300 009

I M » t u * r 1000 009 ue 19ÍWWP 750 009

f r o m w w S O M 4 ¿ « te u ft 1 *W 009 UB 2*900 MB >00 009 CCI9-9«ep«lt

t »'■>#

lU a M iM M k a f t lA w «

« / m m

ft* oKO»H S»MWM »k* »«»dn.+an nt<%jlrtril«n4«rtrti) »> «» «UH|< &» «»» >n »»—cm* »ill» fto *« KTftlS&j| r a ■ > II^ L kW &A* i. •• f> A a </ H la ^ • fl ||a| ■ -A , a ■ «■ I Uka jJ ^ ^ f jJAa M a&a «k/|Apv iv vet • »* “ * aw' " ^ w e ■ • • * ■ etf •• e ^wVHK-*n.T*f rtcN MUKMn 4Vff «»C M4r« WS»W l<M*» (QKfl•= *«~ o«* ^ Die Kosten des

Mietshops von Plenty Markets.

Wer sich für den Mietshop entscheidet, sollte sich vorher sehr detailliert darüber informieren und beraten lassen, welche Größe für den jeweiligen Shop das Optimum ist. Ein Mietshop hat natürlich den Vorteil geringer Einrichtungskosen, aber ab einer gewissen Größe sind stattdessen die monatlichen Kosten recht hoch.Für Kunden, die sehr viele Produkte verkaufen wollen ist die Version Enter­prise zu empfehlen, da hier keine Limits in Bezug auf die Größe des Shops existieren.Plenty Markets legt besonderen Wert auf optimale Kundenbetreuung, was durch Key-Account-Management und regelmäßige Mitarbeiterschu­lungen gewährleistet wird. Wie beim Mietshop ist auch beim Kaufshop der für den Support zu zahlende Betrag vom jeweiligen Projekt abhängig.

Magento

Das Shopsystem Magento, der in den USA ansässigen Firma gilt als eines der größten und komplexesten Shopsysteme für große Online-Shops. Es handelt sich ist um einOpenSource-System. Der Kunde kann zwischen der Community-Version, dem Mietshop „Magento Go" und der Enterprise-Edition wählen. Aber wie bei allenOpenSpurce-Systemen heißt das natürlich nicht, dass bei einem Magen- to-Shop keine Kosten anfallen. Für die recht komplizierte Einrichtung je­des Magento-Shops gibt es zahlreiche sogenannte Magento-Agenturen,

04/2013 webdesigner

RATGEBERShopsysteme im Vergleich

Magento hat einige Funktionen

zu bieten, die m an nicht bei

allen Konkurrenten findet. ►

K ey F e a tu re s

A ^ » x < d C w K iw r Md Tr f r »f

hßCommunity

'U1Mafvtfor*0 üviefpns«

hw»;* WWv l«r<

0 1 O»*—»

iM tn IP k M f t

W w if» M N M W 4 M « «

V ( |M |. and

S:o*-« C *»«-»

C s u k f Md Cm « mnV jl* # * ( f MW)

IW » Md ^ nM l c n IW « « < M

U f i f t U c k * |

A4««*t>ttd

Ci* «m» W r y « f

W S«*n>

I U I i Cm m ..»

V»<m

*U(»W Si** Vm

Md W A((«M

rw .AW p . . ^ i t U r «

«nd

W #M ^K M «l(M IM M r#««4 l

( a a l y i t o M Md

feudwt

Ur x a i, O »» ^ w l *« M WN fca

uu

wie beispielsweise die Firma welance, die sich vor al­lem mit der Einrichtung des Shops beschäftigen. Hier fallen schon für die Community-Edition Kosten von 5000 € aufwärts an. Die Vorteile eines Magento-Shops sind die laut Hersteller sehr hohe Leistungsfähigkeit und die umfangreichen Funktionen. Für kleine Shop- Betreiber scheint Magento allerdings ein wenig über­dimensioniert. Dafür ist die Community-Version von Magento eine der umfangreichsten im Vergleich zur Konkurrenz. Sie lässt sich fast beliebig erweitern. Die Kosten für den Support hängen stark vom jeweiligen Projekt ab.Eine Schwierigkeit war bisher, dass Magento für den deutschen Markt nicht optimal konfiguriert war, da beispielsweise einige Zahlungsarten fehlten. Seit dem7.3.2013 gibt es ein vorkonfiguriertes Paket mit dem Titel magento.de, was optimal auf den deutschen Markt zugeschnitten ist.

Oxid e-sales

Wer Wert auf besonders leicht anpassbares Custom Design legt, ist bei dem Open Source System der Frei­burger Firma Oxid e-sales genau richtig. Denn neben der Tatsache, dass sich bereits in der Community-Versi­on ein recht umfangreiches Content-Management- System befindet, ist es ab der Professional Edition auch problemlos möglich, seinen Shop vollständig über ein anderes selbst gewähltes CMS, wie beispielsweiseTypo 3 zu verwalten. Diese Funktion findet sich sonst nur bei wenigen Konkurrenten.

Highlights• Integriertes Content Management System (CMS)

• Schnell Projektumsetzung, kurze Einrichtungszeit (Time to Market)• Web 2.0 Paket (Tagging, Rating, tiefe F acebook-Integration, e tc.)

• Suchmaschinenoptimiert• Funktional erweiterter und anpassbar

• Modular und ausbaufähig

• Optionale Anbindung an die E-Commerce Intelligence Plattform OXID eFire (derzeit in 0, A und CH verfügbar)

• Vollständiges Upgrade zu OXID eShop PE und EE ohne Datenverlust möglich

▲ Funktionsübersicht der Community-Edition

Ein weiterer Schwerpunkt von oxid-e-Sales liegt in der Web 2.0-Anbindung

Die Enterprise-Edition schließlich liefert verbesserten Support und weitere Funktionen, die in der Communi­ty- und der Professional Edition nicht enthalten sind.

Highlights• Professional Services

• Enterprise Support• Kurze Einrichtungszeit (Time to Market)

• Multichannel (Point-of-Sale &. Mobile App)• Master/Slave-Architektur

• Cache Manager, Vamish Reverse Proxy, Memcached

• Mall-/Mandantenfähigkeit (Subshops)

• Sprach- und Landerverwaltung• B2C- und/oder B2B-Fähigkeit

• Einfache Anbmdung an Drittsysteme (ERP, PIM, CMS e tc .)• Web 2.0 Paket (Tagging, Rating, tiefe Facebook-Integration, e tc .)

• Suchmaschinenoptimiert• Rechte-/Rollenver\valtung

• Funktional erweiterbar und anpassbar

• Modular und ausbaufähig

• Skalierbar für künftige Anforderungen• Performant, hochverfugbar und sicher

▲ Zu den Funktionen, die nur die Enterprise-Edition enthält gehört beispielsweise die Möglichkeit eines M ulti- channels

28 webdesigner 04/2013

m dpunkt.web

Die Kosten für Support belaufen sich bei oxid-esales auf mindestens 49 Euro pro Monat in der Community Edition. Für die anderen Versionen lässt sich das nicht so genau sagen, denn hier hängen die Kosten stark vom Projekt ab.

Gambio

Das Open-Source-System der Bremer Gam­bio GmbH ist eines der günstigsten Shop­systeme. Für die Einrichtung sind keine Pro­grammierkenntnisse erforderlich und man kann es sehr leicht selbst einrichten. Als Al­ternative stehen auch mehrere Mietshops zur Auswahl.Mit Hilfe des Standard-Templates von Gam­bio lässt sich der Shop schon recht indivi­duell gestalten. Wer mit dem Standard- Template nicht zufrieden ist, der kann unter zahlreichen kostenpflichtigen Templates wählen. Der Support hält sich mit Kosten von 149 Euro pro Jahr auch für die Betreiber von kleinen Shops in einen gut zu finanzie­renden Rahmen.

v/ «ulfimAcchM ttftd Aut*}an -mm

•S ml SuCif S—•

V IXnac* «*♦ mUgn IN n tc» +*+ jto

S CCV M U ld d * * k » LßpaA (r B «E in T É»frt{

'S f » I 11»» r X m » «<«

V k ^ n u i i i i A T A « ■*> U t W to U y t i

y Ac.'«<9» iDd A M m u k } (k t B M tih U la i

V •vrfto* ten Mm> ».mow kKwmçwwwwiV* O i m I K«nümwiiiid NaS H»wiw i» > i » « b S » él U n w

'S M i f w u « C w iiiiw «v IMI

^ Wrp6» Wh A#tA«*ewwtanQen

V Wifln*«** CCIAMC Ujrugtm»* Sytf«Ai * CMS

S W i y w w v%'«crnaMr

V VWk K <c« rUfcall*«*-« tr>4 CufrOiya* IWU».*«V B » ij Ü Iw G*«4>*%*«ri

V wr

V üJffOio-m»% Uoqj w Adfe-o— icft

^ t« Al*«i

y/ FtmkUm

+/ f y w I

«/ Nm^odwi«ttcn

V Fine« flw u tw é p i A d iw ^ e w c f i

rm

▲ M ultifunktionalität wird bei Gambio großgeschrieben.

Modfield e-commerce

Bei der Berliner Firma Modfield e-commer­ce handelt es sich auch um eine Open- Source-Lösung. Modfield e-commerce legt besonderen Wert auf die einfache Installati­on. Die Kosten für den Support können nicht pauschal benannt werden und rich­ten sich nach der Größe des jeweiligen Pro­jektes.

D ie H aup tvo rzü g e d iese r V e rs io n :

• Die "gesetzlichen Mindestanforderungen' werden er M t. wie Abzeichnen der DatenschutzerkJ*ung, Widerruf* und AG8* Unk bc«m Checkout (Abschluss des Bestellvorgangs)« Angabe de* Lieferzeit, autom jbsches M tsenden des W iderrufsrechtt und der Signatur m der Bestei E-M al. etc.

• W3C XKTML-vahdes Standardtemptate• Der Einbau vieler nützlicher Funktionen erleichtert des

tnkaufen und das Adrr*mstneren des Shops.• Fert>3 implemenberte Sochopt>nr*erungsmodif*at>onen (SCO)

smd standardmäßig vorhanden.• double*opt n für E-M jJ (ab v l.0 3 ), des bedeutet, die

Kontrote der Cmad Addresse beim Registrieren verringert Fehler be» der Ergebe.

• Konto löschen Funktion für den Kunden (et» 1.03) - Zogen S*e welche Bedeutung Tnvatsphare" für Sie hat, bieten Sie thren Kunden <>e Mogbchke»t« Ihre Konten setost zu laschen.

• Das Googlebase Export*Modul m it Versendkosten erfüllt die rechtfcchen Anforderungen

• SCO - Suchmaschnenopbrrierungen (M etatags, ShopStat URLs, CSS-Tem plate) smd fertig mplemenbert und standardmäßig vorhanden.

• W ichtige S^herheitsupdJtes(t) sind eetgebaut und weiter entwickelt.

• D*e TW ckbo* b ie te t eme 'S ta te o f the A rt DarsteCung* Ihrer ProdcAtbader.

• Shop Dashboard • die überarbeitete start.php für den Admin sorgt für leichte Administration.

• D»e Schne*e und Einfache Instattationsroutine sorgt dafür, dass M i sofort los legen können.

• Aktuelle Zahlungsmodufte wurden ettegnert (PayPaä, Sofortuberweisung, Moneybookers. e tc .)

• Der Shop wurde von So fo rtiib erw cK ung .de zertifczsert. siehe: Kbck m ch

• und noch vieles mehr• Lest but not le a st: Je d e r, der d ie m odJfled eContm erce

Shop-voftwArc» o ln v t/ l, so llte d«s An w ender hnndburh von DokuM^n kennen. Da Dokiftfan emer der Entw<lder m diesem Projekt »st, sind alte m der Anleitung enthaltenen Bugfixes m der modifed eCommerce Shopsoftware bereits engearbeitet' Hier der Link iu r aktuellsten Version des Anwenderhandbuches: Kftck mich

▲ Die Highlights von Modfield e-commerce

Eine große Stärke von Modfield ist die sehr gute Anpassungsfähigkeit des Shopsystems. Es lässt sich sehr leicht an die Vorstellungen des Anwenders angleichen.Bei Modfield e-commerce handelt es sich um eine vollkommen unabhängige Weiter­entwicklung des renommierten Shopsys­tems xt-commerce. Viele der Module für Modfield e-commerce sind nach wie vor mit der Basis-Version von xt-commerce kompa­tibel. Wie bei vielen anderen Herstellern ist auch bei Modfield e-commerce der Support stark vom jeweiligen Projekt abhängig.

S» ------« - r j

Node.js & Co.

PhoneGap

Simon Widjaja

Lebendige Webseiten mit Adobe Edge Animate

2013,238 Seiten € 33,90 (D)ISBN 978-3 -86490- 025-9

Marcus Ross

PhoneGap

2013,248 Seiten € 29,90 (D)ISBN 978-3 -89864-824-0

Golo Roden

Node.js & Co.

2012,334 Seiten € 32,90 (D)ISBN 978-3 -89864-829-5

Stefan Koch

JavaScript

6. A u fla g e

2011,476 Seiten € 39,90 (D)ISBN 978-3 -89864-731-1

dpunkt.verlagRingstraße 19 B • D-69115 Heidelberg fon: 0 62 21 / 14 83 40 • fax: 0 62 21 / 14 83 99 e-mail: bestellung@dpunkt.de

www.dpunkt.de

RATGEBERShoDsvstemg jp^Veraleich a a

Shopsysteme im VergleichHersteller Magento

Produkt Magento Communitiy Magento Enterprise Magento Go

Vertrieb Magento GmbH und Co KGSystemvoraussetzungen:PHP-Version 5.2.13 bis 5.3.15 5.2.13 bis 5.3.15 5.2.13 bis 5.3.15MySQL-Version 4.1.20 oder höher 4.1.20 oder höher 4.1.20 oder höher

erforderlicher Webspace 5 GB 5 GB 5 GBanfallende Kosten:Lizenskosten ab 5000 € ab 14420 Dollar/jahr Mietshopsystem, ab 15€

Kosten für Support keine Kosten vom Projekt abhängig vom Projekt abhängigGrundfunktionenKundengruppen Keine Begrenzung Keine Begrenzung Keine Begrenzung

Mehrsprachigkeit • • •

Multi-Shop-Fahigkeit • • •

Plugin-Management sehr gut sehr gut sehr gutKategorien und Unterkategorien beliebig viele beliebig viele beliebig vieleProduktvarianten fast unbegrenzt fast unbegrenzt fast unbegrenztSuchfunktion • • •

SchnittstellenWarenwirtschaftssysteme alle relevanten Systeme alle relevante Systeme alle relevante SystemePreissuchmaschinen alle relevante Systeme alle relevante Systeme alle relevante SystemeVersand/Versender alle großen Anbieter alle großen Anbieter alle großen Anbieter

SEO-Optimierung

Title-Tags •

Meta-Discription

Caching •

MarketingNewsletter-System •

Facebook-Integration •

Gutscheinmodul •

Cross-Selling •

Sonderangebote •

Statistiken Shop-Besucher •

Umsatzstatistiken •

Artikel/KatalogeMaximale Artikelanzahl unbegrenzt unbegrenzt vom Projekt abhängigAnzahl Bilder pro Artikel unbegrenzt unbegrenzt unbegrenztFilterLagerverwaltungDownloadbare Produkte

Layout und DesignTemplates verfügbarCustom Design leicht anpassbarZahlungsarten

PayPalClick&buyper SofortüberweisungBesonderheiten

Rechnung/Lieferschein per PDF als E-Mail zustellbar?

Gibt es eine CMS-Funktion?

30 webdesigner 04/2013

RATGEBERShopsysteme im Vergleich

Shopware Cosmoshop

Community Edition Professionei Edition Enterprise edition eStart ePro eMaxShopware AG Zaunz Publishin GmbH

Höher als 5.3.2 Höher als 5.3.2 Höher als 5.3.2 egal egal egal

Höher als 5.1.0 Höher als 5.1.0 Höher als 5.1.0 egal egal egal5 GB 5 GB 5 GB 500 MB 500 MB 500 MB

Keine 995 € 9.995 € 795 € 1.995 € 3.325 €

Kein Support 49-99 € 49-249 € 1,50% 2% 2,50%

keine Begrenzung Keine Begrenzung keine Begrenzung 250 1000 keine Begrenzung• • • • • •

• • • • • •

gut gut gut sehr gut sehr gut sehr gut

belieibig viele beliebig viele beliebig viele 250 1000 belieibig vielefast unbegrenzt fast unbegrenzt fast unbegrenzt fast unbegrenzt fast unbegrenzt fast unbegrenzt

• • • • • •

alle relevante Systeme alle relevante Systeme alle relevante Systeme alle relevante Systeme alle relevante Systeme alle relevante Systemealle relevante Systeme alle relevanten Dienstleister alle relevante Systeme alle relevante Systeme alle relevante Systeme alle relevante Systemealle großen Anbieter alle großen Anbieter alle großen Anbieter alle großen Anbieter alle großen Anbieter alle großen Anbieter

•

•

•

•

•

•

•

•

•

unbegrenzt unbegrenzt unbegrenzt 250 1000 50000unbegrenzt unbegrenzt unbegrenzt unbegrenzt unbegrenzt unbegrenzt

04/2013 webdesigner

RATGEBERShopsysteme im Vergleich

Hersteller Gambio plenty markets

Produkt Gabio Shopsoftware plenty markets professional plenty markets professionalVertrieb Gambio GmbH plenty markets gmbhSystemvoraussetzungen:

PHP-Version 5.1 Version 5.3, für User Interface Version 5.3, für User Interface

MySQL-Version egal kein my SQL kein my SQLerforderlicher Webspace mindestens 50 MB hängt vom Projekt ab hängt vom Projekt abanfallende Kosten:

Lizenskosten Keine Mietshop hängt vom Projekt ab

Kosten für Support 149 Euro pro Jahr 0,99 € pro Min hängt vom projekt ab

Grundfunktionen

Kundengruppen keine Begrenzung mindestens 20000 unbegrenztMehrsprachigkeit • • •

Multi-Shop-Fahigkeit • • •

Plugin-Management Sehr gut sehr gut sehr gutKategorien und Unterkategorien beliebig viele sehr gut sehr gutProduktvarianten fast unbegrenzt fast unbegrenzt fast unbegrenztSuchfunktion • • •

Schnittstellen

Warenwirtschaftssysteme alle relevante Systeme alle relevanten Systeme alle relevanten SystemePreissuchmaschinen alle relevante Systeme alle relevanten Systeme alle relevanten systemeVersand/Versender alle großen Anbieter alle großen Anbieter alle großen AnbieterSEO-Optimierung

Title-Tags •

Meta-Discription •

Caching •

MarketingNewsletter-System •

Facebook-Integration

Gutscheinmodul •

Cross-Selling •

Sonderangebote •

Statistiken Shop-Besucher •

Umsatzstatistiken • •

Artikel/KatalogeMaximale Artikelanzahl unbegrenzt unbegrenzt unbegrenzt

Anzahl Bilder pro Artikel unbegrenzt unbegrenzt unbegrenztFilter

Lagerverwaltung

Downloadbare Produkte

Layout und DesignTemplates verfügbarCustom Design leicht anpassbar

Zahlungsarten

PayPalClick&buy

per SofortüberweisungBesonderheiten

Rechnung/Lieferschein per PDF als E-Mail zustellbarCMS-Funktion

webdesigner 04/2013

RATGEBERShopsysteme im Vergleich

Oxid E-Sales Modfield

Community Edition Professionei Edition Enterprise Edition Modfield e-Commerce ShopsoftwareOxid E-Sales AG Modfield e-Commerce Shopsoftware

5.2.10 oder höher 5.2.10 oder höher 5.2.10 oder höher 5.x bis 5.4.x5.0.33 oder höher 5.033 oder höher 5.0.33 oder höher 1/4/2002

mindestens 100 MB mindestens 100 MB mindestens 500 MB ab 500 MB

keine 2.990 € auf Anfrage keineAb 59 €/Monat hängt vom Projekt ab hängt vom Projekt ab hängt vom Projekt ab

keine Begrenzung keine Begrenzung keine Begrenzung keine Begrenzung• • • •

• • • _

sehr gut sehr gut sehr gut gutbeliebig viele beleibig viele belieibig viele gut

fast unbegrenzt fast unbegrenzt fast unbegrenzt fast unbegrenzt• • • •

alle relevante Systeme alle relevante Systeme alle relevante Systeme alle relevanten Systemealle relevante Systeme alle relevante Systeme alle relevante Systeme alle relevanten Systemealle großen Anbieter alle großen Anbieter alle großen Anbieter alle großen Anbieter

unbegrenzt unbegrenzt unbegrenzt umbegrenztunbegrenzt unbegrenzt unbegrenzt unbegrenzt

•

•

04/2013 webdesigner

RATGEBERWorkflow für Web Designer von Jürgen Ortm ann

Workflow für Web DesignerOhne klar definierte Abläufe sind Webprojekte kaum zu bewältigen. Wir zeigen Ihnen, welche Stufen ein solches Projekt immer durchläuft und worauf Sie dabei zu achten haben.

.. AruxJyseI a K o n z e p t i o n i e r u n g y

| Ir\J

T e s t i n g und K o r r e k t u r |

Unsetzung

▲ Ob bewusst oder unbewusst, diese Pha­

sen durchläuft praktisch jedes Webprojekt. N icht nur bei der Arbeit im Team sind koordinier­

te Arbeitsabläufe gefragt. Auch wer als Einzel­kämpfer unterwegs ist, sollte die verschiedenen

Stadien bei der Gestaltung von Webseiten kennen und ganz bewusst abarbeiten. Dadurch können ein Großteil der Fehler und mögliche Missverständnisse zwischen Kunde und Web Designer vermieden werden. Auch bei der parallelen Bearbeitung mehrerer Projekte sind gere­gelte Abläufe unverzichtbar, um die Aufgaben innerhalb des gegebenen Zeitrahmens zufrieden stellend umzu­setzen. Die einzelnen Stadien des hier vorgestellten Workflows bauen dabei aufeinander auf. Das bedeutet, dass ein Stadium abgeschlossen sein sollte, bevor zu dem nächsten Stadium übergegangen werden kann. Wie bei kreativer Arbeit üblich, lassen sich die einzelnen Stadien in der Praxis nicht immer so klar voneinander trennen. Sie bieten aber eine Grundstruktur, an der man sich in jedem neuen Projekt orientieren kann. Gleichzei­tig sorgen geordnete Abläufe dafür, dass man als Desig­

ner schneller den Übergang von der Idee hin zur prakti­schen Umsetzung schafft. Ist erst einmal definiert, wie das Ergebnis aussehen soll, lässt sich dieses als klar um- rissenes Ziel auch besser und schneller erreichen und man vertändelt nicht zu viel Zeit mit der Ideenfindung und Konzeptionierung.Und was für die Arbeit des einzelnen Web Designers gilt, ist für die Arbeit im Team umso wertvoller. Der Workflow wird hier zum zentralen Gerüst, anhand dessen die ein­zelnen Aufgaben klarer definiert und sinnvoll verteilt werden können.Neben dem hier vorgestellten Workflow, der sich als grundlegender Ansatz für alle Arten von Webprojekten versteht, gibt es natürlich auch speziell für die Umset­zung konkreter Projekte - ganz zu schweigen von Work­flows für den Umgang mit bestimmten Anwendungen - die dabei helfen, die Arbeit möglichst effektiv zu ge­stalten. Der hier vorgestellte Workflow soll die Arbeit an einem Webprojekt im Allgemeinen abbilden und kann bei Bedarf natürlich auf das jeweilige Projekte angepasst werden.

Die einzelnen Stadien des Workflows

Der Workflow lässt sich in acht grundlegende Stadien unterteilen, die im Folgenden näher erläutert werden sollen. Zeitlich fällt die Gewichtung der einzelnen Stadi­en sehr unterschiedlich aus. So ist die Definition des Pro­jekts sehr häufig bereits mit Beauftragung durch den Kunden und dem vorangegangenen Beratungsge­spräch im Wesentlichen abgeschlossen. Die Umsetzung des Entwurfs dagegen dürfte den größten Teil der Zeit einnehmen.

Projektdefinition und Analyse: Das Projekt richtig erfassen

Am Anfang des Projekts stehen die Definition und Ana­lyse. Diese besteht darin, sich genügend relevante Infor

34 webdesigner 04/2013

RATGEBERWorkflow für Web Designer

mationen zu sammeln, um eine Grundlage für alle weite­ren Schritte zu schaffen. Dieses Stadium besteht vor al­lem aus einem oder mehreren ausführlichen Gesprä­chen mit dem Kunden, die vor und nach der Beauftragung stattfinden. Als Designer sollten Sie sich eine Checkliste für diese Gespräche bereithalten, in der alle relevanten Fragen zur Beauftragung aufgeführt sind. Dadurch stel­len Sie sicher, dass Sie die wichtigsten Informationen zu dem Auftrag auch von dem Kunden bekommen. Als Fachmann ist es Ihre Aufgabe, sich diese Informationen aktiv zu besorgen, denn der Kunde ist Laie und hat sehr wahrscheinlich keine konkrete Vorstellung davon, wel­che Dinge Sie wissen müssen, damit Sie das Projekt für ihn zufrieden stellend erledigen können.Diese Aufgaben umfassen hauptsächlich:

• Die Absicht des Kunden: Was hat der Kunde mit der fertigen Website vor? Was genau verspricht er sich da­von?

• Vorstellungen und Wünsche des Kunden: Welche konkreten Vorstellungen hat der Kunde von der ferti­gen Website? Gibt es möglicherweise eine bestimmte Farbe, die in dem Design immer wieder Vorkommen soll?

• Zu verwendende Technologien und Standards: In der Definitions- und Analysephase sollte auch über mög­licherweise zum Einsatz kommende Technologien und Webstandards nachgedacht werden. Dies ist ins­besondere mit Hinblick auf die Ausbaufähigkeit der fertigen Website interessant. Webtechnologien und - Standards verändern sich rasend schnell. Noch vor wenigen Jahren war zum Beispiel XHTML in aller Mun­de, heute gehört HTML5 die Zukunft.

• Vom Kunden bereitgestellte Materialien und Medien:Je spezifischer die Vorstellungen des Kunden sind, des­to mehr ist das Miteinbeziehen des Kunden in den kre­ativen Prozess erforderlich. Zudem kann der Kunde den Web Designer unterstützen, indem er ihm Medien oder Materialien, wie etwa Werbebroschüren oder das Fir­menlogo in digitaler Form zur Verfügung stellt.

Als Ergebnis der Defintions- und Analysephase sollten allen Beteiligten inklusive des Kunden die Anforderun­gen an das bevorstehende Projekt klar sein. Aus den An­forderungen werden dann die Vorgaben formuliert, die im späteren Verlauf des Projekts immer wieder zur Kont­rolle herangezogen werden.In diesem Zusammenhang haben sich Roadmaps als äu­ßerst nützlichesTool bewährt. In einer Roadmap werden alle Vorgaben erfasst uns erläutert. In den weiteren Stadi­en kann die Roadmap dann verwendet werden, um dar­in die Zuständigkeiten festzulegen und Termine für die einzelnen Teilaufgaben zu vergeben.

04/2013 webdesigner 35

Tools für Planung und Projektmanage- ment

Eines der wenigen frei verfügbaren Projektmanagement- Tools ist GanttProject. DasTool hat aber einiges zu bieten und kann bei Bedarf auch mit Projektplänen umgehen, die mit MS Project erstellt wurden. Einzelne Aufgaben können hier in einen Zeitplan eingetragen und mit Prio­ritäten versehen werden. Außerdem lassen sich in Gantt­Project die Abhängigkeiten der Aufgaben untereinander darstellen. ▼

IPrcyert Edit View Itsks Resources Help

y y ©x a&dPti «>

Test

Zoom h i zocr Out I A*XH2012

Oggi * I Prtwui | Next íwr cnocH cm* | Sa*

o NcwUlk CtH»T

0 Tesk Properties... Alt* Ent ef

* Unmdent

* Indent

V Wp All* Up4 Oown Aft«Oowf0 IM rA Unlink

y Cue Ctf1*Xdp Copy Ctil-Cr Pacte CtH.VX Oektc TtsL.. Dekt«

O CMrt options• Mit ponfo MrviWijy*

RSS bren

Mit dem kostenlosen SmartTools Projektplan für Excel kann MS Excel als Projektmanagement-Tool genutzt wer­den. Der vorgefertigte Projektplan reicht aus, um bei klei­neren Projekten den Überblick zu behalten. ▼

.°8( ■* J * __ __ - “*"■££1 * —a/ * • » • m

n* *■

Urm.

RATGEBERWorkflow für Web Designer

ZCOPE Horn« (2 3 5 3 3 2 3 Fa llstu d itn P re is« ä Anm eldung HiiTo & Support Forum b’log

Alles was Sie für erfolgreiches Projektmangement brauchen.

Den Überblick behalten

• j» 9% 148,16

%K QD s z . t c r er

□ fci

9

99

Jetzt kostenlos loslegcn!

fri 3 MinUrn vnü S** r*yi>Unrrt und legen bereits t w erstem P ro *« an«

Was 5»# mitZCOPC alles tun k ö n n e n

D e n Ü b e rb lic k b e h o tte nAufgaben vctwaccn Zeilen err»«n Trrmtnr fr%n*grnbudgets venenen Di4ajnw4v UriMrn fnrm»tir>r n nini n

ZCOPE Academy

¿k f l

Neben installierbaren Projektmanagement-Tools wie MS Project oder GanttProject gibt es im Netz eine ganze Rei­he von Web Apps wie zum Beispiel ZCOPE (www.getz- cope.com/de). Diese besitzen den Vorzug, dass sie prak­tisch auf jedem Rechner mit Internetzugang verfügbar sind und somit alle Beteiligten stets auf jeweils aktuellste Version zugreifen können. Da Projektmanagement-Tools praktisch immer professionelle Anwendungen sind, die dem Nutzer einen echten Mehrwert bieten, sind diese Web Apps leider immer auch mit zum Teil erheblichen Kosten verbunden. Das Testen ist aber in der Regel nach einer Registrierung kostenlos.

phase gesammelten Informationen sortiert und in einen Zusammenhang gebracht, der für das anstehende Pro­jekt optimal ist. Dabei können zunächst mehrere alterna­tive Konzepte entwickelt werden, von denen man dann in einem weiteren Schritt das optimale Konzept aus­wählt. Durch die Konkretisierung wird in diesem Stadi­um bereits auf Probleme eingegangen, die bei der spä­teren Umsetzung erfahrungsgemäß auftreten können. Die wichtigsten Tools für das Erstellen von Konzepten im Webdesign sind Dummies und Wireframes. Diese die­nen vor allem zur Veranschaulichung möglicher Layouts für die Webseite. Neben Papier und Bleistift kommen in dieser Phase häufig Bildbearbeitungs- und Screendesig- nprogramme, sowie vorgefertigte und anpassbare Wire­frames zum Einsatz.

Erstellung eines Konzepts: Die Ideen nehmen Form an

Dreh- und Angelpunkt jeder professionellen kreativen Arbeit ist das Konzept. Das Konzept bildet die Brücke zwischen Ideenfindung und Umsetzung. Es stellt die Konkretisierung einer Idee dar. Beim Erarbeiten eines Konzepts werden die in der Definitions- und Analyse­

Entwurf: Von der Theorie zur Praxis

Steht das Konzept, kann mit dem Entwurf begonnen werden. Der Entwurf ist der erste Schritt der praktischen Umsetzung. Zwar ist der Entwurf noch nicht funktions­tüchtig, er zeigt aber, wie das Ergebnis konkret aussehen könnte. Neben dem Aussehen der Website können in dem Entwurf auch grundlegende Funktionen verdeut­

36 webdesigner 04/2013

RATGEBERWorkflow für Web Designer

licht werden. So ermöglicht das Screendesignprogramm Adobe Fireworks es sogar, einen Entwurf als interakti­ves PDF zu exportieren. Das PDF enthält dann zum Bei­spiel funktionierende Links zu Unterseiten und exter­nen Seiten. Der Entwurf ist somit tatsächlich nutzbar und liefert somit bereits in der Entwurfsphase erste Hinweise auf die Usability und User Experience der Webseite.Der fertige Entwurf dient in der Regel auch zur Präsen­tation beim Kunden. Die Präsentation stellt bereits das nächste Stadium des Workflows dar, jedoch unterliegt der Entwurf damit bereits der Anforderung, dass er dem Kunden grundsätzlich Zusagen sollte. Dadurch orientieren sich alle Arbeiten der Entwurfsphase be­reits an den Wünschen und Vorstellungen des Kunden. Durch die Erfahrung aus früheren Projekten können aber auch Ideen mit einfließen, die der Kunde nicht ausdrücklich gewünscht hat oder von deren Nutzen der Kunde bei der Präsentation noch überzeugt wer­den muss.

Präsentation beim Kunden: Die Bewährungsprobe

Die Präsentation ist die Bewährungsprobe für den Ent­wurf. An diesem Punkt entscheidet der Kunde ob er mit dem Entwurf zufrieden ist. Zudem kann der Kunde Än­derungswünsche am konkreten Beispiel des Entwurfs einbringen. Gleichzeitig ist auch der Kunde gefordert, sich mit dem Entwurf auseinanderzusetzen und seine Ideen und Vorstellungen von der fertigen Website an­hand des Entwurfs zu prüfen und gegebenenfalls zu ändern oder an die Gegebenheiten anzupassen.Der Entwurf sollte daher klare Hinweise auf die endgül­tige Version derWebsite liefern. Im Entwurf müssen alle getroffenen Entscheidungen der Definition und Analy­se sowie des Konzepts deutlich werden.Die im endgültigen Design verwendeten Farben, das Layout und die Vorzüge des gewählten Designs soll­ten möglichst konkret im Entwurf dargestellt werden, damit sie bei der Diskussion gezielt diskutiert werden können. An dieser Stelle bietet sich für den Kunden die Gelegenheit, letzte größere Änderungswünsche zu äußern.Sofern es sich um kein größeres Website-Projekt han­delt, besteht die Präsentation in der Regel aus einem Austausch per Email und Telefon. Der Kunde erhält PDFs oder Bilddateien, die den Entwurf oder verschie­dene Varianten des Entwurfs zeigen. In einem Gespräch kann dann das weitere Vorgehen bei der Umsetzung und eventuelle Änderungswünsche besprochen wer­den. Die Änderungswünsche sollte möglichst exakt schriftlich festgehalten werden.

Umsetzung: Der handwerkliche Teil

Bei der Umsetzung geht es darum, den Entwurf ein­schließlich des Kunden-Feedbacks aus der Präsentation in eine lauffähige Website zu verwandeln. Wichtig ist hier, dass bei der Arbeit im Team alle Aufgaben und Zu­ständigkeiten klar verteilt sind und dass den Beteiligten alles zur Verfügung steht was sie brauchen. Darunter fällt die benötigte Software, Farbvorgaben, Schriftarten, aber auch Hilfsmittel wie Stylsheet-Sprachen, die richtig be­herrscht werden müssen. Bei der Umsetzung kann zu­dem die Vergabe an andere Dienstleister einThema sein, wenn es darum geht sehr spezielle Funktionen oder Ele­mente in die Website zu integrieren. Die Notwendigkeit für die externe Vergabe sollte aber bereits in der Projekt­definition und Analyse erkannt und dann rechtzeitig in die Wege geleitet werden.Speziell beim Coding wird bei der Umsetzung in aller Regel mit Basisvorlagen gearbeitet. Das hilft, unnötige Fehler zu vermeiden und somit den Aufwand für die Testing-Phase kurz zu halten.

Testing und Korrekturphase: Die Generalprobe

Webseiten sind, ähnlich wie Softwareprodukte, auf ein umfassendes Testing angewiesen, da trotz größter Sorg­falt immer wieder Unvorhergesehenes auftreten kann und in aller Regel auch auftritt. Zwar müssen keine wo­chenlangen Alpha- und Beta-Stadien durchlaufen wer­den, aber ein Testing auf den gängigsten Browsern und den wichtigsten Vertretern mobiler Endgeräte ist uner­lässlich. Das Testing soll zum einen zeigen, ob alles so umgesetzt wurde, wie es beabsichtigt ist, zum anderen Standardmäßig sollten folgende Dinge getestet werden. -Vergrößern und Verkleinern der Schriftgröße: Beim Ver­kleinern oder Vergrößern der Schriftgröße zeigt sich, ob sich eventuell Floats überschneiden oder Texte aus dem Rahmen laufen.-Validierung des Codes: HTML und CSS sollten in vali­dem Code geschrieben sein, um die Grundlagen für op­timale Sicherheit zu gewährleisten und damit es bei spä­teren Bearbeitungen nicht zu vermeidbaren Problemen kommt. Für diese Prüfung eignet sich das Web-Devel- oper-Add-on des Firefox-Browsers sehr gut. -Alternativtexte von Bildern: Indem Sie die Darstellung von Bildern unterdrücken, können Sie überprüfen, ob für jedes Bild ein geeigneter Alternativtext hinterlegt wur­de. Dies ist nicht zuletzt aus SEO-Sicht ein wichtiger As­pekt.-Die Seite ohne CSS: Wählen Sie im Web-Developer- Add-on die Funktion „Disable Styles", um das Laden des

04/2013 webdesigner 37

RATGEBERWorkflow für Web Designer

CSS zu unterbinden. Dadurch können Sie prüfen, ob die Seite auch ohne Stylesheet noch nutzbar ist.-Skripte abschalten: Nutzen Sie ebenfalls das Web-Deve- loper-Add-on, um Skripte abzuschalten. So können Sie die Zugänglichkeit der Seite prüfen. Viele Internetnutzer haben bei ihrem Browser zum Beispiel JavaScript oder Flash abgeschaltet.Die gefundenen Fehler und Schwächen müssen selbst­verständlich behoben und die Seite dann erneut getes­tet werden, bis schließlich alles in einwandfreiem Zu­stand ist. Erst dann ist die Webseite fertig und kann online gehen.

Tools für das Wireframing

Für das Wireframing gibt es inzwischen eine ganze Reihe praktischer Tools, sodass diese Aufgabe nicht mehr mühsam mit Photoshop umgesetzt werden muss. Unter anderen sind hier justinmind Protoyper (www.justinmind.com, Pro-Verison kostenpflich­tig) und das OnlineTool Protoshare (www.protosha- re.com, kostenpflichtig) sehr interessant. Zudem steht mit Wirefy eine flexibel anpassbare Beispielseite zurVerfügung. ▼

P*- M I farm* Vrw frtwvt T dàr

. ù y ù * # A C ^

»oiwjjcts a:>30Q *

IQnftiwrij» t\

□I f'.uü'ouw i yrvU t)

ö u u □

tot trvpvtnai *

___ . . . . . . . .

E> P« j» jia i2 vm*iflranpun

TöOt£

A

• / «rii■ Te.t................o • .

•¿«tr.'1Z I

a

\9

§

g

Loram iptum Scr«n 1

t 4___________* 'V xf\JertJT

Tools für das Testing

Beim Testing kommt es darauf an, ob die fertige Seite auch auf allen Browsern richtig dargestellt wird und ob alle Funktionen einwandfrei ablaufen. Mit den folgenden Tools lassen sich die wichtigsten Überprüfungen durchführen.

Browser: IE, Firefox, Chrome/Safari, Opera

i Die fertige Seite sollte in den wichtigsten aktuellen Browsern einwandfrei dargestellt werden. Zu diesen zählen der Mozilla Firefox, Google Chrome oder Apple Safari als Vertreter eines Webkit-Browsers, der Internet Explorer und der Opera-Browser.

webdesigner 04/2013

RATGEBERWorkflow für Web Designer

Web Developer-Add-on

Das Web-Developer-Add-on steht für den Firefox- und den Chrome-Browser zur Verfügung. Mit diesem Tool lassen sich Webseiten sehr analysieren. ►

Firebug

Etwas umfangreicher und leistungsfähiger als das Web Developer-Add-on ist die Browser-Erweiterung Firebug, die ebenfalls für Firefox und Chrome verfügbar ist. Fire­bug eignet sich zudem auch für andere Webentwick- lungsaufgaben. ►

XAMPP

mmrnàter P *

n 5

iw e bdesigner Lightroom<f •— r NA

WÄtommen Oh rm M »

Mim • O i *>V» OOM tk-j«*.* <.«* j P - 0 4 3

KO* . M « A * I I « I Im

« « k t * I m M (««>«# (KM

^ — ---- . • — •

»9 IIOTn ■ ■ u r i l ' U U U »•• »*r** *• » ■>** * iw • • • i i f t '»

I •/M 1.«

(N I I1 H ’ tl

n.*f 0ÍHI44 Im H• »

I. __________

Sofern man über keinen Testserver verfügt, ist XAMPP eine sehr gute Lösung, um auf einem Rechner lokal eine Testumgebung einzurichten. Die Installation ist etwas umständlich, XAMPP erfüllt dafür aber seinen Zweck hervorragend. ►

Hy XAMPP für Windows

Rückblick:Was war gut und was war nicht so gut?

Mit der Auslieferung ist das eigentliche Projekt abge­schlossen. Insbesondere wenn es sich um ein größeres Projekt handelt, bei dem mehrere Personen beteiligt waren und bei dem bestimmte Problemstellungen zum ersten Mal aufgetreten sind, sollte das Projekt noch einmal im Team besprochen werden. Bei dieser Gelegenheit kann die Arbeitsweise besprochen wer­den und es können Lösungsansätze für aufgetretene Schwierigkeiten entwickelt werden, die idealerweise zu besseren Herangehensweisen bei zukünftigen Pro­jekten führen.

W iß k o m m e n ¿ u X A M P P f ü r W in d o w s !

H v r j lk b v N C lw tk «vw n \«li.X A M P P K l vrfultf* v id i W ijiv v v m R v i lw v r Iii> l«lltvrl1

• » * • • ♦ » • A Qr+M thank yrut tn h.w ÁAtt¿ck14 7 tor ttu\ n+w tin 0 Contrat P,>n+H M i t I I I «

7 *E ) XAMPP für Windows . ... «

XAMPYMftafcJtt »J iW m L t v K i t k « « i • « « ! wvkJm • A ^ l i n u i v U i i u n U M u «J Im « h t * l» r « « v t .

-.au

1 t u » j _X j

mo:» •4 a: io u 9 t ia 14 3f 1 i *4 9f 18

>~«6#V*I. *• I 4 i'Mí' vi’ j | C»or>a ftttZMil y jt jc jrM n ro y v mj**wrcuryl Starte roçrcnm Mere ir* jwcur/] UxtfLnûnScrxtQ cfkrrl y¡rt£f.¡t pâffvjtfJ trim‘/éf w*rj i ¡

te ntuat*tb*¡&B

04/2013 webdesigner 39

TUTORIALBest Practice für flexible Websites von Jürgen Ortmann

Best Practice für flexible WebsitesResponsive Design wird häufig als das Nachrüsten einer Nutzeroberfläche für mobile Endge­räte verstanden. Dabei können bereits beim Coden von Desktopseiten verschiedene Dinge implementiert werden, um das Design möglichst flexible zu halten.

▲ Die Ausgabe au f verschiedenen Ausgabege­

räten sollte bereits bei der Gestaltung von Webseiten

berücksichtigt werden, selbst wenn diese zunächst

als reine Desktopseiten konzipiert werden.

S eit der Einführung von Smartphone und Tablet- Computer ist im Web Design das„Responsive De­sign" in aller Munde. Und wie bei allen neuen

Web-Trends gibt es auch hier so manches Missverständ­nis. Worum geht es beim Responsive Design eigentlich? Um das Erstellen von Webseitenablegern für mobile Endgeräte? Oder um das Gestalten von drei Versionen für Desktop-Monitor, Tablet-Computer und Smartpho­ne? Eigentlich nicht. Das Wesentliche des Responsive Designs ist die Anpassungsfähigkeit des Layouts einer Website an verschiedene Viewports. Ein alternativer Be­griff, der dieses Konzept besser verdeutlicht, ist der des „Liquid Designs", denn das Ziel dieses Gestaltungsansat­zes ist, ein Layout zu entwickeln, der automatisch jedes

erdenkliche Displayformat optimal für die Darstellung der Inhalte nutzt.Dies betrifft sowohl das Layout einer bereits vorhandenen Website, die bereits existiert hat, als es noch keine Smart- phones und Tablets gab, als auch von Grund auf neu ge­staltete Webseiten, bei denen die mobilen Endgeräte und deren Bedienkonzepte von vornherein berücksichtigt werden können. Grundlage für das Responsive Design ist insbesondere die Möglichkeit, dass die Breite von Contai­nern im CSS so definiert werden kann, dass sie durch den vorgegebenen Platz bestimmt wird. Damit ist das Arbei­ten mit festen Breiten endgültig passé.In diesem Tutorial soll eine Herangehensweise vorge­stellt werden, die als fester Bestandteil in jedes neue

40 webdesigner 04/2013

TUTORIALBest Practice für flexible Websites

Webprojekt einfließen sollte. Bei den hier vorgestellten Techniken handelt es sich sozusagen um Best Practices, durch die eventuell später auftauchende Probleme be­züglich der weiteren Optimierung für mobile Endgeräte vermieden werden können. Ist das Layout flexibel ge­nug, wird sich zum Beispiel das Anpassen von Schaltflä­chen für die Bedienung mit dem Finger ebenfalls weni­ger problematisch gestalten.

Die flexible Gesamtbreite

Die Grundlage für ein anpassungsfähiges Layout ist eine Gesamtbreite, die sich an die Breite des Viewports an­passt. Dazu müssen im Wesentlichen alle Inhalte von ei­nem Wrapper mit flexibler Breite umschlossen werden und die Breite für Inhalte und Spalten muss ebenfalls flexibel angelegt werden. Die Möglichkeiten dazu beste­hen in CSS schon länger, sie sind nun aber wichtiger denn je. Als Beipiel dient eine Website, die über eine Na­vigation, ein großes Bild und einem zweispaltigen Text besteht. Im HTML sieht das Ganze dann wie folgt aus.

cIDOCTYPE html> chtml lang="en"><head><meta charset="utf-8"/><title> Beipielseite Responsive Design</title><meta name="viewport" content="width=device- width, minimumscale=1.0, maximum-scale=l .0" />clink href="styles/main.css" type="text/css"rel="stylesheet"><!—[if lt IE 9]><script src=7/html5shiv.googlecode.com/svn/trunk/ html5.js"x/script><![endif]--><script type='text/javascript' src='scripts/respond.min. js'x/script></head>

<body><div id="wrapper"><header><nav id="skipTo"><ul><li><a href="#main"title="Zum Hauptbereich springen">Zum Hauptbereich springen</a></li></ul></nav><h1 >Beipielseite</h1 >

<nav><ul>< lixa href="#" title="Home">Home</ax/li> < lixa href="#" title="About">About</ax/li> c lix a href="#" title="Projekte">Projekte</ax/li> < lixa href="#" title="Kontakt">Kontakt</ax/li> </ul></nav><div id="banner"><img src="images/bildl .png" alt="Banner" /> </div></header><section id="main"><h1 >Main section</hl ><p>Lorem ipsum</p></section><aside><hl >Sub sectionc/hl ><p>Lorem ipsum</p></aside></div></body></html>

♦ • » «

Die maximale Breite als Limit

Obwohl das Layout flexibel sein soll, empfiehlt es sich, eine maximale Breite zu definieren. Sonst würde der Content bei Desktop-Monitoren über die gesamte Bild­schirmbreite verteilt werden, was nicht nur unschön ist, sondern auch die Usability beeinträchtigt.Zudem ist eine flexible Breite für Bilder ungeeignet, da diese dann verzerrt oder gestaucht dargestellt würden. Um dies zu verhindern, wird für Bilder einfach eine Grö­ße von 100 Prozent festgelegt.

.A. Die Desktopseite besitzt eine m axim ale Breite. Der Wrapper, der den gesamten Content umschließt, ist in der Breite begrenzt, dam it die Inhalte nicht zu sehr in die Breite gezogen werden.

/* Struktur*/ #wrapper{

04/2013 webdesigner 41

TUTORIALBest Practice für flexible Websites

width: 96%; max-width: 920px; margin: auto; padding: 2%;}

#main {width: 60%; margin-right: 5%; float: left;}

aside {width: 35%; float: right;}

/* Logo H1 V header hi {

height: 70px; width: 160px; float: left; display: block;background: url(../images/beispiel.png) 0 0 no­

repeat;text-indent: -9999px;}

/* Navigation */ header nav{

float: right; margin-top: 40px;}

header nav li { display: inline; margin-left: 15px;}

#skipTo {display: none;}#skipTo li {

background: #blfffc;}

/* Banner*/#banner{

float: left-margin-bottom: 15px; width: 100%;}

#banner img { width: 100%; }

▲ Bei den Tablets erhält man in unserem Beispiel die in der Breite zusammengeschobene Variante des Desktop-Layouts.

▲ Das Querformat au f einem Tablet lässt etwas mehr Platz in der Breite. Je nach Displayauflösung hätte eine zusätzliche Spalte m it einer Seitennavigation und/oder Such leiste hier noch Platz.

Maximale Bildbreite < maximale Container Breite

Damit das Bild korrekt dargestellt wird, muss sichergestellt sein, dass die maximale Breite des Bildes kleiner ist, als die Breite des Containers. Die 100%-Ansicht des Bildes sollte aber auch nicht zu klein ausfallen, damit das Bild für die größte Darstellung des Layouts die Breite des Containers angemessen ausfüllen kann.Wenn Sie die Seite mit dem Resizer-Bookmarklet (http://lab.maltewassermann.com/viewport-resizer/, für alle gängigen Browser verfügbar außer Internet Explorer)

webdesigner 04/2013

____________TUTORIALBest Practice für flexible Websites

testen, werden Sie feststellen, dass sich das Bild an jede beliebige Bildschirmgröße anpasst. Erst ab der 100%-An- sicht wird das Bild nicht mehr vergrößert. Große Bilddatei­en sorgen jedoch für eine verlängerte Ladezeit. Gerade bei mobilen Internetverbindungen liegt die Bandbreite deutlich unter der von Festnetzanschlüssen. Unter Um­ständen kann es sich daher lohnen, das gleiche Bild in mehreren Größen zu hinterlegen und je nach Viewport- Breite das Bild in der geeigneten Größe laden zu lassen.

Navigation als Liste und einspaltiges Layout

Vor allem Smartphones werden in der Regel im Hochfor­mat genutzt. Aber auch im Querfomat ist bei Smartpho­nes die Breite beschränkt, sodass ein mehrspaltiges Lay­out nicht besonders nutzerfreundlich ist. Gleiches gilt auch für kleine Tablets mit einer Diagonale von etwa sie­ben Zoll. Das Design der Seite sollte daher ab einer be­stimmten Pixelbreite auf ein einspaltiges Layout mit einer Navigation in Form einer Liste umgestellt werden. Als sinnvolle maximale Breite für dieses Layout hat sich ein Wert von 480 Pixeln bewährt. Dieser wird in dem Media Query festgelegt und mit dem „#skipTo"-Tag ausgezeich­net. Die beiden Spalten aus dem Abschnitt„Die maximale Breite als Limit" werden dabei kurzerhand untereinander aufgeführt. Somit steht der gleiche Content zur Verfü­gung wie im zweispaltigen Layout. Das Bild im Header und die Überschrift mit dem kleinen Logo wirken nun aber wie eine Barriere zwischen Navigation und dem text­lichen Content. Dazu wurde im HTML ein Hyperlink ein­gefügt, der dem User den Sprung zur Haupt-Section ge­stattet.

/* Media Query V@media screen and (max-width: 480px) {#skipTo { display: block;}header nav, #main, aside { float: left; clear: left; margin: 0 0 10px; width: 100%;}header nav li { margin: 0;background: #efefef; display: block; margin-bottom: 3px;}header nava { display: block;

padding: 10px; text-align: center; }}

Geschrumpftes Desktop-Layout vermeiden

Wenn Sie die Seite auf verschiedenen Geräten testen, kann es sein, dass auf manchen Geräten trotzdem die Desktop-Version geladen und stark verkleinert dargestellt wird. Damit das Media Query immer seine Wirkung zeigt, sollte im Head der HTML die nachfolgende Zeile einge­fügt werden. Diese Anweisung sorgt dafür, dass das Ska­lieren grundsätzlich unterbunden wird, indem die mini­male und die maximale Skalierung auf den Wert 1.0 gesetzt werden.

cmeta name="viewport" content="width=device- width, minimum-scale=1.0, maximum-scale=1.0"/>

Fazit: Die hiervorgestellten Lösungsansätze dienen dazu, das Layout möglichst anpas­sungsfähig zu gestalten. Zwar sind Smartpho- ne und Tablet die gängigsten mobilen Endge­räte, aber die Hersteller zeigen sich äußerst innovativ wenn es darum geht, den Nachteilen dieser Geräte, wie etwa das Fehlen einer ech­ten Tastatur, mit neuen Lösungen zu begeg­nen. Inzwischen gibt es eine ganze Reihe von Mischformen zwischen Smartphone, Tablet und Notebook. Dank Cloud-Computing und Web-Apps stehen weitere fantastische Mög­lichkeiten offen. Wichtig ist dabei, dass das De­sign einer Website in praktisch jedem erdenkli­chen Bildschirmformat funktioniert.Aus der Sicht eines Web Designers ist dieser Umstand etwas gewöhnungsbedürftig. Jeder Entwurf beginnt als Skizze auf einem Stück Pa­pier und jedes Wireframe ist zunächst ein star­res Gerüst, das in einem späteren Schritt aus­gestaltet werden soll. Gestaltungsregeln, wie etwa der goldene Schnitt, sind beim Responsi- ve Design nicht immer anwendbar, denn bei der automatischen Anpassung ändern sich auch die Verhältnisse der Elemente zueinan­der. Jedoch hat eine Gestaltungsregel gerade beim Responsive Design besonders hohe Gül­tigkeit: Form follows function - die Form hat sich nach dem Zweck zu richten.

.a . Smartphones bieten die geringste Displayb­reite, sodass hier ein einspaltiges Layout die beste Lösung ist. Auch die Navigation wurde im Beispiel als Liste umgestaltet.

Jk. Auch im Querfor­m at ist die Breite von Smartphone-Displays sehr beschränkt.

04/2013 webdesigner 43

TUTORIALGrafiken mit SVG und HTML5 erzeugen von Andreas Hitzig

Grafiken mitSVG & HTML5 erzeugenDank HTML5 ist es inzwischen möglich, Grafiken mit Hilfe von SVG einfach zu erzeugen. Im Workshop erfahren Sie mehr über die Vorteile und entwickeln die ersten eigenen Bilder.

S VG war bis jetzt meist nur Insidern ein Begriff. Da­hinter verbirgt sich eine Beschreibungssprache für zweidimensionale Vektorgrafiken. Die Abkür­

zung SVG steht dabei für Scalable Vector Graphics, also skalierbare Vektorgrafiken.Technisch gesehen ist SVG ein XML-basiertes Dateifor­mat. Man benötigt somit lediglich einen Texteditor, um eine entsprechende Grafik zu entwickeln.Einer der zentralen Vorteile von SVG ist die Fähigkeit, die Größe der Darstellung zu verändern ohne dabei an Qua­lität einzubüßen. Bei einem klassischen Grafikformat be­merken Sie ab einer gewissen Vergrößerung des Bildes deutliche Verpixelungen und damit auch einen sichtba­ren Qualitätsverlust. Da eine Grafik auf Basis von SVG bei jeder Größenänderung neu berechnet wird, gibt es kei­ne Ausgangsgrafik, welche den Standard setzt.Ein weiterer Vorteil ist die Möglichkeit, eine Grafik ohne größeren Programmieraufwand zu animieren. In diesem Workshop zeigen wir Ihnen, wie Sie auf Basis von SVG und HTML5 eine Grafik erzeugen und diese auch ani­mieren können

A I Die erste Grafik mit SVGI Im ersten Schritt werfen wir einen kurzen Blick

auf die Syntax von SVG und die Integration in HTML5. Dieser Workshop steigt nicht in die Tiefen von SVG ein, sondern nutzt diese Beschreibungssprache lediglich zur Darstellung einer einfachen Grafik.Das Bildelement wird wie ein Image-Tag auch in den body-Bereich einer HTML-Seite integriert. Das folgende Beispiel beschreibt einen einfachen grünen Kreis mit ei­nem schwarzen Rand. Für die Beschreibung eines Krei­ses sind unter Verwendung von SVG drei Angaben not­wendig: die x- und y-Koordinaten des Mittelpunktes Ihres Kreises sowie der Radius.Mit Hilfe dieser Angaben ist es bereits möglich, einen Kreis zu zeichnen. Dieser besitzt war noch keinen Rand und keine Füllfarbe, ansonsten jedoch bereits alle ge­wünschten Eigenschaften.Die HTML-Seite dient zur Darstellung des Elements und

Auf einen BlickVerwendete Software:

Texteditor Browser mit HTML5 Unterstützung

Technologien und Standards:HTML5, JavaScript, CSS3

Experte:Andreas Hitzig

umfasst die klassischen Objekte einer HTML5 Seite. Dies ist im Wesentlichen der Hinweis über das DOCTYPE-Tag.

<!DOCTYPE html><html><head><title>Meine erste SVG Grafik</title></head><body></body></html>

In dieses Gerüst einer HTML-Seite integrieren Sie im nächsten Schritt innerhalb des body-Tags die Definition

Ihres Kreises.<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="200" cy="100" r="75" />

</svg>

Die Definition wird über ein svg-Tag eingeleitet, in wel­chem der Verweis auf die Definition sowie die Version der Beschreibungssprache zu finden ist. Innerhalb des svg-Tags folgt anschließend die Definition des Kreises. Dafür steht Ihnen ein eigenes Tag zur Verfügung, wel­ches unter anderem die drei Parameter cx, cy und r für

44 webdesigner 04/2013

TUTORIALGrafiken mit SVG und HTML5 erzeugen

die x- und y-Koordinate sowie den Radius des Kreises besitzt.Wenn Sie Ihren Kreis mit diesem Informationen zeich­nen lassen, wird dieser automatisch mit schwarzer Farbe gefüllt. ▼

Meine erste SVG Grafik

M it wenigen Mitteln wird m it Hilfe von SVG ein Kreis erstellt.

Die gewünschte Farbe für den Rand, dessen Breite sowie die Füllfarbe des Kreises setzen Sie über die Parameter stroke, stroke-width und fill.Damit sieht die vollständige Definition des grünen Krei­ses mit dem schwarzen Rand dann wie folgt aus:

<circle cx="200" cy="100" r="75" stroke="black" stroke- width="1"fill="green"/>

Da die Breite des Rands lediglich auf einen Pixel gesetzt wurde, ist dieser auch so gut wie nicht zu erkennen. Na­türlich können Sie diesen auch breiter definieren und die Farben als HEX-Wert angeben. ▼

Meine erste SVG Grafik

Sie können einem SVG Objekt individuell eine Farbe für die Füllung und den Rand mitgeben.

Grafik mit einem Muster versehenDamit die Grafik nicht zu langweilig aussieht, soll

der Kreis noch mit einem Muster versehen werden. Dazu nutzen wir die Funktion des Gradienten. Dabei handelt es sich um einen Farbübergang zwischen zwei Farben. SVG sieht in seiner Definition zwei unterschiedliche Dar­stellungsformen vor: einen linearen und einen radialen Gradienten. Bei der ersten Variante findet der Farbüber­gang von links nach rechts statt, bei der zweiten von in­

nen nach außen. In unserem Beispiel mit dem Kreis nut­zen wir den radialen Ansatz und versehen den grünen Kreis mit einem roten, der vom Mittelpunkt aus immer mehr verwässert und in den grünen Farbton übergeht. Der radiale Gradient wird immer von zwei defs-Tags um­geben, welche die Klammer um die Definition bilden. Für die Festlegung des Farbverlaufs benötigen Sie meh­rere Angaben: die ID des Farbverlaufs, die Farbe, deren Position sowie deren Transparenz.Im Standard erfolgt der Farbverlauf immer vom Mittel­punkt des jeweiligen Objektes aus. Wenn Sie diesen Startpunkt übersteuern möchten, nutzen Sie dazu die Parameter cx, cy, fx und fy. Mit diesen legen Sie den ho­rizontalen und vertikalen Startpunkt sowie die zugehöri­gen Endpunkte fest. Als zusätzlichen Parameter haben Sie natürlich auch beim Gradienten den Radius des in­neren Kreises.

cradialGradient id="meinGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">

In unserem Beispiel verwenden wir wieder die Farbe Grün als Hauptfarbe für den äußeren Kreis und Weiß für den inneren. Die Festlegung der Farben erfolgt über das stop-Tag.

<stop offset="0%" style="stop-color:red;" stop- opadty="100%"/>

Der erste Parameter offset regelt die Position der Farbe und kann einen Wert zwischen 0 und 1 oder alternativ zwischen 0 und 100 Prozent besitzen.Die stop-color ist diejenige Farbe, mit der unser Kreis ausgefüllt werden soll, die stop-opacity regelt die Trans­parenz der Farbe.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><defs>cradialGradient ¡d="meinGradient" cx="50%"

cy="50%" r="50%" fx="50%" fy="50%"><stop offset="0%" style="stop-color:red;" /><stop offset="100%" style="stop-color:green;" />

</radialGradient></defs><circle cx="200" cy="100" r="75" style="fill:url(#meinG

radient);"/></svg>

Im letzten Schritt wird die Form festgelegt, welche die Farbverläufe beinhalten soll. In unserem Beispiel bleiben wir bei dem zuvor definierten Kreis, müssen an dieser Stelle allerdings ein paar Anpassungen vornehmen. Sie

04/2013 webdesigner 45

TUTORIALGrafiken mit SVG und HTML5 erzeugen

benötigen für die Definition nur noch die Koordinaten des Kreises. Alle weiterführenden Informationen hin­sichtlich des Aussehens kommen aus dem zuvor defi­nierten Gradienten und werden über den Parameter style und den eindeutigen Bezeichner dem Kreis zuge­wiesen. ▼

Wir wollen den Kreis, wie bereits beschrieben, sich um seinen Mittelpunkt drehen lassen. Dafür benötigen wir einen Start- sowie einen Endpunkt.Diese beiden Informationen legen Sie über die Werte from und rofest, wobei beide von diesen jeweils drei Pa­rameter besitzen:

Ein Gradient erlaubt die genauere

Festlegung eines Farbverlaufs.

Sie können auch mehrere Objekte zu

einem Gesamtob­jekt kombinieren.

Im Beispiel wird dem Kreis ein Text

hinzugefügt.

o■-- I---—i------ -—— — -- - _«jr c'**t

SVG Grafik mit Gradient

/"V Q Objekt mit Text versehen\ J Für die Animation des Objektes nutzen wir die SMIL-basierte Variante. Damit die Rotation bei unserem Kreis auch deutlich sichtbar wird, versehen wir diesen im ersten Schritt noch mit einem Text, der sich anschlie­ßend mitdrehen soll.Dazu fügen Sie direkt nach der Definition des Kreises noch eine weitere Zeile ein, mit der Sie ein Textelement definieren.

ctext x="165" y="105" style="stroke:white; filhwhite; font-size:18;">Hallo Welt</text>

Dieses legt über die x- und y-Parameter den Startpunkt des Textes fest und formatiert diesen mit Hilfe des style- Parameters. In unserem Fall erscheint der Text in weißer Schrift und Schriftgröße 18. Als Text soll der Klassiker „Hello Welt" ausgegeben werden. ▼

«*' c ■ . u w ****** rvutrtf.' p - c x

SVG G rafik mit G radient

(•11A w»uuo » b

f \ A Objekt animierenT "D ank des zuvor angelegten Textes kann das Ob­

jekt im nächsten Schritt auch sichtbar animiert werden, Dazu nutzen wir den SVG-Befehl animateTransform.

• Wertl beschreibt für den Parameter from den Start der Rotation in Grad, für den Parameter to das Ende der Rotation in Grad.

• Wert 2 und Wert 3 entsprechen der x- und der y-Ko- ordinate des Drehpunkts der Animation.

<animateTransform attributeType="XML" attributeName="transform" type="rotate" from="0,200,100" to="360,200,100" dur="2s"repeatCount = „indefinite"

/>

Da sich der Kreis um seinen Mittelpunkt drehen soll, ha­ben die beiden Angaben entsprechend diese Werte als x- und y-Parameter und unterscheiden sich lediglich vom Start- und Endpunkt. Da der Kreis eine vollständige Drehung machen soll, sind die notwendigen Gradanga­ben entsprechend 0 und 360.Die Dauer der Animation ist in unserem Beispiel auf zwei Sekunden festgelegt und wird beliebig oft wiederholt. Diese beiden Parameter können Sie natürlich nach Belie­ben verändern und auf diesem Weg die Animation lang­samer oder schneller erscheinen lassen.Da Sie sowohl den Text als auch den Kreis animieren möchten, benötigen Sie eine zusätzliche logische Klam­mer um alle Elemente, die gedreht werden sollen. Dafür stellt Ihnen SVG das Tag <g> zur Verfügung, w

W ' üww*) topi v

1

SVG Grafik mit Gradient

M it Hilfe von Animation können Sie den Kreis drehen.

jn Bewegungspfade festlegenJ Sie können ein Element nicht nur mit Hilfe von

animateTransform bewegen, es gibt darüber hinaus

46 webdesigner 04/2013

TUTORIALGrafiken mit SVG und HTML5 erzeugen

noch weitere Möglichkeiten. Wenn Sie den Bewegungs­pfad Ihres Objektes bereits kennen, bietet sich die Funk­tion animateMotion an. Bei dieser legen Sie den Weg des Objektes anhand einiger Koordinaten fest, den Rest erledigt SVG im Hintergrund für Sie.

<animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />

Die Definition des Bewegungspfads geschieht über den Parameter path. Für eine Bewegung benötigen Sie min­destens zwei Koordinaten: den Startpunkt und den En­depunkt. Im Beispiel wird unser Kreis von links nach rechts bewegt und wandert anschließend automatisch wieder zurück. ▼

SVG Grafik mit Gradient

SVG erlaubt m it wenigen Angaben die Definition eines Koordinatensystems für den Bewegungsablauf.

Eine weitere Alternative, wie Sie den Weg beschreiben können, funktioniert über die Nennung der verschiede­nen Zwischenstationen. Dazu geben Sie jeweils die Ko­ordinaten der Punkte an und SVG berechnet automa­tisch den direkten Weg. Dazu nutzen Sie den Parameter values und geben diesem immer die x- und y-Koordina- ten eines Punkts als Wertepaare mit, getrennt durch Semi­kolons.

<animateMotion values="0,0; 500,200; 200,500; 0,0" d u r=" 10s" repeatCou nt="i ndefi nite" />

In diesem Fall startet die Animation am Ausgangspunkt, an dem der Kreis angelegt wurde. Dieser wird in der Ani­mation mit den Koordinaten (0,0) gekennzeichnet. Es ist somit eine relative Betrachtung, die sich an dem Punkt orientiert, an welchem der Kreis angelegt wurde.Als nächstes geht die Reise zu einem Punkt mit den Koor­dination (500,200), dann weiter nach unten zum Punkt (200,500) und wieder zurück zum Ausgangspunkt. Als

Zeit für den Gesamtdurchlauf wird 10 Sekunden festge­legt, anschließend fängt die Animation wieder von Neu­em an. Durch den Wert indefinite des Parameters repeat- Count wird diese Animation unendlich oft durchlaufen.

Fazit: Das Generieren und Animieren von Objek­ten mit Hilfe von SVG ist zwar noch in den Kinder­schuhen, lässt jedoch bereits recht umfangreiche Aktionen zu. Wie immer bei solchen Themen ist die Umsetzung innerhalb der verschiedenen Browser unterschiedlich weit vorangekommen. Während der Firefox und der Chrome-Browser die meisten Ele­mente bereits problemlos interpretieren, hat der ak­tuelle Internet Explorer noch teilweise seine Proble­me. Sie sollten sich aus diesem Grund Ihre Animationen nicht vollständig auf SVG verlassen, sondern immer auch eine Alternative in der Hinter­hand haben, sofern die Animation zentraler Bestand­teil der Webseite ist. Darüber hinaus bleibt es span­nend, bis wann alle Browser Hersteller die grundlegenden SVG Funktionalitäten flächende­ckend unterstützen. Erst dann ist ein sinnvoller Ein­satz des neuen Bildformats möglich.

Vergleich zwischen SVG und Canvas

Mit HTML5 gibt es zwei neue Techniken zur Erzeu­gung von Grafiken: SVG und Canvas. Anhand der Ein­satzgebiete ist eine klare Abgrenzung möglich. Wie im Workshop gesehen, ist SVG eine Beschreibungs­sprache für die Darstellung von zweidimensionalen Objekten auf Basis von XML. Canvas hingegen zeich­net 2D Grafiken zur Echtzeit, wobei dies durch Ja­vaScript gesteuert wird. Innerhalb von SVG werden alle Zeichnungen als Objekte verwaltet und bei der Änderung einer Eigenschaft erneut gerendert. Can­vas rendert die Objekte einmalig auf Pixelbasis. So­bald es eine Änderung am Bildschirm gibt, muss das Canvas-Objekt aktiv neu gerendert werden.

M it Hilfe einer Pfadan­gabe kann ebenfalls eine Animation defi­niert werden.

04/2013 webdesigner 47

WEB-GALERIESingle Pages

Interessante Single-Pages

S eiten ohne jede Unterseiten und damit auch ohne jede Navigation sind absolut „in". Wir möchten Ih­nen heute einige dieser Seiten vorstellen. Alleine

durch den Verzicht auf Unterseiten, wirken die Seiten zu­nächst einmal relativ schlicht, aber dies ist zum Teil nur der erste Eindruck.Unser erstes Beispiel ist schon alleine dadurch eine sehr ungewöhnliche Page, da der Besucher statt von Oben nach Unten von Links nach Rechs scrollt. Dabei erfährt man zunächst, dass es sich bei der Seite um die Home­page von Fotografen handelt, die sich darauf speziali­siert haben, Flächen zu fotografieren. Je weiter man nach rechts scrollt, umso detaillierter werden die Angaben der Seitenbetreiber. Außergewöhnlich ist auch, dass die ei­gentliche Seite nicht den gesamten Bildschirm ausfüllt, sondern dass sich Oben und Unten jeweils ein grauer Bal­ken befindet.

von Tobias Henke

what we doO'»«#»*

¡JUS IK * 'V>.-MIOJA

MM

what do you get? (the technical bit)

nothing but bottles - this way-*

48 webdesigner 04/2013

WEB-GALERIESingle Pages

CHLEON

CHLEON WHAT WHY WHO PARTNERS CONTACT

ALL CARS. CONNECTED. TM

l o c a t e

MUSICN e w s / G >

p ° d c a s t s t a l k

C H A T A PPS

o

INSURANCE

d e v e l o p e r s

IV! MAKERS

OEMS

SERVICING

Bei Chleon.com handelt es sich um eine Seite von Auto­freunden, die sich des Themas Autos und Internet ange­nommen haben. Die Seite hat eine Navigation im Header und enthält insgesamt sechs Menüpunkte. Wenn man auf einen der Menüpunkte klickt, scrollt man automatisch nach unten. Die Informationen der einzelnen Menüpunkte werden ab­wechselnd auf weißem und auf gel­ben Untergrund angezeigt. Die Sei­te ist sehr übersichtlich und ein wenig minimalistisch gestaltet. Je weiter man nach unten scrollt, umso detaillierter werden die Infor­mationen über Chleon.com.

WHAT IS CHLEON?

Cl ILF. OK HAS BUILT TIIF WORLD'S MOST ADVANCED CONNECTED PLATFORM FOR CARS TO KEEP YOU SAFE, INFORMED AND ENTERTAINED. TO BRING THE LOVE BACK INTO

MOTORING. YOUR DRIVING WILL NEVER BE THE SAME AGAIN.

WHO ARE CHLEON?

CHLEON IS A TEAM OF EXPERTS FROM THE HI-TECH INDUSTRY W ITH SHAREDPASSION FOR BOTH CARS AND TECHNOLOGY.

T h e y w a n t t i i e i r c a r s c o n n e c t e d . T h e y w a n t y o u r c a r s c o n n e c t e d .AND 10 REALIZE THIS VISION, THEY HAVE BUILT THE HARDWARE AND

SOFTWARE, TO SAFET Y BRING CLOUD SERVICES TO CARS.

WHY CHL€ON?

h i M i o \ r iA i i ü k u 1 0 « m i I*

O ©O C A «

a a « u in■■hi » H*»<

«•! «•

IJ4 t

t I

9 4 ! |

Ar«*«*t -|x 4» Nd*• H *

m 1 94

.— • ^ . • • 4 m * 1t Mi «4 m « to

Ru b«id CimEx+cu&v» Pm i<l«o'.

Qf .

A a d ic » Dix on

THE LEADERSHIP TEAM

VUh «1 Cfa*tr«U»F<rjr.d«. O ü *4 Otffic«

V in k U iM Ö rlv a lV P . I u iu im i D r .’tic rp rm ct

Audio» Q»io%VP, iupptrChais

04/2013 webdesigner 49

WEB-GASingle Pages

LERIE

Adrian Crellin: freelance web design

View Mv Work:

Unser zweites Beispiel zeigt die Homepage des Freelance-Webdesigners Adrian Crelin, der sich auf seiner Homepage auf ein Minimum an Gestaltung beschränkt. Seine Kontaktdaten auf der linken und rechten Seite werden durch ein Handy und einen Kugelschreiber symbolisiert, wo man dieTelefonnummer und seine E-Mailad- resse erfährt. Der User scrollt von oben nach unten und erfährt so etwas über die Leistungen des Webdesigners. Zunächst werden unter der Überschrift„my Work" in einer kleinen Bildershow einige bisherige Arbeiten von Adrian Crelin vorgestellt. Die anderen drei Menüpunkte zu denen man nach unten scrollen kann lauten "Introduction","Services" und„Contact".

tnfroducfton: My Contact Details:I* *• M t II G

aMt#<M *W MIM MM «M IM Mfl 4 M M » «Mm M

T mçfior* *r*44 (0)7U4 H l §7%

C«K W w j:

l f » p— < V « u f v t # n ^ É i M n M * M4 • in M >MM« r* ir*»«sarg » 4 m u / m r » M M M t o t e t i « r # i fcM iyq

r« o u M 7 X M i* n» n f ■ » j n lg n iy « » (T— »■iiteht in n » i*w iiita k * Send me a Mc&sago:

Myta*MI »

I«V• m> r«*

» tA> m «0 « n I» « M i «'•>■«>1 *• M i m# m m Ir«4 «m • *< M BMW# M IX n

• M i

M W M»a Im» I a «M m»

ICmi AHoHWpWth

an M * a»f«a ■ i

—P lnnuat M(IMC». !•»( I« •«•»»»■. •« r «

I BjC» M

50 webdesigner 04/2013

WEB-GALERIESingle Pages

Diese in schwarz und gelb gehaltene Seite einer Agentur von Webdesignern wird man nicht sofort für eine Single- Page halten, wenn man die Navigation entdeckt. Aber wenn man auf die Navigation klickt, scrollt man automa­tisch die Seite herunter. Dies passiert nicht auf geradem Weg, sondern in einen Zick-Zack-Kurs. Der Besucher wird sozusagen auf eine kleine Reise zu dem jeweiligen Menü­punkt mitgenommen. Diese Art des Scrollens ist ein ab­solutes Alleinstellungsmerkmal der Seite. Sie besteht aus den fünf Unterpunkten „Home", „About"," Work", „Clients" und„Contact" und der User erfährt mit wenigen Worten alles, was er über die Agentur wissen muss.

lt‘3 important to be both good looking • ciever.

Lit u« Evwymns mw» ioc-t« f&y} Tr.»* « vfny'■'•s* Mi mm'dZtmt ¿JM «W •• V**« • ia ■ • V»UJ

to loek f x i Su! hcn*»Cy, ?ar n *uy p«r.

04/2013 webdesigner 51

WEB-GALERIESingle Pages

Diese sehr umfangreiche Single-Page hat sich dem Thema Design gewid­met und versucht dem User Schritt für Schritt näher zu bringen, was gutes Design ausmacht. Es wird eine Fülle von Informationen geboten. Bei der Masse an Informationen wären hier und da ein paar Unterseiten vielleicht etwas übersichtlicher gewesen. Im Header der Seite erhält man allerding unter„Tableof Contents" eine Übersicht zu allen behandelten Themen und kann sich vorher schon überlegen, welche Themen man interessant findet, sodass man nicht zwingend ganz nach unten scrollen muss, um zu wissen, welche Themen auf der Seite behandelt werden.

Startups, this is how design works.C m ^ u k i Ufca AffC* trw Eilfc Atfta* ta u t *4tW r* *>04 *»»<«»#**

»W

MtoIw^érsg» «I we eitfcnr Nmem

«tui » 4tm|o a »kfcw'A Voc4»t«*«

It« I(M K ta k x k m t

tiiMVÇMdiW i i m T u t r**« fc« *» rm

r»

Meet the Designer Founders

Acojfditx t>3 TW D lte fB if Fttftd lUfTUfl Wtffe d«UKtl«« kN p*n«mi£Lf MKklgftf i fi A ' i Im ft««It* W w u t pfflTik» oa fit« « ( 'V I M M m JUtm uJ lo m A rn u J

ibcu u k k iLKt kM turtvfv

I is armthod of proWroi solving.Tfc* I

Sowlut n > x x l< J e M £ n ?

TW I m I

ton* *■!»«*•«• to V « b M «U M lto à h (,«rm «Va »/I •» > m yrtoj* »Wti •a*i«a»*a*att

• Joe Cebbw, Autmb

Jo t AffaKi a » AiiCoö cqxnrftCA. I k u • W xitrd to t m t n t an a ip irin t and r& tftk n l v j n f d i r t x r tferoaffe tb lp , tftiutlrr* iWv^U t&J (t iA i ptoâacl •Oi*2tup to B ill* If 16 Jo« %'fcfiOM ptoduh rfeat tunpli/v life »iwJ lut'« » pottftua «apart oa d u eavtroaoKfie. ta4 « i w « th*t t V coaf**? *lb*r«s to cfce* ceaeci.

fVwc to Aataft.jof w n raplotad &tCbrawl* Rodt, to ( moiM i ( r m dnigawrttu#, »s J àrveiapvd w w rtl cotu m w tp ro b a t Aft »Juttr4 of tfe* Rbod> hlind

Griffe* Dnjte and In d o u «! Drupi u

O O

^ . JiM Q v L'j M Tint AiftnÖ*** .■ - V ,

k jII* 4i : v im c o

O O

# l ) * t e r k ju m ’ T r « P r in c ip le o4‘ “('»ood IV s i^ n ’

*11111 tof n I » »

V«v<nn an

». >W «m W l f * M l M l l ✓t to » a m « « « tm n

itor*i«a«a T «««a «a U i

oçr «4 «> « t a* '

Good dr%!gn IV..

0 £ t

Resources!

c °

o<o-o« ©

-a

I»‘s g ti'in g harder and harder io ditlem m at* ha«*d on wch tal*m iJon#. L>esi$ners like Jonathan Ive at Apple, Joe Gebbta at Aubnfc, and Dave Morin jr Path (to iu *i* a few) are chinking th#* world tndav - noc m w eW because Apple, Airbnb, or Path haw better tech, but beciiiw they nuke rheif produm more uiabtt. AMthetif, and Hunun.

Tkn n r * t ê p* w *f <m ôrtipi h r «cwraf» I k n r s i o M d «arfaraaüoa o«t iHrta u U m m m ii WiIImoi m A P - t dwHH

Rar» arm » taw tm o tt» * I k i(U i rw o o s M d

Design is ihe link missing from your founding leaiiL T lie |)erfert balance of business, tech, and design is an incredibly powertiil to o l..

and an even more powerful business model.

52 webdesigner 04/2013

A 1C A Bôhance

DESIGNER

FUND

WEB-GALERIESingle Pages

TOU* BUCHEN

Ob cxpfrim rnw ik Kunitrlum * oder «M M fcv Ardudcnir. w» lieben B o kn SO;Kt nt krtJt/rcn Nechcn und woten d r * »ns Mxducnir Lrhe rtkkrn. NIC HE Bcdc b r« mdmduel« Touren aa. ¿* S r dorthin fuhren. wo Bcclir. der x x am Spanne ndarn tz. Anaele rmnmrcwTVf Cu Wien ade r bekannter

U*u»<nk* dir huhiuitgefi

ü jfttfm i« Kunuwte und juiWrfmfthnkhe

Ekuftcactar.

Sc wallen die ocusxn Ennickiinfcn m e th fo . dar n « K u n t« c n Loaoorn axdedten oder die NLichcr d a Szene arfirrv Knn ftnbWm.

meneART &ARCHITECTURE TOURS BERLIN

ÜBER UNS

U€£R UN S PGESS£ PARTNER BLOC KONTAKT

BERLINS KUNST & ARCHITEKTUR ABSEITS ETABLIERTER WEGE

Diese sehr umfangreiche Single-Page hat sich dem Thema Design gewidmet und versucht dem User Schritt für Schritt näher zu bringen, was gutes Design ausmacht. Es wird eine Fülle von Informationen geboten. Bei der Masse an Infor­mationen wären hier und da ein paar Unterseiten vielleicht etwas übersichtlicher gewesen. Im Header der Seite erhält man allerding unter „Table of Contents" eine Übersicht zu allen behandelten Themen und kann sich vorher schon überlegen, welche Themen man interessant findet, sodass man nicht zwingend ganz nach unten scrollen muss, um zu wissen, welcheThemen auf der Seite behandelt werden.

ISot NU. 200« fjhiï NIC! Œ a«in Kuncviamwrfi« und A l A iuàrj» W6h*bu um A h gjnwn

Grçfflnlrt b A n n U L 'm A rK u n xh tsc r kerr-r* n S c t f»* U d c i ued N«k H ivm rsn n » v JrA n h w ia n und L>ttüaa£$dt<<M Kx t i u t u Bedarum.

NIC Hi. &trkt> «•

toult>diH<)knaM Ttiiü ¿uc Kuocdunonfaem, DraJarruiptWfrm Küwd*rn und Aichiarfem*

• iUwuh tUBtrmtam• CJmvtanjt t+ n & rrck

• F ~ *r.~r±J S o Jt

• in^n Ttitfi

PARTNER & FREUNDEW k W k U a M fc «

*«« fe SH »41 fc>4. . . b » y «

04/2013 webdesigner

TUTORIALDesign für eine App-Downloadseite,Teil 1 von Oliver Berghold

Design für eine App-DownloadseiteDownloadseiten für Apps sollten den Besucher schier überwältigen. Oliver Berghold zeigt Ihnen im ersten Teil seines Tutorials, wie Sie den Hintergrund für eine solche Seite mit Wow- Effekt gestalten können.

P hotoshop ist für viele Webdesigner das Werk­zeug der Wahl. Möchte man geometrische Ele­mente erstellen, oder lediglich einen Farbverlauf

anlegen, mag es effizienter sein, mit einem anderen Werkzeug zu arbeiten. Die Vorzüge von Photoshop las­sen sich allerdings besonders dann ausspielen, wenn es darum geht, Fotos und Grafiken stimmungsvoll und harmonisch zu kombinieren.Der Hintergrund des Web-Themes Nightshift ist eine Kombination aus einer fotografierten, organischen Tex­tur und vielen verschiedenen, in Photoshop erstellten Elementen mit unterschiedlichen Ebenen-Einstellun-

gen sowie einem Farbverlauf.Das Tutorial wurde mit der Version CS4 erarbeitet. Da sich die Menüführung, bzw. die Arbeitsfläche von Versi­on zu Version immer mal wieder verändert, ist es bei den einzelnen Arbeitsschritten teilweise notwendig, etwas um die Ecke zu denken.Es wird allerdings keine bestimmte oder die aktuellste Version vorausgesetzt und alle Arbeitsschritte sind größtenteils mit den einfachsten Bordmitteln zu reali­sieren. Die Verwendung der Photoshop-Brushes ist auch nicht an den Einsatz einer konkreten Programm­version gebunden.

Der Hintergrund

Im erstenTeil diesesTutorials zeige ich, wie man mit Pho­toshop relativ einfach und fast nur unter der Verwen­dung von Bordmitteln einen stimmungsvollen Hinter­grund gestaltet. Sie müssen gar nicht jeden Arbeitsschritt exakt nachvollziehen, um ein stimmiges Ergebnis zu er­zielen, so wie ich es zeige, ist es jeweils nur eine Möglich­keit, oder Variante die Elemente zu gestalten. Wählen Sie doch z.B. mal eine andere Textur für den Hintergrund. Auch beim Erstellen der Farbverläufe ist ein wenig Aus­probieren gefragt. Experimentieren Sie mit Durchmes­ser, Deckkraft, Farbtönen und Ebeneneinstellungen / Ebenenstilen, um das für Sie passende Ergebnis zu erzie­len. Für jeden Arbeitsschritt am Hintergrund lege ich je­weils eine neue Ebene an. Durch duplizieren oder lö­schen von Ebenen kann ich den Hintergrund im weiteren Verlauf schnell und übersichtlich modifizieren. Zuerst wird ein neues Dokument mit einer Breite von 1280 Px und einer Höhe von 1500 Px angelegt.

Los geht es mit dem Hintergrund. Für die Fläche wähle ich ein dunkles Grau (#111212) über das ich anschlie­ßend eine organische Textur lege.Ein kostenloses, umfangreiches Archiv mit hochaufge­lösten Texturen findet man unter http://www.cgtextu- res.com. Ich wähle eine Metalltextur, aber probieren Sie

54 webdesigner 04/2013

TUTORIALDesign für eine App-Downloadseite,Teil 1

ruhig etwas anderes. Die Textur lege ich in über den grauen Hintergrund, die Ebeneneinstellungen setze ich auf weiches Licht. ▼

Lichtreflexe ; ; . ; : ;; :.i

Mit dem Verlaufs-Werkzeug (G) und den Einstellungen Radialverlauf sowie Vordergrundfarbe zu Transparent er­zeuge ich in einem hellen metallischen Farbton (#869ba5) einen runden (radialen) Verlauf. ▼

Im nächsten Schritt wähle ich mit dem Auswahlrecht- eck-Werkzeug (M) die Fläche des Verlaufs bis zur Hilfsli­nie, entferne mit dem Schortcut Entfernen auf der Tasta­tur die Hälfte des Verlaufs und drehe, wiederum mit der Transformieren-Funktion (Umschalt+Strg.+T) die Verlaufs­fläche um 45 Grad und platziere sie über dem Hinter­grund. ▼

Mit der Transformieren-Funktion (Umschalt+Strg.+T) blende ich einen Begrenzungsrahmen ein um die Maße zu ermitteln und ziehe eine Hilflinie in die Mitte des Farbverlaufs. ▼

Diesen Arbeitsschritt wiederhole ich (auf separaten Ebenen) und zusätzlich mit der Farbe weiß und sowie #a89fa0 als Vordergrundfarbe. Den Radius der Verläufe variiere ich. Außerdem setze ich bei einigen Verläufen den Ebenenmodus auf Ineinanderkopieren. Jetzt plat­ziere ich die einzelnen Verlaufs-Elemente so, dass sie sich überschneiden. ▼

Ich habe insgesamt 20 Verläufe mit unterschiedlichen Ebenen- und Deckkraft-Einstellungen erstellt und auf dem Hintergrund platziert, so dass auch die Ecken des Hintergrunds davon ausgefüllt werden. Die Über­schneidungen, in Verbindung mit der Oberfläche der Textur ergeben den Effekt von Lichtreflexen. ►

04/2013 webdesigner 55

TUTORIALDesign für eine App-Downloadseite,Teil 1

Die Ebenen mit den bisher erstellten Verläufen werden ausgeblendet. Für mehr Kontrast füge ich jetzt einige weitere Verlaufs-Elemente mit derselben Technik hinzu. Als Vordegrundfarbe wähle ich schwarz, allerdings blei­ben die Einstellungen dieselben: Radialverlauf sowie Vordergrundfarbe zu Transparent. Diese Elemente plat­ziere ich im unteren Bereich des Dokuments. Im oberen Bereich kommt ein Farbraster dazu. ▼

Für das Raster verwende ich ein Photoshop-Brushset, das es als kostenlosen Download gibt: http://eliburford.deviantart.com/art/3-Large-Re- tro-Brushes-59553360

Nachdem ich den Pinsel installiert habe, indem ich die heruntergeladene Datei im Ordner Presets/Brushes meiner Photshop-Installation gespeichert habe, kann ich ihn über die Pinsel-Werkzeug-Palette (F5) aufrufen. Ich wähle die vorgegebene Auflösung des Pinsels, die

Vordergrundfarbe weiß und platziere ihn ausschnitts­weise oben rechts im Dokument. Die Ebeneneinstel­lungen setze ich auf Ineinanderkopieren und die Deck­kraft der Ebene auf 40 Prozent. ▼

Akzente

Für die besonderen Akzente in Farbe und Licht kom­men weitere Elemente hinzu.Mit dem Zeichenstift-Werkzeug (P) zeichne ich unre­gelmäßige Dreiecke, die ich mit jeweils unterschiedli­chen Ebenen-Stilen gestalte. Diese Elemente platziere ich im selben Winkel wie die vorher gezeichneteten Verläufe, auf deren Kanten. ▼

Wird ein Element nach dem Anlegen der Ebenen-Stile transformiert, bzw. gedreht, (das gilt auch für Smart- Objects, siehe unten), werden die angewendeten Fil­ter- und Ebeneneffekte während des Vorgangs deakti­viert. Das soll aber nicht weiter beunruhigen, sobald die Transformation bestätigt wird, nimmt die Ebene wieder ihren gewünschten Look an.

webdesigner 04/2013

TUTORIALDesign für eine App-Downloadseite,Teil 1

Wer übrigens lieber mit dem Zeichenstift-Werkzeug in Illustrator arbeitet, so wie ich, kann das tun und die Ob­jekte einfach per Drag and Drop über die Taskleiste aus Illustrator auf die Photoshop-Arbeitsfläche ziehen. Pho­toshop importiert diese Objekte dann als sogenannte Smart-Object in eine separate Ebene. ▼

Für das Arbeiten mit Smart-Objects gibt es eine Menge Optionen, die auf den Websites von Adobe und in di­versen Foren ausführlich erklärt werden: http://help. a d o b e . c o m / d e _ D E / p h o t o s h o p / c s / u s i n g / WS41 A5B796-6846-4e95-8459-95243441 El 26.html

Bei den Akzentuierungen ist es wichtig, allen Formele­menten durch Verläufe, Weichzeichnen und Reduzie­rung der Deckkraft ihre harten Kanten zu nehmen.Ich empfehle, erstmal mehrere Objekte zu erstellen und auf dem Dokumetzu verteilen. Erst wenn die Kom­position stimmt kommen die Stile und Effekte dazu. Letzte Korrekturen erfolgen dann beim Gesamt-Finish des Layouts.

Für weitere Lichtreflexe, bzw. Akzente kommen zwei Weichzeichnungsfilter zum Einsatz: Bewegungsunschär- fe und Gaußscher Weichzeichner. Dafür erstelle ich zu­nächst eine Auswahl Auswahlrechteck-Werkzeug (M) und fülle sie mit der Vordergrundfarbe. ▼

Jetzt wende ich auf meine (deaktivierte) Auswahl die Filter an, zuerst Bewegungsunschärfe, dann Gaußscher Weichzeichner. Die Einstellungen der Filter setzte ich, wie Screenshot zu sehen. ▼

Anschließend wird die gefilterte Auswahl gedreht und auf der Arbeitsfläche platziert.Ich wiederhole diesen Schritt, verwende für die Auswahl aber immer eine andere Dimension (höher, breiter, sch­maler usw.) und unterschiedliche Vordergrundfarben, von violett bis metallisch blau. Die Ebenen-Einstellunn- gen setze ich mitunter auf ineinanderkopieren. Auch Ebenen-Stile kommen zum Einsatz, vor allem Schein nach außen. ▼

l- Ö Ä H i * - .................................7 ................................1 •. . I u '1 -/- I 1 5-I

•/ P

ü • - 1 : r.1 *1 -1 . - ü

/ /

■ • 1

04/2013 webdesigner 57

TUTORIALDesign für eine App-Downloadseite,Teil 1

Verlauf und Farbkorrekturen

Jetzt kommt richtig Farbe ins Spiel - mit dem Verlaufs- Werkzeug (Q). Aber zunächst lege ich unter der Ver­laufsebene eine neue Ebene in der Vordergrundfarbe weiß an, um den Farbverlauf gut sichtbar zu machen. Danach werden bis auf diese beiden Ebenen alle Ebe­nen alles ausgeblendet.Übrigens: Wer sich nicht mit den Standard-Farbverläu- fen begnügen möchte kann diese im Werkzeugfens­ter ganz leicht anpassen. Photoshop bietet über die Verlaufs-Parameter-Einstellungen, vielseitige Optio­nen um die Art des Verlaufs, die Farbspektren und an­dere Einstellungen individuell anzupassen. So lassen sich eine Fülle unterschiedlicher Effekte erzielen. Au­ßerdem finden sich im Netzt unzählige unterschied­lichste Verläufe zum freien Download. Hier werden Sie bestimmt fündig:

http://myphotoshopbrushes.com/styles_and_ gradients/

Genau wie Pinsel (brushes) werden die Verläufe im entsprechenden Presets-Ordner gespeichert. An­schließend können sie über das Werkzeugfenster ge­laden werden. Verlaufsdateien (Gradients) haben die Endung .grd.Ich arbeite mit einem Standard-Farbverlauf und den Einstellungen wie im Screenshot. ▼

Die Ebenen-Einstellungen der Verlaufs-Ebene setze ich auf Ineinanderkopieren. Anschließend kann die weiße

Hintergrundebene wieder ausgeblendet oder gelöscht werden. Die graue Hintergrundebene und die Textur werden eingeblendet. Das Ergebnis könnte jetzt so aussehen. ▼

T— —"T——T— T — !T": f......r..... f

Nun sollen noch ein paar Lichtakzente hinzugefügt wer­den. Dafür setze ich ein weiteres mal das Pinsel-Werkzeug (B) mit zwei externen Pinselspitzen ein, die unter den fol­genden URLs erhältlich sind:

http://rabieshund.deviantart.com /art/Rabies- Star-Brushset-19527557

http://demosthenesvoice.deviantart.com/art/ Star-Brushes-97311837

Ich lege zunächst eine neue Ebene an und wähle dann Weiß für die Vordergrundfarbe. Mit den unter­schiedlich aufgelösten Pinselspitzen tupfe ich danach Akzente ein, die über sich auf die gesamte Arbeitsfläche verteilen. Diese Tupefer überlagern sich zum Teil. Ich bin dabei so vorgegangen, dass ich zunächst nur mit einer Pinselspitze gearbeitet habe. Dann habe ich zwischendurch das Ergebnis immer wieder geprüft, in­dem ich die anderen Ebenen eingeblendet habe, bevor ich weitere Pinsel hingezufügt habe.Anschließend setze ich die Einstellung der Ebene auf In­einanderkopieren und dupliziere sie. Jetzt blende ich die Ebenen mit den Akzenten und den Verläufen ein. Der Hintergrund ist fertig.

58 webdesigner 04/2013

Managed Hosting im Failover-Cluster

Im m er einen Schritt vorausmit individuellen Hostinglösungen vom Server bis zum Clustersystem inklusive Beratung, Planung und Service 24/7.

Für mehr Performance, Sicherheit und Verfügbarkeit, jeden Tag, rund um die Uhr.

hostserver.de/hosting ■ 0 64 21 / 175 175 0

l.'H O S T S E R V E RBerlin ■ Marburg ■ Frankfurt am Main

Sicherheit im Failover-ClusterJ ISO 27001 und 9001 zertifiziertes

Managed Hosting

%/ Hochsicherheits-Datacenter in Frankfurt/Main

✓ DE-CIX Direktanbindung

%/ Umfassender Datenschutz

>/ 24/7 Service und Support

Managed Hosting zertifiziert

nach ISO 9001 : 2008

und ISO 27001:2005

TUTORIALVideos in Wordpress von Jürgen Ortmann

WordPress Videos für WordPressIn Zeiten von YouTube und Co. ist die Einbindung von Videos in Webseiten fast schon zum Standard geworden. Dank des cleveren WordPress Video Plugins ist das zum Glück auch völlig problemlos möglich.

V K o m m e n ta re

31 Design

& Plugins

¿¡H Benutzer

T A W a r ir» A i in a

E ine wichtige Funktion von WordPress-Seiten ist heu­te das Darstellen multimedialer Inhalte. Das Thema Video boomt - fast jeder Besitzer eines Mobiltele­

fons kann heute qualitativ gute Videos drehen. Um all diese Videofilmer kümmern sich unzählige Plattformen wie You- Tube, Vimeo oder MyVideo. Auf WordPress-Webseiten kön­nen die Inhalte von diesen Portalen eingebunden werden. Mit dem WordPress Video Plugin (http://wordpress.org/ extend/plugins/wordpress-video-plugin/) ist es möglich, Material von sage und schreibe 65 Videoplattformen in WordPress-Beiträge einzubinden.

01ö Seiten

4 Kategorien

A SnhtonwArtor Installierte Plugins

Installieren

Editor

Bei WordPress anmeldenUm das WordPress Video Plugin nutzen zu kön­

nen, melden Sie sich zunächst als Administrator mit Ihrem Benutzerna­men und Ihrem Passwort an. In WordPress fahren Sie über den Ein­trag Plugins in der Navigationsleiste. Wählen Sie aus dem Kontextmenü Installieren aus.

&

Das Plugin suchenJL» Im Arbeitsfenster tip­

pen Sie nun „WordPress Vi­deo" in die Such-zeile ein. Klicken Sie auf die Schaltflä­che Plugins suchen, um WordPress nach passenden Plugins suchen zu lassen. ►

Rüg ins installierenSue ton HocN*** I £trv loftltn I Aoputtr I H m jf

Plugin* treten) öoo Funttonsurnteng von WotJPtos*

SuttenW o tJ P ro ** V«5*o *

*3 Das Plugin installierenln der Übersichtsliste suchen Sie nach dem Eintrag

WordPress Video Plugin. Flier klicken Sie auf den Link Jetzt installieren, um das Plugin in WordPress zu laden, -w

« A l l

60 webdesigner 04/2013

TUTORIAL

Wichtige Begriffe

Plugin -WordPress-Seiten lassen sich um Zusatzfunkti­onen erweitern. Die für diese Zusatzfunktionen ange­botenen kleinen Programme nennt man Plugins.

Shortcodes - Shortcodes sind verkürzte Schreibwei­sen für Code-Abschnitte. Sie erleichtern die Arbeit mit WordPress. Dem Beitrag wird hier ein kleiner Code- Schnipsel hinzugefügt, den WordPress dann richtig interpretiert.

Video-ID - Die Videoportale verwenden unterschiedli­che Systeme zur Identifikation ihrer Videos. Im Falle von YouTube und anderen Portalen ist die Video-ID eine Zeichenfolge, die Sie für das Einbinden verwen­den können.

WordPress Video aktivierenWordPress teilt Ihnen jetzt mit, dass das WordPress

Video Plugin erfolgreich installiert wurde. Wie immer bei Plugins fehlt aber noch die Aktivierung, um das Tool in Be­trieb nehmen zu können. Klicken Sie daher auf den Link Aktiviere dieses Plugin. ▼

twiémmn

Keine KonfigurationNachdem das WordPress Video Plugin aktiviert

wurde, gibt es jetzt im Dashboard unter Einstellungen das neues Untermenü WP Video Plugin, doch etwas einstellen kann man hier noch nicht. Wichtig ist allerdings der Link auf die Plugin-Dokumentationsseite Instruction (http://www.daburna.de/dokuwikl/doku.php/instructioh). Durch das installierte Plugin stehen Ihnen nun verschiedene Befehle für das Einbinden von Videos zur Verfügung. Diese Befehle finden Sie auf der Instruction- Seite aufgelistet. ▼

2 3 E in ste llu n gen Allgemein

Schreiben< Menü einklappen

Lesen

WP Video Plugin „

05

Videos in Wordpress

Die BefehlsübersichtAuf den ersten Blick wirkt die Liste mit den

Befehlsbeispielen überwältigend, sie ist aber recht klar sortiert. Zu jedem Videoportal führt die Seite Instruction ein Beispiel auf, welches zeigt, wie die Befehlsfolge lautet, w

You—» o tfrr

fot h » ufc f 1 .1*30 Im yf p*rmmAmy-ömMUDtiAV 1 ¿Vrfcdl fh9 Id te»Matt - yMocx** d«6tctocWri33bfeC$Youtub«[fOutuL* Id! ot *rt\ m tfO iLt» <3 ***T\P o rm jR v coatfMte» *«=*chczw b o * tn« c <« fc o -o z * ao** - \ytxnx*«CKÄW.aOP*J o [ y o u f Jb* a0MOZW_»0«i 2*0 175]

%YouCub« P liyk tl

c wCh hcl^-qf o f f n pfciy lh# d w C M U JM T V ilW G- ¡yeutwDeffeyUI EF1 '« W A ftO ttt t)

Beispiel: YouTubeDas Plugin bietet für

das Einbinden von YouTube- Videos die folgenden beid­en Möglichkeiten auf: [youtube id] oder, wenn Sie die Größe für das zur Verfüg­ung stehende Fenster mit angeben wollen, auch [youtube id width height]. ►

Ein Video

Unterstütze PlattformenDas WordPress Video P lug in un te rs tü tz t fo lgende V ideoporta le . (S tand: 19.11.2012)

123video.nl Guba SevenloadAniboom Hamburg 7 Video slideshare.comBlip.tv hulu smotri.comBreak IFILM Sumo.tvBrightcove ISeelt.TV teachertubeCBS Jumpcut TriluliluCeUfish Kewego Tu.tvClipfish Last.fm UnCutClipsyndicate LiveLeak VeohCollegehumor MEGAVIDEO VideotubeCom edyCentral. Metacafe Vimeocom Mncast.com Vsocialcurrent.com Mojvideo.com vzaar.comDlG.com MPORA.com WandeodotSUB MQSTO.com wat.tvFacebook MSN Yahoo! VideoFlickr Video MyspaceTV YoureporterFunnyorDie.com MyVideo YoutubeGameTrailers Novamov Youtube PlaylistGameVideos OnSMASH.comGeneric Flash reason.tvGlumbert ReelzChannelGoalVideoz RevverGoogle Video screencast-o-matic.Grouper com

04/2013 webdesigner 61

TUTORIALVideos in Wordpress

Youirtin **>STRATO Webshops Teil 1: Einrichtungsassistent

Kjiagortan Vötc rocntadan U

C A -» — ■*

u - stfSTBATO

4 ***** 9 »•••" P

□ a

STRATO ttfrtMtopa

mT*4I l\ EmtwitvoniraaOT 6 Al*.*

STRATO WMMfeftf* Tail (:T —*

“2 | • »owtf—PCC O

. — KonftQuraBon 1A1 aS*«p* Aü«nN■ r

u ■ h H»WiKA M

5. T«l. Oate-fcanli TrtaWm M Strata

0 3«wS^ i Umv

_ Vldao A/tfattung - ErMtfto«» ainanNfllMMmM

K "r

m 10WM-A

1 Ttfl: Nomapag* aXiftin ka%tmUo*«u m

CSD

* 77 «fl STRATO Wabtfop« lall J.

mA

l£|CD

1 - ' * H 1 normt ftUrtaono -

' 0 8Die YouTube-ID findenWie findet man nun die YouTube-ID? Wenn Sie

sich ein YouTube-Video anschauen, finden Sie unter dem Videofenster die Rubrik Teilen. Unter dieser Rubrik steht die Webadresse, unter der Sie das Video direkt erreichen können: http://youtu.be/S4b9zOUvOpQ. Der letzte Teil dieser Adresse (S4b9zOUvOpQ) bildet die YouTube-ID.

A Q D i c ID in WordPress einfügen-7 Kopieren Sie jetzt als erstes die YouTube-ID. Um

das Video nun in einem WordPress-Artikel zu verwen­den, wechseln Sie in Ihr Dashboard und legen über die Navigationsleiste mit Artikel > Erstellen einen neuen Ar­tikel an. Stellen Sie den Editor mit dem Reiter oben rechts auf HTML um. Das ist nicht zwingend erforderlich, macht aber die Arbeit mit dem Shortcode etwas übersichtli­cher, da keine störenden Formatierungen auftreten. Tra­gen Sie jetzt in das Textfeld einfach den Code [youtube S4b9zOUvOpQ] ein. ▼

10Das Videofenster einstellenSie können hier nicht nur schnell Ihr YouTube-Vi­

deo einbinden, sondern auch die Größe des Video-Fens­ters genau festlegen. Nehmen wir an, Sie möchten, dass das Video mit 600 Pixeln Breite und 300 Pixeln Höhe an­gezeigt wird. Dann erweitern Sie Ihren Eintrag einfach um diese Zahlen „600" und „300": [youtube S4b9zOU- vOpQ 600 300], Die erste Zahl gibt dabei immer die Brei­te an, die zweite Zahl legt die Höhe fest. ▼

Urtka

nf? Elrwirtluneert

Bearbeit en

Ein Video

STRATO Webshops Teil 1: Einrichtungsassistent Teilen 5 weitere Informationen

Dieser Eintrag wurcie veröffe'ilitf < in Allgemein von administrator. Permanenter Unk des Eintrags.

Ein Video

62 webdesigner 04/2013

TUTORIALVideos in Wordpress

11Video im TextSie können Videos auch zusammen

mit Text einbinden. Fügen Sie einfach neben Ihrem Shortcode den Text Ihres Beitrages ein. Das können Sie übrigens auch in der Editor-Einstellung Visuell machen, um zu sehen, wie Ihr Text formatiert wird. ►12 Beispiel: Vimeo

Für Vimeo sieht der Befehl ganz ähnlich aus: [vimeo id width height]. Auch hier benötigen Sie zunächst die ID des Videoclips. Diese wird bei Vimeo an mehreren Stellen angezeigt: in der Webadresse des Clips und im Teilen-Fenster (unser Beispiel).

13Den Clip einbindenVimeo nutzt dieselbe übersichtliche Shortcode-

Schreibweise wie auch der Befehl von YouTube. Auch hier können Sie Breite und Höhe des Videos einstellen, beispielsweise 250 x 150 Pixel. Für unser Beispiel mit dem Video 45710321 lautet der Shortcode dann [vimeo 45710321250150]. ►

MMehrere Videos in einem BeitragDank der problemlosen Shortcode-Schreibweise

des Plugins können Sie auch mehrere Videos neben- oder untereinander anzeigen lassen - auch aus unterschiedlichen Quellen.Für unser Beispiel haben wir diese Befehlsfolge genutzt: [vimeo 45710321 260 150] [youtube S4b9zOUvOpQ 260 150], Beide Videos wurden hier mit einer Breite (width) von 260 Pixeln und einer Höhe (hight) von 150 Pixel eingestellt. ▼

Ein VideoP a rm a ln fc : h ttp /^ rw w .w «D d 6S <gnef*rraga2 in .deA i& m o/© n*v iöeo*2 / E<J<tieren Kurzhnk a n z o g e n

H o c h la d a n ^ in fü jo n ^

j f / ~ : } « B t t ,• R V - S3 m

Absatz - l A w .T _ «2 * t>

[youtube S4b9z0Uv0pQ 200 120] Lorom ipsun dolor sil amo», consctetur sadipscing elctr, sed diam nonumy eirmod tempor irrvidunt ut labore et dotare magna aliquyam erat, sod diam vduDtua. At vero eos et accusam et justo duo dolores e*. ea rebum. Stet cita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem psum dolor sit amet, consetetur sadipscing elfr, sed diam nonumy eirmod tempor invidunt ut labore et dokxe magna aliquyam erat, sed diam voluptua. Ai vero eos et accusam et justo cuc dotares e: ea rebum. Ste: clita kasd gubergren, no sea takimata sanctus est Lorem

Ho 0 o __Dia* W m* .1 r#dd«t ß JJJJ

E-mailM6 C

M#dÜfNM VeiUlp 'UflSfl«-** »MW’S«* frtMMrMr.'l*Rr:li t i l t o r f u t U c r M " ■BSúllorfi l l ic r M f i

,a llo »# »U S cr»»n > < vi^o ii* > «p x <

T » « a ■/ (M i M A i r » l A p a I c, ...

Pr»vH»

Se'td Umac* ©S T R A T O I■ mfreffi w>-r^art«r>Jp

745710321Itik» wltfl you:

STRATO

AtoU «>k i t o «»*KXC*’>ON Kfettoc HLütf «W tAKMhliWartr Ofc*

M

MIHI H D

tMl M «0t» »np»n WK» mvtmQom

y<rmmnj tm mnm$ M « v 1 VN» *a M f« f car »«• f IM

0*0 «Mi mm« m «Mant

Bearbeiten

Ein Video

Vimeo YouTube

04/2013 webdesigner

Abonnieren S ieweb

ft tu*«ÜTpfOf»s

hineSi i S « u n 9|pW,e

s t °

ir>er

erond'>9e" s t .0ptÜ21

„o b »e 'W* ^ ttÄ wSo

m

-,VL*^ ¿ 5 - ^ * * * * 1 ft

1\ru

I Oö>

v

Ausgaben

ile als Abonnent:- Sie verpassen keine Ausgabe mehr

- Sie erhalten die aktuelle Ausgabe vor dem Erscheinungstermin frei Haus

- Sie sparen 16 % gegenüber dem Kauf am Kiosk

- Sie erhalten eine wertvolle Prämie Ihrer Wahl

m i s n yJuj

juruurSchnell und einfach bestellen

0 22 25/70 85 -367H & 'Hü f l w w w . s o n i c - m e d i a . d e

ho

los

ATH-M40 ( '

(fcaudio-techntriagwwff A

ATH-M40 ( '

(fcaudio-techn»rinvHj«» A

/UWM a tth a i

EffekteHaut. Figur

Portraits retuschieren mit PhotoshopVon der kaum sichtbaren Retusche bis zur makellosen Magazin­

schönheit entdecken sie mit diesem Buch den besten Weg für Ihre eigenen Bilder. Sowohl die erweiterten Techniken bei CS5, wie

auch versionsübergreifende Vorgehensweisen für verschiedenePorträtarten werden gezeigt.

ATH-mOtsEin Klassiker unter den Studio-Kopfhörern, der dank geschlos­sener Bauweise und linearer Abstimmung als echter Allrounder für Aufnahme, Monitoring und Live-Einsätze bestens eignet.

Kugelschreiber- VideokameraDieser edle Kuli sieht nicht nur gut aus. Eine integrierte Farbvi-

deokamera und 2GB USB-Speicher (für bis 60 min. Video und Ton) machen dieses Gadget zu einem Meisterwerk für die Hemdtasche.

TUTORIALSocial Media-Buttons von Jürgen Ortmann

Social Media-Buttons ansprechend gestaltenDamit die Vernetzung der eigenen Seite mit Facebook und Co. gelingt, sind attraktive Social Media-Buttons unverzichtbar. Wir zeigen Ihnen, wie Sie Buttons besonders ansprechend und dennoch unaufdringlich gestalten können.

Triff uns auf faceb o o k

# Fo lge uns auf tw itter

Social Media Buttons sind praktisch von

keiner Website wegzu­denken. Die Gestaltung

dieser Schaltflächen ist einfacher als man

vielleicht vermutet.

Triff uns auf X in g

B uttons sind ein zentrales Element bei der Conversi- on-Optimierung. Daher sollte der Gestaltung von Buttons besonders viel Aufmerksamkeit gewid­

met werden. Grundsätzlich sollte ein Button auch als sol­cher leicht identifiziert werden können. Außerdem muss er sich von den Inhalten einer Seite absetzen, ohne aber das Design zu sehr zu stören. Ein sehr beliebtes Mittel ist die plastische Gestaltung, die mithilfe von Verläufen, halb­transparenten Elementen und Schatten erreicht wird und dabei nach wie vor verblüffende Effekte erzielt.In diesem Tutorial möchten wir Ihnen ganz ausführlich zeigen, mit welchen Techniken und Kniffen sich ein pro­fessioneller Look erzielen lässt, der den Besucher förmlich zum Anklicken der Buttons drängt. Zudem kann der dabei erstellte Button sehr unkompliziert umgefärbt und mit neuem Logo und Text versehen werden. Wichtig ist vor allem die Entwurfsphase. Viele Designer beginnen mit den Entwürfen direkt am Computer. Für meinen Button habe ich zunächst auf dem Papier verschiedene Entwürfe ausprobiert, bis ich einen Entwurf gefunden habe, mit dem Ich rundum zufrieden war. Der Vorteil solcher Skiz­zen liegt vor allem darin, dass man gezwungen ist, mehr zu abstrahieren. In Photoshop ist man dagegen viel zu sehr damit beschäftigt, sich mit den Werkzeugen, Einga­bewerten, Filtern und anderen Funktionen zu beschäfti­gen, wobei man schnell den Blick für das Ganze verliert. Außerdem bleiben auf dem Papier alle Ideen gleichzeitig sichtbar, wodurch man sich ursprünglich verworfene Ide­en schneller wieder ins Gedächtnis rufen kann, wenn sich diese später doch als nützlich erweisen.

m Der EntwurfWie bereits erwähnt, habe ich die Buttons zu­

nächst auf dem Papier skizzenhaft entworfen, bis ich mit einer Skizze zufrieden war und eine klarere Vorstellung von den fertigen Buttons hatte. Die Grundidee dabei war, bunte, attraktive Buttons zu kreieren, die aber den­noch so neutral gehalten sind, dass sie sich problemlos in die meisten Webseiten einfügen. Die Buttons sollten außerdem einen Text mit einer Aufforderung enthalten, wie„besuch uns auf xy". Deshalb müssen sie in der Breite genügend Platz für die Phrasen bieten.

pv Die richtige Arbeitsfläche\ j Wenn das Konzept steht, kann mit der Arbeit in Photoshop begonnen werden. Öffnen Sie das Pro­gramm und legen Sie mit„Datei > Neu" eine Arbeitsflä­che von 1000 x 1000 Pixeln, 150 dpi im RGB-Modus an. Zunächst soll der Facebook-Button gestaltet werden, der dann später als Grundlage für die anderen Buttons dient. ▼

r.* JL% ■*- 1 • . .. 1

6 6 webdesigner 04/2013

TUTORIALSocial Media-Buttons

Q Rechteck mit runden EckenLegen Sie In der„Ebenen"-Palette eine neue lee­

re Ebene an. Wählen Sie dann das „Abgerundete Recht­eck-Werkzeug". Stellen Sie in der Optionsleiste einen Ra­dius von 5 Pixeln für die Eckenrundung ein. Klicken Sie dann auf den kleinen Pfeil neben dem „Eigene-Form- Werkzeug". Geben Sie dort die Werte für die Breite („B") und die Höhe („H") ein. Bei mir sind dies 670 Pixel für die Breite und 96 Pixel für die Höhe. Klicken Sie dann in die Arbeitsfläche, um den Pfad für Rechteckform zu erzeu­gen. Wenn Sie mit gedrückter Strg-Taste in die Form kli­cken, erscheinen Anfasspunkte an den Ecken und Sie können die Form verschieben. Öffnen Sie dann die „Pfade"-Palette und doppelklicken Sie dort auf den Ein­trag „Arbeitspfad". Geben Sie dann in dem Dialog „Pfad speichern" den Namen„Rechteck" ein und klicken Sie auf „OK". Aktivieren Sie danach den Pfad in der„Pfade"-Palet- te erneut und öffnen Sie dann wieder die„Ebenen"-Pa- lette. ▼

vrt-i ew.TxrsöM)]b</K AusvtfthJ iittcf Fcnjtcr H Ä c

Facebook-BlauU lU m die Pfadfläche unseres Rechtecks im typi­schen Facebook-Blau einzufärben, habe ich zunächst die Farbe auf der Facebook-Seite mit einem Color-Picker- Add-on aufgenommen. In Illustrator habe ich dann bei aktivem Rechteckpfad den Farbwähler für die Flächen­farbe geöffnet und dort den Hexadezimalwert (3b5998) eingefügt, sodass das Rechteck in dem Blauton gefärbt wird. Klicken Sie nun in der Palette „Farbfelder" auf den Button„Neues Farbfeld", um das Facebook-Blau zur Palet­te hinzuzufügen. ▼

facebook

c Rechteck blau füllen\ J Rechtsklicken Sie bei immer noch aktivem Form- Werkzeug in den Rechteckpfad und wählen Sie aus dem Kontextmenü „Auswahl erstellen..." und bestätigen Sie den Dialog mit „OK". Wählen Sie dann in der Werk­zeugleiste auf das „Füllwerkzeug". Gehen Sie dann mit dem Cursor in die„Farbfelder"-Palette und klicken Sie auf das Facebook-Blau, um die Farbe zu laden. Klicken Sie nun in die Auswahl, um das Rechteck blau zu füllen.

VerlaufDas Blau des Rechtecks soll nun mit einem Ver­

lauf überlagert werden. Klicken Sie dazu nun in der „Ebenen"-Palette auf das „fx"-Symbol und wählen Sie aus dem Menü die Option „Verlaufsüberlagerung". In dem Dialog, der sich daraufhin öffnet, ist ein Verlauf von schwarz nach weiß voreingestellt. Wählen Sie bei „Füllmethode" die Option „Weiches Licht". Dadurch wird der Verlauf transparent und das Blau scheint durch. Mit dem Verlauf wirkt das Rechteck nun so, als wäre es gewölbt. ▼

' S *

©

f \ mm7 Schein nach innen\ J / Die Schaltfläche soll einen dünnen, leuchtenden Rand erhalten. Dies erreichen wir mit dem Ebenenstil „Schein nach innen". Klicken Sie dazu in der„Ebenen"- Palette auf das „fx"-Symbol und wählen Sie aus dem Menü die entsprechende Option. Ändern Sie im „Ebenenstile"-Dialog die Farbe für den „Schein nach in­nen", indem Sie auf das kleine Farbfeld klicken und dann im„Farbwähler"-Dialog ein mittleres Blau auswählen. Im Beispiel handelt es sich um #2b4482. ▼

r V * 0 > N r»«N »W w - w * otfiv

i IM #

I« ß l M b

1f

04/2013 webdesigner 67

TUTORIALSocial Media-Buttons

Q SchlagschattenW O a Is nächstes soll der Button einen Schlag­schatten erhalten. Dieser sorgt dafür, dass der Button sich besser in das Design einer Website einfügt. Wäh­len Sie dazu über das „fx"-Symbol den Ebenenstil „Schlagschatten" aus. Schalten Sie im Dialog die Opti­on „Globaler Lichteinfall verwenden" aus. Stellen Sie dann einen Winkel von 120° ein. Wählen Sie außer­dem folgende Werte: „Deckkraft" 75 Prozent, „Distanz" 5 Pixel,„Überfüllen" 0 Pixel und „Größe" 5 Pixel. Bestäti­gen Sie dann mit „OK". Der Schatten kann, wie alle an­deren Ebenenstile, bei Bedarf in der Photoshop-Datei noch verändert werden. ▼

/^VQEinen Kreis einfügenZ^Um den Kreis einzufügen, wählen Sie von den

Formwerkzeugen das „Ellipse-Werkzeug" aus. Klicken Sie dann in der Optionsleiste wieder auf den kleinen Pfeil, um dort unter den „Ellipse-Optionen" eine feste Größe einzugeben, nämlich 70 Px für Breite („B") und Höhe („H"). Klicken Sie in die Arbeitsfläche, damit der Kreis erzeugt wird. Platzieren Sie den Kreis dann links auf dem Button, indem Sie ihn bei gedrückter Strg- Taste anklicken und verschieben. Wenn Sie den Kreis horizontal mittig auf dem Button platzieren, müssten ober- und unterhalb des Kreises je 13 Pixel Platz sein bis zum Rand des Buttons sein (der Button hat eine Höhe von 96 Pixeln). Platzieren Sie den Kreis außer­dem so, dass auch zum linken Rand hin ein Abstand von 13 Pixeln bleibt.Blenden Sie dazu die Lineale ein und stellen Sie diese auf Pixel um, indem Sie einen Rechtsklick auf das Line­al machen und die entsprechende Option auswählen. Nun können Sie mit der Maus Hilfslinien vom Lineal in die Arbeitsfläche ziehen, mit deren Hilfe das Pixel-ge- naue Arbeiten sehr gut gelingt. Außerdem ist die „lnfo"-Palette („Fenster > Informationen") für solche Arbeiten sehr hilfreich. ▼

i «*Qla \ aZ__ =__ =__ 2__ 2

10. Den Kreis füllenLegen Sie nun eine neue Ebene an. Rechtsklicken

Sie dann in den Kreis und wählen Sie die Option„Füllop- tionen". Daraufhin öffnet sich der Dialog „Ebenenstile". Wählen Sie dort den Ebenenstil „Farbüberlagerung". Öff­nen Sie danach per Klick auf das kleine Farbfeld den „Farbwähler"-Dialog und stellen Sie schwarz ein (#000000) und bestätigen Sie mit „OK". Wählen Sie außer­dem im „Farbüberlagerung"-Dialog „Farbig abwedeln" als„Füllmethode". Dadurch erscheint die Kreisfläche nun in einem matten Blau. ▼

1

>UM

Wählen Sie nun in dem„Ebenenstile"-Dialog die Option „Abgeflachte Kante und Relief". Stellen Sie dort unter „Struktur" folgende Werte ein: „Stil" -„Abgeflachte innen", „Technik" - „Abrunden", „Farbtiefe" 20 Prozent, „Größe" 2 Pixel,„Weichzeichnen" 0 Pixel. Unter„Schattierung" müsste der„Winkel" bei -60° stehen, wenn die Option „Globaler Lichteinfall verwenden" ein­geschaltet ist. Senken Sie unter „Lichtermodus" die „Deckkraft" auf 50 Prozent und unter„Tiefenmodus" die „Deckkraft" auf 30 Prozent ab. ▼

IWfc J M %

■ — -

<*** u i •*)----------------------------- | IN ■

I Q■OB« —

6 8 webdesigner 04/2013

TUTORIALSocial Media-Buttons

12Schein nach innenUm bei dem Kreis dem Eindruck einer Vertie­

fung den letzten Schliff zu geben, habe ich zusätlich noch einen „Schein nach innen" eingefügt. Das vorein­gestellte Hellgelb habe ich über den „Farbwähler" durch schwarz ersetzt und diesen dann mit einem „Überfüllen" von 11 und einer„Größe" von 8 Pixeln ver­sehen. Dadurch wirkt der „Schein nach innen" wie ein ringförmiger Schatten. ▼

» * « *

» * « *

13Das Logo besorgenNun brauchen wir das Facebook-F als Icon für die

Kreisfläche. Zwar ist das Facebook-Logo in einer Schrift­art gehalten, die gratis heruntergeladen werden kann („http://www.mediafont.com/font-11 -facebook_letter_ faces.html"), dennoch möchte ich hier zeigen, wie Sie das„f" aus einer Grafik vektorisieren können. Auf diese Weise lässt sich jedes beliebige Form nachbauen. Schauen Sie sich im Internet nach Facebook-Logos in einer guten Auflösung um und speichern Sie ein geeig­netes Logo auf Ihrem Rechner. Gehen Sie dann in Photo­shop zu „Datei > Platzieren", navigieren Sie in dem Da­teibrowser zu dem Logobild und klicken Sie auf „Platzieren". Drücken Sie dann Enter, um das Platzieren zu bestätigen. ▼

facebook

rechtwinklig oder im 45°-Winkel zum letzten Ankerpunkt stehen.Dort wo das„f" Kurven hat, klicken Sie einfach von dem Punkt, an dem die gerade Linie in eine Kurve übergeht, und setzen den nächsten Pfadpunkt am anderen Ende der Kurve, dort wo die Kurve wieder in eine gerade Linie übergeht, so wie es im Screenshot dargestellt ist. Schlie­ßen Sie zum Schluss den Pfad, indem Sie auf den An­fangspunkt klicken. ▼

<5

I r Das Logo vektorisieren 2J Um nun die Kurven in den Pfad einzufügen, kli­

cken Sie bei gedrückter Strg-Taste auf den Pfad, so dass die Ankerpunkte sichtbar werden. Wenn Sie nun den Cur­sor auf den Pfad zwischen zwei Ankerpunkte stellen, wird neben dem Cursor ein kleines Pluszeichen angezeigt. Per einfachem Klick setzen Sie einen Kurvenpunkt auf den Pfad. Diesen können Sie mit gedrückter Maustaste ver­schieben, sodass sich zwischen den benachbarten Anker­punkten eine Kurve bildet. Außerdem besitzt der Punkt zwei Hebel, mit denen die Kurve weiter angepasst wer­den kann. Setzen Sie jeweils an den beiden Kurven des„f" einen Kurvenpunkt und verschieben Sie diesen, bis er ge­nau auf der Kurve liegt. Formen Sie dann mithilfe der He­bel die Kurve zurecht, bis sie exakt auf dem Umriss des„f" liegt. Die Hebel können Sie ebenfalls mit dem Cursor bei gedrückter Strg-Taste verschieben. Sollte eine Kurve völlig missraten sein, können Sie den Kurvenpunkt mit einem einfachen Klick wieder entfernen und mit einem neuen Kurvenpunkt von vorne beginnen. ▼

M Das Logo vektorisieren 1Legen Sie nun eine neue Ebene an und wählen

Sie das„Zeichenstift-Werkzeug". Vergrößern Sie die An­sicht so, dass das „f" die Arbeitsfläche füllt. Klicken Sie dann mit dem Zeichenstift-Werkzeug zunächst einen Pfad aus geraden Linien entlang der Umrisse des„f". In­dem Sie während des Setzens der Ankerpunkte die Shift- Taste gedrückt halten, werden nur Linien erzeugt, die

04/2013 webdesigner 69

TUTORIALSocial Media-Buttons

16Pfad verkleinern und füllenGehen Sie nun in die „Pfade"-Palette, doppelkli­

cken Sie auf den „Arbeitspfad" und speichern Sie ihn dann unter dem Namen „Facebook-f" ab. Blenden Sie dann die Ebene mit dem importierten Facebook-Logo aus. Rechtsklicken Sie dann bei immer noch aktivem „Zeichenstift-Werkzeug" in den Pfad und wählen Sie„Frei transformieren Pfad". Halten Sie die Shift-Taste gedrückt und verkleinern Sie den Pfad so weit, bis das„f" in den Kreis des Buttons passt. Verschieben Sie den Pfad in den Kreis und bestätigen Sie mit Enter. Rechtsklicken Sie nun erneut in den Pfad und wählen Sie „Pfadfläche füllen". Stellen Sie in dem Dialog dann bei „Vordergrundfarbe" die Option „Weiß" ein und bestätigen Sie mit „OK". ▼

17m —

Die KerbeDer Bereich mit dem Icon in dem Kreis soll durch

eine senkrechte Trennlinie von dem Bereich, der die Be­schriftung trägt, abgegrenzt werden. Die Trennlinie soll zudem eine Schattierung erhalten, sodass sie wie eine Kerbe aussieht. Blenden Sie zunächst die Hilfslinien ein und ziehen Sie eine senkrechte Hilfslinie ein, die 96 Pixel vom linken Rand des Buttons entfernt ist. Stellen Sie in der Werkzeugleiste #42454a als Vordergrundfarbe ein. Wählen Sie dann das „Linienzeichner-Werkzeug" und stellen Sie in der Optionsleiste eine „Stärke" von einem Pixel ein. Ziehen Sie nun eine senkrechte Linie entlang der neuen Hilfslinie ein, die die gleiche Höhe hat wie der Kreis. Damit die Linie wie eine Kerbe aussieht, benötigt sie noch einen Ebenenstil. Rufen Sie die „Ebenenstile"- Palette auf und setzen Sie ein Häkchen bei „Abgeflachte Kante und Relief". Stellen Sie dann dort die folgenden Werte ein: „Stil: Abgeflachte Kante außen", „Technik: Ab- runden"„Größe: 0 Pixel",„Weichzeichnen: 1 Pixel",„Winkel: -60", sowie eine „Deckkraft" für„Lichter-" und „Tiefenmo­dus" von jeweils 75 %. ▼

I oM •

Die Beschriftung soll nun mit dem „Textwerk­zeug" eingefügt werden. Wählen Sie das Werkzeug, stel­len Sie in der Optionsleiste weiß als Farbe sowie„Myriad", „Bold" und „22 Pt" ein. Tippen Sie nun den Text „Triff uns auf facebook" ein. Schieben Sie dann die Schrift über den Button, sodass sie horizontal mittig auf dem Button steht. Damit nun auch die Beschriftung aussieht, als wäre sie in den Butten eingekerbt, wird auch sie mit ei­nem Ebenenstil versehen. Rufen Sie wieder die „Ebenenstile"-Palette auf und wählen Sie dort „Abge­flachte Kante und Relief". Wählen Sie dieses Mal folgende Werte: „Stil: Abgeflachte Kante innen", „Technik: Abrun­den", „Größe: 1 Pixel", „Weichzeichnen: 0 Pixel" „Winkel: -60", sowie eine „Deckkraft" für „Lichter-" und „Tiefen mo­dus" von jeweils 75 %. t

f~A N* VttY T,* +4 ««*** IKK*?)ibcac Aw m W Ntat Am *

.13....Kf « »■ > ml

je tmjSw kr»- ' l -11*■ 'w*i

__fl

Triff uns auf facebook

V'N*»

CZK

ft*vrS &51 VOTC*«

19Weitere ButtonsDer Facebook-Button ist damit fertig und kann

bequem als Grundlage für weitere Buttons genutzt werden. Sofern Sie die weitere Buttons in dieser Pho- toshop-Datei anlegen wollen, ist es ratsam, alle Ebe­nen des Facebook-Button zunächst in einer Gruppe zusammenzufassen. Klicken Sie dazu einfach auf das Ordnersymbol unten in der„Ebenen"-Palette. Markie­ren Sie dann die Ebenen des Buttons bei gedrückter Strg-Taste und ziehen Sie sie dann mit der Maus über den Ordner. Benennen Sie dann den Ordner in„Face- book" um. Der Ordner kann nun bequem dupliziert werden (Rechtsklick >„Gruppe duplizieren").Für die weiteren Buttons muss dann die Farbe und Be­schriftung geändert werden. Zudem müssen Sie sich entsprechende Icons, wie etwa den Twitter-Vogel im Falle einesTwitter-Buttons, besorgen und vektorisieren.

70 webdesigner 04/2013

MAuthorised Systems Integrator

ADOBE CREATIVE CLOUD FÜR TEAMS ROADSHOW

E X K L U S IV E F E A T U R E S FÜ R KREATIV-TEAM S D A T E IF R E IG A B E IM TEAM UND FÜ R K U N D EN

Z E N T R A L IS IE R T E S L IZ EN Z M A N A G EM EN T D IG ITA LES P U B L IZ IE R E N ..A D O B E ED G E T O O LS * ;

R E S P O N S IV E W E B D E S IG N . ■ •.M USE, HTML5 . 'T- '

Hamburg: 09.04.2013 Stuttgart: 11.04.2013

München: 12.04.2013 Wien: 18.04.2013

Köln: 19.04.2013 Berlin: 23.04.2013

□EgtflL J I + —k . . . . i

r ;v % ^

Das Event für alle Unternehmen, die innovative Ideen für Design, Web und Video umsetzen und mehrere Adobe Kreativ-Arbeitsplätzs h^ben.

JETZT ANMELDENwww.cancom.de/CreativeCloudTeam

TUTORIALSEO für WordPress von Tobias Henke

SEO für WordPressAuch unter SEO-Gesichtspunkten bietet WordPress zahlreiche Möglichkeiten. Wir nennen Ihnen die besten Techniken, um Ihre Seite zu optimieren.

W ordPress gilt schon in seiner Standardinstal­lation als das wohl SEO-freundlichste Con­tent- Management- System überhaupt. Das

bedeutet natürlich nicht, dass es nicht trotzdem wichtig und sinnvoll ist, seine Seite für Suchmaschinen weiter zu optimieren. Dies betrifft natürlich den Content, aber auch Dinge wie beispielsweise die richtige Auswahl ei­nes SEO-Plugins. Im Folgenden möchte ich Ihnen zei­gen, wo man bei einer WordPress-Seite in Sachen Such- maschinenoptimierung ansetzen muss. Themen sind hier neben den bereits erwähnten beispielsweise die richtige Verlinkung eigener Beiträge, sowie die Frage, wo man Keywords einsetzt.:]] Keywords gehören in die Verlinkung.Wer einen Blog betreibt, sollte auf jeden Fall neuere mit älteren Artikeln verlinken und einen Track-/Pingback set­zen, sodass es für User einfacher wird, ältere Artikel zu finden. WordPress setzt standardmäßig einen Pingback von älteren auf neuere Artikel, aber für den Fall, dass das System mal Macken hat, ist es immer sinnvoll, auch ma­nuell Trackbacks zu setzen.Wichtig für die Suchmaschinen ist, dass man wichtige Keywords direkt innerhalb des Links platziert. Also bei­spielsweise eine Formulierung wie„F1ier der neue Artikel „SEO für Word Press" komplett in den Link setzen. Oft fin­

det man Formulierungen wie. „Unseren neuen Artikel zum Thema XY finden Sie hier", wobei nur das Wort„hier" verlinkt ist. Suchmaschinen fällt es im letzten Beispiel schwerer den Link thematisch einzuordnen, daher sollte man hier, wie gesagt, immer mit Keywords arbeiten.

Nutzen Sie die" sprechenden" Permalinks

Mit „sprechenden Permalinks" ist gemeint, dass der Name der URL bereits verdeutlicht, worum es auf der je­weiligen Seite inhaltlich geht. Oft enthalten sprechende Permalinks beispielsweise den Namen und das Datum eines Artikels. Die Funktion der sprechenden Permalinks ist in WordPress standardmäßig deaktiviert. In WordPress haben Sie die Möglichkeit, sich zwischen drei Voraus­wahlen von sprechenden Permalinks zu entscheiden. Sie haben die Wahl zwischen einem Link, der neben dem Titel noch das genaue Erscheinungsdatum des Ar­tikels enthält, oder Sie können sich für eine Variante ent­scheiden, die den Namen des Artikels, das Erscheinungs­jahr und den Monat enthält. Die dritte Variante bezieht sich auf ältere Artikel, die sich bereits im Archiv befinden. Außerdem haben Sie die Möglichkeit, sich für eine be­nutzerdefinierte Struktur zu entscheiden.

webdesigner 04/2013

TUTORIALSEO für WordPress

O Standard http: //www.webdesigner-magazin .de/demo/ ?p=l23

0 Tag und Nam e http://www.webdesigner-magazin.de/demo/20l3/e2/25/Beispielbeitrag/

0 Monat und Nam e http://www.webdesigner-magazin.de/demo/20l3/02/Beispielbeitrag/

0 Numerisch http://www.webdesigner-magazin.de/demo/archive/l23

9 Beitragsname http://www.webdesigner-magazin.de/demo/Beispielbeitrag/

Benutzerdefinierte Struktur http://www.webdesigner-magazin.de/demo / Ä p o s t n a m e V

Z w ischen diesen E in s te llungen kö n n e n Sie s ich entsche iden.

Auch Bildern sollten Sie einen für sich sprechenden Titel verpassen, das heißt nicht Bildnamen wie Bild 123.png verwenden, sondern aussagekräftige Namen wie bei­spielsweise Fritz-Müller.png nutzen, sodass man schon an dem Dateinahmen erkennt, was auf dem Bild zu se­hen ist.

bloginfo(,description'); ?></title><?php} eise {?><titlex?php wp_title(,|', true,,right'); bloginfo(,name');

?></title><?php}?>

Vorteile der sprechenden „Permlinks"

Ein besonders offensichtlicher Vorteil der sprechenden Permlinks ist, dass eine aussagekräftige URL userfreund­licher ist, als eine Nummernkombination aus der über­haupt nichts über den Content hervorgeht. Außerdem ist es suchmaschinen-freundlicher, wenn in der URL be­reits die Artikelüberschrift und das ein oder andere Key- word enthalten ist, so dass die Suchmaschine beispiels­weise die Unterseiten zu einem bestimmten Oberthema besser sortieren kann.Um die Permalink-Struktur aus dem Admin-Bereich aktu­alisieren zu können, benötigt man Zugriff auf die .htac- cess-Datei. Diese Datei muss sich im Hauptordner von WordPress befinden.Damit die Änderungen auch aktiv werden, muss die .ht- access-Datei beschreibbar (CHMOD 666) sein. Außer­dem muss das Apache-Modul mod_rewrite aktiv sein.

Die Suchmaschinen schauen analysieren im Titel ledig­lich die ersten 60-70 Zeichen an. Deshalb gehören die Überschrift und wichtige Keywords auf jeden Fall in den Seitentitel. Eine Möglichkeit ist, dass man mit Hilfe eines Code-Editors folgendes in die header.php eingibt:

Dieser Code fragt jedes Mal, ob man sich gerade auf der Startseite befindet oder nicht. Ist dies der Fall, wird zu­nächst der Name des Blogs/der Seite in die URL ge­schrieben und dann die Kurzbeschreibung (Descripti- on).Befindet man sich dagegen nicht auf der Startseite, wird zuerst der Titel der Unterseite genannt und anschlie­ßend folgt ein Verweis auf den Titel des gesamten Blogs/ der Seite.

Zwischenüberschriften sind attraktiv für die Suchmaschine

Zwischenüberschriften sind nicht nur ein gutes Mittel, um Texte zu strukturieren, sie haben auch für Suchma­schinen einen nicht zu unterschätzenden Wert. Um das zu verstehen, ist es wichtig, dass WordPress bekanntlich auf HTML basiert. Es zieht die Inhalte aus der Datenbank der jeweiligen WordPress-lnstallation und generiert dar­aus eine dynamische XHtml-Seite.Eine wichtige Rolle bei der Gestaltung der Zwischen­überschriften ist der WYSIWYG-Editor für HTML. WYSIWYG steht für„What you see is what you get" und meint in diesem Fall, dass die Darstellung der Seite im Editor während der Bearbeitung mit der Darstellung der Seite auf einem anderen Gerät übereinstimmt. Im WYSIWYG-Editor für HTML hat man sechs verschiedene Elemente zur Auswahl, mit deren Hilfe man den einzel­nen Überschriften und Zwischenüberschriften ein un-

<?php if (is_homeO) {?><titlex?php bloginfo(,name'); ?> - <?php

So optimieren Sie den Seitentitel

04/2013 webdesigner 73

TUTORIALSEO für WordPress

terschiedlich hohe Ordnung geräumt wird und zwar von H1 (hoch) bis H6 (niedrig). Seit WordPress 3.0 hat WordPress die Ordnung H1 für die Artikel- oder Blog- überschriften reserviert, so dass man nur noch zwischen den Überschriften der Ordnung H2-H6 wählen kann. In­zwischen gibt es deutliche Anzeichen dafür, dass Gool- ge den H1-Überschriften eine eher geringe Bedeutung beimisst und die Kategorien H2 und H3 eher entschei­dend für ein gutes Ranking sind.Man sollte die Überschriften nach semantischen Ge­sichtspunkten wählen, also wichtiger Inhalt bekommt eine Überschrift der Ordnung H2 und H3 und Inhalt der weniger wichtig ist dementsprechend eine Überschrift niedriger Ordnung. Die Suchmaschine wird es durch ein hohes Ranking danken, wenn man seinen Inhalt richtig strukturiert.

Dublicate Content verhindern

Mit Dublicate Content ist gemeint, dass identischer In­halt unter verschiedenen URLs erscheint. Das kann bei­spielsweise dann passieren, wenn ein Autor denselben Inhalt auf verschiedenen Webseiten veröffentlicht. In Blogs passiert das besonders schnell, da ein Artikel unter anderem auf der Startseite als auch unter dem jeweili­gen Permalink auftacht. Wenn Fälle von Dublicate Con­tent auftauchen, müssen die Suchmaschinen sich für eine Seite entscheiden, der sie den jeweiligen Inhalt zu­schreiben. Alle anderen Seiten, auf denen derselbe In­halt auftaucht werden als „Dubletten" ignoriert. Die Pro­blematik kann auf mehrere Arten angegangen werden. Einerseits gibt es einige SEO-Plugins für WordPress, die das Problem lösen. Hier sei beispielsweise auf das kos­tenpflichtige und sehr umfangreiche Plugin wpSEO ver­wiesen. Eine kostenlose Alternative ist izioSEO. Diese Plugins arbeiten automatisch und teilen der Suchma­schine mit, welches die relevante URL ist. Man kann das ganze Problem aber auch manuell entschärfen, in dem man mit „Weiterlesen"-Links arbeitet, wie es beispiels­weise die großen Nachrichtenportale tun. Auf den Über­sichtsseiten muss man klicken, um weiterlesen zu kön­nen und nur auf einer Seite ist der vollständige Artikel zu sehen und das Problem des Dublicate Contents ist somit zumindest innerhalb eines Blogs gelöst.

So verwenden Sie die richtigen Metatags

Die Bedeutung der Metadatan für die Suchmaschinen ist inzwischen zwar zurückgegangen, für Google sind sie angeblich deutlich weniger wichtig als früher, aber es schadet trotzdem nicht sie zu optimieren. Vor allem, da

dies mit recht wenig Aufwand möglich ist.Unter den Suchergebnissen taucht bei jeder Suchma­schine ein kleiner Text auf, die Meta-Description. Diesen Text können Sie mit Hilfe des Plugins mit dem Titel „All- in-One-SEO-Pack" bequem editieren. Wenn Sie das Plug­in nutzen, haben Sie die Möglichkeit, sich für einen Home-Title, die Home-Description, die Homekeywords, den Post Titel und den Page Title zu entscheiden.In den Home Titel gehört das zentrale Keyword Ihrer Sei­te sowie den Namen Ihrer Seite ein. In die Homediscrip- tion gehört wie bereits erwähnt der Text, den Sie unter Ihrem Suchergebnis gerne lesen würden. Die Homekey­words haben für Google inzwischen keine Bedeutung mehr. Hier können Sie natürlich trotzdem die Keywords eingeben, die für Ihre Seite relevant sind. Wenn Sie beim Post Title „%post-title%" eingeben bedeutet das, dass für jeden Artikel immer nur der von Ihnen festgelegte Arti­kelname verwendet wird. Beim Pagetitle können Sie ähnlich verfahren und mit diesem Befehl arbeiten: %page_tltle% | %blog_title%.

SEO-Plugins für WordPress

Es gibt inzwischen mehrere SEO-Plugins für WordPress. Diese hier einzeln detailliert vorzustellen und die ge­naue Funktionsweise vorzustellen, würde den Rahmen des Artikels sprengen, da allein SEO-Plugins für Word­Press Stoff für einen ausführlichen Artikel liefern. Daher werde ich die bekanntesten SEO-Plugins hier kurz nen­nen und mich auf einige allgemeine Angaben be­schränken:• Das vielleicht umfangreichste SEO-Plugin ist das kos­tenpflichtige wp SEO. Es bietet umfangreiche Einstel­lungen und ist dank ständiger Aktualisierung immer auf dem aktuellsten Stand.

•f I . * W l H l * W I C ....................

D ank sehr schneller A ktua lis ie rungen ist wpSEO das w o h l beste SEO-Plug­in fü r WordPress. wpSEO le g t beispielsweise nach w ie vo r großen W ert a u f die o p tim a le A npassung de r M etada ten , w ie Sie h ie r erkennen können:

74 webdesigner 04/2013

TUTORIALSEO für WordPress

Textfeld a ls P latzhalterVergaDO W w HO« wWwrHJn • OxUW pfO ö erecn

Startseile

Bo < träge

Seiten

InhantiinnMed»enK ategonen

Suche

Schlagw örter

Autoren

Taxonom ien

Restliche Seiten

Trennzeichen n * P latzhalterZechen a b vfeueA* Trenner zwischen em zeton PteizhaAern

Um form a&erung d e r Schreibw etseUmwrarxJung de» T M n GroS- oder Wenechretoung

K eine ;

berem igung vom uDertiuss»gen c o o elL- Entfernung von HTML- und anderen störenden Fragmecrten

Ä nderungen übernehm en

H ie r sehen Sie das M e n ü des P lug ins wp-SEO

Beschreibung

g Autom atische G enerierung der M etab eschreibung ak&vierenAusgaöo der Doscripeion ab Metainformafion

S ta r t* * /le Kein w e rt *«

Beiträge Textausschm tt au s aktuellem Artikel AW

Seiten l extausscnnitz au s aktuellem Artikel aV

Inhaiisarten Textausschm tt aus aktueller tahaftsart aV

M ed*en M edium titel ♦ A /tikeb te l A•

Kategonen Titel gelis teter Artikel •▼

Suche Titel gelis teter Artikel A•

Schlagw örter T iie l o * li* if t t * r Artikel Aw

Autoren Titel gelis teter Artikel A▼

Taxonom ien lite i gelisteter Artikel A»

Restliche Seiten Titel gelis teter Artikel •»

Beschränkung a u f m axim al 1 4 0 Zeichen ® SchersteAung der voAetftndgen ScNbarteft in Google Sncpets

y Ausgabe tfutachliedttcri wilb nOgvf saueKürzere, defür ausgeschriebene S itze in den Suchergebnssen

Optionale MeUbtfbchreiüuny der StarteeiU*M aruoie Descrpton für <*e Startseae

W issensdatenbank mit Hilfesexten und dokun en & erten Funkftonen rund

Ä nderungen übernehm en

wp-SEO b e s c h ä ftig t sich in te n s iv m it den M e ta -D a te n

Steuerung der Indexierung

¡%J Autom atische G e n e n e ru n g d e s Robocs-M etaiag akftvierenSteuerung dar Index «rung e ru einer Beröche der Wobsie

Startseite index. follow

B eiträge index, follow

S eiten index, follow

inhaltsarten index, follow

M ed ien m dex, follow

K ategohen notndex. follow

S uche noendex. follow

Schlagw örtor rxxndex. follow

Autoren no«ndex. follow

Taxonom ien n o in d e x follow

ResG ch e S eden nom dex. follow

y M etatag -W erte M e x . toflow und tnöex nicht au sgeben Standard-Werte Denötigoc « e r * D e k r e te n Im Oueftext

C N oo dp a ls W ert ins Robocs-M etatag schreibenKene Datonvenwendung aus dem D M O Z/O D P-Verrechne

N oarch ive als W ert »ns R ob ots-M etatag schreibenK e n C a c h n g der W o ö s o to n s o to n s S u c h m a s ch n e n

B eitrage nach 6 M o naten rrat notnäex, toflow versehenAw1o»fll>ecN> Soorrung |kor<K B o e a g o v o r ln d a x «ru n Q (? )

0 C an o n ica l Link für je d e W ebse<te gen erie renErmttüng und Ausgabe bevorzugter Adresse ab CanoncaJ

( Ä nd eru ngen üb ern eh m en

H ie r kö n n e n Sie w e ite re d e ta illie r te A npassungen d e r M e ta d a te n vo rn ehm e n

• Ähnlich umfangreich ist das All in One SEO Pack, das sich besonders gut für Einsteiger eignet, da es sehr viele Voreinstellungen gibt.

• Ein sehr gutes SEO-Plugin für Fortgeschrittene ist das sehr umfangreiche Plugin Headspace 2.

•Weitere bekannte SEO-Plugins sind izio SEO, Plati- nium SEO Pack und WordPress SEO Master. Das ist natürlich nur eine Auswahl. Aber unter diesen sechs Plugins ist für jeden Zweck etwas dabei, ob für einen kommerziellen Blog oder für einen Ein­steiger.

Fazit: SEO ist auch in Bezug auf WordPress ein sehr weites Feld. Es gibt nicht das eine Patentre­zept, mit dem man eine Seite optimieren kann, aber es reicht schon wenn man einige Grundre­geln beachtet, um aus dem ohnehin schon SEO- freundlichen Wordpress nahezu das Optimum an SEO-Freundlichkeit herauszuholen.

04/2013 webdesigner

TUTORIALCSS3 Animation von Andreas Hitzig

Als Objekte laufen lerntenCSS3 bietet Ihnen verschiedene Möglichkeiten, Objekte zu animieren ohne dazu Flash oder sogar JavaScript zu verwenden. Im Workshop erfahren Sie, wie Sie die Technik auch auf Ihrer Homepage nutzen.

Demos » Browser Support Checklist CSS3

(ko***«

V w tw i

CiKXtreund Cm*tob UK»*#*** 9m

R M v l

80« Samo*C«k»*w#

I M F I M

NtU

iMteieSM'jiOtfMsOç*c*jM ts

Tt

IfKMftrm 30

T i«bA u(ii

fofelCSS) Support'

. ;.u« i0;<

t e -ftrcfoi © 0Mc«nct (ip w ct

OOpon1t✓✓✓✓▲✓✓✓

4

✓✓▲✓A

A

✓✓

»✓✓✓✓A

✓✓✓

5.1*

✓✓✓✓A

✓✓✓

n✓✓✓✓✓✓✓✓

✓✓✓✓

✓✓A

✓

✓✓A

✓

✓✓✓✓

✓✓✓✓

✓972S

✓9 X * \

✓f »9 S

✓W 4S

H*✓X

S✓«✓

to✓✓✓I I

V✓ ✓ ✓

11.1

✓✓✓✓

«56.CS

✓M.4S

114

II✓✓✓

✓✓✓

12.1✓✓✓✓✓✓✓✓

✓✓✓✓

✓✓✓✓

toes

✓•3.3S

V

U9S

*Thi«U£M06*i»ft6*»rr*A«avMtjaCâ&J»p««AMaôA irtmst r moflfm

Jk. Inzwischen unterstützen alle

aktuellen Browser die Funktionen zur

Animation, wenn auch teilweise nur in einer Engine-abhän-

gigen Version.

pwi MitotfttfraêdâüitoâftrtaroM'Mf «ufc&ttor rautttMUMtrutf s*cem« nter« «MnMimpMM

Auf einen Blick

Verwendete Software:Texteditor

Browser mit CSS3 Unterstützung

Technologien und Standards:HTML5, JavaScript, CSS3

Experte:Andreas Hitzig

Dank CSS3 ist es inzwischen möglich, Bewegun­gen auf einer Webseite ohne weitere Hilfsmittel zu erzeugen. Dazu war in der Vergangenheit

zumindest JavaScript, wenn nicht sogar eine Flash-Ent­wicklung notwendig.Die Grundlage hierfür stellt die @keyframes-Technologie dar, die wir in unseren Workshop-Beispielen einsetzen. Leider ist CSS3 noch nicht flächendeckend in allen Brow­sern implementiert, jedoch gibt es in den neuesten Ver­sionen, selbst beim Internet Explorer, keine Probleme mehr mit dem Einsatz. Inwieweit @keyframes auch von älteren Browsern unterstützt werden, sehen Sie bei­spielsweise in der Kompatibiliätstabelle von Norman's Blog (http://www.normansblog.de/demos/brow- ser-support-checklist-css3/)

4 Probleme mit der neuen Technologie haben somit nur noch der Internet Explorer bis Version 9 und der Opera Browser bis Version 11.6. Bei Firefox, Safari und Chrome gibt es zumindest eine Engine-spezifische Im­plementierung.Da vor allem die älteren Internet Explorer Versionen noch eine recht starke Verbreitung haben, sollten Sie nicht zentrale Funktionalitäten Ihrer Website vollständig auf Basis dieser Technologie entwickeln, sondern den Besuchern immer noch eine Alternative bieten. In einem solchen Fall sollten Sie ein Framework wie Modernizr nutzen, um die vorhandenen Funktionen im Browser Ih­res Besuchers zu überprüfen und auf Basis dessen die entsprechende Darstellung wählen.

*1 Grundlagen verstehen \ J 1 Nicht alle Browser haben bereits den übergrei­fenden CSS3 Standard in Bezug auf Animationen imple­mentiert. Aus diesem Grund müssen Sie, wenn Sie die entsprechenden Funktionen verwenden möchten, auf die lokalisierte Implementierung des Browser-Herstellers zurückgreifen. Dies bietet keine zentralen Nachteile in der Ausführung, führt jedoch zu erhöhtem Pflegeauf­wand. In Bezug auf die Animationen bedeutet dies eine vierfache Implementierung der jeweiligen Definitionen: eine übergreifende Variante und drei Lokalisierungen für

76 webdesigner 04/2013

TUTORIALCSS3 Animation

- i mwhaoAD DOCH MF NT AT ION RFSOURCFS NFWS

"An indispensable tool."— B ru c« B o w » « * A d o b e JSiC M zaLdb J t e d u c L M t & y a

Modernlrr 1$ a JavaScript library lhai detects HTML5 and CSS3 features In the user's browser

W liv use M tx ie in i/r?#Taiwvg aa*virt*g# dt cool r+M v**b t^rvwUe^et * gr#r. ton, uroi you *ove to »JppOT tKOwV^S tf--* »eg bebmd Mo<Joml*r mo*:#» e * « y »V you to w i t condfao'ial .stvvSw l on«/ CSS to hondte eac* w&adoa a b*o*sc' «.-.ipporv. * fraru»* or ft« ITS pnWocr to# iWsr^JVfU)*eM/v* *nf*A»V#«An? Mtrfy

How it worksMuOvr’iU' run» qufehJy on ^tyv toed to <*r‘.«U fcatu»«. 11 ff>cn t'cr.os a JavaSoft object *th tbe reaufc*. and ©ods ciam s ’c i u i

fv you to key yov? CSS on Mo4 a*nijr t jp c o r ; do;cm o' « « a a ^ opoonafy rwsud** yaps«*» ^ ice renttaanAi foaang o# # «# /'vsi .«a aw m i r#a©u*f#«

O+rk o n tt l* (L Htt c f feetnrr»i¿Meen or tae** more about £&tetcnrca ioaätvi rrlf McOf tl?

m*» M iW rnif»

ustooY fcujitfcer Google hNcrosoft

r « u k i M (a u w U

Download Modernizt ¿.6.¿l ) v itw* rtwwnwHr<1, iiorry*^v^5^<1 DevetopmHif wfMnn to tiewtop w«h •nd teem from.

Th#n. d*# rttft m# Produrt«a* huirt i m •nd picfc Jutt the tests you neetf

orvrioPMfMT

^ P R O D U C T I O N

Gel started wilh Model niziV/^iU MívVmifí iy ,>» you V hk romrH ov#c the e»p*rw*«<# th#-«xigh taveScr^p*-rtn v ^ i faahs* <Vf^<-hAn a t% importent to u%* h e v jv * r iv * ithrouQhoiA yovf devotee»*^« U ta p ro g ra tt^ew t^r-e»^ you can. a'iO don't a t tv t tM ty fo» conven*e«xe orP«m for morte»

• Joe wntftiMfi toft ngrrttc• ;• : ;íS4lí¿ :ÜML¡. y *:t. I . fo»w»*r Are*

• tteyy.io »"v*1 <*» < *<*• **v\k •'* K ’I*»*'Vtfr.-r'v.fl** <Jv V ►/ ffyvr* SeiAfcvt• f iTnnininrwhfi fnaimtriMrinM«»«• frMi-y CiLm^grr P&¿'.¿:

Also cb*c* out our ß c y M ti2 L 6 ß M 3

Tip. cNkà ow y'i ¿» ;v a - V to omtUy iirw yot* cune«* tKcwve* a flcar.ures.

HTM L

Abuitcom san »ostBrous

O Fo*ovw u» on Twi-e«-

C o ^ ^ . e on G*Hub

©O

Sobar «The w*n P5S

D v'» :» X) Moüvf n«r

Latest news^•V4rr Tf ,VtJMedarWir Po-Ucjr on l i W i f T M ifldltantft DiitotRcod our poicy on bugs and aiscPOWVMP*€V>OU$Mod#fni*r 2 .0 ^ r e l«a » «d

Vr »9Mfldt rriif 2-fl rclcmtfW<ir,«r »'Oti

2012

U*4 0**+*—' Moerraff M V « *V< fMCT» hit** A « M tcvWÿ

N ^ ) i lo 9*t you uo «rid n*v*ro Mit dem Framework Modernizr fragen Sie die vorhande­nen Fähigkeiten eines Browsers ab.

Mrnandt« >•>»*•09

die Mozilla-Engine (Firefox), Webkit (Safari und Chrome) sowie für den Opera Browser. Das folgende Beispiel zeigt eine entsprechende Struktur für die @keyframes-Eigen- schaft. ►

@keyframes demo

@-moz-keyframes demo /* Firefox V

@-webkit-keyframes demo /* Safari und Chrome V

@-o-keyframes demo /* Opera V

{

}

Das erste Beispiel\ J ^ lm ersten Beispiel gehen wir näher auf die grundsätzliche Funktionsweise und die Parameter von @keyframes ein. Dabei handelt es sich noch um keine Animation im klassischen Sinne, bei der Objekte von einer Position zur nächsten bewegt werden, sondern lediglich um eine Demonstration der Grundtechniken. Deswegen ist das Beispiel so einfach wie möglich gehalten.Eingebettet wird die Animation eines Objektes in den style-Abschnitt einer Webseite, die Definition erfolgt zweistufig. Im ersten Schritt legen Sie die Animation als solche, wie bereits oben gesehen, innerhalb von @key- frames fest. In unserem Fall soll noch keine wirkliche Ani­mation, sondern lediglich die Farbe eines Objekts verän­dert werden. Dies geschieht über einen Farbverlauf und die beiden Schlüsselbegriffe from und to.

04/2013 webdesigner

TUTORIALCSS3 Animation

Das erste Beispiel zeigt, wie einfach ein

Farbübergang als Animation dargestellt

werden kann. ►

from {background:green;} to {background:pink;}

Die Hintergrundfarbe des Objekts verändert sich somit von Grün nach Pink.Damit ein Objekt auch animiert oder wie im Beispiel farblich verändert werden kann, benötigen Sie einen Se­lektor wie etwa ein div-Element.Dabei handelt es sich in unserem Beispiel um ein Recht­eck mit einer Breite von 250 Pixel, einer Höhe von 150 Pixel und der Hintergrundfarbe Grün. Dieses verknüpfen Sie anschließend mit der zuvor definierten Animation und legen auch die Zeitdauer für die Ausführung fest - in unserem Beispiel fünf Sekunden. Diese Definition um­fasst aufgrund der zuvor geschilderten Konstellation die vier Fälle für die unterschiedlichen Browser-Engines.

div {width:250px; height:100px; background:green; animation:demo 5s;-moz-animation:demo 5s;-webkit-animation:demo 5s;-o-animation:demo 5s;

Im letzten Schritt benötigen Sie nur noch innerhalb des body-Bereichs ein div-Tag, welches das Rechteck auf­nimmt und darstellt.

<body><p>Ein erstes @keyframes Beispiek/p><divx/div></body>

Damit haben Sie die Grundlage für die folgenden Beispie­le sowie ein farblich animiertes Rechteck geschaffen.

E in e rstes 'S k e y f ra m e s B e is p ie l

Eine solche Animation kann nicht nur einen Übergang enthalten, sondern auch mehrere. Im Beispiel des farbli­chen Verlaufs ist es möglich, mehrere Zwischenstufen zu

definieren und einen zeitlichen Ablaufzu definieren. Im folgenden Beispiel gibt es insgesamt vier Zwischen­schritte, bis die Farbe von Grün zu Pink wird. Am Ende springt das Rechteck automatisch wieder auf die Aus­gangsfarbe zurück.

@keyframes demo {0% {background:green;}20% {background:blue;}40% {background:yellow;}60% {background:red;}80% {background:orange;}

i

Den zeitlichen Verlauf geben Sie mit einem Prozentwert in Bezug auf die Gesamtzeit an. Da unsere Farben alle gleich lang gezeigt werden sollen, wählen wir einen li­nearen Verlauf und weisen allen Objekten den gleichen prozentualen Wert zu. Wenn Sie eine Farbe länger anzei- gen möchten, passen Sie die Werte entsprechend Ihren Vorstellungen an.Diese Anpassung haben wir exemplarisch für die Stan­dard @keyframes demo Definition gemacht. Diese müss­te natürlich auch noch entsprechend für die Lokalisierun­gen der Browserengines analog definiert werden. ▼

E in m eh rstu fig er F a rb v e r la u f...

▲ Eine Animation können Sie unter CSS3 m it mehreren Zwischenstufen definieren.

Objekt bewegenEine Animation unter CSS3 kann natürlich viel

mehr sein, als nur ein reiner Farbübergang, denn schließ­lich sollte ein Objekt ja auch von einer Position zur nächsten bewegt werden können.

Der Programmcode hierfür sieht gar nicht viel anders aus als im vorherigen Beispiel und wird lediglich für die einzelnen Zustände um die Koordinaten des Objektes ergänzt. In unserem Beispiel fährt das Rechteck erst ein­mal nach rechts um 300 Pixel, dann um 300 Pixel nach unten, anschließend 300 Pixel nach links, wieder schräg

78 webdesigner 04/2013

TUTORIALCSS3 Animation

nach oben und zurück auf die Ausgangsposition.

@keyframes demo{0% {background:green;left:Opx; top:0px;}20% {background:blue; left:300px; top:0px;}40% {background:yellow; left:300px; top:300px;}60% {background:red; left:0px; top:300px;}80% {background:orange; left:300px; top:0px;}100% {background:pink; left:0px; top:0px;}

}

Zu jedem dieser Bewegungsschritte gibt es eine ent­sprechende Positionsangabe, die mit Hilfe der Parame­ter left und top gesetzt wird. Damit diese anschließend auch in Bewegung umgesetzt werden können, ist noch die Festlegung eines Bezugspunktes wichtig. Diesbe­züglich ergänzen Sie die Definition des div-Tags entspre­chend um die Eigenschaft position. In unserem Beispiel ist es ein relativer Bezugspunkt zum Ausgangspunkt.

position:relative;

Alle Angaben, welche Sie innerhalb von @keyframes ge­macht haben, orientieren sich somit am Startpunkt der Animation. ▼

E in m ehrstufiger F arb ve rlau f m it B ew eg u n g ...

schaft zu kennzeichnen. Das folgende Beispiel nutzt ex­emplarisch alle vorhandenen Eigenschaften, wie es CSS3 im Standard vorsieht.

animation-name: demo; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running;

/^Definitionen für Mozilla, Webklt und Opera*/

}

Fügen Sie an der entsprechenden Stelle die zugehöri­gen Gegenstücke für die drei Browser-Engines mit ein. Falls Ihnen diese Definition zu lang Ist, können Sie auch eine Kurzform verwenden. Bei dieser geben Sie alle rele­vanten Eigenschaften ohne die entsprechenden Be­zeichner an. Das obige Beispiel in Kurzform hat dann das folgende Aussehen.

div {animation: demo 5s linear 2s infinite alternate;

/*Definitionen für Mozilla, Webkit und Opera*/}

▲ Natürlich sind auch Bewegungen m it CS53 a u f Basis von Koordinaten möglich.

Weitere Informationen zur AnimationIm ersten Schritt haben Sie nur eine grundlegen­

de Festlegung der Eigenschaften für Ihre Animation ge­troffen. Es gibt jedoch noch eine Reihe von weiteren Ei­genschaften, die Sie festlegen können. Im Kasten auf Seite 80 haben wir diese für Sie gegenübergestellt. Für die einzelnen Browser gibt es wieder, wie bereits be­kannt, entsprechende Lokalisierungen. Diese sind durch ein entsprechendes Präfix, analog der Keyframes-Eigen-

Kombination von BewegungenSie können mit CSS3 natürlich nicht nur eine Be­

wegung festlegen und ausführen, sondern auch mehre­re nacheinander. Bis jetzt ist das Rechteck nur in einer definierten Bahn von Eck zu Eck bewegt worden. In einer zweiten Sequenz fällt es von oben rein, ruckelt noch zweimal kurz und bleibt dann liegen.

@keyframes demol {0% {background:green;left:Opx; top:0px; animation-

timing-function: ease-out;}20% {left:50px; top:300px; animation-timing-function:

ease-in;}40% {left:100px; top:250px; animation-timing-

function: ease-out;}60% {left:150px; top:300px;animation-timing-function:

ease-in;}80% {left:200px; top:250px; animation-timing-

function: ease-out;}100% {left:250px; top:300px;animation-timing-

function: ease-in;}}

04/2013 webdesigner 79

TUTORIALCSS3 Animation

m

Das Ganze ist in Kurzform beschrieben. Das Besondere ist die Eigenschaft animation-timing-function, mit der Sie die Beschleunigung innerhalb der Bewegung festle­gen. Wenn es abwärts geht, wird es ein wenig schneller, aufwärts entsprechend ein wenig langsamer.Die beiden Animationen demo und demol kombinie­ren Sie anschließend durch die Anpassung der div-Defi- nition.

animation: demo 5s, demol 3s;

Damit werden nach dem Start die beiden Animationen nacheinander ausgeführt.

Mehrere Bewegungen kombinieren...

▲ Sie können mehrere CSS3 Animationen miteinander verknüpfen und in Reihe ausführen lassen.

Für die Animation mit CSS3 gibt es verschiedene Eigenschaften. In der folgenden Tabelle werden diese kurz vorgestellt und beschrieben.

Eigenschaft Beschreibung@keyframes Legt die Eigenschaften der Animation fest.animation Eine übergeordnete Eigenschaft, in welcher Sie alle folgenden in Kurzform

verwalten können. Lediglich die Eigenschaft animation-play-state muss explizit gesetzt werden.

animation-name Legt den Namen der @keyframes Animation fest.animation-duration Legt die Dauer einer kompletten Animation fest. Im Standard ist der Wert

auf 0 gesetzt.animation-timing-function Legt fest, wie das Geschwindigkeitsverhalten innerhalb der Animation ist.

Im Standard wird der Wert ease verwendet, bei dem die Animation etwas langsamer startet, dann schneller wird und zum Ende wieder abbremst.

animation-delay Legt die Verzögerung fest, bis eine Animation startet.animation-iteration-count Legt die Anzahl an Durchläufen für eine Animation fest. Im Standard wird

diese nur einmal ausgeführt. Sie können entweder einen numerischen Wert oder für eine Animation ohne Endezeitpunkt angeben.

animation-direction Legt fest, wie die Animation abgespielt wird - im Standard Der Wert SJ^^RHsoielt die Animation für die unaerade Anzahl an Durchläufen in der normalen Richtung und für die gerade Anzahl in umgekehrter Reihenfolge ab.

animation-play-state Gibt den Zustand der Wiedergabe an. Dieser kann entweder oder sein.

Fazit: Mit den Animationen innerhalb von CSS3 kann bereits viel erreicht werden. Die Funktionen sind von Ihrer Grundstruktur sehr einfach, jedoch sind damit umfangreiche Ani­mationen möglich.Dies können Sie natürlich problemlos mit wei­teren Funktionen aus dem Leistungsumfang von CSS3 und HTML5 kombinieren und so bei­spielsweise ein Objekt bewegen und dieses gleichzeitig in der Ausrichtung verändern. Sobald die Browser-Entwickler die Funktionen komplett implementiert haben, können diese auch flächendeckend eingesetzt werden. Bis dahin benötigen Sie zum einen eine Analyse mit einer Bibliothek wie Modernizr und zusätz­liche Aufrufe für die lokalisierten Versionen der einzelnen Browser-Herstell er. Dies bläht den Programmcode nicht nur unnötig auf sondern sorgt natürlich auch für zusätzliche Fehlerquel­len, da Änderungen an bis zu vier Stellen nach­gezogen werden müssen.

80 webdesigner 04/2013

WEB-GALERIE

Auf annays.com werden die besten Titel- Einstellungen von Filmen präsentiert. Alle Screens sind nach Jahren sortiert und kön­nen bequem über die eigens eingerichtete Navigation im Header durchstöbert wer­den. Bei der Gestaltung der Seite hat man sich für ein schlichtes, plakatives Design mit einem guten Schuss „Retro" entschieden. Die zusammengetragenen Screens sind ein ungeheurer Fundus für Vintage-inspirierte Screendesigns. Die typischen Stilelemente praktisch jeder Epoche leben hier wieder auf. Die Seite würdigt damit einen Bereich in der Gestaltung von Filmen, der ansons­ten nur zufällig wahrgenommen wird.

MOVIE TITLE STILLS COLLECTION

Online Shops

HOHE /1929 ^^^1939 ^^/l949 ^®/l959 ^^1969 BESTEHN

MOVIE TITLE STILLS COLLECTIONFILM HOIR 1970 11979 1980 11989 1990 11999 200012009 201012019 UPDATES

B

190P■

■

2013 I

ACOUCCÎION CONTAINING HUNDREDS OF

MAIN TITLES FROM FEATURE FILMSfrom CLASSIC ji>4 RECENT FILMS

I m?0IH Cf NI UR V rox • COIUMBIA PICTURES • Ml TRO GOIDWYN MATER • PARAMOUNT PICTURES

RKO RAOIO PICTURES UNIVERSAL PICTURES WARNER BROS tad mftty ethtr studios

TRAILER TITLES ‘ Z S S S rX * “THE ENO" TITLES'PICK YOUR F A W lT I DECADE ►ROW THE TOP OF THIS FACE AMD START EXPLORING

1M4 444*0 M llNn 4 t c n v » r » i

n v « 4 « f t 4H H i n

IIUL9

-C3J M 'UX1mm

TITLE SCQUCNCCS

I a • • I • I • • I

LECERCLEROUGE

C H IS U M

i iINDAGINE

SU UN C1TTAD/WO M W SO**A

Dl OONI S O ET TO! GIRASOL!

iWvWA4KCTU«Sih itm i

wAAfctftttOSArVCK A*r-»C« ft**» 9 Met 1

Tiatfv m t 1110*1114 *I W I I W 1 %U

» JM • • f M fwitmmrnm •i w • • m-«s ♦

w w » w i I m « • Wbwy P— T « « Ob«»HM • » 1% Mtt

m n .**• I--** !

IMTI tmmm • Cwn h i ) • ftM fl Mr

i • l t d l i*<iMl V w i • Ai f t JM • Cr» f r i IW « •

EHr T h e [ N p WARMER BROS. •«?

TtTT Of TW u r j j t i r u w t n m j I M I IM l| • T *r w \ « r mj U M f i l lV i Q w h n n r* t»«0> U f f » » R( I W l«M i»rM N «raiilU 4• c»«n*4 i * i m i • n w m i «im t • jwni • uK>*ai m w H W H lW ’ iV 'W * I M *«< IN h^ » » l ( / » I • « I <1 *

O K I l%44( • 11014 l»«7 ; » «*» Mm«i>11'* 1*14» • Tirrrtvy B«*r | l « i r IU1| . jmmrx» i / w * 11 V U c o m ■ U y a il il%ro I1T?) • T*r C K » i n »H?? 1 VKH • l* w 9 + 0 •«* fuM i ) i l iN >00*1 • MWMM |l|r< • taw* JWM/My 11M4 I M il • U i « iw M w » |t%*1 IMOi illH’-IJMl • P*»»«4lltM‘.'Wn • f»4 M*« #M*»l»44-l**«l • f W Mr* I III»-»»¿I • '•» > I/O*» »All > I • »IO *W W B * y » « iM ll 'l l 'l li • Kl * « i I)

h ö iie üir WHO GAIWTN HAM »70

11919

»IASI THeOUTOfToujneRS

♦ I1M 1114 • l « M I V l • l « M I W • I W I1 U • ) W I4 M • W M ww w i « IK A k4M • IM 1 I4M » » « > » > I4 W 1914 * I M M H 1 • I4 tt ( l * 1M4-1M* « • lM 9t • l|r*>l«M • I P S « ! » * • II^J* k X e i » «M 4 -IM * • I N M t t l ♦ IHO-I004 • I H M H t • JOOO-tt* ♦>4*1 . >01+ N U • * * * * * * • tm m m m • im m rn —— >■»»«*« • 6 m • f t t . *«l M M Mm* CiMtv« . T«f *» «•«•••» 4«»» • tMUW • t%#

CmA*4 • T v «« ( f# M M M «l * W h l « UM« * !*«•§ • ChXtMHH IIMWiri

4#40 M n I««»frrr-

rou.0* t>< ccuccT»0NVPIM fl Q 1 • T M «r • » M i » »

Ym ' mH

FOC*U«Jto«r€H*Af

O K « ’ »

# iMMai ftHMlHMI

* * X T K>•» *4r»«M « 4«**4iM im *n w »n «>| «

III I(4w l4 «*| «w |

14» C4» COWIMCT «*4 N ri 41 MM ft «S04 tt fW* M H

«•OV/I fHilWWJkCI

TUTORIALDer perfekte HTML-Newsletter von Andreas Hitzig

HTML-Newsletter gestaltenIn diesem Workshop zeigen wir Ihnen, wie Sie mit einem gut gestalteten Newsletter eine Vielzahl von Kunden und Interessenten erreichen.

St«ll«n Si* sich*!, dass Si« aii vuM*hd com zu lhr«n Email Kontakt«* Nn2uiüg*rt. damtt d l«* Mails nicht im Spamordn«! landan.

GRATIS LIEFERUNGfü r all© A rtik e l

ans ghgnc

WDW Hüternn o > *

W 3D ♦ BIU-R4Y DkX> IV /VIUSIK SPIELE BÜCHER MttrfRTIKEl

>✓

ES IST UNSER 1. GEBURTSMG!UM DAS ZU FEIERN, GIBT ES DAS HIER:

20% RABATT AWJEDEN ZWEITEN ARTIKEL!

RABAn ENDET AM MITTWOCH, DEN 27. FEBRUARRABATT WIRD AUF D€N GÜNSTIGEREN DE» &EIDEN GEKAUFTEN ARTIKEL

ANGEWENOET UND G*T F0« AHES. AUßER IPODS UND G€SC*ENKGUT5CH£lNE

HIER KAUFEN ODER UNSERE EMPFEHLUNGEN UNTEN ANSCHAUEN >

I

w *

W S I ’

f TDavid Bow ieThe Next Day (Deluxe Edition)11.99 4The Next Day9.99 €

T H E 2 0 / 2 0f K » I a i ( M C I

Ju stin Timber lakeThe 20/20 Expenence (Deluxe Edition)11.99 4The 20/20 Expenence9.99 i

The StrokesComedown Machine 9.99 t

D e p e c lte M o d eDelta Machine (Deluxe Edition)12.99 4 Delta Machine9.99 4

• ••y ) S o u n d C i t y/ ■ am raro-*

M t t i e O I I O l N O T A » B606HmtsExile(Deluxe CD» DVD) 13.99 4E»ieii no <f_______

DidoOirl Who GotAway (Deluxe 2CD) 13,99 4Girl Who Got/wary

SoundtrackSound Citf Real to Reel music by Dave Orohl 11,99 4

Jirn i HendrixPeople Hell & Angels9,99 4

M it einem Newsletter bleiben Sie in Kontakt mit den Besuchern Ihrer Website. Abhängig von der Art der Inhalte kann das Ziel des Newslet­

ters sehr unterschiedlich sein: von der Verbreitung aktu­eller Nachrichten bis hin zur Information über neue Pro­dukte oder Sonderangebote ist alles möglich. In diesem Workshop zeigen wir Ihnen, wie Sie den Newsletter op­timal gestalten und technisch umsetzen.

O 1 *n alte c*es Newsletters festlegenI Bevor Sie sich an die technische Umsetzung

des Newsletters machen, sollten Sie sich genaue Ge­danken machen, welche Inhalte Sie Ihren Lesern mit- teilen möchten. Abhängig vom Textumfang und der Anzahl der Bilder sollten Sie sich eine grobe Skizze an­fertigen, die Sie anschließend in den nächsten Schrit­ten umsetzen.

Ein Newsletter bietet dem Leser aktuelle Informationen, beispielsweisezu Sonderaktionen in Ihrem Webshop.

/"V*} Aufbau mit Tabellen\ J ^ lm Vergleich zu einer klassischen Webseite ste­hen Ihnen bei einem Newsletter deutlich weniger tech­nische Möglichkeiten zur Verfügung, die Elemente auf dem Bildschirm anzuordnen. Vor allem die Positionie­rung mit Hilfe von CSS ist innerhalb des HTML-Modus der meisten Webclients, aber auch der E-Mail Program­me nicht so perfekt ausgeprägt wie innerhalb des Brow­sers. Aus diesem Grund sollten Sie für die Aufteilung ei­ner Newsletter-Seite den klassischen Weg über die Tabellen gehen.Generell ist die Unterstützung von CSS über div-Tags ge­rade in den älteren E-Mail Clients nicht komplett umge­setzt. Sie sollten deswegen Formatierungen immer über inline-Tags mitgeben und auch diese nur so sparsam wie möglich einsetzen, denn auch in diesem Fall ist die Un­terstützung nicht vollständig gegeben.Für die Aufteilung des Bildschirms verwenden Sie am besten verschachtelte Tabellen mit einer festen Brei­tenangabe. Auf diese Weise können Sie im Übrigen auch problemlos Leerräume zwischen zwei Bildern

82 webdesigner 04/2013

TUTORIALDer perfekte HTML-Newsletter

oder einem Bild und einem Text erzeugen. Sie fügen dazu lediglich eine weitere Tabellenzelle mit einer fes­ten Breite ein. Die Umsetzung geschieht über den Para­meter width unter Angabe der Breite. ►

f'V *3 Die Breite des Newsletters+ D Es gibt mehrere Wege, die Breite des Newslet­

ters auf dem Bildschirm festzulegen. Entscheidend ist in erster Linie, ob Sie für bestimmte Elemente eine fest vorgegebene Position auf dem Newsletter vorgesehen haben. Falls dem nicht so sein sollte, können Sie den Newsletter mit Hilfe der Angabe width="100%" über das gesamte Fenster verteilen.Haben Sie im Design jedoch Elemente mit einer festen Breite vorgesehen, dann sollten Sie eine bestimmte Breite vorgeben.Für die klassische Ansicht auf einem Desktop-PC wer­den normalerweise 500 bis 600 Pixel verwendet. Die­se können Sie entweder über eine absolute Angabe setzen oder Sie verwenden ein Bild mit der entspre­chenden Breite, das Sie in die Zelle einerTabelle einfü- gen.Immer mehr Anwender lesen Ihre Nachrichten auch auf einem mobilen Endgerät und den entsprechenden E-Mail Clients. In diesem Fall sollten Sie beachten, dass nicht alle Geräte selbst im Querformat eine Breite von 500 bis 600 Pixel bieten und aus diesem Grund den Newsletter entsprechend skalieren werden. Der Benut­zer muss sich in diesem Fall die Seite vergrößern, um alle Informationen problemlos lesen zu können. ►

/ "V ^ D ie richtige Maßeinheiti*Wie auch bei einer klassischen Website gibt es

auch beim HTML Newsletter mehrere Dimensionen für die Breitenangabe. Wie bereits gesehen sind die gebräuchlichsten Optionen der prozentuale Wert oder eine Angabe in Pixel. Aus der Erfahrung heraus sollten Sie letztere Variante bevorzugen, da nicht je ­der Client mit den Prozentwerten auch sinnvoll um­gehen kann. Nachdem Sie sich einmal auf eine Ge­samtbreite für Ihren Newsletter festgelegt haben, können Sie im nächsten Schritt mit der Aufteilung beginnen und die einzelnen Tabellenzellen mit einer absoluten Pixelangabe versehen.Lediglich bei der Angabe der Schriften wäre es eine Überlegung, diese in em statt in Pixel anzugeben. Da jedoch auch diese Angabe unterschiedlich interpre­tiert werden kann, sollten Sie auch an dieser Stelle am besten die Durchgängigkeit beibehalten und auch die Schriftgröße mit Hilfe einer Pixelangabe festlegen.

1 X t K r w I K J

ES IST UNSER 1. GEBURTSTAG!UM 0A3 ZU * K fH C W B 0A3 NCR.

20% RABATT AU?JEDEN ZWEITEN ARTIKEL1

•àiAn MÛft AM

M f« «AUH N t t H I U t f l f fU m K L««Ü lP < (M I N >

m 4» m m m m i i i

{ft **«»■ ■* 9 i* » »*-i

•J

WhM * •4t

Jj

D i* ?rjp A i l i i t d r i t Si r Itorr

CjDSauJUkMB9 __fit\ /«i /0*X» « p j i r n i m «

hm kikti". yawfttttjdIO IIIM ipArrn »c r .T

_ a

IW M•1 ■«»» fc«« •»

—* K M . k «■ « I

J -é êm

f'V C Der Einsatz von CSS\ J Wenn Sie für die Gestaltung Ihres Newsletters bestimmte CSS-Elemente benötigen, sollten Sie sich vorab über den Implementierungsstand innerhalb der einzelnen Web- und lokalen E-Mail Clients informieren. Eine gute Quelle hierfür stellt die Website Campaign Mo­nitor (http://www.campaignmonitor.com/css/) dar. Auf dieser finden Sie eine Übersicht der zehn beliebtes­ten und verbreitetesten E-Mail Clients und deren Unter­stützung von CSS-Elementen. Damit jedoch nicht ge­nug: In einer Offline-Variante als PDF oder Excel-Datei gibt es insgesamt rund zwanzig Clients, die untersucht werden.Ein erster Blick in die Liste zeigt eine flächendeckende Un­terstützung der zentralen Tags für die Festlegung der Schrift und der Schriftgröße über die Elemente font-family und font-style. Wenn Sie diese verwenden sollten Sie je­doch auf die Kurzvariante einer Definition verzichten,

Das Basislayout bauen Sie, wie in diesem Beispiel er­sichtlich, m it Hilfe von Tabellen auf.

Outlook zeigt im Standard keine Bilder zu Newslettern an.

04/2013 webdesigner 83

TUTORIALDer perfekte HTML-Newsletter

oooo

Überprüfen Sie im ersten Schritt, welche

CSS-Elemente die wichtigsten Darstel­

lungsprogramme unterstützen.

oo

oo

o

wie dies im Bereich der Webseiten üblich ist sondern die Angaben entsprechend komplett ausformuliert mitgeben.Das Gleiche gilt im Übrigen auch für die Angabe der Schriftfarbe in Form eines Hex-Codes. Nutzen Sie in die­sem Fall immer die Langversion mit den sechs Zeichen und nicht die Kurzversion, also immer #FFFFFF anstelle von #FFF.

Verlinkungen integrierenV^Ein Newsletter enthält in der Regel eine Reihe

von Verlinkungen, dies auf Seiten innerhalb oder au­ßer Ihrer Website verweisen. Zusätzlich kommt nor­malerweise noch ein Link hinzu, mit dem Ihre Leser den Newsletter wieder abbestellen können.Leider interpretieren nicht alle E-Mail Clients den HTML- und CSS-Code gleichermaßen. Einige von die­sen Readern haben sogar die Eigenart, das vorgege­bene Layout nicht zu übernehmen oder mit eigenen Standardwerten zu überschreiben. Teilweise hilft es jedoch, die Informationen zweifach mitzugeben: zum einen innerhalb des style-Tags und zum anderen über ein zusätzliches span-Tag.

<a href="http://www.meinewebsite.de" style="color:blue;"xspan style="color:blue;">hier steht der Text vom Link...</span></a>

Auch der hover-Effekt, der auf klassischen Websites gerne für die Anpassung einer Verlinkung verwendet wird, funk­tioniert in den meisten E-Mail Clients und Web-Mail-An- sichten nur eingeschränkt. Die aktuellen Outlook Versio­nen interpretieren diesen ebenso wenig wie der Mail-Client von Gmail oder die E-Mail Apps von Android und iOS. Sie sollten sich aus diesem Grund eine andere Vorgehensweise überlegen und die Verlinkungen ent­sprechend durch eine alternative Farbwahl hervorheben. Öffnen Sie gesetzte Verlinkungen immer in einem neuen Fenster oder Tab, nicht jedoch im gleichen Fenster. An­sonsten ist die ursprüngliche E-Mail verschwunden, falls der Newsletter über den Browser gelesen wird. Im Falle einer Verbindung auf Basis von https müssen sich die Le­ser anschließend sogar unter Umständen neu anmel­den. Für die Öffnung des Newsletters in einem neuen Fenster verwenden Sie einfach mit Hilfe des Parameters torget="_blank"eine leere Seite als Ziel.

/"V ^M ehrere Sichten\ J / E-Mail Anbieter mit einem Webclient zeigen eine HTML E-Mail normalerweise nicht direkt an, son­dern stellen aus Sicherheitsgründen immer nur die Text-Version dar. Damit können nicht unbemerkt In­halte geladen werden. ▼

3 * a ^ - 0 .- g O □ u * s ü ^ ■• i i m i m m

Nvc » »11 flt 77 M

*/ c.MK VMMtMr an ftwai-w wraft juma—iG TSC. .jJV vrrw fc trW

^ ÖW J» iMrtwr

UM« K M U . .4(1(1 M » ,•1« l u t « f l U l ) X it f '.t H «rftAlOM 5i*

f* m t ’ tf :i*. h i » M i w i n m H 4 •* « u m « >+ ( m i h »w ir« C i C r»»l n t « i l i

i c g K ; : i ? « : : « : is ; Am ; « f o i W K i t s ; . « * : « 4 W N U a jt » : '• 'in»: : ; »Comi M M tn t « ; m m : t< 9 mWC M »IM n x fw Anin;, K»u i t n ««a Wi i m . » v « i n « n u i n i M M « t r m .

tu Ml lu H l f I

U U ...M » IMU.J fr m .. rMdli.MlMUaA, »¿»ürfcll. *

taMiM» ill (;u*s »;• k;«:;fei

lu f« r • >u4iU

h i u l u - . t ; J W t W I

A-XJT3 Vl*t* » M i l «

^ ,M , ~ » « -i, • ■-«J >1»;c n i f f i r i i U i ; i u -:m i i i u u v u

Bieten Sie eine alternative Ansicht für alle Reader, die im Standard keine HTML E-Mail anzeigen.

8 4 webdesigner 04/2013

TUTORIALDer perfekte HTML-Newsletter

Aus diesem Grund ist es jedoch für Sie als Designer des Newsletters besonders wichtig, eine alternative Sicht auf die Inhalte auszuliefern. Dazu sollte Sie zwei Alternativen anbieten: zum einen eine Textversion des Newsletters, bei dem alle gestalterischen Elemen­te fehlen und zum anderen eine Version, die als HTML- Seite existiert und auf die Sie aus dem Newsletter he­raus lediglich verlinken.Die reine Text-Version haben Sie im Normalfall recht schnell angelegt. Entfernen Sie aus Ihrem Newsletter alle gestalterischen Elemente. Am Ende sollte dieser nur noch Text und Verlinkungen enthalten.Wenn es der Aufwand zulässt, sollten Sie jedoch zu­sätzlich eine Web-Version Ihres Newsletters erstellen, die über einen Link aufgerufen werden kann.Amazon verschickt beispielsweise im Rahmen des Amazon Family Clubs jede Woche einen Newsletter mit neuen Informationen. Diese Angebote finden Sie auch gut integriert in die Amazon-Website, wobei die Seite direkt aus dem Newsletter heraus verlinkt ist. ►

amazon

Q Darstellung von Bildern \ J O N ic h t nur die Web-Clients bieten im Standard keine vollständige Sicht auf die Newsletter an, auch klassische E-Mail Programme extrahieren aus Sicher­heitsgründen die Bilder aus einer E-Mail und damit auch aus einem HTML-Newsletter.Einige E-Mail Programme bieten zwar die Darstellung von Bildern für vertrauenswürdige Absender an, wo­bei diese Funktion jedoch explizit aktiviert werden muss.Aus diesem Grund sollten Sie die Bilder in Ihrem Newsletter immer nur als ergänzende Information einsetzen. Damit kann der Leser direkt einschätzen, ob sich das Nachladen der Bilder lohnt und zugleich die wesentlichen Inhalte des Newsletters trotzdem le­sen. Dieses Wissen sollten Sie auch in die Gestaltung Ihres Newsletters mit einfließen lassen und alle irng- Tags immer mit einer festen Breite und Höhe verse­hen. Auf diese Weise stellen Sie die optisch korrekte Darstellung des Newsletters sicher, auch wenn die Bilder nicht mit angezeigt werden.Pflegen Sie zusätzliche das ALT-Tag eines Bildes, damit der Leser bereits im Vorfeld über den Inhalt des Bildes informiert ist.Die Auslieferung der Bilder sollte von Ihrem Webser­ver aus erfolgen, damit der Leser bei einer genaueren Untersuchung des Newsletters vor dem Laden kein ungutes Gefühl bekommt. Damit Sie nicht den Über­blick verlieren, trennen Sie am besten die Bilder und den Newsletter, indem Sie für die Bilder ein eigenes Verzeichnis anlegen.

Amazon Family • Angebote und Rabatte'/ -r* Nc* M » M r « a m W w » fcyssn u m m « M i

^ « i i ^ . io v leurtn fca hm «Man i t tfiw i w m »y/ \ AHlCM 4 OM tM l M

'Z T (Sparon)=i 0*n trarc-Co* trom w.

H..*«* <*4« M r t M k ]

\ ' 1 m o gr t M i m c>i Um »*w tm m 4, —y >*>•.*« Um jfcWH C*4m* k W « » »»* « W » » » I m

Am m m Y f . « t o A lt iu r fc - r ( h « w v r A / - j r t « a lr 4«*r t f i v h r

»K I O « 4 *»» .

H W w a r w a l M M « « * ) S T U t t T

V'

iee««eww<*d»

I rnm u + m*m <rn4m m m

Bieten Sie eine alternative Ansicht für alle Reader, die im Standard keine HTML E-Mail anzeigen.

/^VQSkalierung von Schriftenv/Z ^ G erad e bei mobilen Endgeräten wie dem iPhone und diversen Android Smartphones kann es durch eine Skalierung der Schriftgröße zu unge­wünschten Verschiebungen innerhalb des Layouts kommen. Sie können dies zwar nicht komplett ver­hindern, jedoch zumindest beim iPhone einschrän­ken. Dazu gibt es die CSS-Eigenschaft -webkit-text-si- ze-adjust. Wenn Sie diese auf none setzen, wird die Schriftgröße nicht angepasst. Im Standard steht die­ser Wert jedoch auf auto und es findet somit automa­tisch eine Anpassung der Schriftgröße abhängig zur Auflösung statt. Dies macht vor allem bei den neuen hochauflösenden Displays Sinn, da mit diesem Wert eine bessere Lesbarkeit gewährleistet wird.

1f\Umfangreiches testen\ J Die Anzahl der verschiedenen Darstellungspro­

gramme für eine E-Mail und damit auch für einen News­letter nimmt stetig zu. Dies liegt nicht nur an den neuen mobilen Endgeräten wie iPhone, iPad oder den Android- Geräten, sondern auch an der Vielzahl von webbasierten E-Mail Readern und verschiedenen Versionen der Desk­top E-Mail Clients. Campain Monitor zeigt eine Auswer­tung von Ende des letzten Jahres. In dieser nehmen die iOS-Geräte den Spitzenplatz ein, gefolgt von Microsoft Outlook, Hotmail und Apple Mail. Gerade bei Microsoft Outlook und Apple Mail gibt es jedoch verschiedene

v r *Matotö tt*wert> fTTi <

üomunrc

Spar-Äbo^ «<w«n

m

Kinderwagers - 2 0 %

Me tu TereAngebot der», ^ Woche . ’ * V vv 1 ---

04/2013 webdesigner 85

TUTORIALDer perfekte HTML-Newsletter

Versionsstände mit unterschiedlichen Implementierun­gen, was das Testen auch nicht einfacher macht.Es gibt verschiedene kostenlose und kostenpflichtige Dienste, welche die Darstellung eines Newsletters simu­lieren und das Ergebnis in einer Übersicht darstellen. Kandidaten in diesem Umfeld sind beispielsweise Litmus

(http://litmus.com/), Preview my Email (http://pre- viewmyemail.com/) oder Email on Acid (http://www. emailonacid.com/free-email-test/) Die meisten Dienste bieten eine eingeschränkte kostenlose Nutzung an, bieten jedoch nur in den kostenpflichtigen Zah­lungsplänen eine vollständige Analyse an. ▼

Vor dem Versenden sollten Sie Ihren News­

letter a u f verschiede­nen Plattformen tes­ten. Dies übernimmt

beispielsweise Litmus automatisiert für Sie.

Y o u r E rn a « T e s t r =Ktfr'l

VOMT M C our* ( U l r* v * rt«4 f * j r ii*»*«« f r « « pl*n K i r n mer# jb o o t why you K d J I « « B M I « cfc«ntt or v it* tn » »n u n « » » f « 10

> «Vf n x « v n r . j k m t n i O M '•K'k >) 11 « M i n

«0

>«<x

M M I

MK m*f

IM

» S

ir^rsMi

P e * -' i r O u l i M A tPr«vttw« m

erLwyJmg aa

SutH«ct l»rv«

Cod« w utytb |

Shftrmo

A

4L

H M

10Vorsicht SpamLeider landen Newsletter immer wieder im

Spam-Ordner des Lesers, auch wenn dieser die Informa­tionen explizit angefordert hat. Ein Allheilmittel gibt es für diese Situation nicht, Sie können jedoch eine Reihe von Vorkehrungen treffen, damit dies nicht auch Ihrem Newsletter passiert.Die wichtigste Maßnahme ist eine klare und einfache Struktur der Informationen. Verwenden Sie nicht zu viele Bilder und gehen Sie auch bei der Definition der META- Tags im Kopf des Newsletters mit Umsicht vor.In manchen Fällen spielt auch die Länge der E-Mail eine Rolle. Nicht nur aus diesem Grund sollten Sie die jeweili­gen Informationen im Newsletter nur anteasern und an­schließend auf die entsprechende Webseite innerhalb Ihrer Webpräsenz verzweigen.

Fazit: Die technische Gestaltung eines News­letters ist für HTML-Entwickler nicht allzu kom­plex. Die Schwierigkeit besteht vielmehr darin, den Newsletter technisch so einfach wie mög­lich zu halten. Wenn Sie dies entsprechend be­rücksichtigen, steht dem Erfolg Ihres Newsletters technisch nichts mehr im Wege.

Beispiele für Newsletter

Es gibt eine Reihe von Archiven und Genera­toren für Newsletter. Wir haben einige inter­essante für Sie zusammengestellt:• GraphicMail (http://www.graphicmail.

de/site/features_templates.aspx): Über 300 kostenlose Newsletter-Vorlagen

• Newsletter Examples (http://www.news- letter-examples.com/): Archiv mit be­kannten englischsprachigen Newslettern, wie Bose oder Apple.

• DesignerFX (http://designrfix.com/ins- piration/newsletter-designs-60-great- examples): Blogartikel mit über 60 Bei­spielen

• TopDesignMag (http://www.topdesign- m a g .co m /3 5 -su p e rb -e xa m p le s-o f- good-looking-newsletters/): Blogartikel mit 35 interessanten Beispielen

N E W S L t l t R r r X A V I P L -1—v..)

P— — — — — — ^

8 6 webdesigner 04/2013

WEB-GALERIEOnline Shops

C îo rd o n B o w enFounder

M m Cordon

Jo h n P. M c C ia rry , Jr .Found«

Mmt jo t *

rncgarrvbowen London appointed to global Toblerone account

Modern und aufgeräumt präsentiert sich die renommierte amerikanische Werbe­agentur megarrybowen auf Ihrer Webseite. Als Header prangt das Logo der schweizer Schokoladenmarke Toblerone auf der Seite, dem sich die Londoner Niederlassung wid­met. In der kleinen Galerie darunter werden weitere Kooperationen angezeigt, deren Bilder sich nach einem Klick auf das Vor­schaubild in den Header laden.Die Website ist als Single Page aufgebaut, deren Abschnitte sich über die Navigation ansteuern lassen. Im Abschnitt „Work" wer­den erfolgreiche Projekte gezeigt, die mit gut produzierten Dokumentationsfilmen zu den Projekten verlinkt sind. Nicht nur auf die Optik sondern auch auf die Qualität der Texte wurde viel Wert gelegt. Im Abschnitt „About us" erfährt der Besucher, wer mc- garrybowens eigentlich ist. Sehr sympa­thisch setzen sich die Gründer der Agentur unter „People" mit einem gemeinsamen Foto in Szene.

W i i

Wallpaper*

RATGEBERWas ist eigentlich Google AdWords? von Tobias Henke

Child-Themes in WordPressSeit WordPress 3.0 gibt es eine interessante, neue Funktion namens Child-Themes, die von den meisten Usern lange herbeigesehent wurde. Wir sagen Ihnen, wie Sie ein Child-Theme erstellen und welchen Nutzen Sie davon haben.

ordPress hat als Content-Ma- nagement-sys-

tem zwar Grenzen, was das Thema Individualität angeht, aber diese sind recht

weit gesteckt. Das gilt selbst dann, wenn man kein komplett eigenes Theme programmiert. Jedem, der sich halbwegs mit WordPress auskennt, gelingt es sehr ein­fach, eine individuelle Seite zu gestalten. Hier gibt es zahlreiche Möglichkeiten, auf die später noch eingegan­gen wird. Bis zur Version 3.0 v on WordPress musste man sich als User entscheiden, ob man das individuell ausge­staltete Design seiner Seite behält, oder ob man die mü­hevoll er-reichte Individualität vorübergehend aufge­ben und das Update durchführen soll. Im Zweifel musste man sich dann für das Update entscheiden, gerade wenn es darum ging, mit dessen Hilfe Sicherheitslücken zu schließen.Seit der Version 3.0 wurde dieses Dilemma gelöst, da die Entwickler es möglich machten, sogenannte Child-The- mes zu erstellen. Wer ein Child-Theme programmiert, hat zwei Vorteile: Er muss kein komplett neues Theme pro­grammieren und die individuellen Änderungen und An­passungen gehen bei einem Update nicht verloren. Child-Themes sind von den sogenannten Parent-Themes abgeleitet Sie nutzen deren Funktionen und Dateien.

Auf einen Blick• Mit Hilfe eines Child-Themes gehen eigene Än­derungen nach einem Update nicht verloren

• Um ein Child-Theme anzulegen wird lediglich eine neue Style-CSS benötigt.

•Child Themes sind abhängig von Ihrem jeweili­gen Parenttheme.

• Man kann mit einem Child-Theme bei Bedarf auch ein eigenes Template als das im Parentthe­me verwenden.

•Je mehr Funktionen ein Parenttheme hat, umso mehr kann man an dem vom Parenttheme ab­hängigen Childtheme verändern.

Das kann ein Child-Theme

Child-Themes nutzen dieselben Funktionen wie die Pa- rent-Themes, sie sind also von ihnen abhängig — ein Child-Theme braucht daher immer ein Parent-Theme. Was genau vom Parent-Theme übernommen wird, hängt davon ab, welche Funktionen das Child-Theme selbst be-reitstellt. Besitzt das Child-Theme beispielswei­se keine eigene functions.php, so wird die functions.php des Parent-Themes genutzt. Andersherum wird eine be­stehende functions.php des Child-Themes zusätzlich zur functions.php des Parentthemes geladen. Wenn Sie über PHP-Kenntnisse verfügen, haben Sie natürlich mehr Möglichkeiten, Ihr eigenes Child-Theme zu gestal­ten. Aber um ein Child-Theme zu erstellen sind PHP- Kenntnisse nicht zwingend erforderlich. Die Entschei­dung, wie umfangreich man sein Child-Theme gestalten möchte, liegt bei jedem selbst.

So erstellen Sie ein Child-Theme

Um ein funktionierendes Child-Theme zu erschaffen, muss man mindestens eine neue Style-CSS im Theme- Ordner der eigenen WordPress-lnstallation erstellen. Dies reicht aus, um zu verhindern dass das Child-Theme

webdesigner 04/2013

RATGEBERWas ist eigentlich Google AdWords?

bei einem Update überschrieben wird. Für die Style-CSS benötigt man folgende Befehle:

Theme Name: Name des Child-Themes Theme URI: Die URL des Child-Themes Description: Beschreibung des Child-Themes Author: Der Name des Autors Author URI: Die URL der jeweiligen WordPress-Seite Template: Der Ordnername des Elternthemes Version: Die jeweilige Version des Child-Themes Tags: Hier muss der Name des Child-Themes erneut genannt werden. ►

TWentv TW«iv» cmiä: stviMh«et [style.css/

f »

The ne M d ie : T A e n ly T A e lv r O i l dThe ne URI : h l . p : / / e x d n p le c u ivD e s z n p T ic r : C - i l d i h =re f o r “ he T w e n ty T w e lv e T h e TeA u t - o r : Y :u r ^ani= h e -e/V u t -o r U IU : h t i p : / /C H û r p ic c o rv :D o u t /T ^ m * l« t r t A ^ n ty ~ w « lwrV ^ r < in n : a . i a

V

fc im c o r t u r i i * . . / t w c n t y T w z l v c / s t y le . : s 3 * ) ,

hod y \ü d ik g r .u n d - c u l u r :

>

4 M ehr ist für die Pro­grammierung eines Child- Themes nicht nötig.

Die Bezeichnungen für Theme Name, Theme URI, Descrip-tion, Author, Author URI und Version kön­nen mit beliebi-gen Namen bezeichnet werden. Nur un­ter „Template" muss exakt der gleichen Namen des Pa- rent-Themes auftauchen.Durch den Befehl „@import url(,../twentyten/style.css');" wird die Abhängigkeit des Child-Themes vom Parent- theme klar. Durch diesen Befehl wird WordPress sozusa­gen ver-deutlicht, auf welches Parenttheme sich das je­weilige Childtheme bezieht. Der Befehl „@import" wird am häufigsten verwendet, da es so am einfachsten ist, die Style.CSS des Child-Themes einzubinden.Wenn Sie alles richtig gemacht haben, müsste Ihr Child- Theme im Theme-Ordner auftauchen, der dann unge­fähr so aussehen sollte: ►

C H I L D

Tw enty Tw elve Childu i '.if ■« » « m i l l

CMINnt * N to#* »WM M ««

£2dL3*S* w* B+m

Tn«nt)*âttûsc£m!u2

4 Jetzt ist das Child- Theme aktiviert

Das Childtheme kann dasselbe wie das Parenttheme

Bei Bedarf können Sie das Childtheme jetzt so verän­dern, wie Sie es gerne möchten. Man kann dieTemplate- Dateien, den Aufbau und das PHP-KnowHow des Basis Themes nutzen. Das neueste Basis-Theme ist TwentyT- welve. Wer möchte, kann sich ausschließlich um das De­sign kümmern und zwar in beliebigem Umfang. Eine sehr einfache Änderung ist es, wenn man beispielsweise die Hintergrundfarbe ändert. Theoretisch kann man na­türlich auch ein Design zu kreieren, so dass es mit dem Parent-Theme überhaupt nichts mehr zu tun hat.

Gestaltungsfreiraum ausnutzen

Neben der Style.CSS haben Sie wie gesagt noch zahlrei­che weitere Möglichkeiten, um Ihrer Seite die ge­wünschte Individualität zu verleihen. Sie haben in Bezug auf die Veränderungen genau dieselben Möglichkeiten, wie wenn Sie ein eigenes Theme erstellen würden. Auf

diese Weise können Sie beispielsweise den Header, den Footer oder die Sidebar nach Ihren Wünschen gestalten. Wenn Sie noch kein Child-Theme angelegt haben, son­dern Ihre Änderungen bisher einfach innerhalb der Vor­lagen des Parentthemes gemacht haben, können Sie diese einfach kopieren und in das Childtheme einfügen. So sind Ihre Änderungen dann vor Überschreibungen bei einem Update geschützt. Mit einem kleinen Kniff können Sie innerhalb eines Child-Themes sogar an der Hauptdatei, also an der index.php Änderungen nach Ih­ren Vorstellungen durchführen. Nachdem Sie diese aus dem Parenttheme kopiert und in das Verzeichnis des Child-Themes kopiert haben, müssen Sie sie lediglich umbenen-nen. Statt index.php heißt die Datei im Child­theme dann zwingend loop.index.php. Die Abhängig­keit des Child-Themes von dem jeweiligen Parenttheme sollte man immer im Hinterkopf behalten. Es ist nämlich nicht möglich einem Child-Theme Funktionen zuzufü­gen, die das Parenttheme nicht unterstützt. Wer mög­lichst viel verändern möchte, sollte daher auch ein The­me mit möglichst vielen Funktionen und Möglichkeiten als Parenttheme wählen. In diesem Zusammenhang ist oft von sogenannten„Framework-Themes" die Rede

04/2013 webdesigner 89

RATGEBERWas ist eigentlich Google AdWords?

Anpassung der functions.php

Wenn das Child-Theme keine eigene functions.php be­sitzt, wird die functions.php des Parent-Themes genutzt. Andersherum wird eine bestehende functions.php des Child-Themes zusätzlich zur functions.php des Parent- themes geladen. Das besondere an der functions.php ist, dass sie nicht wie beispielsweise die style.css Datei automatisch in einem Child Theme überschrieben wird. Wenn Sie eine eigene functions.php Datei für Ihr Child Theme anlegen, werden die Inhalte hier zusätzlich zu den Inhalten der functions.php Datei des ParentThemes aufgerufen oder besser gesagt direkt vor den Inhalten der functions.php Datei des Parent Themes. Auf diese Weise können Sie mit Hilfe der Child Theme Option zu­sätzliche PHP-Funktionen zu einem Theme hinzufügen, ohne dass diese bei einem Update des ParentThemes verloren gehen.

<titlex?php/** Print the <title> tag based on what is being

viewed.* We filter the output of wp_title() a bit -- see* twentytwelve_filter_wp_title() in functions.php.Vif ( function_exists(,seo_title_tag'))

seo_title_tag(); else

wp_title( true,,right' );

?></title>

Das Basis-Theme bleibt unangetastet, kann weiterhin durch Updates auf dem neusten Stand gehalten werden und ab sofort zieht Word Press die header.php immer aus dem Child Theme.

Nachteile der Child ThemesMan kann Templates im Child-Theme ersetzen

Die Funktionalität des Child Theme lässt aber mehr zu als die Änderung des Aussehens. Man kann beispielsweise auch bestehende Template-Dateien des Basis-Themes er­setzen. Word Press sucht quasi im ersten Schritt im überge­ordneten Child Theme und dann im Basis-Theme nach dem möglichen Template und durchläuft dabei die Hierar­chie der Template-Dateien. Das bedeutet, dass WordPress schaut, ob ein eigenes Template für das Child-Theme vor­handen ist, oder nicht. Wenn keines vorhanden ist, werden einfach die Templates des Parent-Themes genutzt.An vielen Punkten vom Theme kann man per Hook eingrei- fen, was aber nicht jedem Nutzer liegt und zumindest auf den ersten Blick kompliziert erscheint. Ein Hook ist ein Ein­griff in einen bestehenden Programmcode, in den der ei­gene Preogrammcode integriert wird. Daher wird bei­spielsweise nicht selten die Ausgabe des Title im head einer Website mit eigenen Funktionen oder von Plugins ersetzt. Man kann entweder per Hook den Titel bearbeiten oder die Ausgabe über eine Funktion steuern. Für ein Beispiel soll nun derTitel mit einer Funktion aus einem Plugin ausgege­ben werden. In dem Fall muss die header.php bearbeitet werden und darum muss man wie folgt vorgehen, sodass das Basis-Theme unangetastet bleibt.Als erstes kopiert man lediglich die header.php, die den head-Abschnitt für das Theme enthält in das eigene Child Theme. Hier kann sie dann beliebig bearbeitet werden. An­schließend zieht WordPress diese header.php und nicht mehr die Original-Datei aus dem BasisThemeTwentyTwel- ve. Damit kann nun auch die angesprochene Funktion in den Title integriert werden.

Oft sind die dieThemes, für die sich Child-Themes am bes­ten eignen sehr umfangreich und bringen sehr viele Funktionen mit, die man als Laie nicht mehr überschauen kann. Hier können auch die Child Themes nicht helfen.In der Regel werden die Stylesheets mit dem Befehl @im- port, der allerdings, wie in vielen Foren diskutiert wird, Nachteile in der Performance hat. Der Grund dafür ist, dass die @import-Regel das gleichzeitige Laden von ver­schiedenen Dateien verhindert und daher der Seitenauf­bau im Browser etwas länger dauert.

Fazit: Child-Themes sind äußerst nützlich für die WordPress-User. Es ist nicht nur die Tatsache, dass man trotz eigener Änderungen die Updates machen kann und die Änderungen dann weiterhin bestehen. Sie helfen auch den WordPress-Nutzern, die es sich viel-leicht nicht Zutrauen, ein komplett eigenes The­me zu pro-grammieren, aber gerne zumindest ein wenig an einem Theme herumbasteln würden. Hier eignen sich die Child-Themes perfekt, da man auch einfach mit Copy+Paste arbeiten kann und zunächst einfach die Dateien aus dem Parenttheme nutzen und sie in das Child-Theme kopieren kann. Die Frage, ob man nun updatet und damit alle Ände-rungen verloren gehen oder ob man nicht updatet und da­mit ein Risiko eingeht stellt sich nicht mehr, wenn man ein Child-Theme nutzt.

webdesigner 04/2013

DEUTSCHE POPDie Akademie der Musik- und Medienbranchewww.deutsche-pop.com

TUTORIALAuf zu den Sternen von Oliver Berg hold

Auf zu den SternenBanner-Werbung sieht fast immer irgendwie öde aus. Web Designer Oliver Berghold zeigt Ihnen, wie sich mithilfe von Illustrator und viel Vintage-Charme ein Banner zu einem echten Blickfang machen lässt.

(M^ / - O - : I I

JgJgJgLl3Ll

GE 1 - 8

sB ltBÜT.V. y y.\3

3*ca.i JÉJk

/.*

□ 1 ¡ J*. •j •i/

Banner-Werbung im Vektorgrafik-Design

sieht nicht nur stylish aus, sie ist außerdem

plakativer und hebt sich somit gut von den

kleinteiligeren Inhal­ten von Websites ab.

\

CODINGFACTORY

YOU DESIGN „ ■ . YOU DESIGN WE HTML I WE HTML

nm wWesigKi u | in ii

n diesem Tutorial möchte ich Ihnen zeigen, wie man mit relativ wenigen Arbeitsschritten und den gän­gigsten Funktionen in Adobe-Illustrator die Idee für

ein Label samt Grafik in Szene setzen kann. Alle Elemen­te bleiben voll skalierbar und eignen sich daher sowohl für Print als auch für das Web. Damit steht zum Beispiel der Verwendung im Rahmen einer breit angelegten Kampagne nichts mehr im Weg.Das hier gezeigte Banner soll einen Dienstleister für die Umsetzung von Webdesigns in HTML bewerben. Als Name des fiktiven Dienstleisters habe ich mich für „Ro­cket Lab" entschieden. Bei so einem Namen ist eine Ra­kete als Markenzeichen Pflicht. Ich wollte daher eine Kombination aus einer Rakete und einem Schriftzug für das Banner, geeignet sowohl für ein Label, als auch für die Gestaltung eines Banners. Die Rakete sollte auch in kleinem Maßstab prägnant sein und sich gut mit ande­ren Elementen kombinieren lassen. Daher sollte sie nicht besonders detailreich sein, sondern besser aus einfa-

CODINGFACTORY

a♦

-j%

YOU DESIGN WE HTML

inr».«rtkdesijne» nujaflii.de

chen Formen bestehen.Das Tutorial ist zur bes­seren Nachvollziehbar­keit in drei Phasen un­terteilt, die jeweils unter einer eigenen Überschrift stehen.Unter anderem zeige ich, wie man eine eingescannte Schrift vektorisiert. Außerdem enthält das Tutorial einen kleinen Exkurs zum Thema „Bezierkur- ven", einer zentralen Funktion für Vektorgrafiken. In Pho­toshop ist das dazugehörige Zeichenstift für viele Ein­steiger und Fortgeschrittene ein Buch mit sieben Siegeln. In Illustrator sind die einzelnen Funktionen zu­dem anders ausgelegt und dürften damit auch Photo- shop-Zeichenstift-Kenner zunächst vor ein Rätsel stel­len. Sind die Grundlagen aber erst verinnerlicht, merkt man schnell, dass es sich mit der Illustrator-Variante komfortabel arbeiten lässt.

92 webdesigner 04/2013

TUTORIALAuf zu den Sternen

Der Rumpf der Rakete

pv 1 ZeichenstiftI Mit der Rakete geht es los-sie setzt sich zusam­

men aus wenigen verschiedenen und sehr einfach zu zeichnenden Formen. Als Hilfsmittel für das Zeichnen der Formen blende ich in der Illustrator-Arbeitsfläche das Raster ein:„Ansicht > Raster einblenden" (Strg++). Den Anfang macht eine simple Kurve und eine gerade Linie. Mit dem „Zeichenstift-Werkzeug" (P) und mit Hilfe des Rasters im Hintergrund zeichne ich zuerst die Form für den Rumpf der Rakete. ▼

H El

CODINGFACTORY

YOU DESIGN WE HTML

vnvtMesit1« oufuitit

Färben und zusammenfügenW ^ l m nächsten Schritt färbe ich die Oberfläche in der gewünschten Farbe und füge den noch offenen Pfad über die Menüleiste „Objekt > Pfad > Zusammenfügen" (Strg.+J) zu einer geschlossenen Form zusammen. ▼

*mh»> (M * ArwM 9m

S t. A-J - i

r~y~iM*Wri

«1M

1 1 * a.A

Q Klonen und spiegeln\ J ^Anschließend klone ich die Form, dafür halte ich die Alt-Taste gedrückt und bewege gleichzeitig das aus­gewählte Objekt mit der Maustaste. Dieser vereinfachte Arbeitsschritt wird sich später noch wiederholen. Wäh­rend die geklonte Form ausgewählt ist, wähle ich über das Kontextmenü (rechte Maustaste) den Befehl „Trans­formieren > Spiegeln > Vertikal". ▼

f \ A Die Formen verbindenW ^ T M it dem „Auswahl-Werkzeug" (V) und mithilfe des Rasters positioniere ich die Formen so, dass sie zu­sammengefügt werden können. Mit dem „Direktaus- wahl-Werkzeug" (A) wähle ich einen Schnittpunkt bzw. zwei Eckpunkte verbinde sie. (Einfacher geht es, wenn in den Illustator-Voreinstellungen die magnetischen Hilfsli­nien bzw. die Ausrichtungslinien aktiviert sind.) Der Rumpf der Rakete ist damit bereits fertig. ▼

r ß • •

CODINGFACTOR

i. 2^2 IHNII04/2013 webdesigner 93

TUTORIALAuf zu den Sternen

Antrieb und Einzelteile

Die DüsenFür die Düsen der Rakete wiederholt sich der Ar­

beitsablauf Alternativ kann man auch den Rumpf der Rakete duplizieren, diese Form etwas modifizieren und anschließend verkleinern. Für das Seitenteil und die stili­sierte Flamme werden insgesamt vier Formen gezeich­net. Die Düse wird um eine Ellipse ergänzt. Schließlich kommt noch eine viereckige Form sowie eine Art Trop­fenform hinzu.Für das Viereck zeichne ich mit dem „Rechteck-Werkzeug" (M) ein Rechteck und modifiziere mit dem „Dlrektaus- wahl-Werkzeug"(A) die Eckpunkte. ▼

Die „Montage"Anschließend werden die Einzelteile sozusagen

zusammengebaut und an den Rumpf montiert. Für den Hauptantrieb der Rakete dupliziere ich die Tropfenform, skaliere sie entsprechend und platziere sie mittig unter der Rumpf-Form. ▼

Tropfenformv^Für die Tropfenform zeichne ich mit dem „Zei-

chenstift-Werkzeug" (P) eine einfache Kurve. Diese muss nicht genauso aussehen wie im Screenshot. Anschlie­ßend wird die Kurve, ähnlich wie beim Erstellen des Rumpfes, geklont, zusammenfügt und gefärbt. ▼

f

YOU DESIGN WE HTML

m.weMttifHMUfuiiit

© CODING FACTORY

YOU DESIGN . WE HTML

/ 'V Q D ie Fenster\ J O je tz t fehlen noch die Fenster. Mit dem „Ellipsen- Werkzeug"(L) zeichne ich einen Kreis, dupliziere und ver­kleinere ihn. Anschließend richte ich beide Formen verti­kal untereinander aus. Damit ist die Rakete fertig! ▼

© CODING FACTORY

9 4 webdesigner 04/2013

TUTORIALAuf zu den Sternen

Klonen und DrehenMit dem „Zeichenstift-Werkzeug" (P) erstelle ich

eine Raute. Auch dieses Mal klone ich die gezeichnete Form. Ich wähle die Form aus und rufe im Kontextmenü die Funktion „Transformieren > Drehen" auf. Daraufhin erscheint das Funktionsfenster „Drehen", in dem ich ei­nen Winkel von 6 Grad wähle und außerdem die Funkti­onen „Vorschau" und „Kopieren" aktiviere. Damit wird die Einstellung bestätigt. ▼

Das Label

1*1 Inspirationsquellen für ausgefallene I Schriftarten

Möchte man einen Schriftzug mit besonderem Charak­ter erstellen, wie für unser Label Rocket Lab, kann man einen geeigneten Font in einem Vektorprogramm wie Illustrator in Pfade umwandeln, um ihn anschließend zu modifizieren. Als Alternative zu echter Handarbeit eignet sich in diesem Fall z.B. auch der„Adobe-Font Brush Script Std", zu bekommen z.B. bei MyFonts. („http://www.myfonts.com/fonts/adobe/brush-script") Vielleicht haben Sie aber auch eine besonders schöne Handschrift und zeichnen einfach etwas vor, das Sie dann scannen und vektorisieren können.In alten Zeitschriften, Werbebroschüren und Büchern lassen sich ebenfalls schöne, manchmal sehr skurrile Schriftzüge finden, die als Inspiration oder auch als di­rekte Vorlage für individuelle Grafiken dienen können. Ein Besuch auf dem Flohmarkt oder das Stöbern bei ebay lohnt sich jedenfalls. ▼

1f\Klonen und Drehen perShortcutDie „Kop/eren'-Funktion sorgt dafür, dass die Rau­

te mit jeder wiederholten Drehung gleichzeitig dupli­ziert wird. Um aber das Funktionsfenster für die Drehung nicht für jeden Schritt erneut aufrufen zu müssen, be­nutze ich den Shortcut Strg+D. Damit dupliziere und drehe ich die Raute dreißig Mal, bis der Kreis geschlosse­nen ist. Da jede Drehung um einen Winkel von sechs Grad versetzt ist, verteilen sich die 30 Rauten gleichmä­ßig über den Kreis, denn 30 x 6° ergibt genau 180°. Anschließend markiere ich alle einzelnen Objekte mit einem Auswahlrahmen und wandle die Rauten in ein einzelnes Objekt um. Dafür rufe ich das „Pathfinder" Werkzeug auf: „Fenster > Pathfinder" oder Umschalttaste+Strg+F9. Mit dem „Auswahl-Werkzeug" (V) markiere ich alle einzelnen Objekte des Strahlenkran­zes und mit dem Formmodi-Befehl„l/ere/nen"füge ich sie zu einer Form zusammen.Die Strahlen werden an- , \\\\\w]///// schließend in ihrer Deck- I OsXVwAu\ w / / / / s kraft reduziert und unter der Rakete platziert. ▼

^ 4 Jr s |

/ a / >

J * / t

T ■ " • uv • - o

I Vprnnfn (rum Ervdlcn riner lunimmrngeirtrtrn Fofm und xum Hinnrfugen rum Fc tmbrrei<h b « grdruclctrr AH-Tnttf klicken,

Exkurs „Zeichenstift-Werkzeug": Bezier- Zm kurven

Für das Vektorisieren eines Scans oder allgemein für das Zeichnen nicht geometrischer Formen, also das freihän­dige Arbeiten mit dem „Zeichenstift-Werkzeug" (P), braucht man etwas Übung, um ein Gefühl für das Werk­zeug zu bekommen. Freihändiges Zeichnen am Com­puter (ohne Grafiktablett) bedeutet in den meisten Fäl­len: Bezierkurven. Eine Bezierkurve wird von der Grafiksoftware mathematisch modelliert. Rechnen muss man zwar nicht, um mit diesen Kurven zu zeichnen. Es ist aber hilfreich, zumindest das Prinzip verstanden zu haben, wie es in der Anwendung, z.B. in lllustator vorge­sehen ist.Praktisch bedeutet das: Eine Bezierkurve besteht immer aus mindestens zwei sogenannten Ankerpunkten. Oder anders gesagt, die Kurve entsteht zwischen diesen An-

04/2013 webdesigner 95

TUTORIALAuf zu den Sternen

kerpunkten.Klicken Sie mit dem „Zeichenstift-Werkzeug" (P) auf die Ar­beitsfläche, um einen Ankerpunkt festzulegen. Setzen Sie jetzt einen zweiten Ankerpunkt, werden beide Punk­te automatisch mit einer Linie verbunden. (Setzt man den zweiten Ankerpunkt bei gleichzeitig gedrückter Shift-Taste, wird die Linie exakt horizontal oder vertikal angelegt, oder auf Zwischenpunkten in Abständen von 45Grad). ▼

A N K IR P U N K T /y

mm -

r 4 «

13Kurven formenWiederholen Sie diesen Schritt, legen Sie zwei

Ankerpunkte fest und halten Sie dieses Mal aber dabei die Maustaste gedrückt. Jetzt ziehen Sie bei gedrück­ter Maustaste vom zweiten Punkt weg: Es entsteht eine Kurve, deren Form direkt über den zweiten Anker­punkt gesteuert werden kann. Außer den beiden An­kerpunkten der Kurve erscheinen zwei weitere Punkte, verbunden mit einer Werkzeuglinie, mit denen sich die Kurve direkt modifizieren lässt. Mit dem „Direktauswahl- Werkzeug" (A) lassen sich diese Punkte greifen. Ziehen Sie einen Punkt mit der Maus über die Achse der Werk­zeuglinie oder drehen Sie auf dieser Linie über den An­kerpunkt, verändert sich die gezeichnete Kurve. Auch hier wird bei gedrückter Shift-Taste der Winkel auf 45Grad Schritte begrenzt.Beim Zeichnen von Formen mit Bezierkurven, z.B. für das Abpausen eines Schriftzuges, ist es am besten, so wenig Ankerpunkte wie möglich zu setzen, denn je weniger Punkte eine Kurve benötigt, desto „eleganter" wird sie. Fehlt es noch an der nötigen Routine beim modellieren von Kurven oder Formen, lassen sich diese auch anschließend korrigieren bzw. vereinfachen. Illus­trator bietet dafür sogar eine eigene Funktion, mit der man aus einer bestehenden Form Ankerpunkte entfer­nen kann. Die„Vereinfachen"-Funktion bietet eine Ein­stellung der Kurvengenauigkeit und des „Winkel- Schwellenwerts" über einen Schieberegler nach Prozentwerten. Die Option „Original Anzeigen" bietet für mehr Kontrolle die Kontur der Ursprungsform in ei­ner anderen Farbe.Meiner Meinung nach ist dieses Werkzeug aber so gut wie überflüssig, da es keine detaillierten Einstellungs­möglichkeiten besitzt und sich der Effekt deshalb ei­gentlich gar nicht kontrollieren lässt. ▼

M Komplexere FormenMöchte man komplexe Formen zeichnen, wie

einen Schriftzug, ist es ratsam, mehrere Pfade bzw. Kur­ven zu zeichnen, denn kleinere Einheiten lassen sich besser kontrollieren und korrigieren. Stimmt das Ergeb­nis, kann man anschließend mit dem „Zeichenstift- Werkzeug" (P) am jeweils zuletzt gesetzten Ankerpunkt ansetzten und die Kurve fortsetzen, oder einzelne Pfa­de zusammenfügen. Für das Zusammenfügen von Pfa­den gibt es einen eigenen Befehl, der über die Menül­eiste erreichbar ist : „Objekt > Pfad > Pfad zusammenfügen". ▼

□s

» < I- k li r»ti 4<l • . . .

15Ausschnitte in FormenMöchte man Buchstaben zeichnen oder pau­

sen, die einen geschlossenen Bereich oder Bauch ha­ben, wie z.B. das„o" in „Rocket" ist es am einfachsten, zwei Formen zu zeichnen, um anschließend den inne­ren Teil herauszuschneiden.Zuerst zeichne ich mit dem „Zeichenstift-Werkzeug" (P) die äußere Kontur des Buchstaben. Dann sperre ich im Ebenen-Fenster dieses Objekt. ▼

96 webdesigner 04/2013

TUTORIALAuf zu den Sternen

16Die Innenform bearbeitenKlicke ich jetzt mit dem„Zeichenstift-Werkzeug"

in das Dokument, legt Illustrator automatische eine neue Arbeitsebene an und ich kann die Innenform des Buchstabens zeichnen. Außerdem kann ich die Deck­kraft soweit reduzieren, dass die darunterliegende Vor­lage deutlich sichtbar wird. Für die Fläche der inneren Form wähle ich eine Farbe für deutlichen Kontrast. ▼

fOrrwo#:J * % 4

h -

* 1

b S

• | • | • | • A I

Typografie

19Schriftarten aus anderen QuellenFür die Typografie des Banners kommen zwei

FreeFonts zum Einsatz:„Chunk Five" und„League Gothic". Beide Schriften bekommt man bei Fontsquirrel:

http://www.fontsquirrel.com/fonts/League-Gothichttp://www.fontsquirrel.com/fonts/ChunkFive

Für Chunk Five gibt es keinen kursiven Schnitt (italic). Dieser Effekt lässt mit Illustrator aber leicht imitieren. Dazu wird die Schrift ausgewählt und anschließend mit dem „Frei-tronsformleren-Werkzeug" (E) in eine ge­wünschte Neigung transformiert. Am einfachsten ge­lingt das bei gedrückter Shift-Taste. w

\ Q.yy .&

o.

*•• • •

f Frcs-traniform iefcn-W cfkieug (E)IT— — ■■ —■ ■ ■! —

1 “7D ie Sperrung aufheben/ Jetzt hebe ich die Sperrung im Ebenen-Fenster

wieder auf und wähle beide Formen aus. Dafür klicke ich bei gedrückter Strg-Taste nacheinander auf die Farbmarkierungen der Ebenen im Palettenfenster. ▼

/"V Kreis mit Versatz^ Jetzt zeichne ich mit dem „Ellipsen-Werkzeug"(L) einen Kreis. Anschließend verschiebe ich den Pfad um drei Pixel. ▼

i ’ mm2

* ► • % Q * •?£ r ! ttrm* ' * t : m m » *- : mm». $ - : i»m *.

4mTwkk«

rud

18Die Ausschnittform entfernenMit dem „Pathfinder"-Werkzeug entferne ich die

verdeckte Fläche, also den unteren Teil der Formen, der herausgeschnitten werden soll. Jetzt sind beide Formen gruppiert. Ich hebe die Gruppierung auf, wähle die obe­re (in diesem Fall die grüne) Form aus und entferne sie über die Funktion„Auswahl löschen". Alternativ kann die Auswahl auch mit der Entfernen-Taste gelöscht werden.

(<k

04/2013 webdesigner 97

©CODING FACTORY

Ch u n k f i v e ]

eai.i»c»a ic»n ic» .,*c»aic»aic*3iaic»c»ciiraCTaiEainaicai(nicaG3iaiiEaic»

CODING r rf FACTORY

JNK FIVE

TUTORIALAuf zu den Sternen

*1 Schriftzug und Form ausrichtenI Der äußere, verschobene Pfad wechselt auf

Kontur, dann werden Schriftzug und Form miteinander ausgerichtet. ▼

□ -r. %

I

th erv ^ ’1

• -J0.\ '

■y\, .

C H U

f

Q Letzte Feinheiten« JC hunk Five verwende ich auch für den Schrift­

zug „YOU DESIGN WE HTML". Wer will, kann diesen Teil noch mit einigen horizontalen Linien und Sternen er­gänzen. Und probieren Sie es doch mal mit anderen Farbkombinationen... ▼

Mt* -

Die Schrift färben ^ ^ A b s c h lie ß e n d erhält die Schrift die Farbe des Banner-Hintergrunds, sodass die Schrift wie ein Aus­schnitt aussieht. ▼

LV*' t — t » t » r Cfc*«W S<hn#* i«#<* f«r* * >*•♦» m*j IKS * G o K h w * ß . O V I

S “ ■ — - ------- . -s t * 1 - - . . ■ ! tm • ^ i « J 3 i ¿ - Ut- » 4) 3 $ - B j » « ' » » p . r : m v o * : « u i# « * .) , -

_ 1

- - = • -•« =* =»=noi rzji ruji rím cn* in» .tä rjn rnn íz* ítib crm rjm r» f7m üjp rzn fr i rr i c i.n i:rnji croi rzn r n r ii rrni e r.M ptzu fz» f73i rzji *7 11 ítzji

ID ». s «i.T .

y s.

0.*k « « 3 . - 1 jj j s.*>

*a -r.Q.A

1 %

© CODING FACTORY

¿H U N K FIVE

b i J P i» LOtgwtm *• :■***'4« ¡¡¡ÜacÜ^I± =£

SJkmif*

K. i J I 1 J-

=5 w u

« PiW- »1

t h e

YOU DESIGN WE HTML

League Gothicwww.webd8sitner-masazin.iie

CODINGFACTORY

j¿¡¡6

YOU DESION WE HTM L

m tMtufbtf upMflt

CODINGFACTORY

98 webdesigner 04/2013

WEB-GALERIEInspiration

j r ------------

dustinwoodMMB

1

HELLO. I’M DUSTIN WOOD.

MinUDM • ( W M 1 DESIGN W E B S IT E S , PR INTmm>nrnm M ATERIAL, AND 1 D A B B LE IN

mmmm

VIDEO. SO M ET IM ES 1 PO STTHOUGHTS TO TW ITTER .CHECK O U T MY W ORK AND DON 'T FORGET TO SCROLL DOW N THE PAGES.

CO O L B E A N S - SURFACE51 S E L F PROM O

A i 0 - 1 C O N TACT

eaxCRuflH*

-r

B O X C R U S H W E B DESIG NM tu c * :* t i l ra O A -.r .

ft**

E X P LO D E D PENl-*i '

Ziemlich ungewöhnlich präsentiert sich der Webdesigner Dustin Wood auf seiner Homepage. Die bis auf ein paar ein­leitende Worte und der links angebrachten Navigation fast komplett in schwarz gehaltene Seite hat einen sehr individu­ellen Stil. Auf den Unterseiten erfährt man mehr über die Ar­beit von Dustin Wood. Er stellt einige seiner Arbeiten vor und man erfährt, dass er neben der Konzipierung von Webseiten und Videos und Printprodukte anbietet.

M >w<t A Icom somAMS conta shcvujt stiwmdshp

8.8 BU/AADVNATIONALLY?VS. COMPETITIVE TRIPLE STACKS*

p — -T—«»")--mrfiiPUPM Cowl I im mm

as* the experts

I #1 ( UPCOMING TRAIT INNOVATIONSIN THE NEWS |

M W l l K M lI %C*. I

GENUITY.COM WEBSITEDEVELOPMENT

SEE MORE ON THIS PROJECT ■

NEIGHBORHOOD SANDBOX

SEE MORE ON THIS PROJECT *

INVkCB 0E»»O**

Shopping auch im Internet als Erlebnis zu zelebrieren, ohne den Produkten die Schau zu stellen, ist eine echte Herausforderung für Webdesigner.

SALEU U f LKD MCUE RLDUMRUNGi M

Der Online Shop von S. Oliver ist im Layout betont schlicht gehalten. Auf der Startseite findet der modebewusste Besucher dafür eine Reihe interessanter Inhalte. Die Seite ist mehr als ein Shop, sie zeigt Hinweise auf Verkaufsaktionen, stellt Trends vor und bie­tet sogar Modeberatung in Form von soge­nannten „Lookbooks" an. All diese Dinge sorgen dafür, dass der Besucher gerne wie­der kommt.Die Qualität der Marke S. Oliver wird vor al­lem durch absolut professionell gemachte Fotos transportiert. Vor allem die ausge­wählten Models sprechen die junge Ziel­gruppe perfekt an. Auch auf Funktionalität wurde großer Wert gelegt. In der Galeriean­sicht ist zum Beispiel jede Produktabbil­dung mit einem Hover-Effekt versehen, der nur das Produkt an sich und, in einer zusätz­lichen Box, die verfügbaren Größen zeigt.

s & lx m

• | (tM I m w M f l

» mm

LOOKBOOK

<25 - K M M I \Cium njM Hft fi%m n M M

NEWSLETTER10% RABATT JETZT Ali MELDEN

Cf«* OltoM

BALLERINAS

100 webdesigner 03/2013

WEB-GALERIEOnline Shops

æ r s r s f in

Kickz.com ist ein Online Shop für Sport­schuhe und Kleidung, wie sie in der Hip- Hop-Szene gerne getragen werden. Ent­sprechend stylish und sportlich präsentiert sich der Shop. Um bei den Besuchern Be­gehrlichkeiten zu wecken, werden die Mar­ken und vor allem ihre Produkte zielgrup- pengerecht in Szene gesetzt. Unterhalb der Slideshow befindet sich praktisch als zwei­te Navigationsleiste eine Leiste mit den Emblemen der namhaftesten Hersteller, so dass die Fans bestimmter Marken und Na­men sich gezielt informieren können.Auch auf den Produktseiten fehlt es nicht an Bedienkomfort. So sorgt eine Lupen­funktion für eine detailreiche Darstellung der Produkte. Ein besonderes Problem bei Mode sind die uneinheitlichen Größenbe­zeichnungen. Kickz.com bietet bei Schuhe zum Beispiel die Option, Größen als euro­päische, UK- und US-Größenbezeichnun- gen anzeigen zu lassen. So ist zumindest schon eine Verwechslung amerikanischer und britischer Größen ausgeschlossen.

0 MQMI M H A MM N SAU > MV

V<Mm NMiMaH

AIR MAX 1 ESSENTIAL"WOLF GREY/PHOTO BUK* W M ■

4 _JL £mmo»| w»M: B 3 » f l . Vans SUPRA Ä MAflXC*

n

FRA

l* M (M m 4 V i r u i i 4 l « M i I M W l N /4h>— i ^ u h » > i m

« » IHMr« *nr> t feto 1 HVrvMatNir> 1 r M i *

f w w « n l *— m o * W p w » r # t r v * v r «*t a M A M M P « .f i a l j i r f n u

i w » , « M U K v i K a u » H m « )

*»»■urw*>/•

• "• «*■In n

M m . . . .

wähle eine färbe

wähle eine große

G R Ö S S E N T A B E L L E

K l .40 2/3 41 1/3

44 44 2/3

Männer HEU-GRÖSSENEU-GROSSEN

ACHT US-GRÖSSEN UK-GRÖSSEN

46 2 3

471-3

material te>1 il

Vnm tf umw

OMI V lH M l H i . U • OS STOHS U H U S U . l s M

SCHUHE

M W U l f »psn [<.»]M « U . M[■ it] [■ r»] I m ]M « • I W • •»> |m a l lm m I « « •

[ " * J * •v • • «i m « I• - M « I I » M

M ir m m m

• t l • « » •

• - a n mm. » « • • m

> « ■ < V r-iH t r -a ia u « M T I m j

• • • m • ■ 1

03/2013 webdesigner 1 01

o»

WEB-GALERIEOnline Shops

Aus heutiger Sicht ist kaum vorstellbar, dass ama- zon einmal als reiner Bücher-Online-Shop ange­fangen hat und erst später anfing, seine Produkt­palette in alle erdenklichen Richtungen auszubauen, redcoon.de kann beinahe eine ähnli­che Unternehmenshistorie vorweisen. 2003 als rei­ner Online Shop für Unterhaltungselektronik ge­startet, bietet das Aschaffenburger Unternehmen heute auch Bücher, Baumarktartikel, Bürobedarf und Sportartikel an, und zwar international.Nicht zufällig erinnert die redcoon-Seite in Aufbau und Funktionalität der aktuellen amazon-Seite. Bei der Firmenfarbe hat man sich für ein feuriges Rot entschieden, das interessanter weise auch für But­tons verwendet wird aus Conversion-Optimie- rungstechnischer Sicht eigentlich nicht ratsam. Der horizontale lineare Verlauf im Fieader wird bei den Buttons wieder aufgegriffen und nimmt dem knalligen Rot geschickt die warnende Wirkung.

inkl. MwSt., keine Versandkosten

► IN D E N W A R E N K O R B

ra fc im o e

M M IU I & 1 M « K it M r a w / im ? !r « * _f i •* • » l 'ié ÿtftifn* « u.uu

» J-»

Will^oowi.nn

i^ rv . «iHIN Ç<«'. «J* ' ; L i -3 M IF K S im

f M l f l lH , ft

HU* ft

l iw fr ft WMmiw i i l n

Mritjm tcaiwi«» ft CM

ft

«fliUltl- M O iü iS

» JETZT BllTTERN

DERREDCOON NEWSLETTER

• IwbrtH* tltUlMMéM

I V I f d M l M r i N lMt

« » K f b i i r t iw iJ i

SOFORTüacRwetsuNG

P a y P a l

—

*■*» i m *

«ferewn '

D ' W A w y*T*t

/190T lü ifW iK O «

Suchen

Das Full-HO-Smsrtpborv#Sen/ xptnft 2 WKx

1 «00 M * a : » r t * b « n ‘

P.vwvww 3TH FD 56 7ni

* 14CO ü *n<n und d*»

B*tirvdruo#r><los FormatA3 i rt*rutrart*f vori Hb

f BOSCH

BO)«») »VAF 28444

*101 fk* 1«00K

9 § ® Q f °

• rC«fT»»A,5# 7 »Q■ * w t(f ir4 n A iiu iiy «• AMiit.« ntfOrirfi«

» f t r t a t n f fk T á if fy v iir iT i) » t/fltnKUgiai1

► ¿UM UÏÂBOJ

Pm M om c P H I L I P S KENW O D

*=“ B7(99 o

P

JAflikiaftJO-*‘tnm*-TV, r « « » c .cvbt>c#82 ves

Jvr

»WniiMM «U/LMt/TOrtiW HiM IrtTUW/HtIG*T\r***«0. CMVTK>G7 KO-TV,r*MO.C*frTK.

UM?mpyN_L H C*iE NA*MT>CN mt

» O f-ÎY Ü iKrW K^fH I

S O N Y Gigaset EPSON

B

& ¡ PVH* NW*.Oü tjflt'ftu i

» m . B w r i

aÉtffâp0 <ß3Qp°lpv-4»WÜMflltf

FuftTfrAN'MtfMi<WC>uW«

v a m v tiH v « * t j > v*r< . A04KlWWrtl 17.1 Cows:o:-6 c-j b

» Ararat mix* » nrfln

A lle s fü rs A b itu r: Je tz t n och mal Gas geben !

ÜVÜkN

<¿!Y É

o « :

. L

1 <asr .1vl

W » prtatn r t f r j w tf r iim ft Ob L r . d c f l i i i : i r a r t i M i r w i f n und A if ir rt t Aff C lu n c n , N r M n t a A m h

^ L ••*«'>? «fX »K* W W f « ki|»nt+« rV & itff* *

Dtn iVJWM n urnerr i r t i w #v r*#tUrM>r H in t * Cm U * ok de» §e*TiK* vn» wV&JM i t *ut * * n «m >vK3<h « W M A M « M l » « » - I n K T 't t ' t f COf r m**c»W0T v n C M M f l m

C 'm y iM »('UiW rrtfV « iiv u n » m WWMW

M r t l w *rt Go^mtr m i r o t « « «♦» 9« U h H k m **Cft Ouc*U - ^ » i * t r h fA r t k ^ >• ,% **• ►*% i|H» fco«*» iHtl 'Mät

<on*»w mfeMt. vrivtv« •#*

cmmcic n k * io .»•*»«« o « « i •*»* rt«u« O tu iN W r n w w u»4 r«eust .’«a «»»>♦'' > t * r ^ i >jmto á t+&.<>M 4» f*jM R<** i*dl«r«4Mn «»ii*« T MO AM ft«*hr* Ji- 1 iV A f r m m l ■rrhaw tKIwáti ba<Jk*€T*

SEHR G U T

1 02 webdesigner 03/2013

WEB-GALERIEOnline Shops

rro îi^ rp iM ir

fo l lo w Utt

on t u i i t t e r

VIDlOBIOG t

Tt M w Hf tfMw: 0*S«A/*??3éA

th mann l.it/ll*«* »MH« l * n I* A (II •*«»« S«t#n mrHrrv

Der größte Nachteil eines Online-Shops ist wohl, dass man die Produkte vor dem Kauf nicht anfassen, geschweige denn auspro­bieren kann. Für einen Musikinstrumente- und Studiotechnik-Anbieter ist dieses Prob­lem noch größer, da es sich bei vielen Produkten um recht teure Anschaffungen handelt, diese mitunter auch recht sperrig sind und nicht zuletzt der Klang eine we­sentliche Rolle spielt.Thomann als einer der größten Anbieter von Musikinstrumenten und Studiotechnik hat mit seiner Website versucht, seinen Kunden so gut es geht entgegenzukommen. Das Design an sich kommt zunächst etwas bieder daher. Auf­fällig ist aber die starke Kategorisierung der Produkte. Wer sich nach einer E-Gitarre um­schauen möchte, muss sich durch gleich mehrere Kategoriestufen klicken: Gitarren und Bässe>E-Gitarren>E-Gitarren-Modelle. Die beispielhaften Abbildungen bei den Kategorien sind dabei auch für Laien eine ungeheure Hilfe. Auf der Produktseite gibt es dann auf den ersten Blick die techni­schen Details in Form einer Bullet List und, weiter unten, Produktrezensionen von an­deren Kunden. Um den Klang des Instru­ments beurteilen zu können, wurden in ei­nem eingebundenen Player verschiedene Soundbeispiele bereitgestellt.

( *«««1

M w t lK IN n A lM m lU f M M» — f i t* M

To|)Niw»

100%

SEHR GUT 4 .9 1

IM , I M

IM »

l>*. I M

H«l) I*« Ui»». «f «4u ow

Willkommen zu Hause!Harrte* H Io r iM n b * çrtAlan M*uèN*ut. fan t*n hnétn |Bmrum Thmrts» M iK ik in U n M M n l». ttu 4 to -. U M . u rd RatdM NiM kqitAftM k - öm io«* kotlaMi«

K0

M i ThOÄ^rirt V# r w r m f V#ry<#pofto#fw*t< V*rw»nd iiwcrtialb Ooi^vrMorvlt tb ****** w Jt HÄ. 30 Tag* Moncv !U d l C«ran*iw und 3 Jahn» Car<jntu>

«««. «i

M l, I M

i m ,- i m

i m *. I « « im»

H l, I M

*•»*# In»0 *«rr t» '# i« : U M « » iM f PM rUr*

Ow» M»f I«LT ri»| *nNÂ

iM I t l IMI I I . (M I IM K I X M MM

U M . TM«IN*. .%AU>, M# »w

IW«« *1 IM »«♦. I M OM H H W . W - w

Itt, «Mtf M i

in, i<

sIM \ IM \M • «M l I W - w

Mhiilwr >l«»H«nilw4»wm f

U MrM H v tH N

IM MIM *. I N

«MTV I MnM I »l » M ) ..VM N 1 « | g i. lM aV

RATGEBERBuchrezension, Modernes Webdesign von Dragona Mimic

Photoshop CS6Schritt für Schritt zum perfekten BildLearning by Doing: Auf 440 Seiten erlernen Sie Photoshop CS6 ausschließlich anhand praktischer Beispiele, die Sie mit dem Experten Markus Wäger Schritt für Schritt nachvollziehen können.

W enn Sie kein langes theoretisches Geplänkel möchten, sondern direkt mit der praktischen Photoshop-Arbeit loslegen wollen, ist das

Buch Adobe Photoshop CS6 - Schritt für Schritt zum perfekten Bild genau das Richtige für Sie. Das Sprichwort „Erst die Arbeit, dann das Vergnügen" wird hier einfach komplett ignoriert und der Spaß an erste Stelle gestellt. Auf insgesamt 436 Seiten und in elf sehr ausführlichen Kapiteln zu grundlegenden Themen, wie beispielsweise Auflösung und Grundlagen, Farbkorrektur und Schwarz- Weiß-Bilder oder Retuschieren und Verbessern, führt der Grafikdesigner und Adobe Certified Expert Markus Wä­ger den Leser Schritt für Schritt in die faszinierende Pho- toshop-Welt ein. Bereits beim Durchblättern wird klar: Lange theoretische Themenbesprechungen wird man

Markus Wäger arbeitet seit den frühen 90er Jahren als Grafikdesigner und betreibt sein eigenes Gestaltungsbü­ro,Designworks'. Als Adobe Certified Expert ist er auch Software-Trainer für Photoshop, Illustrator, Acrobat und InDesign. Außerdem veröffentlicht er seit 2006 regelmä­ßig Software-Tipps und Artikel zu den Themen Design und Typografie auf seinem Weblog.

Auf einen BlickDas Produkt: BuchVerlag: Galileo DesignAutor: Markus WägerIm Netz: www.galileodesign.dePreis: 39,90 Euro ISBN: 978-3836218856Highlights: 436 Seiten, Hardcover, DVD zum Buch mit Videotrainings, Arbeitsmaterial und 30-Tage-Testversion von Photoshop CS6 Extended

hier nicht finden. Rund 100 verschiedene Workshops mit Arbeitsmaterial auf der beiliegenden Buch-DVD erwar­ten den Leser. Besonders gut geeignet ist dieses Praxis­buch durch die klar strukturierte Wissensvermittlung für Einsteiger. Die einzelnen Kurz-Workshops sind nach Schwierigkeitsgrad kategorisiert, sodass der Leser leicht einschätzen kann, ob der eigene Wissensstand den er­forderlichen Fähigkeiten entspricht. Das hilft gewiss da­

Markus Wäger www.markuswaeger.com

webdesigner 04/2013

RATGEBERBuchrezension, Modernes Webdesign

bei, Frust zu vermeiden und sich langsam an die einzel­nen Herausforderungen heranzutasten sowie die unzäh­ligen Facetten des Bildbearbeitungsprogramms schritt­weise kennenzulernen. Der Autor greift hier auf seine langjährigen Erfahrungen als Trainer zurück und weiß genau, welche Fragen am häufigsten auftauchen und welche speziellen Themen, gerade für Einsteiger, am schwierigsten zu bewältigen sind. Wenn nötig beginnen die Kapitel mit einem Grundlagenexkurs, in dem alle für die folgenden Seiten notwendigen Informationen kurz und kompakt erläutert werden. Gut ist auch, dass die Workshops jeweils durch einen kurzen Vorspann einge­leitet werden, der den Leser darüber informiert, was man lernen kann, welche Werkzeuge und Funktionen ver­wendet werden und wie das Endergebnis sein aussehen wird. Die praktischen Workshops sind wirklich sehr gut zu verstehen und leicht nachvollziehbar, sodass sogar blutige Anfänger direkt in die Photoshop-Arbeit einstei­gen können. Egal ob ein monochromes Bild koloriert, Hauttöne verbessert oder auch Haare freigestellt wer­den sollen, Wäger versteht es, auch sehr anspruchsvolle Techniken nachvollziehbar zu erläutern. Auch optisch überzeugt uns das Praxisbuch auf ganzer Linie. Dem Au­tor ist die Bebilderung des Praxisbuches und damit auch die Auswahl des Arbeitsmaterials sehr gut gelungen. Ein weiterer Pluspunkt ist außerdem, dass man das Buch auch gut als Nachschlagewerk verwenden kann. Der Au­tor hat darauf geachtet, viele Querverweise zwischen den einzelnen Exkursen und Workshops einzubauen. Zusätzlich rundet ein ausführlicher Index am Ende des Buches den Gesamteindruck ab.

^ G ru n d la g e n : In K a p ite l 1 v e rm it te lt d e r E xperte M a rku s W äger g ru n d le g e n d e K enn tn isse d e r S o ftw a re , d ie je d e r P h o to sh o p p e r kenn en so llte .

Fazit: Das Buch Adobe Photoshop CS6 - Schritt für Schritt zum perfekten Bild ist speziell auf die Be­dürfnisse von Photoshop-Einsteigern zugeschnit­ten. Der Autor Markus Wäger greift auf seine Erfah­rungen als Photoshop- und InDesign-Trainer zurück und weiß genau, wo die größten Einstiegsschwie­rigkeiten auf Bildbearbeitungs-neulinge lauern. Doch mit diesem Buch tappen Sie nicht in die An- fänger-Fallen und bleiben garantiert mit sehr viel Spaß am Ball. Erfolgserlebnisse motivieren bekannt­lich, und genau das wollte der Autor mit diesem Werk erreichen. Leicht verständlich, sehr übersicht­lich und kompakt erklärt der Experte das komplette Bildbearbeitungsprogramm. Ob Effekte, Retuschen, Farbkorrekturen, Montagen oder einfach grundle­gende Fragen zum Arbeiten mit dem Programm - das Praxisbuch hat für alles eine Lösung parat. Toll ist auch, dass eine 30-tägige CS6 Extended-Testver- sion auf der DVD mitgeliefert wird. So steht einem sofortigen Eintauchen in die Photoshop-Welt nichts mehr im Wege. Wir können eine klare Empfehlung aussprechen. Photoshop-Neulinge sind mit diesem Praxisbuch auf jeden Fall auf der sicheren Seite. Fortgeschrittenen Photoshoppern kann dieses Buch vor allen Dingen als praktisches Nachschlage­werk dienen.

^ F re is te lle n m i t K a n ä le n : W enn a u to m a tis c h e F re is te lle r ve r­sagen, z e ig t Ih n e n d e r Experte, w ie m a n m ith i l fe von K anä len fre is te lle n kann .

Fotolia 2 Cancom 71Galileo 7 Deutsche Pop 91Plentymarkets 23 hdpk 113dpunkt 29 Strato 115Host Server 59 Host Eurore 116Sonic Media 64, 65

04/2013 webdesigner 105

JOB BOERSEStellenanzeigen aus der Welt des Webdesigns

braintaase - b u s i n e s s t e c h n o l o g y

Online-Marketing & -Analysis Manager/inÜber BraintagsWir sind eine schnell wachsende E-Business Agen­tur mit über 10 Jahren Erfahrung in der Erstellung von Online-Shops, Websites und komplexen Cloud- Applikationen (CRM, Kampagnen-Management, Newsletter-Management, etc.). Durch unseren pa­tentierten Java Application Server und unser eigenes Rechenzentrum sind wir in der Lage, alle Kunden­wünsche selbständig umzusetzen und entsprechen­de Lösungen über die eigene Software-Plattform zu entwickeln.

Neben den technologischen Leistungen stehen wir unseren Kunden als auch E-Business-Consultants zur Verfügung, bieten Web- & Marktanalysen an, entwik- keln umfangreiche Vermarktungs-Strategien und leiten unsere Kunden durch alle Online-Marketing- Kanäle.

Ihr JobGerade um den Bereich Online-Analyse und -Mar­keting stärker auszubauen, suchen wir dynamische und professionelle Unterstützung in beiden Teilbe­reichen:

• Umsetzung umfangreicher Online-Analysen• Entwicklung von Online-Marketing-Strategien• Planung, Betreuung und Monitoring der Kampa­gnen (SEO, SEA, Affiliate, Display, Social-Media, etc.)

• Optimierung der Shops- & Websites durch A/B-Te- sting, Usability-Optimierung, etc.

• Direkter Kontakt zu Kunden & Partnern• Aufbau eines Teams und Betreuung der Mitarbeiter

Ihre QualifikationenUm effektiv und kundenorientiert arbeiten zu kön­nen, ist uns Ihre Persönlichkeit mindestens genauso wichtig, wie objektive Anforderungen. Sie sollten daher ein hohes Maß an Teamfähigkeit mitbringen, durch Ihre Arbeit begeistern und sich vor allem selb­ständig neue Themengebiete erarbeiten können.

• Erfolgreich abgeschlossenes Studium der Betriebs­wirtschaftslehre oder Kommunikationswissen­schaften (Schwerpunkt Marketing) oder ähnliche Qualifikationen

• Mindestens 3 Jahre Erfahrung im Bereich Online- Marketing

• Ausgeprägte SoziaIkompetenz, selbstsicheres Auf­treten, sowie Verhandlungsgeschick

•Technisches Verständnis, strategische & analytische Fähigkeiten

Ihre ChancenSie arbeiten innerhalb eines dynamischen Teams im Umfeld einer aufstrebenden Online-Agentur. Durch unsere langjährige Erfahrung können Sie auf beste­hende Strukturen zurückgreifen und sind dennoch flexibel in der Implementierung neuer Lösungsan­sätze. Durch unsere Arbeit mit renommierten und international tätigen Unternehmen, bieten wir Ihnen spannende Projekte, kreativen Freiraum und vielver­sprechende Perspektiven für Ihre berufliche Karriere.

Bitte senden Sie Ihre Bewerbung inklusive Lebens­lauf, frühestem Eintrittstermin und Gehaltsvorstel­lungen an:

jobs@braintags.de

Braintags GmbH Jakob-Kaiser-Straße 12 47877 Willich

Christoph Trautmann Recruitment & Human Resources Tel:+49 (0)2154 4704100 Fax: +49 (0)2154 4704 111 E-Mail: jobs@braintags.de Web: www.braintags.de

Job-ID aufwww.der-webdesigner.net: j58

106 webdesigner 04/2013

JOB BOERSEStellenanzeigen aus der Welt des Webdesigns

braintagse - b u s i n e s s t e c h n o l o g y

Java Softwareentwickler/inÜber BraintagsWir sind eine schnell wachsende E-Business Agen­tur mit über 10 Jahren Erfahrung in der Erstellung von Online-Shops, Websites und komplexen Cloud- Applikationen (CRM, Kampagnen-Management, Newsletter-Management, etc.). Durch unseren pa­tentierten Java Application Server und unser eigenes Rechenzentrum sind wir in der Lage, alle Kunden­wünsche selbständig umzusetzen und entsprechen­de Lösungen über die eigene Software-Plattform zu entwickeln.

Ihr JobAls Java Softwareentwickler/in arbeiten Sie inner­halb eines Teams an kundenspezifischen Lösungen und der Weiterentwicklung unseres patentierten Java Application Servers. Zu Ihren Aufgaben zählen:

• Analyse, Spezifikation und Dokumentation pro­grammatischer Anforderungen• Entwicklung und Gestaltung von Software- und Anwendungsarchitekturen• Entwicklung von komplexen Kundenlösungen• Weiterentwicklung eines patentierten Java Applica­tion Servers• Betreuung und Beratung der Kunden

Ihre QualifikationenUm effektiv und kundenorientiert arbeiten zu kön­nen, ist uns Ihre Persönlichkeit mindestens genauso wichtig, wie objektive Anforderungen. Sie sollten daher ein hohes Maß an Teamfähigkeit mitbringen, durch Ihre Arbeit begeistern und sich vor allem selb­ständig neue Themengebiete erarbeiten können. Darüber hinaus erwarten wir:

• Ein abgeschlossenes IT-Studium oder eine ver­gleichbare Ausbildung• Fundierte Erfahrung mit technischer Konzeption / Software-Architektur von Web-Anwendungen• Sehr gute Kenntnisse aktueller Software- (JEE, Java,

SOA, etc.) und Web-Technologien• Ein strukturierter, analytischer und zielorientierterArbeitsstil

Ihre ChancenSie arbeiten innerhalb eines dynamischen Teams im Umfeld einer aufstrebenden Online-Agentur. Durch unsere langjährige Erfahrung können Sie auf beste­hende Strukturen zurückgreifen und sind dennoch flexibel in der Implementierung neuer Lösungsan­sätze. Durch unsere Arbeit mit renommierten und international tätigen Unternehmen, bieten wir Ihnen spannende Projekte, kreativen Freiraum und vielver­sprechende Perspektiven für Ihre berufliche Karriere.

Bitte senden Sie Ihre Bewerbung inklusive Lebens­lauf, frühestem Eintrittstermin und Gehaltsvorstel­lungen an:

jobs@braintags.de

Braintags GmbH Jakob-Kaiser-Straße 12 47877 Willich

Christoph Trautmann Recruitment & Human Resources

Tel:+49 (0)2154 4704 100 Fax: +49 (0)2154 4704 111 E-Mail: jobs@braintags.de Web: www.braintags.de

Job-ID a u fwww.der-webdesigner.net: j59

04/2013 webdesigner 1 07

S te lle n a n z e ig e n a u s d e r W e lt d e s W e b d e s ig n s

braintaase - b u s i n e s s t e c h n o l o g y

Head of Development / Entwicklungsleiter/inÜber BraintagsWir sind eine schnell wachsende E-Business Agentur mit über 10 Jahren Erfahrung in der Erstellung von Online-Shops, Websites und komplexen Cloud-Applikationen (CRM, Kam- pagnen-Management, Newsletter-Management, etc.). Durch unseren patentierten Java Application Server und unser ei­genes Rechenzentrum sind wir in der Lage, alle Kundenwün­sche selbständig umzusetzen und entsprechende Lösungen über die eigene Software-Plattform zu entwickeln.Neben den technologischen Leistungen stehen wir unse­ren Kunden als auch E-Business-Consultants zur Verfügung, bieten Web- & Marktanalysen an, entwickeln umfangreiche Vermarktungs-Strategien und leiten unsere Kunden durch alle Online-Marketing-Kanäle.

Ihr JobSie leiten ein Projektteam aus den Abteilungen Grafik, Fron­tend- und Backend-Entwicklung und setzen eigenständig Web- & Softwareprojekte um. Sie berichten direkt an die Geschäftsleitung, stehen in engem Kontakt mit dem Kun­den, steuern die internen Ressourcen und planen Budgets, Timings, etc.. Zu Ihren Aufgaben gehören außerdem:

• Mindestens 3 Jahre Berufserfahrung in der Leitung von Soft­ware- und Webprojekten

• Kenntnisse der gängigen Frontend-Technologien wie (X) HTML/DHTML, XML/XSL,CSS, JavaScript...

• Strukturierte, selbständige und zielgerichtete Arbeitsweise, Eigeninitiative

• Gute Kenntnisse in Microsoft Office• Service- und Qualitätsbewusstsein sowie Kommunikations­kompetenz

• Sehr gute Kenntnisse in Deutsch und Englisch in Wort und Schrift

Ihre ChancenSie arbeiten innerhalb eines dynamischen Teams im Umfeld einer aufstrebenden Online-Agentur. Durch unsere langjähri­ge Erfahrung können Sie auf bestehende Strukturen zurück­greifen und sind dennoch flexibel in der Implementierung neuer Lösungsansätze. Durch unsere Arbeit mit renommier­ten und international tätigen Unternehmen, bieten wir Ihnen spannende Projekte, kreativen Freiraum und vielversprechen­de Perspektiven für Ihre berufliche Karriere.

• Analyse, Konzeption und Projektierung von webbasierten Softwarelösungen• Führung des Projektteams, Steuerung und Motivation der Mitarbeiter• Reporting intern und extern• Erster Ansprechpartner für den Kunden

Ihre QualifikationenUm effektiv und kundenorientiert arbeiten zu können, ist uns Ihre Persönlichkeit mindestens genauso wichtig, wie ob­jektive Anforderungen. Sie sollten daher ein hohes Maß an Teamfähigkeit mitbringen, durch Ihre Arbeit begeistern und sich vor allem selbständig neue Themengebiete erarbeiten können.

• Erfolgreich abgeschlossenes Studium (z.B. BWL, Kommuni­kationswissenschaften, Informatik) oder eine vergleichbare Ausbildung

Bitte senden Sie Ihre Bewerbung inklusive Lebenslauf, frühe­stem Eintrittstermin und Gehaltsvorstellungen an:

jobs@braintags.de

Braintags GmbH Jakob-Kaiser-Straße 12 47877 Willich

Christoph Trautmann Recruitment & Human Resources

Tel:+49 (0)2154 4704 0 Fax: +49 (0)2154 4704 111 E-Mail: jobs@braintags.de Web: www.braintags.de

Job-ID auf www.der-webdesigner.net: j60

1 0 8 webdesigner 04/2013

JOB BOERSEStellenanzeigen aus der Welt des Webdesigns

braintagse - b u s i n e s s t e c h n o l o g y

Web-Entwickler/in, Webdesigner/inÜber BraintagsWir sind eine schnell wachsende E-Business Agentur mit über 10 Jahren Erfahrung in der Erstellung von Online- Shops, Websites und komplexen Cloud-Applikationen (CRM, Kampagnen-Management, Newsletter-Manage­ment, etc.). Durch unseren patentierten Java Application Server und unser eigenes Rechenzentrum sind wir in der Lage, alle Kundenwünsche selbständig umzusetzen und entsprechende Lösungen über die eigene Software-Platt­form zu entwickeln. Neben den technologischen Leistun­gen stehen wir unseren Kunden als auch E-Business-Con- sultants zur Verfügung, bieten Web- & Marktanalysen an, entwickeln umfangreiche Vermarktungs-Strategien und leiten unsere Kunden durch alle Online-Marketing-Kanäle.

Ihr JobAls Web-, bzw. Frontend-Entwickler/in arbeiten Sie inner­halb unserer Frontent-Abteilung an Websites & Web-Appli- kationen. Je nach persönlichem Schwerpunkt arbeiten Sie dabei eng mit unserer Java-Abteilung an der eigentlichen Anwendung, oder setzen zusammen mit unserer Grafik- Abteilung Screendesigns um.

• Konzeption & Dokumentation von programmatischen An­forderungen

• Entwicklung von kundenspezifischen Lösungen• Umsetzung von Websites in FITML, CSS, JQuery, JavaScript, etc.

• Direkter Kundenkontakt und Arbeit innerhalb eines Pro­jektteams

Ihre QualifikationenUm effektiv und kundenorientiert arbeiten zu können, ist uns Ihre Persönlichkeit mindestens genauso wichtig, wie objektive Anforderungen. Sie sollten daher ein hohes Maß an Teamfähigkeit mitbringen, durch Ihre Arbeit begeistern und sich vor allem selbständig neue Themengebiete erar­beiten können.

• Abgeschlossene Ausbildung zum „Anwendungsentwick­ler" oder vergleichbare Qualifikation

• Sehr gute Kenntnisse in aktuellen Webtechnologien wie (X)HTML/DHTML, XML/XSL,CSS, JavaScript

• Flohe Affinität zu digitalen Trends, Web-Technologien, Usability, usw.

• Mindestens 3 Jahre Erfahrung im Bereich Software- und/oder Webentwicklung

• Ausgeprägtes Qualitätsbewusstsein•Optional: Erfahrung in der Entwicklung nativer Apps und HTML5

• Optional: Erste Führungserfahrungen• Optional: Online-Marketing Know-How (SEO,Tracking, etc.)

Ihre ChancenSie arbeiten innerhalb eines dynamischenTeams im Umfeld einer aufstrebenden Online-Agentur. Durch unsere lang­jährige Erfahrung können Sie auf bestehende Strukturen zurückgreifen und sind dennoch flexibel in der Implemen­tierung neuer Lösungsansätze. Durch unsere Arbeit mit re­nommierten und international tätigen Unternehmen, bie­ten wir Ihnen spannende Projekte, kreativen Freiraum und vielversprechende Perspektiven für Ihre berufliche Karriere.

Bitte senden Sie Ihre Bewerbung inklusive Lebenslauf, frü­hestem Eintrittstermin und Gehaltsvorstellungen an:

jobs@braintags.de

Braintags GmbH Jakob-Kaiser-Straße 12 47877 Willich

Christoph Trautmann Recruitment & Human Resources

Tel:+49 (0)2154 4704 0 Fax: +49 (0)2154 4704 111 E-Mail: jobs@braintags.de Web: www.braintags.de

Job-ID auf www.der-webdesigner.net: j61

04/2013 webdesigner 109

JOB BOERSEStellenanzeigen aus der Welt des Webdesigns

INTERNETONEA K T I E N G E S E L L S C H A F T

Senior/Lead Developer (m/w)Agile Entwicklung, neue Projekte und 1-Wochen Sprints schrecken dich nicht ab, sondern lassen dich aufhorchen? Du entwickelst „schon immer" und hast bereits erste Erfahrung damit, dein Wissen an Ju­nioren weiterzugeben? Dann solltest du zu uns ins Herz von Köln kommen und mit uns durchstarten nach ganz Oben, denn

wir suchen derzeit einenSenior/Lead Developer (m/w)

Was machst du?• Neu- und Weiterentwicklung neuer und bestehen­

der Projekte• Backend Entwicklung in C#/MS SQL 2008• Frontend Entwicklung in HTML/CSS/JavaScript• fachliche Führung unseres internationalen Ent­

wicklungsteams

Was bringst du mit?• mind. 3-5 Jahre Berufserfahrung mit umfangrei­

chen Entwicklungsprojekten• sicherer Umgang mit dem .NET Framework, C# Vi­

sual Studio sowie HTML/CSS/JavaScript• versierter Umgang mit dem SQL Server 2008• Architektur-Kenntnisse• SCRUM Erfahrung• erste Führungserfahrung• Lust und Spaß daran, dich „richtig rein zu knien"

Warum wir? Weil wir....• immer höher hinaus wollen und Stillstand ver­

meiden!• dir viel Eigenverantwortung bieten und die Mög­

lichkeit, dich und deine Ideen einzubringen!• unsere Büros in einer top Lage im Herzen von

Köln haben!• dir kostenlose Getränke und somit u.a. Koffein

bieten!• einfach die Besten sind!:-)

Das klingt nach deiner neuen Stelle? Dann sen­de bitte deine vollständigen und aussagekräfti­gen Bewerbungsunterlagen unter der Kennung DWEB-SLD an

career@internetone.de

Wir freuen uns auf dich!

Weitere Infos findest du auf www.internetone.de

INTERNETONE AG KölnTurm / Im Mediapark 8 50670 Köln

Job-ID aufwww.der-webdesigner.net: j 103

1 0 webdesigner 04/2013

JOB BOERSEStellenanzeigen aus der Welt des Webdesigns

OnPage. orgWebentwickler (w/m)Du bist „durch und durch" Webentwickler? Suchst hier nach einer neuen Herausforde­rung, in der du dein bisheriges Know-how einbringen und erweitern kannst? Dann komm zu uns ins Herz von Kölle und starte mit uns durch nach ganz Oben denn,

wir suchen derzeit einenWebentwickler (w/m)

Was machst du?• Umsetzung anspruchsvoller Templates für komplexe Webseiten und mobile Endgeräte anhand von Design-Vorlagen und Konzepten• Gestaltung und Entwicklung modernster Web-Portale und interaktiver Web-Frontends• dabei hast du stets im Blick, dass dieTempla- tes im Backendsystem integriert werden müs­sen. Hierfür hältst du ständig Kontakt mit den entsprechenden Entwicklern.

Was bringst du mit?• mind. 2 Jahre Erfahrung in der Webentwick­lung• sehr gute Kenntnisse in HTML, CSS, Java­Script und Ajax• Begeisterung und Gespür für hochwertige und stilvolle Webauftritte• analytisches Denken, hohes Einschätzungs­vermögen und konzeptionelle Stärke• sehr gute Englischkenntnisse und idealer­weise Deutschkenntnisse• Lust und Spaß daran, dich„richtig rein zu kni­en"

Warum wir? Weil wir....• immer höher hinaus wollen und Stillstand vermeiden!• dir viel Eigenverantwortung bieten und die Möglichkeit, dich und deine Ideen einzubrin­gen!

• unsere Büros in einer top Lage im Herzen von Köln haben!• dir kostenlose Getränke und somit u.a. Koffe­in bieten!• einfach die Besten sind!:-)

Das klingt nach deiner neuen Stelle? Dann sende bitte deine vollständigen und aussa­gekräftigen Bewerbungsunterlagen unter der Kennung DWEB-WE an

career@internetone.de

Wir freuen uns auf dich!

Weitere Infos findest du auf www.inter- netone.de

INTERNETONE AG KölnTurm / Im Mediapark 8 50670 Köln

Job-ID aufwww.der-webdesigner.net: j 102

04/2013 webdesigner

r

DownloadZusatzm aterial bequem herunterladenDie benötigten Materialien für die Workshops können Sie ganz bequem von unserer Webseite herunterladen. Mit dem exklusiven Leser-Passwort haben Sie die Dateien immer und überall zur Hand.

Download-Anleitung für die WebdiskL

P a s s w o r t

f676g

I t

Wenn Sie unseren Download-Bereich das nächste Mal besuchen, müssen Sie das Passwort nicht erneut eingeben, sondern können die Dateien direkt herunterladen. Wir wünschen viel Spaß beim Nachbauen der Workshops! Bitte beachten Sie dabei die eventuellen Nutzungseinschränkungen der einzelnen Dateien.

Hinweis:Die Download-Daten zu unseren Magazinen stehen unbefristet auf unserer Webseite zur Verfügung.

0 1

0 2

Geben Sie in der Adresszeile Ihres Internetbrowsers www.sonic- m edia-download.de ein. Falls Sie noch nicht auf unserer Webseite registriert sind, klicken Sie bitte auf .Registrieren' und folgen Sie dann den Registrierungsanweisungen. Für die Registrierung benötigen Sie eine gültige E-Mail-Adresse. Falls Sie bereits registriert sind, melden Sie sich wie gewohnt an.

Klicken Sie dort auf den Button,Leser-Passwörter', der sich auf der Leiste des .Anmelden'-Buttons befindet.

-1U .Webdisk

œ s ç p e r a u d io

»«■« +M * m— m . H J

W ftfrd lU

e n t« w »ftf -i m t i i f Mir M m i m

05 Auf der folgenden Seite ist das entsprechende Heft noch einmal aufgeführt. Per Klick auf den Heftnamen gelangen Sie zu der Seite mit der Download-Option.

1)Om«Om

06 Auf dieser Seite finden Sie das Heftcover und einige weitere Informationen zum Heft. Ganz unten finden Sie die Pakete, die die Downloads enthalten.

co<* Cäi ö** MftdHigr«

O GftM t i *0 >« »H C#

03 Daraufhin werden Sie zur Passwörter-Seite weitergeleitet, wo Sie dann in dem Feld,Leser-Passwort' das nebenstehende Passwort eingeben. Klicken Sie nun auf den Button ,Absenden'.

les«fpa$swort aktiveren

04 In dem grünen Feld erscheint die Meldung, dass das Heft aktiviert wurde. Sie finden es in der Liste unter,Aktivierte Magazine'. Klicken Sie nun auf den Heftnamen.

r * 1 «V2IP.T

==J

Passw ort e*

AJcrvierle Maqazire

i-lcU-» Ci« »<n «vi alle dtmrt :• MUn

der M;b3c3>y«-|C4r? :i :?i der •Wc*>.Jei-*r«r|CyST?r

07 Stehen mehrere Pakete als Download bereit, müssen diese nacheinander heruntergeladen werden. Wählen Sie ein Paket aus und klicken Sie auf den Button .Datei herunterladen'. Nach Bestätigen des Dialogs startet der Download. Das Paket wird in den Download-Ordner kopiert.

itM*

A -äv.

• >*>■«

08 Kopieren Sie das ZIP-Paket in Ihren Arbeitsordner und entpacken Sie es mit einem ZIP-Archivierungsprogramm. Sollten Sie ein solches Programm nicht zur Hand haben, finden Sie auf unserer Webseite links neben dem Download einen Link, um sich das beliebte, kostenfreie ZIP-Archivierungsprogramm 7zip herunterladen zu können.

Lizenzierung Von unserer Webseite (www.sonic-media-download.de) herunter- gela­dene Shareware-Programme erfordern für die kontinuierliche Nutzung eine Registrierung beim Hersteller oder müssen von diesem erworben werden. Freeware kann jederzeit kostenfrei genutzt werden. Die Nut­zung von Software-Testversionen ist entweder zeitlich begrenzt, oder es wurden einige Funktionen deaktiviert.

I 1 2 w ebdesigner 03/2013

H o c h s c h u le d e r p o p u lä r e n K ü n s te professionell

persönlichpraxisorientiert

BeW e<3 teractio»\l\|ebs' eS APPS Si90er'

Nächster Studienstart am 1. April. Besuchen Sie unseren nächsten Infotag am 23. März in Berlin!

Hier und jetzt informieren: www.hdpk.de

VORSCHAU

CSS3 Transition, Animation, Transform und 3D-TransformRuckelnde, unschöne Animationen sollen mit CSS3 der Vergangenheit angehören. Animierte Deckkraft, Farben und Größen werden jetzt vom CSS selbst übernommen, ganz ohne eine Zeile JavaScript-Code schreiben zu müs­sen. Das ist wesentlich performanter, aber entlastet natür­lich auch den JavaScript-Prozess.

&3CKUP

BWCßBtoQ

State

rCOFFEE

ii k&mqs

w

mmjiakuiÄff* l l i r U l Áo f m a n t t i

9AM

Í1'LJion

9

Pulse Pro <1

_.== Pulse

aacKup**0*

u

Viele Webworker kennen diese Situation: Der Kunde hat sich bei Vergabe des Auf­trags für eine Image-Website entschieden, die im Grunde nur eine digitale Visiten­

karte mit zwei bis drei Seiten Content und einer Kontaktmöglichkeit darstellt. Für solche Anforderungen ein vollwertiges Content-Management-System mit Anbin­dung an eine Datenbank einzusetzen, wäre wie das sprichwörtliche mit Kanonen auf Spatzen schießen. Eine HTML-Version mit einem Kontaktformular würde den Bedarf vollkommen decken, doch leider fehlt dann dem Kunden eine Benutzer­

schnittstelle, um die Seite gelegentlich zu pflegen. PulsePro stellt hier eine interes­sante Lösung dar, mit der auch sehr kleine Seiten bequem editiert werden können.

Webtypografie und Technik

T H c

„Schriftarten können verspielt oder seriös wir­ken; Farben können die Inhalte betonen. Da­mit der gute Eindruck auf der Website durch­gängig bewahrt wird, sollten Sie optimal für das Web geeignete Schriftarten und Farben wählen. Klingt das zu einfach? Ist es aber nicht." Dieses Zitat von Usability-Pabst Ja­kob Nielsen ist bereits einige Jahre alt, hat aber an seiner Gültigkeit nichts eingebüßt - im Gegen­teil, für eine gelungene Webtypografie ist es aktueller dennje. Webdesigner Oliver Berghold zeigt Ihnen verschiedene Tricks und Techniken für das Einbinden von Typografie in Websites.

Heft 05/2013 ab Mittwoch24.04.2013im Handel erhältlich.

Aus aktuellem Anlass können sich die Themen kurzfristig ändern.

114 webdesigner 04/2013

STRATO

„Kein Hosting-Paket ist günstiger als bei STRATO.Außer bei STRATO!"

1m.Ilias

X , \

) • ' '

1

Vergleichen lohnt sich!HOSTING 1&1

Dual BasicSTRATOPowerWeb Basic

Standardpreis 6,99 €/Mon. 4,99 €/Mon.

Einrichtungsgebühr 9,60 € 8,60 €

Inklusivdomains 4 4

Postfachspeicher 2GB 5GB

Webspace 10GB 10GB

mpro

Stand 6. März 2013. MindestVertragslaufzeit STRATO 12 Monate, 1&1:6 Monate. Preise inkl. MwSt.

Sie sparen bis zu 25 € im Jahr!

M arcus Weltchrom.tv k o n k u r r e n z i o s G Ü H S T Iö !

» strato.de/hosting* Aktion bis 30.04.2013: PowerWeb Basic 6 Monate für 0 €/Mon., anschließend 4,99 €/Mon.

Einmalige Einrichtungsgebühr 8,60 €. MindestVertragslaufzeit 12 Monate. Preise inkl. MwSt.Servicetelefon: 030 - 300146 - 21

PERFORMANCE-GARANTIENeu! Root Server 2.0

Jetzt noch besser!

► bis zu 128 GB RAM► bis zu 32 CPU-Cores► bis zu i|. x 3.000 GB

Festplatten

„ Mit Root Server 2.0 bieten wir Ihnen ein Optimum an Performance und Flexibilität. Dazu profitieren Sie von einem Bedienungskomfort, den Ihnen sonst nur ein virtueller Server bieten kann."

Patrick SchodenHead of Sales Cloud Hosting

Root Server 2.0ab €49 mtl.

€0 Setupgebühr*Aktion bis 30 .0^.2013

Optimale Leistung und Flexibilität für Ihre Hochleistungsanwendungen.

Mehr Power

Eigenes Hardware RAID

Für beste I/O-Raten und Datensicherheit.

oMehr Komfort

Snapshot inklusive

Sichern Sie jederzeit einen Versionsstand Ihres Servers.

□iSO

Mehr Flexibilität

Eigene ISO-lmages

Installieren Sie eigene Betriebssysteme.

Jetzt online bestellen unter: www.hosteurope.de/Server/

HOSTEUROPE

www.hosteurope.de

♦Die A ktio n € 0 S e t u p g e b ü h r g ilt a u s s c h l ie ß l ic h f ü r die N e u b e s t e l lu n g ein e s Root Servers bis zu m 30.0^.2013. Einfach G u tsc h e in c o d e O1203LW bei der B estellung a n g e b e n . Der Betrag w ird Ih n e n

g u t g e s c h r ie b e n . Sonst zzgl. e in m a l ig e r S e t u p g e b ü h r v o n € 9 9 . Keine M indestVertragslaufzeit. Die K ünd ig un gsfrist für Root Server beträgt i* W o ch en zum M o n atsen d e.Alle a n g e g e b e n e n Preise in k lu s iv e MwSt.

Voche