Webdesigner - April.2013 P2P

Know-how & Tutorials fr Profis
WordPress
jQuery EHTM L5 3 CSS
5Si
i t
/
C c /t
*Co 4 l/( '4 o
in
SEO fr WordPress
Immer noch ein unterschtztes Thema
CSS 3 Tutorial
Objekte ohne Flash & JavaScript animieren
HTML Newsletter
Wir zeigen Ihnen wies funktioniert
Europas Nr. 1 kreative Ressource 21 Mio. lizenzfreie Fotos, Videos und Vektoren ab 0,75. Tel. +49 (0)30 208 96 208 |www.fotolia.de
EDITORIAL
Lt
ggstcrrr
Dipl.-Ing. Hans-Gnther Beer (V.i.S.d.P) hgbeer@sonic-media.de Jrgen Ortmann jortmann@sonic-media.de Tobias Henke thenke@sonic-media.de
Willkommen !
O
nline Shops stellen als Webseiten eine Besonderheit dar, da fr den Betreiber von der Funktionalitt dieser _ _ Shopsysteme riesig und die Entscheidung fr eines dieser Syste me und gegen seine Konkurrenzprodukte erfordert eine intensive Recherche, da zum einen die Kosten fr das Shopsystem und den Support sich stark voneinander unterscheiden. Zum anderen muss unbedingt sichergestellt werden, dass das System Zukunfts fhigkeit ist und gengend Mglichkeiten fr einen Ausbau bie tet. Aus diesem Grund haben wir uns eine Auswahl von insgesamt 18 Shopsystemen in Bezug auf den Funktionsumfang nher ange schaut und die Ergebnisse in einem groen Ratgeber zusammen getragen. Zur besseren Vergleichbarkeit wurden die wichtigsten Kriterien in einer Tabelle zusammen gefhrt.
webdesigner erscheint zehnmal jhrlich bei Sonic Media - ein Geschftsbereich der music support group GmbH Hauptstrae 31,53604 Bad Honnef Tel.: 02224 98826 0, Fax -79 Mail: info@webdesigner-magazin.de www.webdesigner-magazin.de Herausgeber und Chefredakteur Redaktion
Fraqen an die Redaktion
redaktion@webdesigner-magazin.de
Seiten enorm viel abhngt. Inzwischen ist derAutoren Markt fr dieser

Ausgabe Grafik & Layout
Oliver Berghold, Daniel Flter, Tobias Henke, Andreas HitzigJ rg en Ortmann Ronald M. Stirner rstirner@sonic-media.de
Lektorat Gesamtanzeigenleitung
Dagmar Schellhas-Pelzer Daniyal Rahman Tel.: 02224 9882635 Fax: 02224 9882679 drahman@sonic-media.de
Key Account Manager
Brigitta Reinhart,Telemarketing Lehmkuhl Tel.: 089 464729, Fax: 089 463815 breinhart@der-bildbearbeiter.de Karl Reinhart, RMSGmbH
Daneben findet auch das Thema WordPress natrlich in dieser Ausgabe statt. Wer ein WordPress-Theme nach eigenen Vorstellungen umbaut, wird sich sptestens beim Installieren des ersten Updates fr das zugrundeliegende Theme wundern, wenn nmlich die vorgenommenen nderungen dabei ein fach berschrieben werden. Eine Lsung fr 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 auerdem, wie Sie mit CSS3Animationen umgehen, was sie bei HTML-Newslettern beachten sollten oder welche vielversprechen den Mglichkeiten Web Storage und Super-Cookies fr Websites bieten.
Bezugsmglich keiten Preise Vertrieb Druck
Tel.: 089 464729, Fax: 089 463815 kreinhart@der-bildbearbeiter.de Senefelder Misset, Mercuriusstraat 35, 7006 RK Doetinchem Niederlande IPS Pressevertrieb GmbH Meckenheim Zeitschriftenhandel, Fachhandel, Abonnement Einzelbezug 12,95 Jahresabonnement Inland 109 fr 10 Ausgaben inkl. MwSt und Porto (Ausland: 126 Euro inkl. Porto)
Viel Spa mit der vorliegenden Ausgabe!
Jrgen Ortm ann,, Redaktion Webdesigner

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 Geschftsfhrer: Rdiger J.Veith, Dr. DirkJohannsen Hauptsitz: Brcker Str. 10,82223 Eichenau Amtsgericht Mnchen: H R B 196730 USt-ldNr.: DE281259857
web
Bankverbindung
Commerzbank Mnchen Kto. 150 757 300 BLZ: 70040041 IBAN: DE92 70040041 0150 7573 00 BIC: COBADEFFXXX
Fr alle Beitrge, Messdaten, Diagramme und Abbildungen bei Sonic Media - Ein Geschftsbereich der music support group GmbH. Die Zeitschrift und alle in ihr enthaltenen Beitrge sind urheberrechtlich geschtzt. Mit Ausnahme der gesetz lich zulssigen Flle ist eine Verwertung ohne vorherige schriftliche Einwilligung des Verlages verboten. bersetzungen, Nachdruck oder Vervielfltigung und Spei cherung sind - mit Ausnahme zum privaten Gebrauch - nur mit ausdrcklicher Einwilligung des Verlages zulssig. Eine Haftung fr die Richtigkeit der Verffentli chungen kann trotz sorgfltiger Prfung durch die Redaktion weder vom Heraus geber noch vom Verlag bernommen werden. Fr unverlangte Einsendungen wird keine Haftung/Gewhr bernommen. Fr namentlich gekennzeichnete Bei trge bernimmt die Redaktion nur die presserechtliche Verantwortung. Pro duktbezeichnungen und Logos sind zu Gunsten der jeweiligen Hersteller als Wa renzeichen und/oder eingetragene Warenzeichen geschtzt. www.webdesigner-magazin.de
Webdesigner 04/2012
Inhalt
C ache ist noch le er : m an ifest M a n ife s t-D a te i: B eschreibt den A nw end ungscach e W e b s e ite a m e ig e n u n d in d e n A nw end ungscach e laden A nw endungvcache : C ached d ie in d e f M a n ife s t-D a te i s teh en d en D a te ie n
IMPRESSUM
KOLUMNE
Ist das noch innovativ oder kann das weg? 6
*
oder C ache ist angelegt :
O)
M a n ife s t D atei n d ern : D a te ie n a u fn e tu n e n D a te ie n lschen
V ersion a ktu a lisie re n
A nw endungscache aktualisieren
NEWS & BUCHREZENSIONEN

News und Buchvorstellungen
Neuigkeiten rund ums W eb
W eb server C lie n t/B ro w s e r
Buchrezension
"Photoshop CS6" von Markus Wger
104
Web-Anwendungen offline nutzbar machen

Dank sogenannter Super-Cookies knnen auch kom plexe Web-Anwendungen verfgbar gemacht werden, wenn die Internetverbindung unterbrochen wird.
>
JO B BOERSE
Stellenangebote fr Webworker 106
>
WEB-GALERIE
Interessante Single Pages
Aufwndig gestaltete Einseiter
48
KONZEPriONitRuMG L j
w u r- f
Online Shops
W eb Designs fr Online Vertriebsplattformen
100
Umsetzung
RATGEBER
Web-Anwendungen offline nutzbar machen 14
W eb Storage, Application Cache und IndexedDB
Shopsysteme im Vergleich
18 Systeme und ihre Strken und Schwchen
24
T e s t i n g un K o rrek tur
Workflow fr Web Designer

Mehr Effektivitt durch geregelte Ablufe
34 72
SEOfr WordPress
Die wichtigsten Techniken fr besseres Page Ranking
Child Themes in WordPress

Was W eb Designer SEO-technisch beachten sollten
88

Mit den richtigen Arbeitsablufen knnen auch grere Projekte bewltigt werden und es lsst sich effizienter arbeiten.
der webdesigner 04/2013
somc-meaia.
JiW :
88
Child Themes in WordPress
Damit individuelle Anpassungen bei einem WP-Theme nicht mit dem nchsten Update des Themes berschrieben werden, sind Child Themes die optimale Lsung.
der-webdesigner.
TUTORIALS
Profi-Techniken
Schritt fr Schritt erklrt
Best Practice fr flexible Websites
Stylesheets von vornherein RD-tauglich gestalten
40
Grafiken mit SVG & HTML5 erzeugen

Grafiken direkt im Code anlegen
........ 44
Design fr eine App-Downloadseite, Teil 1

Aufwndige Hintergrnde als Bhne fr den Content
........ 54
IM
I.
Videos fr WordPress
Filme richtig in WordPress-Seiten einbinden
60
Ar U lfU V
Social Media-Buttons ansprechend gestalten

30 R M f f PKT>
66
Web-2.0-Schaltflchen mit Photoshop
ES IST UNSER 1. GEBURTSTAG!

UM DAS ZU FEIERN. GIBT SS DAS HIER:
JEDEN ZWEITEN ARTIKEL!

RAIATT INCCT AM MTTIWOCH. M H 27. PISRUAft
20% RABATT AW
twWM''iAI'WMl M W W *0
M*M MC o u scan e n w w mm .
Als Objekte laufen lernten

CSS3-Animationen einsetzen
76
HTML-Newsletter gestalten
Web- und Email-Clients richtig ansprechen
........ 82
82
*V t iJ V * < * > ~ n *>t j * >jt.j
HTML-Newsletter gestalten
Mail-Clients knnen HTML-Seiten nicht immer einwandfrei darstellen. Mit einigen Kniffen lsst sich HTML trotzdem sehr gut fr die Gestaltung von Newslettern nutzen.
I I * MM.
Auf zu den Sternen

Mit Illustrator Banner im Retro-Look gestalten
92
Inserentenverzeichnis Download-Anleitung
105 112 114
123 fr 4 **
I-
Vorschau
wi
J*
> .T .
SA\
IJt
p ~
II 4 1
*\H ln ^ j -J o r.i JiA *

I?
4 ^ 2
4 % ;
Jl*
92
Auf zu den Sternen

Mit Illustrator lassen sich trendige Retro-Grafiken und -Banner gestalten. Grundlage dafr ist die Arbeit mit Bezierkurven.
Das bentigte Material fr die Workshops knnen Sie bequem von unserer Webseite herunterladen. Mit dem exklusiven Leserpasswort haben Sie die Dateien immer und berall zur Hand.
04/2013 der webdesigner
KOLUMNE
WILLY WEB MASTER

Ist das innovativ oder kann das weg?
Manchmal schreibt das digitale Zeitalter wirklich seltsame Geschichten. Man fragt sich, ob die vermeintliche Innovationskraft, die fr Dinge wie Google Glass aufgewendet wird, nicht sinnvoller genutzt werden knnte. Wer will schlielich schon mit einer Brille telefonieren? Auch wenn man bei Googles Datenbrille vielleicht noch geteilter Meinung sein kann, ist sptestens der Nutzen von sprechenden Schuhen, wie Google sie krzlich in Texas vorgestellt hat, kaum noch nachvollziehbar. DieGoogle-Schuhe sollen unter anderem mit Hilfe mehrerer Sensoren Bewegungen messen knnen. Ob es wirklich einen Nutzen hat, wenn sich pltzlich die Schu he mit Sprchen wieDas 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 tatschlich 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? Auffllig 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 Gerten auszursten. 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 wre, dass die Google-Brille Daten ber die Umgebung ihres Trgers bermittelt, ohne dass es ihm unbedingt bewusst ist. Eine Armbanduhr lsst man nicht mal eben liegen wie ein Smartphone oderTablet, sondern trgt sie am Handgelenk berall mit hin. Gleiches gilt fr 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 auer mit einem neuen Design auch mit jeder Menge neuer Technik ausgestattet, deren Nutzen fr den Anwender nicht immer ersichtlich ist.
1011101
01101
1110001001
webdesigner 04/2013
Aktuell 2 u iOS 6
JW**
' v
A U tu e U
*p
zu \OS 6
at a
<
c
i c t o n c - N S S e a rc h P A th F 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 t A t I n d e x ! 0 | ; I ( r e s u l t o f c je c t A t In d e x r ( ia d e x P a th M le c te d S ^ iM m tIn d e x )
jo r e t U b lq u lt o u a * N O
1)
<
lt n * tU 9 U s u r l
d e a t in a t lo n U R L : (K5UHL filo U R L M
Apps programmieren fr iPhone und iPad

Das umfassende Handbuch
Grundlagen der A n w e n d u n g s e n tw ic k lu n g mit dem SDK 6 Apps entwickeln, testen, abs.chern und vcroffei.ll.chen Inkl. Xcode. Cloud. Twitter. Debugging, V e rs te u e ru n g , zahlreicher P ra x isb e isp ie le
App-Entwicklung mit iOS 6

1012 Seiten, mit DVD, 39,90 ISBN 978-3-8362-1915-0
LEH R -
P ro g ra / T iin
g e m a ft
*1 4
S S AlleRm*'*V .d T o o K ^ r e o -U k 1.onen
Ju S c h G
Galileo C om 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 fr iPhone und iPad ent wickeln, testen, absichern und im App Store verffentlichen. Inkl. Xcode, Debugging, Versionierung, zahlreichen Praxisbeispielen und Sicherheit. Darber hinaus bieten wir Ihnen Bcher zu Android, WebApps und Windows Store Apps. Viel Spa beim Stbern!
Unsergesamtes Programm
www.GalileoComputing.de
facebook.com/GalileoPressVerlag twitter.com/Galileo_Press
Galileo Computing
Wissen, wie's geht.
R+ gplus.to/GalileoPress
NEWS_________________
Neuigkeiten aus der Welt des Webdesigns
NEWS
...... - 5.** *VW |
M im H * 1
Onpage mit Xovi - Erfolg dank WDF*IDF

Auch 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 alsZauberformel", bezeugen den hohen Stellenwert der Onpage-Optimierung. Auch die Xovi GmbH, Vertreiber der gleichnamigen SEO Controlling und Online Marketing Suite, sieht die Zeit fr mehr Onpage-Optimierung gekommen und er
r~ T
n
t
weitert das hauseigene Onpage-Tool. Die Grundlegenden Aufbereitung sind dabei gleich geblieben: Weiterhin erfhrt 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 zielfhrend zu gestalten.
MH
O U
Mit Karl Kratz' berhmter Formel WDF*IDF" arbeitend, knnen Nutzer damit nicht nur einsehen, welche Mitbewerber besser optimierte Seiten fr 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. Jubilum

Der Dresdner Business Hoster internet24 GmbH startete zum Jahreswechsel bereits in das 16. Jahr der Geschftsttigkeit. Zu diesem besonderen Anlass hat der Hoster exklusiv fr die Leser des Webdesigners eine ganz spe zielle Aktion: Neukunden, die sich bis zum 30.04.2013 fr einen dedizierten Server von internet24 entscheiden, erhalten auf die er sten drei Monatsgebhren 50 Prozent Erlass. Bei der Bestellung muss einfach nur das Co dewort 15i24 angegeben werden. Bei den dedizierten Servern knnen Neukun den zwischen einem Managed oder einem Root Server whlen, 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. Fr Web- und Werbeagenturen, die ihren Kunden auch Webhosting-Leistungen anbieten mchten, hat internet24 spezielle Agenturserver-Tarife und Reseller-Angebote im Portfolio. Das Ser vermanagement erfolgt dabei ber internet24, so dass die Agentur sich auf ihr eigent liches Kerngeschft konzentrieren kann. Im Rahmen einer Zu sammenarbeit mit internet24 knnen Agenturen leistungen eigenem verkauft wh unter Namen werden len, ob die Dienst sonderen Wert auf eine persnliche Betreu ung. Deshalb beginnt der Support nicht in einem Callcenter, sondern bei einem direkten Ansprechpartner. Das zertifizierte TechnikTeam ist rund um die Uhr, auch an Feiertagen, per Telefon und E-Mail erreichbar.
sollen, oder ob die Agenturen als Ver mittler mchten. auftreten Beim
K u n d e n k o n ta k t legt internet24 be-
webdesigner 04/2013
NEWS
Adobe Creative Cloud fr Teams Roadshow

Besuchen Sie die Adobe Creative Cloud fr Teams Roadshow in einer Stadt in Ihrer Nhe und erfahren Sie von renommierten Adobe Experten, welche Vorteile Ihnen der Einsatz der Creative Cloud fr Teams in Ih rem Unternehmen bietet. Die Veranstaltung richtet sich an Unternehmen, die innovative Ideen fr Design, Web und Video umsetzen und mehrere Kreativarbeitspltze haben. Die Adobe Creative Cloud fr Teams bietet das ultimative Kreativ-Toolset fr die Krea tivabteilung von Unternehmen, speziell auf Teamarbeit abgestimmte Features und ein einfaches Lizenz-Management. DieTermine der Roadshow in der bersicht:
-Sv w .
' *
V
T
/ ;
O *
t p
09.04. Hamburg 11.04. Stuttgart 12.04. Mnchen 18.04. Wien 19.04. Kln 23.04. Berlin
Mit der Creative Cloud fr Teams knnen die kreativen Mitarbeiter in Ihrer Firma oder Arbeitsgruppe smtliche DesktopApplikationen 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 fr Zusammenarbeit innerhalb priva ter Arbeitsgruppen. Hinzu kommen neue Publishing-Lsungen fr innovative Apps und Medieninhalte. Neue Features und Applikationen stehen unmittelbar nach Verffentlichung zum Download bereit. Whrend der Abolaufzeit nutzen Sie immer die neueste Software - Upgradekosten entfallen vollstndig. Fr einen gnstigen Monatsbeitrag mie ten" Sie einen Kreativarbeitsplatz anstatt Lizenzen zu kaufen - zum gnstigen Pro
mopreis von nur 49,- pro Monat zzgl. MwSt. Dieses Modell bietet Ihnen nur CANCOM. Informieren Sie sich jetzt bei Ihrem CANCOM Ansprechpartner! Adobes langjhriger Kooperationspartner bert Sie umfassend ber das neue Adobe VIP Lizenzprogramm. Sie entscheiden, ob Sie die Abo-Kosten fr Ihre Kreativarbeitspltze als Einmalzahlung oder bequem in 12 Monatsraten bezahlen! Bitte wenden Sie sich bei Fragen und be zglich der Finanzierung an unser Creative Cloud Competence Center! Das Arbeiten mit der Creative Cloud fr Teams bietet Agenturen, Verlagen und Kreativabteilungen vllig neue Mglichkei 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 knnen 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 fr mobile Endgerte 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 fr Lizenzmanagement und Teamverwaltung kennen und erfahren Sie, welche Vorteile Ihnen das neue VIP Lizenz programm im Vergleich zur Lizenzierung ber 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 knnen. Und zuletzt prsentieren wir Ihnen in ei nem exklusiven Apple Vortrag, welche Vorteile Ihnen die neuesten Apple Techno logien
04/2013 webdesigner
herkmmliche
Lizenzprogramme
NEWS_________________
Na c h h a l t i g e V e r b e s s e r u n g e n
fr im
Unternehmen Dialog
m it
entstehen
ita r beit ern ,
Ku n d en
und
der
Ge s c h ft s-
fuhrung.
.heidischerm.de
IT-Sicherheit, Qualittsmanagement, Prozessoptimierung und Datenschutz
Sicheres Hosting mit Hostserver.de

Die Hostserver GmbH, ein Spezialanbieter fr Managed Hosting, ist nach dem fhrenden internationalen Si cherheitsstandard ISO 27001:2005 durch den TV SD zertifiziert. Hostserver betreut fr Agenturen und Unter nehmen komplexe Webanwendungen und Server mit hohen Sicherheitsanforderungen. Datenschutz und IT-Sicherheit sind heute die zentralen Anforderungen fr 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 knnen sich unsere Kunden ganz auf Ihre Anwendungen und Webprojekte konzen trieren," erklrt Geschftsfhrer 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 Qualittsmanagement" zertifizierten Anbieter in Deutschland, die individuelles Managed Hosting anbieten. Im Zuge der Zertifizierung hat Hostserver ein struktu riertes Informations-Sicherheits-Management-System (kurz ISMS) eingefhrt, das den Vorgaben des ISOStandards 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 Einfhrung von ISO 9001 Qua littsmanagement" 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 unabhngig besttigt wurde", erklrt Marcus Schfer, Geschftsfhrer der Hostserver GmbH. Informationssicherheitsbeauftragter (ISB) Fred van Ge stel besttigt:Der bewusste Verzicht auf externe Berater und vorgefertigte Lsungen bei der Umsetzung von ISO 27001 hat zu einer besonders tiefen Verankerung des Sicherheitsbewusstseins im Unternehmen gefhrt, das tglich aktiv durch unsere Mitarbeiter gelebt wird." Alle Manahmen des Informations-Sicherheits-Management-Systems der Hostserver GmbH sind doku mentiert und werden bei rechtlichen, technischen oder organisatorischen Vernderungen angepasst. Ein ISMS ist ein kontinuierlicher Prozess, an dem unser Informationssicherheitsteam unter Leitung des ISB permanent arbeitet. Der TV SD prft jhrlich die ISO-konforme Umsetzung im Rahmen eines berwachungsaudits.
10
webdesigner 04/2013
_________________ NEWS
Telekom plantWLAN to go
//
Die Deutsche Telekom will WLAN knftig str 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 jhrlich rund 2 Millionen DSL-Router aus tauscht, soll die Zahl der Hotspots rasch steigen. Kunden, die ihren Festnetzanschluss fr WLAN to go bereitstellen, knnen 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 Festnetzanschlsse auch in anderen Lndern mit WLAN-Hotspots nachrsten. Die Telekom will einen dichten "WLANTeppich" schaffen, der die durch den Smartphone- und Tablet-Boom immer strker in Anspruch genommenen Mo bilfunknetze in den Ballungszentren entla sten und dafr ansonsten brachliegende Ka pazitten der Festnetzanschlsse der eigenen Kunden nutzen.
Suchmaschinenoptimierung. Das umfassende Handbuch

Das 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 Suchmaschinen-Optimierung. Tauchen Sie ein in die Welt des Online-Marketings. Verstndlich werden alle rele vanten Begriffe und Konzepte ausfhrlich erklrt und erlutert. Neben ausfhrlichen Details zur Planung und Erfolgsmessung einer strategischen SuchmaschinenOptimierung reicht das Spektrum von der KeywordRecherche, der wichtigen Onpage-Optimierung Ihrer Website ber erfolgreiche Methoden des Linkbuildings bis hin zu Ranktracking, Monitoring und Controlling. Auch ergnzende Bereiche wie Google AdWords, die Konversionsraten-Optimierung und Google Analytics kommen nicht zu kurz. Die aufgabenorientierte Struktur und die anschau lichen Beispiele ermglichen Ihnen die direkte und schnelle Umsetzung in der Praxis.
Sebastian Erlhofer
JO
Auf einen Blick

Titel: Suchmaschinenoptimierung.
Suchmaschinen-F
m ' O p tim ierun g
Autor: Sebastian Erlhofer Verlag: Galileo Computing ISBN: 978-3-8362-1898-6 Preis: 39,90 Euro, als Onlineausgabe 34,90 Euro
G r u n d la g e n , f u n k t io n w f i% * n u n d R a n k in * - O p tim ir r u g
P la n u n g u n d D u n h f h r u n g f r C o o g l und Co
K o n v * r * io n \ia te n . t e ig e m , G o o g lr d W o ,d s . W e b A n a l y ^
" S . C a lillo C o m p u tin g
04/2013 webdesigner
NEWS
Host Europe Root Server 2.0: Mehr Performance zum gleichen Preis
Host Europe Root Server arbeiten mit der innova tiven Vollvirtualisierung von Parallels Server Bare Metal, die die Vorzge von virtuellen und dedizierten Servern in einer Lsung vereint: Dank dedizierter Hardware liefern sie die Performance eines physikalischen Hochleistungsservers und ermglichen vollen RootHost Europe hat die Leistung seines Root-Servers erhht. Knftig erhalten Neukunden von Root Server 2.0 bis zu 50 Prozent mehr RAM und bis zu 8 zustzliche Prozessorkerne. Zugriff auf alle Hardware-Ressourcen. Gleich zeitig berzeugen Root Server durch einfache und komfortable Installations- und Admini strationsroutinen, die bislang virtuellen Ma schinen Vorbehalten waren. Mit der neuen Produktgeneration Root Ser ver 2.0" erhalten die Kunden bei Host Europe ab sofort eine hochgeschraubte Server-Performance - bei gleichem Preis. Denn Host Eu rope stattet seine Root-Server mit mehr RAM und zustzlichen Prozessorkernen aus. Inter essierte knnen unter sieben Leistungsklas sen die fr ihre Anforderungen ideale Lsung auswhlen. Host Europe Root Server 2.0 kosten zwischen 49 und 399 Euro monatlich und knnen jeder zeit mit einer Frist von 4 Wochen zum Monat sende gekndigt 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 Wirtschaft
Knapp einen Monat Monate vor Veranstaltungsbeginn freut sich Europas einflussreichste Konferenz fr Animation, Effekte, Games und Transmedia ber weitere besttigte ProgrammHighlights: Disney Pixars Regisseur und Drehbuchautor Saschka Unseld prsentiert 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 erffnet. Besonderes Augenmerk liegt im Rahmen der Innovative Places"-Reihe auf den Standorten sterreich, Toronto und der Trkei. Marktfhrer wie Adobe und Autodesk laden die Besucher in Stuttgart zu spannen den Workshops ein, und die erstmalig ins Leben gerufene Fast Forward Education" schlgt die Brcke zwischen inter nationalen Medien-Hochschulen und der digitalen Industrie. Jon Peddie, Pionier der digitalen Medienindustrie und vielzitierter Fachautor zu komplexen Multimediathemen, hlt auf der FMX gleich zwei Vortrge. In seiner Keynote der von Ludwig von Reiche (NVIDIA ARC) kuratierten Cloud Computing"-Reihe geht der Grnder von Jon Peddie Research (JPR) der Frage nach, was die Cloud fr Design, Animation und Visual Effects bedeutet. Dabei konzentriert er sich auf Augmented Reality, Displays und die verschiedenen Endgerte und erklrt, warum der Nutzer bei der Multi-Plattform-Visualisierung trotz attraktiver neuer Mglichkeiten auch Kompromisse eingehen muss. Unter sttzt wird Peddie dabei von JPR-Vizeprsidentin Kathleen Mher, die unter dem MottoManaging and Making Entertainment" an aktuellen Beispielen die Vorteile und Herausforderungen bei der Erstellung von digitalem Content in der Cloud erlutert. In einer zweiten Prsentation im Rahmen der New Technology"-Reihe gibt Peddie einen globalen berblick ber die neuesten technischen Vernderungen vor dem Hintergrund des aktuell stattfindenden Paradigmenwechsels.
12
webdesigner 04/2013
NEWS
Firefox hat keine Lust auf Apple

Weil unabhngige Entwickler fr iPhone und iPad keine Browser mit eigener Darstel lungstechnologie anbieten drfen verzichtet Mozilla auf die Entwicklung eines eigenen Browsers fr iphone und ipad. Deshalb ist es unmglich, einen schnelleren Browser als das Apple-eigene Produkt zu vertreiben. Solange Apple unabhngige Entwickler be nachteiligt, wird die Mozilla-Stiftung keine Ver sion des Firefox-Browsers fr iPhone und iPad entwickeln, sagte Firefox-Produktmanager Jay Sullivan bei der Konferenz SXSW in Austin Sullivan beklagt, dass Apple unabhngigen 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 Ausfhren von JavaScript nutzen als die von Apple vorgeschriebene. Mozilla knnte 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 nutzen. UlWebView hingegen Apple
nutzt fr seinen eigenen Safari-Browser unter iOS eine andere Technologie, unter ande rem die Nitro-Engine, die AppleSoftware Vorbehalten ist.
Universitt Paderborn entwickelt P2P-Facebook

Auf der CeBIT hat ein hauptschlich an der Universitt Paderborn ansssiges Team um den in Dsseldorf lehrenden Juniorprofes sor Klmn Graffi ein peer-toPeer-Framework fr dezentrale soziale Netzwerke vorgestellt, in denen die Nutzer ihre Da ten nicht mehr einem groen Unternehmen berantworten mssen, 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 gendert werden knnen und weil ein Anreiz fehlt, mit einem mehr oder weniger heimli chen Verkauf von Daten Geld zu verdienen. Auerdem knnen Oberflchen so gestaltet werden, dass die Sichtbarma chung nicht versehentlich fr einen weitaus schlsselt und signiert werden. Graffi selbst sieht den Einsatz seiner Entwicklung, deren Prototyp bereits an den Universitten Padergreren als den eigentlich vorgesehenen Personenkreis erfolgt. Letzteres garantiert das Framework auch dadurch, dass alle Daten ver born und Dsseldorf luft, allerdings eher bei Unternehmen, im ffentlichen Dienst und bei NGOs, wo sie beispielsweise Schulungen oder rtliche verstreute Ar beitsgruppen nutzen knn te. Durch das P2P-Prinzip wren dazu keine groen Investitionen in neue Server
.
a
notwendig, weil die dezen tral vorhandenen Kapazit ten genutzt werden. NGOs in Staaten mit Zensurpro blem htten darber hin aus den Vorteil, dass sich ein solches Netzwerk aufgrund seiner verteilten schalten lsst. Grundstzlich soll die Tech nologie aber jeder nutzen knnen - egal ob er damit ein eigenes Netz werk fr zehn Freunde oder ein neues Facebook betreiben will. Struktur nur schwer vollstndig ab
Social Media
04/2013 webdesigner
13
RATGEBER
Web Storage, Application Cache und IndexedDB von Daniel Flter
Web Storage, Application Cache und IndexedDB
Web-Anwendungen offline nutzbar machen

Serverseitige Anwendungen sind praktisch sofern ein Internetzugang verfgbar ist. Dank neuer Standards und Technologien zur Nutzung von Browsercaches sind immer mehr WebAnwendungen 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 lschen Version aktualisieren
Anwendungscache aktualisieren
> ----------- J
Webserver
Durch neue Techno logien wie Applica tion Cache knnen wesentlich grere Datenm engen im Browsercache vor gehalten werden, als dies bisher m it Cookies mglich war.
Client/Browser
haben ihre eigene Funktionalitt zu erfllen. Zwar besit zen diese Speichertechniken eine gewisse Genialitt und eine unglaublich wichtige Funktionalitt in der Weben twicklung, es lsst 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 Gre der zu speichernden Daten recht begrenzt und die Cookies werden unverschlsselt bertragen. Fr den Browsercache gilt, dass er keinerlei API zur Verfgung stellt und so zwar zur Verbesserung eines schnelleren Seitenaufbaus verhilft, aber man keine Chance hat determi nistischen Programmcode um den Browsercache zu sch reiben. Genau an diesen Schwchen wurde gearbeitet und neue Standards definiert.
ookies sind in der Webentwicklung nicht mehr wegzudenken. Mit HTML5 & Co. sollten auch die Cookies eine berarbeitung bekommen, und
zwar eine, die gleich etwas grer ausfllt. Dabei sollten die bestehenden alten Cookies nicht einfach ersetzt wer den, sondern mit den neuen einen groen Bruder be kommen. Man erahnte dann wohl so viel Potenzial fr die neuen Cookies, dass sie sogar ihren eigenen Standardisie rungsprozess erhielten. Inzwischen haben sich nun drei neue Namen fr die Supercookies etabliert, die die Vortei le der neuen Cookies verdeutlichen sollen:Web Storage", Application Cache" und IndexedDB". Der Vollstndigkeit wegen soll hier auch ein Standardisierungsprozess nicht unerwhnt bleiben, der allerdings schon wieder als aufge geben gilt, und zwarWeb SQL". Cookies erlauben es Daten dauerhaft im Browser zu spei chern, hnlich wie es der Browsercache eigenstndig tut. Beide Mglichkeiten der Zwischenspeicherung im Client
14
webdesigner 04/2013
RATGEBER
Web Storage
O trM Im * P \* f V*wTwfca Qm*S Ort \wm-m Trw*elMi I %mm
Das neue Web Storage erweitert das JavaScript-Window-Objekt um zwei Funktionen, den Local Storage und den Session Storage. Letzterer ist am ehesten mit Cookies zu vergleichen. Whrend Local Storage die Da ten auch dann noch speichert, wenn der Browser ge
Cougle
Orve
Ed OoooW Docum ontt and v *w Ooogto S p w d tfiM t

My t>w*
schlossen wird, ist der Session Storage an eine Anwen dung oder Seite sowie an ein Tab und Browserfenster gebunden. Auerhalb einer solchen Session sind die Daten nicht mehr gltig. Je nach verwendetem Brow ser knnen zwischen fnf MB und zehn MB groe 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.
j
K r4
ShndttMn :ttr%s
1. 8t V0 Offlin ttec
1 InUli V* Om* Q n m
You r M M i O n r a M i i m ***
Z Z niDiNNfi t MM 1 0 Mtu#r LMf^m on

C PU*-; C T ff-1 i n M O I f W O o c i
fcwgm Ou u ii f t i m r C m fm
- r CWN rtori
AdNt 0*1rm0*m
Ow#*w1 rVaq/w f>*M
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 Stabilitt und Zuverlssigkeit ga rantiert, um ganze Anwendungen im Browser offline verfgbar zu machen. Was Google hier mit Applikatio nen fr den Chrome Browser bei den Offline-Modi von Google Docs (Abbildung 1), Gmail und Google Calendar Vormacht, ist auch fr Notizanwendungen wie Evernote verfgbar. An dieser Stelle ist jedoch hinzuzu fgen, dass diese nur mit der kostenpflichtigen Premiumversion fr iOS, Android und Windows Phone funk tionieren. Der Application Cache wird mit JavaScript aktualisiert und verwaltet, setzt aber zustzlich eine Manifest-Datei auf dem Webserver voraus, die die zu cachenden Dateien auflistet. Ohne die Manifest-Datei wrde 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 mglicherweise nicht mehr oder nicht richtig aktualisiert. Beim Application Cache sind zwei Zustnde zu unter scheiden: 1 . Der Application Cache ist noch leer bzw. noch nicht angelegt und der Cache ist gefllt und muss aktuali siert werden.
men und nicht vom Server, weshalb er auch den Na men Offlinecache" bekommen hat. Eine Aktualisierung ist natrlich mglich, es sind aber zwei Seiten- oder JavaScript-Aufrufe ntig. Der Erste dient dazu, den Cache zu aktualisieren, der zweite hat die Funktion die Daten aus dem Cache auch anzuzeigen. Beide Speichermglichkeiten, Web Storage und Appli cation Cache, sollen hier betrachtet werden. Beide wer den von allen gngigen Browsern untersttzt. Der Appli cation Cache steht allerdings erst im Internet Explorer ab der Version 10 zur Verfgung, welcher nun aber auch fr Windows 7 downloadbar ist.
IndexedDB
Bei IndexedDB ist die Browseruntersttzung recht gut fortgeschritten, sie ist aber noch nicht ganz gegeben und soll deshalb hier auch nicht im Detail erlutert wer den. Auch wenn die beiden Browser Chrome und Safari die gleiche Browserengine Webkit verwenden, funktio niert IndexedDB im Safarinoch" nicht. Gleiches gilt auch fr Opera. Chrome und Safari kommen zusammen auf etwa fnf bis sechs Prozent Marktanteile, was zwar nach wenig klingt, aber dennoch sollten die beiden WebkitBrowser nicht vernachlssigt werden, zumal ihr Marktan teil in den letzten Jahren recht konstant blieb. IndexedDB lsst sich bei den NoSQL Speicherarten einordnen und untersttzt die Suche nach Indizes. Der Vor teil ist eine sehr schnelle Suche nach Objekten, die ei nem bestimmten Feld entsprechen, ohne jedes Objekt
2. Der Application Cache geht davon aus, dass die n

derungen, die gemacht werden, vom Benutzer kom
04/2013 webdesigner
15
RATGEBER
im Speicher zu durchlaufen. Zu den Nachteilen zhlt im Moment noch, dass die Browserimplementierungen un terschiedlich und miteinander inkompatibel sein kn nen. Dennoch wird derTechnologie ein groes Potenzial vorausgesagt. IndexedDB-lnteressierte knnen sich un ter,http://nparashuram.com/lndexedDB/" nher mit der Materie vertraut machen.
reiben zu knnen. Mozilla bekannte sich beispielsweise, hauptschlich aus philosophischen Grnden, gegen eine Verwendung von SQL im Client per JavaScript-API und stuft das Vorhaben in verschiedenen Gesprchen 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 groen
Web SQL
Fr Web SQL ist von Seiten vonseiten der W3C Vorsicht geboten, da das Konsortium die Spezifikation nicht wei ter pflegen und entwickeln mchte. Mit Web SQL sollte die SQLite-Datenbank in den Browser fest eingebaut werden, um dann per SQL-Befehle Daten lesen und sch
Datenmengen im Browser. Es msse erst eine geeignete SQL-Implementierung gefunden werden, welche die be ntigte Funktionalitt im Browser mit sich bringt ohne einen bestehenden Standard, wie SQLite, ndern zu mssen. Was z.B. mit IndexedDB zutrifft, (https://
hacks.m ozilla.org/2010/06/beyond-htm l5-database-apis-and-the-road-to-indexeddb/")
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 gngigen Browsern untersttzt werden. Die folgende bersicht zeigt, ab welcher Version der jeweilige Browser welchen Standard untersttzt.
Chrome fr Android
Firefox fr Android
Opera Min
15.0
15.0
Opera Mobile
Blackberry Browser
Insgesamt lsst sich sagen, dass die Speicherarten ausgereifter sind und ein Caching zulassen, hnlich wie sie bisher auf dem Server eingesetzt wurden. Ein mglicher Vorteil von Zwischenspeicherung im Browser ist, dass der FITTPAufruf (Web-Cycle) nicht mehr zwischen Server und Browser liegt und damit wegfllt. Im Falle des Application Caches ist dieTechnik so stabil konzipiert worden, dass sogar davon ausgegangen werden kann, dass alle bentigten Daten aus dem Cache geholt werden knnen und vorrtig sind. Dies gestattet eine temporre Trennung vom Brow ser (bzw. Browsercache) und Server, wodurch Offline-Anwendungen ermglicht werden.
webdesigner 04/2013
RATGEBER
Vorteile fr Offline-Anwendungen
Fr Offline-Anwendungen gibt es mehrere verschiedene Grnde: Im Flugzeug ist es nicht erlaubt eine mobile Verbin dung zum Internet zu nutzen. Fr viele Passagiere ist es praktisch, wenn sie Anwendungen trotzdem nutzen knnen, die sie sonst auch zur Kommunikation verwen den, und diese nach dem Flug leicht synchronisieren knnen. E-Mail-Entwrfe, Artikel, Newsletter, Webaus schnitte knnen 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 Umstnden berhaupt nicht mglich. Bestimmte Daten, wie Telefonnummern oder Wegbeschreibun gen, oder aber auch bestimmte Programme knnen mit der neuen Technik in diesen Situationen verfgbar gemacht werden. Auch digitale Notizzettel, Einkaufzettel oder ToDo-Listen knnen problemlos auch ohne Netz mit einer WebAnwendung erstellt werden und bei nchster Gelegen heit ber das Internet synchronisiert werden, sobald eine Verbindung wieder verfgbar ist. Viele Mobilfunknutzer haben volumengebundene Tari fe oder wollen den mobilen Internetzugang wegen ho her Roaming-Gebhren nicht oder nur eingeschrnkt 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-Lsungen angeboten. Die temporre Unabhngigkeit von einem Internetzugang steigert den Nutzen solcher Dienste fr den Anwender unge mein.
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 gewhrleisten. Zum einen kommen die ben tigen Daten fr 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-Auswahlmens. Fr 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 gendert, wo er schlielich vom Browser aktualisiert wird. Der Web Storage ist dagegen fr die Benutzerein gaben zustndig.
Der Vergleich von Web Storage und Cookies

Der Web Storage wird oft mit Cookies verglichen. Und hnlich wie Cookies knnen sitzungsabhngig oder do mnenspezifische Key/Value-Daten gespeichert wer den. Ein groer Vorteil ist aber, dass sich beim Web Sto rage Speicherbereiche nicht mehr gegenseitig stren knnen. Im Zuge der Offlineverhaltensweisen, z.B. das lokale Speichern von Werten fr die sptere Verbin dungsaufnahme mit dem Server, verhlt 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 pltzlich leer ist oder aber zwei gleiche Artikel hinzugefgt 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.
Caching Techniken verwenden

Bisher konnte sich die Kombination aus Application Cache und Web Storage in den oben genannten groen Anwendungen behaupten. Es ist aber auch zu sagen, dass Google Does - Offline Does nur im Chrome-Browser als Desktopinstallation oder in den Chrome Books von Google untersttzt wird. Der Chrome-Browser fr Android sowie andere Browser erkennen die Funktion noch nicht.
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.
.length
Ruft die Lnge der Key/Value Liste ab.
04/2013 webdesigner
RATGEBER
.remove(key") im iE: .removeltem(key")

Lscht ein KeyA/alue Paar.
vorhandene Benutzerdaten im Web Storage vorhanden sind, worauf diese Daten dann mit den Daten auf dem Server synchronisiert werden knnen. 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 lschen. Um beide Zustnde (online/offline) zu testen, gibt es im Firefox mit Datei -> Offline arbeiten" eine Funktion, mit der die Internetverbindung unterbrochen werden kann.
.dear()
Entfernt alle KeyA/alue Paare.
.remainingSpace
Ruft den verbleibenden Speicherbereich ab, in Bytes.
Zudem gibt es auch Events:
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");
,storage' im iE:,onstorage'
Wird an document-Object ausgelst, wenn ein Speicher bereich gendert wird. Alle Dokumente, die denselben Sitzungskontext nutzen und die Dokumente, die mo mentan eine Seite von derselben Domne anzeigen, empfangen das Ereignis.
Der Zugriff mit JavaScript ist folgender:

window.addEventListener(,storage', function(event){ console.og(event.key + wurde gendert von + event. oldValue + in + event.newValue); }, false); if(typeof(Storage)!=="undefined")
{
// Das localStorage und sessionStorage Objekt wird untersttzt localStorage.setltem(name", Simone"); localStorage.setltem(name", Susanne"); var strName = localStorage.getltem(name"); }else{ // Kein Web Storage Support!
}
Die Vorteile des Application Cache

Der Application Cache hat die Besonderheit, dass die Implementierung bzw. die Programmierung clientund 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 gendert werden. Eine n derung der Datei ist zwingend erforderlich, selbst wenn es nur um einen genderten Versionskommentar handelt, der besagt, dass aktualisierte Dateien vom Cli ent angefordert werden knnen. Damit der Client mit der Manifest-Datei umgehen kann, muss sie im rnanifest-Attribut des html-Tags stehen. Dadurch wei der Browser, wo er die Manifest-Datei findet, kann sie auslesen und alle darin stehenden Dateien cachen. chtml manifest="example.manifest">
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 unverzglich zurck zum Server senden. lmoffline"-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 Verfgung stehen sollen, wenn der Browser geschlossen wird, oder ob sie so lange ver fgbar sind, bis die Seite bzw. der Tab geschlossen wird. Auerdem muss eine Abfrage eingerichtet werden, die bei der nchsten Internetverbindung prft, ob eventuell
webdesigner 04/2013
RATGEBER
Hier ist auch anzumerken, dass der Application Cache ein Offlineverhalten zeigt, das besagt: Wird die Mani fest-Datei mithilfe des manifest-Attributs referenziert, mssen immer alle bentigten Dateien im Applica tion Cache stehen. Es wird dann nmlich nicht ver
R esources |
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
Nam e P a th c a r .h tm l
N e tw o rk S ta tu s Text 200
ok
S ources Type
( j t T im e lin e
P rofiles
A u d its S iz e C o n te n t
C o n so le
M e th o d
In it ia t o r
l$rro
4m s 4m s 0m s 0m s 0m s 0m s 9m s 9m s j * Ml ^
<>
/A p p C a c b e s ty le s h e e tx s s /A p p C a c b e m a in js
CET
t e x t /h t m l
O th e r c a r.h tm l.4 Paner c a r.h tm l; S Parser c a r.h tm l; 18 Parser
(fro m c a ch e)
GET
200 OK 200 OK 200 OK
te x t/c s s
(fro m c ach e)
__
/A p p C a c h e /s c r ip tt c a rg p g /A p p C a c h f /im * q r\
CET
a p p lic a tio n /p v a s c r.p t
(fro m c a ch e)
C ET
m a g e /jp e g
(fro m c ach e)
4 r tq u tid
1 08 Ir in ifir r td
Q. Q
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 )
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 XHR F o n ts W e b S o c k e ts O th e r
e .
>2
Alle Daten werden aus dem Cache geladen.
Da es sich um einen relativ neuen Mimetyp handelt, sollte man prfen ob er in die Konfigurationsdatei auf zunehmen ist unter [Laufwerksbuchstabe]:\xampp\apache\conf\mime.types: text/cache-manifest text/cache-manifest appcache manifest else if (strpos ( $line,,CACHE:') !== false) Alternativ kann man die .htaccess-Datei mit AddType modifizieren [Laufwerksbuchstabe]:\xampp\htdocs\forbidden\.htaccess: AddType text/cache-manifest .manifest AddType text/cache-manifest .appcache
} {
foreach ( SAppCache as $line) { if (strpos ( $line, ,#') === 0) startsWidth #: revision

{
//
fputs ( $fp, # . date ( d-m-Y H:i:s"). $nl); update
//
fputs ( $fp, ,,{$line}" ); fputs ( $fp, ,,{$add}". $nl); // add new line
else if (strpos ( $line, .NETWORK:') !== false)

{
//... same as CACHE: for NETWORK: and FALLBACK:
Die eigentliche Dynamik findet auf dem Server statt, dort liegt die Manifest-Datei. Ansto von Cachende rungen gehen von nderungen dieser Manifest-Datei aus. Entweder man ersetzt sie mit neuen Inhalten, n dert sie oder lscht dort Dateien mit einer Webserverprogrammiersprache, wie PHP oder C#. <?php $add Sdelete SAppCache $fp if($fp){ flock ( $fp, 2); $nl = ehr (1 3 ). ehr (10); = styles.css"; = jquery.js"; = file ( example.manifest"); = fopen ( example.manifest", w ");
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
RATGEBER
echo Datei konnte nicht zum"; echo Schreiben geffnet werden";

}
Datei beschrieben wird (vergleiche Abbildung 4).

0
^ Ik rw n s
ftrw u rio
S flw t
Timc'inc
Flo'i')
[ ^ ConxAe
Die Dateien lassen sich relativ oder absolut angeben. Es kann also die jQuery CDN Adresse verwendet werden, um den Application Cache zu fllen.
Die Manifest-Datei kann die folgenden Eintr ge besitzen:
Creat u n A pp lication Cache Application Cochc CKccWmg Application CiCha Application lach *rfirst a p p lu a n n n P ro fr# AptrluaUu Cadc P t * r c Application Coch P r & c rc Appli<atiO* Cachc fro rc Application Cach P ro fra tt a p p u o t io n lacna ap pitrarin n farn# Prn$r*<<
it h aarufest http.//localtost/AppCache/Ae{ache.app<a<*e cv*t voM #M8J8I ccwl ewent CvM vM v*n ( <1 < 2 <3 < 4 (S <* < 7 ot ftf ul of of ot of nt Kl Hl 81 0) 8) 81 8) Mt lo c i m o i t / A p p i . H O o*va Mr*-//lnfalhA*r/A|frafh#//ar.hl tiLla.//luv.Htm L / A t f t t C a i i a c / l i La l Ktt0;//locaUt4t/AppCac*</scriot>/aift. j j H t l; / / Ig M lt e ll/ A M C a t f c / lU lt lh S f ili 111 l tf / / lo c a lh t/A CaOw/iaaaaa/loaa . i m M tp '//lo cal*o tt/ap p tacn # /i*a*ai/car.jp f httft;//1nraltecr/Aftprarn*/
A v w lu iU u n Cdcltc P iv g rc * e *c n l <8 u l 81
Application Cach Cachcd event
Gefeuerte Events beim Cache aktualisieren.
CACHE:
Alles was gecacht werden soll. Keine Teilpfade. 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 unschn neu geladen wird, kann .swapCacheO" benutzt werden. Mit .swapCacheO" wird der neu geladene Seiteninhalt noch nicht angezeigt. Es wird nur der Cache dabei aktualisiert, der beim nchsten Sei tenwechsel (oderF5") 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.
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 / fr root Ordner.
Beispiel Manifest-Datei:
CACHE MANIFEST CACHE: index.html http://ajax.googleapis.eom/ajax/libs/jquery/1.7.0/jquery. min.js FALLBACK: Offline.html
Damit der neu geladene Seiteninhalt auch angezeigt wird, wrde man eher auf das .reloadO" zurckgreifen, 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 gltige Manifest-Datei als manifest-Attribut. Beim Befllen des Caches knnen einige Statusevents gefeuert werden, deren Event-Typ in der Handlermethode abgefragt und unterschieden werden knnen.
Soll der Cache refreshed werden, um beispielsweise neue Seiteninhalte oder ein gendertes CSS-File zu la den, muss immer die Manifest-Datei gendert werden. Fr den Fall dass die genderte 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. window.applicationCache.addEventListener(,checking'; handleCacheEvent, false); window.applicationCache. addEventListener(,downloading', handleCacheEvent, false); window.applicationCache.addEventListener(,progress', handleCacheEvent, false); window.applicationCache. addEventListener(,updateready', handleCacheEvent, false); Damit der neu geladene Cacheinhalt auch auf der Seite angezeigt wird, muss man die Seite neu laden mitwinwindow.applicationCache.addEventListener(,error', handleCacheError, false); window.applicationCache.addEventListener(,noupdate', handleCacheEvent, false);
dow .location.reloadO . Ist die Manifest-Datei gendert

worden und wird der Cache neu geladen, wird immer der ganze Cache neu geladen, wie er von der Manifest
webdesigner 04/2013
RATGEBER
function handleCacheError(event) { console.log(State is: + window.applicationCache. status + - Eventtype: + event.type);

}
Der Application Cache ist im Grunde also nicht schwer zu verstehen und anzuwenden, besitzt aber einige T cken, die genau betrachtet werden sollten. Deshalb eine stichpunktartige Auflistung mit Fehlerquellen: Im Application Cache gecachte Seiten werden nur neu geladen, wenn die Manifest-Datei gendert wur de. Alle Ressourcen einer Seite, wie Images, externe CSS Dateien, etc., mssen fr die Seite im Application Cache gespeichert bzw. in der Manifest Datei stehen, sonst kann es sein, dass sie der Browser nicht ldt bzw. findet. Eine HTML-Seite, die das manifest-Attribut enthlt, muss nicht noch einmal im Manifest selber aufge fhrt sein, um im Cache zu landen. Deaktiviertes JavaScript ist fr die Anwendung td 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 geprft 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 Eintrge in der Manifest-Datei mit falschen Dateinamen oder Dateiendungen, gelschte Bilder und hnlichem verursacht werden, bricht den ge samten Ladevorgang ab. Was im gnstigsten Fall so viel heit 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 gendert, 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 manifest-Attribut im HTML-Tag vergeben wurde. Es ms sen alle externen Ressourcen der HTML in der Manifest-Datei stehen, damit sie im Application Cache
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 Verfgung, im Gegensatz zum Browsercache, der pro Browser gilt und immer allen Webseiten zur Verfgung steht (siehe Abbildung 5).
o */r*r.< i
^ S o u rc e s ^ jT i r o f l . n ^ P ro le s
( j ) NctWO*
^ A u d itt
Type
C o n to *
* Cu * I jWebSQt * I irt0*aDB
local Storage fr ! S*tlOA
Hn / AtCchc/AeeCftc* j * pcacH < mtpy/iou*cst/A3ecxr#;car mmj btto '/locafcosi/AocCache/imaoes/HimJKono htt 7/1oc**5i/AteCacht /images /HavtC. 09 nno7/oaoWtacf>e/ifTuej,cif r *09 hno //>ouftosi/AdtiCxhe/imiots/looo.iDQ hup Mtp //ioc4iest/AopCjcr>e/scripts/ruJn.ji 1http //locafcost/AeoCache.itvieihertcis
M W c tt IX PKK Cxofccft tupfte* UpM Dtofick UM 1 r EMpKA tXpBCft brpidl
fl /V 1.22a 129.3*1 lZ V .* iU 76.50U 1711 54*1
%Cook*i
? J Appt<4t>o* Cach fei KrmJ)
Ti A o p LJC fip p cjcn
Die Entwicklerkonsole im Chrome und Safari bieten unter Ressource sehr viel Kontrollmglichkeiten
04/2013 webdesigner
RATGEBER
gespeichert werden knnen, 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 manifest-Attribut mit Angabe des Namens der ManifestDatei enthlt. Extern eingebundene Dateien wie CSS, Images und Scripte werden nicht automatisch im Application Cache gespeichert.
Abbildung 6). Die gute Untersttzung kommt nicht von ungefhr, denn Google bietet auch in vielen eige nen Anwendungen einen Offlinemodus an. Fr den Firefox gibt es dasCacheViewer Continued AddOn". Allerdings muss man wissen, dass einzelne Datei en im Application Cache den Eintrag Device=offline" haben. Lschen lsst sich der Application Cache im Firefox unter Alt -> Extras -> Einstellungen -> Erweite rungen -> Netzwerk". Fr den Safari muss man das Men fr Entwickler akti
Application Cache berwachen

Mit dem Chrome Browser kann der Application Cache einfach ber die URL-Adresszeile erfragt oder gelscht werden (chrome://appcache-inernals/", vergleiche
vieren, unterSafari -> Einstellungen -> Erweiterungen -> Men Entwickler in der Menleiste anzeigen", und hat dann die gleichen Mglichkeiten wie im Chrome, es sei denn die Abfrage ber die Adressleise ist nicht implementiert.
j A p p C a c h e In te rn a ls
O f f l f l - G o o g le D rrve
C
Manifest:
c h r o m e ://a p p c a c h e -in te r n a ls
Fazit: Der Applicaton Cache wird auf dem Ser

ver per Manifest-Datei vorkonfiguriert und be ntigt Root-Rechte. Er muss je nach Bowsereinstellung auch vom Internetbenutzer besttigt werden. Web Storage ist eine rein clientseitige JavaScript-API und ist auf die aktuell weitver breitete Browseruntersttzung 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 Mglichkeiten, um Daten auf dem Client zuverlssig und ber Sessions
R e m o Y f i VHtaEnitt
S ize 3 .3 M B Creation Tim e S am stag. 12. Januar 2013 20.47:11 Last Update Tim e: S am stag. 12. Januar 2013 2 0 47:11 Last A ccess Tim e S am stag. 12. Januar 2013 20 49 11
M anifest: https V/docs googte com /olfiinôfflm e/m am fest
F t e m o Y f l Yiowfntrl
S ize: 242 kB Creation Tim e S am stag. 12. Januar 2013 20.47:01 Last Update Tim e S am stag. 12. Januar 2013 2 0 4 7 04 Last A ccess Tim e S am stag. 12. Januar 2013 20 47:41
M anifest: 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 R em ove V iew Entries S ize: 8 2 9 kB Creation Tim e S am stag, 12. Januar 2013 2 0 4 7 05 Last Update Tim e: S am stag, 12. Januar 2013 2 0 4 7 05 Last A ccess Tim e S am stag. 12. Januar 2013 20 47:42
hinweg zu speichern. Dabei gilt noch keiner der Standards als wirklich fertiggestellt, obwohl alle aktuellen Browser die Technik bereits unterstt zen. Echte Offline-Applikationen fr mittlere und grere 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, Fehleranflligkeit und Cross-BrowserKompatibilitt 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 fehleranfllig machen. Jedoch ist der Nutzen dieser Anstren gungen klar erkennbar, werden doch Offline-Ap plikationen immer mehr in State of the Art W eb anwendungen verwendet oder bei den teureren Premium-Apps angeboten.
M anifest:
B f l t n o Y Vxm E n t r i s s
S ize 1.9 MB Creation Tim e S am stag. 12. Januar 2 0 1 3 2 0 4 7 0 5 Last Update Tim e: S am stag. 12. Januar 2013 20:47:05 Last A ccess Tim e: S am stag. 12. Januar 2013 20 47 42
M anifest
mu
. / / i > T y g . l m A n i g a l
B e r n o v . e Yh> wE n t f t o
S ize 6 9 kB Creation Tim e S am stag. 12. Januar 2013 2 0 47:05 Last Update Tim e: S am stag, 12. Januar 2013 2 0 47 05 Last A ccess Tim e S am stag. 12. Januar 2013 20 47:42
So einfach wie m it dem Chrome Browser lsst sich der Offline Cache (Application Cache) m it keinem anderen Browser berwachen.
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.
Hher. Schneller. Weiter.

Die perfekte E-Commerce-Komplettlsung
Mit plentym arkets lassen sich alle Prozesse des Online-Handels komfortabel organisieren, effizient steuern und in Echtzeit verwalten. plentymarkets wird von ber 2.500 Unternehm en fr den Online-Handel genutzt.
W ebshop/ Multichannel
Cloud Hosting
Warenwirtschaft/ Statistik
Software wartung
Paym ent/ Faktura
Beratung / Support CRM
Logistik/ Fulfillment
Das plentymarkets-Prinzip: E-Commerce as a Service
www.plentymarkets.com
RATGEBER
von Tobias Henke
Die Auswahl an Shopsystemen ist inzwischen unberschaubar geworden. Wir haben uns insgesamt 18 Shopsysteme von sieben verschiedenen Anbietern nher angeschaut und sie auf ihre Strken und Schwchen hin untersucht.
er einen Online-Shop betreiben mchte, steht vor der groen Frage, welches Shop-System fr 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 Fllen bereits die Standard-Installation ber zahl reiche wichtige Features verfgt. Hier heit es dann ge nau hinsehen, um den optimalen Anbieter, beziehungs weise das optimale Shopsystem zu finden. Grundstzlich wird zwischen drei Modellen von Online-Shopsystemen unterschieden:
/"V Q Kaufshop
v J Sie zahlen eine Lizenzgebhr und knnen in nerhalb krzester Zeit mit Ihrem Shop auf Ihrem eigenen Server loslegen. In unserer bersicht sind die Open-Source-Lsungen und die Kaufshops in der berzahl. Insgesamt haben wir uns mit 18 Produkten von sieben verschiedenen Herstel lern beschftigt. Es werden acht Open-Source-Lsungen, sechs Kaufshops und zwei Mietshops vorgestellt. Die Hersteller sind Magento, Zaunz Publishing, Plentymarkets, Gambio, Shopware, Oxid e-Sales und Modfield. Bei allen Anbietern hat man die Mglichkeit, sich einen Demoshop herunterzuladen, um sich so im Backend ei nen Live-Eindruck" des jeweiligen Shopsystems zu ver schaffen.
*1
Open Source System
\ J
I -Bei den Open-Source-Sytemen fallen keine
Kosten fr die Installation an, da diese in der Regel von den Shop-Betreibern selbst durchgefhrt werden muss. Der Shop wird auf einem eigenen Server installiert. Be zahlt werden muss jedoch in aller Regel fr Support und Updates. Wie viele andere Anbieter bietet auch die in Sddeutsch land ansssige Firma Zaunz Publishing mit ihrem Shop system Cosmoshop mehrere Ausbaustufen" ihres Shop systems an. Diese nennen sicheStart", ePRO,eMAX und Mandant". Die Kaufshopsysteme von Cosmoshop war ten mit einer Besonderheit auf, da man das System ent-
Cosmoshop
/"V
\ J ^
Mietshop
- Bei dieser Variante wird die gesamte technische
Struktur von einem Provider zur Verfgung gestellt und es ist eine monatliche Gebhr fllig.
24
webdesigner 04/2013
RATGEBER
weder kaufen oder sich fr einen Mietkauf entscheiden kann. Die Lizenzkosten liegen zwischen 795 und 11995 (fr die Version Mandant"). Fr den Mietkauf sind zwi schen 89 und 585 pro Monat fllig. Die Kosten fr 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 rttn t B u tw ts s rrwt d e s * '
W f sicn un.orrôrt uod cftneU E n
Version ePRO
Proftsswtfct AfOgridiOSwng fur 5s zu 1000 rtktt Jcrêrtupgra<j4 Ddi &* auchflviibtl
Version eMAX
ua<imjf u o fM ik und v o i* ifc x x M ffa
Upg*dt auf h o fw t Vrs*ontn ist m fepcfi

r* ; Hrh/ihts V tfjjo n
trwtttC*r
ru&at>cft HgWigf*s i* s o r .'fton
wo(!*r*
s( Vtruon
ws zu 250 * 2 0 c *n *n s ttj
t#s 1000 ArtMl nog*K*

* 4 O O flM lrtS in id
S(4 100.000 A flfctK fltttirtSt
gfctf
1zr**>0ss<taastitt +!*<*
OptKXHl Kun3*<Tr*rvi arturvg
2Z a N o o o s s c fw v a s ttlitn .*tUft
opftonjl Gutschtf*ffwafeing inW
Dornum s IM
JZahiuogssctinittsteBen
Fr#rrv3pf*th*n
SO0f4 rtt*t fr Dthtoi *it<t vanjnen tsieibtrftanuno
H ie r o r v v fr nC utK ftW m * n M # 0O H d u c t\a u tO 'T ttfe s ie r ttrztu#*e rd tn .
0OMI J * *9 /K 4 U U 0 d U Z*hJu<v9*scim ftsttB t a i S*nUod*r

8 jr.. (CC Ban*) Of*r>t Fin*\Muftg CC Scoimscvitts#
t#m
Tem cesfStem
NewsleBers-rStcrn
Sajtatctn
2ahfcr>gsscfvrtttr*!in Cfos s-Stwg und Zut>#ro*
U*Wisttrtiiinko*
tmprt->p4<tscftnmst*ftt
uvm
Fr Shops m it sehr vielen Artikeln sollten Sie sich fr die EnterpriseVariante entscheiden
Neben den Standard-Funktionen sind etliche kosten pflichtige Erweiterungen mglich. 4 Praktisch: Durch Klick a u f den roten Pfeil werden die Funktionen der Er weiterungen erklrt.
weitere M o d u le
____ I
v V
Massenberarbeitung von Artikeln Lexikon-Plugin Merklistenfunktion enthalten ab Version 10.1 Mediafiles je Artikel Gutscheinverwaltung Angebot statt Kauf Modul Wunschzettel-Funktion Massenbestellformular ab 18 Modul Look & Feel Farb- Grafikanpassung
'S 'S 'S 'S 'S

optional optional optional optional optional
'S 'S 'S 'S 'S

optional optional optional optional
'S 'S 'S 'S 'S
optional optional optional optional
<s 'S 'S

optional optional optional optional optional optional
i'
Die maximale Gre des Shops hngt stark vom jeweili gen Produkt ab und schwankt zwischen 250 und 50000 mglichen Artikeln.
i.F - ; : t *
Community-Edition. Das Besondere an dieser Open Source-Variante ist, dass auch fr den Support keine Kos ten fllig werden. Der Support fr die Community-Versi on erfolgt vielmehr ausschlielich ber die groe Com munity im Online-Forum von Shopware - hier ist also
Shopware
Die im mnsterlndischen Schppingen ansssige Shopware AG bietet ebenfalls vier verschiedene Varian ten seines Shopsystems an. Die Standard-Version ist die
der Name Programm. Ein negativer Aspekt ist, dass es in der Community-Editi on keine Gewhrleistung, keinen Wartungsvertrag und keinen Herstellersupport gibt. Daher ist man als Nutzer der Community-Edition komplett auf die Hilfe im Forum
04/2013 webdesigner
25
RATGEBER
CQMMuwrr
angewiesen. Die Kosten fr den Support betragen bei

Eomo
(HON
der Professional Edition 49 bis 99 Euro im Monat und bei der Enterprise Edition je nach Support-Level zwischen
V
T ' k rf*y *ft*n C M ) i * m ftnoppinf

--1
o o 0 0 o 0 0 o 0 0 o 0
X X X X X
o o 0 0 o o o o 0 0 o 0
V
X X X X
V
y/ V V
49 und 249 Euro.
V y
B u n ^ W -fiK k fc lio n B u tin *( M n tia U fhMNpt P r d v tc lb r> t r rh u lfrt tllg n la rN m tU (lr 8o a u (B ildvcrfugbjr)R e M rv a a io A 1 0 * 4 4 C r* pS h o p pi+f
Wenn man sich fr die Community-Version von
Shopware entscheidet, sollte man idealerweise also ber eine gewisse Programmiererfahrung verfgen. Die wichtigsten Unterschiede zwischen den einzelnen Produkten liegen auch bei Shopware in der Anzahl der verkauften Produkte. Schon in der Standard-Installation knnen 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 fngliches CMS legt, sollte in ein Premium-Plugin inves tieren. Eine bersicht ber verfgbare Premium-Plugins finden Sie hier:
V
V
V V V V
V
V
< V V
V V
X X X
V V V V
iB Uvw fw gtjr; A b oC tm m trct S * 9 * n gV T ^ H -S y U m Atirrt O if d ry

Vjrn*h 3
V V V
Sw cH *mil KH.R Bck*rtd Q

r ia it M -U
4 Die Kreise markieren die Plugins,

die m an optional kaufen kann.
In der Community-Variante ist der Support sehr stark eingeschrnkt.
( M H 0 4
Fr viele Shop-Betreiber ist der Support ein entschei dender Faktor bei der Entscheidung fr oder gegen ein bestimmtes Produkt. Shopware bietet hier auf sei ner Homepage eine detaillierte Auflistung des Sup ports fr die verschiedenen Versionen.
MM
. X X
V H M < * W IM M
W M ac
* ^ w
u m m m V
V
Shopware arbeitet zurzeit an einem Tool, mit des
s V
X * X X X X X X X X X X X
sen Hilfe sich Shops untereinander vernetzten kn nen. Mit Hilfe des Systems Namens Bepado soll es mglich sein, dass ein Hndler Lieferant eines ande 3 3 u . V < u . ren werden, oder dessen Ware einstellen kann. Mit der Beta-Version, die im April 2013 in Betrieb geht, wird Bepado zunchst nur mit Shopware-Shopsystemen funktionieren. Sptestens im Juni soll das System auch mit anderen Shopsystemen kompatibel sein.
V
X V X X X X
V
X V X V X X
V V
V
Ut . P,
U JlW r
V
V
<
m
X X X * X
m
X X X V m X
Plenty Markets
Bei der in Kassel ansssigen Plenty Markets GmbH ha
ns
ben Sie die Wahl zwischen der Professional und der Enterprise-Version. Die Professional-Version ist die Mietversion, die Enter-
9 W '!> N W
* ^ 9*^9
i m I m W i M IM I -A . . ^9 ^--
prise-Version ist die Kaufversion. Die Produkte von Plenty-Markets eignet sich laut Angaben des Herstel ler sehr gut fr grere Projekte mit Multisites. Hier finden Sie eine bersicht ber die Funktionen:
*99^9 MM* SM M */* IMIMM AMftS
26
webdesigner 04/2013
RATGEBER
W eb shop
Wie bei vielen Mietshops richtet sich der monatlich zu zahlende Betrag nach der Gre des Shops. Die Kosten liegen zwischen 99 und 4299 Euro pro Monat.Die Kosten fr 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 Gre des jeweiligen Shops orientieren.
<*) l*r*ju o flC *5 tg * iiMr HTML uo3 CSS ir-rr*2c*f m c n \ u t ^ Z0C*vfiX*O*
IAir5jtUI (VTF1 fttoim;
B M urU M C
^ ^
CtechoMmau4 GCin*tKW
1. W a h le n S ie e in T ftn fp ek e t:
% tri i|. 4 _j4 4 .#Afcj. .Am M v v" A Bi fc *^ ,,r -^ a ^ IS A 1 * e
^ l > k M H M i ÛK V
v*:-ogi S;q-Ucou
6 (*M |
* < X M '9*t D K * M < M M M M f M ( t M tv m *tfU > < n M i M t l ; M * W
4A*' *ia
t * m m u o N iS W M n w w N
in m n
3*n
(M l
Dato? i u i ^ i Ij M <etfe**e C*u m

M M Trtflfc U W JW 8 N C M ie 40 00JMB n a 1* 14 0 t t M * llN V U b jo o o u e 4J00 ue 4 t0 0 U II 7 > ttU R 0900 m J94 990M8 ooo&ouo (M M 3 U C t0 0 O tt U6 1000 009 u e 1 * W 009 UB 900 MB 12 900 I C
n d e * ' w f c f l
1 *+** AlWUt M M WO00 >9 900 40000 O ttO 00 o w 90 900 100 009 110 009 300 009 750 009 >00 009 CCI9-9eplt f l t t t j t M Hl C4M > * ;* v . w i IflCOMl tfy a b i( o :fl d ra -S M i
ffj Kwv3#n>e*wn
^ C^tMdk
O UB#<
tJ K * EU ** 1W CU*** iO O lU * 400 F l *
tW O UMO
M u iim 2 IO O
Kjtt->V)w <5 E n f o )
t 000 10900 r ^ H 4 A l!3 0 } 30 900
'm u H * m e u r 1 441 CUR* 1 990 EU* }r*o c u > * IM tu * r
14 400 *48 14 KD US 19W W P 2 * 900 MB
PniSOlutACA <M S M il|r it
M H
m m
IM W
/ ft^ N
<+j l<*Jtt EtfM AM F N tttM
fro m w w S O M t '>#
4 te u ft /m
m
d^lKiMen
lU a M iM M k a ft lA w
ft* o K O HS M W M
k *dn.+ a nnt< % jlrtriln4rtrti) > U H |<&

&A* i. f> A a
> n
U ka
c m* ill fto* ^KTftlS

jJ
^
^
&j| r a >
9>;e09 *rt*9:*m9*Jrt0t Tru i*3-S ncp*-K i*v3nc># ***ji^
V H K *n .T *frtc NMUKM n4 V ff C
= *~ o*
II^ L kW pv
M 4rW SWl< M *
</ iv
la ^ vet * * aw' H "^ w e
(QKfl
||a| -A , a I *fl etf
^ ^
f j JA a
a&a k/|A e^^w
*KamKuo4fti<t%Kpen
Die Kosten des Mietshops von Plenty Markets.
TrutMO-SAOpS 'XUrtC**1f l'ltMrtoe
Crttct-Cnf riom M BwOcn-<.owjs
*A >m 9**rtr rneort *0 UA4 (T R k M KifVM)
C00< 9 n o t**
Wer sich fr den Mietshop entscheidet, sollte sich vorher sehr detailliert darber informieren und beraten lassen, welche Gre fr den jeweiligen Shop das Optimum ist. Ein Mietshop hat natrlich den Vorteil geringer Einrichtungskosen, aber ab einer gewissen Gre sind stattdessen die monatlichen Kosten recht hoch. Fr Kunden, die sehr viele Produkte verkaufen wollen ist die Version Enter prise zu empfehlen, da hier keine Limits in Bezug auf die Gre des Shops existieren. Plenty Markets legt besonderen Wert auf optimale Kundenbetreuung, was durch Key-Account-Management und regelmige Mitarbeiterschu lungen gewhrleistet wird. Wie beim Mietshop ist auch beim Kaufshop
SvcN-vM <Hft9*9% A*0i HV*WIoc>* * 9C0m*rt#rt U G U S90-MP TB99. 0**ftC*Oft. My*0*09 LKe-StKfto **vr>6oe<& m 0ttfscftc'fltc>***o<3
Cf^Mrn v M u id 4 r ji6 f< W i

</ SucmiufrSA o w sn4arat*tt<> S c h ** rtn a
Socf-*r>S*1#m ff Proc*ooc urtff *CT*.or
:< rlaScnnCiiri*
i* i : jr> c < A n ji i
o *ceboc* \r>r>3*no
O W M
6*r4U<-A/ie*rt<juvj
^ ) M iO M t o n r t j
<J
der fr den Support zu zahlende Betrag vom jeweiligen Projekt abhngig.

fM srwtwt * U i9 O * 0 tlttr
<*J 'B ta > U ir> tw ; H.fftrv^n ?.* 6 f ^ n - * 5 g ? ! jef
r < 3 n $ # i r > } \ * n r - J i & '. i & n < r )
Magento
Das Shopsystem Magento, der in den USA ansssigen Firma gilt als eines der grten und komplexesten Shopsysteme fr groe Online-Shops. Es handelt sich ist um ein OpenSource-System. Der Kunde kann zwischen der Community-Version, dem Mietshop Magento Go" und der Enterprise-Edition whlen. Aber wie bei allen OpenSpurce-Systemen heit das natrlich nicht, dass bei einem Magento-Shop keine Kosten anfallen. Fr die recht komplizierte Einrichtung je des Magento-Shops gibt es zahlreiche sogenannte Magento-Agenturen,
04/2013 webdesigner
< *j LK^SftopCif.; wl CcHrto^nuftflUw*-^*;# o*t

Wafwvtan6< i P t w r t
ruy***n ^ rcf-Skf
S iW ifl :
^ AUMdWUM
UMlktMA
^ KvVH**cmj **>0*puCC0rt K*wur*mmK*rTwif>0#nOf
li9 ift^ tvn fuane > v * * gX vJi t* r iK # * 0 * )

<*j FS*1UCU
B**l*tt*^nvT\# ,FH ttftta UMr-vOuftg n M n n
RATGEBER
Oxid e-sales
K e y F e a tu re s Community
'U 1 Mafvtfor*0
viefpns
Wer Wert auf besonders leicht anpassbares Custom

A ^ x < d C w K iw r
Md Tr f r f
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-ManagementSystem befindet, ist es ab der Professional Edition auch problemlos mglich, seinen Shop vollstndig ber ein anderes selbst gewhltes CMS, wie beispielsweiseTypo 3 zu verwalten. Diese Funktion findet sich sonst nur bei wenigen Konkurrenten.
hw;* WWv lr<
0 ^ 1
O*
iM t n I P 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 mn
V jl* # * ( f MW )
IW Md ^ n M l c n I W < M
U f if t U ck*|
A 4 *t> ttd
Ci* m W ry f
Highlights
Integriertes Content Management System (CM S) Schnell Projektumsetzung, kurze Einrichtungszeit (Time to Market) W eb 2.0 Paket (Tagging, Rating, tiefe F acebook-Integration, e tc .)
W S*n>
IU I
i
Cm
..
V < m *U(W Si** Vm M dW A((M
Suchmaschinenoptimiert Funktional erw eiterter und anpassbar Modular und ausbaufhig Optionale Anbindung an die E-Commerce Intelligence Plattform OXID eFire (derzeit in 0, A und CH verfgbar) Vollstndiges Upgrade zu OXID eShop PE und EE ohne
rw .A W p . . ^ i t U r
Datenverlust mglich
nd
W # M ^K M l(M IM M r# 4 l
Funktionsbersicht der Community-Edition
( a a l y i t o M Md
feudw t
Ein weiterer Schwerpunkt von oxid-e-Sales liegt in der Web 2.0-Anbindung

N fc a uu
M agento h at einige Funktionen zu bieten, die m an nicht bei allen Konkurrenten findet.
Ur x a i, O
w l * M W
Die Enterprise-Edition schlielich liefert verbesserten Support und weitere Funktionen, die in der Communi ty- und der Professional Edition nicht enthalten sind.
Highlights
wie beispielsweise die Firma welance, die sich vor al lem mit der Einrichtung des Shops beschftigen. Hier fallen schon fr die Community-Edition Kosten von 5000 aufwrts an. Die Vorteile eines Magento-Shops sind die laut Hersteller sehr hohe Leistungsfhigkeit und die umfangreichen Funktionen. Fr kleine ShopBetreiber scheint Magento allerdings ein wenig ber dimensioniert. Dafr ist die Community-Version von Magento eine der umfangreichsten im Vergleich zur Konkurrenz. Sie lsst sich fast beliebig erweitern. Die Kosten fr den Support hngen stark vom jeweiligen Projekt ab. Eine Schwierigkeit war bisher, dass Magento fr den deutschen Markt nicht optimal konfiguriert war, da beispielsweise einige Zahlungsarten fehlten. Seit dem 7.3.2013 gibt es ein vorkonfiguriertes Paket mit dem Titel magento.de, was optimal auf den deutschen Markt zugeschnitten ist.
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-/Mandantenfhigkeit (Subshops) Sprach- und Landerverwaltung B2C- und/oder B2B-Fhigkeit 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 ausbaufhig Skalierbar fr knftige Anforderungen Performant, hochverfugbar und sicher
Zu den Funktionen, die nur die Enterprise-Edition enthlt gehrt beispielsweise die Mglichkeit eines M ulti- channels
28
webdesigner 04/2013
m dpunkt.web
Die Kosten fr Support belaufen sich bei oxid-esales auf mindestens 49 Euro pro Monat in der Community Edition. Fr die anderen Versionen lsst sich das nicht so genau sagen, denn hier hngen die Kosten stark vom Projekt ab.
Modfield e-commerce
Bei der Berliner Firma Modfield e-commer ce handelt es sich auch um eine OpenSource-Lsung. Modfield e-commerce legt besonderen Wert auf die einfache Installati on. Die Kosten fr den Support knnen nicht pauschal benannt werden und rich
Simon Widjaja Lebendige Webseiten mit Adobe Edge Animate
Gambio
Das Open-Source-System der Bremer Gam bio GmbH ist eines der gnstigsten Shop systeme. Fr 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 lsst sich der Shop schon recht indivi duell gestalten. Wer mit dem StandardTemplate nicht zufrieden ist, der kann unter zahlreichen kostenpflichtigen Templates whlen. Der Support hlt sich mit Kosten von 149 Euro pro Jahr auch fr die Betreiber von kleinen Shops in einen gut zu finanzie renden Rahmen.
ten sich nach der Gre des jeweiligen Pro jektes.
2013,238 Seiten 33,90 (D) ISBN 978-3 - 86490 - 025-9
D ie H a u p tv o rz g e d ie s e r V e rs io n : Die "gesetzlichen M indestanforderungen' werden er M t. wie Abzeichnen der D atenschutzerkJ*ung, W iderruf* und AG8* Unk bcm Checkout (Abschluss des Bestellvorgangs) Angabe de* Lieferzeit, autom jbsches M tsenden des W iderrufsrechtt und der Signatur m der B e ste i E-M al. e tc. W3C XKTML-vahdes Standardtem ptate Der Einbau vieler ntzlicher Funktionen erleichtert des tn kau fen und das Adrr*mstneren des Shops. Fert>3 im plemenberte Sochopt>nr*erungsmodif*at>onen (SC O ) smd standardm ig vorhanden. double*opt n fr E - M jJ (ab v l.0 3 ), des bedeutet, die Kontrote der Cmad Addresse beim Registrieren verringert Fehler be der E rg e b e . Konto lschen Funktion fr den Kunden (et 1.03) - Zogen S*e w elche Bedeutung T n vatsp h are" fr Sie h at, bieten Sie thren Kunden < > e Mogbchket Ih re Konten setost zu laschen.
PhoneGap
Marcus Ross PhoneGap
2013,248 Seiten 29,90 (D) ISBN 978-3 - 89864 - 824-0
Das Googlebase Export*M odul m it V ersendkosten erfllt die rechtfcchen Anforderungen

SCO - Suchm aschnenopbrrierungen (M etatag s, Sh op Stat URLs, CSS-Tem plate) smd fertig m plem enbert und standardm ig vorhanden. W ichtige S^ h e rh e itsu p d Jte s(t) sind eetgebaut und w eiter entw ickelt.
S
------ - r j
D*e TW ckbo* b ie te t em e 'S ta te o f the A rt DarsteCung* Ihrer ProdcAtbader.

Shop Dashboard die berarbeitete start.php fr den Admin
v/ ulfimAcchM ttftd Aut*}an -m m
sorgt fr leichte Adm inistration.
ml
SuCif
De S chne*e und Einfache Instattationsroutine sorgt dafr, dass M i sofort los legen knnen.
Aktuelle Zahlungsmodufte wurden ettegnert (PayPa, Sofortuberweisung, Moneybookers. e tc .) Der Shop wurde von S o fo rtiib e rw cK u n g .d e zertifczsert.
T frt{
Node.js & Co.

Golo Roden Node.js & Co.
IXnac* *
IN n tc +*+
mUgn
jto
LpaA (r B E in
S 'S V y
CCV M U ld d * * k
siehe: Kbck m ch und noch vieles mehr L e s t but not le a s t: Je d e r, d er d ie m od Jfled eC o n tm erce Shop-voftwArc o ln v t / l, s o llte d s An w en d er hnndburh vo n DokuM ^n ken n en . Da Dokiftfan emer der Entw<lder m diesem Projekt st, sind alte m der Anleitung enthaltenen Bugfixes m der m odifed eCommerce Shopsoftw are bereits en g earb eitet' Hier der Link iu r aktuellsten Version des Anwenderhandbuches: Kftck mich
S l U n w
f I 11 r X m < k ^ n u i i i i A T A *> U t W to U y t i Ac.'< 9 iDd A M m u k } (k t B M t ih U la i
2012,334 Seiten 32,90 (D) ISBN 978-3 - 89864 - 829-5
V vrfto* ten M m > .m o w kKwm www wi V*

S 'S Hwiw i > i
O
b
im
Knm w iiiid N a
M i f w u C w iiiiw v IMI
Die Highlights von Modfield e-commerce
^
V
S
Wrp6 Wh A#tA*ewwtanQen Wifln*** CCIAMC Ujrugtm* SytfAi *CMS

W i y w w v%'crnaMr
Eine groe Strke von Modfield ist die sehr gute Anpassungsfhigkeit des Shopsystems. Es lsst sich sehr leicht an die Vorstellungen des Anwenders angleichen. Bei Modfield e-commerce handelt es sich um eine vollkommen unabhngige Weiter entwicklung des renommierten Shopsys tems xt-commerce. Viele der Module fr Modfield e-commerce sind nach wie vor mit
u tw p i A d i w ^ e w c f i
Stefan Koch JavaScript
V V W k K^< c rU fc a ll* * t r > 4CufrO iya* IW U .*

V B ij Iw G*4>*%*ri
wr
6. A u fla g e 2011,476 Seiten 39,90 (D) ISBN 978-3 - 89864 -731-1
V ^
JffOio-m% Uoqj w Adfe-o icft t Al*i
y/ +/ f y w
I
FtmkUm
/ Nmôdwittcn
V F ine flw
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 abhngig.
rm
dpunkt.verlag
Ringstrae 19 B D-69115 Heidelberg fon: 0 62 21 / 14 83 40 fax: 0 62 21 / 14 83 99 e-mail: bestellung@dpunkt.de
M ultifunktionalitt wird bei Gambio grogeschrieben.
www.dpunkt.de
RATGEBER
ShoD svstem g j p^Veraleich
Hersteller Produkt Vertrieb Systemvoraussetzungen: PHP-Version MySQL-Version erforderlicher Webspace anfallende Kosten: Lizenskosten Kosten fr Support Grundfunktionen Kundengruppen Mehrsprachigkeit Multi-Shop-Fahigkeit Plugin-Management Kategorien und Unterkategorien Produktvarianten Suchfunktion Schnittstellen Warenwirtschaftssysteme Preissuchmaschinen Versand/Versender SEO-Optimierung Title-Tags Meta-Discription Caching Marketing Newsletter-System Facebook-Integration Gutscheinmodul Cross-Selling Sonderangebote Statistiken Shop-Besucher Umsatzstatistiken Artikel/Kataloge Maximale Artikelanzahl Anzahl Bilder pro Artikel Filter Lagerverwaltung Downloadbare Produkte Layout und Design Templates verfgbar Custom Design leicht anpassbar Zahlungsarten PayPal Click&buy per Sofortberweisung Besonderheiten Rechnung/Lieferschein per PDF als E-Mail zustellbar? Gibt es eine CMS-Funktion? unbegrenzt unbegrenzt unbegrenzt unbegrenzt vom Projekt abhngig unbegrenzt

Magento Magento Communitiy Magento Enterprise Magento GmbH und Co KG Magento Go
5.2.13 bis 5.3.15 4.1.20 oder hher 5 GB
5.2.13 bis 5.3.15 4.1.20 oder hher 5 GB
5.2.13 bis 5.3.15 4.1.20 oder hher 5 GB
ab 5000 keine Kosten
ab 14420 Dollar/jahr vom Projekt abhngig
Mietshopsystem, ab 15 vom Projekt abhngig
Keine Begrenzung

Keine Begrenzung

Keine Begrenzung

sehr gut beliebig viele fast unbegrenzt
alle relevanten Systeme alle relevante Systeme alle groen Anbieter
alle relevante Systeme alle relevante Systeme alle groen Anbieter
30
webdesigner 04/2013
RATGEBER
Shopware Community Edition Professionei Edition Shopware AG Enterprise edition eStart
Cosmoshop ePro Zaunz Publishin GmbH eMax
Hher als 5.3.2 Hher als 5.1.0 5 GB
egal egal 500 MB
egal egal 500 MB
egal egal 500 MB
Keine Kein Support
995 49-99
9.995 49-249
795 1,50%
1.995
3.325 2,50%
2%
keine Begrenzung

Keine Begrenzung

keine Begrenzung

250

1000

keine Begrenzung

gut belieibig viele fast unbegrenzt
gut beliebig viele fast unbegrenzt
gut beliebig viele fast unbegrenzt
sehr gut 250 fast unbegrenzt
sehr gut
sehr gut belieibig viele fast unbegrenzt
1000
fast unbegrenzt
alle relevante Systeme alle relevanten Dienstleister alle groen Anbieter
unbegrenzt unbegrenzt
250 unbegrenzt
1000
unbegrenzt
50000 unbegrenzt
04/2013 webdesigner
RATGEBER
Hersteller Produkt Vertrieb Systemvoraussetzungen: PHP-Version MySQL-Version erforderlicher Webspace anfallende Kosten: Lizenskosten Kosten fr Support Grundfunktionen Kundengruppen Mehrsprachigkeit Multi-Shop-Fahigkeit Plugin-Management Kategorien und Unterkategorien Produktvarianten Suchfunktion Schnittstellen Warenwirtschaftssysteme Preissuchmaschinen Versand/Versender SEO-Optimierung Title-Tags Meta-Discription Caching Marketing Newsletter-System Facebook-Integration Gutscheinmodul Cross-Selling Sonderangebote Statistiken Shop-Besucher Umsatzstatistiken Artikel/Kataloge Maximale Artikelanzahl Anzahl Bilder pro Artikel Filter Lagerverwaltung Downloadbare Produkte Layout und Design Templates verfgbar Custom Design leicht anpassbar Zahlungsarten PayPal Click&buy per Sofortberweisung Besonderheiten Rechnung/Lieferschein per PDF als E-Mail zustellbar CMS-Funktion
Gam bio Gabio Shopsoftware Gambio GmbH
plenty markets plenty markets professional plenty markets professional
plenty markets gmbh
5.1 egal mindestens 50 MB
Version 5.3, fr User Interface kein my SQL hngt vom Projekt ab
Version 5.3, fr User Interface kein my SQL hngt vom Projekt ab
Keine 149 Euro pro Jahr
Mietshop 0,99 pro Min
hngt vom Projekt ab hngt vom projekt ab
keine Begrenzung
mindestens 20000
unbegrenzt
Sehr gut beliebig viele fast unbegrenzt
sehr gut sehr gut fast unbegrenzt
sehr gut sehr gut fast unbegrenzt
alle relevanten Systeme alle relevanten Systeme alle groen Anbieter
alle relevanten Systeme alle relevanten systeme alle groen Anbieter
webdesigner 04/2013
RATGEBER
Oxid E-Sales Community Edition Professionei Edition Oxid E-Sales AG Enterprise Edition
Modfield Modfield e-Commerce Shopsoftware Modfield e-Commerce Shopsoftware
5.2.10 oder hher 5.0.33 oder hher mindestens 100 MB
5.2.10 oder hher 5.033 oder hher mindestens 100 MB
5.2.10 oder hher 5.0.33 oder hher mindestens 500 MB
5.x bis 5.4.x 1/4/2002 ab 500 MB
keine Ab 59 /Monat
2.990 hngt vom Projekt ab
auf Anfrage hngt vom Projekt ab
keine hngt vom Projekt ab
keine Begrenzung

keine Begrenzung

keine Begrenzung

keine Begrenzung
sehr gut beleibig viele fast unbegrenzt
sehr gut belieibig viele fast unbegrenzt
gut gut fast unbegrenzt
alle relevanten Systeme alle relevanten Systeme alle groen Anbieter
umbegrenzt unbegrenzt
04/2013 webdesigner
RATGEBER
von Jrgen O rtm ann

Ohne klar definierte Ablufe sind Webprojekte kaum zu bewltigen. Wir zeigen Ihnen, welche Stufen ein solches Projekt immer durchluft und worauf Sie dabei zu achten haben.
ner schneller den bergang von der Idee hin zur prakti schen Umsetzung schafft. Ist erst einmal definiert, wie
.. AruxJyse
I
a
|
Ko
n z e p t i o n i e r u n g
das Ergebnis aussehen soll, lsst sich dieses als klar umrissenes Ziel auch besser und schneller erreichen und man vertndelt nicht zu viel Zeit mit der Ideenfindung und Konzeptionierung. Und was fr die Arbeit des einzelnen Web Designers gilt, ist fr die Arbeit im Team umso wertvoller. Der Workflow wird hier zum zentralen Gerst, anhand dessen die ein
r \
|
zelnen Aufgaben klarer definiert und sinnvoll verteilt
Unsetzung
werden knnen. Neben dem hier vorgestellten Workflow, der sich als grundlegender Ansatz fr alle Arten von Webprojekten versteht, gibt es natrlich auch speziell fr die Umset zung konkreter Projekte - ganz zu schweigen von Work flows fr den Umgang mit bestimmten Anwendungen - die dabei helfen, die Arbeit mglichst effektiv zu ge stalten. Der hier vorgestellte Workflow soll die Arbeit an einem Webprojekt im Allgemeinen abbilden und kann bei Bedarf natrlich auf das jeweilige Projekte angepasst werden.
T e s t i n g und Korrektur
Ob bewusst oder unbewusst, diese Pha sen durchluft praktisch jedes Webprojekt.
icht nur bei der Arbeit im Team sind koordinier te Arbeitsablufe gefragt. Auch wer als Einzel kmpfer unterwegs ist, sollte die verschiedenen Der Workflow lsst sich in acht grundlegende Stadien unterteilen, die im Folgenden nher erlutert werden sollen. Zeitlich fllt die Gewichtung der einzelnen Stadi en sehr unterschiedlich aus. So ist die Definition des Pro jekts sehr hufig bereits mit Beauftragung durch den Kunden und dem vorangegangenen Beratungsge sprch im Wesentlichen abgeschlossen. Die Umsetzung des Entwurfs dagegen drfte den grten Teil der Zeit einnehmen.
Die einzelnen Stadien des Workflows
Stadien bei der Gestaltung von Webseiten kennen und
ganz bewusst abarbeiten. Dadurch knnen ein Groteil der Fehler und mgliche Missverstndnisse zwischen Kunde und Web Designer vermieden werden. Auch bei der parallelen Bearbeitung mehrerer Projekte sind gere gelte Ablufe 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 nchsten 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 Ablufe dafr, dass man als Desig
Projektdefinition und Analyse: Das Projekt richtig erfassen

Am Anfang des Projekts stehen die Definition und Ana lyse. Diese besteht darin, sich gengend relevante Infor
34
webdesigner 04/2013
RATGEBER
mationen zu sammeln, um eine Grundlage fr alle weite ren Schritte zu schaffen. Dieses Stadium besteht vor al lem aus einem oder mehreren ausfhrlichen Gespr chen mit dem Kunden, die vor und nach der Beauftragung stattfinden. Als Designer sollten Sie sich eine Checkliste fr diese Gesprche bereithalten, in der alle relevanten Fragen zur Beauftragung aufgefhrt 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 mssen, damit Sie das Projekt fr ihn zufrieden stellend erledigen knnen. Diese Aufgaben umfassen hauptschlich: Die Absicht des Kunden: Was hat der Kunde mit der fertigen Website vor? Was genau verspricht er sich da von? Vorstellungen und Wnsche des Kunden: Welche konkreten Vorstellungen hat der Kunde von der ferti gen Website? Gibt es mglicherweise eine bestimmte Farbe, die in dem Design immer wieder Vorkommen soll? Zu verwendende Technologien und Standards: In der Definitions- und Analysephase sollte auch ber mg licherweise zum Einsatz kommende Technologien und Webstandards nachgedacht werden. Dies ist ins besondere mit Hinblick auf die Ausbaufhigkeit der fertigen Website interessant. Webtechnologien und Standards verndern sich rasend schnell. Noch vor wenigen Jahren war zum Beispiel XHTML in aller Mun de, heute gehrt 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 untersttzen, indem er ihm Medien oder Materialien, wie etwa Werbebroschren oder das Fir menlogo in digitaler Form zur Verfgung 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 spteren Verlauf des Projekts immer wieder zur Kont rolle herangezogen werden. In diesem Zusammenhang haben sich Roadmaps als u erst ntzlichesTool bewhrt. In einer Roadmap werden alle Vorgaben erfasst uns erlutert. In den weiteren Stadi en kann die Roadmap dann verwendet werden, um dar in die Zustndigkeiten festzulegen und Termine fr die einzelnen Teilaufgaben zu vergeben.
Tools fr Planung und Projektmanagement

Eines der wenigen frei verfgbaren ProjektmanagementTools ist GanttProject. DasTool hat aber einiges zu bieten und kann bei Bedarf auch mit Projektplnen umgehen, die mit MS Project erstellt wurden. Einzelne Aufgaben knnen hier in einen Zeitplan eingetragen und mit Prio ritten versehen werden. Auerdem lassen sich in Gantt Project die Abhngigkeiten der Aufgaben untereinander darstellen.
IPrcyert Edit View Itsks Resources Help
yy
a&dPti
>
Z o o m h i zocr O u t
I A*XH2012 Oggi
* I Prtw ui | N ex t w r cnocH cm* | Sa*
Test
o 0 * *
V
NcwUlk Tesk Properties...

Unmdent
CtHT Alt* Entef
Indent Wp Oown IM r Unlink All* Up AftOowf
4
0
A y
r X O
Cue
Pacte Oektc TtsL.. CMrt options M it ponfo MrviWijy*
Ctf1*X Ctil-C CtH.V Dekt
dp Copy
RSS
bren
Mit dem kostenlosen SmartTools Projektplan fr 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 * _ _ __ m
Urm.
- *"
1 * a / *
n
**
04/2013 webdesigner
35
RATGEBER
ZCOPE
Horn ( 2 3 5 3 3 2 3
F a lls tu d itn
P re is
Anm eldung
HiiTo & Su p p o rt
Forum
blog
Alles was Sie fr erfolgreiches Projektmangement brauchen. Den berblick behalten

Jetzt kostenlos loslegcn! fri 3MinUrn vn S** r*yi> U nrrt
und legen bereits t w erstem
P ro * an
Was 5# mitZCOPC alles tun

knnen D e n b e rb lic k b e h o tte n
9%
Q D tcr fci
148,16
9
9
A u fg a b e nvctw accn
Zeilen errn
Trrm tnr fr% n*grn
b u d g e tsvenenen
Di4ajnw4v UriMrn
sz.
er
^fnrm tir> r^n nini^^n
Z C O P E Academy
k f l
phase gesammelten Informationen sortiert und in einen Zusammenhang gebracht, der fr das anstehende Pro jekt optimal ist. Dabei knnen zunchst mehrere alterna tive Konzepte entwickelt werden, von denen man dann in einem weiteren Schritt das optimale Konzept aus whlt. Durch die Konkretisierung wird in diesem Stadi um bereits auf Probleme eingegangen, die bei der sp teren Umsetzung erfahrungsgem auftreten knnen. Die wichtigsten Tools fr das Erstellen von Konzepten im Webdesign sind Dummies und Wireframes. Diese die nen vor allem zur Veranschaulichung mglicher Layouts fr die Webseite. Neben Papier und Bleistift kommen in dieser Phase hufig Bildbearbeitungs- und Screendesignprogramme, sowie vorgefertigte und anpassbare Wire frames zum Einsatz.
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.getzcope.com/de). Diese besitzen den Vorzug, dass sie prak tisch auf jedem Rechner mit Internetzugang verfgbar sind und somit alle Beteiligten stets auf jeweils aktuellste Version zugreifen knnen. 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.
Erstellung eines Konzepts: Die Ideen nehmen Form an

Dreh- und Angelpunkt jeder professionellen kreativen Arbeit ist das Konzept. Das Konzept bildet die Brcke 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 tchtig, er zeigt aber, wie das Ergebnis konkret aussehen knnte. Neben dem Aussehen der Website knnen in dem Entwurf auch grundlegende Funktionen verdeut
36
webdesigner 04/2013
RATGEBER
licht werden. So ermglicht das Screendesignprogramm Adobe Fireworks es sogar, einen Entwurf als interakti ves PDF zu exportieren. Das PDF enthlt dann zum Bei spiel funktionierende Links zu Unterseiten und exter nen Seiten. Der Entwurf ist somit tatschlich 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 Prsen tation beim Kunden. Die Prsentation stellt bereits das nchste Stadium des Workflows dar, jedoch unterliegt der Entwurf damit bereits der Anforderung, dass er dem Kunden grundstzlich Zusagen sollte. Dadurch orientieren sich alle Arbeiten der Entwurfsphase be reits an den Wnschen und Vorstellungen des Kunden. Durch die Erfahrung aus frheren Projekten knnen aber auch Ideen mit einflieen, die der Kunde nicht ausdrcklich gewnscht hat oder von deren Nutzen der Kunde bei der Prsentation noch berzeugt wer den muss. Bei der Umsetzung geht es darum, den Entwurf ein schlielich des Kunden-Feedbacks aus der Prsentation in eine lauffhige Website zu verwandeln. Wichtig ist hier, dass bei der Arbeit im Team alle Aufgaben und Zu stndigkeiten klar verteilt sind und dass den Beteiligten alles zur Verfgung steht was sie brauchen. Darunter fllt die bentigte Software, Farbvorgaben, Schriftarten, aber auch Hilfsmittel wie Stylsheet-Sprachen, die richtig be herrscht werden mssen. 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 fr 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, unntige Fehler zu vermeiden und somit den Aufwand fr die Testing-Phase kurz zu halten.
Umsetzung: Der handwerkliche Teil
Prsentation beim Kunden: Die Bewhrungsprobe

Die Prsentation ist die Bewhrungsprobe fr den Ent wurf. An diesem Punkt entscheidet der Kunde ob er mit dem Entwurf zufrieden ist. Zudem kann der Kunde n derungswnsche 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 prfen und gegebenenfalls zu ndern oder an die Gegebenheiten anzupassen. Der Entwurf sollte daher klare Hinweise auf die endgl tige Version derWebsite liefern. Im Entwurf mssen alle getroffenen Entscheidungen der Definition und Analy se sowie des Konzepts deutlich werden. Die im endgltigen Design verwendeten Farben, das Layout und die Vorzge des gewhlten Designs soll ten mglichst konkret im Entwurf dargestellt werden, damit sie bei der Diskussion gezielt diskutiert werden knnen. An dieser Stelle bietet sich fr den Kunden die Gelegenheit, letzte grere nderungswnsche zu uern. Sofern es sich um kein greres Website-Projekt han delt, besteht die Prsentation in der Regel aus einem Austausch per Email und Telefon. Der Kunde erhlt PDFs oder Bilddateien, die den Entwurf oder verschie dene Varianten des Entwurfs zeigen. In einem Gesprch kann dann das weitere Vorgehen bei der Umsetzung und eventuelle nderungswnsche besprochen wer den. Die nderungswnsche sollte mglichst exakt schriftlich festgehalten werden.
Testing und Korrekturphase: Die Generalprobe

Webseiten sind, hnlich wie Softwareprodukte, auf ein umfassendes Testing angewiesen, da trotz grter Sorg falt immer wieder Unvorhergesehenes auftreten kann und in aller Regel auch auftritt. Zwar mssen keine wo chenlangen Alpha- und Beta-Stadien durchlaufen wer den, aber ein Testing auf den gngigsten Browsern und den wichtigsten Vertretern mobiler Endgerte ist uner lsslich. Das Testing soll zum einen zeigen, ob alles so umgesetzt wurde, wie es beabsichtigt ist, zum anderen Standardmig sollten folgende Dinge getestet werden. -Vergrern und Verkleinern der Schriftgre: Beim Ver kleinern oder Vergrern der Schriftgre 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 fr op timale Sicherheit zu gewhrleisten und damit es bei sp teren Bearbeitungen nicht zu vermeidbaren Problemen kommt. Fr diese Prfung eignet sich das Web-Developer-Add-on des Firefox-Browsers sehr gut. -Alternativtexte von Bildern: Indem Sie die Darstellung von Bildern unterdrcken, knnen Sie berprfen, ob fr jedes Bild ein geeigneter Alternativtext hinterlegt wur de. Dies ist nicht zuletzt aus SEO-Sicht ein wichtiger As pekt. -Die Seite ohne CSS: Whlen Sie im Web-DeveloperAdd-on die Funktion Disable Styles", um das Laden des
04/2013 webdesigner
37
RATGEBER
CSS zu unterbinden. Dadurch knnen Sie prfen, ob die Seite auch ohne Stylesheet noch nutzbar ist. -Skripte abschalten: Nutzen Sie ebenfalls das Web-Developer-Add-on, um Skripte abzuschalten. So knnen Sie die Zugnglichkeit der Seite prfen. Viele Internetnutzer haben bei ihrem Browser zum Beispiel JavaScript oder Flash abgeschaltet. Die gefundenen Fehler und Schwchen mssen selbst verstndlich behoben und die Seite dann erneut getes tet werden, bis schlielich alles in einwandfreiem Zu stand ist. Erst dann ist die Webseite fertig und kann online gehen.
P*- M I farm*
. y * #
Tools fr das Wireframing

Fr das Wireframing gibt es inzwischen eine ganze Reihe praktischer Tools, sodass diese Aufgabe nicht mehr mhsam mit Photoshop umgesetzt werden muss. Unter anderen sind hier justinmind Protoyper
(www.justinmind.com, Pro-Verison kostenpflich tig) und das OnlineTool Protoshare (www.protoshare.com, kostenpflichtig) sehr interessant. Zudem
steht mit Wirefy eine flexibel anpassbare Beispielseite zurVerfgung.
Vrw frtwvt Tdr

A C ^
: >30Q *
a
oiwjjcts
IQnftiwrij t\
I f'.u'ouw i yrvU t)
Loram iptum
Scrn 1
u u
a
tot trvpvtn ai *
___ . . . . . . . .
\9
E> vm*
P j jia i2
*
iflranpun
t 4___________ 'V xf\JertJT
TOt
/ rii
Te.t................
o .
tr.'1 Z I
Tools fr 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 berprfungen durchfhren.
Browser: IE, Firefox, Chrome/Safari, Opera

i
Die fertige Seite sollte in den wichtigsten aktuellen Browsern einwandfrei dargestellt werden. Zu diesen zhlen der Mozilla Firefox, Google Chrome oder Apple Safari als Vertreter eines Webkit-Browsers, der Internet Explorer und der Opera-Browser.
webdesigner 04/2013
RATGEBER
Web Developer-Add-on
Das Web-Developer-Add-on steht fr den Firefox- und den Chrome-Browser zur Verfgung. Mit diesem Tool lassen sich Webseiten sehr analysieren.
te ntuat*tb*&B
Firebug
Etwas umfangreicher und leistungsfhiger als das Web Developer-Add-on ist die Browser-Erweiterung Firebug, die ebenfalls fr Firefox und Chrome verfgbar ist. Fire bug eignet sich zudem auch fr andere Webentwicklungsaufgaben.
m m r n ter
designer
Wtommen
Mim O i *>V OOM tk-j*.* <.* KO* . M A * I I I I
iw e b
Lightroom<f
N
A
Oh rm M
jP k t * m Im M (># (KM
-0 4 3
^ ---- .
( N I I1 H tl
9 IIOTn u r i l ' U U U
*r** * >** * iw
i i f t '
n .*f 0HI44
M 1.
XAMPP
Sofern man ber keinen Testserver verfgt, ist XAMPP eine sehr gute Lsung, um auf einem Rechner lokal eine Testumgebung einzurichten. Die Installation ist etwas umstndlich, XAMPP erfllt dafr aber seinen Zweck hervorragend.
W i k o m m e n u X A M P P f r W i n d o w s !
Im
H
I.
__________
Hy XAMPP fr Windows
H v r j l k b v N C lw tk v w n \ li. X A M P P K l vrfultf* v i d i W ijiv v v m R v i l w v r Iii> llltv rl1
* A Qr+M thank yrut tn h.w Attck14 7 tor ttu\ n+w tin 0 Contrat P,>n+H M i t
III
7 *
Rckblick:
E ) XAMPP fr Windows
XAMPYMftafcJt
t J iW m L t v K i t k i !
. ...
h t * l r v t .
Was war gut und was war nicht so gut?

Mit der Auslieferung ist das eigentliche Projekt abge schlossen. Insbesondere wenn es sich um ein greres 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 knnen Lsungsanstze fr aufgetretene Schwierigkeiten entwickelt werden, die idealerweise zu besseren Herangehensweisen bei zuknftigen Pro jekten fhren.
wvkJm A ^ l i n u i v U i i u n U M u J Im
-.au
j _X j
mo:
' vi j |
> ~6#V*I. Cor>a
I4
i'M
ftttZMil y jt jc jr M n r o y v m
4 a: io
u 9 t ia 14 3f 1 i pffvjtfJ *4 9 f 18 f w*rj
j* * w rc u ry l jw cur/]
U x tfL n n S c r x tQ cfkrrl yrt f.t

trim/
Starte^rorcnm M ereir* i
04/2013 webdesigner
39
TUTORIAL
Best Practice fr flexible Websites von Jrgen Ortm ann

Responsive Design wird hufig als das Nachrsten einer Nutzeroberflche fr mobile Endge rte verstanden. Dabei knnen bereits beim Coden von Desktopseiten verschiedene Dinge implementiert werden, um das Design mglichst flexible zu halten.
Die Ausgabe a u f verschiedenen Ausgabege rten sollte bereits bei der Gestaltung von Webseiten bercksichtigt werden, selbst wenn diese zunchst als reine Desktopseiten konzipiert werden.
eit der Einfhrung von Smartphone und TabletComputer ist im Web Design dasResponsive De sign" in aller Munde. Und wie bei allen neuen
erdenkliche Displayformat optimal fr die Darstellung der Inhalte nutzt. Dies betrifft sowohl das Layout einer bereits vorhandenen Website, die bereits existiert hat, als es noch keine Smartphones und Tablets gab, als auch von Grund auf neu ge staltete Webseiten, bei denen die mobilen Endgerte und deren Bedienkonzepte von vornherein bercksichtigt werden knnen. Grundlage fr das Responsive Design ist insbesondere die Mglichkeit, 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 endgltig pass. In diesem Tutorial soll eine Herangehensweise vorge stellt werden, die als fester Bestandteil in jedes neue
Web-Trends gibt es auch hier so manches Missverstnd nis. Worum geht es beim Responsive Design eigentlich? Um das Erstellen von Webseitenablegern fr mobile Endgerte? Oder um das Gestalten von drei Versionen fr Desktop-Monitor, Tablet-Computer und Smartpho ne? Eigentlich nicht. Das Wesentliche des Responsive Designs ist die Anpassungsfhigkeit 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
40
webdesigner 04/2013
TUTORIAL
Webprojekt einflieen sollte. Bei den hier vorgestellten Techniken handelt es sich sozusagen um Best Practices, durch die eventuell spter auftauchende Probleme be zglich der weiteren Optimierung fr mobile Endgerte vermieden werden knnen. Ist das Layout flexibel ge nug, wird sich zum Beispiel das Anpassen von Schaltfl chen fr die Bedienung mit dem Finger ebenfalls weni ger problematisch gestalten.
<nav> <ul> < lix a href="#" title="Home">Home</ax/li> < lix a href="#" title="About">About</ax/li> c lix a href="#" title="Projekte">Projekte</ax/li> < lix a href="#" title="Kontakt">Kontakt</ax/li> </ul> </nav> <div id="banner"> <img src="images/bildl .png" alt="Banner" />
Die flexible Gesamtbreite

Die Grundlage fr ein anpassungsfhiges Layout ist eine Gesamtbreite, die sich an die Breite des Viewports an passt. Dazu mssen im Wesentlichen alle Inhalte von ei nem Wrapper mit flexibler Breite umschlossen werden und die Breite fr Inhalte und Spalten muss ebenfalls flexibel angelegt werden. Die Mglichkeiten dazu beste hen in CSS schon lnger, sie sind nun aber wichtiger denn je. Als Beipiel dient eine Website, die ber eine Na vigation, ein groes 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=devicewidth, 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 >
</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 wrde der Content bei Desktop-Monitoren ber die gesamte Bild schirmbreite verteilt werden, was nicht nur unschn ist, sondern auch die Usability beeintrchtigt. Zudem ist eine flexible Breite fr Bilder ungeeignet, da diese dann verzerrt oder gestaucht dargestellt wrden. Um dies zu verhindern, wird fr Bilder einfach eine Gr e von 100 Prozent festgelegt. /* Struktur*/ #wrapper{
.A.
Die Desktopseite besitzt eine m axim ale Breite. Der Wrapper, der den gesamten Content umschliet, ist in der Breite begrenzt, dam it die Inhalte nicht zu sehr in die Breite gezogen werden.
04/2013 webdesigner
41
TUTORIAL
width: 96%; max-width: 920px; margin: auto; padding: 2%;

}
#banner img { width: 100%;

}
#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;
}
Bei den Tablets erhlt m an in unserem Beispiel die in der Breite zusammengeschobene Variante des Desktop-Layouts.
/* Navigation */ header nav{ float: right; margin-top: 40px;

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

}
Das Querformat a u f einem Tablet lsst etwas mehr Platz in der Breite. Je nach Displayauflsung htte eine zustzliche Spalte m it einer Seitennavigation und/oder Such leiste hier noch Platz.
#skipTo { display: none;

}
#skipTo li { background: #blfffc;

}
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 fr die grte Darstellung des Layouts die Breite des Containers angemessen ausfllen kann. Wenn Sie die Seite mit dem Resizer-Bookmarklet
/* Banner*/ #banner{ float: leftmargin-bottom: 15px; width: 100%;

}
(http://lab.maltewassermann.com/viewport-resizer/,
fr alle gngigen Browser verfgbar auer Internet Explorer)
webdesigner 04/2013
____________TUTORIAL
testen, werden Sie feststellen, dass sich das Bild an jede beliebige Bildschirmgre anpasst. Erst ab der 100%-Ansicht wird das Bild nicht mehr vergrert. Groe Bilddatei en sorgen jedoch fr eine verlngerte Ladezeit. Gerade bei mobilen Internetverbindungen liegt die Bandbreite deutlich unter der von Festnetzanschlssen. Unter Um stnden kann es sich daher lohnen, das gleiche Bild in mehreren Gren zu hinterlegen und je nach ViewportBreite das Bild in der geeigneten Gre laden zu lassen.
padding: 10px; text-align: center;

} }
Geschrumpftes Desktop-Layout vermeiden

Wenn Sie die Seite auf verschiedenen Gerten testen, kann es sein, dass auf manchen Gerten trotzdem die Desktop-Version geladen und stark verkleinert dargestellt
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 beschrnkt, sodass ein mehrspaltiges Lay out nicht besonders nutzerfreundlich ist. Gleiches gilt auch fr 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 fr dieses Layout hat sich ein Wert von 480 Pixeln bewhrt. Dieser wird in dem Media Query festgelegt und mit dem #skipTo"-Tag ausgezeich net. Die beiden Spalten aus dem AbschnittDie maximale Breite als Limit" werden dabei kurzerhand untereinander aufgefhrt. 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 gefgt, der dem User den Sprung zur Haupt-Section ge stattet. /* Media Query V @media screen and (max-width: 480px) { #skipTo { display: block;
}
wird. Damit das Media Query immer seine Wirkung zeigt, sollte im Head der HTML die nachfolgende Zeile einge fgt werden. Diese Anweisung sorgt dafr, dass das Ska lieren grundstzlich unterbunden wird, indem die mini male und die maximale Skalierung auf den Wert 1.0 gesetzt werden. cmeta name="viewport" content="width=devicewidth, minimum-scale=1.0, maximum-scale=1.0"/> Smartphones bieten die geringste Displayb reite, sodass hier ein einspaltiges Layout die beste Lsung ist. Auch die Navigation wurde im Beispiel als Liste umgestaltet.
.a .
Fazit: Die hiervorgestellten Lsungsanstze

dienen dazu, das Layout mglichst anpas sungsfhig zu gestalten. Zwar sind Smartphone und Tablet die gngigsten mobilen Endge rte, aber die Hersteller zeigen sich uerst innovativ wenn es darum geht, den Nachteilen dieser Gerte, wie etwa das Fehlen einer ech ten Tastatur, mit neuen Lsungen 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 Mg 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 gewhnungsbedrftig. Jeder Entwurf beginnt als Skizze auf einem Stck Pa pier und jedes Wireframe ist zunchst ein star res Gerst, das in einem spteren Schritt aus gestaltet werden soll. Gestaltungsregeln, wie etwa der goldene Schnitt, sind beim Responsive Design nicht immer anwendbar, denn bei der automatischen Anpassung ndern sich auch die Verhltnisse der Elemente zueinan der. Jedoch hat eine Gestaltungsregel gerade beim Responsive Design besonders hohe Gl tigkeit: Form follows function - die Form hat sich nach dem Zweck zu richten.
Jk. Auch im Querfor m a t ist die Breite von Smartphone-Displays sehr beschrnkt.
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;
04/2013 webdesigner
43
TUTORIAL
Grafiken mit SVG und HTML5 erzeugen von Andreas Hitzig
Grafiken mit
S
SVG & HTML5 erzeugen

Dank HTML5 ist es inzwischen mglich, Grafiken mit Hilfe von SVG einfach zu erzeugen. Im Workshop erfahren Sie mehr ber die Vorteile und entwickeln die ersten eigenen Bilder.
VG war bis jetzt meist nur Insidern ein Begriff. Da hinter verbirgt sich eine Beschreibungssprache fr zweidimensionale Vektorgrafiken. Die Abkr
Auf einen Blick

Verwendete Software:
Texteditor Browser mit HTML5 Untersttzung
zung SVG steht dabei fr Scalable Vector Graphics, also skalierbare Vektorgrafiken.
Technisch gesehen ist SVG ein XML-basiertes Dateifor mat. Man bentigt somit lediglich einen Texteditor, um eine entsprechende Grafik zu entwickeln. Einer der zentralen Vorteile von SVG ist die Fhigkeit, die Gre der Darstellung zu verndern ohne dabei an Qua litt einzuben. Bei einem klassischen Grafikformat be merken Sie ab einer gewissen Vergrerung des Bildes deutliche Verpixelungen und damit auch einen sichtba ren Qualittsverlust. Da eine Grafik auf Basis von SVG bei jeder Grennderung neu berechnet wird, gibt es kei ne Ausgangsgrafik, welche den Standard setzt. Ein weiterer Vorteil ist die Mglichkeit, eine Grafik ohne greren 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 knnen
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>
A I
Die erste Grafik mit SVG

I Im ersten Schritt werfen wir einen kurzen Blick
</body> </html> In dieses Gerst einer HTML-Seite integrieren Sie im nchsten 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 anschlieend die Definition des Kreises. Dafr steht Ihnen ein eigenes Tag zur Verfgung, wel ches unter anderem die drei Parameter cx, cy und r fr
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 grnen Kreis mit ei nem schwarzen Rand. Fr 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 mglich, einen Kreis zu zeichnen. Dieser besitzt war noch keinen Rand und keine Fllfarbe, ansonsten jedoch bereits alle ge wnschten Eigenschaften. Die HTML-Seite dient zur Darstellung des Elements und
44
webdesigner 04/2013
TUTORIAL
Grafiken 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 gefllt.
nen nach auen. In unserem Beispiel mit dem Kreis nut zen wir den radialen Ansatz und versehen den grnen Kreis mit einem roten, der vom Mittelpunkt aus immer mehr verwssert und in den grnen Farbton bergeht. Der radiale Gradient wird immer von zwei defs-Tags um geben, welche die Klammer um die Definition bilden. Fr die Festlegung des Farbverlaufs bentigen 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 mchten, nutzen Sie dazu die Parameter cx, cy, fx und fy. Mit diesen legen Sie den ho rizontalen und vertikalen Startpunkt sowie die zugehri gen Endpunkte fest. Als zustzlichen Parameter haben Sie natrlich auch beim Gradienten den Radius des in neren Kreises. cradialGradient id="meinGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
Meine erste SVG G rafik
M it wenigen M itteln wird m it Hilfe von SVG ein Kreis erstellt.
Die gewnschte Farbe fr den Rand, dessen Breite sowie die Fllfarbe des Kreises setzen Sie ber die Parameter
stroke, stroke-width und fill.

Damit sieht die vollstndige Definition des grnen Krei ses mit dem schwarzen Rand dann wie folgt aus: <circle cx="200" cy="100" r="75" stroke="black" strokewidth="1"fill="green"/> <stop offset="0%" style="stop-color:red;" stopDa die Breite des Rands lediglich auf einen Pixel gesetzt wurde, ist dieser auch so gut wie nicht zu erkennen. Na trlich knnen Sie diesen auch breiter definieren und die Farben als HEX-Wert angeben. 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 ausgefllt 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%"> Sie knnen einem SVG Objekt individuell eine Farbe fr die Fllung und den Rand mitgeben. <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> opadty="100%"/> In unserem Beispiel verwenden wir wieder die Farbe Grn als Hauptfarbe fr den ueren Kreis und Wei fr den inneren. Die Festlegung der Farben erfolgt ber das stop-Tag.
Meine erste SVG G rafik
Grafik mit einem Muster versehen

Damit 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 Farbbergang 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 Farbber gang von links nach rechts statt, bei der zweiten von in
Im letzten Schritt wird die Form festgelegt, welche die Farbverlufe beinhalten soll. In unserem Beispiel bleiben wir bei dem zuvor definierten Kreis, mssen an dieser Stelle allerdings ein paar Anpassungen vornehmen. Sie
04/2013 webdesigner
45
TUTORIAL
bentigen fr die Definition nur noch die Koordinaten des Kreises. Alle weiterfhrenden 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.
jr c'**t
Wir wollen den Kreis, wie bereits beschrieben, sich um seinen Mittelpunkt drehen lassen. Dafr bentigen 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:
-I --- i ------ - -- _
Wertl beschreibt fr den Parameter from den Start der Rotation in Grad, fr den Parameter to das Ende der Rotation in Grad.
SVG Grafik mit Gradient

Ein Gradient erlaubt die genauere Festlegung eines Farbverlaufs.
Wert 2 und Wert 3 entsprechen der x- und der y-Koordinate des Drehpunkts der Animation.
<animateTransform attributeType="XML" attributeName="transform" type="rotate" from="0,200,100" to="360,200,100"
/"V Q Objekt mit Text versehen

\ J
Fr 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 fgen 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>
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 vollstndige 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 knnen Sie natrlich nach Belie ben verndern und auf diesem Weg die Animation lang samer oder schneller erscheinen lassen. Da Sie sowohl den Text als auch den Kreis animieren mchten, bentigen Sie eine zustzliche logische Klam mer um alle Elemente, die gedreht werden sollen. Dafr stellt Ihnen SVG das Tag <g> zur Verfgung,
Dieses legt ber die x- und y-Parameter den Startpunkt des Textes fest und formatiert diesen mit Hilfe des styleParameters. In unserem Fall erscheint der Text in weier Schrift und Schriftgre 18. Als Text soll der Klassiker Hello Welt" ausgegeben werden.
*' c . u w * ** * * * rvutrtf.'
p - c x
W ' w w *)
topi
SVG G rafik mit G radient

Sie knnen auch mehrere Objekte zu einem Gesamtob jekt kombinieren. Im Beispiel wird dem Kreis ein Text hinzugefgt.
( 1 1 Aw uuo b
M it Hilfe von Anim ation knnen Sie den Kreis drehen.
f \ A Objekt animieren
T "D a n k des zuvor angelegten Textes kann das Ob jekt im nchsten Schritt auch sichtbar animiert werden, Dazu nutzen wir den SVG-Befehl animateTransform.
jn Bewegungspfade festlegen
J Sie knnen ein Element nicht nur mit Hilfe von animateTransform bewegen, es gibt darber hinaus
46
webdesigner 04/2013
TUTORIAL
noch weitere Mglichkeiten. 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 fr Sie. <animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
Zeit fr den Gesamtdurchlauf wird 10 Sekunden festge legt, anschlieend fngt die Animation wieder von Neu em an. Durch den Wert indefinite des Parameters repeatCount wird diese Animation unendlich oft durchlaufen.
Die Definition des Bewegungspfads geschieht ber den Parameter path. Fr eine Bewegung bentigen Sie min destens zwei Koordinaten: den Startpunkt und den En depunkt. Im Beispiel wird unser Kreis von links nach rechts bewegt und wandert anschlieend automatisch wieder zurck. M it Hilfe einer Pfadan gabe kann ebenfalls eine Anim ation defi niert werden.
Fazit:
Das Generieren und Animieren von Objek
ten mit Hilfe von SVG ist zwar noch in den Kinder schuhen, lsst jedoch bereits recht umfangreiche Aktionen zu. Wie immer bei solchen Themen ist die Umsetzung innerhalb der verschiedenen Browser unterschiedlich weit vorangekommen. Whrend 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 vollstndig auf SVG verlassen, sondern immer auch eine Alternative in der Hinter hand haben, sofern die Animation zentraler Bestand teil der Webseite ist. Darber hinaus bleibt es span nend, SVG erlaubt m it wenigen Angaben die Definition eines Koordinatensystems fr den Bewegungsablauf. Eine weitere Alternative, wie Sie den Weg beschreiben knnen, 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-Koordinaten eines Punkts als Wertepaare mit, getrennt durch Semi kolons. <animateMotion values="0,0; 500,200; 200,500; 0,0" d ur=" 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 nchstes geht die Reise zu einem Punkt mit den Koor dination (500,200), dann weiter nach unten zum Punkt (200,500) und wieder zurck zum Ausgangspunkt. Als
04/2013 webdesigner
bis
wann
alle
Browser
Hersteller
die
grundlegenden
SVG Funktionalitten flchende
ckend untersttzen. Erst dann ist ein sinnvoller Ein satz des neuen Bildformats mglich.
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 mglich. Wie im Workshop gesehen, ist SVG eine Beschreibungs sprache fr 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.
47
WEB-GALERIE
Single Pages von Tobias Henke
Interessante Single-Pages
S
eiten ohne jede Unterseiten und damit auch ohne jede Navigation sind absolut in". Wir mchten Ih nen heute einige dieser Seiten vorstellen. Alleine
durch den Verzicht auf Unterseiten, wirken die Seiten zu nchst einmal relativ schlicht, aber dies ist zum Teil nur der erste Eindruck. Unser erstes Beispiel ist schon alleine dadurch eine sehr ungewhnliche Page, da der Besucher statt von Oben nach Unten von Links nach Rechs scrollt. Dabei erfhrt man zunchst, dass es sich bei der Seite um die Home page von Fotografen handelt, die sich darauf speziali siert haben, Flchen zu fotografieren. Je weiter man nach rechts scrollt, umso detaillierter werden die Angaben der Seitenbetreiber. Auergewhnlich ist auch, dass die ei gentliche Seite nicht den gesamten Bildschirm ausfllt, sondern dass sich Oben und Unten jeweils ein grauer Bal ken befindet.
MIOJA
MM
what we do
O'#*
JUS IK *
'V>.-
what do you get?
(the technical bit)
nothing but bottles - this way-*
48
webdesigner 04/2013
WEB-GALERIE
Single Pages
CHLEON
CHLEON WHAT WHY WHO PARTNERS CO N TACT
ALL CARS. CONNECTED.
TM
INSURANCE
lo cate
M USIC
d evelo per s /G >
N ew s p d c a s ts ta lk CHAT A PPS
IV! MAKERS
o
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 enthlt insgesamt sechs Menpunkte. Wenn man auf einen der Menpunkte klickt, scrollt man automatisch nach unten. Die Informationen der einzelnen Menpunkte werden ab wechselnd auf weiem 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 C H LEO N ?
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 CH LEO N ?

CHLEO N IS A T EA M OF EXPERTS FROM THE HI-TECH INDUSTRY W IT H SHARED PASSION FOR BOTH CARS AND TECHNOLOGY. Th ey
w a n t t iie ir c a r s c o n n e c t e d
. T h ey
w ant your cars c o n n ec ted
A N D 10 R EA LIZE THIS V ISIO N , TH EY HAVE BUILT TH E HARDWARE AND SOFTW ARE, TO SAFET Y BRING CLOUD SERVIC ES TO CARS.
WHY CHLON?
h i M i o \ r i A i i k u 1 0 m i I*
O CA
THE LEADERSHIP TEAM
O
4 t t 4 I 9 ! A r**t-|x * H *
a a u in
hi H*<
Q
f .
Ru bid Cim
Ex+cu&v Pm i<lo'. A a d ic D ix on VUh 1 Cfa*trU F<rjr.d. O *4 Otffic V i n k U iM r lv a l
VP. I
u iu im i
Audio Qio
%VP, iupptrChais
D r .tic r p r m c t
m1
IJ
m*
1t Mi 4
m
4 Nd
. ^ . 4
to
04/2013 webdesigner
49
9 4
WEB-GA LERIE
Single Pages
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 beschrnkt. Seine Kontaktdaten auf der linken und rechten Seite werden durch ein Handy und einen Kugelschreiber symbolisiert, wo man dieTelefonnummer und seine E-Mailadresse erfhrt. Der User scrollt von oben nach unten und erfhrt so etwas ber die Leistungen des Webdesigners. Zunchst werden unter der berschriftmy Work" in einer kleinen Bildershow einige bisherige Arbeiten von Adrian Crelin vorgestellt. Die anderen drei Menpunkte zu denen man "Introduction","Services" undContact". nach unten scrollen kann lauten
tnfroducfton:
I* * M t II
My Contact Details:
G
M
Tmfior* *r *44 (0)7U4 H l 7% CK W

w j:
M *WMIM M MM IM Mfl 4 M M M m
a M t # <
l f p < V u f v t # n ^ i M n M* M4 in M >M M r* ir* sarg 4 m u / m r M M M t o t e t i r # i fcM iyq
iiteht in n i* w iiita k *
r o u M 7 X M i*
n n f j n
lg n iy ( T
Send m e a Mc&sago:
My ta *M I
' > ^ > 1 *
tA>
0 n I
M i
r 4 m
M i m#
m m
Mi
< M BM W # M IX n
I V m > r *
M W Ma I m
I a M m
IC mi AHoHWpWth
an M * afa i
Plnnuat M(IM C . !(
I . r
IB jC M
50
webdesigner 04/2013
WEB-GALERIE
Single Pages
Diese in schwarz und gelb gehaltene Seite einer Agentur von Webdesignern wird man nicht sofort fr eine SinglePage 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 fnf Unterpunkten Home", About"," Work", Clients" undContact" und der User erfhrt mit wenigen Worten alles, was er ber die Agentur wissen muss.
lt3 important to be both good looking ciever.

Lit u Evwymns
' ' s*
mw io c t f&y} Tr.*vfny
*u y pr.
Mi m m 'd Z tm t JM W V** ia VUJ to loek f x i Su! hcn*Cy, ?a r n
04/2013 webdesigner
51
WEB-GALERIE
Single Pages
Diese sehr umfangreiche Single-Page hat sich dem Thema Design gewid met und versucht dem User Schritt fr Schritt nher zu bringen, was gutes Design ausmacht. Es wird eine Flle von Informationen geboten. Bei der Masse an Informationen wren hier und da ein paar Unterseiten vielleicht etwas bersichtlicher gewesen. Im Header der Seite erhlt man allerding unterTableof 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.

Cm ûki U fca AffC* trw Eilfc Atfta* t a u t * 4 Mto
Iw^rsg I
tu i 4tm|o
w e eitfcnr Nmem
a kfcw 'A Voc4t*
tW r* *>04 *<#**
W It I (M K ta k x k m t
tiiM VM diW i
im T ut r** fc * rm
I Meet the Designer Founders

Acojfditx t> 3 T W D lte f B if Fttftd lU fTU fl Wtffe dUKtl i A ' i Im ftIt* ibcu u k k i L K t kM tu rtvfv kN p*nmiLf MKklgftf i f lo m A rn u J W w u t pfflTik oa f it ( 'V I M M m JU tm u J
Tfc* I
is a
Sow lut n
> x x l< J e M n ? TW I m I
rmthod of proWroi solving.
ton* *!* to V b M U M lt o h (,
rm Va /I > my rtoj* W ti
a*ia*a*att
l ) * t e r k ju m T r P rin c ip le o4 ('ood IV s i^ n
* 1 1 1 1 1 tof n ^
I
. >W m W l f * M l M l l or 4
Joe Cebbw, Autmb

Jo t AffaKi a AiiCo cqxnrftCA. I k u W x itrd to t m t n t an a ip ir in t and r& t f tk n l v j n f d i r t x r tferoaffe tb lp , tftiutlrr* iWvÛ t& J (t i A i ptoacl Oi*2tup to B ill* If 16 Jo % 'fcfiO M p to d u h rfeat tunpli/v life iwJ lu t' pottftua apart oa d u eavtroaoKfie. ta4 i w th*t t V coaf**? *lb*rs to cfce* ceaeci. fVwc to A a ta ft.jo f w n raplotad &t
O
V v< nn an Tint A iftn
tto a m tm n itor*iaa T a a U i
> t a* '
***
^ . JiM Q v L'j M
V ,
Good dr%!gn IV..
-a
Cbrawl* Rodt, to ( moiM
( r m dniga
w rttu#, s J rveiapvd w w r tl cotu m w t p r o b a t Aft Juttr4 of tfe* Rbod> h lin d G riffe* D n jte and In d o u ! D ru p i u
kj
O
II* 4i
: v im c o
o< oo
Resources!
Tk n n r * t p*w * f <m rtipi h r cwraf I k n r s i o M d arfaraaoa ot 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
Is 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, Jo e 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 h a w better tech, but beciiiw they nuke rheif prod u m more uiabtt. AMthetif, and Hunun.
DESIGNER 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.
FU N D
A 1CA
Bhance
52
webdesigner 04/2013
WEB-GALERIE
Single Pages
ART & A R C H IT E C T U R E TOURS BERLIN
mene
TO U* BU C H EN UR U N S PG ESS PARTNER BLO C KONTAKT
BERLINS KUNST & ARCHITEKTUR ABSEITS ETABLIERTER WEGE

O b cx p frim rn w ik
K u n itrlu m *
oder
jfttfm i Kunuwte und juiWrfmfthnkhe
M M fc v Ardudcnir. w lieben B o kn SO;
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
Ktnt krtJt/rcn Nechcn und woten d r * ns Mxducnir Lrhe rtkkrn. NIC HE B cd c b r mdmduel Touren aa. * S r dorthin fuhren.
wo Bcclir. der x x am Spannendarn tz. A naele rmnmrcwTVf Cu Wien ade r bekannter U*u<nk* dir huhiuitgefi
Knn ftnbW m .
Diese sehr umfangreiche Single-Page hat sich dem Thema Design gewidmet und versucht dem User Schritt fr Schritt nher zu bringen, was gutes Design ausmacht. Es wird eine Flle von Informationen geboten. Bei der Masse an Infor mationen wren hier und da ein paar Unterseiten vielleicht etwas bersichtlicher gewesen. Im Header der Seite erhlt 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.
PARTNER & FREUNDE
W k W k U a M fc * fe
SH 41 fc>4. . . b y
BER UNS
Sot NU. 200 fjhi NIC! ain

Kuncviam w rfi und A l A iu r j W6h*bu um A h gjnw n
toult>diH<)knaM Ttii uc Kuocdunonfaem,

DraJarruiptWfrm Kwd*rn
und Aichiarfem*
G rfflnlrt b A n n U L 'm
Ar
iU w uh tUBtrmtam
CJmvtanjt t+ n & rrck
K u n x h ts c r kerr-r* n S c t f * U d c i ued N k
H iv m rs n n v Jr A n h w ia n und
L>ttaa$dt<<M Kx t i u t u Bedarum.
F ~ * r.~ r J S o Jt
NIC H i. &trkt>
i n ^ n Ttitfi
04/2013 webdesigner
TUTORIAL
Design fr eine App-Downloadseite,Teil 1 von Oliver Berghold
Design fr eine App-Downloadseite

Downloadseiten fr Apps sollten den Besucher schier berwltigen. Oliver Berghold zeigt Ihnen im ersten Teil seines Tutorials, wie Sie den Hintergrund fr eine solche Seite mit WowEffekt gestalten knnen.
gen sowie einem Farbverlauf. Das Tutorial wurde mit der Version CS4 erarbeitet. Da sich die Menfhrung, bzw. die Arbeitsflche von Versi on zu Version immer mal wieder verndert, 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 grtenteils mit den einfachsten Bordmitteln zu reali sieren. Die Verwendung der Photoshop-Brushes version gebunden. ist auch nicht an den Einsatz einer konkreten Programm
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 mssen gar nicht jeden Arbeitsschritt exakt nachvollziehen, um ein stimmiges Ergebnis zu er zielen, so wie ich es zeige, ist es jeweils nur eine Mglich keit, oder Variante die Elemente zu gestalten. Whlen Sie doch z.B. mal eine andere Textur fr den Hintergrund. Auch beim Erstellen der Farbverlufe ist ein wenig Aus probieren gefragt. Experimentieren Sie mit Durchmes ser, Deckkraft, Farbtnen und Ebeneneinstellungen / Ebenenstilen, um das fr Sie passende Ergebnis zu erzie len. Fr jeden Arbeitsschritt am Hintergrund lege ich je
P
hotoshop ist fr viele Webdesigner das Werk zeug der Wahl. Mchte man geometrische Ele mente erstellen, oder lediglich einen Farbverlauf
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 Hhe von 1500 Px angelegt. Los geht es mit dem Hintergrund. Fr die Flche whle ich ein dunkles Grau (#111212) ber das ich anschlie end eine organische Textur lege. Ein kostenloses, umfangreiches Archiv mit hochaufge lsten Texturen findet man unter http://www.cgtextu-
anlegen, mag es effizienter sein, mit einem anderen Werkzeug zu arbeiten. Die Vorzge 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-
res.com. Ich whle eine Metalltextur, aber probieren Sie
54
webdesigner 04/2013
TUTORIAL
Design fr eine App-Downloadseite,Teil 1
ruhig etwas anderes. Die Textur lege ich in ber den grauen Hintergrund, die Ebeneneinstellungen setze ich auf weiches Licht.
Im nchsten Schritt whle ich mit dem Auswahlrechteck-Werkzeug (M) die Flche des Verlaufs bis zur Hilfsli nie, entferne mit dem Schortcut Entfernen auf der Tasta tur die Hlfte des Verlaufs und drehe, wiederum mit der
Transformieren-Funktion (Umschalt+Strg.+T) die Verlaufs

flche um 45 Grad und platziere sie ber dem Hinter grund.
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.
Diesen Arbeitsschritt wiederhole ich (auf separaten Ebenen) und zustzlich mit der Farbe wei und sowie #a89fa0 als Vordergrundfarbe. Den Radius der Verlufe variiere ich. Auerdem setze ich bei einigen Verlufen den Ebenenmodus auf Ineinanderkopieren. Jetzt plat ziere ich die einzelnen Verlaufs-Elemente so, dass sie sich berschneiden.
Mit der Transformieren-Funktion
(Umschalt+Strg.+T)
blende ich einen Begrenzungsrahmen ein um die Mae zu ermitteln und ziehe eine Hilflinie in die Mitte des Farbverlaufs.
Ich habe insgesamt 20 Verlufe mit unterschiedlichen Ebenen- und Deckkraft-Einstellungen erstellt und auf dem Hintergrund platziert, so dass auch die Ecken des Hintergrunds davon ausgefllt werden. Die ber schneidungen, in Verbindung mit der Oberflche der Textur ergeben den Effekt von Lichtreflexen.
04/2013 webdesigner
55
TUTORIAL
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.
Die Ebenen mit den bisher erstellten Verlufen werden ausgeblendet. Fr mehr Kontrast fge ich jetzt einige weitere Verlaufs-Elemente mit derselben Technik hinzu. Als Vordegrundfarbe whle 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. Fr die besonderen Akzente in Farbe und Licht kom men weitere Elemente hinzu. Mit dem Zeichenstift-Werkzeug (P) zeichne ich unre gelmige Dreiecke, die ich mit jeweils unterschiedli chen Ebenen-Stilen gestalte. Diese Elemente platziere ich im selben Winkel wie die vorher gezeichneteten Verlufe, auf deren Kanten.
Akzente
Fr das Raster verwende ich ein Photoshop-Brushset, das es als kostenlosen Download gibt:
http://eliburford.deviantart.com/art/3-Large-Retro-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 whle die vorgegebene Auflsung des Pinsels, die
webdesigner 04/2013
Wird ein Element nach dem Anlegen der Ebenen-Stile transformiert, bzw. gedreht, (das gilt auch fr SmartObjects, siehe unten), werden die angewendeten Fil ter- und Ebeneneffekte whrend des Vorgangs deakti viert. Das soll aber nicht weiter beunruhigen, sobald die Transformation besttigt wird, nimmt die Ebene wieder ihren gewnschten Look an.
TUTORIAL
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-Arbeitsflche ziehen. Pho toshop importiert diese Objekte dann als sogenannte Smart-Object in eine separate Ebene.
Jetzt wende ich auf meine (deaktivierte) Auswahl die Filter an, zuerst Bewegungsunschrfe, dann Gauscher Weichzeichner. Die Einstellungen der Filter setzte ich, wie Screenshot zu sehen.
Fr das Arbeiten mit Smart-Objects gibt es eine Menge Optionen, die auf den Websites von Adobe und in di versen Foren ausfhrlich erklrt werden: Anschlieend wird die gefilterte Auswahl gedreht und auf der Arbeitsflche platziert. Ich wiederhole diesen Schritt, verwende fr die Auswahl aber immer eine andere Dimension (hher, breiter, sch maler usw.) und unterschiedliche Vordergrundfarben, Bei den Akzentuierungen ist es wichtig, allen Formele menten durch Verlufe, 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. Fr weitere Lichtreflexe, bzw. Akzente kommen zwei Weichzeichnungsfilter zum Einsatz: Bewegungsunschrfe und Gauscher Weichzeichner. Dafr erstelle ich zu nchst eine Auswahl Auswahlrechteck-Werkzeug (M) und flle sie mit der Vordergrundfarbe. von violett bis metallisch blau. Die Ebenen-Einstellunngen setze ich mitunter auf ineinanderkopieren. Auch Ebenen-Stile kommen zum Einsatz, vor allem Schein
http://help. adobe.com/de_DE/photoshop/cs/using/ WS41 A5B796-6846-4e95-8459-95243441 El 26.html
nach auen.
lH i *- 1 . . I u ' 1 /I 15 -
.................................
................................
I -
1 : r.
1* 1 1 .-
04/2013 webdesigner
57
TUTORIAL
Verlauf und Farbkorrekturen

Jetzt kommt richtig Farbe ins Spiel - mit dem Verlaufs-
Hintergrundebene wieder ausgeblendet oder gelscht werden. Die graue Hintergrundebene und die Textur werden eingeblendet. Das Ergebnis knnte jetzt so aussehen. T
Werkzeug (Q). Aber zunchst 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-Farbverlufen begngen mchte 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 Flle unterschiedlicher Effekte erzielen. Au erdem finden sich im Netzt unzhlige unterschied lichste Verlufe zum freien Download. Hier werden Sie bestimmt fndig:
"TT T !T": f......r..... f
http://m yphotoshopbrushes.com /styles_and_ gradients/

Genau wie Pinsel (brushes) werden die Verlufe im entsprechenden Presets-Ordner gespeichert. An schlieend knnen 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. Nun sollen noch ein paar Lichtakzente hinzugefgt wer den. Dafr setze ich ein weiteres mal das Pinsel-Werkzeug
(B) mit zwei externen Pinselspitzen ein, die unter den fol
genden URLs erhltlich sind:
http://rabieshund.deviantart.com /art/RabiesStar-Brushset-19527557 http://dem osthenesvoice.deviantart.com /art/ Star-Brushes-97311837

Ich lege zunchst eine neue Ebene an und whle dann Wei fr die Vordergrundfarbe. Mit den unter schiedlich aufgelsten Pinselspitzen tupfe ich danach Akzente ein, die ber sich auf die gesamte Arbeitsflche verteilen. Diese Tupefer berlagern sich zum Teil. Ich bin dabei so vorgegangen, dass ich zunchst nur mit einer Pinselspitze gearbeitet habe. Dann habe ich zwischendurch das Ergebnis immer wieder geprft, in dem ich die anderen Ebenen eingeblendet habe, bevor ich weitere Pinsel hingezufgt habe. Anschlieend setze ich die Einstellung der Ebene auf In
einanderkopieren und dupliziere sie. Jetzt blende ich die

Die Ebenen-Einstellungen der Verlaufs-Ebene setze ich auf Ineinanderkopieren. Anschlieend kann die weie
58
webdesigner 04/2013
Ebenen mit den Akzenten und den Verlufen ein. Der Hintergrund ist fertig.
Managed Hosting im Failover-Cluster
Im m er einen Schritt voraus

mit individuellen Hostinglsungen vom Server bis zum Clustersystem Planung und Service 24/7. Fr m ehr Performance, Sicherheit und inklusive Beratung,
Sicherheit im Failover-Cluster
J ISO 27001 und 9001 zertifiziertes Managed Hosting % / Hochsicherheits-Datacenter in Frankfurt/Main DE-CIX Direktanbindung % / Umfassender Datenschutz >/ 24/7 Service und Support
Verfgbarkeit, 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 R
Managed Hosting zertifiziert nach ISO 9001 : 2008 und ISO 27001:2005
Berlin Marburg Frankfurt am Main
TUTORIAL
Videos in Wordpress
von Jrgen Ortmann
WordPress Videos fr WordPress In Z e it e nv o n Y o u T u b eu n dC o .is td ieE in b in d u n gv o n V id e o sin W e b s e it e n fa s ts c h o nz u m

E
ine wichtige Funktion von WordPress-Seiten ist heu te das Darstellen multimedialer Inhalte. Das Thema Video boomt - fast jeder Besitzer eines Mobiltele
S t a n d a r d g e w o r d e n . D a n k d e s c l e v e r e n W o r d P r e s s V i d e o P l u g i n s i s t d a s z u m G l c k a u c h v l i g p r o b le m lo sm g lic h .
Das Plugin suchen
JL 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.
Rg ins installieren
Sueton H ocN *** I trv loftltn I Aoputtr I H m jf
Plugin* treten) oo Funttonsurnteng von W otJPtos*
fons kann heute qualitativ gute Videos drehen. Um all diese Videofilmer kmmern sich unzhlige Plattformen wie YouTube, Vimeo oder MyVideo. Auf WordPress-Webseiten kn nen die Inhalte von diesen Portalen eingebunden werden. Mit dem WordPress Video Plugin (http://wordpress.org/
Su tte n
W o tJ P ro ** V 5*o
extend/plugins/wordpress-video-plugin/) ist es mglich,

Material von sage und schreibe 65 Videoplattformen in WordPress-Beitrge einzubinden.
*3 Das Plugin installieren

ln der bersichtsliste suchen Sie nach dem Eintrag
0 1
V K o m m e n ta re
Bei WordPress anmelden

nen, melden Sie sich zunchst als Administrator mit Ihrem Benutzerna men und Ihrem Passwort an. In WordPress fahren Sie ber den Ein trag Plugins in der Navigationsleiste. Whlen Sie aus dem Kontextmen Installieren aus.
WordPress Video Plugin. Flier klicken Sie auf den Link Jetzt installieren, um das Plugin in WordPress zu laden, -w
Um das WordPress Video Plugin nutzen zu kn
Seiten
4 Kategorien
31 Design
& Plugins
H Benutzer
TA W a r ir A i in a
A SnhtonwArtor Installierte Plugins Installieren Editor
&
A ll
60
webdesigner 04/2013
TUTORIAL
Videos in Wordpress
Wichtige Begriffe
Plugin -WordPress-Seiten lassen sich um Zusatzfunkti
onen erweitern. Die fr diese Zusatzfunktionen ange botenen kleinen Programme nennt man Plugins.
Die Befehlsbersicht
Auf den ersten Blick wirkt die Liste mit den Befehlsbeispielen berwltigend, sie ist aber recht klar sortiert. Zu jedem Videoportal fhrt die Seite Instruction ein Beispiel auf, welches zeigt, wie die Befehlsfolge lautet,
Shortcodes - Shortcodes sind verkrzte Schreibwei

sen fr Code-Abschnitte. Sie erleichtern die Arbeit mit WordPress. Dem Beitrag wird hier ein kleiner CodeSchnipsel hinzugefgt, den WordPress dann richtig interpretiert.
You o tfrr
fot h ufc
M att - yM ocx**d 6 tc to c W ri3 3 b fe C $

m tfO ^ iLt < 3 ***T\
f 1 .1* 3 0 Im
yf p*rmmAmy-mMUDtiAV 1 Vrfcdl fh9 Id te
Youtub
[fOutuL* Id !ot *rt\
P o r m jR v coatfMte *=*chczw b o * tn c < fc o -o z * a o ** - \ytx n x * CKW .aOP*J o [ y o u f Jb* a0MOZW_0i 2*0 175] YouCub P liy k tl c wCh hcl^-q
%
pfciy lh# d w C M U JM T V ilW G
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 fr das Einbinden verwen den knnen.
foffn
- yeutwDeffeyUI EF1' W A ftO tttt)
Beispiel: YouTube
Das Plugin bietet fr das Einbinden von YouTubeVideos die folgenden beid en Mglichkeiten auf:
Ein Video
WordPress Video aktivieren

WordPress 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 knnen. Klicken Sie daher auf den Link
[youtube id] oder, wenn Sie

die Gre fr das zur Verfg ung stehende Fenster mit angeben wollen, auch
[youtube id width height].
Aktiviere dieses Plugin.

twimmn
Untersttze Plattformen
Das WordPress Video P lugin u n te rs t tz t fo lg e n d e V ideoportale. (Stand: 19.11.2012)
05
Durch
Keine Konfiguration
Nachdem das WordPress Video Plugin aktiviert
wurde, gibt es jetzt im Dashboard unter Einstellungen das neues Untermen W P 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).
das installierte Plugin stehen Ihnen nun verschiedene Befehle fr das Einbinden von Videos zur Verfgung. Diese Befehle finden Sie auf der InstructionSeite aufgelistet.
2 3 E in ste llu n g e n
<
Allgemein Schreiben Lesen WP Video Plugin
Men einklappen
123video.nl Aniboom Blip.tv Break Brightcove CBS CeUfish Clipfish Clipsyndicate Collegehumor Com edyCentral. com current.com DlG.com dotSUB Facebook Flickr Video FunnyorDie.com GameTrailers GameVideos Generic Flash Glumbert GoalVideoz Google Video Grouper
Guba Hamburg 7Video hulu IFILM ISeelt.TV Jumpcut Kewego Last.fm LiveLeak MEGAVIDEO Metacafe Mncast.com Mojvideo.com MPORA.com MQSTO.com MSN MyspaceTV MyVideo Novamov OnSMASH.com reason.tv ReelzChannel Revver screencast-o-matic. com
Sevenload slideshare.com smotri.com Sumo.tv teachertube Trilulilu Tu.tv UnCut Veoh Videotube Vimeo Vsocial vzaar.com Wandeo wat.tv Yahoo! Video Youreporter Youtube Youtube Playlist
04/2013 webdesigner
61
TUTORIAL
Videos in Wordpress
Youirtin **>
STRATO Webshops Teil 1: Einrichtungsassistent
Kjiagortan
Vtc rocntadan
Die YouTube-ID finden
'0 8
Wie findet man nun die YouTube-ID? Wenn Sie
sich ein YouTube-Video anschauen, finden Sie unter dem

u- s
C A -
tfST B A T O
2 |
. u r
h
STR ATOttfrtM to p a T * 4 I l\Emtwit vo n ira a O T A l *.* m 6
Videofenster die Rubrik Teilen. Unter dieser Rubrik steht die Webadresse, unter der Sie das Video direkt erreichen knnen: http://youtu.be/S4b9zOUvOpQ. Der letzte Teil dieser Adresse (S4b9zOUvOpQ) bildet die YouTube-ID.
T *
CO
STR ATOW M M fe ftf* Ta il (: o w tfP C K o n ftQ u ra B o n1 A 1 aS*p*AnN W

H
A Q D i c ID in WordPress einfgen
- 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 strenden Formatierungen auftreten. Tra gen Sie jetzt in das Textfeld einfach den Code [youtube
iK A M
5 . Tl. O a te -fc a n li TrtaW mM S tra ta wS ^ i U mv

03
_
K " r
V ld a oA / tfa ttu n gE rM tfto a in a n NfllMMmM

m
10WM-A 1
* * * * 9 4*
" P
u
m
Ttfl: N o m a p a g * aXiftin ka%tmUo*

CSD
ATOW abtfop * 77 fl STR lall J. m l| CD A norm t ftU rta o n o' *H 1 1-
S4b9zOUvOpQ] ein.
10
Das Videofenster einstellen

U rtk a
Ein Video
Sie knnen hier nicht nur schnell Ihr YouTube-Vi
deo einbinden, sondern auch die Gre des Video-Fens ters genau festlegen. Nehmen wir an, Sie mchten, dass das Video mit 600 Pixeln Breite und 300 Pixeln Hhe 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 Hhe fest.
n
f? Elrwirtluneert
Bearbeiten
Ein Video
STRATO Webshops Teil 1: Einrichtungsassistent
Teilen 5 weitere Informationen
Dieser Eintrag wurcie verffe'ilitf < in Allgemein von administrator. Permanenter Unk des Eintrags.
62
webdesigner 04/2013
TUTORIAL
Videos in Wordpress
11
Video im Text
Sie knnen Videos auch zusammen
Ein Video
P a rm a ln fc : h ttp /^ rw w .w D d 6 S < g n e f*rra g a 2 in .d e A i& m o / n *v i e o *2 / E<J<tieren Kurzhnk a n z o g e n
mit Text einbinden. Fgen Sie einfach neben Ihrem brigens auch in der Editor-Einstellung Visuell machen,
Shortcode den Text Ihres Beitrages ein. Das knnen Sie
H o c h la d a n ^ in f jo n ^
12
13
j f
:
- l
um zu sehen, wie Ihr Text formatiert wird.
A b satz
B t t A w .T
,
_ 2
V - S3 m
t>
Beispiel: Vimeo
Fr Vimeo sieht der Befehl ganz hnlich aus:
[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
[vimeo id width height]. Auch hier bentigen Sie zunchst

die ID des Videoclips. Diese wird bei Vimeo an mehreren Stellen angezeigt: in der Webadresse des Clips und im Teilen-Fenster (unser Beispiel).
Den Clip einbinden

Vimeo nutzt dieselbe bersichtliche ShortcodeH o 0 o
r# d d t
__
J JJ J
M #d
U flS fl ** MWS*
T a / (M i M A i
Schreibweise wie auch der Befehl von YouTube. Auch hier knnen Sie Breite und Hhe des Videos einstellen, beispielsweise 250 x 150 Pixel. Fr unser Beispiel mit dem Video 45710321 lautet der Shortcode dann [vimeo
D ia* W m* ^ .1
fNM VeiUlp
frtMMrMr.'l*
rl Apa I c, ...
'
R r:li t i l t o r f u t U c r M " B S llorfi l l i c r M f i ,a llo # U S c rn > < v i^ o ii* > p x <
E-m ail M 6C
PrvH
45710321250150].
S e 'tdU m ac*
Itik w ltfl you:
S T R A T O I m freffi w>-rârtr>Jp
M
oder
Mehrere Videos in einem Beitrag

Dank der problemlosen Shortcode-Schreibweise
745710321
M
MIHI
des Plugins knnen Sie auch mehrere Videos nebenuntereinander anzeigen lassen auch aus unterschiedlichen Quellen. Fr unser Beispiel haben wir diese Befehlsfolge genutzt:
STRATO
A to U >k i t o
HD
*K X C *> O N K fe tto cH L tf W tAKMhliWartr

y<rmmnj tm mnm$ M v 1
O f c *
tM l M 0t npnWK mvtmQom
[vimeo 45710321 260 150] [youtube S4b9zOUvOpQ 260 150],

Beide Videos wurden hier mit einer Breite (width) von 260 Pixeln und einer Hhe (hight) von eingestellt. 150 Pixel
VN *a M f f car f IM
0*0M im m m Mant
Bearbeiten
Ein Video
Vimeo
YouTube
04/2013 webdesigner
Abonnieren S ie web
1 \
fttu*
fO f s Tp
ru
|p W ,e
s t
So
hineS
ir> er w
iiS u n 9
erond'>9e" s t .0pt21
o b e 'W* ^ t t
IO
>
,VL*
^ 5 ****1 ft ^
Ausgaben
m i s n
ile als Abonnent:

-
Sie verpassen keine Ausgabe mehr
y Ju j
- Sie erhalten die aktuelle Ausgabe vor dem Erscheinungstermin frei Haus - Sie sparen 16 % gegenber dem Kauf am Kiosk - Sie erhalten eine wertvolle Prmie Ihrer Wahl
ju ru u r
H & 'H
Schnell und einfach bestellen

0 22 2 5 /7 0 85 -367
f l w w w .s o n ic - m e d ia .d e
h o lo s
Portraits retuschieren mit Photoshop

Von der kaum sichtbaren Retusche bis zur makellosen Magazin schnheit entdecken sie mit diesem Buch den besten Weg fr Ihre eigenen Bilder. Sowohl die erweiterten Techniken bei CS5, wie auch versionsbergreifende Vorgehensweisen fr verschiedene Portrtarten werden gezeigt.
M a tth a i
/UW
Haut. Figur
Effekte
ATH-mOts
Ein Klassiker unter den Studio-Kopfhrern, der dank geschlos sener Bauweise und linearer Abstimmung als echter Allrounder fr Aufnahme, Monitoring und Live-Einstze bestens eignet.
ATH-M40 ( '
(fcaudio-techn tria gwwff A rinvHj A
Kugelschreiber-Videokamera
Dieser edle Kuli sieht nicht nur gut aus. Eine integrierte Farbvideokamera und 2GB USB-Speicher (fr bis 60 min. Video und Ton) machen dieses Gadget zu einem Meisterwerk fr die Hemdtasche.
TUTORIAL
Social Media-Buttons
von Jrgen Ortm ann
D a m i t d i e V e r n e t z u n g d e r e i g e n e n S e i t e m i t F a c e b o o k u n d C o . g e l i n g t , s i n d a t t r a k t i v e S o c i a l M e d i a -B u t t o n s u n v e r z i c h t b a r . W i r z e i g e n I h n e n , w i e S i e B u t t o n s b e s o n d e r s a n s p r e c h e n d u n d d e n n o c hu n a u fd r in g lic hg e s t a lt e nk n n e n .
Triff uns a u f fa ce b o o k # Fo lg e uns a u f tw itter Triff uns a u f X in g
Social M edia Buttons sind praktisch von keiner Website wegzu denken. Die Gestaltung dieser Schaltflchen ist einfacher als man vielleicht vermutet.
B
Social Media-Buttons ansprechend gestalten

m
Der Entwurf
Wie bereits erwhnt, habe ich die Buttons zu
nchst 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 einfgen. Die Buttons sollten auerdem einen Text mit einer Aufforderung enthalten, wiebesuch uns auf xy". Deshalb mssen sie in der Breite gengend Platz fr die Phrasen bieten. uttons sind ein zentrales Element bei der Conversion-Optimierung. Daher sollte der Gestaltung von Buttons besonders viel Aufmerksamkeit gewid met werden. Grundstzlich sollte ein Button auch als sol cher leicht identifiziert werden knnen. Auerdem muss er sich von den Inhalten einer Seite absetzen, ohne aber das Design zu sehr zu stren. Ein sehr beliebtes Mittel ist die plastische Gestaltung, die mithilfe von Verlufen, halb transparenten Elementen und Schatten erreicht wird und dabei nach wie vor verblffende Effekte erzielt. In diesem Tutorial mchten wir Ihnen ganz ausfhrlich zeigen, mit welchen Techniken und Kniffen sich ein pro fessioneller Look erzielen lsst, der den Besucher frmlich zum Anklicken der Buttons drngt. Zudem kann der dabei erstellte Button sehr unkompliziert umgefrbt und mit neuem Logo und Text versehen werden. Wichtig ist vor allem die Entwurfsphase. Viele Designer beginnen mit den Entwrfen direkt am Computer. Fr meinen Button habe ich zunchst auf dem Papier verschiedene Entwrfe 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 beschftigt, sich mit den Werkzeugen, Einga bewerten, Filtern und anderen Funktionen zu beschfti gen, wobei man schnell den Blick fr das Ganze verliert. Auerdem bleiben auf dem Papier alle Ideen gleichzeitig sichtbar, wodurch man sich ursprnglich verworfene Ide en schneller wieder ins Gedchtnis rufen kann, wenn sich diese spter doch als ntzlich erweisen.
66 webdesigner 04/2013
r .*
pv
\ j
Die richtige Arbeitsflche

Wenn das Konzept steht, kann mit der Arbeit in
Photoshop begonnen werden. ffnen Sie das Pro gramm und legen Sie mitDatei > Neu" eine Arbeitsfl che von 1000 x 1000 Pixeln, 150 dpi im RGB-Modus an. Zunchst soll der Facebook-Button gestaltet werden, der dann spter als Grundlage fr die anderen Buttons dient.
JL%*- 1. .. 1
TUTORIAL
Q Rechteck mit runden Ecken

Legen Sie In derEbenen"-Palette eine neue lee re Ebene an. Whlen Sie dann das Abgerundete Recht eck-Werkzeug". Stellen Sie in der Optionsleiste einen Ra dius von 5 Pixeln fr die Eckenrundung ein. Klicken Sie dann auf den kleinen Pfeil neben dem Eigene-FormWerkzeug". Geben Sie dort die Werte fr die Breite (B") und die Hhe (H") ein. Bei mir sind dies 670 Pixel fr die Breite und 96 Pixel fr die Hhe. Klicken Sie dann in die Arbeitsflche, um den Pfad fr Rechteckform zu erzeu gen. Wenn Sie mit gedrckter Strg-Taste in die Form kli cken, erscheinen Anfasspunkte an den Ecken und Sie knnen 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 NamenRechteck" ein und klicken Sie auf OK". Aktivieren Sie danach den Pfad in derPfade"-Palette erneut und ffnen Sie dann wieder dieEbenen"-Palette.
c Rechteck blau fllen

\J
Rechtsklicken Sie bei immer noch aktivem FormWerkzeug in den Rechteckpfad und whlen Sie aus dem Kontextmen Auswahl erstellen..." und besttigen Sie den Dialog mit OK". Whlen Sie dann in der Werk zeugleiste auf das Fllwerkzeug". Gehen Sie dann mit dem Cursor in dieFarbfelder"-Palette und klicken Sie auf das Facebook-Blau, um die Farbe zu laden. Klicken Sie nun in die Auswahl, um das Rechteck blau zu fllen.
Verlauf
Das Blau des Rechtecks soll nun mit einem Ver lauf berlagert werden. Klicken Sie dazu nun in der Ebenen"-Palette auf das fx"-Symbol und whlen Sie aus dem Men die Option Verlaufsberlagerung". In dem Dialog, der sich daraufhin ffnet, ist ein Verlauf von schwarz nach wei voreingestellt. Whlen Sie bei Fllmethode" die Option Weiches Licht". Dadurch wird der Verlauf transparent und das Blau scheint durch. Mit dem Verlauf wirkt das Rechteck nun so, als
v rti ew.TxrsM)]
b</K AusvtfthJ iittcf Fcnjtcr Hc
wre es gewlbt.
'S *
Facebook-Blau
U lU m die Pfadflche unseres Rechtecks im typi schen Facebook-Blau einzufrben, habe ich zunchst die Farbe auf der Facebook-Seite mit einem Color-PickerAdd-on aufgenommen. In Illustrator habe ich dann bei aktivem Rechteckpfad den Farbwhler fr die Flchen farbe geffnet und dort den Hexadezimalwert (3b5998) eingefgt, sodass das Rechteck in dem Blauton gefrbt wird. Klicken Sie nun in der Palette Farbfelder" auf den ButtonNeues Farbfeld", um das Facebook-Blau zur Palet te hinzuzufgen.
f \ m m 7 Schein nach innen

\ J /
Die Schaltflche soll einen dnnen, leuchtenden Rand erhalten. Dies erreichen wir mit dem Ebenenstil Schein nach innen". Klicken Sie dazu in derEbenen"Palette auf das fx"-Symbol und whlen Sie aus dem Men die entsprechende Option. ndern Sie im Ebenenstile"-Dialog die Farbe fr den Schein nach in nen", indem Sie auf das kleine Farbfeld klicken und dann imFarbwhler"-Dialog ein mittleres Blau auswhlen. Im Beispiel handelt es sich um #2b4482.
facebook
i I 1
r V * 0 > N rN W w - w* otfiv
IM # lM b
04/2013 webdesigner
67
TUTORIAL
Q Schlagschatten
W O
a Is
nchstes soll der Button einen Schlag
i ^ *Q la \ a Z__ = __ = _ _2 _ _2
schatten erhalten. Dieser sorgt dafr, dass der Button sich besser in das Design einer Website einfgt. 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. Whlen Sie auer dem folgende Werte: Deckkraft" 75 Prozent, Distanz" 5 Pixel,berfllen" 0 Pixel und Gre" 5 Pixel. Bestti gen Sie dann mit OK". Der Schatten kann, wie alle an deren Ebenenstile, bei Bedarf in der Photoshop-Datei noch verndert werden.
10
. Den Kreis fllen

Legen Sie nun eine neue Ebene an. Rechtsklicken
Sie dann in den Kreis und whlen Sie die OptionFllop-
tionen". Daraufhin ffnet sich der Dialog Ebenenstile". Whlen Sie dort den Ebenenstil Farbberlagerung". ff nen Sie danach per Klick auf das kleine Farbfeld den Farbwhler"-Dialog und stellen Sie schwarz ein (#000000) und besttigen Sie mit OK". Whlen Sie auer dem im Farbberlagerung"-Dialog Farbig abwedeln" alsFllmethode". Dadurch erscheint die Kreisflche nun in einem matten Blau.
/^VQ Einen Kreis einfgen

ZÛ m den Kreis einzufgen, whlen 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 Gre einzugeben, nmlich 70 Px fr Breite (B") und Hhe (H"). Klicken Sie in die Arbeitsflche, damit der Kreis erzeugt wird. Platzieren Sie den Kreis dann links auf dem Button, indem Sie ihn bei gedrckter StrgTaste anklicken und verschieben. Wenn Sie den Kreis horizontal mittig auf dem Button platzieren, mssten ober- und unterhalb des Kreises je 13 Pixel Platz sein bis zum Rand des Buttons sein (der Button hat eine Hhe von 96 Pixeln). Platzieren Sie den Kreis auer 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 auswhlen. Nun knnen Sie mit der Maus Hilfslinien vom Lineal in die Arbeitsflche ziehen, mit deren Hilfe das Pixel-genaue Arbeiten sehr gut gelingt. Auerdem ist die lnfo"-Palette (Fenster > Informationen") fr solche Arbeiten sehr hilfreich.
68 webdesigner 04/2013
I Wf c J < * * *u ) ----------------------------M %
>UM
Whlen Sie nun in demEbenenstile"-Dialog die Option Abgeflachte Kante und Relief". Stellen Sie dort unter Struktur" folgende Werte ein: Stil" -Abgeflachte innen", Technik" - Abrunden", Farbtiefe" 20 Prozent, Gre" 2 Pixel,Weichzeichnen" 0 Pixel. UnterSchattierung" msste derWinkel" bei -60 stehen, wenn die Option Globaler Lichteinfall verwenden" ein geschaltet ist. Senken Sie unter Lichtermodus" die Deckkraft" auf 50 Prozent und unterTiefenmodus" die Deckkraft" auf 30 Prozent ab.
i | * IN
IQ
OB
TUTORIAL
fung den letzten Schliff zu geben, habe ich zustlich noch einen Schein nach innen" eingefgt. Das vorein gestellte Hellgelb habe ich ber den Farbwhler" durch schwarz ersetzt und diesen dann mit einem berfllen" von 1 1 und einerGre" von 8 Pixeln ver sehen. Dadurch wirkt der Schein nach innen" wie ein ringfrmiger Schatten.
12
rechtwinklig oder im 45-Winkel zum letzten Ankerpunkt stehen. Dort wo dasf" Kurven hat, klicken Sie einfach von dem Punkt, an dem die gerade Linie in eine Kurve bergeht, und setzen den nchsten 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.
Schein nach innen

Um bei dem Kreis dem Eindruck einer Vertie
* *
13
Das Logo besorgen

Nun brauchen wir das Facebook-F als Icon fr die
Kreisflche. 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 mchte ich hier zeigen, wie Sie dasf" aus einer Grafik vektorisieren knnen. Auf diese Weise lsst sich jedes beliebige Form nachbauen. Schauen Sie sich im Internet nach Facebook-Logos in einer guten Auflsung 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 zu besttigen. Logobild und klicken Sie auf Platzieren". Drcken Sie dann Enter, um das Platzieren
r
J
Das Logo vektorisieren 2

Um nun die Kurven in den Pfad einzufgen, kli
cken Sie bei gedrckter 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 knnen Sie mit gedrckter Maustaste ver schieben, sodass sich zwischen den benachbarten Anker punkten eine Kurve bildet. Auerdem besitzt der Punkt zwei Hebel, mit denen die Kurve weiter angepasst wer den kann. Setzen Sie jeweils an den beiden Kurven desf" 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 desf" liegt. Die Hebel knnen Sie ebenfalls mit dem Cursor bei gedrckter Strg-Taste verschieben. Sollte eine Kurve vllig missraten sein, knnen Sie den Kurvenpunkt mit einem einfachen Klick wieder entfernen und mit einem neuen Kurvenpunkt von vorne beginnen.
facebook
M
Das Logo vektorisieren 1
<5
Legen Sie nun eine neue Ebene an und whlen
Sie dasZeichenstift-Werkzeug". Vergrern Sie die An sicht so, dass das f" die Arbeitsflche fllt. Klicken Sie
dann mit dem Zeichenstift-Werkzeug zunchst einen Pfad aus geraden Linien entlang der Umrisse desf". In dem Sie whrend des Setzens der Ankerpunkte die ShiftTaste gedrckt halten, werden nur Linien erzeugt, die
04/2013 webdesigner
69
TUTORIAL
16
Pfad verkleinern und fllen

Die Beschriftung soll nun mit dem Textwerk zeug" eingefgt werden. Whlen Sie das Werkzeug, stel len Sie in der Optionsleiste wei als Farbe sowieMyriad", 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 wre sie in den Butten eingekerbt, wird auch sie mit ei nem Ebenenstil versehen. Rufen Sie wieder die Ebenenstile"-Palette auf und whlen Sie dort Abge flachte Kante und Relief". Whlen Sie dieses Mal folgende Werte: Stil: Abgeflachte Kante innen", Technik: Abrun den", Gre: 1 Pixel", Weichzeichnen: 0 Pixel" Winkel: -60", sowie eine Deckkraft" fr Lichter-" und Tiefen mo dus" von jeweils 75 %.
f~AN *V ttYT,*
ibcac Aw m W
Gehen 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 whlen SieFrei transformieren Pfad". Halten Sie die Shift-Taste gedrckt und verkleinern Sie den Pfad so weit, bis dasf" in den Kreis des Buttons passt. Verschieben Sie den Pfad in den Kreis und besttigen Sie mit Enter. Rechtsklicken Sie nun erneut in den Pfad und whlen Sie Pfadflche fllen". Stellen Sie in dem Dialog dann bei Vordergrundfarbe" die Option Wei" ein und besttigen Sie mit OK".
+4 *** IKK*?)
f > ml
Ntat Am *
.1 3 ....K
je
tm
jS w kr- ' l 1 1 * 'w * i __fl
Triff uns auf facebook

CZK
5 1V O T C *
V' N *
ft*vrS &
17
Die Kerbe
Der Bereich mit dem Icon in dem Kreis soll durch
eine senkrechte Trennlinie von dem Bereich, der die Be schriftung trgt, abgegrenzt werden. Die Trennlinie soll zudem eine Schattierung erhalten, sodass sie wie eine Kerbe aussieht. Blenden Sie zunchst 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. Whlen Sie dann das Linienzeichner-Werkzeug" und stellen Sie in der Optionsleiste eine Strke" von einem Pixel ein. Ziehen Sie nun eine senkrechte Linie entlang der neuen Hilfslinie ein, die die gleiche Hhe hat wie der Kreis. Damit die Linie wie eine Kerbe aussieht, bentigt sie noch einen Ebenenstil. Rufen Sie die Ebenenstile"Palette auf und setzen Sie ein Hkchen bei Abgeflachte Kante und Relief". Stellen Sie dann dort die folgenden Werte ein: Stil: Abgeflachte Kante auen", Technik: Abrunden"Gre: 0 Pixel",Weichzeichnen: 1 Pixel",Winkel: -60", sowie eine Deckkraft" frLichter-" und Tiefenmo dus" von jeweils 75 %.
19
Weitere Buttons
Der Facebook-Button ist damit fertig und kann
bequem als Grundlage fr weitere Buttons genutzt werden. Sofern Sie die weitere Buttons in dieser Photoshop-Datei anlegen wollen, ist es ratsam, alle Ebe nen des Facebook-Button zunchst in einer Gruppe zusammenzufassen. Klicken Sie dazu einfach auf das Ordnersymbol unten in derEbenen"-Palette. Markie ren Sie dann die Ebenen des Buttons bei gedrckter Strg-Taste und ziehen Sie sie dann mit der Maus ber den Ordner. Benennen Sie dann den Ordner inFacebook" um. Der Ordner kann nun bequem dupliziert werden (Rechtsklick >Gruppe duplizieren"). Fr die weiteren Buttons muss dann die Farbe und Be schriftung gendert werden. Zudem mssen Sie sich entsprechende Icons, wie etwa den Twitter-Vogel im Falle einesTwitter-Buttons, besorgen und vektorisieren.
I o
70
webdesigner 04/2013
M
Authorised Systems Integrator
ADOBE CREATIVE CLOUD FR TEAMS ROADSHOW

E X K L U S I V E F E A T U R E S F R K R E A T IV - T E A M S D A T E I F R E I G A B E IM T E A M U N D F R K U N D E N Z E N T R A L IS IE R T E S L IZ E N Z M A N A G E M E N T D IG IT A L E S P U B L I Z I E R E N A D O B E ED G E TO O LS R E S P O N S IV E W E B D E S IG N M U S E , H T M L5 * . . .'T- ' ; ..
Hamburg: 09.04.2013 Stuttgart: 11.04.2013
Mnchen: 12.04.2013 Wien: 18.04.2013
Kln: 19.04.2013 Berlin: 23.04.2013
r;
E g tfl
L J I + k . . . . i
Das Event fr alle Unternehmen, die innovative Ideen fr Design, W eb und Video umsetzen und mehrere Adobe Kreativ-Arbeitspltzs h^ben.
JE T Z T ANMELDEN www.cancom.de/CreativeCloudTeam
TUTORIAL
SEO fr WordPress
von Tobias Henke
SEO fr WordPress A u c hu n t e rS E O -G e s ic h t s p u n k t e nb ie t e tW o r d P r e s sz a h lr e ic h eM g lic h k e it e n .W irn e n n e nIh n e n

d ieb e s t e n T e c h n ik e n ,u m Ih r eS e it ez uo p t im ie r e n .
ordPress gilt schon in seiner Standardinstal lation als das wohl SEO-freundlichste Con tent- Management- System berhaupt. Das
det man Formulierungen wie. Unseren neuen Artikel zum Thema XY finden Sie hier", wobei nur das Worthier" verlinkt ist. Suchmaschinen fllt es im letzten Beispiel schwerer den Link thematisch einzuordnen, daher sollte man hier, wie gesagt, immer mit Keywords arbeiten.
bedeutet natrlich nicht, dass es nicht trotzdem wichtig und sinnvoll ist, seine Seite fr Suchmaschinen weiter zu
optimieren. Dies betrifft natrlich den Content, aber auch Dinge wie beispielsweise die richtige Auswahl ei nes SEO-Plugins. Im Folgenden mchte ich Ihnen zei gen, wo man bei einer WordPress-Seite in Sachen Suchmaschinenoptimierung ansetzen muss. Themen sind hier neben den bereits erwhnten beispielsweise die richtige Verlinkung eigener Beitrge, sowie die Frage, wo man Keywords einsetzt. :]] Keywords gehren in die Verlinkung. Wer einen Blog betreibt, sollte auf jeden Fall neuere mit lteren Artikeln verlinken und einen Track-/Pingback set zen, sodass es fr User einfacher wird, ltere Artikel zu finden. WordPress setzt standardmig einen Pingback von lteren auf neuere Artikel, aber fr den Fall, dass das System mal Macken hat, ist es immer sinnvoll, auch ma nuell Trackbacks zu setzen. Wichtig fr die Suchmaschinen ist, dass man wichtige Keywords direkt innerhalb des Links platziert. Also bei spielsweise eine Formulierung wieF1ier der neue Artikel SEO fr Word Press" komplett in den Link setzen. Oft fin
webdesigner 04/2013
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 standardmig deaktiviert. In WordPress haben Sie die Mglichkeit, 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 enthlt, oder Sie knnen sich fr eine Variante ent scheiden, die den Namen des Artikels, das Erscheinungs jahr und den Monat enthlt. Die dritte Variante bezieht sich auf ltere Artikel, die sich bereits im Archiv befinden. Auerdem haben Sie die Mglichkeit, sich fr eine be nutzerdefinierte Struktur zu entscheiden.
T U T O R IA L
SEO fr WordPress
O Standard 0 Tag und N am e 0 Monat und N am e 0 Numerisch

9 Beitragsname
http://www.webdesigner-magazin .de/demo/ ?p=l23 http://www.webdesigner-magazin.de/demo/20l3/e2/25/Beispielbeitrag/ http://www.webdesigner-magazin.de/demo/20l3/02/Beispielbeitrag/ http://www.webdesigner-magazin.de/demo/archive/l23 http://www.webdesigner-magazin.de/demo/Beispielbeitrag/
Benutzerdefinierte Struktur
http://www.webdesigner-magazin.de/demo
/postnameV
Z w is c h e n diesen E in s te llu n g e n k n n e n Sie sich e ntscheiden.
Auch Bildern sollten Sie einen fr sich sprechenden Titel verpassen, das heit nicht Bildnamen wie Bild 123.png verwenden, sondern aussagekrftige Namen wie bei spielsweise Fritz-Mller.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}?>
Dieser Code fragt jedes Mal, ob man sich gerade auf der
Vorteile der sprechenden Permlinks"

Ein besonders offensichtlicher Vorteil der sprechenden Permlinks ist, dass eine aussagekrftige URL userfreund licher ist, als eine Nummernkombination aus der ber haupt nichts ber den Content hervorgeht. Auerdem ist es suchmaschinen-freundlicher, wenn in der URL be reits die Artikelberschrift und das ein oder andere Keyword 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 knnen, bentigt man Zugriff auf die .htaccess-Datei. Diese Datei muss sich im Hauptordner von WordPress befinden. Damit die nderungen auch aktiv werden, muss die .htaccess-Datei beschreibbar (CHMOD 666) sein. Auer dem muss das Apache-Modul mod_rewrite aktiv sein.
Startseite befindet oder nicht. Ist dies der Fall, wird zu nchst der Name des Blogs/der Seite in die URL ge schrieben und dann die Kurzbeschreibung (Description). 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.
Zwischenberschriften sind attraktiv fr die Suchmaschine

Zwischenberschriften sind nicht nur ein gutes Mittel, um Texte zu strukturieren, sie haben auch fr Suchma schinen einen nicht zu unterschtzenden 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
So optimieren Sie den Seitentitel

Die Suchmaschinen schauen analysieren im Titel ledig lich die ersten 60-70 Zeichen an. Deshalb gehren die berschrift und wichtige Keywords auf jeden Fall in den Seitentitel. Eine Mglichkeit ist, dass man mit Hilfe eines Code-Editors folgendes in die header.php eingibt: <?php if (is_homeO) {?> < titlex?php bloginfo(,name'); ?> - <?php
aus eine dynamische XHtml-Seite. Eine wichtige Rolle bei der Gestaltung der Zwischen berschriften ist der WYSIWYG-Editor fr HTML. WYSIWYG steht frWhat you see is what you get" und meint in diesem Fall, dass die Darstellung der Seite im Editor whrend der Bearbeitung mit der Darstellung der Seite auf einem anderen Gert bereinstimmt. Im WYSIWYG-Editor fr HTML hat man sechs verschiedene Elemente zur Auswahl, mit deren Hilfe man den einzel nen berschriften und Zwischenberschriften ein un04/2013 webdesigner
73
TUTORIAL
SEO fr WordPress
terschiedlich hohe Ordnung gerumt wird und zwar von H1 (hoch) bis H6 (niedrig). Seit WordPress 3.0 hat WordPress die Ordnung H1 fr die Artikel- oder Blogberschriften reserviert, so dass man nur noch zwischen den berschriften der Ordnung H2-H6 whlen kann. In zwischen gibt es deutliche Anzeichen dafr, dass Goolge den H1-berschriften eine eher geringe Bedeutung beimisst und die Kategorien H2 und H3 eher entschei dend fr ein gutes Ranking sind. Man sollte die berschriften nach semantischen Ge sichtspunkten whlen, 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.
dies mit recht wenig Aufwand mglich ist. Unter den Suchergebnissen taucht bei jeder Suchma schine ein kleiner Text auf, die Meta-Description. Diesen Text knnen Sie mit Hilfe des Plugins mit dem Titel Allin-One-SEO-Pack" bequem editieren. Wenn Sie das Plug in nutzen, haben Sie die Mglichkeit, sich fr einen Home-Title, die Home-Description, die Homekeywords, den Post Titel und den Page Title zu entscheiden. In den Home Titel gehrt das zentrale Keyword Ihrer Sei te sowie den Namen Ihrer Seite ein. In die Homediscription gehrt wie bereits erwhnt der Text, den Sie unter Ihrem Suchergebnis gerne lesen wrden. Die Homekey words haben fr Google inzwischen keine Bedeutung mehr. Hier knnen Sie natrlich trotzdem die Keywords eingeben, die fr Ihre Seite relevant sind. Wenn Sie beim Post Title %post-title%" eingeben bedeutet das, dass fr jeden Artikel immer nur der von Ihnen festgelegte Arti kelname verwendet wird. Beim Pagetitle knnen Sie
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 verffentlicht. In Blogs passiert das besonders schnell, da ein Artikel unter anderem auf der Startseite als auch unter dem jeweili gen Permalink auftacht. Wenn Flle von Dublicate Con tent auftauchen, mssen die Suchmaschinen sich fr 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 fr WordPress, die das Problem lsen. 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 entschrfen, in dem man mit Weiterlesen"-Links arbeitet, wie es beispiels weise die groen Nachrichtenportale tun. Auf den ber sichtsseiten muss man klicken, um weiterlesen zu kn nen und nur auf einer Seite ist der vollstndige Artikel zu sehen und das Problem des Dublicate Contents ist somit zumindest innerhalb eines Blogs gelst.
hnlich verfahren und mit diesem Befehl arbeiten: %page_tltle% | %blog_title%.
SEO-Plugins fr WordPress
Es gibt inzwischen mehrere SEO-Plugins fr WordPress. Diese hier einzeln detailliert vorzustellen und die ge naue Funktionsweise vorzustellen, wrde den Rahmen des Artikels sprengen, da allein SEO-Plugins fr Word Press Stoff fr einen ausfhrlichen Artikel liefern. Daher werde ich die bekanntesten SEO-Plugins hier kurz nen nen und mich auf einige allgemeine Angaben be schrnken: Das vielleicht umfangreichste SEO-Plugin ist das kos tenpflichtige wp SEO. Es bietet umfangreiche Einstel lungen und ist dank stndiger Aktualisierung immer auf dem aktuellsten Stand.
f I . * W l H l* W I C ....................
So verwenden Sie die richtigen Metatags

Die Bedeutung der Metadatan fr die Suchmaschinen ist inzwischen zwar zurckgegangen, fr Google sind sie angeblich deutlich weniger wichtig als frher, aber es schadet trotzdem nicht sie zu optimieren. Vor allem, da
74
webdesigner 04/2013
D a n k sehr schneller A ktu alisie run g en ist wpSEO das w o h l beste SEO-Plug in f r WordPress. wpSEO le g t beispielsweise nach w ie vo r groen W ert a u f die o p tim a le A npassung d e r M e ta d a te n , w ie Sie h ie r erkennen knnen:
TUTORIAL
SEO fr WordPress
Textfeld a ls P latzhalter
VergaDO W w HO w W w rH Jn OxUW pfO e r e c n
Steuerung der Indexierung

%J A utom atische G e n e n e ru n g d e s R ob ocs-M etaiag akftvieren
Startseile Bo < trge S eiten
Steuerung dar Index rung e ru einer Berche der Wobsie
Startseite B eitrge S e ite n inhaltsarten M e d ie n K a teg o h en Suche
ind ex. follow ind ex, follow index, follow ind ex, follow m dex, follow notndex. follow noendex. follow rxxn d ex. follow nondex. follow n o in d e x follow no m d ex. follow
Inhantiinn M e d e n
K a teg o n en S uche S chlag w rter Autoren
Schlagw rtor Taxo n o m ien A utoren R estlich e S eiten T a x o n o m ie n Tre n n ze ic h e n n * P latzhalter Zechen a b vfeueA* Trenner zwischen em ze to n PteizhaAern y Um form a&erung d e r S chreib w etse
UmwrarxJung de T M n GroS- oder Wenechretoung
ResG c h e S eden
M e tatag -W e rte M e x . toflow und tnex nicht a u s g e b e n Standard-Werte Dentigoc e r * D e k r e te n Im Oueftext N o o d p a ls W ert in s R obocs-M etatag schreib en K ene Datonvenwendung aus dem D M O Z/O D P -V errech ne N o a rc h iv e als W ert ns R o b o ts -M e ta ta g schreiben
K e n C a c h n g de r W o s o to n s o to n s S u c h m a s c h n e n
K e in e
lL -
b e re m ig u n g vom uDertiussgen c o o e Entfernung von HTML- und anderen strenden Fragmecrten
B eitrag e nach 6 M o n a te n rrat notnex, toflow v e rse h e n

Aw1ofll>ecN> S o o rru n g |kor<K B o e a g o v o r ln d a x r u n Q (? )
n d eru n g e n b e rn eh m en
C a n o n ic a l Link fr je d e W ebse<te g e n e rie re n Erm ttng und Ausgabe bevorzugter Adresse a b CanoncaJ
H ie r sehen Sie das M e n des P lug in s wp-SEO
( n d e ru n g e n b e rn e h m e n
Beschreibung
g
H ie r k n n e n Sie w e ite re d e ta illie rte A n p a ssu n g e n d e r M e ta d a te n v o rn e h m e n
Autom atische G e n e rieru n g d e r M e tab esch reib u n g ak&vieren Ausgao der Doscripeion ab Metainformafion
hnlich umfangreich ist das All in One SEO Pack,

S ta r t* * /le Beitrge S eiten Inhaiisarten M ed*en K ateg o n en S uche S chlag w rter Autoren Taxo n o m ien R estlich e S eiten K ein w e rt Textausschm tt a u s aktu ellem Artikel l extausscnnitz a u s aktu ellem Artikel Textausschm tt a u s aktu eller tahaftsart M edium titel A /tik e b te l Titel gelisteter Artikel Titel gelisteter Artikel Tiiel o * li* iftt* r Artikel Titel gelisteter Artikel lite i gelisteter Artikel Titel gelisteter Artikel *
A W
a
das sich besonders gut fr Einsteiger eignet, da es sehr viele Voreinstellungen gibt. Ein sehr gutes SEO-Plugin fr Fortgeschrittene ist das sehr umfangreiche Plugin Headspace 2. Weitere bekannte SEO-Plugins sind izio SEO, Platinium SEO Pack und WordPress SEO Master. Das ist natrlich nur eine Auswahl. Aber unter diesen sechs Plugins ist fr jeden Zweck etwas dabei, ob fr einen kommerziellen Blog oder fr einen Ein steiger.
V
a
V
A
A w A A
B eschrnkung a u f m axim al 1 4 0 Z eich en SchersteAung der voAetftndgen S cN barteft in Google Sncpets
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 SEOfreundlichen Wordpress nahezu das Optimum an SEO-Freundlichkeit herauszuholen.
yA u sg ab etfu ta ch lie d ttcri w ilb ^ n O ^ g vf saue

Krzere, defr ausgeschriebene S itz e in den Suchergebnssen
Optionale M eUbtfbchreiuny der StarteeiU*
M aruoie Descrpton fr <*e Startseae W is s e n s d a te n b a n k mit Hilfesexten und d o k u n en & e rte n Funkftonen rund
n d eru n g en b e rn eh m 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
04/2013 webdesigner
TUTORIAL
CSS3 Animation von Andreas Hitzig
Als Objekte laufen lernten

CSS3 bietet Ihnen verschiedene Mglichkeiten, 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
(k o ***
V w tw i
t e -
ftrcfoi
. ;.u i 0;<
ank CSS3 ist es inzwischen mglich, Bewegun gen auf einer Webseite ohne weitere Hilfsmittel zu erzeugen. Dazu war in der Vergangenheit
zumindest JavaScript, wenn nicht sogar eine Flash-Ent

Mcnct (ip w c t
O O p o n
to 1 1 . 1
114
wicklung notwendig. Die Grundlage hierfr stellt die @keyframes-Technologie 1 2 . 1 dar, die wir in unseren Workshop-Beispielen einsetzen. Leider ist CSS3 noch nicht flchendeckend 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 untersttzt werden, sehen Sie bei spielsweise in der Kompatibilitstabelle von Norman's
1 t
5.1*
C iK X treu n dCm *tob UK*#***9m
A A
II
RM vl
80Sam o*
Ck*w#
IM F IM
II
NtU
iMteieSM'jiOtfMs
(http://www.normansblog.de/demos/browser-support-checklist-css3/)
Blog
O * c* j
M ts
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
Tt
IfKMftrm 30
T i b A u (ii fofelC SS) Support'
972S
9X*\
f9 S
W 4S
5 6 .C S
M.4S
to e s
3.3S
noch eine recht starke Verbreitung haben, sollten Sie nicht zentrale Funktionalitten Ihrer Website vollstndig auf Basis dieser Technologie entwickeln, sondern den Besuchern immer noch eine Alternative bieten. In einem solchen Fall sollten Sie ein Framework wie Modernizr
U 9S
rm o flfm
itotfttfrad itoftrtaroM 'M f ufc& ttor rautttMUMtrutf s*cem n te rMnMimpMM *T h i U M 0 6 *i ft6 * rr*A a v M tja C & J p A M a Airtm s tpwi M
Inzwischen untersttzen alle aktuellen Browser die Funktionen zur Animation, wenn auch teilweise nur in einer Engine-abhngigen Version.
Jk.
nutzen, um die vorhandenen Funktionen im Browser Ih
Auf einen Blick

Verwendete Software:
Texteditor Browser mit CSS3 Untersttzung
res Besuchers zu berprfen und auf Basis dessen die entsprechende Darstellung whlen.
*1 Grundlagen verstehen
\ J
1 Nicht alle Browser haben bereits den bergrei fenden CSS3 Standard in Bezug auf Animationen imple
Technologien und Standards:

HTML5, JavaScript, CSS3
mentiert. Aus diesem Grund mssen Sie, wenn Sie die entsprechenden Funktionen verwenden mchten, auf die lokalisierte Implementierung des Browser-Herstellers zurckgreifen. Dies bietet keine zentralen Nachteile in der Ausfhrung, fhrt jedoch zu erhhtem Pflegeauf wand. In Bezug auf die Animationen bedeutet dies eine vierfache Implementierung der jeweiligen Definitionen: eine bergreifende Variante und drei Lokalisierungen fr
Experte:
Andreas Hitzig
76
webdesigner 04/2013
TUTORIAL
CSS3 Animation
-i
mwhaoAD
D O C H M FN T A TIO N
R FSO U RC FS
N FW S
"An indispensable tool."

B ru c B o w * A d o b e JS iC M za Ld b J t e d u c L M t & y a
Modernlrr 1$ a JavaScript library lhai detects HTML5 and CSS3
Download Modernizt .6.

l ) v itw* rtwwnwHr<1, iiorry*^v^5^<1
DevetopmHif wfMnn to tiewtop wh nd teem from. Th#n. d*# rttft m# Produrta* huirt i m nd picfc Jutt the tests you neetf
^
O O
Fo*ovw u on Twi-e-
features In the user's browser

W liv # use M tx ie in i/ r?
C o ^ ^ . e on G*Hub
orvrioPMfMT Sobar T h ew *nP5S

D v ' : X) M ovf nr
P R O D U C T IO N
Taiwvg aa*virt*g# dt cool r+M v**b t^rvwUeêt * g r#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 .s tvvS w l on/ CSS to hondte eac* w&adoa a b*o*sc' .-.ipporv. * fraru* or ft ITS pnWocr to# iWsr^ JVfU)*eM/v* *nf*AV#An? Mtrfy
G el started w ilh M odel nizi

V/îU MvVmif iy ,> you V hk romrH ov#c the ep*rw*<# th#-xigh taveScr^p*rtn v ^ i fa a h s * <Vf^<-hAn a t%im portent throuQhoiA yovf devotee*^ w t^r-e ^ you can. a'iO d o n 't to u%* h e v jv * r iv * i U ta p ro g ra tt^ e a t t v t t M t y fo conven*exe o r
Latest news
^V4rr Tf ,VtJ
MedarWir Po-Ucjr on l i W i f T M i
fldltantft Diitot P O W V M P * V > O U $

Rcod our poicy on bugs and âisc
How it works
MuOvriU' 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 iu i f v you to key yov? CSS on Mo4 a*nijr t jp c o r ; do;cm o' a a ^ opoonafy rwsud** ya ps* ^ ice renttaanAi foaang o# # # /'vsi .a a w m i r#au*f#
O+rk o n ttl* (L Htt c f feetnrri
Pmformorte
JoewntftiMfi toft ngrrttc

; : ;S 4 l :ML. y *:t. I . fow*r Are*
M od#fni*r 2 . 0 ^ r e l a d
tte y y .io
"v*1 < * < * < *
Vr^ 9 M fld trriif 2 fl rclcm tf

W<ir,r 'O ti
**v\k '* K I**'Vtfr.-r'v.fl** < Jv V / ffyvr* SeiA fcvt
f îTnnininrwhfi fnaim triMrinM

fr M iyCiLm^grr P&'.:
Also c b *c * out our c y M ti2 L 6 M 3 Tip. cNk ow
m* M iW rnif
2 0 1 2
Meen or tae** more about &
tetcnrca ioatvi rrlf^McOf^ tl?
y'i ;v a
V to omtUy iirw yot* cune* tKcwve* a
flcar.ures.
HTML
ustooY fcujitfcer Google hNcrosoft
Abuitcom
san ostBrous
r u k iM (
auw
U*4 0**+*'
M rnandt >>*
M oerraff M V *V < fMCT N ^ ) i lo 9 *t you uo rid n*v*ro
^ Mit dem
hit** A M tcvW
09
Framework Modernizr fragen Sie die vorhande nen Fhigkeiten eines Browsers ab.
die Mozilla-Engine (Firefox), Webkit (Safari und Chrome) sowie fr den Opera Browser. Das folgende Beispiel zeigt eine entsprechende Struktur fr die @keyframes-Eigenschaft.
{ }
Das erste Beispiel

@keyframes demo
\ J ^ l m ersten Beispiel gehen wir nher auf die

grundstzliche 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 nchsten bewegt werden, sondern
@-moz-keyframes demo /* Firefox V
lediglich um eine Demonstration der Grundtechniken. Deswegen ist das Beispiel so einfach wie mglich gehalten. Eingebettet wird die Animation eines Objektes in den style-Abschnitt einer Webseite, die Definition erfolgt
@-webkit-keyframes demo /* Safari und Chrome V
zweistufig. Im ersten Schritt legen Sie die Animation als solche, wie bereits oben gesehen, innerhalb von @keyframes fest. In unserem Fall soll noch keine wirkliche Ani mation, sondern lediglich die Farbe eines Objekts vern dert werden. Dies geschieht ber einen Farbverlauf und
@-o-keyframes demo /* Opera V
die beiden Schlsselbegriffe from und to.

04/2013 webdesigner
TUTORIAL
CSS3 Animation
from {background:green;} to {background:pink;}
definieren und einen zeitlichen Ablaufzu definieren. Im folgenden Beispiel gibt es insgesamt vier Zwischen schritte, bis die Farbe von Grn zu Pink wird. Am Ende springt das Rechteck automatisch wieder auf die Aus gangsfarbe zurck. @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, whlen wir einen li nearen Verlauf und weisen allen Objekten den gleichen prozentualen Wert zu. Wenn Sie eine Farbe lnger anzeigen mchten, passen Sie die Werte entsprechend Ihren Vorstellungen an. Diese Anpassung haben wir exemplarisch fr die Stan dard @keyframes demo Definition gemacht. Diese mss te natrlich auch noch entsprechend fr die Lokalisierun gen der Browserengines analog definiert werden.
Die Hintergrundfarbe des Objekts verndert sich somit von Grn nach Pink. Damit ein Objekt auch animiert oder wie im Beispiel farblich verndert werden kann, bentigen 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 Hhe von 150 Pixel und der Hintergrundfarbe Grn. Dieses verknpfen Sie anschlieend mit der zuvor definierten Animation und legen auch die Zeitdauer fr die Ausfhrung fest in unserem Beispiel fnf Sekunden. Diese Definition um fasst aufgrund der zuvor geschilderten Konstellation die vier Flle fr 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 bentigen 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> E in m e h rs tu fig e r F a r b v e r la u f ...
Damit haben Sie die Grundlage fr die folgenden Beispie le sowie ein farblich animiertes Rechteck geschaffen. Eine Anim ation knnen Sie unter CSS3 m it mehreren Zwischenstufen definieren.
E in e rs te s 'S k e y f r a m e s B e is p ie l
Objekt bewegen
Eine Animation unter CSS3 kann natrlich viel mehr sein, als nur ein reiner Farbbergang, denn schlie lich sollte ein Objekt ja auch von einer Position zur Das erste Beispiel zeigt, wie einfach ein Farbbergang als Anim ation dargestellt werden kann. Eine solche Animation kann nicht nur einen bergang enthalten, sondern auch mehrere. Im Beispiel des farbli chen Verlaufs ist es mglich, mehrere Zwischenstufen zu
78
webdesigner 04/2013
nchsten bewegt werden knnen. Der Programmcode hierfr sieht gar nicht viel anders aus als im vorherigen Beispiel und wird lediglich fr die einzelnen Zustnde um die Koordinaten des Objektes ergnzt. In unserem Beispiel fhrt das Rechteck erst ein mal nach rechts um 300 Pixel, dann um 300 Pixel nach unten, anschlieend 300 Pixel nach links, wieder schrg
TUTORIAL
CSS3 Animation
nach oben und zurck auf die Ausgangsposition. @keyframes dem o{ 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 anschlieend auch in Bewegung umgesetzt werden knnen, ist noch die Festlegung eines Bezugspunktes wichtig. Diesbe zglich ergnzen Sie die Definition des div-Tags entspre chend um die Eigenschaft position. In unserem Beispiel ist es ein relativer Bezugspunkt zum Ausgangspunkt. position:relative;
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 fr Mozilla, Webklt und Opera*/ } Fgen Sie an der entsprechenden Stelle die zugehri gen Gegenstcke fr die drei Browser-Engines mit ein. Falls Ihnen diese Definition zu lang Ist, knnen 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 fr Mozilla, Webkit und Opera*/ }
Alle Angaben, welche Sie innerhalb von @keyframes ge macht haben, orientieren sich somit am Startpunkt der Animation.
E in m eh rstu fig er F arb v e r la u f m it B e w e g u n g ...
Kombination von Bewegungen

Sie knnen mit CSS3 natrlich nicht nur eine Be wegung festlegen und ausfhren, 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 fllt es von oben rein, ruckelt noch zweimal kurz und bleibt dann liegen. @keyframes demol {
Natrlich sind auch Bewegungen m it CS53 a u f Basis von Koordinaten mglich.
0% {background:green;left:Opx; top:0px; animationtiming-function: ease-out;} 20% {left:50px; top:300px; animation-timing-function: ease-in;}
Weitere Informationen zur Animation

Im ersten Schritt haben Sie nur eine grundlegen de Festlegung der Eigenschaften fr Ihre Animation ge troffen. Es gibt jedoch noch eine Reihe von weiteren Ei genschaften, die Sie festlegen knnen. Im Kasten auf Seite 80 haben wir diese fr Sie gegenbergestellt. Fr die einzelnen Browser gibt es wieder, wie bereits be kannt, entsprechende Lokalisierungen. Diese sind durch ein entsprechendes Prfix, analog der Keyframes-Eigen}
40% {left:100px; top:250px; animation-timingfunction: ease-out;} 60% {left:150px; top:300px;animation-timing-function: ease-in;} 80% {left:200px; top:250px; animation-timingfunction: ease-out;} 100% {left:250px; top:300px;animation-timingfunction: ease-in;}
04/2013 webdesigner
79
TUTORIAL
CSS3 Animation
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 abwrts geht, wird es ein wenig schneller, aufwrts entsprechend ein wenig langsamer. Die beiden Animationen demo und demol kombinie ren Sie anschlieend durch die Anpassung der div-Definition. animation: demo 5s, demol 3s; Damit werden nach dem Start die beiden Animationen nacheinander ausgefhrt.
Mehrere Bewegungen kombinieren...
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 mglich. Dies knnen Sie natrlich 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 verndern. Sobald die Browser-Entwickler die Funktionen komplett implementiert haben, knnen diese auch flchendeckend eingesetzt werden. Bis dahin bentigen Sie zum einen eine Analyse mit einer Bibliothek wie Modernizr und zustz liche Aufrufe fr die lokalisierten Versionen der einzelnen Browser-Herstell er. Dies blht den Programmcode nicht nur unntig auf sondern sorgt natrlich auch fr zustzliche Fehlerquel len, da nderungen an bis zu vier Stellen nach gezogen werden mssen.
Sie knnen mehrere CSS3 Anim ationen m iteinander verknpfen und in Reihe ausfhren lassen.
Fr die Animation mit CSS3 gibt es verschiedene Eigenschaften. In der folgenden Tabelle werden diese kurz vorgestellt
m
und beschrieben.
Eigenschaft
@keyframes animation
Beschreibung
Legt die Eigenschaften der Animation fest. Eine bergeordnete Eigenschaft, in welcher Sie alle folgenden in Kurzform verwalten knnen. Lediglich die Eigenschaft animation-play-state muss explizit gesetzt werden. Legt den Namen der @keyframes Animation fest. Legt die Dauer einer kompletten Animation fest. Im Standard ist der Wert auf 0 gesetzt. 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. Legt die Verzgerung fest, bis eine Animation startet. Legt die Anzahl an Durchlufen fr eine Animation fest. Im Standard wird diese nur einmal ausgefhrt. Sie knnen entweder einen numerischen Wert oder fr eine Animation ohne Endezeitpunkt angeben. Legt fest, wie die Animation abgespielt wird - im Standard Der Wert SJ^ ^ R H so ie lt die Animation fr die unaerade Anzahl an Durchlufen in der normalen Richtung und fr die gerade Anzahl in umgekehrter Reihenfolge ab. Gibt den Zustand der Wiedergabe an. Dieser kann entweder sein. oder
animation-name animation-duration animation-timing-function
animation-delay animation-iteration-count
animation-direction
animation-play-state
80
webdesigner 04/2013
WEB-GALERIE
Online Shops
HO HE
/1929 ^^^1939 ^ ^ /l9 4 9 ^ /l9 5 9 ^ ^ 1 9 6 9 BESTEHN
M O VIETITLESTILLS C O LLE C TIO N

Auf annays.com werden die besten TitelEinstellungen von Filmen prsentiert. Alle Screens sind nach Jahren sortiert und kn nen bequem ber die eigens eingerichtete Navigation im Header durchstbert wer den. Bei der Gestaltung der Seite hat man sich fr ein schlichtes, plakatives Design mit einem guten Schuss Retro" entschieden. Die zusammengetragenen Screens sind ein ungeheurer Fundus fr Vintage-inspirierte Screendesigns. Die typischen Stilelemente praktisch jeder Epoche leben hier wieder auf. Die Seite wrdigt damit einen Bereich in der Gestaltung von Filmen, der ansons ten nur zufllig wahrgenommen wird. B
FILM HO IR 1970 11979 1980 11989 1990 11999 200012009 201012019 UPDATES
190P
ACOUCCION CO NTAIN ING H UN D R ED SO F
2 0 1 3
I
MAIN TITLES FRO M FEATURE FILMS

fro m CLASSIC ji> 4RECENT FILM S
MOVIE TITLE STILLS COLLECTION
?0IH Cf NI U RVrox COIUM BIA PICTUR ES M l TR OG O IDW YN M ATER P A R A M O U N T PICTUR ES R K OR A O IO PICTURES U N IVER SAL PICTURES W A R N ER B R O S tad m ftty 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 llN n4t c n v r i n v 4 ft4
H i -C3J
n IIUL9
M ' UX1 mm
TITLE SCQUCNCCS
I a I I
CERCLE
ROUGE
LE
iWvWA4KCTUS ih itm i C H IS U M
wAAfctftttOS ArVCK A*r-C ft** 9 Met 1 Tiatfv m t 1110*1114 *
IW I I W JM
iw
1%U
IMTI tmmm C w n h i ) ftM fl Mr
f M fw itm m rn m
m-s
m n.* *
I--** !
i
M lV w
l t d
l i *<i
w w w i I m Wbwy P T O b
i Ai f t JM Cr f r i I W
HM
EHr
1%Mtt
T h e [N p W ARM ER 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 O K I l%44( 11014 l 7 ; * Mmi>11'* 1*14 Tirrrtvy B*r | l i r IU 1| . jmmrx 11V U c o m U y a il il%ro I1T?) T*r C K i n H ? ? 1VKH l* w 9 + 0 * fuM U M fillV i Q w h n n r* t0> U f f R i / w * i ) i l i N >00*1 M W M M |l|r< taw* JWM/My 11 M4 I M il U i iw M w |t%*1 IMOi ( I W lM irM N ra iilU 4
cn*4 i *
i m i n w m i im t jwni u K > * a im w
M *< I N h ^ l ( / I I <1*
illH I J M lP*4lltM .'Wn f 4M* # M * l 4 4 l * * lf W Mr* I I I I I '

> I/O* All >I IO * W W B * y i M l l 'l l 'l l i Kl * i I)
H W H l W iV 'W * I
h iie
ir
WHO GAIWTN HAM 70
i !GIRASOL!
INDAGINE SU UN C1TTAD/WO M W SO**A D l OONI S O ETTO
1 1919
I1 M 1114 l M I V l l M I W l * 1M4-1M* lM 9 t IW I1 U ) W I4 M W M ww w i IK A k4M IM 1 I4 M
f t t . *l M M Mm* CiMtv
> > I4 W 1914 * I M M H 1 I4 t t (

. Tf * 4 tM U W t% #
l|r* > lM 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 JO O O -tt*

h l UM * !* ChXtMHH IIM Wiri
IASI
THeOUTOf ToujneRS
> 4* 1. > 01 + N U * * * * * * tm m m m im m rn > * 6 m
Cm A * 4 T v ( f # M M M l * W
rou.0* t> <ccuccT0 N

V P IM fl Q 1 T M r M i
**X T K
M im
> * 4 r M
*n w n >|
4 * * 4 i
III I(4 w l4 * | w |
4#40 M n I frrr-
Ym ' m H
FOC*UJtorH*Af
O K
# iM M ai ftHMlHMI
14 C4 C OW IM C T *4 N ri 41 MM ftS04 tt fW *M H
OV/I fHilWWJkCI
TUTORIAL
Der perfekte HTML-Newsletter
von Andreas Hitzig
HTML-Newsletter gestalten In d ie s e m W o r k s h o p z e ig e nw irIh n e n ,w ieS iem ite in e m g u tg e s t a lt e t e n

N e w s le t t e re in e V ie lz a h lv o nK u n d e nu n dIn t e r e s s e n t e ne r r e ic h e n .
Stlln Si* sich*!, dass Si aii vuM*hd com zu lhrn Email Kontakt* Nn 2 uig*rt. damtt d l * Mails nicht im Spamordn! landan. ans ghgnc
GRATIS LIEFERUNG
f r
all A rtik e l
W D WHtern n o > *
/VIUSIK SPIELE BCHER MttrfRTIKEl
it einem Newsletter bleiben Sie in Kontakt mit den Besuchern Ihrer Website. Abhngig 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 mglich. In diesem Workshop zeigen wir Ihnen, wie Sie den Newsletter op timal gestalten und technisch umsetzen.
3D BIU-R4Y
D kX>
IV
ES IST UNSER 1. GEBURTSMG!

UM DAS ZU FEIERN, GIBT ES DAS HIER:
JEDEN ZWEITEN ARTIKEL!

RABAn ENDET AM MITTWOCH, DEN 27. FEBRUAR
RABATT WIRD AUF DN GNSTIGEREN DE &EIDEN GEKAUFTEN ARTIKEL ANGEWENOET UND G*T F0 AHES. AUER IPODS UND GSC*ENKGUT5CHlNE
20% RABATT AW
>
Ô 1 * nâltec*es Newsletters festlegen

I Bevor Sie sich an die technische Umsetzung des Newsletters machen, sollten Sie sich genaue Ge danken machen, welche Inhalte Sie Ihren Lesern mitteilen mchten. Abhngig vom Textumfang und der Anzahl der Bilder sollten Sie sich eine grobe Skizze an fertigen, die Sie anschlieend in den nchsten Schrit ten umsetzen.
HIER KAUFEN ODER UNSERE EMPFEHLUNGEN UNTEN ANSCHAUEN >
I
W S
I
/"V*} Aufbau mit Tabellen

\ J ^ l m Vergleich zu einer klassischen Webseite ste
hen Ihnen bei einem Newsletter deutlich weniger tech nische Mglichkeiten zur Verfgung, die Elemente auf dem Bildschirm anzuordnen. Vor allem die Positionie
The Strokes
Comedown Machine
D e p e c lte M o d e
TH E
K
f T
a i
20 /2 0
(
M C I
David Bow ie
Ju s tin Timber lake
rung mit Hilfe von CSS ist innerhalb des HTML-Modus der meisten Webclients, aber auch der E-Mail Program me nicht so perfekt ausgeprgt wie innerhalb des Brow sers. Aus diesem Grund sollten Sie fr die Aufteilung ei ner Newsletter-Seite den klassischen Weg ber die Tabellen gehen.
The Next Day (Deluxe Edition)
The 20/20 Expenence (Deluxe Edition)
9.99 t
Delta Machine (Deluxe Edition)
11.99 4
The Next Day
11.99 4
The 20/20 Expenence
12.99 4
Delta Machine
9.99
9.99 i
9.99 4

y / ) S o u n d C it y
amraro-*
M ttie O IIO lN O
Hmts
Exile (Deluxe CD DVD)
Dido
Oirl Who GotAway (Deluxe 2CD)
6 0 6
TA B
Generell ist die Untersttzung 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 mglich einsetzen, denn auch in diesem Fall ist die Un tersttzung nicht vollstndig gegeben. Fr die Aufteilung des Bildschirms verwenden Sie am besten verschachtelte Tabellen mit einer festen Brei tenangabe. Auf diese Weise knnen Sie im brigen auch problemlos Leerrume zwischen zwei Bildern
Soundtrack
Jirn i Hendrix
Sound Citf Real to Reel music by Dave Orohl
People Hell & Angels
9,99 4
13.99 4
13,99 4
Girl Who Got/wary
11,99 4
ii n o< f _______
Eie
Ein Newsletter bietet dem Leser aktuelle Informationen, beispielsweisezu Sonderaktionen in Ihrem Webshop.
82
webdesigner 04/2013
TUTORIAL
oder einem Bild und einem Text erzeugen. Sie fgen dazu lediglich eine weitere Tabellenzelle mit einer fes ten Breite ein. Die Umsetzung geschieht ber den Para meter width unter Angabe der Breite.
1 X tK rw I KJ
ES IST UNSER 1. GEBURTSTAG!

UM 0A3 ZU * K f H C W B 0A3 NCR.
f'V
*3 Die Breite des
Newsletters
JEDEN ZWEITEN ARTIKEL1

iAn Mft AM M f A U H N t t H I U t f l f f U m K L lP < ( M I N >
20% RABATT AU?
+ D Es gibt mehrere Wege, die Breite des Newslet

ters auf dem Bildschirm festzulegen. Entscheidend ist in erster Linie, ob Sie fr bestimmte Elemente eine fest vorgegebene Position auf dem Newsletter vorgesehen haben. Falls dem nicht so sein sollte, knnen 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. Fr die klassische Ansicht auf einem Desktop-PC wer den normalerweise 500 bis 600 Pixel verwendet. Die se knnen Sie entweder ber eine absolute Angabe setzen oder Sie verwenden ein Bild mit der entspre chenden Breite, das Sie in die Zelle einerTabelle einfgen. Immer mehr Anwender lesen Ihre Nachrichten auch auf einem mobilen Endgert und den entsprechenden E-Mail Clients. In diesem Fall sollten Sie beachten, dass nicht alle Gerte 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 vergrern, um alle Informationen problemlos lesen zu knnen.
D i * ? rjp A i l i i t d r i t S i r Itorr
* K M . k im
Das Basislayout bauen Sie, wie in diesem Beispiel er sichtlich, m it Hilfe von Tabellen auf.
{ft** *
m 4
mm
m m iii
9 i* *-i
W h
M*
4t
Jj
IWM
1 fc I
- m
9 jd
CjDSauJUkMB
__ fit\ /i /0*X p j i r n
IO IIIM ipA rrn
hmk ik ti". yawftttt

c r .T
/ " V ^ D ie richtige Maeinheit

i*Wie auch bei einer klassischen Website gibt es auch beim HTML Newsletter mehrere Dimensionen fr die Breitenangabe. Wie bereits gesehen sind die gebruchlichsten 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 G e samtbreite fr Ihren Newsletter festgelegt haben, knnen Sie im nchsten Schritt mit der Aufteilung beginnen und die einzelnen Tabellenzellen mit einer absoluten Pixelangabe versehen. Lediglich bei der Angabe der Schriften wre 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 Durchgngigkeit beibehalten und auch die Schriftgre mit Hilfe einer Pixelangabe festlegen.
_ a
Outlook zeigt im Standard keine Bilder zu Newslettern an.
f'V C Der Einsatz von CSS

\ J
Wenn Sie fr die Gestaltung Ihres Newsletters bestimmte CSS-Elemente bentigen, sollten Sie sich vorab ber den Implementierungsstand innerhalb der einzelnen Web- und lokalen E-Mail Clients informieren. Eine gute Quelle hierfr 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 sttzung 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 flchendeckende Un tersttzung der zentralen Tags fr die Festlegung der Schrift und der Schriftgre ber die Elemente font-family und font-style. Wenn Sie diese verwenden sollten Sie je doch auf die Kurzvariante einer Definition verzichten,
04/2013 webdesigner
83
TUTORIAL
Auch der hover-Effekt, der auf klassischen Websites gerne
o o o o
o
o
fr die Anpassung einer Verlinkung verwendet wird, funk tioniert in den meisten E-Mail Clients und Web-Mail-Ansichten nur eingeschrnkt. 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 ursprngliche E-Mail verschwunden, falls der Newsletter ber den Browser gelesen wird. Im Falle einer Verbindung auf Basis von https mssen sich die Le ser anschlieend sogar unter Umstnden neu anmel den. Fr die ffnung des Newsletters in einem neuen Fenster verwenden Sie einfach mit Hilfe des Parameters
torget="_blank"eine leere Seite als Ziel.
/"V ^ M e h re re Sichten
\ J /
E-Mail Anbieter mit einem Webclient zeigen eine HTML E-Mail normalerweise nicht direkt an, son dern stellen aus Sicherheitsgrnden immer nur die Text-Version dar. Damit knnen nicht unbemerkt In berprfen Sie im ersten Schritt, welche CSS-Elemente die wichtigsten Darstel lungsprogramme untersttzen. wie dies im Bereich der Webseiten blich ist sondern die Angaben entsprechend komplett ausformuliert mitgeben. Das Gleiche gilt im brigen auch fr 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.
Nvc 11 flt 77 M
halte geladen werden. 3 * a ^ - 0 .- g O
u * s
^
iim im m
*/ c .M KVMMtMr a nftwai-w
w ra ft juma i G
TSC. .jJ V v rrw fc trW
W J
iM rtwr
Verlinkungen integrieren
V ^ Ein Newsletter enthlt in der Regel eine Reihe von Verlinkungen, dies auf Seiten innerhalb oder au er Ihrer Website verweisen. Zustzlich kommt nor malerweise noch ein Link hinzu, mit dem Ihre Leser den Newsletter wieder abbestellen knnen. Leider interpretieren nicht alle E-Mail Clients den HTML- und CSS-Code gleichermaen. 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
A-XJT3 Vl*t* M i l
UM K M U . .4(1(1 M ,
1 l u t f l U l ) X it f '.t H rftAlOM 5i* h i M i w i n m H 4 * u m >+ ( m i h w ir C i C rl n t ili ic g K ;:i ? :: : i s ; Am ; f o i W K i t s ; . * : 4 W N U a j t : ' 'in : :; f* m t tf :i*.
Comi M M tn t ; m m : t< 9 mWC M IM n x fw A n in ;, K
u i t n a W i i m . v i n n u i n i M M
tu M l lu H l f I
trm .
U U ...M IMU.J fr m .. rMdli.MlMUaA, rfcll.
ta M iM
f e i
ill
lu f r >u4iU
(;u*s ;k;:;
hi u
l u - . t ; J W t W I
einen innerhalb des style-Tags und zum anderen ber ein zustzliches span-Tag. <a href="http://www.meinewebsite.de" style="color:blue;"xspan style="color:blue;">hier steht der Text vom Link...</span></a>
,M , ~
i
-i,
ii iu u v u
-J >1
;c n i f f i r i i U
; i u -: m
Bieten Sie eine alternative Ansicht fr alle Reader, die im Standard keine HTML E-M ail anzeigen.
84
webdesigner 04/2013
TUTORIAL
Aus diesem Grund ist es jedoch fr 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 HTMLSeite 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 zulsst, sollten Sie jedoch zu stzlich 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
v r*
Amazon Family Angebote und Rabatte
'/ -r* Nc* M M r a m W w fcyssn u m m M i
Matottt*wert> fTTi <
o m u n rc Spar-bo < w n
ii^ .
io
v leurtn fca hm Man i t tfiw i w m y
AHlCM 4 OM tM l
H..** <*4
*w
i 0*n tra rc-C o * trom w. M rtM k ]
'Z T
Am
m m
(Sparon)= \ ' 1 m o gr t M i
y
A lt iu r f c - r ( h w v r A / - j r t a l r 4*r t f i v h r
m c> i Um
tm m 4,
>*>.* Um jfcWH C*4m* kW
* W
Im
Y f . to
K I O 4 * .
Kinderwager
H W w a r w a l M M * ) S TU ttT
s-2 0%
Me tu Tere
Angebot der, ^ Woche . * V vv 1 --ieeeww<*d
V'
I rnm u + m*m <rn4m
mm
Q Darstellung von Bildern

\ J O N ic h t nur die Web-Clients bieten im Standard
keine vollstndige Sicht auf die Newsletter an, auch klassische E-Mail Programme extrahieren aus Sicher heitsgrnden die Bilder aus einer E-Mail und damit auch aus einem HTML-Newsletter. Einige E-Mail Programme bieten zwar die Darstellung von Bildern fr vertrauenswrdige Absender an, w o bei diese Funktion jedoch explizit aktiviert werden muss. Aus diesem Grund sollten Sie die Bilder in Ihrem Newsletter immer nur als ergnzende Information einsetzen. Damit kann der Leser direkt einschtzen, 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 einflieen lassen und alle irngTags immer mit einer festen Breite und Hhe verse hen. Auf diese Weise stellen Sie die optisch korrekte Darstellung des Newsletters sicher, auch wenn die Bilder nicht mit angezeigt werden. Pflegen Sie zustzliche 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 Gefhl bekommt. Damit Sie nicht den ber blick verlieren, trennen Sie am besten die Bilder und den Newsletter, indem Sie fr die Bilder ein eigenes Verzeichnis anlegen.
Bieten Sie eine alternative Ansicht fr alle Reader, die im Standard keine HTML E-M ail anzeigen.
/^VQSkalierung von Schriften

v / Z ^ G e ra d e bei mobilen Endgerten wie dem iPhone und diversen Android Smartphones kann es durch eine Skalierung der Schriftgre zu unge wnschten Verschiebungen innerhalb des Layouts kommen. Sie knnen dies zwar nicht komplett ver hindern, jedoch zumindest beim iPhone einschrn ken. Dazu gibt es die CSS-Eigenschaft -webkit-text-si-
ze-adjust. Wenn Sie diese auf none setzen, wird die

Schriftgre nicht angepasst. Im Standard steht die ser Wert jedoch auf auto und es findet somit automa tisch eine Anpassung der Schriftgre abhngig zur Auflsung statt. Dies macht vor allem bei den neuen hochauflsenden Displays Sinn, da mit diesem Wert eine bessere Lesbarkeit gewhrleistet wird.
f\Um fangreiches testen

\ J Die Anzahl der verschiedenen Darstellungspro
gramme fr eine E-Mail und damit auch fr einen News letter nimmt stetig zu. Dies liegt nicht nur an den neuen mobilen Endgerten wie iPhone, iPad oder den AndroidGerten, 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-Gerte den Spitzenplatz ein, gefolgt von Microsoft Outlook, Hotmail und Apple Mail. Gerade bei Microsoft Outlook und Apple Mail gibt es jedoch verschiedene
04/2013 webdesigner
85
TUTORIAL
Versionsstnde 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://previewmyemail.com/) oder Email on Acid (http://www. emailonacid.com/free-email-test/) Die meisten
Dienste bieten eine eingeschrnkte kostenlose Nutzung an, bieten jedoch nur in den kostenpflichtigen Zah lungsplnen eine vollstndige Analyse an.
Y o u r E rn a T e s t
Prvttw
r
* 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 cfcntt or v it * t n n u n f 10
=Ktfr'l
P e * -' i r O u l i M A t
VOMT M C our* ( U l r* v * rt4 f
SutHct lrv
> Vf n x v n r . j k m t n i O M 'K'k >) 11 M i n
er
aa
|
MKm*f
L w y Jm g
Cod w u tytb
> < x
IM
Sh ftrm o
4L
M M I
ir^rsM i
HM
Vor dem Versenden sollten Sie Ihren News letter a u f verschiede nen Plattformen tes ten. Dies bernim m t beispielsweise Litmus autom atisiert fr Sie.
10
Vorsicht Spam
Leider landen Newsletter immer wieder im
Beispiele fr Newsletter
Es gibt eine Reihe von Archiven und Genera toren fr Newsletter. Wir haben einige inter essante fr Sie zusammengestellt:
Spam-Ordner des Lesers, auch wenn dieser die Informa
tionen explizit angefordert hat. Ein Allheilmittel gibt es fr diese Situation nicht, Sie knnen jedoch eine Reihe von Vorkehrungen treffen, damit dies nicht auch Ihrem Newsletter passiert. Die wichtigste Manahme ist eine klare und einfache Struktur der Informationen. Verwenden Sie nicht zu viele Bilder und gehen Sie auch bei der Definition der METATags im Kopf des Newsletters mit Umsicht vor. In manchen Fllen spielt auch die Lnge der E-Mail eine Rolle. Nicht nur aus diesem Grund sollten Sie die jeweili gen Informationen im Newsletter nur anteasern und an schlieend auf die entsprechende Webseite innerhalb Ihrer Webprsenz verzweigen.
(http://www.graphicmail. de/site/features_templates.aspx): ber

GraphicMail 300 kostenlose Newsletter-Vorlagen
(http://www.newsletter-examples.com/): Archiv mit be

Newsletter Examples kannten englischsprachigen Newslettern, wie Bose oder Apple.
(http://designrfix.com/inspiration/newsletter-designs-60-greatexamples): Blogartikel mit ber 60 Bei

DesignerFX spielen TopDesignMag
Fazit:
Die technische Gestaltung eines News
letters ist fr HTML-Entwickler nicht allzu kom plex. Die Schwierigkeit besteht vielmehr darin, den Newsletter technisch so einfach wie mg lich zu halten. Wenn Sie dies entsprechend be rcksichtigen, steht dem Erfolg Ihres Newsletters technisch nichts mehr im Wege. P
(http://www.topdesignm a g .c o m / 3 5 -su p e rb -e x a m p le s-o fgood-looking-newsletters/): Blogartikel

mit 35 interessanten Beispielen
N E W S L tl
t R r r X A V I P L -1 v..) ^
86
webdesigner 04/2013
WEB-GALERIE
Online Shops
Jo h n P. M c C ia r r y , Jr .
Found
Mmt j o t *
C o rd o n B o w e n
Founder
M m Cordon
Modern und aufgerumt prsentiert 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 Qualitt der Texte wurde viel Wert gelegt. Im Abschnitt About us" erfhrt der Besucher, wer mcgarrybowens eigentlich ist. Sehr sympa thisch setzen sich die Grnder der Agentur unter People" mit einem gemeinsamen Foto in Szene.
W i i
rncgarrvbowen London appointed to global Toblerone account
Wallpaper*
RATGEBER
Was ist eigentlich Google AdWords?
von Tobias Henke
Child-Themes inW o rd P re ss
Seit 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.
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 bentigt. Child Themes sind abhngig 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 hngigen Childtheme verndern.
ordPress hat als Co n te nt -M anagement-system zwar Grenzen, was das Thema Individualitt 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 Mglichkeiten, auf die spter 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 behlt, oder ob man die m hevoll er-reichte Individualitt vorbergehend aufge ben und das Update durchfhren soll. Im Zweifel musste man sich dann fr das Update entscheiden, gerade wenn es darum ging, mit dessen Hilfe Sicherheitslcken zu schlieen. Seit der Version 3.0 wurde dieses Dilemma gelst, da die Entwickler es mglich machten, sogenannte Child-Themes 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.
webdesigner 04/2013
Das kann ein Child-Theme

Child-Themes nutzen dieselben Funktionen wie die Parent-Themes, sie sind also von ihnen abhngig ein Child-Theme braucht daher immer ein Parent-Theme. Was genau vom Parent-Theme bernommen wird, hngt 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 zustzlich zur functions.php des Parentthemes geladen. Wenn Sie ber PHP-Kenntnisse verfgen, haben Sie natrlich mehr Mglichkeiten, Ihr eigenes Child-Theme zu gestal ten. Aber um ein Child-Theme zu erstellen sind PHPKenntnisse nicht zwingend erforderlich. Die Entschei dung, wie umfangreich man sein Child-Theme gestalten mchte, 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 ThemeOrdner der eigenen WordPress-lnstallation erstellen. Dies reicht aus, um zu verhindern dass das Child-Theme
RATGEBER
bei einem Update berschrieben wird. Fr die Style-CSS bentigt 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 TWiv cmi: stviMhet [style.css/

f The ne M d ie : The ne U R I : D e s z n p T ic r : A u t- o r : / V u t - o r U IU : T ^ m * l tr V ^ r < in n : V T A e n ly T A e lv r O i l d c u iv he T w e n ty T w e lv e T h e Te
h l .p ://e x d n p le C - ild i h =r e fo r Y : u r âni= h e - e
h t i p : / / C H r p ic c o r v :D o u t / t A ^ n ty ~ w l wr a . i a
f c im c o r t
u r i i * . . / tw c n t y T w z lv c /s t y le . : s 3 * ),
hod y \ d ik g r .u n d - c u lu r : >
M ehr ist fr die Pro gram m ierung eines ChildThemes nicht ntig.
Theme Name, Theme URI, Descrip-tion, Author, Author URI und Version kn
Die Bezeichnungen fr nen mit beliebi-gen Namen bezeichnet werden. Nur un ter Template" muss exakt der gleichen Namen des Parent-Themes auftauchen. Durch den Befehl @import url(,../twentyten/style.css');" wird die Abhngigkeit des Child-Themes vom Parenttheme klar. Durch diesen Befehl wird WordPress sozusa gen ver-deutlicht, auf welches Parenttheme sich das je weilige Childtheme bezieht. Der Befehl @import" wird am hufigsten verwendet, da es so am einfachsten ist, die Style.CSS des Child-Themes einzubinden. Wenn Sie alles richtig gemacht haben, msste Ihr ChildTheme im Theme-Ordner auftauchen, der dann unge fhr so aussehen sollte:
^*ttscm!u2
Tnnt)
T w e n ty Tw elve Child
u i '.if m i l l
C H IL D
CM IN nt * N to#* WM M
2 d L3 *S*
w *B+m
Jetzt ist das ChildTheme aktiviert
diese Weise knnen Sie beispielsweise den Header, den
Das Childtheme kann dasselbe wie das Parenttheme

Bei Bedarf knnen Sie das Childtheme jetzt so vern dern, wie Sie es gerne mchten. Man kann dieTemplateDateien, den Aufbau und das PHP-KnowHow des Basis Themes nutzen. Das neueste Basis-Theme ist TwentyTwelve. Wer mchte, kann sich ausschlielich um das De sign kmmern und zwar in beliebigem Umfang. Eine sehr einfache nderung ist es, wenn man beispielsweise die Hintergrundfarbe ndert. Theoretisch kann man na trlich auch ein Design zu kreieren, so dass es mit dem Parent-Theme berhaupt nichts mehr zu tun hat.
Footer oder die Sidebar nach Ihren Wnschen gestalten. Wenn Sie noch kein Child-Theme angelegt haben, son dern Ihre nderungen bisher einfach innerhalb der Vor lagen des Parentthemes gemacht haben, knnen Sie diese einfach kopieren und in das Childtheme einfgen. So sind Ihre nderungen dann vor berschreibungen bei einem Update geschtzt. Mit einem kleinen Kniff knnen Sie innerhalb eines Child-Themes sogar an der Hauptdatei, also an der index.php nderungen nach Ih ren Vorstellungen durchfhren. Nachdem Sie diese aus dem Parenttheme kopiert und in das Verzeichnis des Child-Themes kopiert haben, mssen Sie sie lediglich umbenen-nen. Statt index.php heit die Datei im Child theme dann zwingend loop.index.php. Die Abhngig keit des Child-Themes von dem jeweiligen Parenttheme
Gestaltungsfreiraum ausnutzen
Neben der Style.CSS haben Sie wie gesagt noch zahlrei che weitere Mglichkeiten, um Ihrer Seite die ge wnschte Individualitt zu verleihen. Sie haben in Bezug auf die Vernderungen genau dieselben Mglichkeiten, wie wenn Sie ein eigenes Theme erstellen wrden. Auf
sollte man immer im Hinterkopf behalten. Es ist nmlich nicht mglich einem Child-Theme Funktionen zuzuf gen, die das Parenttheme nicht untersttzt. Wer mg lichst viel verndern mchte, sollte daher auch ein The me mit mglichst vielen Funktionen und Mglichkeiten als Parenttheme whlen. In diesem Zusammenhang ist oft von sogenanntenFramework-Themes" die Rede
04/2013 webdesigner
89
RATGEBER
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 zustzlich zur functions.php des Parentthemes 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 fr Ihr Child Theme anlegen, werden die Inhalte hier zustzlich 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 knnen Sie mit Hilfe der Child Theme Option zu stzliche PHP-Funktionen zu einem Theme hinzufgen, 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. V if ( function_exists(,seo_title_tag')) seo_title_tag(); else wp_title( ?></title> true,,right' );
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.
Man kann Templates im Child-Theme ersetzen

Die Funktionalitt des Child Theme lsst 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 mglichen Template und durchluft dabei die Hierar chie der Template-Dateien. Das bedeutet, dass WordPress schaut, ob ein eigenes Template fr 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 eingreifen, 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. Fr 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 fr das Theme enthlt in das eigene Child Theme. Hier kann sie dann beliebig bearbeitet werden. An schlieend zieht WordPress diese header.php und nicht mehr die Original-Datei aus dem BasisThemeTwentyTwelve. Damit kann nun auch die angesprochene Funktion in den Title integriert werden.
webdesigner 04/2013
Nachteile der Child Themes

Oft sind die dieThemes, fr 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 knnen auch die Child Themes nicht helfen. In der Regel werden die Stylesheets mit dem Befehl @import, der allerdings, wie in vielen Foren diskutiert wird, Nachteile in der Performance hat. Der Grund dafr ist, dass die @import-Regel das gleichzeitige Laden von ver schiedenen Dateien verhindert und daher der Seitenauf bau im Browser etwas lnger dauert.
Fazit:
Child-Themes sind uerst ntzlich fr 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 wrden. Hier eignen sich die Child-Themes perfekt, da man auch einfach mit Copy+Paste arbeiten kann und zunchst 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.
Die Akademie der Musik- und Medienbranche
DEUTSCHE POP
www.deutsche-pop.com
TUTORIAL
Auf zu den Sternen
von Oliver Berg hold
w i e s i c h m i t h i l f e v o n I l u s t r a t o r u n d v i e l V i n t a g e -C h a r m e e i n B a n n e r z u e i n e m e c h t e n B l i c k fa n g m a c h e nl s s t .
(M
^ / - O : II
Auf zu den Sternen B a n n e r -W e r b u n gs ie h tfa s tim m e rir g e n d w ie d ea u s .W e bD e s ig n e rO liv e rB e r g h o ldz e ig tIh n e n ,

GE
1-8
JgJgJgLl3Ll^
Bl
y y. \3
tB T. V.
3*
c
a.
CODING FACTORY
CODING FACTORY
-j %
i J Jk
*
/.
1
J*.
i/
YOU DESIGN WE HTML I
. YOU DESIGN WE HTML
YOU DESIGN WE HTML
n m wWesigKi u | in ii
inr.rtkdesijne nujaflii.de
Banner-Werbung im Vektorgrafik-Design sieht nicht nur stylish aus, sie ist auerdem plakativer und hebt sich somit gut von den kleinteiligeren Inhal ten von Websites ab.
n diesem Tutorial mchte ich Ihnen zeigen, wie man mit relativ wenigen Arbeitsschritten und den gn gigsten Funktionen in Adobe-Illustrator die Idee fr ein Label samt Grafik in Szene setzen kann. Alle Elemen te bleiben voll skalierbar und eignen sich daher sowohl fr Print als auch fr 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 fr die Umsetzung von Webdesigns in HTML bewerben. Als Name des fiktiven Dienstleisters habe ich mich fr 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 fr das Banner, geeignet sowohl fr ein Label, als auch fr die Gestaltung eines Banners. Die Rakete sollte auch in kleinem Mastab prgnant sein und sich gut mit ande ren Elementen kombinieren lassen. Daher sollte sie nicht besonders detailreich sein, sondern besser aus einfa-
chen Formen bestehen. Das Tutorial ist zur bes seren Nachvollziehbar keit in drei Phasen un terteilt, die jeweils stehen. unter einer eigenen berschrift Unter anderem zeige ich, wie man eine eingescannte Schrift vektorisiert. Auerdem enthlt das Tutorial einen kleinen Exkurs zum Thema Bezierkurven", einer zentralen Funktion fr Vektorgrafiken. In Pho toshop ist das dazugehrige Zeichenstift fr viele Ein steiger und Fortgeschrittene ein Buch mit sieben Siegeln. In Illustrator sind die einzelnen Funktionen zu dem anders ausgelegt und drften damit auch Photoshop-Zeichenstift-Kenner zunchst vor ein Rtsel stel len. Sind die Grundlagen aber erst verinnerlicht, merkt man schnell, dass es sich mit der Illustrator-Variante komfortabel arbeiten lsst.
92
webdesigner 04/2013
TUTORIAL
Auf zu den Sternen
Der Rumpf der Rakete

p v 1 Zeichenstift
I Mit der Rakete geht es los-sie setzt sich zusam men aus wenigen verschiedenen und sehr einfach zu zeichnenden Formen. Als Hilfsmittel fr das Zeichnen der Formen blende ich in der Illustrator-Arbeitsflche 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 fr den Rumpf der Rakete.
Q Klonen und spiegeln

\ J ^ A n sch lie en d klone ich die Form, dafr halte ich
die Alt-Taste gedrckt und bewege gleichzeitig das aus gewhlte Objekt mit der Maustaste. Dieser vereinfachte Arbeitsschritt wird sich spter noch wiederholen. Wh rend die geklonte Form ausgewhlt ist, whle ich ber das Kontextmen (rechte Maustaste) den Befehl Trans
formieren > Spiegeln > Vertikal".
E l
CODING FACTORY
YOU DESIGN WE HTML
vnvtMesit1 oufuitit
f\A
Die Formen verbinden
W ^ T M i t dem Auswahl-Werkzeug" (V) und mithilfe des Rasters positioniere ich die Formen so, dass sie zu sammengefgt werden knnen. Mit dem Direktaus-
wahl-Werkzeug" (A) whle ich einen Schnittpunkt bzw.
Frben und zusammenfgen

W ^ lm nchsten Schritt frbe ich die Oberflche in der gewnschten Farbe und fge den noch offenen Pfad ber die Menleiste Objekt > Pfad > Zusammenfgen" (Strg.+J) zu einer geschlossenen Form zusammen.
*mh> (M * ArwM
9m
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.
t. A-J
-i
r~ y~ i
M*Wri
CODING FACTOR
1 M
1 1
a.
i. 2^ 2 IHN
I
04/2013 webdesigner
93
TUTORIAL
Auf zu den Sternen
Antrieb und Einzelteile

Die Dsen
Fr die Dsen der Rakete wiederholt sich der Ar beitsablauf Alternativ kann man auch den Rumpf der Rakete duplizieren, diese Form etwas modifizieren und anschlieend verkleinern. Fr das Seitenteil und die stili sierte Flamme werden insgesamt vier Formen gezeich net. Die Dse wird um eine Ellipse ergnzt. Schlielich kommt noch eine viereckige Form sowie eine Art Trop fenform hinzu. Fr das Viereck zeichne ich mit dem Rechteck-Werkzeug"
Die Montage"
Anschlieend werden die Einzelteile sozusagen zusammengebaut und an den Rumpf montiert. Fr den Hauptantrieb der Rakete dupliziere ich die Tropfenform, skaliere sie entsprechend und platziere sie mittig unter der Rumpf-Form.
(M) ein Rechteck und modifiziere mit dem Dlrektauswahl-Werkzeug"(A) die Eckpunkte.
CODING FACTORY
YOU DESIGN WE HTML
m.weMttifHMUfuiiit
/ 'V Q D ie Fenster
\ J O je t z t fehlen noch die Fenster. Mit dem EllipsenWerkzeug"(L) zeichne ich einen Kreis, dupliziere und ver
Tropfenform
v ^ F r die Tropfenform zeichne ich mit dem Zei-
kleinere ihn. Anschlieend richte ich beide Formen verti kal untereinander aus. Damit ist die Rakete fertig!
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, zusammenfgt und gefrbt.
CODING FACTORY
f
YOU DESIGN . WE HTML
94
webdesigner 04/2013
TUTORIAL
Auf zu den Sternen
Klonen und Drehen

Mit dem Zeichenstift-Werkzeug" (P) erstelle ich eine Raute. Auch dieses Mal klone ich die gezeichnete Form. Ich whle 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 whle und auerdem die Funkti onen Vorschau" und Kopieren" aktiviere. Damit wird die Einstellung besttigt.
Das Label
*1 Inspirationsquellen fr ausgefallene I Schriftarten
Mchte man einen Schriftzug mit besonderem Charak
ter erstellen, wie fr unser Label Rocket Lab, kann man einen geeigneten Font in einem Vektorprogramm wie Illustrator in Pfade umwandeln, um ihn anschlieend zu modifizieren. Als Alternative zu echter Handarbeit eignet sich in diesem Fall z.B. auch derAdobe-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 schne Handschrift und zeichnen einfach etwas vor, das Sie dann scannen und vektorisieren knnen. In alten Zeitschriften, Werbebroschren und Bchern lassen sich ebenfalls schne, manchmal sehr skurrile Schriftzge finden, die als Inspiration oder auch als di rekte Vorlage fr individuelle Grafiken dienen knnen. Ein Besuch auf dem Flohmarkt oder das Stbern bei ebay lohnt sich jedenfalls.
f\ K lo n e n und Drehen perShortcut

Die Kop/eren'-Funktion sorgt dafr, dass die Rau
/a /> J * /t
T v " u - o
te mit jeder wiederholten Drehung gleichzeitig dupli ziert wird. Um aber das Funktionsfenster fr die Drehung nicht fr jeden Schritt erneut aufrufen zu mssen, be nutze ich den Shortcut Strg+D. Damit dupliziere und drehe ich die Raute dreiig 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. Anschlieend markiere ich alle einzelnen Objekte mit einem Auswahlrahmen und wandle die Rauten in ein einzelnes Objekt um. Dafr rufe ich das Pathfinder" Werkzeug
Exkurs Zeichenstift-Werkzeug": BezierZm kurven

Fr das Vektorisieren eines Scans oder allgemein fr das Zeichnen nicht geometrischer Formen, also das freihn dige Arbeiten mit dem Zeichenstift-Werkzeug" (P), braucht man etwas bung, um ein Gefhl fr das Werk zeug zu bekommen. Freihndiges Zeichnen am Com puter (ohne Grafiktablett) bedeutet in den meisten Fl 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
Fenster > Pathfinder" oder Umschalttaste+Strg+F9. Mit dem Auswahl-Werkzeug"

auf:
(V) markiere ich alle einzelnen Objekte des Strahlenkran zes und mit dem Formmodi-Befehll/ ere/nen"fge ich sie zu einer Form zusammen. Die Strahlen werden anschlieend in ihrer Deckkraft reduziert und unter der Rakete platziert. I , \\\\\w ]///// OsXVwAu\ w / / / / s
4 Jr s |
aus mindestens zwei sogenannten Ankerpunkten. Oder anders gesagt, die Kurve entsteht zwischen diesen An04/2013 webdesigner
I Vprnnfn (rum Ervdlcn riner lunimmrngeirtrtrn Fofm und xum Hinnrfugen rum Fc tmbrrei<h b grdruclctrr AH-Tnttf klicken,
95
TUTORIAL
Auf zu den Sternen
kerpunkten. Klicken Sie mit dem Zeichenstift-Werkzeug" (P) auf die Ar beitsflche, 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 gedrckter Shift-Taste, wird die Linie exakt horizontal oder vertikal angelegt, oder auf Zwischenpunkten in Abstnden von 45Grad).
m mr 4
A N K IR P U N K T
13
Kurven formen
Wiederholen Sie diesen Schritt, legen Sie zwei
Komplexere Formen
Mchte 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 anschlieend mit dem Zeichenstift-
Ankerpunkte fest und halten Sie dieses Mal aber dabei die Maustaste gedrckt. Jetzt ziehen Sie bei gedrck ter Maustaste vom zweiten Punkt weg: Es entsteht eine Kurve, deren Form direkt ber den zweiten Anker punkt gesteuert werden kann. Auer den beiden An kerpunkten der Kurve erscheinen zwei weitere Punkte, verbunden mit einer Werkzeuglinie, mit denen sich die Kurve direkt modifizieren lsst. Mit dem Direktauswahl-
Werkzeug" (P) am jeweils zuletzt gesetzten Ankerpunkt

ansetzten und die Kurve fortsetzen, oder einzelne Pfa de zusammenfgen. Fr das Zusammenfgen von Pfa den gibt es einen eigenen Befehl, der ber die Menl eiste erreichbar ist : Objekt > Pfad > Pfad zusammenfgen".
s
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, verndert sich die gezeichnete Kurve. Auch hier wird bei gedrckter Shift-Taste der Winkel auf 45Grad Schritte begrenzt. Beim Zeichnen von Formen mit Bezierkurven, z.B. fr das Abpausen eines Schriftzuges, ist es am besten, so wenig Ankerpunkte wie mglich zu setzen, denn je weniger Punkte eine Kurve bentigt, desto eleganter" wird sie. Fehlt es noch an der ntigen Routine beim modellieren von Kurven oder Formen, lassen sich diese auch anschlieend korrigieren bzw. vereinfachen. Illus trator bietet dafr sogar eine eigene Funktion, mit der man aus einer bestehenden Form Ankerpunkte entfer nen kann. DieVereinfachen"-Funktion bietet eine Ein stellung der Kurvengenauigkeit und des Winkelber einen Schieberegler nach Schwellenwerts"
< I- k li rti 4<l
. . .
15
Ausschnitte in Formen
Mchte man Buchstaben zeichnen oder pau
Prozentwerten. Die Option Original Anzeigen" bietet fr mehr Kontrolle die Kontur der Ursprungsform in ei ner anderen Farbe. Meiner Meinung nach ist dieses Werkzeug aber so gut wie berflssig, da es keine detaillierten Einstellungs mglichkeiten besitzt und sich der Effekt deshalb ei gentlich gar nicht kontrollieren lsst.
96
webdesigner 04/2013
sen, die einen geschlossenen Bereich oder Bauch ha ben, wie z.B. daso" in Rocket" ist es am einfachsten, zwei Formen zu zeichnen, um anschlieend den inne ren Teil herauszuschneiden. Zuerst zeichne ich mit dem Zeichenstift-Werkzeug" (P) die uere Kontur des Buchstaben. Dann sperre ich im Ebenen-Fenster dieses Objekt.
TUTORIAL
Auf zu den Sternen
Typografie
19
Schriftarten aus anderen Quellen

Fr die Typografie des Banners kommen zwei
FreeFonts zum Einsatz:Chunk Five" undLeague Gothic". Beide Schriften bekommt man bei Fontsquirrel:
http://www.fontsquirrel.com/fonts/League-Gothic http://www.fontsquirrel.com/fonts/ChunkFive
16
Die Innenform bearbeiten

Klicke ich jetzt mit demZeichenstift-Werkzeug"
Fr Chunk Five gibt es keinen kursiven Schnitt (italic). Dieser Effekt lsst mit Illustrator aber leicht imitieren. Dazu wird die Schrift ausgewhlt und anschlieend mit dem Frei-tronsformleren-Werkzeug" (E) in eine ge wnschte Neigung transformiert. Am einfachsten ge lingt das bei gedrckter Shift-Taste. w \
in das Dokument, legt Illustrator automatische eine neue Arbeitsebene an und ich kann die Innenform des Buchstabens zeichnen. Auerdem kann ich die Deck kraft soweit reduzieren, dass die darunterliegende Vor lage deutlich sichtbar wird. Fr die Flche der inneren Form whle ich eine Farbe fr deutlichen Kontrast.
Q.
fOrrwo#:
J
* %
* 4
y. &
o.

Ch u n k
CODING FACTORY
f iv e ]
-b S
| | | AI
f Frcs-tranifo rm iefcn -W cfkieug (E)

IT !
/"V Kreis mit Versatz
7 D ie Sperrung aufheben
/ Jetzt hebe ich die Sperrung im Ebenen-Fenster
Jetzt zeichne ich mit dem Ellipsen-Werkzeug"(L)
einen Kreis. Anschlieend verschiebe ich den Pfad um drei Pixel.
wieder auf und whle beide Formen aus. Dafr klicke ich bei gedrckter Strg-Taste nacheinander auf die Farbmarkierungen der Ebenen im Palettenfenster.
i m m 2
* * % Q* ? 'r ! ttrm
t : m m *- : mm. $ - : i m *.
eai.i c a ic n ic .,*caicaic*3iaiccciiraCTaiEainaicai(nicaG 3iaiiEaic
4m
T w k k
rud
CODING r rf FACTORY
JNK FIVE
18
Die Ausschnittform entfernen

Mit dem Pathfinder"-Werkzeug entferne ich die
(< k
verdeckte Flche, also den unteren Teil der Formen, der herausgeschnitten werden soll. Jetzt sind beide Formen gruppiert. Ich hebe die Gruppierung auf, whle die obe re (in diesem Fall die grne) Form aus und entferne sie ber die FunktionAuswahl lschen". Alternativ kann die Auswahl auch mit der Entfernen-Taste gelscht werden.
04/2013 webdesigner
97
TUTORIAL
Auf zu den Sternen
*1 Schriftzug und Form ausrichten

I Der uere, verschobene Pfad wechselt auf Kontur, dann werden Schriftzug und Form miteinander ausgerichtet.
Q Letzte Feinheiten
JC h u n k Five verwende ich auch fr den Schrift zug YOU DESIGN WE HTML". Wer will, kann diesen Teil noch mit einigen horizontalen Linien und Sternen er gnzen. Und probieren Sie es doch mal mit anderen
-r.
%
CHU
Farbkombinationen...
M t* -
th e
rv
-J 0.\ '
y \,
.
j 6
FACTORY
CODING
Die Schrift frben

^ ^ A b s c h lie e n d erhlt die Schrift die Farbe des Banner-Hintergrunds, sodass die Schrift wie ein Aus schnitt aussieht.
LV *' t ttr Cfc*W S<hn#* i#<* -----.
-s t
CODING FACTORY
YOU DESION WE H TM L
m tMtufbtf upMflt
G o K h w *
fr * *
>*
m*j
IKS * ^ i J 3 i Ut- 4) 3 $ - Bj ' p . r : m v o * : u i # * .) , -
* 1 - - . . ! tm
- = = * = =n o irzjiruji
rmc n *in.t
rjnrn n z*tibc r m rjm r
f 7 m
jp
rz nfr^ irr^ ic i.n
i:rnji c ro irz nr ^ nrîirrn ie r .M p t z u fzf 7 3 i
rzji
* 7^11 tz ji
ID .
S Jk m if
*
i.T .
y s.
0.*k
3 .-1
jj j
Q.A 1 %
b i J P i L
: * * * '4 acÎ
s.*> * a -r.
CODING FACTORY
H U N K FIV E
O tgw tm*
K.
J =5
I1
w
Ju
W i P
th e
YOU DESIGN WE HTML
League Gothic
w w w .w eb d 8sitn er-m asazin .iie
98
webdesigner 04/2013
WEB-GALERIE
Inspiration
jr
-----------M M B M inUD M ( WM
dustinwood
HELLO. IM DUSTIN WOOD.

1 D E S IG N W E B S IT E S , P R IN T M A T E R IA L, AND 1 D A B B L E IN V ID EO . S O M E T IM E S 1P O S T T H O U G H T S TO T W IT T E R .
C H E C K O U T MY W O R K A N D D O N 'T F O R G E T T O S C R O L L D O W N THE PA G E S.
mm>nrnm mmmm
COOL B E A N S SURFAC E51 S E L F PRO M O
A i 0 -1
C O N TA C T
eaxCRuflH*
-r
BOXCRUSH W EB D E S IG N
M t u c * :* t i l r a O A -.r .
NEIGHBORHOOD SANDBOX
SEE MORE ON THIS PROJECT *
ft**
INVkCB 0EO**
c o m
M > w < t AI
somAMS
conta
sh cvujt
stiwmdshp
E X P L O D E D PEN
l*i '
Ziemlich ungewhnlich prsentiert 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 erfhrt man mehr ber die Ar beit von Dustin Wood. Er stellt einige seiner Arbeiten vor und man erfhrt, dass er neben der Konzipierung von Webseiten und Videos und Printprodukte anbietet.
8.8 B U /A
as* the experts
ADV
p
VS. COMPETITIVE TRIPLE STACKS*
NATIONALLY?
-T ")-mrfiiPUPM Cowl
IN THE NEWS |
Iim mm
I# 1(
UPCOMING TRAIT INNOVATIONS

M W llK M l
I %C*. I
GENUITY.COM WEBSITE DEVELOPMENT

SEE MORE ON THIS PROJECT
S h o p p i n g a u c h i m I n t e r n e t a l s E r l e b n i s z u z e l e b r i e r e n , o h n e d e n P r o d u k t e n d i e S c h a u z us t e le n ,is te in ee c h t eH e r a u s fo r d e r u n gf rW e b d e s ig n e r .
Der Online Shop von S. Oliver ist im Layout betont schlicht gehalten. Auf der Startseite findet der modebewusste Besucher dafr 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 dafr, dass der Besucher gerne wie der kommt. Die Qualitt der Marke S. Oliver wird vor al lem durch absolut professionell gemachte Fotos transportiert. Vor allem die ausge whlten Models sprechen die junge Ziel gruppe perfekt an. Auch auf Funktionalitt wurde groer 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 zustz lichen Box, die verfgbaren Gren zeigt.
LOOKBOOK
10% RABATT JETZT Ali MELDEN
NEW SLETTER
Cf* OltoM
BALLERINAS
U U f LKD MCUE RLDUMRUNGi M
SALE
s & lx m
| (t M I m w M f l m m
<25 -
KM M I \ C iu m
njM H ft fi% m
nM M
10 0
webdesigner 03/2013
WEB-GALERIE
Online Shops
r s r s f in
MQMI
MMN
SAU >
MV
V < M m NMiMaH
Kickz.com ist ein Online Shop fr Sport schuhe und Kleidung, wie sie in der HipHop-Szene gerne getragen werden. Ent sprechend stylish und sportlich prsentiert sich der Shop. Um bei den Besuchern Be gehrlichkeiten zu wecken, werden die Mar ken und vor allem ihre Produkte zielgruppengerecht 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 knnen. Auch auf den Produktseiten fehlt es nicht an Bedienkomfort. So sorgt eine Lupen funktion fr eine detailreiche Darstellung der Produkte. Ein besonderes Problem bei Mode sind die uneinheitlichen Grenbe zeichnungen. Kickz.com bietet bei Schuhe zum Beispiel die Option, Gren als euro pische, UK- und US-Grenbezeichnungen anzeigen zu lassen. So ist zumindest schon eine Verwechslung amerikanischer und britischer Gren ausgeschlossen.
Mm
....
l* M (M
AIR MAX 1 ESSENTIAL

"WOLF GREY/PHOTO BUK* W M
4 _ JL mmo | M w: n
B3
f l.
Vans
SUPRA
MAflXC*
FRA
m4 V iru ii4 l M i
IM W lN
/4h>
i^ u h > im
IHMr r> 1r
*nr> t feto 1 HVrvMatNi M i*
fw 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 iw , M U K v i K a u H m )
* urw*>/ " * In n
whle eine frbe
whle eine groe

GRSSENTABELLE
OMI
VlHM l
H i.U
O S
STOHS
UHUS
U .ls
K l .
40 2/3 41 1/3 44 44 2/3
Mnner HEU-GRSSEN EU-GROSSEN ACHT US-GRSSEN UK-GRSSEN
Vnm tf umw
SCHUHE
46 2 3 471-3
material te>1 il
psn
M
MW
U lf
[< .]
M
U.
[ it] [r] I m ]
M I W
m
m m I
> |
[ "* J
v
- M M ir
tl
*
i
II mm

mI
M m
m.
> < V r-iH t r - a i a u M T I m j
an
m m
03/2013 webdesigner
101
a ll
WEB-GALERIE
Online Shops
r * _f i *
M M I U I & 1M l 'i
K it
M r a w / im ? ! tftifn * u.uu J-
ra fc im o e
W illôow i.nn
i^ r v . iHIN <'. J* ' ; L i -3
M I F K S im
Suchen
Das Full-HO-Smsrtpborv#
BOSCH
BO)) VAF 28444
Sen/ xptnft 2 WKx

f M lfllH , ft 1 0 0 M * a : r t * b n
HU*
f t
n
* 1 0 1
fk* 1 0 0
K
rCfTA,5# 7 Q * w t(f ir 4 n A iiu iiy
P.vw vw w 3TH FD 56 7ni
liw fr ft WMmiw i i l
14CO *n< n und d*
A M iit.n tfO rirfi
M ritjm tcaiw i ft CM
f t
f t r t a t n f fk T iff y v iir iT i)
B*tirvdruo#r><los Format
9Q f
UM UBOJ
t/fltnKUgiai1
A3 i rt*rutrart*f vo ri Hb
P m M om c
P H IL IP S
KENW O D
fliUltl- M O i iS
*= B
7(99 P JAflikiaft Aus heutiger Sicht ist kaum vorstellbar, dass amazon einmal als reiner Bcher-Online-Shop ange fangen hat und erst spter anfing, seine Produkt palette in alle erdenklichen Richtungen auszubauen, redcoon.de kann beinahe eine hnli che Unternehmenshistorie vorweisen. 2003 als rei ner Online Shop fr Unterhaltungselektronik ge startet, bietet das Aschaffenburger Unternehmen heute auch Bcher, Baumarktartikel, Brobedarf und Sportartikel an, und zwar international. Nicht zufllig erinnert die redcoon-Seite in Aufbau und Funktionalitt der aktuellen amazon-Seite. Bei der Firmenfarbe hat man sich fr ein feuriges Rot entschieden, das interessanter weise auch fr But tons verwendet wird aus Conversion-Optimierungstechnischer 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. . L
inkl. M wSt., keine Versandkosten
K f b ii r t iw i J i
JO-*tnm*-TV, r c .
W niiM MU /LM t/TO rtiW

tIG*T\r***0. CMVTK>G7
HiM IrtTUW/H
KO -TV,r*M O .C*frTK.
JETZT BllTTERN
DERREDCOON NEWSLETTER
cvbt> c#82 ves Jvr

O f-Y iK rW K ^ fH I
UM
?m py
N_L H C*iE NA*MT>CN mt
S O N Y
IwbrtH * tltUlMMM
IV Ifd M lM r iN l
Gigaset
EPSON
B
V H *N W * .
Mt & P
FuftTfrAN'MtfMi m .B w r i
atffp0
lpv-4
<3Qp
v a m v t iH v * t j > v * r< . A04
O tjflt'ftu i
WMflltf
<WC>uW
KlWWrtl 17.1 Cow s:o:-6c-jb
Ararat m ix*
nrfln
A lle s f rs A b itu r: J e tz t n o c h m al G as g e b e n !
acRwetsuNG
SOFORT
VkN
P ayP al
Y
<!o :
**
im
IN D E N W A R E N K O R B
*
<asr .1
vl
W prtatn r t f r j w t f r iim f t Ob L r . d c f l i i i : i r a r t i M i r w i f n u n d A if ir r t t Aff C lu n c n , N r M n t a A m h
^ ferewn '
L*'>? fX K * W W f ki|nt+ rV & itff* *
Dtn iVJWM n urnerr i r t i w #v

C 'm y iM M rt l w *rt Go^m tr m i r o t
r*#tUrM>r H in t * C m U * ok de
('UiW rrtfV iiv u n
m
e*TiK* vn wV&J
M f lm
M i t * u t * * n m >vK3<h W M A M M l
D 'W A w
- I n K T ' t t ' t f COf r m**cW0 T v n C M
y*T*t
WWMW
9 U h H k m
iHtl 'M t
**Cft
Ouc* <on*w
mfeMt. vrivtv #*
U - ^ i * t r h f A r t k ^ > ,% ** * %i|H fco*
/ 1 9 0
cmmcic n k * io .* o i ** rtu O tu iN W
T l if W iK O
r n w w u4 reust . a >'' > t *
r ^ i
> j m
to t +&.< > M4 f*jM R < * *i* d lr4 M n ii* T MO AM ft* h r* Ji-^1 iV A f r m m l rrhaw^tKIw t i ba <Jk*T*
SEH R G U T
10 2
webdesigner 03/2013
WEB-GALERIE
Online Shops
th mann
l.it/ll**
MH
l* n
I*A
(II
* St#n mrHrrv
W illkom m en zu H ause!
Harrte* H Io r iM n b *
rtAlan M*uN*ut. fan t*n hntn
|Bm
rum Thmrts M iK ik in U n M M n l. ttu 4 to -. U M . u rd R atdM N iM kqitAftM k -
io*
kotlaMi
K0
Der grte Nachteil eines Online-Shops ist wohl, dass man die Produkte vor dem Kauf nicht anfassen, geschweige denn auspro bieren kann. Fr einen Musikinstrumenteund Studiotechnik-Anbieter ist dieses Prob lem noch grer, da es sich bei vielen Produkten um recht teure Anschaffungen handelt, diese mitunter auch recht sperrig sind und nicht zuletzt der Klang eine w e sentliche Rolle spielt.Thomann als einer der grten Anbieter von Musikinstrumenten und Studiotechnik hat mit seiner Website versucht, seinen Kunden so gut es geht entgegenzukommen. Das Design an sich kommt zunchst etwas bieder daher. Auf fllig ist aber die starke Kategorisierung der Produkte. Wer sich nach einer E-Gitarre um schauen mchte, muss sich durch gleich mehrere Kategoriestufen klicken: Gitarren und Bsse>E-Gitarren>E-Gitarren-Modelle. Die beispielhaften Abbildungen bei den Kategorien sind dabei auch fr 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 knnen, wurden in ei nem eingebundenen Player verschiedene Soundbeispiele bereitgestellt.
SEHR GUT
4 .9 1
M i ThO^rirt w
V# r w r
mf
V#ry<#
pofto#fw*t< V*rwnd iiw crtialb O oi^vrM orvlt tb ******

J t H . 30 T ag* Moncv !U d l Cran*iw und 3 Jahn Car<jntu>
Mhiilwr
>lHnilw4wm f U MrM H v tH N
r o i^ r p iM ir
0 * r r t '# i : U M i M f
* * #In
P M rUr*
Ow Mf I
LT r i| * n
Hl) I* U i . f4u o w
I I I . (M I
i M I t l IM IM K I X M
MM
. i
M l, I M
im
,-
im
U M . TM
IN*. .%AU>, M# w . I M IW *1 IM OM H H W . W - w
Itt, Mt
fM i
f o l l o w Utt
in ,
i<
o nt u i it t e r
VIDlOBIOG
t
IM M
IM * . I N IM \ IM
im
MTV
I MnM I l M ) ..
VM N 1 | g i . l M a V
s
\M
im
M l I W - w
IM , I M
IM
*. I
Tt M w
Hf tfMw:
l>*. I M H l, I M
0 * S A /* ??3 A
(* 1
M w t lK I N n A lM m l U f M M f i t* M
To|)Niw
100%
RATGEBER
Buchrezension, Modernes Webdesign
von Dragona Mimic
L e a r n i n g b y D o i n g : A u f 4 4 0 S e i t e n e r l e r n e n S i e P h o t o s h o p C S 6 a u s s c h l i e l i c h a n h a n d p r a k t i s c h e r B e is p ie le ,d ieS iem itd e m E x p e r t e nM a r k u sW g e rS c h r it tf rS c h r it tn a c h v o lz ie h e nk n n e n .
Photoshop CS6 S ch ritt f rS ch ritt z u mp e rfe k te nB ild
Markus Wger www.markuswaeger.com

Markus Wger arbeitet seit den frhen 90er Jahren als Grafikdesigner und betreibt sein eigenes Gestaltungsb ro,Designworks'. Als Adobe Certified Expert ist er auch Software-Trainer fr Photoshop, Illustrator, Acrobat und InDesign. Auerdem verffentlicht er seit 2006 regelm ig Software-Tipps und Artikel zu den Themen Design und Typografie auf seinem Weblog.
Auf einen Blick

Das Produkt: Buch Verlag: Galileo Design Autor: Markus Wger Im Netz: www.galileodesign.de Preis: 39,90 Euro ISBN: 978-3836218856 Highlights: 436 Seiten, Hardcover, DVD
zum Buch mit Videotrainings, Arbeitsmaterial und 30-Tage-Testversion von Photoshop CS6 Extended
enn Sie kein langes theoretisches Geplnkel mchten, sondern direkt mit der praktischen Photoshop-Arbeit loslegen wollen, ist das
Buch Adobe Photoshop CS6 - Schritt fr Schritt zum perfekten Bild genau das Richtige fr Sie. Das Sprichwort Erst die Arbeit, dann das Vergngen" wird hier einfach komplett ignoriert und der Spa an erste Stelle gestellt. Auf insgesamt 436 Seiten und in elf sehr ausfhrlichen Kapiteln zu grundlegenden Themen, wie beispielsweise Auflsung und Grundlagen, Farbkorrektur und SchwarzWei-Bilder oder Retuschieren und Verbessern, fhrt der Grafikdesigner und Adobe Certified Expert Markus W ger den Leser Schritt fr Schritt in die faszinierende Photoshop-Welt ein. Bereits beim Durchblttern wird klar: Lange theoretische Themenbesprechungen wird man
webdesigner 04/2013
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 fr Einsteiger. Die einzelnen Kurz-Workshops sind nach Schwierigkeitsgrad kategorisiert, sodass der Leser leicht einschtzen kann, ob der eigene Wissensstand den er forderlichen Fhigkeiten entspricht. Das hilft gewiss da
RATGEBER
Buchrezension, Modernes Webdesign
bei, Frust zu vermeiden und sich langsam an die einzel nen Herausforderungen heranzutasten sowie die unzh ligen Facetten des Bildbearbeitungsprogramms schritt weise kennenzulernen. Der Autor greift hier auf seine langjhrigen Erfahrungen als Trainer zurck und wei genau, welche Fragen am hufigsten auftauchen und welche speziellen Themen, gerade fr Einsteiger, am schwierigsten zu bewltigen sind. Wenn ntig beginnen die Kapitel mit einem Grundlagenexkurs, in dem alle fr die folgenden Seiten notwendigen Informationen kurz und kompakt erlutert werden. Gut ist auch, dass die Workshops jeweils durch einen kurzen Vorspann einge leitet werden, der den Leser darber 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 Anfnger direkt in die Photoshop-Arbeit einstei gen knnen. Egal ob ein monochromes Bild koloriert, Hauttne verbessert oder auch Haare freigestellt wer den sollen, Wger versteht es, auch sehr anspruchsvolle Techniken nachvollziehbar zu erlutern. 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 auerdem, 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. Zustzlich rundet ein ausfhrlicher Index am Ende des Buches den Gesamteindruck ab.
Fazit:
Das Buch Adobe Photoshop CS6 - Schritt
fr Schritt zum perfekten Bild ist speziell auf die Be drfnisse von Photoshop-Einsteigern zugeschnit ten. Der Autor Markus Wger greift auf seine Erfah rungen als Photoshop- und InDesign-Trainer zurck und wei genau, wo die grten Einstiegsschwie rigkeiten auf Bildbearbeitungs-neulinge lauern. Doch mit diesem Buch tappen Sie nicht in die Anfnger-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 verstndlich, sehr bersicht lich und kompakt erklrt der Experte das komplette Bildbearbeitungsprogramm. Ob Effekte, Retuschen, Farbkorrekturen, Montagen oder einfach grundle gende Fragen zum Arbeiten mit dem Programm das Praxisbuch hat fr alles eine Lsung parat. Toll ist auch, dass eine 30-tgige CS6 Extended-Testversion auf der DVD mitgeliefert wird. So steht einem sofortigen Eintauchen in die Photoshop-Welt nichts mehr im Wege. Wir knnen eine klare Empfehlung aussprechen. Photoshop-Neulinge sind mit diesem Praxisbuch auf jeden Fall auf der sicheren Seite. Fortgeschrittenen werk dienen. Photoshoppern kann dieses Buch vor allen Dingen als praktisches Nachschlage
^ G r u n d la g e n : In K a p ite l 1 v e rm itte lt d e r E xp e rte M a rk u s W g er g ru n d le g e n d e K e n n tn isse d e r S o ftw a re , d ie je d e r P h o to s h o p p e r k e n n e n sollte.
^ F r e 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 ilfe v o n K a n le n fre is te lle n k a n n .
Fotolia Galileo Plentymarkets dpunkt Host Server Sonic Media
2
7 23 29 59 64, 65
Cancom Deutsche Pop hdpk Strato Host Eurore
71 91 113 115 116
04/2013 webdesigner
105
JOB BOERSE
Stellenanzeigen aus der Welt des Webdesigns
braintaas
e-business technology
Online-Marketing & -Analysis Manager/in

ber Braintags
Wir sind eine schnell wachsende E-Business Agen tur mit ber 10 Jahren Erfahrung in der Erstellung von Online-Shops, Websites und komplexen CloudApplikationen (CRM, Kampagnen-Management, Newsletter-Management, etc.). Durch unseren pa tentierten Java Application Server und unser eigenes Rechenzentrum sind wir in der Lage, alle Kunden wnsche selbstndig umzusetzen und entsprechen de Lsungen ber die eigene Software-Plattform zu entwickeln. Neben den technologischen Leistungen stehen wir unseren Kunden als auch E-Business-Consultants zur Verfgung, bieten Web- & Marktanalysen an, entwikkeln umfangreiche Vermarktungs-Strategien und leiten unsere Kunden durch alle Online-MarketingKanle. Erfolgreich abgeschlossenes Studium der Betriebs wirtschaftslehre Qualifikationen Mindestens 3 Jahre Erfahrung im Bereich OnlineMarketing Ausgeprgte SoziaIkompetenz, selbstsicheres Auf treten, sowie Verhandlungsgeschick Technisches Verstndnis, strategische & analytische Fhigkeiten oder Kommunikationswissen schaften (Schwerpunkt Marketing) oder hnliche
Ihre Chancen
Sie arbeiten innerhalb eines dynamischen Teams im Umfeld einer aufstrebenden Online-Agentur. Durch unsere langjhrige Erfahrung knnen Sie auf beste hende Strukturen zurckgreifen und sind dennoch flexibel in der Implementierung neuer Lsungsan stze. Durch unsere Arbeit mit renommierten und international ttigen Unternehmen, bieten wir Ihnen spannende Projekte, kreativen Freiraum und vielver sprechende Perspektiven fr Ihre berufliche Karriere. Bitte senden Sie Ihre Bewerbung inklusive Lebens lauf, frhestem Eintrittstermin und Gehaltsvorstel lungen an:
Ihr Jo b
Gerade um den Bereich Online-Analyse und -Mar keting strker auszubauen, suchen wir dynamische und professionelle Untersttzung 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-Testing, Usability-Optimierung, etc. Direkter Kontakt zu Kunden & Partnern Aufbau eines Teams und Betreuung der Mitarbeiter
jobs@braintags.de Braintags GmbH Jakob-Kaiser-Strae 12 47877 Willich Christoph Trautmann Recruitment & Human Resources T e l:+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
Ihre Qualifikationen
Um effektiv und kundenorientiert arbeiten zu kn nen, ist uns Ihre Persnlichkeit mindestens genauso wichtig, wie objektive Anforderungen. Sie sollten daher ein hohes Ma an Teamfhigkeit mitbringen, durch Ihre Arbeit begeistern und sich vor allem selb stndig neue Themengebiete erarbeiten knnen.
10 6
webdesigner 04/2013
JOB BOERSE
b ra in ta g s
Java Softwareentwickler/in
ber Braintags
Wir sind eine schnell wachsende E-Business Agen tur mit ber 10 Jahren Erfahrung in der Erstellung von Online-Shops, Websites und komplexen CloudApplikationen (CRM, Kampagnen-Management, Newsletter-Management, etc.). Durch unseren pa tentierten Java Application Server und unser eigenes Rechenzentrum sind wir in der Lage, alle Kunden wnsche selbstndig umzusetzen und entsprechen de Lsungen ber die eigene Software-Plattform zu entwickeln. SOA, etc.) und Web-Technologien Ein strukturierter, analytischer und zielorientierter Arbeitsstil
Ihre Chancen
Sie arbeiten innerhalb eines dynamischen Teams im Umfeld einer aufstrebenden Online-Agentur. Durch unsere langjhrige Erfahrung knnen Sie auf beste hende Strukturen zurckgreifen und sind dennoch flexibel in der Implementierung neuer Lsungsan stze. Durch unsere Arbeit mit renommierten und international ttigen Unternehmen, bieten wir Ihnen spannende Projekte, kreativen Freiraum und vielver sprechende Perspektiven fr Ihre berufliche Karriere. Bitte senden Sie Ihre Bewerbung inklusive Lebens
Ihr Jo b
Als Java Softwareentwickler/in arbeiten Sie inner halb eines Teams an kundenspezifischen Lsungen und der Weiterentwicklung unseres patentierten Java Application Servers. Zu Ihren Aufgaben zhlen: Analyse, Spezifikation und Dokumentation pro grammatischer Anforderungen Entwicklung und Gestaltung von Software- und Anwendungsarchitekturen Entwicklung von komplexen Kundenlsungen Weiterentwicklung eines patentierten Java Applica tion Servers Betreuung und Beratung der Kunden
lauf, frhestem Eintrittstermin und Gehaltsvorstel lungen an:
jobs@braintags.de Braintags GmbH Jakob-Kaiser-Strae 12 47877 Willich Christoph Trautmann Recruitment & Human Resources T e l:+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
Um effektiv und kundenorientiert arbeiten zu kn nen, ist uns Ihre Persnlichkeit mindestens genauso wichtig, wie objektive Anforderungen. Sie sollten daher ein hohes Ma an Teamfhigkeit mitbringen, durch Ihre Arbeit begeistern und sich vor allem selb stndig neue Themengebiete erarbeiten knnen. Darber 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,
04/2013 webdesigner
10 7
S t e l le n a n z e ig e n a u s d e r W e l t d e s W e b d e s ig n s
bra in ta a s
Head of Development / Entwicklungsleiter/in

ber Braintags
Wir 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-Management, etc.). Durch unseren patentierten Java Application Server und unser ei genes Rechenzentrum sind wir in der Lage, alle Kundenwn sche selbstndig umzusetzen und entsprechende Lsungen ber die eigene Software-Plattform zu entwickeln. Neben den technologischen Leistungen stehen wir unse ren Kunden als auch E-Business-Consultants zur Verfgung, bieten Web- & Marktanalysen an, entwickeln umfangreiche Vermarktungs-Strategien und leiten unsere Kunden durch alle Online-Marketing-Kanle. Mindestens 3 Jahre Berufserfahrung in der Leitung von Soft ware- und Webprojekten Kenntnisse der gngigen Frontend-Technologien wie (X) HTML/DHTML, XML/XSL,CSS, JavaScript... Strukturierte, selbstndige und zielgerichtete Arbeitsweise, Eigeninitiative Gute Kenntnisse in Microsoft Office Service- und Qualittsbewusstsein sowie Kommunikations kompetenz Sehr gute Kenntnisse in Deutsch und Englisch in Wort und Schrift
Ihre Chancen
Sie arbeiten innerhalb eines dynamischen Teams im Umfeld einer aufstrebenden Online-Agentur. Durch unsere langjhri ge Erfahrung knnen Sie auf bestehende Strukturen zurck greifen und sind dennoch flexibel in der Implementierung neuer Lsungsanstze. Durch unsere Arbeit mit renommier ten und international ttigen Unternehmen, bieten wir Ihnen spannende Projekte, kreativen Freiraum und vielversprechen de Perspektiven fr Ihre berufliche Karriere. Bitte senden Sie Ihre Bewerbung inklusive Lebenslauf, frhe stem Eintrittstermin und Gehaltsvorstellungen an:
Ihr Job
Sie leiten ein Projektteam aus den Abteilungen Grafik, Fron tend- und Backend-Entwicklung und setzen eigenstndig Web- & Softwareprojekte um. Sie berichten direkt an die Geschftsleitung, stehen in engem Kontakt mit dem Kun den, steuern die internen Ressourcen und planen Budgets, Timings, etc.. Zu Ihren Aufgaben gehren auerdem: Analyse, Konzeption und Projektierung von webbasierten Softwarelsungen Fhrung des Projektteams, Steuerung und Motivation der Mitarbeiter Reporting intern und extern Erster Ansprechpartner fr den Kunden
jobs@braintags.de Braintags GmbH Jakob-Kaiser-Strae 12 47877 Willich Christoph Trautmann Recruitment & Human Resources T e l:+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
Um effektiv und kundenorientiert arbeiten zu knnen, ist uns Ihre Persnlichkeit mindestens genauso wichtig, wie ob jektive Anforderungen. Sie sollten daher ein hohes Ma an Teamfhigkeit mitbringen, durch Ihre Arbeit begeistern und sich vor allem selbstndig neue Themengebiete erarbeiten knnen. Erfolgreich abgeschlossenes Studium (z.B. BWL, Kommuni kationswissenschaften, Informatik) oder eine vergleichbare Ausbildung
10 8
webdesigner 04/2013
JOB BOERSE
bra inta g s
Web-Entwickler/in, Webdesigner/in
ber Braintags
Wir sind eine schnell wachsende E-Business Agentur mit ber 10 Jahren Erfahrung in der Erstellung von OnlineShops, 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 Kundenwnsche selbstndig umzusetzen und entsprechende Lsungen ber die eigene Software-Platt form zu entwickeln. Neben den technologischen Leistun gen stehen wir unseren Kunden als auch E-Business-Consultants zur Verfgung, bieten Web- & Marktanalysen an, entwickeln umfangreiche Vermarktungs-Strategien und leiten unsere Kunden durch alle Online-Marketing-Kanle. Sehr gute Kenntnisse in aktuellen Webtechnologien wie (X)HTML/DHTML, XML/XSL,CSS, JavaScript Flohe Affinitt zu digitalen Trends, Web-Technologien, Usability, usw. Mindestens 3 Jahre Erfahrung im Bereich Softwareund/oder Webentwicklung Ausgeprgtes Qualittsbewusstsein Optional: Erfahrung in der Entwicklung nativer Apps und HTML5 Optional: Erste Fhrungserfahrungen Optional: Online-Marketing Know-How (SEO,Tracking, etc.)
Ihre Chancen
Sie arbeiten innerhalb eines dynamischenTeams im Umfeld einer aufstrebenden Online-Agentur. Durch unsere lang jhrige Erfahrung knnen Sie auf bestehende Strukturen zurckgreifen und sind dennoch flexibel in der Implemen tierung neuer Lsungsanstze. Durch unsere Arbeit mit re nommierten und international ttigen Unternehmen, bie ten wir Ihnen spannende Projekte, kreativen Freiraum und vielversprechende Perspektiven fr Ihre berufliche Karriere. Bitte senden Sie Ihre Bewerbung inklusive Lebenslauf, fr hestem Eintrittstermin und Gehaltsvorstellungen an:
Ihr Jo b
Als Web-, bzw. Frontend-Entwickler/in arbeiten Sie inner halb unserer Frontent-Abteilung an Websites & Web-Applikationen. Je nach persnlichem Schwerpunkt arbeiten Sie dabei eng mit unserer Java-Abteilung an der eigentlichen Anwendung, oder setzen zusammen mit unserer GrafikAbteilung Screendesigns um. Konzeption & Dokumentation von programmatischen An forderungen Entwicklung von kundenspezifischen Lsungen Umsetzung von Websites in FITML, CSS, JQuery, JavaScript, etc. Direkter Kundenkontakt und Arbeit innerhalb eines Pro jektteams
jobs@braintags.de Braintags GmbH Jakob-Kaiser-Strae 12 47877 Willich
Um effektiv und kundenorientiert arbeiten zu knnen, ist uns Ihre Persnlichkeit mindestens genauso wichtig, wie objektive Anforderungen. Sie sollten daher ein hohes Ma an Teamfhigkeit mitbringen, durch Ihre Arbeit begeistern und sich vor allem selbstndig neue Themengebiete erar beiten knnen. Abgeschlossene Ausbildung zum Anwendungsentwick ler" oder vergleichbare Qualifikation
Christoph Trautmann Recruitment & Human Resources T e l:+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 BOERSE
IN T E R N E T O N E
A 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 Kln kommen und mit uns durchstarten nach ganz Oben, denn Das klingt nach deiner neuen Stelle? Dann sen de bitte deine vollstndigen und aussagekrfti gen Bewerbungsunterlagen unter der Kennung DWEB-SLD an
career@internetone.de Wir freuen uns auf dich!
wir suchen derzeit einen
Senior/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 Fhrung unseres internationalen Ent wicklungsteams
Weitere Infos findest du auf www.internetone.de INTERNETONE AG KlnTurm / Im Mediapark 8 50670 Kln Job-ID auf www.der-webdesigner.net: j 103
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 Fhrungserfahrung Lust und Spa daran, dich richtig rein zu knien"
Warum wir? Weil wir....

immer hher hinaus wollen und Stillstand ver meiden! dir viel Eigenverantwortung bieten und die Mg lichkeit, dich und deine Ideen einzubringen! unsere Bros in einer top Lage im Herzen von Kln haben! dir kostenlose Getrnke und somit u.a. Koffein bieten! einfach die Besten sind!:)
10
webdesigner 04/2013
JOB BOERSE
OnPage.org
Webentwickler (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 Klle und starte mit uns durch nach ganz Oben denn, Das klingt nach deiner neuen Stelle? Dann wir suchen derzeit einen sende bitte deine vollstndigen und aussa gekrftigen Bewerbungsunterlagen unter der Kennung DWEB-WE an unsere Bros in einer top Lage im Herzen von Kln haben! dir kostenlose Getrnke und somit u.a. Koffe in bieten! einfach die Besten sind!:)
Webentwickler (w/m) Was machst du?

Umsetzung anspruchsvoller Templates fr komplexe Webseiten und mobile Endgerte anhand von Design-Vorlagen und Konzepten Gestaltung und Entwicklung modernster Web-Portale und interaktiver Web-Frontends dabei hast du stets im Blick, dass dieTemplates im Backendsystem integriert werden ms sen. Hierfr hltst du stndig Kontakt mit den entsprechenden Entwicklern.
career@internetone.de Wir freuen uns auf dich! Weitere Infos findest du auf www.internetone.de INTERNETONE AG KlnTurm / Im Mediapark 8 50670 Kln
Was bringst du mit?

mind. 2 Jahre Erfahrung in der Webentwick lung sehr gute Kenntnisse in HTML, CSS, Java Script und Ajax Begeisterung und Gespr fr hochwertige und stilvolle Webauftritte analytisches Denken, hohes Einschtzungs vermgen und konzeptionelle Strke sehr gute Englischkenntnisse und idealer weise Deutschkenntnisse Lust und Spa daran, dichrichtig rein zu kni en"
Job-ID auf www.der-webdesigner.net: j 102
Warum wir? Weil wir....

immer hher hinaus wollen und Stillstand vermeiden! dir viel Eigenverantwortung bieten und die Mglichkeit, dich und deine Ideen einzubrin gen!
04/2013 webdesigner
P a s s w o rt
I t
f676g
D ow nload
Zusatzm aterial bequem herunterladen
Die bentigten Materialien fr die Workshops knnen Sie ganz bequem von unserer Webseite herunterladen. Mit dem exklusiven Leser-Passwort haben Sie die Dateien immer und berall zur Hand.
L
Wenn Sie unseren Download-Bereich das nchste Mal besuchen, mssen Sie das Passwort nicht erneut eingeben, sondern knnen die Dateien direkt herunterladen. Wir wnschen viel Spa beim Nachbauen der Workshops! Bitte beachten Sie dabei die eventuellen Nutzungseinschrnkungen der einzelnen Dateien.
Download-Anleitung fr die Webdisk

01
Geben Sie in der Adresszeile Ihres Internetbrowsers w ww .sonic-
Hinweis: Die Download-Daten zu unseren Magazinen stehen unbefristet auf unserer Webseite zur Verfgung.
m edia-dow nload.de ein. Falls Sie noch nicht auf unserer Webseite
registriert sind, klicken Sie bitte auf .Registrieren' und folgen Sie dann den Registrierungsanweisungen. Fr die Registrierung bentigen Sie eine gltige E-Mail-Adresse. Falls Sie bereits registriert sind, melden Sie sich wie gewohnt an.
05
Auf der folgenden Seite ist das entsprechende Heft noch einmal aufgefhrt. Per Klick auf den Heftnamen gelangen Sie zu der Seite mit der Download-Option.
1 )
Om Om
02
Klicken Sie dort auf den Button,Leser-Passwrter', der sich auf der Leiste des .Anmelden'-Buttons befindet.
Webdisk
+M * m m. H
W ftfr d lU
-1 U .
06
sper
J
Auf dieser Seite finden Sie das Heftcover und einige weitere Informationen zum Heft. Ganz unten finden Sie die Pakete, die die Downloads enthalten. OG ftMt i
*0 > H C #
a u d io
co<* Ci ** MftdHigr
e n t w f tf -i
t i i f Mir M m i m
03
Daraufhin werden Sie zur Passwrter-Seite weitergeleitet, wo Sie dann in dem Feld ,Leser-Passwort' das nebenstehende Passwort eingeben. Klicken Sie nun auf den Button ,Absenden'.
07
Stehen mehrere Pakete als Download bereit, mssen diese nacheinander heruntergeladen werden. Whlen Sie ein Paket aus und klicken Sie auf den Button .Datei herunterladen'. Nach Besttigen des Dialogs startet der Download. Das Paket wird in den Download-Ordner kopiert.
lesfpa$swort aktiveren
04
In dem grnen Feld erscheint die Meldung, dass das Heft aktiviert wurde. Sie finden es in der Liste unter,Aktivierte Magazine'. Klicken Sie nun auf den Heftnamen. itM*
A -
v. >*>
r * 1 V2IP.T
==J
P assw ort e*
08
v ia led tm rt : M U n
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 knnen.
AJcrvierle Maqazire
i-lc U -C i < n
der M;b3c3>y-|C4r? :i:?i
der Wc*>.Jei-*rr|CyST?r
Lizenzierung
Von unserer Webseite (www.sonic-media-download.de) herunter- gela dene Shareware-Programme erfordern fr die kontinuierliche Nutzung eine Registrierung beim Hersteller oder mssen 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 12
w eb d esig n er 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
persnlich praxisorientiert
B eW e < 3
teractio
APPS ^ Si90er'
\l\|ebs'êS
Nchster Studienstart am 1. April. Besuchen Sie unseren nchsten Infotag am 23. Mrz in Berlin!
Hier und jetzt informieren: w ww.hdpk.de
VORSCHAU
CSS3 Transition, Animation, Transform und 3D-Transform

Ruckelnde, unschne Animationen sollen mit CSS3 der Vergangenheit angehren. Animierte Deckkraft, Farben und Gren werden jetzt vom CSS selbst bernommen, ganz ohne eine Zeile JavaScript-Code schreiben zu ms sen. Das ist wesentlich performanter, aber entlastet natr lich auch den JavaScript-Prozess.
COFFEE
r
w i
i
9A M
k& mqsmmjiakui
llir U l ff* o fm a n tti
'LJion
9
&3CKUP
BWC
B t o Q
S t a t e
Pulse Pro <1

Viele Webworker kennen diese Situation: Der Kunde hat sich bei Vergabe des Auf trags fr eine Image-Website entschieden, die im Grunde nur eine digitale Visiten karte mit zwei bis drei Seiten Content und einer Kontaktmglichkeit darstellt. Fr solche Anforderungen ein vollwertiges Content-Management-System mit Anbin dung an eine Datenbank einzusetzen, wre wie das sprichwrtliche mit Kanonen auf Spatzen schieen. Eine HTML-Version mit einem Kontaktformular wrde 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 Lsung dar, mit der auch sehr kleine Seiten bequem editiert werden knnen.
_.== Pulse
aacKup**0*
Webtypografie und Technik

Schriftarten knnen verspielt oder seris wir ken; Farben knnen die Inhalte betonen. Da mit der gute Eindruck auf der Website durch gngig bewahrt wird, sollten Sie optimal fr das Web geeignete Schriftarten und Farben whlen. 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 Gltigkeit nichts eingebt - im Gegen teil, fr eine gelungene Webtypografie ist es aktueller dennje. Webdesigner Oliver Berghold zeigt Ihnen verschiedene Tricks und Techniken fr das Einbinden von Typografie in Websites.
THc
. im Handel erhltlich.
24 04.2013
Aus aktuellem Anlass knnen sich die Themen kurzfristig ndern.
Heft 05/2013 ab Mittwoch
114
webdesigner 04/2013
STRATO
Kein Hosting-Paket ist gnstiger als bei STRATO.
Auer bei STRATO!"
m .Ilias
X
)
,
''
Vergleichen lohnt sich!

HOSTING Standardpreis Einrichtungsgebhr Inklusivdomains Postfachspeicher Webspace 1&1 Dual Basic
6,99 /Mon. 9,60 4 2GB 10GB
STRATO
PowerWeb Basic
4,99 /Mon. 8,60 4 5GB 10GB
Stand 6. Mrz 2013. MindestVertragslaufzeit STRATO 12 Monate, 1&1:6 Monate. Preise inkl. MwSt.
m
pro
M arcus Welt chrom.tv
Sie sparen bis zu 25 im Jahr!

G H S T I !
k o n k u r r e n z io s
strato.de/hosting
* Aktion bis 30.04.2013: PowerWeb Basic 6 Monate fr 0 /Mon., anschlieend 4,99 /Mon. Einmalige Einrichtungsgebhr 8,60 . MindestVertragslaufzeit 12 Monate. Preise inkl. MwSt.
Servicetelefon: 030 - 3 0 01 46 - 21
PERFORMANCE-GARANTIE
Neu! 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 Flexibilitt. Dazu profitieren Sie von einem Bedienungskomfort, den Ihnen sonst nur ein virtueller Server bieten kan n ."
Patrick Schoden Head of Sales Cloud Hosting
Root Server 2.0

ab
49
0
mtl.
Setupgebhr* Aktion bis 30 . 0^.2013
Optimale Leistung und Flexibilitt fr Ihre Hochleistungsanwendungen.

Mehr Power
Eigenes Hardware RAID

Fr beste I/O-Raten und Datensicherheit.
Snapshot inklusive
Sichern Sie jederzeit einen Versionsstand Ihres Servers.
Mehr Komfort
iSO
Eigene ISO-lmages
Installieren Sie eigene Betriebssysteme.
Mehr Flexibilitt
Jetzt online bestellen unter: www.hosteurope.de/Server/
HOST EUROPE
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 lie lic h f r die N e u b e s t e llu n g e in e s Root Servers bis z u m 3 0.0^.2013. Einfach G u ts c h e in c o d e O1203LW bei der B estellun g a n g e b e n . Der Betrag w ird Ih n e n Voche g u t g e s c h r ie b e n . Sonst zzgl. e in m a lig e r S e t u p g e b h r v o n 9 9 . Keine M indestVertragslaufzeit. Die K nd ig u n g sfrist fr Root Server betrgt i* W o ch e n zum M o n a tse n d e . Alle a n g e g e b e n e n Preise in k lu s iv e MwSt.

Webdesigner - April.2013 P2P

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Webdesigner - April.2013 P2P

Hochgeladen von

Copyright:

Verfügbare Formate

Know-how & Tutorials fr Profis

jQuery EHTM L5 3 CSS

*Co 4 l/( '4 o

Fraqen an die Redaktion

Seiten enorm viel abhngt. Inzwischen ist derAutoren Markt fr dieser

Key Account Manager

Viel Spa mit der vorliegenden Ausgabe!

Jrgen Ortm ann,, Redaktion Webdesigner

oder C ache ist angelegt :

NEWS & BUCHREZENSIONEN

Web-Anwendungen offline nutzbar machen

Workflow fr Web Designer

Child Themes in WordPress

Workflow fr Web Designer

der webdesigner 04/2013

Child Themes in WordPress

Grafiken mit SVG & HTML5 erzeugen

Design fr eine App-Downloadseite, Teil 1

Social Media-Buttons ansprechend gestalten

Web-2.0-Schaltflchen mit Photoshop

ES IST UNSER 1. GEBURTSTAG!

JEDEN ZWEITEN ARTIKEL!

Als Objekte laufen lernten

Auf zu den Sternen

105 112 114

*\H ln ^ j -J o r.i JiA *

Auf zu den Sternen

04/2013 der webdesigner

WILLY WEB MASTER

Apps programmieren fr iPhone und iPad

App-Entwicklung mit iOS 6

Onpage mit Xovi - Erfolg dank WDF*IDF

Business Hoster internet24 mit Preisaktion zum 15. Jubilum

K u n d e n k o n ta k t legt internet24 be-

Adobe Creative Cloud fr Teams Roadshow

ita r beit ern ,

IT-Sicherheit, Qualittsmanagement, Prozessoptimierung und Datenschutz

Sicheres Hosting mit Hostserver.de

Suchmaschinenoptimierung. Das umfassende Handbuch

Auf einen Blick

" S . C a lillo C o m p u tin g

Firefox hat keine Lust auf Apple

Universitt Paderborn entwickelt P2P-Facebook

Web Storage, Application Cache und IndexedDB

Web-Anwendungen offline nutzbar machen

Ed OoooW Docum ontt and v *w Ooogto S p w d tfiM t

Z Z niDiNNfi t MM 1 0 Mtu#r LMf^m on

Ow#*w1 rVaq/w f>*M

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

2. Der Application Cache geht davon aus, dass die n

hacks.m ozilla.org/2010/06/beyond-htm l5-database-apis-and-the-road-to-indexeddb/")

Warum Offline-Daten praktisch sind

Der Vergleich von Web Storage und Cookies

Caching Techniken verwenden

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

.remove(key") im iE: .removeltem(key")

Zudem gibt es auch Events:

Der Zugriff mit JavaScript ist folgender:

Die Vorteile des Application Cache

O th e r c a r.h tm l.4 Paner c a r.h tm l; S Parser c a r.h tm l; 18 Parser

200 OK 200 OK 200 OK

a p p lic a tio n /p v a s c r.p t

Alle Daten werden aus dem Cache geladen.

\H ln ^ j -J o r.i JiA

Ow#w1 rVaq/w f>M

fl /V 1.22a 129.31 lZ V . iU 76.50U 1711 54*1

Upgdt auf h o fw t Vrsontn ist m fepcfi

ru&at>cft HgWigfs i s o r .'fton

t#s 1000 ArtMl nogK

0OMI J * 9 /K 4 U U 0 d U ZhJu<v9scim ftsttB t a i SnUod*r

2ahfcr>gsscfvrtttr!in Cfos s-Stwg und Zut>#ro

T ' k rfy ftn C M ) i m ftnoppinf

Sw cH mil KH.R Bckrtd Q

99^9 MM SM M / IMIMM AMftS

<) lrju o flC 5 tg iiMr HTML uo3 CSS ir-rr2cf m c n \ u t ^ Z0CvfiXO

* < X M '9t D K M < M M M M f M ( t M tv m tfU > < n M i M t l ; M W

'm u H * m e u r 1 441 CUR* 1 990 EU* }ro c u > IM tu * r

14 400 48 14 KD US 19W W P 2 900 MB

9>;e09 rt9:m9Jrt0t Tru i3-S ncp-K i*v3nc># ***ji^

Socf-r>S1#m ff Procooc urtff CT*.or