Webdesigner.april.2013 P2P
-
Upload
florin-ciobanu -
Category
Documents
-
view
117 -
download
0
description
Transcript of Webdesigner.april.2013 P2P
Know-how & Tutorials für Profis WordPress jQuery EÍHTML5 3 CSS
5Si
t i/
A
C°c /t 4l/(* C o'4 o
in
SEO für WordPressImmer noch ein unterschätztes Thema
CSS 3 TutorialObjekte ohne Flash & JavaScript animieren
HTML NewsletterWir zeigen Ihnen wies funktioniert
Europas Nr. 1 kreative Ressource21 Mio. lizenzfreie Fotos, Videos und Vektoren ab 0,75€.Tel. +49 (0)30 208 96 208 | www.fotolia.de
EDITORIAL
Ltí j g g stcrrr
Willkommen !
O nline Shops stellen als Webseiten eine Besonderheit dar, da für den Betreiber von der Funktionalität dieser _ _ Seiten enorm viel abhängt. Inzwischen ist der Markt für
Shopsysteme riesig und die Entscheidung für eines dieser Systeme und gegen seine Konkurrenzprodukte erfordert eine intensive Recherche, da zum einen die Kosten für das Shopsystem und den Support sich stark voneinander unterscheiden. Zum anderen muss unbedingt sichergestellt werden, dass das System Zukunftsfähigkeit ist und genügend Möglichkeiten für einen Ausbau bietet. Aus diesem Grund haben wir uns eine Auswahl von insgesamt 18 Shopsystemen in Bezug auf den Funktionsumfang näher angeschaut und die Ergebnisse in einem großen Ratgeber zusammen
getragen. Zur besseren Vergleichbarkeit wurden die wichtigsten Kriterien in einer Tabelle zusammengeführt.Daneben findet auch das Thema WordPress natürlich in dieser Ausgabe statt. Wer ein WordPress-The- me nach eigenen Vorstellungen umbaut, wird sich spätestens beim Installieren des ersten Updates für das zugrundeliegende Theme wundern, wenn nämlich die vorgenommenen Änderungen dabei einfach überschrieben werden. Eine Lösung für dieses Problem ist die Ausgliederung der Änderungen in so genannte Child-Themes. Wie genau diese funktionieren und was Sie dabei beachten sollten, erfahren Sie in dem Tutorial ab Seite 94. In weiteren Tutorials zeigen wir Ihnen außerdem, wie Sie mit CSS3- Animationen umgehen, was sie bei HTML-Newslettern beachten sollten oder welche vielversprechenden Möglichkeiten Web Storage und Super-Cookies für Websites bieten.
Viel Spaß mit der vorliegenden Ausgabe!
Jürgen Ortmann,, Redaktion Webdesigner
web
webdesigner erscheint zehnmal jährlich beiSonic Media - ein Geschäftsbereich der music support group GmbH Hauptstraße31,53604 Bad HonnefTel.: 02224 98826 0, Fax -79Mail: [email protected]
Herausgeber und Chefredakteur
Redaktion
Fraqen an die Redaktion
Autoren dieser Ausgabe
Grafik & Layout
Lektorat
Gesamtanzeigen-leitung
Key Account Manager
Druck
Vertrieb
Bezugsmöglichkeiten
Preise
Dipl.-Ing. Hans-Günther Beer (V.i.S.d.P) [email protected]
Jürgen Ortmann [email protected]
Tobias Henke [email protected]
Oliver Berghold, Daniel Flöter, Tobias Henke, Andreas Hitzig Jürgen Ortmann
Ronald M. Stirner [email protected]
Dagmar Schellhas-Pelzer
Daniyal Rahman Tel.: 02224 9882635Fax: 02224 9882679 [email protected]
Brigitta Reinhart,Telemarketing Lehmkuhl Tel.: 089 464729, Fax: 089 463815 [email protected]
Karl Reinhart, RMSGmbHTel.: 089 464729, Fax: 089 [email protected]
Senefelder Misset,Mercuriusstraat 35,7006 RK Doetinchem Niederlande
IPS Pressevertrieb GmbH Meckenheim
Zeitschriftenhandel,Fachhandel, Abonnement
Einzelbezug 12,95 €Jahresabonnement Inland 109 € für 10 Ausgaben inkl. MwSt und Porto (Ausland: 126 Euro inkl. Porto)
Abobestellung Einzelheftbestellung Kundenservice
Sonic Media Aboservice Postfach 1331
53335 Meckenheim Tel.: 02225/7085-367 Fax: 02225/7085-399
[email protected] www.sonic-media.de
music support group GmbH Geschäftsführer: Rüdiger J.Veith, Dr. DirkJohannsen Hauptsitz: Brücker Str. 10,82223 Eichenau Amtsgericht München: HRB196730 USt-ldNr.: DE281259857
Bankverbindung Commerzbank MünchenKto. 150 757 300 BLZ: 70040041IBAN: DE92 70040041 0150 7573 00 BIC: COBADEFFXXX
© Für alle Beiträge, Messdaten, Diagramme und Abbildungen bei Sonic Media - Ein Geschäftsbereich der music support group GmbH. Die Zeitschrift und alle in ihr enthaltenen Beiträge sind urheberrechtlich geschützt. Mit Ausnahme der gesetzlich zulässigen Fälle ist eine Verwertung ohne vorherige schriftliche Einwilligung des Verlages verboten. Übersetzungen, Nachdruck oder Vervielfältigung und Speicherung sind - mit Ausnahme zum privaten Gebrauch - nur mit ausdrücklicher Einwilligung des Verlages zulässig. Eine Haftung für die Richtigkeit der Veröffentlichungen kann trotz sorgfältiger Prüfung durch die Redaktion weder vom Herausgeber noch vom Verlag übernommen werden. Für unverlangte Einsendungen wird keine Haftung/Gewähr übernommen. Für namentlich gekennzeichnete Beiträge übernimmt die Redaktion nur die presserechtliche Verantwortung. Produktbezeichnungen und Logos sind zu Gunsten der jeweiligen Hersteller als Warenzeichen und/oder eingetragene Warenzeichen geschützt. www.webdesigner-magazin.de
1
> 1
> 1
InhaltWebdesigner 04/2012
IMPRESSUM
KOLUMNEIst das noch innovativ oder kann das weg? 6
8
NEWS & BUCHREZENSIONENNews und BuchvorstellungenNeuigkeiten rund ums Web
Buchrezension"Photoshop CS6" von Markus Wäger
JOB BOERSEStellenangebote für Webworker 106
104
WEB-GALERIEInteressante Single PagesAufwändig gestaltete Einseiter
Online ShopsWeb Designs für Online Vertriebsplattformen
48
100
RATGEBERWeb-Anwendungen offline nutzbar machen 14Web Storage, Application Cache und IndexedDB
Shopsysteme im Vergleich18 Systeme und ihre Stärken und Schwächen
Workflow für Web DesignerMehr Effektivität durch geregelte Abläufe
SEOfür WordPressDie wichtigsten Techniken für besseres Page Ranking
Child Themes in WordPressWas Web Designer SEO-technisch beachten sollten
24
34
72
88
m anifest
M an ifes t-D ate i: Beschreibt den
A nw endungscache
* O )
Cache ist noch leer :
W eb se ite a m e ig en und in den A nw endungscache laden
oderCache ist angelegt :
A nw endungvcache : Cached d ie in d e f
M a n ifes t-D a te i s tehenden D ate ien
M a n ifes t D ate i ändern:• D ate ien au fn etunen• D ate ien löschen• Version aktualisieren
# A nw endungscache aktualisieren
W ebserver C lien t/B ro w ser
à
Web-Anwendungen offline nutzbar machenDank sogenannter Super-Cookies können auch komplexe Web-Anwendungen verfügbar gemacht werden, wenn die Internetverbindung unterbrochen wird.
\ KONZEPr iONi tRuMG L j w u r - f
Umsetzung
T e s t i n g unK o r r e k t u r
Workflow für Web DesignerMit den richtigen Arbeitsabläufen können auch größere Projekte bewältigt werden und es lässt sich effizienter arbeiten.
4 der webdesigner 04/2013
>~n
*>t
j*> jt.
j *
88Child Themes in WordPressDamit individuelle Anpassungen bei einem WP-Theme nicht mit dem nächsten Update des Themes überschrieben werden, sind Child Themes die optimale Lösung.
!«■««• •• I M f » «
«Ar« Ulf UV
I.«
■
30 • R M f f PKT>
ES IST UNSER 1. GEBURTSTAG!UM DAS ZU FEIERN. GIBT SS DAS HIER:
20% RABATT AWJEDEN ZWEITEN ARTIKEL!
RAIATT INCCT AM MTTIWOCH. M H 27. PISRUAft
M*M» MC o u» sca n e « « n w w mm».•twWM'Ä'iAI'WMl «MW» »W *0
82 HTML-Newsletter gestaltenMail-Clients können HTML-Seiten nicht immer einwandfrei darstellen. Mit einigen Kniffen lässt sich HTML trotzdem sehr gut für die Gestaltung von Newslettern nutzen.
»— * - V t i J V 123 » fr »4 **• I« I * MM. « «
I -
* <
I J t J p ~4 ^ 2 » I I 41
4 % ; Jl*
; •> .T .w iSA\J **\H ln ^ jŒ-Jo-r.iJiA *• I ?
92 Auf zu den SternenMit Illustrator lassen sich trendige Retro-Grafiken und -Banner gestalten. Grundlage dafür ist die Arbeit mit Bezierkurven.
somc-meaia.
der-webdesigner.
TUTORIALS
Profi-TechnikenSchritt für Schritt erklärt
ü J iW :
Best Practice für flexible Websites 40Stylesheets von vornherein RD-tauglich gestalten
Grafiken mit SVG & HTML5 erzeugen ........ 44Grafiken direkt im Code anlegen
Design für eine App-Downloadseite, Teil 1 ........ 54Aufwändige Hintergründe als Bühne für den Content
Videos für WordPress 60Filme richtig in WordPress-Seiten einbinden
Social Media-Buttons ansprechend gestalten 66Web-2.0-Schaltflächen mit Photoshop
Als Objekte laufen lernten 76CSS3-Animationen einsetzen
HTML-Newsletter gestalten ........ 82Web- und Email-Clients richtig ansprechen
Auf zu den Sternen 92Mit Illustrator Banner im Retro-Look gestalten
Inserentenverzeichnis 105
Download-Anleitung 112
Vorschau 114
Das benötigte Material für die Workshops können Sie bequem von unserer Webseite herunterladen. Mit dem exklusiven Leserpasswort haben Sie die Dateien immer und überall zur Hand.
04/2013 der webdesigner 5
KOLUMNE
WILLY WEB MASTERIst das innovativ oder kann das weg?Manchmal schreibt das digitale Zeitalter wirklich seltsame Geschichten. Man fragt sich, ob die vermeintliche Innovationskraft, die für Dinge wie Google Glass aufgewendet wird, nicht sinnvoller genutzt werden könnte. Wer will schließlich schon mit einer Brille telefonieren?Auch wenn man bei Googles Datenbrille vielleicht noch geteilter Meinung sein kann, ist spätestens der Nutzen von sprechenden Schuhen, wie Google sie kürzlich in Texas vorgestellt hat, kaum noch nachvollziehbar. DieGoogle-Schu-
he sollen unter anderem mit Hilfe mehrerer Sensoren Bewegungen messen können. Ob es wirklich einen Nutzen hat, wenn sich plötzlich die Schu
he mit Sprüchen wie„Das ist super langweilig" melden, darf bezweifelt werden. Allerdings befindet sich das Projekt „TaIking Shoe" noch weit
entfernt von jeglicher Marktreife. Ähnlich hat man aber bis vor Kurzem auch über Google Glass gedacht und die Datenbrille soll nun
im Januar 2014 tatsächlich in den Verkauf gehen. Auch bei Apples iWatch stellt sich die Frage, ob die Armbanduhr wirklich neu erfunden werden musste. Okay, ein Smartphone in Form einer Uhr gibt es bisher noch nicht. Aber reicht das als Argument aus, um ein solches Produkt auf den Markt zu bringen? Auffällig bei diesen Innovationen ist vor allem die Koppelung von Software an einen Gebrauchsgegenstand. Es scheint auch einem „klassischen" Internetunternehmen wie Google viel daran zu liegen, seine Kunden mit diversen Geräten auszurüsten. Und sicherlich hat dieser Trend auch damit zu tun, dass man bei den Unternehmen fieberhaft nach neuen Wegen sucht, noch mehr Daten über seine Kunden zu sammeln. Denkbar wäre, dass die Google-Brille Daten über die Umgebung ihres Trägers übermittelt, ohne dass es ihm unbedingt bewusst ist. Eine Armbanduhr lässt man nicht mal eben liegen wie ein Smartphone oderTablet, sondern trägt sie am Handgelenk
überall mit hin. Gleiches gilt für Schuhe.Es bleibt abzuwarten, wie erfolgreich diese Produkte sein
werden, sofern sie denn auf den Markt kommen. Bei den neuen Innovationen handelt es sich nicht zuletzt um Acces
soires, die damit auch modischen Aspekten unterliegen. Nicht jeder wird eine Brille tragen wollen, die genauso verbreitet ist
wie heutzutage das iPhone. Vermutlich werden die Produktzyklen im Falle des Erfolgs ähnlich rasant sein, wie beim iPhone, sodass
praktisch im Jahrestakt neue Versionen auf den Markt kommen. Und sicherlich sind die neuen Versionen außer mit einem neuen Design
auch mit jeder Menge neuer Technik ausgestattet, deren Nutzen für den Anwender nicht immer ersichtlich ist.
1011101
01101 1 1 1 0 0 0 1 0 0 1
6 webdesigner 04/2013
Aktuell 2u iOS 6
A U t u e U
zu \OS 6
JW** ' v « 4
*®p‘
cat a<
i c t o n c » - N S S ea rchP A thF o rD i r e c t o r i< :ft - ( d i r a c t o r l e * o t> ) e c tA t In d e x !0 | ;
I ( r e s u l t « o fc je c tA t In d e x r ( ia d e x P a th
M le c te d S ^ iM m t In d e x ) — 1 ) < jo r » e tU b lq u lto u a * N O lt«n * tU 9 U «su rl
d e a t in a t lo n U R L : (K5UHL filoU R LM
App-Entwicklung mit iOS 61012 Seiten, mit DVD, 39,90 €
ISBN 978-3-8362-1915-0
Apps programmieren für iPhone und iPad
Das umfassende Handbuch
► Grundlagen der A nw endungsen tw ick lung mit dem SDK 6► Apps entwickeln, testen, abs.chern und vcroffei.ll.chen► Inkl. Xcode. ¡Cloud. Twitter. Debugging, V e rste u e ru n g ,
zahlreicher Praxisbeispiele
LEHR-Progra/Tiingemaft
*14Ju Sch G
S S AlleRm*«'* T o o K ^ rV .d eo -U k1.onen Galileo Com puting
Professionelle App-Entwicklung!Profitieren Sie vom Wissen der iOS-Experten Klaus M. Rodewig und Clemens Wagner.Auf über 1.000 Seiten erfahren Sie, wie Sie professionelle Apps für iPhone und iPad entwickeln, testen, absichern und im App Store veröffentlichen. Inkl. Xcode, Debugging, Versionierung, zahlreichen Praxisbeispielen und Sicherheit. Darüber hinaus bieten wir Ihnen Bücher zu Android, WebApps und Windows Store Apps. Viel Spaß beim Stöbern!
Unsergesamtes Programm
»www.GalileoComputing.de
f » facebook.com/GalileoPressVerlag » » twitter.com/Galileo_Press R+ » gplus.to/GalileoPress
Galileo ComputingWissen, wie's geht.
NEWS_________________Neuigkeiten aus der Welt des Webdesigns
NEWS......- «5.**
«*VW|
M i m H * 1
r ~ T«n
•t
• ••
• I
• M
O UMH t
Onpage mit Xovi - Erfolg dank WDF*IDFAuch wenn es nach dem Pinguin-Update Googles vielleicht den Anschein gehabt haben mag: Die Onpage-Optimierung ist nicht out. Im Gegenteil: Überlegungen wie diezurTermingewichtung SEO-Texten, WDF*IDF als„Zauberformel", bezeugen den hohen Stellenwert der Onpage-Optimierung.Auch die Xovi GmbH, Vertreiber der gleichnamigen SEO Controlling und Online Marketing Suite, sieht die Zeit für mehr Onpage-Optimierung gekommen und erweitert das hauseigene Onpage-Tool.Die Grundlegenden Aufbereitung sind dabei gleich geblieben: Weiterhin erfährt der Nutzer, ob es doppelte Inhalte auf der Seite gibt, Seiten nicht erreichbar und falsch weitergeleitet sind, Überschriften und Formatierungen suboptimal verwendet werden, Metaangaben hinterlegt wurden und dergleichen mehr. Hinzugekommen sind nun zwei weitere Rubriken des Onpage-Tools, die allesamt zum Ziel haben SEO-Texte optimal zu gestalten und zielführend zu gestalten.Mit Karl Kratz' berühmter Formel „WDF*IDF" arbeitend, können Nutzer damit nicht nur einsehen, welche Mitbewerber besser optimierte Seiten für das entsprechende Keyword aufweisen, sondern noch einen wichtigen Schritt weiter gehen: Mit dem integrierten WDF-Editor live Texte editieren und analysieren. Das Ergebnis ist klar - der optimale SEO-Text.
Business Hoster internet24 mit Preisaktion zum 15. JubiläumDer Dresdner Business Hoster internet24 GmbH startete zum Jahreswechsel bereits in das 16. Jahr der Geschäftstätigkeit. Zu diesem besonderen Anlass hat der Hoster exklusiv für die Leser des Webdesigners eine ganz spezielle Aktion: Neukunden, die sich bis zum30.04.2013 für einen dedizierten Server von internet24 entscheiden, erhalten auf die ersten drei Monatsgebühren 50 Prozent Erlass.Bei der Bestellung muss einfach nur das Codewort 15i24 angegeben werden.Bei den dedizierten Servern können Neukunden zwischen einem Managed oder einem Root Server wählen, je nachdem, welcher technische Background im Unternehmen vorhanden ist. Managed Server bieten sich insbesondere dann an, wenn die technische Einrichtung sowie die Serveradministration lieber ausgelagert werden soll. Für Web- und Werbeagenturen, die ihren Kunden auch
Webhosting-Leistungen anbieten möchten, hat internet24 spezielle Agenturserver-Tarife und Reseller-Angebote im Portfolio. Das Servermanagement erfolgt dabei über inter- net24, so dass die Agentur sich auf ihr eigentliches Kerngeschäft Rahmen einer Zusammenarbeit mit internet24 können Agenturen wählen, ob die Dienstleistungen unter eigenem Namen verkauft werden sollen, oder ob die Agenturen als Vermittler auftreten möchten. Beim Kundenkontakt legt internet24 be-
konzentrieren kann. Im
sonderen Wert auf eine persönliche Betreuung. Deshalb beginnt der Support nicht in einem Callcenter, sondern bei einem direkten Ansprechpartner. Das zertifizierte Technik- Team ist rund um die Uhr, auch an Feiertagen, per Telefon und E-Mail erreichbar.
8 webdesigner 04/2013
NEWSNeuigkeiten aus der Welt des Webdesigns
* • • V J
/
T/ •
- S v w . ;' m t p -
O *
Adobe Creative Cloud für Teams RoadshowBesuchen Sie die Adobe Creative Cloud für Teams Roadshow in einer Stadt in Ihrer Nähe und erfahren Sie von renommierten Adobe Experten, welche Vorteile Ihnen der Einsatz der Creative Cloud für Teams in Ihrem Unternehmen bietet. Die Veranstaltung richtet sich an Unternehmen, die innovative Ideen für Design, Web und Video umsetzen und mehrere Kreativarbeitsplätze haben. Die Adobe Creative Cloud für Teams bietet das ultimative Kreativ-Toolset für die Kreativabteilung von Unternehmen, speziell auf Teamarbeit abgestimmte Features und ein einfaches Lizenz-Management.DieTermine der Roadshow in der Übersicht:
09.04. Hamburg11.04. Stuttgart12.04. München18.04. Wien19.04. Köln23.04. Berlin
Mit der Creative Cloud für Teams können die kreativen Mitarbeiter in Ihrer Firma oder Arbeitsgruppe sämtliche Desktop- Applikationen der Adobe Creative Suite 6 sowie weitere Programme und Dienste nutzen, darunter Adobe Lightroom 4, Adobe 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-Dienste für Zusammenarbeit innerhalb privater Arbeitsgruppen. Hinzu kommen neue Publishing-Lösungen für innovative Apps und Medieninhalte. Neue Features und Applikationen stehen unmittelbar nach Veröffentlichung zum Download bereit. Während der Abolaufzeit nutzen Sie immer die neueste Software - Upgradekosten entfallen vollständig.Für einen günstigen Monatsbeitrag „mieten" Sie einen Kreativarbeitsplatz anstatt Lizenzen zu kaufen - zum günstigen Pro
mopreis von nur € 49,- pro Monat zzgl. MwSt. Dieses Modell bietet Ihnen nur CANCOM. Informieren Sie sich jetzt bei Ihrem CANCOM Ansprechpartner! Adobes langjähriger Kooperationspartner berät Sie umfassend über das neue Adobe VIP Lizenzprogramm.Sie entscheiden, ob Sie die Abo-Kosten für Ihre Kreativarbeitsplätze als Einmalzahlung oder bequem in 12 Monatsraten bezahlen! Bitte wenden Sie sich bei Fragen und bezüglich der Finanzierung an unser Creative Cloud Competence Center!Das Arbeiten mit der Creative Cloud für Teams bietet Agenturen, Verlagen und Kreativabteilungen völlig neue Möglichkeiten im Einsatz und bei der Verwaltung von Adobe Software. Kreativteams arbeiten immer mit der neuesten Adobe Software, neuen Diensten und den innovativsten Tools und können Projekte gemeinsam planen und bearbeiten.Lernen Sie die neuen exklusiven Creative Cloud Features kennen und erfahren Sie, wie Sie mit neuen Applikationen wie Ado
be Muse oder Adobe Edge Tools arbeiten oder mit HTML, CSS und JavaScript eindrucksvolle Inhalte und Apps für mobile Endgeräte erstellen.Erleben Sie live, wie Teammitglieder dank der neuen Funktionen, Programme und Apps effizienter zusammenzuarbeiten - intern aber auch extern mit Kunden und Partnern. Lernen Sie die neue Verwaltungskonsole für Lizenzmanagement und Teamverwaltung kennen und erfahren Sie, welche Vorteile Ihnen das neue VIP Lizenzprogramm im Vergleich zur Lizenzierung über herkömmliche Lizenzprogramme bietet.Im Vortrag über iPad Publishing lernen Sie, wie Sie Inhalte, die mit InDesign erzeugt wurden, mit wenigen Handgriffen in digitale App-Dateien umwandeln und qualitativ hochwertigen digitalen Content erzeugen können.Und zuletzt präsentieren wir Ihnen in einem exklusiven Apple Vortrag, welche Vorteile Ihnen die neuesten Apple Technologien
04/2013 webdesigner 9
NEWS_________________Neuigkeiten aus der Welt des Webdesigns
Na c h h a l t i g e V e r b e s s e r u n g e n
f ü r U n t e r n e h m e n e n t s t e h e n
i m D i a l o g m i t M i t a r b e i t e r n ,
Ku n d e n u n d d e r G e s c h ä f t s -
f u h r u n g .
.heidischerm.de
IT-Sicherheit, Qualitätsmanagement, Prozessoptimierung und Datenschutz
Sicheres Hosting mit Hostserver.deDie Hostserver GmbH, ein Spezialanbieter für Managed Hosting, ist nach dem führenden internationalen Sicherheitsstandard ISO 27001:2005 durch den TÜV SÜD zertifiziert. Hostserver betreut für Agenturen und Unternehmen komplexe Webanwendungen und Server mit hohen Sicherheitsanforderungen.„Datenschutz und IT-Sicherheit sind heute die zentralen Anforderungen für professionelles Hosting von Anwendungen und Daten. Als zertifizierter Anbieter stehen wir unseren Kunden in Fragen des Hostings, des Betriebs, des Datenschutzes und der IT-Sicherheit kompetent und beratend zur Seite. So können sich unsere Kunden ganz auf Ihre Anwendungen und Webprojekte konzentrieren," erklärt Geschäftsführer Julian Wyneken.Die Zertifizierung umfasst das ganze Unternehmen mit allen Standorten und legt den Fokus auf die technischen Kernprozesse Managed Hosting, Domain- und Nameservice, sowie den Kundensupport. Damit ist die Hostserver GmbH einer von wenigen nach ISO 27001 „IT-Sicherheit" und ISO 9001 „Qualitätsmanagement" zertifizierten Anbieter in Deutschland, die individuelles Managed Hosting anbieten.Im Zuge der Zertifizierung hat Hostserver ein strukturiertes Informations-Sicherheits-Management-System (kurz ISMS) eingeführt, das den Vorgaben des ISO- Standards 27001 folgt. Neben dem Kernteam um den
Informationssicherheits- beauftragten Fred van Gestel, waren alle Mitarbeiter und Abteilungen von der Evaluierung und Erarbeitung bis zur Implementierung beteiligt.„Nach der erfolgreichen Einführung von ISO 9001 „Qualitätsmanagement" 2011 haben wir darauf aufbauend unser Informations-Sicherheits-Management-System nach ISO 27001 intern in nur einem Jahr umgesetzt. Wir sind sehr stolz darauf, dass der hohe Standard der Informationssicherheit, den wir in unserem Unternehmen haben, jetzt unabhängig bestätigt wurde", erklärt Marcus Schäfer, Geschäftsführer der Hostserver GmbH. Informationssicherheitsbeauftragter (ISB) Fred van Gestel bestätigt:„Der bewusste Verzicht auf externe Berater und vorgefertigte Lösungen bei der Umsetzung von ISO 27001 hat zu einer besonders tiefen Verankerung des Sicherheitsbewusstseins im Unternehmen geführt, das täglich aktiv durch unsere Mitarbeiter gelebt wird." Alle Maßnahmen des Informations-Sicherheits-Ma- nagement-Systems der Hostserver GmbH sind dokumentiert und werden bei rechtlichen, technischen oder organisatorischen Veränderungen angepasst. Ein ISMS ist ein kontinuierlicher Prozess, an dem unser Informa- tionssicherheitsteam unter Leitung des ISB permanent arbeitet. Der TÜV SÜD prüft jährlich die ISO-konforme Umsetzung im Rahmen eines Überwachungsaudits.
1 0 webdesigner 04/2013
_________________ NEWSNeuigkeiten aus der Welt des Webdesigns
Telekom plant„WLAN to go//
Die Deutsche Telekom will WLAN künftig stärker 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 Telekom jährlich rund 2 Millionen DSL-Router austauscht, soll die Zahl der Hotspots rasch steigen. Kunden, die ihren Festnetzanschluss für WLAN to go bereitstellen, können im Gegenzug auf das komplette Hotspot-Netz der Telekom und die Fon-Hotspots weltweit zugreifen. Dazu ist nach
Angaben des Unternehmens nicht zwingend ein Anschluss der Telekom erforderlich, wohl aber ein spezieller Router. Die Telekom will ihre Festnetzanschlüsse auch in anderen Ländern mit WLAN-Hotspots nachrüsten.Die Telekom will einen dichten "WLAN- Teppich" schaffen, der die durch den Smartphone- und Tablet-Boom immer stärker in Anspruch genommenen Mobilfunknetze in den Ballungszentren entlasten und dafür ansonsten brachliegende Kapazitäten der Festnetzanschlüsse der eigenen Kunden nutzen.
Suchmaschinenoptimierung. Das umfassende HandbuchDas Handbuch zur Suchmaschinen-Optimierung von Sebastian Erlhofer gilt in Fachkreisen zu Recht als das deutschsprachige Standardwerk.Es bietet Einsteigern und Fortgeschrittenen fundierte Informationen zu allen wichtigen Bereichen der Such- maschinen-Optimierung. Tauchen Sie ein in die Welt des Online-Marketings. Verständlich werden alle relevanten Begriffe und Konzepte ausführlich erklärt und erläutert. Neben ausführlichen Details zur Planung und Erfolgsmessung einer strategischen Suchmaschinen- Optimierung reicht das Spektrum von der Keyword- Recherche, der wichtigen Onpage-Optimierung Ihrer Website über erfolgreiche Methoden des Linkbuildings bis hin zu Ranktracking, Monitoring und Controlling.Auch ergänzende Bereiche wie Google AdWords, die Konversionsraten-Optimierung und Google Analytics
Auf einen BlickTitel: Suchmaschinenoptimierung.Das umfassende HandbuchAutor: Sebastian ErlhoferVerlag: Galileo ComputingISBN: 978-3-8362-1898-6Preis: 39,90 Euro, als Onlineausgabe 34,90 Euro
kommen nicht zu kurz.Die aufgabenorientierte Struktur und die anschaulichen Beispiele ermöglichen Ihnen die direkte und schnelle Umsetzung in der Praxis.
Sebastian Erlhofer
JO
Suchmaschinen-Fm ' O ptim ierung
Das umfassende Handbuch
► G r u n d la g e n , f u n k t i o n » w f i% * n u n d R a n k in * - O p t im i r r u « g
► P la n u n g u n d D u n h fü h ru n g fü r C o o g l« und Co► K o n v * r * i o n \ i a t e n . t e i g e m , G o o g l r Ä d W o , d s . W e b A n a l y « ^
" S .C a l i l lo C o m p u tin g
04/2013 webdesigner
NEWSNeuigkeiten aus der Welt des Webdesigns
Host Europe Root Server 2.0: Mehr Performance zum gleichen Preisschinen Vorbehalten waren.
Mit der neuen Produktgeneration „Root Server 2.0" erhalten die Kunden bei Host Europe ab sofort eine hochgeschraubte Server-Per- formance - bei gleichem Preis. Denn Host Europe stattet seine Root-Server mit mehr RAM und zusätzlichen Prozessorkernen aus. Interessierte können unter sieben Leistungsklassen die für ihre Anforderungen ideale Lösung auswählen.Host Europe Root Server 2.0 kosten zwischen49 und 399 Euro monatlich und können jederzeit mit einer Frist von 4 Wochen zum Monatsende gekündigt werden. Im Preis enthalten ist bereits der Support, der an 365 Tagen im Jahr 24 Stunden am Tag kostenlos per E-Mail oderTelefon (0800 Rufnummer) erreichbar ist.
„Conference on Animation, Effects, Games and Transmedia" vom 23. bis zum 26. April im Stuttgarter Haus der WirtschaftKnapp einen Monat Monate vor Veranstaltungsbeginn freut sich Europas einflussreichste Konferenz für Animation, Effekte,Games und Transmedia über weitere bestätigte Programm- Highlights: Disney Pixars Regisseur und Drehbuchautor Saschka Unseld präsentiert auf der FMX 2013 sein neuestes Projekt, den Kurzfilm The Blue Urmbrella. Technische Schwerpunkte bilden in diesem Jahr unter anderem die Themenreihen Cloud Gaming und Cloud Computing, die Jon Peddie mit einer Keynote eröffnet. Besonderes Augenmerk liegt im Rahmen der „Innovative Places"-Reihe auf den Standorten Österreich, Toronto und der Türkei. Marktführer wie Adobe und Autodesk laden die Besucher in Stuttgart zu spannenden Workshops ein, und die erstmalig ins Leben gerufene „Fast Forward Education" schlägt die Brücke zwischen internationalen Medien-Hochschulen und der digitalen Industrie.Jon Peddie, Pionier der digitalen Medienindustrie und vielzitierter tiver neuer Möglichkeiten auch Kompromisse eingehen muss. UnterFachautor zu komplexen Multimediathemen, hält auf der FMX gleich stützt wird Peddie dabei von JPR-Vizepräsidentin Kathleen Mäher, die zwei Vorträge. In seiner Keynote der von Ludwig von Reiche (NVIDIA unter dem Motto„Managing and Making Entertainment" an aktuellen ARC) kuratierten „Cloud Computing"-Reihe geht der Gründer von Jon Beispielen die Vorteile und Herausforderungen bei der Erstellung von Peddie Research (JPR) der Frage nach, was die Cloud für Design, Ani- digitalem Content in der Cloud erläutert. In einer zweiten Präsentation mation und Visual Effects bedeutet. Dabei konzentriert er sich auf Aug- im Rahmen der „New Technology"-Reihe gibt Peddie einen globalen mented Reality, Displays und die verschiedenen Endgeräte und erklärt, Überblick über die neuesten technischen Veränderungen vor dem warum der Nutzer bei der Multi-Plattform-Visualisierung trotz attrak- Hintergrund des aktuell stattfindenden Paradigmenwechsels.
12 webdesigner 04/2013
Host Europe hat die Leistung seines Root-Ser- vers erhöht. Künftig erhalten Neukunden von Root Server 2.0 bis zu 50 Prozent mehr RAM und bis zu 8 zusätzliche Prozessorkerne.
Host Europe Root Server arbeiten mit der innovativen Vollvirtualisierung von Parallels Server Bare Metal, die die Vorzüge von virtuellen und dedizierten Servern in einer Lösung vereint:Dank dedizierter Hardware liefern sie die Performance eines physikalischen Hochleistungsservers und ermöglichen vollen Root-
Zugriff auf alle Hardware-Ressourcen. Gleichzeitig überzeugen Root Server durch einfache und komfortable Installations- und Administrationsroutinen, die bislang virtuellen Ma
NEWSNeuigkeiten aus der Welt des Webdesigns
Firefox hat keine Lust auf AppleWeil unabhängige Entwickler für iPhone und iPad keine Browser mit eigener Darstellungstechnologie anbieten dürfen verzichtet Mozilla auf die Entwicklung eines eigenen Browsers für iphone und ipad. Deshalb ist es unmöglich, einen schnelleren Browser als das Apple-eigene Produkt zu vertreiben.Solange Apple unabhängige Entwickler benachteiligt, wird die Mozilla-Stiftung keine Version des Firefox-Browsers für iPhone und iPad entwickeln, sagte Firefox-Produktmanager Jay Sullivan bei der Konferenz SXSW in Austin Sullivan beklagt, dass Apple unabhängigen Entwicklern Browser-Innovationen erheblich erschwert. So sei es verboten, über Apples App Store Browser zu vertreiben, die eine andere Technologie zum Darstellen von Websites und Ausführen von JavaScript nutzen als
die von Apple vorgeschriebene. Mozilla könnte deshalb beim eigenen Firefox-Browser unter iOS nicht die eigenen, besonders schnellen Verfahren zur Darstellung von Web-Inhalten nutzen.Apple schreibt Entwicklern vor, dass sie zur Darstellung von Websites die von Apple vorgegebene Komponente UlWebView nutzen. Apple hingegen nutzt für seinen eigenen Safari-Browser unter iOS eine andere Technologie, unter anderem die Nitro-Engine, die Apple- Software Vorbehalten ist.
Universität Paderborn entwickelt P2P-FacebookAuf der CeBIT hat ein hauptsächlich an der Universität Paderborn ansässiges Team um den in Düsseldorf lehrenden Juniorprofessor Kälmän Graffi ein peer-to- Peer-Framework für dezentrale soziale Netzwerke vorgestellt, in denen die Nutzer ihre Daten nicht mehr einem großen Unternehmen überantworten müssen, sondern auf eigener Flardware speichern, wo sie deutlich mehr Kontrolle darüber haben.Dies ist unter anderem deshalb der Fall, weil Nutzungsbedingungen nicht beliebig geändert werden können und weil ein Anreiz fehlt, mit einem mehr oder weniger heimlichen Verkauf von Daten Geld zu verdienen. Außerdem können Oberflächen so gestaltet werden, dass die Sichtbarmachung nicht versehentlich für einen weitaus
größeren als den eigentlich vorgesehenen Personenkreis erfolgt. Letzteres garantiert das Framework auch dadurch, dass alle Daten ver
schlüsselt und signiert werden. Graffi selbst sieht den Einsatz seiner Entwicklung, deren Prototyp bereits an den Universitäten Pader-
born und Düsseldorf läuft, allerdings eher bei Unternehmen, im öffentlichen Dienst und bei NGOs, wo sie beispielsweise Schulungen
oder örtliche verstreute Arbeitsgruppen nutzen könnte. Durch das P2P-Prinzip wären dazu keine großen Investitionen in neue Server notwendig, weil die dezentral vorhandenen Kapazitäten genutzt werden. NGOs in Staaten mit Zensurproblem hätten darüber hinaus den Vorteil, dass sich ein solches Netzwerk aufgrund seiner verteilten Struktur nur schwer vollständig abschalten lässt.Grundsätzlich soll die Technologie aber jeder nutzen
können - egal ob er damit ein eigenes Netzwerk für zehn Freunde oder ein neues Face- book betreiben will.
/ .
a
Social Media
04/2013 webdesigner 1 3
RATGEBERWeb Storage, Application Cache und IndexedDB von Daniel Flöter
Web Storage, Application Cache und IndexedDB
Web-Anwendungen offline nutzbar machenServerseitige Anwendungen sind praktisch sofern ein Internetzugang verfügbar ist. Dank neuer Standards und Technologien zur Nutzung von Browsercaches sind immer mehr Web- Anwendungen auch offline nutzbar.
Cache ist noch leer:
.manifest
Manifest-Datei: Beschreibt den
Anwendungscache
Webseite anzeigen und in den Anwendungscache laden
Anwendungscache: Cached die in der
Manifest-Datei stehenden Dateien
*«
oder Cache ist angelegt
Manifest-Datei ändern:• Dateien aufnehmen• Dateien löschen• Version aktualisieren>----- ------ J
Anwendungscache aktualisieren
Durch neue Technologien wie Application Cache können wesentlich größere
Datenmengen im Browsercache vor
gehalten werden, als dies bisher m it Cookies
möglich war.
Webserver
C ookies sind in der Webentwicklung nicht mehr wegzudenken. Mit HTML5 & Co. sollten auch die Cookies eine Überarbeitung bekommen, und
zwar eine, die gleich etwas größer ausfällt. Dabei sollten die bestehenden alten Cookies nicht einfach ersetzt werden, sondern mit den neuen einen großen Bruder bekommen. Man erahnte dann wohl so viel Potenzial für die neuen Cookies, dass sie sogar ihren eigenen Standardisierungsprozess erhielten. Inzwischen haben sich nun drei neue Namen für die Supercookies etabliert, die die Vorteile der neuen Cookies verdeutlichen sollen:„Web Storage", „Application Cache" und „IndexedDB". Der Vollständigkeit wegen soll hier auch ein Standardisierungsprozess nicht unerwähnt bleiben, der allerdings schon wieder als aufgegeben gilt, und zwar„Web SQL".Cookies erlauben es Daten dauerhaft im Browser zu speichern, ähnlich wie es der Browsercache eigenständig tut. Beide Möglichkeiten der Zwischenspeicherung im Client
Client/Browser
haben ihre eigene Funktionalität zu erfüllen. Zwar besitzen diese Speichertechniken eine gewisse Genialität und eine unglaublich wichtige Funktionalität in der Webentwicklung, es lässt sich nicht von der Hand weisen, dass bei der Entstehung beider Konzepte auch Fragen unbeantwortet gelassen werden mussten, um die Verbreitung und die Implementierung in allen Browsern zu schaffen.So helfen Cookies dabei Anmeldedaten, Artikel in einem Einkaufswagen oder Klickverhalten bei Werbebannern über mehrere Seitenwechsel hinweg zu erfassen, jedoch ist die Größe der zu speichernden Daten recht begrenzt und die Cookies werden unverschlüsselt übertragen. Für den Browsercache gilt, dass er keinerlei API zur Verfügung stellt und so zwar zur Verbesserung eines schnelleren Sei- tenaufbaus verhilft, aber man keine Chance hat deterministischen Programmcode um den Browsercache zu schreiben. Genau an diesen Schwächen wurde gearbeitet und neue Standards definiert.
14 webdesigner 04/2013
RATGEBERWeb Storage, Application Cache und IndexedDB
Web Storage
Das neue Web Storage erweitert das JavaScript-Win- dow-Objekt um zwei Funktionen, den Local Storage und den Session Storage. Letzterer ist am ehesten mit Cookies zu vergleichen. Während Local Storage die Daten auch dann noch speichert, wenn der Browser geschlossen wird, ist der Session Storage an eine Anwendung oder Seite sowie an ein Tab und Browserfenster gebunden. Außerhalb einer solchen Session sind die Daten nicht mehr gültig. Je nach verwendetem Browser können zwischen fünf MB und zehn MB große Daten 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 lassen sich nur Werte vom Typ String speichern, weshalb beim W3C auch über einen Zugriff auf SQL-Basis diskutiert wird. Bis dies aber umgesetzt ist, kann man sich mitJSON.stringifyO" undJSON.parseO" behelfen. ►
• O trM Im »* » P \* f V*wTwfca Qm*S Ort«« Ç\wàm-ém Trw*elMi I%mm
Cougle
Orve
n
• My t>w*
ShndttMn« :ttr%sÜK«r4AdNt»
j 0*1 rm 0*m
Ow#*w1 rVaq/w f>*M
Edü OoooWí Documontt and v*w Ooogto Sp w d tfiM t»
1. 8«t V0 Offlin« ttec«fcwgm Ou u ii f t i mrä C m fm ZZniDiNNfi «■ t» MM« 10«Mtu«#r LMf monC « PU*-; CT
öff-1 in M O I f W O o c i
1 In »Uli V* Om* Q n m ;You r « M M i O n r a «M i i m * ** - r » CWN rtori
Google Does kann im Chrome-Browser auch offline verwendet werden.
Application Cache
Mit dem Application Cache oder dem Offline Cache ist ein weiterer Cache im Browser entstanden, der eine hundertprozentige Stabilität und Zuverlässigkeit garantiert, um ganze Anwendungen im Browser offline verfügbar zu machen. Was Google hier mit Applikationen für den Chrome Browser bei den Offline-Modi von Google Docs (Abbildung 1), Gmail und Google Calen- dar Vormacht, ist auch für Notizanwendungen wie Evernote verfügbar. An dieser Stelle ist jedoch hinzuzufügen, dass diese nur mit der kostenpflichtigen Premi- umversion für iOS, Android und Windows Phone funktionieren. Der Application Cache wird mit JavaScript aktualisiert und verwaltet, setzt aber zusätzlich eine Manifest-Datei auf dem Webserver voraus, die die zu cachenden Dateien auflistet. Ohne die Manifest-Datei würde der Application Cache nicht funktionieren (siehe Abbildung 2). Da der Cache ohne Ablaufdatum funktioniert, sollte man sich über das Konzept dahinter im Klaren sein, sonst werden Webseiten im Browser nach einem Update möglicherweise nicht mehr oder nicht richtig aktualisiert.Beim Application Cache sind zwei Zustände zu unterscheiden:
1 . Der Application Cache ist noch leer bzw. noch nicht angelegt und der Cache ist gefüllt und muss aktualisiert werden.2. Der Application Cache geht davon aus, dass die Änderungen, die gemacht werden, vom Benutzer kom
men und nicht vom Server, weshalb er auch den Namen „Offlinecache" bekommen hat.Eine Aktualisierung ist natürlich möglich, es sind aber zwei Seiten- oder JavaScript-Aufrufe nötig. Der Erste dient dazu, den Cache zu aktualisieren, der zweite hat die Funktion die Daten aus dem Cache auch anzuzeigen. Beide Speichermöglichkeiten, Web Storage und Application Cache, sollen hier betrachtet werden. Beide werden von allen gängigen Browsern unterstützt. Der Application Cache steht allerdings erst im Internet Explorer ab der Version 10 zur Verfügung, welcher nun aber auch für Windows 7 downloadbar ist.
IndexedDB
Bei IndexedDB ist die Browserunterstützung recht gut fortgeschritten, sie ist aber noch nicht ganz gegeben und soll deshalb hier auch nicht im Detail erläutert werden. Auch wenn die beiden Browser Chrome und Safari die gleiche Browserengine Webkit verwenden, funktioniert IndexedDB im Safari„noch" nicht. Gleiches gilt auch für Opera. Chrome und Safari kommen zusammen auf etwa fünf bis sechs Prozent Marktanteile, was zwar nach wenig klingt, aber dennoch sollten die beiden Webkit- Browser nicht vernachlässigt werden, zumal ihr Marktanteil in den letzten Jahren recht konstant blieb. IndexedDB lässt sich bei den NoSQL Speicherarten ein- ordnen und unterstützt die Suche nach Indizes. Der Vorteil ist eine sehr schnelle Suche nach Objekten, die einem bestimmten Feld entsprechen, ohne jedes Objekt
04/2013 webdesigner 15
RATGEBERWeb Storage, Application Cache und IndexedDB
im Speicher zu durchlaufen. Zu den Nachteilen zählt im Moment noch, dass die Browserimplementierungen unterschiedlich und miteinander inkompatibel sein können. Dennoch wird derTechnologie ein großes Potenzial vorausgesagt. IndexedDB-lnteressierte können sich unter,http://nparashuram.com/lndexedDB/" näher mit der Materie vertraut machen.
Für Web SQL ist von Seiten vonseiten der W3C Vorsicht geboten, da das Konsortium die Spezifikation nicht weiter pflegen und entwickeln möchte. Mit Web SQL sollte die SQLite-Datenbank in den Browser fest eingebaut werden, um dann per SQL-Befehle Daten lesen und sch
reiben zu können. Mozilla bekannte sich beispielsweise, hauptsächlich aus philosophischen Gründen, gegen eine Verwendung von SQL im Client per JavaScript-API und stuft das Vorhaben in verschiedenen Gesprächen auf dem eigenen Mozilla Campus, mit Microsoft oder mit dem ChromeTeam als besonders anspruchslos ein. Unter anderem verweist man dort auf die umstrittene Benutzung von SQL auf Webservern, gerade im Zusammenhang mit der Speicherung von großen Datenmengen im Browser. Es müsse erst eine geeignete SQL-Implementierung gefunden werden, welche die benötigte Funktionalität im Browser mit sich bringt ohne einen bestehenden Standard, wie SQLite, ändern zu müssen. Was z.B. mit IndexedDB zutrifft, („https:// hacks.m ozilla.org/2010/06/beyond-htm l5-databa- se-apis-and-the-road-to-indexeddb/")
Web SQL
Warum Offline-Daten praktisch sind
Mit den zwei aktuell wichtigsten neuen HTML5-Standards, dem Web Storage und dem Application Cache, werden vom Internetbrowser neue Speichertechniken angeboten, die von allen gängigen Browsern unterstützt werden. Die folgende Übersicht zeigt, ab welcher Version der jeweilige Browser welchen Standard unterstützt.
Chrome für AndroidFirefox für Android 15.0 15.0
Opera MinOpera MobileBlackberry Browser
Insgesamt lässt sich sagen, dass die Speicherarten ausgereifter sind und ein Caching zulassen, ähnlich wie sie bisher auf dem Server eingesetzt wurden. Ein möglicher Vorteil von Zwischenspeicherung im Browser ist, dass der FITTP- Aufruf (Web-Cycle) nicht mehr zwischen Server und Browser liegt und damit wegfällt. Im Falle des Application Caches ist dieTechnik so stabil konzipiert worden, dass sogar davon ausgegangen werden kann, dass alle benötigten Daten aus dem Cache geholt werden können und vorrätig sind. Dies gestattet eine temporäre Trennung vom Browser (bzw. Browsercache) und Server, wodurch Offline-Anwendungen ermöglicht werden.
webdesigner 04/2013
RATGEBERWeb Storage, Application Cache und IndexedDB
Vorteile für Offline-Anwendungen
Für Offline-Anwendungen gibt es mehrere verschiedene Gründe:
•Im Flugzeug ist es nicht erlaubt eine mobile Verbindung zum Internet zu nutzen. Für viele Passagiere ist es praktisch, wenn sie Anwendungen trotzdem nutzen können, die sie sonst auch zur Kommunikation verwenden, und diese nach dem Flug leicht synchronisieren können. E-Mail-Entwürfe, Artikel, Newsletter, Webausschnitte können im Offlinespeicher abgelegt werden und arbeiten quasi wie mit vorhandener Internetanbindung.
•Auf Konferenzen, Open-Air-Veranstaltungen oder in freier Natur ist die Netzverbindung oft schlecht oder unter Umständen überhaupt nicht möglich. Bestimmte Daten, wie Telefonnummern oder Wegbeschreibungen, oder aber auch bestimmte Programme können mit der neuen Technik in diesen Situationen verfügbar gemacht werden.
• Auch digitale Notizzettel, Einkaufzettel oder ToDo-Lis- ten können problemlos auch ohne Netz mit einer Web- Anwendung erstellt werden und bei nächster Gelegenheit über das Internet synchronisiert werden, sobald eine Verbindung wieder verfügbar ist.
•Viele Mobilfunknutzer haben volumengebundene Tarife oder wollen den mobilen Internetzugang wegen hoher Roaming-Gebühren nicht oder nur eingeschränkt nutzen. Viele Aufgaben lassen sich dank Web Storage und Application Cache ohne Netzzugang erledigen.
•Zunehmend werden auch professionelle Anwendungen wie etwa Bildbearbeitungs- oder DTP-Software als mietbare Cloud-Lösungen angeboten. Die temporäre Unabhängigkeit von einem Internetzugang steigert den Nutzen solcher Dienste für den Anwender ungemein.
Bisher konnte sich die Kombination aus Application Cache und Web Storage in den oben genannten großen Anwendungen behaupten. Es ist aber auch zu sagen, dass Google Does - Offline Does nur im Chrome-Brow- ser als Desktopinstallation oder in den Chrome Books von Google unterstützt wird. Der Chrome-Browser für Android sowie andere Browser erkennen die Funktion noch nicht.
Auch stellt sich die Frage, warum es sich eigentlich um zwei Technologien handelt. Das hat vor allem damit zu tun, dass nach wie vor eine Kommunikation zwischen Browser und Server stattfinden muss, um das offline Arbeiten zu gewährleisten. Zum einen kommen die benötigen Daten für eine Anwendung von einem Server, wie etwa HTML-, CSS-, JavaScript-Dateien oder Bilder. Zum anderen macht der Benutzer Eingaben in Form von beispielsweise Formulardaten, in Textfeldern, Checkboxen oder Dropdown-Auswahlmenüs. Für beide Arten von Daten gibt es eine eigene Speichermethode im Browser bzw. im Browser und auf dem Server, denn der Application Cache wird eigentlich im Webserver definiert und geändert, wo er schließlich vom Browser aktualisiert wird. Der Web Storage ist dagegen für die Benutzereingaben zuständig.
Der Vergleich von Web Storage und Cookies
Der Web Storage wird oft mit Cookies verglichen. Und ähnlich wie Cookies können sitzungsabhängig oder domänenspezifische Key/Value-Daten gespeichert werden. Ein großer Vorteil ist aber, dass sich beim Web Storage Speicherbereiche nicht mehr gegenseitig stören können. Im Zuge der Offlineverhaltensweisen, z.B. das lokale Speichern von Werten für die spätere Verbindungsaufnahme mit dem Server, verhält sich der Web Storage eindeutiger, da er keinen Informationsverlust duldet. Gerade bei mehreren offenen Tabs oder Fenstern kann es bei Cookies leicht passieren, dass das gleiche Cookie gelesen und beschrieben wird, so dass zum Beispiel beim Onlineshoppen der Warenkorb plötzlich leer ist oder aber zwei gleiche Artikel hinzugefügt wurden. Der Speicherbereich unterscheidet sich aber auch grundlegend von dem der Cookies. Es werden keine Daten 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 JavaScriptAPI umfangreicher und kann so leichter auf einzelne Daten zugreifen.
Die API-Schnittstelle sieht folgende Eigenschaften und Methoden vor:
.getltem(„key")Ruft dem Key zugeordneten aktuellen Wert ab.
.setltem(„key" „value")Legt ein KeyA/alue Paar an.
.lengthRuft die Länge der Key/Value Liste ab.
Caching Techniken verwenden
04/2013 webdesigner
RATGEBERWeb Storage, Application Cache und IndexedDB
.remove(„key")im iE: .removeltem(„key")Löscht ein KeyA/alue Paar.
.dear()Entfernt alle KeyA/alue Paare.
.remainingSpaceRuft den verbleibenden Speicherbereich ab, in Bytes.
Zudem gibt es auch Events:
,storage' im iE:,onstorage'Wird an document-Object ausgelöst, wenn ein Speicherbereich geändert wird. Alle Dokumente, die denselben Sitzungskontext nutzen und die Dokumente, die momentan eine Seite von derselben Domäne anzeigen, empfangen das Ereignis.
Der Zugriff mit JavaScript ist folgender:
window.addEventListener(,storage', function(event){ console.og(event.key + „ wurde geändert von „ + event. oldValue + „ in „ + event.newValue);}, false);
if(typeof(Storage)!=="undefined"){
// Das localStorage und sessionStorage Objekt wird unterstütztlocalStorage.setltem(„name", „Simone"); localStorage.setltem(„name", „Susanne"); var strName = localStorage.getltem(„name");}else{// Kein Web Storage Support!}
Um daraus eine Offline Anwendung zu machen, sind die ,online'- und ,offline'- Events sowie die navigator.onLine-Property wichtig. Speichert man also den aktuellen Verbindungsstatus, sollte die Anwendung im „online"-Fall alle Benutzerdaten unverzüglich zurück zum Server senden. lm„offline"-Fall gehen alle Benutzerdaten in den Web Storage. Ob es sich dabei um localStorage oder sessionStorage handeln soll, muss sich der Webentwickler überlegen. Hierbei ist die Überlegung wichtig, ob die auch zur Verfügung stehen sollen, wenn der Browser geschlossen wird, oder ob sie so lange verfügbar sind, bis die Seite bzw. der Tab geschlossen wird. Außerdem muss eine Abfrage eingerichtet werden, die bei der nächsten Internetverbindung prüft, ob eventuell
vorhandene Benutzerdaten im Web Storage vorhanden sind, worauf diese Daten dann mit den Daten auf dem Server synchronisiert werden können. Also immer die Daten vom Server und die vom Web Storage anzeigen und beim Übertragen zum Server die Daten aus dem Web Storage nicht vergessen zu übertragen und dann aus dem Web Storage zu löschen.Um beide Zustände (online/offline) zu testen, gibt es im Firefox mit „Datei -> Offline arbeiten" eine Funktion, mit der die Internetverbindung unterbrochen werden kann.
window.addEventListener(,offline', function(event) { console.log(„Browser ist jetzt offline.");}, false);
window.addEventListener(,online', function(event) { console.log(„Browser ist jetzt online."); var request = new XMLHttpRequestO; request.open(,get', ,save.php?query=' + localStorage. getltem(„query"), true); request.send(null);}, false);
if (navigator.onLine) { console.log(„Browser ist online.") var request = new XMLHttpRequestO; request.open(,get', ,save.php?query=data', true); request.send(null);} eise {console.log(„Browser ist offline."); localStorage.setltem(„query", „data");
Die Vorteile des Application Cache
Der Application Cache hat die Besonderheit, dass die Implementierung bzw. die Programmierung client- und serverseitig erfolgt, wie in Abbildung 2 gezeigt wird. Serverseitig liegt die Manifest-Datei, in der alle Dateien aufgelistet sind, die gecached werden sollen. Diese Manifest-Datei kann mit beliebigen serverseitigen Programmiersprachen geändert werden. Eine Änderung der Datei ist zwingend erforderlich, selbst wenn es nur um einen geänderten Versionskommentar handelt, der besagt, dass aktualisierte Dateien vom Client angefordert werden können. Damit der Client mit der Manifest-Datei umgehen kann, muss sie im rnani- fest-Attribut des html-Tags stehen. Dadurch weiß der Browser, wo er die Manifest-Datei findet, kann sie ausle- sen und alle darin stehenden Dateien cachen.
chtml manifest="example.manifest">
webdesigner 04/2013
RATGEBERWeb Storage, Application Cache und IndexedDB
Hier ist auch anzumerken, dass der Application Cache ein Offlineverhalten zeigt, das besagt: Wird die Manifest-Datei mithilfe des manifest-Attributs referenziert, müssen immer alle benötigten Dateien im Application Cache stehen. Es wird dann nämlich nicht ver
sucht, Dateien vom Server anzufordern und nachzuladen. Wenn es sich um Background-Images, CSS-Files oder ähnliche Dinge handelt, gibt es anstatt 200-0« Statusmeldungen (wie in Abb. 3 zu sehen) nur 404-Fehlermeldungen. ▼
o R esources | N e tw o rk Sources ( j t T im e lin e ^ P rofiles A u d its C on so le
N a m eP ath M e th o d S ta tu s
T e x t T y p e In i t ia to r S izeC o n te n t l$rro
<>c a r .h tm l/A p p C a c b e
CET2 0 0o k
te x t /h tm l O th e r (fro m cach e)4m s4 m s ^
s ty le s h e e tx s s/A p p C a c b e
GET2 0 0OK
te x t /c s sc a r .h tm l.4P a n e r
(fro m cache)0m s0 m s
m a in js__Ü /A p p C a c h e /s c r ip tt
CET2 0 0OK
a p p lic a t io n /p v a s c r .p tc a r.h tm l; S Parser
(fro m cach e)0 m s0 m s
c a rg p g 2 0 0 c a r.h tm l; 18(fro m cache)
9 m sCET
OK•m a g e /jp e g
Parser 9 m s j* M l
/A p p C a c h f / im *qr\
4 r t q u t i d 1 0 8 I r i n i f i r r t d 1 3 6 m » (o n lo a d : 3 8 m s , D O M C o n te n tL o a d e d : 2 8 m i )
e . >2 Q . • Q O D o c u m e n ts S ty le s h e e ts Im a g e s S c rip ts X H R F o n ts W e b S o c k e ts O th e r
Alle Daten werden aus dem Cache geladen.
Da es sich um einen relativ neuen Mimetyp handelt, sollte man prüfen ob er in die Konfigurationsdatei aufzunehmen ist unter[Laufwerksbuchstabe]:\xampp\apache\conf\mime.ty-pes:
text/cache-manifest appcachetext/cache-manifest manifest
Alternativ kann man die .htaccess-Datei mit AddType modifizieren[Laufwerksbuchstabe]:\xampp\htdocs\forbidden\.ht-access:
AddType text/cache-manifest .manifest AddType text/cache-manifest .appcache
Die eigentliche Dynamik findet auf dem Server statt, dort liegt die Manifest-Datei. Anstoß von Cacheänderungen gehen von Änderungen dieser Manifest-Datei aus. Entweder man ersetzt sie mit neuen Inhalten, ändert sie oder löscht dort Dateien mit einer Webserver- programmiersprache, wie PHP oder C#.
<?php$add = „styles.css";Sdelete = „jquery.js";SAppCache = file ( „example.manifest");$fp = fopen ( „example.manifest", „w "); if($fp){
flock ( $fp, 2);$nl = ehr (13 ). ehr (10);
foreach ( SAppCache as $line) {if (strpos ( $line, ,#') === 0) //
startsWidth #: revision {
fputs ( $fp, „# „. date ( „d-m-Y H:i:s"). $nl); //update
else if (strpos ( $line,,CACHE:') !== false){
fputs ( $fp, ,,{$line}" );fputs ( $fp, ,,{$add}". $nl); // add new line
}
else if (strpos ( $line, .NETWORK:') !== false){
//... same as CACHE: for NETWORK: and FALLBACK:
}
else if (strpos ( $line, Sdelete) !== false){
//delete: not add}
else{
fputs ( $fp, ,,{$line}"); // no change: copy}
echo „Applicatio Cache wurde aktualisiert.<p>"; flock ( $fp, 3 ); fclose ( $fp );
} else {
04/2013 webdesigner 19
RATGEBERWeb Storage, Application Cache und IndexedDB
echo „Datei konnte nicht zum"; echo „ Schreiben geöffnet werden";
}
Die Dateien lassen sich relativ oder absolut angeben. Es kann also die jQuery CDN Adresse verwendet werden, um den Application Cache zu füllen.
Die Manifest-Datei kann die folgenden Einträge besitzen:
CACHE:Alles was gecacht werden soll. Keine Teilpfade.
NETWORK:Alles was nicht gecacht werden soll. Überschreibt CACHE. Es sind Teilpfade erlaubt im Gegensatz zu CACHE.
FALLBACK:Ersatzdatei. Ist die Anwendung offline, werden diese Erstzdateien angezeigt. Teilpfade erlaubt, wie: / Offline, html, mit / für root Ordner.
Beispiel Manifest-Datei:
CACHE MANIFEST
CACHE:index.htmlhttp://ajax.googleapis.eom/ajax/libs/jquery/1.7.0/jquery.min.js
FALLBACK:Offline.html
Soll der Cache refreshed werden, um beispielsweise neue Seiteninhalte oder ein geändertes CSS-File zu laden, muss immer die Manifest-Datei geändert werden. Für den Fall dass die geänderte Datei nicht umbenannt werden soll, da sonst auch keine neuen Dateien hinzukommen oder entfernt werden, kann man sich eines Tricks bedienen und Versionskommentare in die Datei überschreiben, wie zum Beispiel:
# new version at 2012-12-30_14:13:11.
Damit der neu geladene Cacheinhalt auch auf der Seite angezeigt wird, muss man die Seite neu laden mit„win- dow.location.reloadO . Ist die Manifest-Datei geändert worden und wird der Cache neu geladen, wird immer der ganze Cache neu geladen, wie er von der Manifest
Datei beschrieben wird (vergleiche Abbildung 4). ▼
^ I k r w n s ^ ftrw u rio ^ S f lw t 0 Timc'inc ^ Flo'i'«) [ ^ ConxAe
Creatu n Application Cache « ith aarufest http.//localtost/AppCache/Ae«{ache.app<a<*eApplication Cochc CKccWmg cv«*t Application CiChaApplication lach« *»r©fir«st «voM (• ot Kl loci m o i t / A p p i . H O o*vaappluannn P ro fr# « #M8J8I < 1 ftf Hl Mr«*-//lnfalhA*r/A|»f»rafh#//ar.h»«lAptrluaUu»» Cad»c P » t* rc » c»cwl <2 ul 81 tiLla.//luv.«Htm L / A t f t t Ca i i a c / l i La lApplication Coch« Pr& crc» ewent <3 of 0) Ktt0;//locaUt4»t/AppCac*</scriot>/»aift.j jAppli<atiO* Cachc fro«rc»» Cv«M <4 of 8) H t l;/ / Ig M lte ll/ A M C a tfc / lU lt lh S f il i 111Application Cach« Pro fratt «v«M (S ot 81 l» tf»// lo ca lh—t/A—CaOw/iaaaaa/loaa. i map p u o tion lacna «v*n» <* of 8) Mtp'//local*»ott/apptacn#/i*a*ai/car.jpfappitrarinn farn# Prn$r*<< <7 nt Mt httft;//1nraltecr/Aftprarn*/A vw lu iU u n Cdcltc P ivg rc»* e*cn l <8 ul 81 Application Cach« Cachcd event
Gefeuerte Events beim Cache aktualisieren.
Erst durch die Änderung der Manifest-Datei kann der Anwendungscache im Browser aktualisiert werden, mit den Anweisungen „window.applicatoncache.updateö" und „.relaodO". Soll kein„.reload()" verwendet werden, da die Seite sonst unschön neu geladen wird, kann „.swap- CacheO" benutzt werden. Mit „.swapCacheO" wird der neu geladene Seiteninhalt noch nicht angezeigt. Es wird nur der Cache dabei aktualisiert, der beim nächsten Seitenwechsel (oder„F5") angezeigt wird. Das„.swapCache()" wird genauso mit bei einem Neuladen der Seite mit F5 oder mit der Anweisung „window.location.relaodO" erreicht und kann weggelassen werden, wenn eines der beiden genannten Ereignisse eintritt.Damit der neu geladene Seiteninhalt auch angezeigt wird, würde man eher auf das „.reloadO" zurückgreifen, was bei „.swapCacheO" noch nicht der Fall ist.Alternativ kann aber auch DOM-Manipulation eigensetzt werden, um einen „.reloadO" zu vermeiden. Denn auch AJAX-Aufrufe bedienen sich voll aus dem Application Cache, vorausgesetzt das html-Tag besitzt eine gültige Manifest-Datei als manifest-Attribut.
Beim Befüllen des Caches können einige Statusevents gefeuert werden, deren Event-Typ in der Handlermetho- de abgefragt und unterschieden werden können.
window.applicationCache.addEventListener(,checking'; handleCacheEvent, false);
window.applicationCache.addEventListener(,downloading', handleCacheEvent, false);window.applicationCache.addEventListener(,progress', handleCacheEvent, false); window.applicationCache. addEventListener(,updateready', handleCacheEvent, false);window.applicationCache.addEventListener(,error', handleCacheError, false);
window.applicationCache.addEventListener(,noupdate', handleCacheEvent, false);
webdesigner 04/2013
RATGEBERWeb Storage, Application Cache und IndexedDB
function handleCacheError(event) { console.log(„State is: „ + window.applicationCache.
status + „ - Eventtype: „ + event.type);}
function handleCacheEvent(event) { var strCacheStatus = „Not supported"; if (window.applicationCache) {
var oAppCache = window.applicationCache; switch (oAppCache.status) {
case oAppCache.UNCACHED: strCacheStatus = „Not cached"; break;
case oAppCache.lDLE: strCacheStatus = „Idle"; break;
case oAppCache.CHECKING: strCacheStatus = „Checking"; break;
case oAppCache.DOWNLOADING: strCacheStatus = „Downloading"; break;
case oAppCache.UPDATEREADY: strCacheStatus = „Update ready"; window.applicationCache.swapCacheO; window.location.reloadO;break;
case oAppCache.OBSOLETE: strCacheStatus = „Obsolete"; break;
default:strCacheStatus = „Unexpected Status ( „ +
oAppCache.status.toStringO + „)";break;
}
}
console.log(„State is: „ + strCacheStatus + „ - Eventtype: „ + event.type);}
Dem Anwendungscache stehen Inhalte nur pro Website zur Verfügung, im Gegensatz zum Browsercache, der pro Browser gilt und immer allen Webseiten zur Verfügung steht (siehe Abbildung 5). ▼
Der Application Cache ist im Grunde also nicht schwerzu verstehen und anzuwenden, besitzt aber einige Tücken, die genau betrachtet werden sollten. Deshalbeine stichpunktartige Auflistung mit Fehlerquellen:• Im Application Cache gecachte Seiten werden nur
neu geladen, wenn die Manifest-Datei geändert wurde.
• Alle Ressourcen einer Seite, wie Images, externe CSS Dateien, etc., müssen für die Seite im Application Cache gespeichert bzw. in der Manifest Datei stehen, sonst kann es sein, dass sie der Browser nicht lädt bzw. findet.
• Eine HTML-Seite, die das manifest-Attribut enthält, muss nicht noch einmal im Manifest selber aufgeführt sein, um im Cache zu landen.
• Deaktiviertes JavaScript ist für die Anwendung tödlich, da der Application Cache nicht mehr aktualisiert werden kann! Auch das "Seite aktualisieren" (2x: Cache laden, anzeigen) hilft ohne aktivem JavaScript nichts. Es muss zwingend geprüft werden, ob JavaScript aktiv ist, sonst sollte man auf jeden Fall einen Benutzerhinweis einrichten, wie es Google Docs bei deaktiviertem JavaScript macht.
• Fehler beim Laden, wie etwa 404-Fehler, die durch falsche Einträge in der Manifest-Datei mit falschen Dateinamen oder Dateiendungen, gelöschte Bilder und ähnlichem verursacht werden, bricht den gesamten Ladevorgang ab. Was im günstigsten Fall so viel heißt wie, dass der Application Cache erst gar nicht angelegt wird. Im schlimmsten Fall kann auch hier wieder der Application Cache nicht mehr aktualisiert 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 angelegt ist und aktualisiert werden soll. Ein Beispiel: Wurde die Manifest-Datei geändert, wird die Seite mit dem alten Cache angezeigt und gleichzeitig der neue Cache geladen. Die Seite muss reloaded werden, um den neuen Cache auch anzuzeigen.
• Wichtig ist aber, dass bei einer HTML-Datei das mani- fest-Attribut im HTML-Tag vergeben wurde. Es müssen alle externen Ressourcen der HTML in der Mani- fest-Datei stehen, damit sie im Application Cache
o Ü*/r*r.<í i ( j ) NctWO* ^ S o u rc e s ^ jT i r o f l .n « ^ Proles ^ A u d i t t ^ Conto*
* Cu *•I jWebSQt* I irt0««*aDB► £ local Storage fr ¿ ! S*tl«OA
► %Cook*i? J Appt<4t>o* Cach«T i ï AopLJCf« ippcjcn«
fei KrmJ)
Hn» / AtçCéchc/AeeCftc»* j * pcacH<TypeM W ctt f l «
mtpy/iou*cst/A3ecxr#;car mmj IX PKK •/V»btto '/locafcosi/AocCache/imaoes/HimJKono Cxofccft 1.22ahtt» 7/1oc**«5i/AteCacht / images / HavtC. 0«9 tupfte* 129.3*1nno7/»oa«o«‘Wtacf>e/ifTuçej,cif r*09 U p M lZ V .* iUhno //>ouftosi/AdtiCxhe/imiots/looo.iDQ Dtofick 76.50Uhup UM1«r EMpKA 1711Mtp //ioc4iest/AopCjcr>e/scripts/ruJn.ji tXpBCft 54*1
1 http //locafcost/AeoCache.itvieihertcis brpidl
Die Entwicklerkonsole im Chrome und Safari bieten unter Ressource sehr viel Kontrollmöglichkeiten
04/2013 webdesigner
RATGEBERWeb Storage, Application Cache und IndexedDB
gespeichert werden können, da sich der Application Cache dann wie ein Offlinecache verhalten soll.
• Die Application Cache Events werden nur dann gefeuert, wenn das HTML-Tag der Webseite das mani- fest-Attribut mit Angabe des Namens der Manifest- Datei enthält.
• Extern eingebundene Dateien wie CSS, Images und Scripte werden nicht automatisch im Application Cache gespeichert.
Mit dem Chrome Browser kann der Application Cache einfach über die URL-Adresszeile erfragt oder gelöscht werden („chrome://appcache-inernals/", vergleiche
Abbildung 6). Die gute Unterstützung kommt nicht von ungefähr, denn Google bietet auch in vielen eigenen Anwendungen einen Offlinemodus an.Für den Firefox gibt es das„CacheViewer Continued Ad- dOn". Allerdings muss man wissen, dass einzelne Dateien im Application Cache den Eintrag „Device=offline" haben. Löschen lässt sich der Application Cache im Firefox unter „Alt -> Extras -> Einstellungen -> Erweiterungen -> Netzwerk".
Für den Safari muss man das Menü für Entwickler aktivieren, unter„Safari -> Einstellungen -> Erweiterungen -> Menü Entwickler in der Menüleiste anzeigen", und hat dann die gleichen Möglichkeiten wie im Chrome, es sei denn die Abfrage über die Adressleise ist nicht implementiert.
Application Cache überwachen
j A pp C ache In te rn a ls x ^ O f f l f l« - G o o g le D rrve x
C c h ro m e ://a p p c a c h e -in te rn a ls
Manifest:
RemoYfi VHtaEnüitt• S ize 3 .3 M B• Creation Tim e Sam stag. 12. Januar 2013 20.47:11• Last Update Tim e: Sam stag. 12. Januar 2013 20 47:11• Last Access Tim e Sam stag. 12. Januar 2013 20 49 11
Manifest: https V/docs googte com /olfiin^offlm e/m am fest
FtemoYfl Yiowfntrl«• S ize: 242 kB• Creation T im e Sam stag. 12. Januar 2013 20.47:01• Last Update Tim e Sam stag. 12. Januar 2013 20 47 04• Last Access Tim e Sam stag. 12. Januar 2013 20 47:41
Manifest: N J j? g 7 /^ g .g g g g l^ .g g n V a M rg x x /Q (? ljn ^ m ^ fO T t.? Q g ^ w 7 1 fl2 6 b 3 b Q M lM »
Rem ove View Entries
• S ize: 82 9 kB• Creation Tim e Sam stag, 12. Januar 2013 20 47 05• Last Update Time: Sam stag, 12. Januar 2013 20 47 05• Last A ccess Tim e Sam stag. 12. Januar 2013 20 47:42
Manifest:
BfltnoYü Vxm Entriss• S ize 1.9 MB• Creation T im e Sam stag. 12. Januar 2013 20 47 05• Last Update Tim e: Sam stag. 12. Januar 2013 20:47:05• Last Access Time: Sam stag. 12. Januar 2013 20 47 42
Manifest m u » . / / i > T y g . l m A n ä i g a l
Bernov.e Yh>w Entfto• S ize 6 9 kB• Creation Tim e Sam stag. 12. Januar 2013 20 47:05• Last Update Time: Sam stag, 12. Januar 2013 20 47 05• Last Access Tim e Sam stag. 12. Januar 2013 20 47:42
So einfach wie m it dem Chrome Browser lässt sich der Offline Cache (Application Cache)m it keinem anderen Browser überwachen.
Fazit: Der Applicaton Cache wird auf dem Server per Manifest-Datei vorkonfiguriert und benötigt Root-Rechte. Er muss je nach Bowserein- stellung auch vom Internetbenutzer bestätigt werden. Web Storage ist eine rein clientseitige JavaScript-API und ist auf die aktuell weitverbreitete Browserunterstützung angewiesen. Wie der Web Storage zeigt der Application Cache ein Offlineverhalten, das beim Application Cache noch deutlicher wird. Will man hier Problemen aus dem Weg gehen, sollte der Cache erst angefordert werden, wenn der Benutzer offline gehen will. Mit den neuen Standards bekommen die Browser vollwertige Möglichkeiten, um Daten auf dem Client zuverlässig und über Sessions hinweg zu speichern. Dabei gilt noch keiner der Standards als wirklich fertiggestellt, obwohl alle aktuellen Browser die Technik bereits unterstützen. Echte Offline-Applikationen für mittlere und größere Projekte zu programmieren werden die eleganten Web-APIs nach wie vor an ihre Grenzen bringen. Man muss auch einzelne Standards untereinander kombinieren, weshalb die Wartbarkeit, Fehleranfälligkeit und Cross-Browser- Kompatibilität dem Entwickler viel abverlangt. Caching birgt auch Fehlerquellen, meist sind es aber HTML- oder PHP-Programmierfehler, wie falsche Linknamen und Dateiendungen oder JavaScript-Fehler, die das Caching fehleranfällig machen. Jedoch ist der Nutzen dieser Anstrengungen klar erkennbar, werden doch Offline-Applikationen immer mehr in State of the Art Webanwendungen verwendet oder bei den teureren Premium-Apps angeboten.
22 webdesigner 04/2013
plentymarkets' S - C o iu L u Z r c e , u n e Ic h e s u r if l.
Höher. Schneller. Weiter.Die perfekte E-Commerce-Komplettlösung
Mit plentymarkets lassen sich alle Prozesse des Online-Handels komfortabel organisieren, effizient steuern und in Echtzeit verwalten.
plentymarkets wird von über 2.500 Unternehmen für den Online-Handel genutzt.
Webshop/Multichannel
Cloud Hosting
Softwarewartung
Warenwirtschaft/Statistik
Payment/Faktura
Beratung / Support
L Logistik/Fulfillment
Das plentymarkets-Prinzip: E-Commerce as a Service
CRM
www.plentymarkets.com
RATGEBER
Die Auswahl an Shopsystemen ist inzwischen unüberschaubar geworden. Wir haben uns insgesamt 18 Shopsysteme von sieben verschiedenen Anbietern näher angeschaut und sie auf ihre Stärken und Schwächen hin untersucht.
er einen Online-Shop betreiben möchte, steht vor der großen
Frage, welches Shop-System für das jeweilige Projekt am besten geeignet ist. Die meisten Herstel
ler bieten verschiedene Produkte an, die sich oft nur in einigen wenigen Punkten unterscheiden, da in vielen Fällen bereits die Standard-Installation über zahlreiche wichtige Features verfügt. Hier heißt es dann genau hinsehen, um den optimalen Anbieter, beziehungsweise das optimale Shopsystem zu finden. Grundsätzlich wird zwischen drei Modellen von Online-Shopsystemen unterschieden:
*1 Open Source System\ J I -Bei den Open-Source-Sytemen fallen keine Kosten für die Installation an, da diese in der Regel von den Shop-Betreibern selbst durchgeführt werden muss. Der Shop wird auf einem eigenen Server installiert. Bezahlt werden muss jedoch in aller Regel für Support und Updates.
/"V Mietshop\ J ^ - Bei dieser Variante wird die gesamte technische Struktur von einem Provider zur Verfügung gestellt und es ist eine monatliche Gebühr fällig.
/"V Q Kaufshopv J Sie zahlen eine Lizenzgebühr und können innerhalb kürzester Zeit mit Ihrem Shop auf Ihrem eigenen Server loslegen.
In unserer Übersicht sind die Open-Source-Lösungen und die Kaufshops in der Überzahl. Insgesamt haben wir uns mit 18 Produkten von sieben verschiedenen Herstellern beschäftigt. Es werden acht Open-Source-Lösun- gen, sechs Kaufshops und zwei Mietshops vorgestellt. Die Hersteller sind Magento, Zaunz Publishing, Plenty- markets, Gambio, Shopware, Oxid e-Sales und Modfield. Bei allen Anbietern hat man die Möglichkeit, sich einen Demoshop herunterzuladen, um sich so im Backend einen „Live-Eindruck" des jeweiligen Shopsystems zu verschaffen.
Cosmoshop
Wie viele andere Anbieter bietet auch die in Süddeutschland ansässige Firma Zaunz Publishing mit ihrem Shopsystem Cosmoshop mehrere „Ausbaustufen" ihres Shopsystems an. Diese nennen sich„eStart", ePRO,„eMAX und „Mandant". Die Kaufshopsysteme von Cosmoshop warten mit einer Besonderheit auf, da man das System ent-
Shopsysteme im Vergleich von Tobias Henke
Shopsysteme im Vergleich
24 webdesigner 04/2013
RATGEBERShopsysteme im Vergleich
weder kaufen oder sich für einen Mietkauf entscheiden kann. Die Lizenzkosten liegen zwischen 795 € und 11995 € (für die Version „Mandant"). Für den Mietkauf sind zwischen 89 und 585 € pro Monat fällig. Die Kosten für den Support werden prozentual nach dem Kaufpreis berechnet, was eine Besonderheit im Vergleich zu anderen Shopsystemen darstellt. Die monatlichen Support-Kosten richten sich nach dem Produkt und dem Kaufpreis inklusive 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 beispielsweise eine Facebook-Einbindung und einen Linkmanager. Auf der Cosmoshop-Website bietet der Hersteller einen Überblick über die Funktionen seiner Produkte. ►
Version eSTART
Starttn S it 9tr o rttnt B u tw ts s rrwt d e s * ' W f sicn un».orr^o«rt uod »cftneU E n Upg»*dt auf h o fw t V»rs*ontn istmfepcfi
£ r* ;• Hrçh/içhts V tfjjo n
► ws zu 250* 20c*n*ns «ttj► 1 z«r**>0ss<taast«itt +«!*<*
OptKXHl
► Kun3*<Tr*rvi arturvg
► Fr#rrv3»pf*th*n► SO0f4çrtt*t
fr Dthtoiç *it<t vanjnîen
► ßtsieibtrftanuno► TemcüÄesfStem► NewsleBers-rStcrn
Sajtaötctn► 2ahfcr>gsscfvrtttr*!i«n► Cfos s-Stw»g und Zut>#r»o*
U*Wisttrtiiink»o*► tmp«rt-Æ>p4<tscftnmst*ftt► uvm
Version ePRO
Proftsswtfct AÄfOgridiOSwng fur 5«s zu 1000 ¿rtktt J«c«r^ertupgra<j4Ddi &£* auchflviibtl trwttt«C*r
ru&atä>cft« H»gWigf*s i*sor .'•ft»on► t#s 1000 ArtMl nog*K** 4 O O flM lrtS in id
► 2 ZaNooosscfwvasttlitn. *tUft opftonjl
► Gutsch«tf*ffwafeing inWHier »orvvfrn CutKftW« m*nM#0 OöH duct\ autO'Tttfesiert trztu# *erdtn.
*
Version eMAX
ua<im»jf u o fM ik » « « und vo i* ifcxxM ffa«
▲ Für Shops m it sehr vielen Artikeln sollten Sie sich für die Enterprise- Variante entscheiden
wo(!*r* ä«s»( Vtruon
► ï»S(4 100.000 AflfctKfltttirtStgfctf»
► • Dornums «IM► JZahiuogssctinittsteBen
«0OMI» J *» *9 « /K 4 U U 0 d U► Z*hJu<v9*scimftsttBt a i S*nUod*r
8 jr.». (CC Ban*) Of*r>t Fin*\M«uftg► C€C Scoimçscvitts»»«#
► t#m
Neben den Standard-Funktionen sind etliche kostenpflichtige Erweiterungen möglich. ▼
6 weitere M odule
Massenüberarbeitung von Artikeln v
Lexikon-Plugin V
Merklistenfunktion enthalten ab Version 10.1
Mediafiles je Artikel
Gutscheinverwaltung
Angebot statt Kauf Modul
Wunschzettel-Funktion
Massenbestellformular
ab 18 Modul
Look & Feel Farb- Grafikanpassung
V
V
V
V
V
V
V
_ _ _ _ I
✓ 'S 'S 'S<s 'S 'S 'S'S 'S 'S 'S'S 'S 'S 'S
optional 'S 'S 'Soptional optional ✓
optional optional optional optional
optional optional optional optional
optional optional optional optional
optional optional optional optional
4 Praktisch: Durch Klick a u f den roten Pfeil werden die Funktionen der Erweiterungen erklärt.
i-' I i.F - ■ r ; : t *■ 8
Die maximale Größe des Shops hängt stark vom jeweiligen Produkt ab und schwankt zwischen 250 und 50000 möglichen Artikeln.
Shopware
Die im münsterländischen Schöppingen ansässige Shopware AG bietet ebenfalls vier verschiedene Varianten seines Shopsystems an. Die Standard-Version ist die
Community-Edition. Das Besondere an dieser Open Source-Variante ist, dass auch für den Support keine Kosten fällig werden. Der Support für die Community-Version erfolgt vielmehr ausschließlich über die große Community im Online-Forum von Shopware - hier ist also der Name Programm.Ein negativer Aspekt ist, dass es in der Community-Edition keine Gewährleistung, keinen Wartungsvertrag und keinen Herstellersupport gibt. Daher ist man als Nutzer der Community-Edition komplett auf die Hilfe im Forum
04/2013 webdesigner 25
RATGEBERShopsysteme im Vergleich
CQMMuwrr»(»HON Eomo«
T'«krf*y«*ft*n «CM«) o o V Vi - - 1 —*-— mftnoppinf o o V y/
BunW-f iKkfclion 0 0 ✓ V
Butin«*» («MntiaU 0 0 y V
fhMNpt o oPr«dvtclb«r>t«r 0 o V V
• rhu 0 o V Vlfrt«tllg«nlar NmtU(l«r o o V V
8oau« 0 0 V V
(Bild vcrfugbjr) ReMrvaaioA« 0 0 <✓ «✓10*44 Cr*»p Shoppi+f o o V V
iB»U vwfwgtjr; Abo Ctmmtrct 0 0 V V
S»*9*ng VTH-SyU »m X V V V
Atirrt Oif«d«ry Q X X V V
Vjrn*»h 3 X X X VSwcH* mil KH.R B»ck*rtd Q X X X Vr i a i t M - U X X X V
angewiesen. Die Kosten für den Support betragen bei der Professional Edition 49 bis 99 Euro im Monat und bei der Enterprise Edition je nach Support-Level zwischen 49 und 249 Euro.
4 Wenn man sich für die Community-Version von Shopware entscheidet, sollte man idealerweise also über eine gewisse Programmiererfahrung verfügen. Die wichtigsten Unterschiede zwischen den einzelnen Produkten liegen auch bei Shopware in der Anzahl der verkauften Produkte. Schon in der Standard-Installati- on können Sie allerdings bis zu 10000 Artikel verwalten. Auch ist in der Standard-Installation bereits ein integriertes CMS enthalten, allerdings in einer ziemlich abgespeckten Version. Wer viel Wert auf ein vollumfängliches CMS legt, sollte in ein Premium-Plugin investieren. Eine Übersicht über verfügbare Premium-Plug- ins finden Sie hier:
4 Die Kreise markieren die Plugins, die m an optional kaufen kann.
In der Community-Variante ist der Support sehr stark eingeschränkt. ►
( « M H 0 » « 4
M M
Ut . P,
U «JlW r
V W- * Ä . •» Ä ÜÄ w »
X HM< * «MacX WIMM» ummm✓ ✓ ✓ Vs ✓ ✓ ✓V V V VX X X V* V V V 3X X X V 3u.■VX X V <u.X X X V <X X X VX m m mX X X ✓X X XX X X ✓X * VX m nsX X X
i m I m W i M IM I^--— - A ». .9 »W '!•> 9 ^ ^ *9 * 9 •» 9
N W
*9ß9 9
■MM* SM M */* IMIMÜM àAMftâS
Für viele Shop-Betreiber ist der Support ein entscheidender Faktor bei der Entscheidung für oder gegen ein bestimmtes Produkt. Shopware bietet hier auf seiner Homepage eine detaillierte Auflistung des Supports für die verschiedenen Versionen.
4 Shopware arbeitet zurzeit an einem Tool, mit dessen Hilfe sich Shops untereinander vernetzten können. Mit Hilfe des Systems Namens Bepado soll es möglich sein, dass ein Händler Lieferant eines anderen werden, oder dessen Ware einstellen kann.Mit der Beta-Version, die im April 2013 in Betrieb geht, wird Bepado zunächst nur mit Shopware-Shopsyste- men funktionieren. Spätestens im Juni soll das System auch mit anderen Shopsystemen kompatibel sein.
Plenty Markets
Bei der in Kassel ansässigen Plenty Markets GmbH haben Sie die Wahl zwischen der Professional und der Enterprise-Version.Die Professional-Version ist die Mietversion, die Enter- prise-Version ist die Kaufversion. Die Produkte von Plenty-Markets eignet sich laut Angaben des Hersteller sehr gut für größere Projekte mit Multisites. Hier finden Sie eine Übersicht über die Funktionen: ►
26 webdesigner 04/2013
RATGEBER
W ebshop
<*) l*r*j»uoflC *5tg* iiMr HTML uo3 CSS ir-r«r*2c*«f» m c n \ u t
^ Z0C*vfiX*»O*
^ IAÄ»ir»5üjt»UI (VTF1 »öfttoim;
^ BM urU M C
^ CtüechoMm»au4
^ G«Ci»»n*tKW
^ v»*:-ogi S;q-Ucou»
ffj Kwv3#n>e*wn
^ C tMdk
OUB#<
Kjtt->V)w» <5 E » n f o )
^ PniSOlutACA <M S M il|r« it«
£ / ft^Ü N
<+j l’<*Jtt EtfMAM FN tttM
d^lKiMen
^ 9>;e09 *rt*9»:*m9«*Jrt0t«
Trui*3-Sncp*-Ki*v3«nc>#***ji^
^ *Kam»Kuo4«fti<»t«%K»pen
TrutMO-SAOpS «'XUrtÖC**1«f l'ltMrtoe
Crttct-Cnf ««riom äM BwOcn-<.owj«s
^ *A>m9»**rt«r »rneort *0« C00«< ¿9not**UA4 (T Rk M KifVM«)
SvcN-vM<Hft9«*9%A*0i« HV*WI»oc> * * « 9C0m*rt#rt UGU S90-MP TB99. 0**«ftC*Oft«. My*0*09
LKe-StKfto **v«r>6oe<&m0tt««fscftc'fl«tc>*»**o<3« Cf^Mrn»» v M u id 4«« £ r ji6 f< W i»
<£/ SucmiufrSA »o w « s£»n4arat*tt<«> Sch**ört«n a Socf-*r>S«*1#m «ff« Proc*ooc urtff *CT*.oö«r
£:<r laScnnCiiri* i*i«: jr>c<-Anji i«
o * »ceboc* «\r>r«>3*no
O « W M «
6*r4U<-A/ie*rt<juvj
^ )M é iO M to n « r t j
<«J
<*J 'Bta> U ir> tw ; H.fftrv^n ?.* 6 f ^ n - *5 g ? !•—« j»»ef fMsrwtwt *ÄUi9 O «»*0 tltt»r
Q £ r < 3 n $ # ir > }\ * n r -J i& '. i& n < r )
<*j LK SftopCif.; «wl CcHrto^nuftflUw*- *;# o*tWafwvt««an6< «i P tw r t
ruy***n
^ rcf-S«kf
S iW if lö » :« »
^ AUMdWUM
UMlktMA
^ Kv«VH«**cmj **>0«*puCC0rt
K*wur*mm«K*rT»wif>0#n»Of«ö
B**l*tt*^nvT\ü# ,F»H» ttftta ä » UMr-vOuftg nM n nli«9ift tvnfu an e»»>«®v**g X»vJi t*r»i K«#*0*«» )
<*j FS*1«U©CU
Shopsysteme im Vergleich
Wie bei vielen Mietshops richtet sich der monatlich zu zahlende Betrag nach der Größe des Shops. Die Kosten liegen zwischen 99 und 4299 Euro pro Monat.Die Kosten für den Support sind ebenfalls stark gestaffelt und liegen zwischen. Auf der Homepage von Plenty-Markets finden Sie eine detaillierte Übersicht über die Preise, die sich sehr stark an der Größe des jeweiligen Shops orientieren.
1. W a h le n S ie e in T ftn fp eket:
% tri i|.« 4_j4 4.# A fcj. .Am AM »B i“fc* ,,r» - » a ^ ISA1 v v " 1 ^ « *e
6 » (*M »| * ««< » • X M ♦ '9*t D K * «» M «< M » M M M f M (« « t «M tvm *tfU > «<n «M iM t l » ; « • « »M » * W ^ l> « k » M H M i « UK V 4A*»'*ia— 3*n Dato«? i u i ^ i Ij M <etfe**e C»»*u» m n d e * ' w f c f l
t « * ( M l «M M » Trtflfc 1•*+** AlWUt IflCOMl
m m u o N iS W » t J K * U W JW 8 llN V U b M M t f y a b i ( o : f l
M n w w tWO »«•EU** N C M ie jo o o ue WO00 d r a - S « M i
N i n m n U M O 1W CU*** 40 00JMB 4J00 ue >9 900
M u i im » 2 IO O iOOlUÄ* n a » 1* 4 t00U II 40000 > *;•* v . w « i
400 F l« * 1«4 0 t tM * 7> ttU R «OttO
t 000 'm u H * 0900 m 00 o w
10900 m e u r J94 990M8 »900 MB 90 900
r ^ H 4 A » l ! 3 0 } 1 441 CUR* «ooo&ouo 12 900 IC 100 009 f l t t t j t M Hl
30 900 1 990 EU«* (M M 3 U C 14 400 *48 110 009 C4M
M H m m I M W } r * o c u > * t0 0 O tt U6 14 KD US 300 009
I M » t u * r 1000 009 ue 19ÍWWP 750 009
f r o m w w S O M 4 ¿ « te u ft 1 *W 009 UB 2*900 MB >00 009 CCI9-9«ep«lt
t »'■>#
lU a M iM M k a f t lA w «
« / m m
ft* oKO»H S»MWM »k* »«»dn.+an nt<%jlrtril«n4«rtrti) »> «» «UH|< &» «»» >n »»—cm* »ill» fto *« KTftlS&j| r a ■ > II^ L kW &A* i. •• f> A a </ H la ^ • fl ||a| ■ -A , a ■ «■ I Uka jJ ^ ^ f jJAa M a&a «k/|Apv iv vet • »* “ * aw' " ^ w e ■ • • * ■ etf •• e ^wVHK-*n.T*f rtcN MUKMn 4Vff «»C M4r« WS»W l<M*» (QKfl•= *«~ o«* ^ Die Kosten des
Mietshops von Plenty Markets.
Wer sich für den Mietshop entscheidet, sollte sich vorher sehr detailliert darüber informieren und beraten lassen, welche Größe für den jeweiligen Shop das Optimum ist. Ein Mietshop hat natürlich den Vorteil geringer Einrichtungskosen, aber ab einer gewissen Größe sind stattdessen die monatlichen Kosten recht hoch.Für Kunden, die sehr viele Produkte verkaufen wollen ist die Version Enterprise zu empfehlen, da hier keine Limits in Bezug auf die Größe des Shops existieren.Plenty Markets legt besonderen Wert auf optimale Kundenbetreuung, was durch Key-Account-Management und regelmäßige Mitarbeiterschulungen gewährleistet wird. Wie beim Mietshop ist auch beim Kaufshop der für den Support zu zahlende Betrag vom jeweiligen Projekt abhängig.
Magento
Das Shopsystem Magento, der in den USA ansässigen Firma gilt als eines der größten und komplexesten Shopsysteme für große Online-Shops. Es handelt sich ist um einOpenSource-System. Der Kunde kann zwischen der Community-Version, dem Mietshop „Magento Go" und der Enterprise-Edition wählen. Aber wie bei allenOpenSpurce-Systemen heißt das natürlich nicht, dass bei einem Magen- to-Shop keine Kosten anfallen. Für die recht komplizierte Einrichtung jedes Magento-Shops gibt es zahlreiche sogenannte Magento-Agenturen,
04/2013 webdesigner
RATGEBERShopsysteme im Vergleich
Magento hat einige Funktionen
zu bieten, die m an nicht bei
allen Konkurrenten findet. ►
K ey F e a tu re s
A ^ » x < d C w K iw r Md Tr f r »f
hßCommunity
'U1Mafvtfor*0 üviefpns«
hw»;* WWv l«r<
0 1 O»*—»
iM tn IP k M f t
W w if» M N M W 4 M « «
V ( |M |. and
S:o*-« C *»«-»
C s u k f Md Cm « mnV jl* # * ( f MW)
IW » Md ^ nM l c n IW « « < M
U f i f t U c k * |
A4««*t>ttd
Ci* «m» W r y « f
W S«*n>
I U I i Cm m ..»
V»<m
*U(»W Si** Vm
Md W A((«M
rw .AW p . . ^ i t U r «
«nd
W #M ^K M «l(M IM M r#««4 l
( a a l y i t o M Md
feudwt
Ur x a i, O »» ^ w l *« M WN fca
uu
wie beispielsweise die Firma welance, die sich vor allem mit der Einrichtung des Shops beschäftigen. Hier fallen schon für die Community-Edition Kosten von 5000 € aufwärts an. Die Vorteile eines Magento-Shops sind die laut Hersteller sehr hohe Leistungsfähigkeit und die umfangreichen Funktionen. Für kleine Shop- Betreiber scheint Magento allerdings ein wenig überdimensioniert. Dafür ist die Community-Version von Magento eine der umfangreichsten im Vergleich zur Konkurrenz. Sie lässt sich fast beliebig erweitern. Die Kosten für den Support hängen stark vom jeweiligen Projekt ab.Eine Schwierigkeit war bisher, dass Magento für den deutschen Markt nicht optimal konfiguriert war, da beispielsweise einige Zahlungsarten fehlten. Seit dem7.3.2013 gibt es ein vorkonfiguriertes Paket mit dem Titel magento.de, was optimal auf den deutschen Markt zugeschnitten ist.
Oxid e-sales
Wer Wert auf besonders leicht anpassbares Custom Design legt, ist bei dem Open Source System der Freiburger Firma Oxid e-sales genau richtig. Denn neben der Tatsache, dass sich bereits in der Community-Version ein recht umfangreiches Content-Management- System befindet, ist es ab der Professional Edition auch problemlos möglich, seinen Shop vollständig über ein anderes selbst gewähltes CMS, wie beispielsweiseTypo 3 zu verwalten. Diese Funktion findet sich sonst nur bei wenigen Konkurrenten.
Highlights• Integriertes Content Management System (CMS)
• Schnell Projektumsetzung, kurze Einrichtungszeit (Time to Market)• Web 2.0 Paket (Tagging, Rating, tiefe F acebook-Integration, e tc.)
• Suchmaschinenoptimiert• Funktional erweiterter und anpassbar
• Modular und ausbaufähig
• Optionale Anbindung an die E-Commerce Intelligence Plattform OXID eFire (derzeit in 0, A und CH verfügbar)
• Vollständiges Upgrade zu OXID eShop PE und EE ohne Datenverlust möglich
▲ Funktionsübersicht der Community-Edition
Ein weiterer Schwerpunkt von oxid-e-Sales liegt in der Web 2.0-Anbindung
Die Enterprise-Edition schließlich liefert verbesserten Support und weitere Funktionen, die in der Community- und der Professional Edition nicht enthalten sind.
Highlights• Professional Services
• Enterprise Support• Kurze Einrichtungszeit (Time to Market)
• Multichannel (Point-of-Sale &. Mobile App)• Master/Slave-Architektur
• Cache Manager, Vamish Reverse Proxy, Memcached
• Mall-/Mandantenfähigkeit (Subshops)
• Sprach- und Landerverwaltung• B2C- und/oder B2B-Fähigkeit
• Einfache Anbmdung an Drittsysteme (ERP, PIM, CMS e tc .)• Web 2.0 Paket (Tagging, Rating, tiefe Facebook-Integration, e tc .)
• Suchmaschinenoptimiert• Rechte-/Rollenver\valtung
• Funktional erweiterbar und anpassbar
• Modular und ausbaufähig
• Skalierbar für künftige Anforderungen• Performant, hochverfugbar und sicher
▲ Zu den Funktionen, die nur die Enterprise-Edition enthält gehört beispielsweise die Möglichkeit eines M ulti- channels
28 webdesigner 04/2013
m dpunkt.web
Die Kosten für Support belaufen sich bei oxid-esales auf mindestens 49 Euro pro Monat in der Community Edition. Für die anderen Versionen lässt sich das nicht so genau sagen, denn hier hängen die Kosten stark vom Projekt ab.
Gambio
Das Open-Source-System der Bremer Gambio GmbH ist eines der günstigsten Shopsysteme. Für die Einrichtung sind keine Programmierkenntnisse erforderlich und man kann es sehr leicht selbst einrichten. Als Alternative stehen auch mehrere Mietshops zur Auswahl.Mit Hilfe des Standard-Templates von Gambio lässt sich der Shop schon recht individuell gestalten. Wer mit dem Standard- Template nicht zufrieden ist, der kann unter zahlreichen kostenpflichtigen Templates wählen. Der Support hält sich mit Kosten von 149 Euro pro Jahr auch für die Betreiber von kleinen Shops in einen gut zu finanzierenden Rahmen.
v/ «ulfimAcchM ttftd Aut*}an -mm
•S ml SuCif S—•
V IXnac* «*♦ mUgn IN n tc» +*+ jto
S CCV M U ld d * * k » LßpaA (r B «E in T É»frt{
'S f » I 11»» r X m » «<«
V k ^ n u i i i i A T A « ■*> U t W to U y t i
y Ac.'«<9» iDd A M m u k } (k t B M tih U la i
V •vrfto* ten Mm> ».mow kKwmçwwwwiV* O i m I K«nümwiiiid NaS H»wiw i» > i » « b S » él U n w
'S M i f w u « C w iiiiw «v IMI
^ Wrp6» Wh A#tA«*ewwtanQen
V Wifln*«** CCIAMC Ujrugtm»* Sytf«Ai * CMS
S W i y w w v%'«crnaMr
V VWk K <c« rUfcall*«*-« tr>4 CufrOiya* IWU».*«V B » ij Ü Iw G*«4>*%*«ri
V wr
V üJffOio-m»% Uoqj w Adfe-o— icft
^ t« Al*«i
y/ FtmkUm
+/ f y w I
«/ Nm^odwi«ttcn
V Fine« flw u tw é p i A d iw ^ e w c f i
rm
▲ M ultifunktionalität wird bei Gambio großgeschrieben.
Modfield e-commerce
Bei der Berliner Firma Modfield e-commerce handelt es sich auch um eine Open- Source-Lösung. Modfield e-commerce legt besonderen Wert auf die einfache Installation. Die Kosten für den Support können nicht pauschal benannt werden und richten sich nach der Größe des jeweiligen Projektes.
D ie H aup tvo rzü g e d iese r V e rs io n :
• Die "gesetzlichen Mindestanforderungen' werden er M t. wie Abzeichnen der DatenschutzerkJ*ung, Widerruf* und AG8* Unk bc«m Checkout (Abschluss des Bestellvorgangs)« Angabe de* Lieferzeit, autom jbsches M tsenden des W iderrufsrechtt und der Signatur m der Bestei E-M al. etc.
• W3C XKTML-vahdes Standardtemptate• Der Einbau vieler nützlicher Funktionen erleichtert des
tnkaufen und das Adrr*mstneren des Shops.• Fert>3 implemenberte Sochopt>nr*erungsmodif*at>onen (SCO)
smd standardmäßig vorhanden.• double*opt n für E-M jJ (ab v l.0 3 ), des bedeutet, die
Kontrote der Cmad Addresse beim Registrieren verringert Fehler be» der Ergebe.
• Konto löschen Funktion für den Kunden (et» 1.03) - Zogen S*e welche Bedeutung Tnvatsphare" für Sie hat, bieten Sie thren Kunden <>e Mogbchke»t« Ihre Konten setost zu laschen.
• Das Googlebase Export*Modul m it Versendkosten erfüllt die rechtfcchen Anforderungen
• SCO - Suchmaschnenopbrrierungen (M etatags, ShopStat URLs, CSS-Tem plate) smd fertig mplemenbert und standardmäßig vorhanden.
• W ichtige S^herheitsupdJtes(t) sind eetgebaut und weiter entwickelt.
• D*e TW ckbo* b ie te t eme 'S ta te o f the A rt DarsteCung* Ihrer ProdcAtbader.
• Shop Dashboard • die überarbeitete start.php für den Admin sorgt für leichte Administration.
• D»e Schne*e und Einfache Instattationsroutine sorgt dafür, dass M i sofort los legen können.
• Aktuelle Zahlungsmodufte wurden ettegnert (PayPaä, Sofortuberweisung, Moneybookers. e tc .)
• Der Shop wurde von So fo rtiib erw cK ung .de zertifczsert. siehe: Kbck m ch
• und noch vieles mehr• Lest but not le a st: Je d e r, der d ie m odJfled eContm erce
Shop-voftwArc» o ln v t/ l, so llte d«s An w ender hnndburh von DokuM^n kennen. Da Dokiftfan emer der Entw<lder m diesem Projekt »st, sind alte m der Anleitung enthaltenen Bugfixes m der modifed eCommerce Shopsoftware bereits engearbeitet' Hier der Link iu r aktuellsten Version des Anwenderhandbuches: Kftck mich
▲ Die Highlights von Modfield e-commerce
Eine große Stärke von Modfield ist die sehr gute Anpassungsfähigkeit des Shopsystems. Es lässt sich sehr leicht an die Vorstellungen des Anwenders angleichen.Bei Modfield e-commerce handelt es sich um eine vollkommen unabhängige Weiterentwicklung des renommierten Shopsystems xt-commerce. Viele der Module für Modfield e-commerce sind nach wie vor mit der Basis-Version von xt-commerce kompatibel. Wie bei vielen anderen Herstellern ist auch bei Modfield e-commerce der Support stark vom jeweiligen Projekt abhängig.
S» ------« - r j
Node.js & Co.
PhoneGap
Simon Widjaja
Lebendige Webseiten mit Adobe Edge Animate
2013,238 Seiten € 33,90 (D)ISBN 978-3 -86490- 025-9
Marcus Ross
PhoneGap
2013,248 Seiten € 29,90 (D)ISBN 978-3 -89864-824-0
Golo Roden
Node.js & Co.
2012,334 Seiten € 32,90 (D)ISBN 978-3 -89864-829-5
Stefan Koch
JavaScript
6. A u fla g e
2011,476 Seiten € 39,90 (D)ISBN 978-3 -89864-731-1
dpunkt.verlagRingstraße 19 B • D-69115 Heidelberg fon: 0 62 21 / 14 83 40 • fax: 0 62 21 / 14 83 99 e-mail: [email protected]
www.dpunkt.de
RATGEBERShoDsvstemg jp^Veraleich a a
Shopsysteme im VergleichHersteller Magento
Produkt Magento Communitiy Magento Enterprise Magento Go
Vertrieb Magento GmbH und Co KGSystemvoraussetzungen:PHP-Version 5.2.13 bis 5.3.15 5.2.13 bis 5.3.15 5.2.13 bis 5.3.15MySQL-Version 4.1.20 oder höher 4.1.20 oder höher 4.1.20 oder höher
erforderlicher Webspace 5 GB 5 GB 5 GBanfallende Kosten:Lizenskosten ab 5000 € ab 14420 Dollar/jahr Mietshopsystem, ab 15€
Kosten für Support keine Kosten vom Projekt abhängig vom Projekt abhängigGrundfunktionenKundengruppen Keine Begrenzung Keine Begrenzung Keine Begrenzung
Mehrsprachigkeit • • •
Multi-Shop-Fahigkeit • • •
Plugin-Management sehr gut sehr gut sehr gutKategorien und Unterkategorien beliebig viele beliebig viele beliebig vieleProduktvarianten fast unbegrenzt fast unbegrenzt fast unbegrenztSuchfunktion • • •
SchnittstellenWarenwirtschaftssysteme alle relevanten Systeme alle relevante Systeme alle relevante SystemePreissuchmaschinen alle relevante Systeme alle relevante Systeme alle relevante SystemeVersand/Versender alle großen Anbieter alle großen Anbieter alle großen Anbieter
SEO-Optimierung
Title-Tags •
Meta-Discription
Caching •
MarketingNewsletter-System •
Facebook-Integration •
Gutscheinmodul •
Cross-Selling •
Sonderangebote •
Statistiken Shop-Besucher •
Umsatzstatistiken •
Artikel/KatalogeMaximale Artikelanzahl unbegrenzt unbegrenzt vom Projekt abhängigAnzahl Bilder pro Artikel unbegrenzt unbegrenzt unbegrenztFilterLagerverwaltungDownloadbare Produkte
Layout und DesignTemplates verfügbarCustom Design leicht anpassbarZahlungsarten
PayPalClick&buyper SofortüberweisungBesonderheiten
Rechnung/Lieferschein per PDF als E-Mail zustellbar?
Gibt es eine CMS-Funktion?
30 webdesigner 04/2013
RATGEBERShopsysteme im Vergleich
Shopware Cosmoshop
Community Edition Professionei Edition Enterprise edition eStart ePro eMaxShopware AG Zaunz Publishin GmbH
Höher als 5.3.2 Höher als 5.3.2 Höher als 5.3.2 egal egal egal
Höher als 5.1.0 Höher als 5.1.0 Höher als 5.1.0 egal egal egal5 GB 5 GB 5 GB 500 MB 500 MB 500 MB
Keine 995 € 9.995 € 795 € 1.995 € 3.325 €
Kein Support 49-99 € 49-249 € 1,50% 2% 2,50%
keine Begrenzung Keine Begrenzung keine Begrenzung 250 1000 keine Begrenzung• • • • • •
• • • • • •
gut gut gut sehr gut sehr gut sehr gut
belieibig viele beliebig viele beliebig viele 250 1000 belieibig vielefast unbegrenzt fast unbegrenzt fast unbegrenzt fast unbegrenzt fast unbegrenzt fast unbegrenzt
• • • • • •
alle relevante Systeme alle relevante Systeme alle relevante Systeme alle relevante Systeme alle relevante Systeme alle relevante Systemealle relevante Systeme alle relevanten Dienstleister alle relevante Systeme alle relevante Systeme alle relevante Systeme alle relevante Systemealle großen Anbieter alle großen Anbieter alle großen Anbieter alle großen Anbieter alle großen Anbieter alle großen Anbieter
•
•
•
•
•
•
•
•
•
unbegrenzt unbegrenzt unbegrenzt 250 1000 50000unbegrenzt unbegrenzt unbegrenzt unbegrenzt unbegrenzt unbegrenzt
04/2013 webdesigner
RATGEBERShopsysteme im Vergleich
Hersteller Gambio plenty markets
Produkt Gabio Shopsoftware plenty markets professional plenty markets professionalVertrieb Gambio GmbH plenty markets gmbhSystemvoraussetzungen:
PHP-Version 5.1 Version 5.3, für User Interface Version 5.3, für User Interface
MySQL-Version egal kein my SQL kein my SQLerforderlicher Webspace mindestens 50 MB hängt vom Projekt ab hängt vom Projekt abanfallende Kosten:
Lizenskosten Keine Mietshop hängt vom Projekt ab
Kosten für Support 149 Euro pro Jahr 0,99 € pro Min hängt vom projekt ab
Grundfunktionen
Kundengruppen keine Begrenzung mindestens 20000 unbegrenztMehrsprachigkeit • • •
Multi-Shop-Fahigkeit • • •
Plugin-Management Sehr gut sehr gut sehr gutKategorien und Unterkategorien beliebig viele sehr gut sehr gutProduktvarianten fast unbegrenzt fast unbegrenzt fast unbegrenztSuchfunktion • • •
Schnittstellen
Warenwirtschaftssysteme alle relevante Systeme alle relevanten Systeme alle relevanten SystemePreissuchmaschinen alle relevante Systeme alle relevanten Systeme alle relevanten systemeVersand/Versender alle großen Anbieter alle großen Anbieter alle großen AnbieterSEO-Optimierung
Title-Tags •
Meta-Discription •
Caching •
MarketingNewsletter-System •
Facebook-Integration
Gutscheinmodul •
Cross-Selling •
Sonderangebote •
Statistiken Shop-Besucher •
Umsatzstatistiken • •
Artikel/KatalogeMaximale Artikelanzahl unbegrenzt unbegrenzt unbegrenzt
Anzahl Bilder pro Artikel unbegrenzt unbegrenzt unbegrenztFilter
Lagerverwaltung
Downloadbare Produkte
Layout und DesignTemplates verfügbarCustom Design leicht anpassbar
Zahlungsarten
PayPalClick&buy
per SofortüberweisungBesonderheiten
Rechnung/Lieferschein per PDF als E-Mail zustellbarCMS-Funktion
webdesigner 04/2013
RATGEBERShopsysteme im Vergleich
Oxid E-Sales Modfield
Community Edition Professionei Edition Enterprise Edition Modfield e-Commerce ShopsoftwareOxid E-Sales AG Modfield e-Commerce Shopsoftware
5.2.10 oder höher 5.2.10 oder höher 5.2.10 oder höher 5.x bis 5.4.x5.0.33 oder höher 5.033 oder höher 5.0.33 oder höher 1/4/2002
mindestens 100 MB mindestens 100 MB mindestens 500 MB ab 500 MB
keine 2.990 € auf Anfrage keineAb 59 €/Monat hängt vom Projekt ab hängt vom Projekt ab hängt vom Projekt ab
keine Begrenzung keine Begrenzung keine Begrenzung keine Begrenzung• • • •
• • • _
sehr gut sehr gut sehr gut gutbeliebig viele beleibig viele belieibig viele gut
fast unbegrenzt fast unbegrenzt fast unbegrenzt fast unbegrenzt• • • •
alle relevante Systeme alle relevante Systeme alle relevante Systeme alle relevanten Systemealle relevante Systeme alle relevante Systeme alle relevante Systeme alle relevanten Systemealle großen Anbieter alle großen Anbieter alle großen Anbieter alle großen Anbieter
unbegrenzt unbegrenzt unbegrenzt umbegrenztunbegrenzt unbegrenzt unbegrenzt unbegrenzt
•
•
04/2013 webdesigner
RATGEBERWorkflow für Web Designer von Jürgen Ortm ann
Workflow für Web DesignerOhne klar definierte Abläufe sind Webprojekte kaum zu bewältigen. Wir zeigen Ihnen, welche Stufen ein solches Projekt immer durchläuft und worauf Sie dabei zu achten haben.
.. AruxJyseI a K o n z e p t i o n i e r u n g y
| Ir\J
T e s t i n g und K o r r e k t u r |
Unsetzung
▲ Ob bewusst oder unbewusst, diese Pha
sen durchläuft praktisch jedes Webprojekt. N icht nur bei der Arbeit im Team sind koordinier
te Arbeitsabläufe gefragt. Auch wer als Einzelkämpfer unterwegs ist, sollte die verschiedenen
Stadien bei der Gestaltung von Webseiten kennen und ganz bewusst abarbeiten. Dadurch können ein Großteil der Fehler und mögliche Missverständnisse zwischen Kunde und Web Designer vermieden werden. Auch bei der parallelen Bearbeitung mehrerer Projekte sind geregelte Abläufe unverzichtbar, um die Aufgaben innerhalb des gegebenen Zeitrahmens zufrieden stellend umzusetzen. Die einzelnen Stadien des hier vorgestellten Workflows bauen dabei aufeinander auf. Das bedeutet, dass ein Stadium abgeschlossen sein sollte, bevor zu dem nächsten Stadium übergegangen werden kann. Wie bei kreativer Arbeit üblich, lassen sich die einzelnen Stadien in der Praxis nicht immer so klar voneinander trennen. Sie bieten aber eine Grundstruktur, an der man sich in jedem neuen Projekt orientieren kann. Gleichzeitig sorgen geordnete Abläufe dafür, dass man als Desig
ner schneller den Übergang von der Idee hin zur praktischen Umsetzung schafft. Ist erst einmal definiert, wie das Ergebnis aussehen soll, lässt sich dieses als klar um- rissenes Ziel auch besser und schneller erreichen und man vertändelt nicht zu viel Zeit mit der Ideenfindung und Konzeptionierung.Und was für die Arbeit des einzelnen Web Designers gilt, ist für die Arbeit im Team umso wertvoller. Der Workflow wird hier zum zentralen Gerüst, anhand dessen die einzelnen Aufgaben klarer definiert und sinnvoll verteilt werden können.Neben dem hier vorgestellten Workflow, der sich als grundlegender Ansatz für alle Arten von Webprojekten versteht, gibt es natürlich auch speziell für die Umsetzung konkreter Projekte - ganz zu schweigen von Workflows für den Umgang mit bestimmten Anwendungen - die dabei helfen, die Arbeit möglichst effektiv zu gestalten. Der hier vorgestellte Workflow soll die Arbeit an einem Webprojekt im Allgemeinen abbilden und kann bei Bedarf natürlich auf das jeweilige Projekte angepasst werden.
Die einzelnen Stadien des Workflows
Der Workflow lässt sich in acht grundlegende Stadien unterteilen, die im Folgenden näher erläutert werden sollen. Zeitlich fällt die Gewichtung der einzelnen Stadien sehr unterschiedlich aus. So ist die Definition des Projekts sehr häufig bereits mit Beauftragung durch den Kunden und dem vorangegangenen Beratungsgespräch im Wesentlichen abgeschlossen. Die Umsetzung des Entwurfs dagegen dürfte den größten Teil der Zeit einnehmen.
Projektdefinition und Analyse: Das Projekt richtig erfassen
Am Anfang des Projekts stehen die Definition und Analyse. Diese besteht darin, sich genügend relevante Infor
34 webdesigner 04/2013
RATGEBERWorkflow für Web Designer
mationen zu sammeln, um eine Grundlage für alle weiteren Schritte zu schaffen. Dieses Stadium besteht vor allem aus einem oder mehreren ausführlichen Gesprächen mit dem Kunden, die vor und nach der Beauftragung stattfinden. Als Designer sollten Sie sich eine Checkliste für diese Gespräche bereithalten, in der alle relevanten Fragen zur Beauftragung aufgeführt sind. Dadurch stellen 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, welche Dinge Sie wissen müssen, damit Sie das Projekt für ihn zufrieden stellend erledigen können.Diese Aufgaben umfassen hauptsächlich:
• Die Absicht des Kunden: Was hat der Kunde mit der fertigen Website vor? Was genau verspricht er sich davon?
• Vorstellungen und Wünsche des Kunden: Welche konkreten Vorstellungen hat der Kunde von der fertigen Website? Gibt es möglicherweise eine bestimmte Farbe, die in dem Design immer wieder Vorkommen soll?
• Zu verwendende Technologien und Standards: In der Definitions- und Analysephase sollte auch über möglicherweise zum Einsatz kommende Technologien und Webstandards nachgedacht werden. Dies ist insbesondere mit Hinblick auf die Ausbaufähigkeit der fertigen Website interessant. Webtechnologien und - Standards verändern sich rasend schnell. Noch vor wenigen Jahren war zum Beispiel XHTML in aller Munde, heute gehört HTML5 die Zukunft.
• Vom Kunden bereitgestellte Materialien und Medien:Je spezifischer die Vorstellungen des Kunden sind, desto mehr ist das Miteinbeziehen des Kunden in den kreativen Prozess erforderlich. Zudem kann der Kunde den Web Designer unterstützen, indem er ihm Medien oder Materialien, wie etwa Werbebroschüren oder das Firmenlogo in digitaler Form zur Verfügung stellt.
Als Ergebnis der Defintions- und Analysephase sollten allen Beteiligten inklusive des Kunden die Anforderungen an das bevorstehende Projekt klar sein. Aus den Anforderungen werden dann die Vorgaben formuliert, die im späteren Verlauf des Projekts immer wieder zur Kontrolle herangezogen werden.In diesem Zusammenhang haben sich Roadmaps als äußerst nützlichesTool bewährt. In einer Roadmap werden alle Vorgaben erfasst uns erläutert. In den weiteren Stadien kann die Roadmap dann verwendet werden, um darin die Zuständigkeiten festzulegen und Termine für die einzelnen Teilaufgaben zu vergeben.
04/2013 webdesigner 35
Tools für Planung und Projektmanage- ment
Eines der wenigen frei verfügbaren Projektmanagement- Tools ist GanttProject. DasTool hat aber einiges zu bieten und kann bei Bedarf auch mit Projektplänen umgehen, die mit MS Project erstellt wurden. Einzelne Aufgaben können hier in einen Zeitplan eingetragen und mit Prioritäten versehen werden. Außerdem lassen sich in GanttProject die Abhängigkeiten der Aufgaben untereinander darstellen. ▼
IPrcyert Edit View Itsks Resources Help
y y ©x a&dPti «>
Test
Zoom h i zocr Out I A*XH2012
Oggi * I Prtwui | Next íwr cnocH cm* | Sa*
o NcwUlk CtH»T
0 Tesk Properties... Alt* Ent ef
* Unmdent
* Indent
V Wp All* Up4 Oown Aft«Oowf0 IM rA Unlink
y Cue Ctf1*Xdp Copy Ctil-Cr Pacte CtH.VX Oektc TtsL.. Dekt«
O CMrt options• Mit ponfo MrviWijy*
RSS bren
Mit dem kostenlosen SmartTools Projektplan für Excel kann MS Excel als Projektmanagement-Tool genutzt werden. Der vorgefertigte Projektplan reicht aus, um bei kleineren Projekten den Überblick zu behalten. ▼
.°8( ■* J * __ __ - “*"■££1 * —a/ * • » • m
n* *■
Urm.
RATGEBERWorkflow für Web Designer
ZCOPE Horn« (2 3 5 3 3 2 3 Fa llstu d itn P re is« ä Anm eldung HiiTo & Support Forum b’log
Alles was Sie für erfolgreiches Projektmangement brauchen.
Den Überblick behalten
• j» 9% 148,16
%K QD s z . t c r er
□ fci
9
99
Jetzt kostenlos loslegcn!
fri 3 MinUrn vnü S** r*yi>Unrrt und legen bereits t w erstem P ro *« an«
Was 5»# mitZCOPC alles tun k ö n n e n
D e n Ü b e rb lic k b e h o tte nAufgaben vctwaccn Zeilen err»«n Trrmtnr fr%n*grnbudgets venenen Di4ajnw4v UriMrn fnrm»tir>r n nini n
ZCOPE Academy
¿k f l
Neben installierbaren Projektmanagement-Tools wie MS Project oder GanttProject gibt es im Netz eine ganze Reihe von Web Apps wie zum Beispiel ZCOPE (www.getz- cope.com/de). Diese besitzen den Vorzug, dass sie praktisch auf jedem Rechner mit Internetzugang verfügbar sind und somit alle Beteiligten stets auf jeweils aktuellste Version zugreifen können. Da Projektmanagement-Tools praktisch immer professionelle Anwendungen sind, die dem Nutzer einen echten Mehrwert bieten, sind diese Web Apps leider immer auch mit zum Teil erheblichen Kosten verbunden. Das Testen ist aber in der Regel nach einer Registrierung kostenlos.
phase gesammelten Informationen sortiert und in einen Zusammenhang gebracht, der für das anstehende Projekt optimal ist. Dabei können zunächst mehrere alternative Konzepte entwickelt werden, von denen man dann in einem weiteren Schritt das optimale Konzept auswählt. Durch die Konkretisierung wird in diesem Stadium bereits auf Probleme eingegangen, die bei der späteren Umsetzung erfahrungsgemäß auftreten können. Die wichtigsten Tools für das Erstellen von Konzepten im Webdesign sind Dummies und Wireframes. Diese dienen vor allem zur Veranschaulichung möglicher Layouts für die Webseite. Neben Papier und Bleistift kommen in dieser Phase häufig Bildbearbeitungs- und Screendesig- nprogramme, sowie vorgefertigte und anpassbare Wireframes zum Einsatz.
Erstellung eines Konzepts: Die Ideen nehmen Form an
Dreh- und Angelpunkt jeder professionellen kreativen Arbeit ist das Konzept. Das Konzept bildet die Brücke zwischen Ideenfindung und Umsetzung. Es stellt die Konkretisierung einer Idee dar. Beim Erarbeiten eines Konzepts werden die in der Definitions- und Analyse
Entwurf: Von der Theorie zur Praxis
Steht das Konzept, kann mit dem Entwurf begonnen werden. Der Entwurf ist der erste Schritt der praktischen Umsetzung. Zwar ist der Entwurf noch nicht funktionstüchtig, er zeigt aber, wie das Ergebnis konkret aussehen könnte. Neben dem Aussehen der Website können in dem Entwurf auch grundlegende Funktionen verdeut
36 webdesigner 04/2013
RATGEBERWorkflow für Web Designer
licht werden. So ermöglicht das Screendesignprogramm Adobe Fireworks es sogar, einen Entwurf als interaktives PDF zu exportieren. Das PDF enthält dann zum Beispiel funktionierende Links zu Unterseiten und externen Seiten. Der Entwurf ist somit tatsächlich nutzbar und liefert somit bereits in der Entwurfsphase erste Hinweise auf die Usability und User Experience der Webseite.Der fertige Entwurf dient in der Regel auch zur Präsentation beim Kunden. Die Präsentation stellt bereits das nächste Stadium des Workflows dar, jedoch unterliegt der Entwurf damit bereits der Anforderung, dass er dem Kunden grundsätzlich Zusagen sollte. Dadurch orientieren sich alle Arbeiten der Entwurfsphase bereits an den Wünschen und Vorstellungen des Kunden. Durch die Erfahrung aus früheren Projekten können aber auch Ideen mit einfließen, die der Kunde nicht ausdrücklich gewünscht hat oder von deren Nutzen der Kunde bei der Präsentation noch überzeugt werden muss.
Präsentation beim Kunden: Die Bewährungsprobe
Die Präsentation ist die Bewährungsprobe für den Entwurf. An diesem Punkt entscheidet der Kunde ob er mit dem Entwurf zufrieden ist. Zudem kann der Kunde Änderungswünsche am konkreten Beispiel des Entwurfs einbringen. Gleichzeitig ist auch der Kunde gefordert, sich mit dem Entwurf auseinanderzusetzen und seine Ideen und Vorstellungen von der fertigen Website anhand des Entwurfs zu prüfen und gegebenenfalls zu ändern oder an die Gegebenheiten anzupassen.Der Entwurf sollte daher klare Hinweise auf die endgültige Version derWebsite liefern. Im Entwurf müssen alle getroffenen Entscheidungen der Definition und Analyse sowie des Konzepts deutlich werden.Die im endgültigen Design verwendeten Farben, das Layout und die Vorzüge des gewählten Designs sollten möglichst konkret im Entwurf dargestellt werden, damit sie bei der Diskussion gezielt diskutiert werden können. An dieser Stelle bietet sich für den Kunden die Gelegenheit, letzte größere Änderungswünsche zu äußern.Sofern es sich um kein größeres Website-Projekt handelt, besteht die Präsentation in der Regel aus einem Austausch per Email und Telefon. Der Kunde erhält PDFs oder Bilddateien, die den Entwurf oder verschiedene Varianten des Entwurfs zeigen. In einem Gespräch kann dann das weitere Vorgehen bei der Umsetzung und eventuelle Änderungswünsche besprochen werden. Die Änderungswünsche sollte möglichst exakt schriftlich festgehalten werden.
Umsetzung: Der handwerkliche Teil
Bei der Umsetzung geht es darum, den Entwurf einschließlich des Kunden-Feedbacks aus der Präsentation in eine lauffähige Website zu verwandeln. Wichtig ist hier, dass bei der Arbeit im Team alle Aufgaben und Zuständigkeiten klar verteilt sind und dass den Beteiligten alles zur Verfügung steht was sie brauchen. Darunter fällt die benötigte Software, Farbvorgaben, Schriftarten, aber auch Hilfsmittel wie Stylsheet-Sprachen, die richtig beherrscht werden müssen. Bei der Umsetzung kann zudem die Vergabe an andere Dienstleister einThema sein, wenn es darum geht sehr spezielle Funktionen oder Elemente in die Website zu integrieren. Die Notwendigkeit für die externe Vergabe sollte aber bereits in der Projektdefinition und Analyse erkannt und dann rechtzeitig in die Wege geleitet werden.Speziell beim Coding wird bei der Umsetzung in aller Regel mit Basisvorlagen gearbeitet. Das hilft, unnötige Fehler zu vermeiden und somit den Aufwand für die Testing-Phase kurz zu halten.
Testing und Korrekturphase: Die Generalprobe
Webseiten sind, ähnlich wie Softwareprodukte, auf ein umfassendes Testing angewiesen, da trotz größter Sorgfalt immer wieder Unvorhergesehenes auftreten kann und in aller Regel auch auftritt. Zwar müssen keine wochenlangen Alpha- und Beta-Stadien durchlaufen werden, aber ein Testing auf den gängigsten Browsern und den wichtigsten Vertretern mobiler Endgeräte ist unerlässlich. Das Testing soll zum einen zeigen, ob alles so umgesetzt wurde, wie es beabsichtigt ist, zum anderen Standardmäßig sollten folgende Dinge getestet werden. -Vergrößern und Verkleinern der Schriftgröße: Beim Verkleinern oder Vergrößern der Schriftgröße zeigt sich, ob sich eventuell Floats überschneiden oder Texte aus dem Rahmen laufen.-Validierung des Codes: HTML und CSS sollten in validem Code geschrieben sein, um die Grundlagen für optimale Sicherheit zu gewährleisten und damit es bei späteren Bearbeitungen nicht zu vermeidbaren Problemen kommt. Für diese Prüfung eignet sich das Web-Devel- oper-Add-on des Firefox-Browsers sehr gut. -Alternativtexte von Bildern: Indem Sie die Darstellung von Bildern unterdrücken, können Sie überprüfen, ob für jedes Bild ein geeigneter Alternativtext hinterlegt wurde. Dies ist nicht zuletzt aus SEO-Sicht ein wichtiger Aspekt.-Die Seite ohne CSS: Wählen Sie im Web-Developer- Add-on die Funktion „Disable Styles", um das Laden des
04/2013 webdesigner 37
RATGEBERWorkflow für Web Designer
CSS zu unterbinden. Dadurch können Sie prüfen, ob die Seite auch ohne Stylesheet noch nutzbar ist.-Skripte abschalten: Nutzen Sie ebenfalls das Web-Deve- loper-Add-on, um Skripte abzuschalten. So können Sie die Zugänglichkeit der Seite prüfen. Viele Internetnutzer haben bei ihrem Browser zum Beispiel JavaScript oder Flash abgeschaltet.Die gefundenen Fehler und Schwächen müssen selbstverständlich behoben und die Seite dann erneut getestet werden, bis schließlich alles in einwandfreiem Zustand ist. Erst dann ist die Webseite fertig und kann online gehen.
Tools für das Wireframing
Für das Wireframing gibt es inzwischen eine ganze Reihe praktischer Tools, sodass diese Aufgabe nicht mehr mühsam mit Photoshop umgesetzt werden muss. Unter anderen sind hier justinmind Protoyper (www.justinmind.com, Pro-Verison kostenpflichtig) und das OnlineTool Protoshare (www.protosha- re.com, kostenpflichtig) sehr interessant. Zudem steht mit Wirefy eine flexibel anpassbare Beispielseite zurVerfügung. ▼
P*- M I farm* Vrw frtwvt T dàr
. ù y ù * # A C ^
»oiwjjcts a:>30Q *
IQnftiwrij» t\
□I f'.uü'ouw i yrvU t)
ö u u □
tot trvpvtnai *
___ . . . . . . . .
E> P« j» jia i2 vm*iflranpun
TöOt£
A
• / «rii■ Te.t................o • .
•¿«tr.'1Z I
a
\9
§
g
Loram iptum Scr«n 1
t 4___________* 'V xf\JertJT
Tools für das Testing
Beim Testing kommt es darauf an, ob die fertige Seite auch auf allen Browsern richtig dargestellt wird und ob alle Funktionen einwandfrei ablaufen. Mit den folgenden Tools lassen sich die wichtigsten Überprüfungen durchführen.
Browser: IE, Firefox, Chrome/Safari, Opera
i Die fertige Seite sollte in den wichtigsten aktuellen Browsern einwandfrei dargestellt werden. Zu diesen zählen der Mozilla Firefox, Google Chrome oder Apple Safari als Vertreter eines Webkit-Browsers, der Internet Explorer und der Opera-Browser.
webdesigner 04/2013
RATGEBERWorkflow für Web Designer
Web Developer-Add-on
Das Web-Developer-Add-on steht für den Firefox- und den Chrome-Browser zur Verfügung. Mit diesem Tool lassen sich Webseiten sehr analysieren. ►
Firebug
Etwas umfangreicher und leistungsfähiger als das Web Developer-Add-on ist die Browser-Erweiterung Firebug, die ebenfalls für Firefox und Chrome verfügbar ist. Firebug eignet sich zudem auch für andere Webentwick- lungsaufgaben. ►
XAMPP
mmrnàter P *
n 5
iw e bdesigner Lightroom<f •— r NA
WÄtommen Oh rm M »
Mim • O i *>V» OOM tk-j«*.* <.«* j P - 0 4 3
KO* . M « A * I I « I Im
« « k t * I m M (««>«# (KM
^ — ---- . • — •
»9 IIOTn ■ ■ u r i l ' U U U »•• »*r** *• » ■>** * iw • • • i i f t '»
I •/M 1.«
(N I I1 H ’ tl
n.*f 0ÍHI44 Im H• »
I. __________
Sofern man über keinen Testserver verfügt, ist XAMPP eine sehr gute Lösung, um auf einem Rechner lokal eine Testumgebung einzurichten. Die Installation ist etwas umständlich, XAMPP erfüllt dafür aber seinen Zweck hervorragend. ►
Hy XAMPP für Windows
Rückblick:Was war gut und was war nicht so gut?
Mit der Auslieferung ist das eigentliche Projekt abgeschlossen. Insbesondere wenn es sich um ein größeres Projekt handelt, bei dem mehrere Personen beteiligt waren und bei dem bestimmte Problemstellungen zum ersten Mal aufgetreten sind, sollte das Projekt noch einmal im Team besprochen werden. Bei dieser Gelegenheit kann die Arbeitsweise besprochen werden und es können Lösungsansätze für aufgetretene Schwierigkeiten entwickelt werden, die idealerweise zu besseren Herangehensweisen bei zukünftigen Projekten führen.
W iß k o m m e n ¿ u X A M P P f ü r W in d o w s !
H v r j lk b v N C lw tk «vw n \«li.X A M P P K l vrfultf* v id i W ijiv v v m R v i lw v r Iii> l«lltvrl1
• » * • • ♦ » • A Qr+M thank yrut tn h.w ÁAtt¿ck14 7 tor ttu\ n+w tin 0 Contrat P,>n+H M i t I I I «
7 *E ) XAMPP für Windows . ... «
XAMPYMftafcJtt »J iW m L t v K i t k « « i • « « ! wvkJm • A ^ l i n u i v U i i u n U M u «J Im « h t * l» r « « v t .
-.au
1 t u » j _X j
mo:» •4 a: io u 9 t ia 14 3f 1 i *4 9f 18
>~«6#V*I. *• I 4 i'Mí' vi’ j | C»or>a ftttZMil y jt jc jrM n ro y v mj**wrcuryl Starte roçrcnm Mere ir* jwcur/] UxtfLnûnScrxtQ cfkrrl y¡rt£f.¡t pâffvjtfJ trim‘/éf w*rj i ¡
te ntuat*tb*¡&B
04/2013 webdesigner 39
TUTORIALBest Practice für flexible Websites von Jürgen Ortmann
Best Practice für flexible WebsitesResponsive Design wird häufig als das Nachrüsten einer Nutzeroberfläche für mobile Endgeräte verstanden. Dabei können bereits beim Coden von Desktopseiten verschiedene Dinge implementiert werden, um das Design möglichst flexible zu halten.
▲ Die Ausgabe au f verschiedenen Ausgabege
räten sollte bereits bei der Gestaltung von Webseiten
berücksichtigt werden, selbst wenn diese zunächst
als reine Desktopseiten konzipiert werden.
S eit der Einführung von Smartphone und Tablet- Computer ist im Web Design das„Responsive Design" in aller Munde. Und wie bei allen neuen
Web-Trends gibt es auch hier so manches Missverständnis. Worum geht es beim Responsive Design eigentlich? Um das Erstellen von Webseitenablegern für mobile Endgeräte? Oder um das Gestalten von drei Versionen für Desktop-Monitor, Tablet-Computer und Smartphone? Eigentlich nicht. Das Wesentliche des Responsive Designs ist die Anpassungsfähigkeit des Layouts einer Website an verschiedene Viewports. Ein alternativer Begriff, der dieses Konzept besser verdeutlicht, ist der des „Liquid Designs", denn das Ziel dieses Gestaltungsansatzes ist, ein Layout zu entwickeln, der automatisch jedes
erdenkliche Displayformat optimal für die Darstellung der Inhalte nutzt.Dies betrifft sowohl das Layout einer bereits vorhandenen Website, die bereits existiert hat, als es noch keine Smart- phones und Tablets gab, als auch von Grund auf neu gestaltete Webseiten, bei denen die mobilen Endgeräte und deren Bedienkonzepte von vornherein berücksichtigt werden können. Grundlage für das Responsive Design ist insbesondere die Möglichkeit, dass die Breite von Containern im CSS so definiert werden kann, dass sie durch den vorgegebenen Platz bestimmt wird. Damit ist das Arbeiten mit festen Breiten endgültig passé.In diesem Tutorial soll eine Herangehensweise vorgestellt werden, die als fester Bestandteil in jedes neue
40 webdesigner 04/2013
TUTORIALBest Practice für flexible Websites
Webprojekt einfließen sollte. Bei den hier vorgestellten Techniken handelt es sich sozusagen um Best Practices, durch die eventuell später auftauchende Probleme bezüglich der weiteren Optimierung für mobile Endgeräte vermieden werden können. Ist das Layout flexibel genug, wird sich zum Beispiel das Anpassen von Schaltflächen für die Bedienung mit dem Finger ebenfalls weniger problematisch gestalten.
Die flexible Gesamtbreite
Die Grundlage für ein anpassungsfähiges Layout ist eine Gesamtbreite, die sich an die Breite des Viewports anpasst. Dazu müssen im Wesentlichen alle Inhalte von einem Wrapper mit flexibler Breite umschlossen werden und die Breite für Inhalte und Spalten muss ebenfalls flexibel angelegt werden. Die Möglichkeiten dazu bestehen in CSS schon länger, sie sind nun aber wichtiger denn je. Als Beipiel dient eine Website, die über eine Navigation, ein großes Bild und einem zweispaltigen Text besteht. Im HTML sieht das Ganze dann wie folgt aus.
cIDOCTYPE html> chtml lang="en"><head><meta charset="utf-8"/><title> Beipielseite Responsive Design</title><meta name="viewport" content="width=device- width, minimumscale=1.0, maximum-scale=l .0" />clink href="styles/main.css" type="text/css"rel="stylesheet"><!—[if lt IE 9]><script src=7/html5shiv.googlecode.com/svn/trunk/ html5.js"x/script><![endif]--><script type='text/javascript' src='scripts/respond.min. js'x/script></head>
<body><div id="wrapper"><header><nav id="skipTo"><ul><li><a href="#main"title="Zum Hauptbereich springen">Zum Hauptbereich springen</a></li></ul></nav><h1 >Beipielseite</h1 >
<nav><ul>< lixa href="#" title="Home">Home</ax/li> < lixa href="#" title="About">About</ax/li> c lix a href="#" title="Projekte">Projekte</ax/li> < lixa href="#" title="Kontakt">Kontakt</ax/li> </ul></nav><div id="banner"><img src="images/bildl .png" alt="Banner" /> </div></header><section id="main"><h1 >Main section</hl ><p>Lorem ipsum</p></section><aside><hl >Sub sectionc/hl ><p>Lorem ipsum</p></aside></div></body></html>
♦ • » «
Die maximale Breite als Limit
Obwohl das Layout flexibel sein soll, empfiehlt es sich, eine maximale Breite zu definieren. Sonst würde der Content bei Desktop-Monitoren über die gesamte Bildschirmbreite verteilt werden, was nicht nur unschön ist, sondern auch die Usability beeinträchtigt.Zudem ist eine flexible Breite für Bilder ungeeignet, da diese dann verzerrt oder gestaucht dargestellt würden. Um dies zu verhindern, wird für Bilder einfach eine Größe von 100 Prozent festgelegt.
.A. Die Desktopseite besitzt eine m axim ale Breite. Der Wrapper, der den gesamten Content umschließt, ist in der Breite begrenzt, dam it die Inhalte nicht zu sehr in die Breite gezogen werden.
/* Struktur*/ #wrapper{
04/2013 webdesigner 41
TUTORIALBest Practice für flexible Websites
width: 96%; max-width: 920px; margin: auto; padding: 2%;}
#main {width: 60%; margin-right: 5%; float: left;}
aside {width: 35%; float: right;}
/* Logo H1 V header hi {
height: 70px; width: 160px; float: left; display: block;background: url(../images/beispiel.png) 0 0 no
repeat;text-indent: -9999px;}
/* Navigation */ header nav{
float: right; margin-top: 40px;}
header nav li { display: inline; margin-left: 15px;}
#skipTo {display: none;}#skipTo li {
background: #blfffc;}
/* Banner*/#banner{
float: left-margin-bottom: 15px; width: 100%;}
#banner img { width: 100%; }
▲ Bei den Tablets erhält man in unserem Beispiel die in der Breite zusammengeschobene Variante des Desktop-Layouts.
▲ Das Querformat au f einem Tablet lässt etwas mehr Platz in der Breite. Je nach Displayauflösung hätte eine zusätzliche Spalte m it einer Seitennavigation und/oder Such leiste hier noch Platz.
Maximale Bildbreite < maximale Container Breite
Damit das Bild korrekt dargestellt wird, muss sichergestellt sein, dass die maximale Breite des Bildes kleiner ist, als die Breite des Containers. Die 100%-Ansicht des Bildes sollte aber auch nicht zu klein ausfallen, damit das Bild für die größte Darstellung des Layouts die Breite des Containers angemessen ausfüllen kann.Wenn Sie die Seite mit dem Resizer-Bookmarklet (http://lab.maltewassermann.com/viewport-resizer/, für alle gängigen Browser verfügbar außer Internet Explorer)
webdesigner 04/2013
____________TUTORIALBest Practice für flexible Websites
testen, werden Sie feststellen, dass sich das Bild an jede beliebige Bildschirmgröße anpasst. Erst ab der 100%-An- sicht wird das Bild nicht mehr vergrößert. Große Bilddateien sorgen jedoch für eine verlängerte Ladezeit. Gerade bei mobilen Internetverbindungen liegt die Bandbreite deutlich unter der von Festnetzanschlüssen. Unter Umständen kann es sich daher lohnen, das gleiche Bild in mehreren Größen zu hinterlegen und je nach Viewport- Breite das Bild in der geeigneten Größe laden zu lassen.
Navigation als Liste und einspaltiges Layout
Vor allem Smartphones werden in der Regel im Hochformat genutzt. Aber auch im Querfomat ist bei Smartphones die Breite beschränkt, sodass ein mehrspaltiges Layout nicht besonders nutzerfreundlich ist. Gleiches gilt auch für kleine Tablets mit einer Diagonale von etwa sieben Zoll. Das Design der Seite sollte daher ab einer bestimmten Pixelbreite auf ein einspaltiges Layout mit einer Navigation in Form einer Liste umgestellt werden. Als sinnvolle maximale Breite für dieses Layout hat sich ein Wert von 480 Pixeln bewährt. Dieser wird in dem Media Query festgelegt und mit dem „#skipTo"-Tag ausgezeichnet. Die beiden Spalten aus dem Abschnitt„Die maximale Breite als Limit" werden dabei kurzerhand untereinander aufgeführt. Somit steht der gleiche Content zur Verfügung wie im zweispaltigen Layout. Das Bild im Header und die Überschrift mit dem kleinen Logo wirken nun aber wie eine Barriere zwischen Navigation und dem textlichen Content. Dazu wurde im HTML ein Hyperlink eingefügt, der dem User den Sprung zur Haupt-Section gestattet.
/* Media Query V@media screen and (max-width: 480px) {#skipTo { display: block;}header nav, #main, aside { float: left; clear: left; margin: 0 0 10px; width: 100%;}header nav li { margin: 0;background: #efefef; display: block; margin-bottom: 3px;}header nava { display: block;
padding: 10px; text-align: center; }}
Geschrumpftes Desktop-Layout vermeiden
Wenn Sie die Seite auf verschiedenen Geräten testen, kann es sein, dass auf manchen Geräten trotzdem die Desktop-Version geladen und stark verkleinert dargestellt wird. Damit das Media Query immer seine Wirkung zeigt, sollte im Head der HTML die nachfolgende Zeile eingefügt werden. Diese Anweisung sorgt dafür, dass das Skalieren grundsätzlich unterbunden wird, indem die minimale und die maximale Skalierung auf den Wert 1.0 gesetzt werden.
cmeta name="viewport" content="width=device- width, minimum-scale=1.0, maximum-scale=1.0"/>
Fazit: Die hiervorgestellten Lösungsansätze dienen dazu, das Layout möglichst anpassungsfähig zu gestalten. Zwar sind Smartpho- ne und Tablet die gängigsten mobilen Endgeräte, aber die Hersteller zeigen sich äußerst innovativ wenn es darum geht, den Nachteilen dieser Geräte, wie etwa das Fehlen einer echten Tastatur, mit neuen Lösungen zu begegnen. Inzwischen gibt es eine ganze Reihe von Mischformen zwischen Smartphone, Tablet und Notebook. Dank Cloud-Computing und Web-Apps stehen weitere fantastische Möglichkeiten offen. Wichtig ist dabei, dass das Design einer Website in praktisch jedem erdenklichen Bildschirmformat funktioniert.Aus der Sicht eines Web Designers ist dieser Umstand etwas gewöhnungsbedürftig. Jeder Entwurf beginnt als Skizze auf einem Stück Papier und jedes Wireframe ist zunächst ein starres Gerüst, das in einem späteren Schritt ausgestaltet werden soll. Gestaltungsregeln, wie etwa der goldene Schnitt, sind beim Responsi- ve Design nicht immer anwendbar, denn bei der automatischen Anpassung ändern sich auch die Verhältnisse der Elemente zueinander. Jedoch hat eine Gestaltungsregel gerade beim Responsive Design besonders hohe Gültigkeit: Form follows function - die Form hat sich nach dem Zweck zu richten.
.a . Smartphones bieten die geringste Displaybreite, sodass hier ein einspaltiges Layout die beste Lösung ist. Auch die Navigation wurde im Beispiel als Liste umgestaltet.
Jk. Auch im Querform at ist die Breite von Smartphone-Displays sehr beschränkt.
04/2013 webdesigner 43
TUTORIALGrafiken mit SVG und HTML5 erzeugen von Andreas Hitzig
Grafiken mitSVG & HTML5 erzeugenDank HTML5 ist es inzwischen möglich, Grafiken mit Hilfe von SVG einfach zu erzeugen. Im Workshop erfahren Sie mehr über die Vorteile und entwickeln die ersten eigenen Bilder.
S VG war bis jetzt meist nur Insidern ein Begriff. Dahinter verbirgt sich eine Beschreibungssprache für zweidimensionale Vektorgrafiken. Die Abkür
zung SVG steht dabei für Scalable Vector Graphics, also skalierbare Vektorgrafiken.Technisch gesehen ist SVG ein XML-basiertes Dateiformat. Man benötigt somit lediglich einen Texteditor, um eine entsprechende Grafik zu entwickeln.Einer der zentralen Vorteile von SVG ist die Fähigkeit, die Größe der Darstellung zu verändern ohne dabei an Qualität einzubüßen. Bei einem klassischen Grafikformat bemerken Sie ab einer gewissen Vergrößerung des Bildes deutliche Verpixelungen und damit auch einen sichtbaren Qualitätsverlust. Da eine Grafik auf Basis von SVG bei jeder Größenänderung neu berechnet wird, gibt es keine Ausgangsgrafik, welche den Standard setzt.Ein weiterer Vorteil ist die Möglichkeit, eine Grafik ohne größeren Programmieraufwand zu animieren. In diesem Workshop zeigen wir Ihnen, wie Sie auf Basis von SVG und HTML5 eine Grafik erzeugen und diese auch animieren können
A I Die erste Grafik mit SVGI Im ersten Schritt werfen wir einen kurzen Blick
auf die Syntax von SVG und die Integration in HTML5. Dieser Workshop steigt nicht in die Tiefen von SVG ein, sondern nutzt diese Beschreibungssprache lediglich zur Darstellung einer einfachen Grafik.Das Bildelement wird wie ein Image-Tag auch in den body-Bereich einer HTML-Seite integriert. Das folgende Beispiel beschreibt einen einfachen grünen Kreis mit einem schwarzen Rand. Für die Beschreibung eines Kreises sind unter Verwendung von SVG drei Angaben notwendig: die x- und y-Koordinaten des Mittelpunktes Ihres Kreises sowie der Radius.Mit Hilfe dieser Angaben ist es bereits möglich, einen Kreis zu zeichnen. Dieser besitzt war noch keinen Rand und keine Füllfarbe, ansonsten jedoch bereits alle gewünschten Eigenschaften.Die HTML-Seite dient zur Darstellung des Elements und
Auf einen BlickVerwendete Software:
Texteditor Browser mit HTML5 Unterstützung
Technologien und Standards:HTML5, JavaScript, CSS3
Experte:Andreas Hitzig
umfasst die klassischen Objekte einer HTML5 Seite. Dies ist im Wesentlichen der Hinweis über das DOCTYPE-Tag.
<!DOCTYPE html><html><head><title>Meine erste SVG Grafik</title></head><body></body></html>
In dieses Gerüst einer HTML-Seite integrieren Sie im nächsten Schritt innerhalb des body-Tags die Definition
Ihres Kreises.<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="200" cy="100" r="75" />
</svg>
Die Definition wird über ein svg-Tag eingeleitet, in welchem der Verweis auf die Definition sowie die Version der Beschreibungssprache zu finden ist. Innerhalb des svg-Tags folgt anschließend die Definition des Kreises. Dafür steht Ihnen ein eigenes Tag zur Verfügung, welches unter anderem die drei Parameter cx, cy und r für
44 webdesigner 04/2013
TUTORIALGrafiken mit SVG und HTML5 erzeugen
die x- und y-Koordinate sowie den Radius des Kreises besitzt.Wenn Sie Ihren Kreis mit diesem Informationen zeichnen lassen, wird dieser automatisch mit schwarzer Farbe gefüllt. ▼
Meine erste SVG Grafik
M it wenigen Mitteln wird m it Hilfe von SVG ein Kreis erstellt.
Die gewünschte Farbe für den Rand, dessen Breite sowie die Füllfarbe des Kreises setzen Sie über die Parameter stroke, stroke-width und fill.Damit sieht die vollständige Definition des grünen Kreises mit dem schwarzen Rand dann wie folgt aus:
<circle cx="200" cy="100" r="75" stroke="black" stroke- width="1"fill="green"/>
Da die Breite des Rands lediglich auf einen Pixel gesetzt wurde, ist dieser auch so gut wie nicht zu erkennen. Natürlich können Sie diesen auch breiter definieren und die Farben als HEX-Wert angeben. ▼
Meine erste SVG Grafik
Sie können einem SVG Objekt individuell eine Farbe für die Füllung und den Rand mitgeben.
Grafik mit einem Muster versehenDamit die Grafik nicht zu langweilig aussieht, soll
der Kreis noch mit einem Muster versehen werden. Dazu nutzen wir die Funktion des Gradienten. Dabei handelt es sich um einen Farbübergang zwischen zwei Farben. SVG sieht in seiner Definition zwei unterschiedliche Darstellungsformen vor: einen linearen und einen radialen Gradienten. Bei der ersten Variante findet der Farbübergang von links nach rechts statt, bei der zweiten von in
nen nach außen. In unserem Beispiel mit dem Kreis nutzen wir den radialen Ansatz und versehen den grünen Kreis mit einem roten, der vom Mittelpunkt aus immer mehr verwässert und in den grünen Farbton übergeht. Der radiale Gradient wird immer von zwei defs-Tags umgeben, welche die Klammer um die Definition bilden. Für die Festlegung des Farbverlaufs benötigen Sie mehrere Angaben: die ID des Farbverlaufs, die Farbe, deren Position sowie deren Transparenz.Im Standard erfolgt der Farbverlauf immer vom Mittelpunkt des jeweiligen Objektes aus. Wenn Sie diesen Startpunkt übersteuern möchten, nutzen Sie dazu die Parameter cx, cy, fx und fy. Mit diesen legen Sie den horizontalen und vertikalen Startpunkt sowie die zugehörigen Endpunkte fest. Als zusätzlichen Parameter haben Sie natürlich auch beim Gradienten den Radius des inneren Kreises.
cradialGradient id="meinGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
In unserem Beispiel verwenden wir wieder die Farbe Grün als Hauptfarbe für den äußeren Kreis und Weiß für den inneren. Die Festlegung der Farben erfolgt über das stop-Tag.
<stop offset="0%" style="stop-color:red;" stop- opadty="100%"/>
Der erste Parameter offset regelt die Position der Farbe und kann einen Wert zwischen 0 und 1 oder alternativ zwischen 0 und 100 Prozent besitzen.Die stop-color ist diejenige Farbe, mit der unser Kreis ausgefüllt werden soll, die stop-opacity regelt die Transparenz der Farbe.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><defs>cradialGradient ¡d="meinGradient" cx="50%"
cy="50%" r="50%" fx="50%" fy="50%"><stop offset="0%" style="stop-color:red;" /><stop offset="100%" style="stop-color:green;" />
</radialGradient></defs><circle cx="200" cy="100" r="75" style="fill:url(#meinG
radient);"/></svg>
Im letzten Schritt wird die Form festgelegt, welche die Farbverläufe beinhalten soll. In unserem Beispiel bleiben wir bei dem zuvor definierten Kreis, müssen an dieser Stelle allerdings ein paar Anpassungen vornehmen. Sie
04/2013 webdesigner 45
TUTORIALGrafiken mit SVG und HTML5 erzeugen
benötigen für die Definition nur noch die Koordinaten des Kreises. Alle weiterführenden Informationen hinsichtlich des Aussehens kommen aus dem zuvor definierten Gradienten und werden über den Parameter style und den eindeutigen Bezeichner dem Kreis zugewiesen. ▼
Wir wollen den Kreis, wie bereits beschrieben, sich um seinen Mittelpunkt drehen lassen. Dafür benötigen wir einen Start- sowie einen Endpunkt.Diese beiden Informationen legen Sie über die Werte from und rofest, wobei beide von diesen jeweils drei Parameter besitzen:
Ein Gradient erlaubt die genauere
Festlegung eines Farbverlaufs.
Sie können auch mehrere Objekte zu
einem Gesamtobjekt kombinieren.
Im Beispiel wird dem Kreis ein Text
hinzugefügt.
o■-- I---—i------ -—— — -- - _«jr c'**t
SVG Grafik mit Gradient
/"V Q Objekt mit Text versehen\ J Für die Animation des Objektes nutzen wir die SMIL-basierte Variante. Damit die Rotation bei unserem Kreis auch deutlich sichtbar wird, versehen wir diesen im ersten Schritt noch mit einem Text, der sich anschließend mitdrehen soll.Dazu fügen Sie direkt nach der Definition des Kreises noch eine weitere Zeile ein, mit der Sie ein Textelement definieren.
ctext x="165" y="105" style="stroke:white; filhwhite; font-size:18;">Hallo Welt</text>
Dieses legt über die x- und y-Parameter den Startpunkt des Textes fest und formatiert diesen mit Hilfe des style- Parameters. In unserem Fall erscheint der Text in weißer Schrift und Schriftgröße 18. Als Text soll der Klassiker „Hello Welt" ausgegeben werden. ▼
«*' c ■ . u w ****** rvutrtf.' p - c x
SVG G rafik mit G radient
(•11A w»uuo » b
f \ A Objekt animierenT "D ank des zuvor angelegten Textes kann das Ob
jekt im nächsten Schritt auch sichtbar animiert werden, Dazu nutzen wir den SVG-Befehl animateTransform.
• Wertl beschreibt für den Parameter from den Start der Rotation in Grad, für den Parameter to das Ende der Rotation in Grad.
• Wert 2 und Wert 3 entsprechen der x- und der y-Ko- ordinate des Drehpunkts der Animation.
<animateTransform attributeType="XML" attributeName="transform" type="rotate" from="0,200,100" to="360,200,100" dur="2s"repeatCount = „indefinite"
/>
Da sich der Kreis um seinen Mittelpunkt drehen soll, haben die beiden Angaben entsprechend diese Werte als x- und y-Parameter und unterscheiden sich lediglich vom Start- und Endpunkt. Da der Kreis eine vollständige Drehung machen soll, sind die notwendigen Gradangaben entsprechend 0 und 360.Die Dauer der Animation ist in unserem Beispiel auf zwei Sekunden festgelegt und wird beliebig oft wiederholt. Diese beiden Parameter können Sie natürlich nach Belieben verändern und auf diesem Weg die Animation langsamer oder schneller erscheinen lassen.Da Sie sowohl den Text als auch den Kreis animieren möchten, benötigen Sie eine zusätzliche logische Klammer um alle Elemente, die gedreht werden sollen. Dafür stellt Ihnen SVG das Tag <g> zur Verfügung, w
W ' üww*) topi v
1
SVG Grafik mit Gradient
M it Hilfe von Animation können Sie den Kreis drehen.
jn Bewegungspfade festlegenJ Sie können ein Element nicht nur mit Hilfe von
animateTransform bewegen, es gibt darüber hinaus
46 webdesigner 04/2013
TUTORIALGrafiken mit SVG und HTML5 erzeugen
noch weitere Möglichkeiten. Wenn Sie den Bewegungspfad Ihres Objektes bereits kennen, bietet sich die Funktion animateMotion an. Bei dieser legen Sie den Weg des Objektes anhand einiger Koordinaten fest, den Rest erledigt SVG im Hintergrund für Sie.
<animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
Die Definition des Bewegungspfads geschieht über den Parameter path. Für eine Bewegung benötigen Sie mindestens zwei Koordinaten: den Startpunkt und den Endepunkt. Im Beispiel wird unser Kreis von links nach rechts bewegt und wandert anschließend automatisch wieder zurück. ▼
SVG Grafik mit Gradient
SVG erlaubt m it wenigen Angaben die Definition eines Koordinatensystems für den Bewegungsablauf.
Eine weitere Alternative, wie Sie den Weg beschreiben können, funktioniert über die Nennung der verschiedenen Zwischenstationen. Dazu geben Sie jeweils die Koordinaten der Punkte an und SVG berechnet automatisch den direkten Weg. Dazu nutzen Sie den Parameter values und geben diesem immer die x- und y-Koordina- ten eines Punkts als Wertepaare mit, getrennt durch Semikolons.
<animateMotion values="0,0; 500,200; 200,500; 0,0" d u r=" 10s" repeatCou nt="i ndefi nite" />
In diesem Fall startet die Animation am Ausgangspunkt, an dem der Kreis angelegt wurde. Dieser wird in der Animation mit den Koordinaten (0,0) gekennzeichnet. Es ist somit eine relative Betrachtung, die sich an dem Punkt orientiert, an welchem der Kreis angelegt wurde.Als nächstes geht die Reise zu einem Punkt mit den Koordination (500,200), dann weiter nach unten zum Punkt (200,500) und wieder zurück zum Ausgangspunkt. Als
Zeit für den Gesamtdurchlauf wird 10 Sekunden festgelegt, anschließend fängt die Animation wieder von Neuem an. Durch den Wert indefinite des Parameters repeat- Count wird diese Animation unendlich oft durchlaufen.
Fazit: Das Generieren und Animieren von Objekten mit Hilfe von SVG ist zwar noch in den Kinderschuhen, lässt jedoch bereits recht umfangreiche Aktionen zu. Wie immer bei solchen Themen ist die Umsetzung innerhalb der verschiedenen Browser unterschiedlich weit vorangekommen. Während der Firefox und der Chrome-Browser die meisten Elemente bereits problemlos interpretieren, hat der aktuelle Internet Explorer noch teilweise seine Probleme. Sie sollten sich aus diesem Grund Ihre Animationen nicht vollständig auf SVG verlassen, sondern immer auch eine Alternative in der Hinterhand haben, sofern die Animation zentraler Bestandteil der Webseite ist. Darüber hinaus bleibt es spannend, bis wann alle Browser Hersteller die grundlegenden SVG Funktionalitäten flächendeckend unterstützen. Erst dann ist ein sinnvoller Einsatz des neuen Bildformats möglich.
Vergleich zwischen SVG und Canvas
Mit HTML5 gibt es zwei neue Techniken zur Erzeugung von Grafiken: SVG und Canvas. Anhand der Einsatzgebiete ist eine klare Abgrenzung möglich. Wie im Workshop gesehen, ist SVG eine Beschreibungssprache für die Darstellung von zweidimensionalen Objekten auf Basis von XML. Canvas hingegen zeichnet 2D Grafiken zur Echtzeit, wobei dies durch JavaScript gesteuert wird. Innerhalb von SVG werden alle Zeichnungen als Objekte verwaltet und bei der Änderung einer Eigenschaft erneut gerendert. Canvas rendert die Objekte einmalig auf Pixelbasis. Sobald es eine Änderung am Bildschirm gibt, muss das Canvas-Objekt aktiv neu gerendert werden.
M it Hilfe einer Pfadangabe kann ebenfalls eine Animation definiert werden.
04/2013 webdesigner 47
WEB-GALERIESingle Pages
Interessante Single-Pages
S eiten ohne jede Unterseiten und damit auch ohne jede Navigation sind absolut „in". Wir möchten Ihnen heute einige dieser Seiten vorstellen. Alleine
durch den Verzicht auf Unterseiten, wirken die Seiten zunächst einmal relativ schlicht, aber dies ist zum Teil nur der erste Eindruck.Unser erstes Beispiel ist schon alleine dadurch eine sehr ungewöhnliche Page, da der Besucher statt von Oben nach Unten von Links nach Rechs scrollt. Dabei erfährt man zunächst, dass es sich bei der Seite um die Homepage von Fotografen handelt, die sich darauf spezialisiert haben, Flächen zu fotografieren. Je weiter man nach rechts scrollt, umso detaillierter werden die Angaben der Seitenbetreiber. Außergewöhnlich ist auch, dass die eigentliche Seite nicht den gesamten Bildschirm ausfüllt, sondern dass sich Oben und Unten jeweils ein grauer Balken befindet.
von Tobias Henke
what we doO'»«#»*
¡JUS IK * 'V>.-MIOJA
MM
what do you get? (the technical bit)
nothing but bottles - this way-*
48 webdesigner 04/2013
WEB-GALERIESingle Pages
CHLEON
CHLEON WHAT WHY WHO PARTNERS CONTACT
ALL CARS. CONNECTED. TM
l o c a t e
MUSICN e w s / G >
p ° d c a s t s t a l k
C H A T A PPS
o
INSURANCE
d e v e l o p e r s
IV! MAKERS
OEMS
SERVICING
Bei Chleon.com handelt es sich um eine Seite von Autofreunden, die sich des Themas Autos und Internet angenommen haben. Die Seite hat eine Navigation im Header und enthält insgesamt sechs Menüpunkte. Wenn man auf einen der Menüpunkte klickt, scrollt man automatisch nach unten. Die Informationen der einzelnen Menüpunkte werden abwechselnd auf weißem und auf gelben Untergrund angezeigt. Die Seite ist sehr übersichtlich und ein wenig minimalistisch gestaltet. Je weiter man nach unten scrollt, umso detaillierter werden die Informationen über Chleon.com.
WHAT IS CHLEON?
Cl ILF. OK HAS BUILT TIIF WORLD'S MOST ADVANCED CONNECTED PLATFORM FOR CARS TO KEEP YOU SAFE, INFORMED AND ENTERTAINED. TO BRING THE LOVE BACK INTO
MOTORING. YOUR DRIVING WILL NEVER BE THE SAME AGAIN.
WHO ARE CHLEON?
CHLEON IS A TEAM OF EXPERTS FROM THE HI-TECH INDUSTRY W ITH SHAREDPASSION FOR BOTH CARS AND TECHNOLOGY.
T h e y w a n t t i i e i r c a r s c o n n e c t e d . T h e y w a n t y o u r c a r s c o n n e c t e d .AND 10 REALIZE THIS VISION, THEY HAVE BUILT THE HARDWARE AND
SOFTWARE, TO SAFET Y BRING CLOUD SERVICES TO CARS.
WHY CHL€ON?
h i M i o \ r iA i i ü k u 1 0 « m i I*
O ©O C A «
a a « u in■■hi » H*»<
«•! «•
IJ4 t
t I
9 4 ! |
Ar«*«*t -|x 4» Nd*• H *
m 1 94
.— • ^ . • • 4 m * 1t Mi «4 m « to
Ru b«id CimEx+cu&v» Pm i<l«o'.
Qf .
A a d ic » Dix on
THE LEADERSHIP TEAM
VUh «1 Cfa*tr«U»F<rjr.d«. O ü *4 Otffic«
V in k U iM Ö rlv a lV P . I u iu im i D r .’tic rp rm ct
Audio» Q»io%VP, iupptrChais
04/2013 webdesigner 49
WEB-GASingle Pages
LERIE
Adrian Crellin: freelance web design
View Mv Work:
Unser zweites Beispiel zeigt die Homepage des Freelance-Webdesigners Adrian Crelin, der sich auf seiner Homepage auf ein Minimum an Gestaltung beschränkt. Seine Kontaktdaten auf der linken und rechten Seite werden durch ein Handy und einen Kugelschreiber symbolisiert, wo man dieTelefonnummer und seine E-Mailad- resse erfährt. Der User scrollt von oben nach unten und erfährt so etwas über die Leistungen des Webdesigners. Zunächst werden unter der Überschrift„my Work" in einer kleinen Bildershow einige bisherige Arbeiten von Adrian Crelin vorgestellt. Die anderen drei Menüpunkte zu denen man nach unten scrollen kann lauten "Introduction","Services" und„Contact".
tnfroducfton: My Contact Details:I* *• M t II G
aMt#<M *W MIM MM «M IM Mfl 4 M M » «Mm M
T mçfior* *r*44 (0)7U4 H l §7%
C«K W w j:
l f » p— < V « u f v t # n ^ É i M n M * M4 • in M >MM« r* ir*»«sarg » 4 m u / m r » M M M t o t e t i « r # i fcM iyq
r« o u M 7 X M i* n» n f ■ » j n lg n iy « » (T— »■iiteht in n » i*w iiita k * Send me a Mc&sago:
Myta*MI »
I«V• m> r«*
» tA> m «0 « n I» « M i «'•>■«>1 *• M i m# m m Ir«4 «m • *< M BMW# M IX n
• M i
M W M»a Im» I a «M m»
ICmi AHoHWpWth
an M * a»f«a ■ i
—P lnnuat M(IMC». !•»( I« •«•»»»■. •« r «
I BjC» M
50 webdesigner 04/2013
WEB-GALERIESingle Pages
Diese in schwarz und gelb gehaltene Seite einer Agentur von Webdesignern wird man nicht sofort für eine Single- Page halten, wenn man die Navigation entdeckt. Aber wenn man auf die Navigation klickt, scrollt man automatisch 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 absolutes Alleinstellungsmerkmal der Seite. Sie besteht aus den fünf Unterpunkten „Home", „About"," Work", „Clients" und„Contact" und der User erfährt mit wenigen Worten alles, was er über die Agentur wissen muss.
lt‘3 important to be both good looking • ciever.
Lit u« Evwymns mw» ioc-t« f&y} Tr.»* « vfny'■'•s* Mi mm'dZtmt ¿JM «W •• V**« • ia ■ • V»UJ
to loek f x i Su! hcn*»Cy, ?ar n *uy p«r.
04/2013 webdesigner 51
WEB-GALERIESingle Pages
Diese sehr umfangreiche Single-Page hat sich dem Thema Design gewidmet und versucht dem User Schritt für Schritt näher zu bringen, was gutes Design ausmacht. Es wird eine Fülle von Informationen geboten. Bei der Masse an Informationen wären hier und da ein paar Unterseiten vielleicht etwas übersichtlicher gewesen. Im Header der Seite erhält man allerding unter„Tableof Contents" eine Übersicht zu allen behandelten Themen und kann sich vorher schon überlegen, welche Themen man interessant findet, sodass man nicht zwingend ganz nach unten scrollen muss, um zu wissen, welche Themen auf der Seite behandelt werden.
Startups, this is how design works.C m ^ u k i Ufca AffC* trw Eilfc Atfta* ta u t *4tW r* *>04 *»»<«»#**
»W
MtoIw^érsg» «I we eitfcnr Nmem
«tui » 4tm|o a »kfcw'A Voc4»t«*«
It« I(M K ta k x k m t
tiiMVÇMdiW i i m T u t r**« fc« *» rm
r»
Meet the Designer Founders
Acojfditx t>3 TW D lte fB if Fttftd lUfTUfl Wtffe d«UKtl«« kN p*n«mi£Lf MKklgftf i fi A ' i Im ft««It* W w u t pfflTik» oa fit« « ( 'V I M M m JUtm uJ lo m A rn u J
ibcu u k k iLKt kM turtvfv
I is armthod of proWroi solving.Tfc* I
Sowlut n > x x l< J e M £ n ?
TW I m I
ton* *■!»«*•«• to V « b M «U M lto à h (,«rm «Va »/I •» > m yrtoj* »Wti •a*i«a»*a*att
• Joe Cebbw, Autmb
Jo t AffaKi a » AiiCoö cqxnrftCA. I k u • W xitrd to t m t n t an a ip irin t and r& tftk n l v j n f d i r t x r tferoaffe tb lp , tftiutlrr* iWv^U t&J (t iA i ptoâacl •Oi*2tup to B ill* If 16 Jo« %'fcfiOM ptoduh rfeat tunpli/v life »iwJ lut'« » pottftua «apart oa d u eavtroaoKfie. ta4 « i w « th*t t V coaf**? *lb*r«s to cfce* ceaeci.
fVwc to Aataft.jof w n raplotad &tCbrawl* Rodt, to ( moiM i ( r m dnigawrttu#, »s J àrveiapvd w w rtl cotu m w tp ro b a t Aft »Juttr4 of tfe* Rbod> hlind
Griffe* Dnjte and In d o u «! Drupi u
O O
^ . JiM Q v L'j M Tint AiftnÖ*** .■ - V ,
k jII* 4i : v im c o
O O
# l ) * t e r k ju m ’ T r « P r in c ip le o4‘ “('»ood IV s i^ n ’
*11111 tof n I » »
V«v<nn an
». >W «m W l f * M l M l l ✓t to » a m « « « tm n
itor*i«a«a T «««a «a U i
oçr «4 «> « t a* '
Good dr%!gn IV..
0 £ t
Resources!
c °
o<o-o« ©
-a
I»‘s g ti'in g harder and harder io ditlem m at* ha«*d on wch tal*m iJon#. L>esi$ners like Jonathan Ive at Apple, Joe Gebbta at Aubnfc, and Dave Morin jr Path (to iu *i* a few) are chinking th#* world tndav - noc m w eW because Apple, Airbnb, or Path haw better tech, but beciiiw they nuke rheif produm more uiabtt. AMthetif, and Hunun.
Tkn n r * t ê p* w *f <m ôrtipi h r «cwraf» I k n r s i o M d «arfaraaüoa o«t iHrta u U m m m ii WiIImoi m A P - t dwHH
Rar» arm » taw tm o tt» * I k i(U i rw o o s M d
Design is ihe link missing from your founding leaiiL T lie |)erfert balance of business, tech, and design is an incredibly powertiil to o l..
and an even more powerful business model.
52 webdesigner 04/2013
A 1C A Bôhance
DESIGNER
FUND
WEB-GALERIESingle Pages
TOU* BUCHEN
Ob cxpfrim rnw ik Kunitrlum * oder «M M fcv Ardudcnir. w» lieben B o kn SO;Kt nt krtJt/rcn Nechcn und woten d r * »ns Mxducnir Lrhe rtkkrn. NIC HE Bcdc b r« mdmduel« Touren aa. ¿* S r dorthin fuhren. wo Bcclir. der x x am Spanne ndarn tz. Anaele rmnmrcwTVf Cu Wien ade r bekannter
U*u»<nk* dir huhiuitgefi
ü jfttfm i« Kunuwte und juiWrfmfthnkhe
Ekuftcactar.
Sc wallen die ocusxn Ennickiinfcn m e th fo . dar n « K u n t« c n Loaoorn axdedten oder die NLichcr d a Szene arfirrv Knn ftnbWm.
meneART &ARCHITECTURE TOURS BERLIN
ÜBER UNS
U€£R UN S PGESS£ PARTNER BLOC KONTAKT
BERLINS KUNST & ARCHITEKTUR ABSEITS ETABLIERTER WEGE
Diese sehr umfangreiche Single-Page hat sich dem Thema Design gewidmet und versucht dem User Schritt für Schritt näher zu bringen, was gutes Design ausmacht. Es wird eine Fülle von Informationen geboten. Bei der Masse an Informationen wären hier und da ein paar Unterseiten vielleicht etwas übersichtlicher gewesen. Im Header der Seite erhält man allerding unter „Table of Contents" eine Übersicht zu allen behandelten Themen und kann sich vorher schon überlegen, welche Themen man interessant findet, sodass man nicht zwingend ganz nach unten scrollen muss, um zu wissen, welcheThemen auf der Seite behandelt werden.
ISot NU. 200« fjhiï NIC! Œ a«in Kuncviamwrfi« und A l A iuàrj» W6h*bu um A h gjnwn
Grçfflnlrt b A n n U L 'm A rK u n xh tsc r kerr-r* n S c t f»* U d c i ued N«k H ivm rsn n » v JrA n h w ia n und L>ttüaa£$dt<<M Kx t i u t u Bedarum.
NIC Hi. &trkt> «•
toult>diH<)knaM Ttiiü ¿uc Kuocdunonfaem, DraJarruiptWfrm Küwd*rn und Aichiarfem*
• iUwuh tUBtrmtam• CJmvtanjt t+ n & rrck
• F ~ *r.~r±J S o Jt
• in^n Ttitfi
PARTNER & FREUNDEW k W k U a M fc «
*«« fe SH »41 fc>4. . . b » y «
04/2013 webdesigner
TUTORIALDesign für eine App-Downloadseite,Teil 1 von Oliver Berghold
Design für eine App-DownloadseiteDownloadseiten für Apps sollten den Besucher schier überwältigen. Oliver Berghold zeigt Ihnen im ersten Teil seines Tutorials, wie Sie den Hintergrund für eine solche Seite mit Wow- Effekt gestalten können.
P hotoshop ist für viele Webdesigner das Werkzeug der Wahl. Möchte man geometrische Elemente erstellen, oder lediglich einen Farbverlauf
anlegen, mag es effizienter sein, mit einem anderen Werkzeug zu arbeiten. Die Vorzüge von Photoshop lassen 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 Textur und vielen verschiedenen, in Photoshop erstellten Elementen mit unterschiedlichen Ebenen-Einstellun-
gen sowie einem Farbverlauf.Das Tutorial wurde mit der Version CS4 erarbeitet. Da sich die Menüführung, bzw. die Arbeitsfläche von Version zu Version immer mal wieder verändert, ist es bei den einzelnen Arbeitsschritten teilweise notwendig, etwas um die Ecke zu denken.Es wird allerdings keine bestimmte oder die aktuellste Version vorausgesetzt und alle Arbeitsschritte sind größtenteils mit den einfachsten Bordmitteln zu realisieren. Die Verwendung der Photoshop-Brushes ist auch nicht an den Einsatz einer konkreten Programmversion gebunden.
Der Hintergrund
Im erstenTeil diesesTutorials zeige ich, wie man mit Photoshop relativ einfach und fast nur unter der Verwendung von Bordmitteln einen stimmungsvollen Hintergrund gestaltet. Sie müssen gar nicht jeden Arbeitsschritt exakt nachvollziehen, um ein stimmiges Ergebnis zu erzielen, so wie ich es zeige, ist es jeweils nur eine Möglichkeit, oder Variante die Elemente zu gestalten. Wählen Sie doch z.B. mal eine andere Textur für den Hintergrund. Auch beim Erstellen der Farbverläufe ist ein wenig Ausprobieren gefragt. Experimentieren Sie mit Durchmesser, Deckkraft, Farbtönen und Ebeneneinstellungen / Ebenenstilen, um das für Sie passende Ergebnis zu erzielen. Für jeden Arbeitsschritt am Hintergrund lege ich jeweils eine neue Ebene an. Durch duplizieren oder löschen von Ebenen kann ich den Hintergrund im weiteren Verlauf schnell und übersichtlich modifizieren. Zuerst wird ein neues Dokument mit einer Breite von 1280 Px und einer Höhe von 1500 Px angelegt.
Los geht es mit dem Hintergrund. Für die Fläche wähle ich ein dunkles Grau (#111212) über das ich anschließend eine organische Textur lege.Ein kostenloses, umfangreiches Archiv mit hochaufgelösten Texturen findet man unter http://www.cgtextu- res.com. Ich wähle eine Metalltextur, aber probieren Sie
54 webdesigner 04/2013
TUTORIALDesign für eine App-Downloadseite,Teil 1
ruhig etwas anderes. Die Textur lege ich in über den grauen Hintergrund, die Ebeneneinstellungen setze ich auf weiches Licht. ▼
Lichtreflexe ; ; . ; : ;; :.i
Mit dem Verlaufs-Werkzeug (G) und den Einstellungen Radialverlauf sowie Vordergrundfarbe zu Transparent erzeuge ich in einem hellen metallischen Farbton (#869ba5) einen runden (radialen) Verlauf. ▼
Im nächsten Schritt wähle ich mit dem Auswahlrecht- eck-Werkzeug (M) die Fläche des Verlaufs bis zur Hilfslinie, entferne mit dem Schortcut Entfernen auf der Tastatur die Hälfte des Verlaufs und drehe, wiederum mit der Transformieren-Funktion (Umschalt+Strg.+T) die Verlaufsfläche um 45 Grad und platziere sie über dem Hintergrund. ▼
Mit der Transformieren-Funktion (Umschalt+Strg.+T) blende ich einen Begrenzungsrahmen ein um die Maße zu ermitteln und ziehe eine Hilflinie in die Mitte des Farbverlaufs. ▼
Diesen Arbeitsschritt wiederhole ich (auf separaten Ebenen) und zusätzlich mit der Farbe weiß und sowie #a89fa0 als Vordergrundfarbe. Den Radius der Verläufe variiere ich. Außerdem setze ich bei einigen Verläufen den Ebenenmodus auf Ineinanderkopieren. Jetzt platziere ich die einzelnen Verlaufs-Elemente so, dass sie sich überschneiden. ▼
Ich habe insgesamt 20 Verläufe mit unterschiedlichen Ebenen- und Deckkraft-Einstellungen erstellt und auf dem Hintergrund platziert, so dass auch die Ecken des Hintergrunds davon ausgefüllt werden. Die Überschneidungen, in Verbindung mit der Oberfläche der Textur ergeben den Effekt von Lichtreflexen. ►
04/2013 webdesigner 55
TUTORIALDesign für eine App-Downloadseite,Teil 1
Die Ebenen mit den bisher erstellten Verläufen werden ausgeblendet. Für mehr Kontrast füge ich jetzt einige weitere Verlaufs-Elemente mit derselben Technik hinzu. Als Vordegrundfarbe wähle ich schwarz, allerdings bleiben die Einstellungen dieselben: Radialverlauf sowie Vordergrundfarbe zu Transparent. Diese Elemente platziere ich im unteren Bereich des Dokuments. Im oberen Bereich kommt ein Farbraster dazu. ▼
Für das Raster verwende ich ein Photoshop-Brushset, das es als kostenlosen Download gibt: http://eliburford.deviantart.com/art/3-Large-Re- tro-Brushes-59553360
Nachdem ich den Pinsel installiert habe, indem ich die heruntergeladene Datei im Ordner Presets/Brushes meiner Photshop-Installation gespeichert habe, kann ich ihn über die Pinsel-Werkzeug-Palette (F5) aufrufen. Ich wähle die vorgegebene Auflösung des Pinsels, die
Vordergrundfarbe weiß und platziere ihn ausschnittsweise oben rechts im Dokument. Die Ebeneneinstellungen setze ich auf Ineinanderkopieren und die Deckkraft der Ebene auf 40 Prozent. ▼
Akzente
Für die besonderen Akzente in Farbe und Licht kommen weitere Elemente hinzu.Mit dem Zeichenstift-Werkzeug (P) zeichne ich unregelmäßige Dreiecke, die ich mit jeweils unterschiedlichen Ebenen-Stilen gestalte. Diese Elemente platziere ich im selben Winkel wie die vorher gezeichneteten Verläufe, auf deren Kanten. ▼
Wird ein Element nach dem Anlegen der Ebenen-Stile transformiert, bzw. gedreht, (das gilt auch für Smart- Objects, siehe unten), werden die angewendeten Filter- und Ebeneneffekte während des Vorgangs deaktiviert. Das soll aber nicht weiter beunruhigen, sobald die Transformation bestätigt wird, nimmt die Ebene wieder ihren gewünschten Look an.
webdesigner 04/2013
TUTORIALDesign für eine App-Downloadseite,Teil 1
Wer übrigens lieber mit dem Zeichenstift-Werkzeug in Illustrator arbeitet, so wie ich, kann das tun und die Objekte einfach per Drag and Drop über die Taskleiste aus Illustrator auf die Photoshop-Arbeitsfläche ziehen. Photoshop importiert diese Objekte dann als sogenannte Smart-Object in eine separate Ebene. ▼
Für das Arbeiten mit Smart-Objects gibt es eine Menge Optionen, die auf den Websites von Adobe und in diversen Foren ausführlich erklärt werden: http://help. a d o b e . c o m / d e _ D E / p h o t o s h o p / c s / u s i n g / WS41 A5B796-6846-4e95-8459-95243441 El 26.html
Bei den Akzentuierungen ist es wichtig, allen Formelementen durch Verläufe, Weichzeichnen und Reduzierung der Deckkraft ihre harten Kanten zu nehmen.Ich empfehle, erstmal mehrere Objekte zu erstellen und auf dem Dokumetzu verteilen. Erst wenn die Komposition stimmt kommen die Stile und Effekte dazu. Letzte Korrekturen erfolgen dann beim Gesamt-Finish des Layouts.
Für weitere Lichtreflexe, bzw. Akzente kommen zwei Weichzeichnungsfilter zum Einsatz: Bewegungsunschär- fe und Gaußscher Weichzeichner. Dafür erstelle ich zunächst eine Auswahl Auswahlrechteck-Werkzeug (M) und fülle sie mit der Vordergrundfarbe. ▼
Jetzt wende ich auf meine (deaktivierte) Auswahl die Filter an, zuerst Bewegungsunschärfe, dann Gaußscher Weichzeichner. Die Einstellungen der Filter setzte ich, wie Screenshot zu sehen. ▼
Anschließend wird die gefilterte Auswahl gedreht und auf der Arbeitsfläche platziert.Ich wiederhole diesen Schritt, verwende für die Auswahl aber immer eine andere Dimension (höher, breiter, schmaler usw.) und unterschiedliche Vordergrundfarben, von violett bis metallisch blau. Die Ebenen-Einstellunn- gen setze ich mitunter auf ineinanderkopieren. Auch Ebenen-Stile kommen zum Einsatz, vor allem Schein nach außen. ▼
l- Ö Ä H i * - .................................7 ................................1 •. . I u '1 -/- I 1 5-I
•/ P
ü • - 1 : r.1 *1 -1 . - ü
/ /
■ • 1
04/2013 webdesigner 57
TUTORIALDesign für eine App-Downloadseite,Teil 1
Verlauf und Farbkorrekturen
Jetzt kommt richtig Farbe ins Spiel - mit dem Verlaufs- Werkzeug (Q). Aber zunächst lege ich unter der Verlaufsebene eine neue Ebene in der Vordergrundfarbe weiß an, um den Farbverlauf gut sichtbar zu machen. Danach werden bis auf diese beiden Ebenen alle Ebenen alles ausgeblendet.Übrigens: Wer sich nicht mit den Standard-Farbverläu- fen begnügen möchte kann diese im Werkzeugfenster ganz leicht anpassen. Photoshop bietet über die Verlaufs-Parameter-Einstellungen, vielseitige Optionen um die Art des Verlaufs, die Farbspektren und andere Einstellungen individuell anzupassen. So lassen sich eine Fülle unterschiedlicher Effekte erzielen. Außerdem finden sich im Netzt unzählige unterschiedlichste Verläufe zum freien Download. Hier werden Sie bestimmt fündig:
http://myphotoshopbrushes.com/styles_and_ gradients/
Genau wie Pinsel (brushes) werden die Verläufe im entsprechenden Presets-Ordner gespeichert. Anschließend können sie über das Werkzeugfenster geladen werden. Verlaufsdateien (Gradients) haben die Endung .grd.Ich arbeite mit einem Standard-Farbverlauf und den Einstellungen wie im Screenshot. ▼
Die Ebenen-Einstellungen der Verlaufs-Ebene setze ich auf Ineinanderkopieren. Anschließend kann die weiße
Hintergrundebene wieder ausgeblendet oder gelöscht werden. Die graue Hintergrundebene und die Textur werden eingeblendet. Das Ergebnis könnte jetzt so aussehen. ▼
T— —"T——T— T — !T": f......r..... f
Nun sollen noch ein paar Lichtakzente hinzugefügt werden. Dafür setze ich ein weiteres mal das Pinsel-Werkzeug (B) mit zwei externen Pinselspitzen ein, die unter den folgenden URLs erhältlich sind:
http://rabieshund.deviantart.com /art/Rabies- Star-Brushset-19527557
http://demosthenesvoice.deviantart.com/art/ Star-Brushes-97311837
Ich lege zunächst eine neue Ebene an und wähle dann Weiß für die Vordergrundfarbe. Mit den unterschiedlich aufgelösten Pinselspitzen tupfe ich danach Akzente ein, die über sich auf die gesamte Arbeitsfläche verteilen. Diese Tupefer überlagern sich zum Teil. Ich bin dabei so vorgegangen, dass ich zunächst nur mit einer Pinselspitze gearbeitet habe. Dann habe ich zwischendurch das Ergebnis immer wieder geprüft, indem ich die anderen Ebenen eingeblendet habe, bevor ich weitere Pinsel hingezufügt habe.Anschließend setze ich die Einstellung der Ebene auf Ineinanderkopieren und dupliziere sie. Jetzt blende ich die Ebenen mit den Akzenten und den Verläufen ein. Der Hintergrund ist fertig.
58 webdesigner 04/2013
Managed Hosting im Failover-Cluster
Im m er einen Schritt vorausmit individuellen Hostinglösungen vom Server bis zum Clustersystem inklusive Beratung, Planung und Service 24/7.
Für mehr Performance, Sicherheit und Verfügbarkeit, jeden Tag, rund um die Uhr.
hostserver.de/hosting ■ 0 64 21 / 175 175 0
l.'H O S T S E R V E RBerlin ■ Marburg ■ Frankfurt am Main
Sicherheit im Failover-ClusterJ ISO 27001 und 9001 zertifiziertes
Managed Hosting
%/ Hochsicherheits-Datacenter in Frankfurt/Main
✓ DE-CIX Direktanbindung
%/ Umfassender Datenschutz
>/ 24/7 Service und Support
Managed Hosting zertifiziert
nach ISO 9001 : 2008
und ISO 27001:2005
TUTORIALVideos in Wordpress von Jürgen Ortmann
WordPress Videos für WordPressIn Zeiten von YouTube und Co. ist die Einbindung von Videos in Webseiten fast schon zum Standard geworden. Dank des cleveren WordPress Video Plugins ist das zum Glück auch völlig problemlos möglich.
V K o m m e n ta re
31 Design
& Plugins
¿¡H Benutzer
T A W a r ir» A i in a
E ine wichtige Funktion von WordPress-Seiten ist heute das Darstellen multimedialer Inhalte. Das Thema Video boomt - fast jeder Besitzer eines Mobiltele
fons kann heute qualitativ gute Videos drehen. Um all diese Videofilmer kümmern sich unzählige Plattformen wie You- Tube, Vimeo oder MyVideo. Auf WordPress-Webseiten können die Inhalte von diesen Portalen eingebunden werden. Mit dem WordPress Video Plugin (http://wordpress.org/ extend/plugins/wordpress-video-plugin/) ist es möglich, Material von sage und schreibe 65 Videoplattformen in WordPress-Beiträge einzubinden.
01ö Seiten
4 Kategorien
A SnhtonwArtor Installierte Plugins
Installieren
Editor
Bei WordPress anmeldenUm das WordPress Video Plugin nutzen zu kön
nen, melden Sie sich zunächst als Administrator mit Ihrem Benutzernamen und Ihrem Passwort an. In WordPress fahren Sie über den Eintrag Plugins in der Navigationsleiste. Wählen Sie aus dem Kontextmenü Installieren aus.
&
Das Plugin suchenJL» Im Arbeitsfenster tip
pen Sie nun „WordPress Video" in die Such-zeile ein. Klicken Sie auf die Schaltfläche Plugins suchen, um WordPress nach passenden Plugins suchen zu lassen. ►
Rüg ins installierenSue ton HocN*** I £trv loftltn I Aoputtr I H m jf
Plugin* treten) öoo Funttonsurnteng von WotJPtos*
SuttenW o tJ P ro ** V«5*o *
*3 Das Plugin installierenln der Übersichtsliste suchen Sie nach dem Eintrag
WordPress Video Plugin. Flier klicken Sie auf den Link Jetzt installieren, um das Plugin in WordPress zu laden, -w
« A l l
60 webdesigner 04/2013
TUTORIAL
Wichtige Begriffe
Plugin -WordPress-Seiten lassen sich um Zusatzfunktionen erweitern. Die für diese Zusatzfunktionen angebotenen kleinen Programme nennt man Plugins.
Shortcodes - Shortcodes sind verkürzte Schreibweisen für Code-Abschnitte. Sie erleichtern die Arbeit mit WordPress. Dem Beitrag wird hier ein kleiner Code- Schnipsel hinzugefügt, den WordPress dann richtig interpretiert.
Video-ID - Die Videoportale verwenden unterschiedliche Systeme zur Identifikation ihrer Videos. Im Falle von YouTube und anderen Portalen ist die Video-ID eine Zeichenfolge, die Sie für das Einbinden verwenden können.
WordPress Video aktivierenWordPress teilt Ihnen jetzt mit, dass das WordPress
Video Plugin erfolgreich installiert wurde. Wie immer bei Plugins fehlt aber noch die Aktivierung, um das Tool in Betrieb nehmen zu können. Klicken Sie daher auf den Link Aktiviere dieses Plugin. ▼
twiémmn
Keine KonfigurationNachdem das WordPress Video Plugin aktiviert
wurde, gibt es jetzt im Dashboard unter Einstellungen das neues Untermenü WP Video Plugin, doch etwas einstellen kann man hier noch nicht. Wichtig ist allerdings der Link auf die Plugin-Dokumentationsseite Instruction (http://www.daburna.de/dokuwikl/doku.php/instructioh). Durch das installierte Plugin stehen Ihnen nun verschiedene Befehle für das Einbinden von Videos zur Verfügung. Diese Befehle finden Sie auf der Instruction- Seite aufgelistet. ▼
2 3 E in ste llu n gen Allgemein
Schreiben< Menü einklappen
Lesen
WP Video Plugin „
05
Videos in Wordpress
Die BefehlsübersichtAuf den ersten Blick wirkt die Liste mit den
Befehlsbeispielen überwältigend, sie ist aber recht klar sortiert. Zu jedem Videoportal führt die Seite Instruction ein Beispiel auf, welches zeigt, wie die Befehlsfolge lautet, w
You—» o tfrr
fot h » ufc f 1 .1*30 Im yf p*rmmAmy-ömMUDtiAV 1 ¿Vrfcdl fh9 Id te»Matt - yMocx** d«6tctocWri33bfeC$Youtub«[fOutuL* Id! ot *rt\ m tfO iLt» <3 ***T\P o rm jR v coatfMte» *«=*chczw b o * tn« c <« fc o -o z * ao** - \ytxnx*«CKÄW.aOP*J o [ y o u f Jb* a0MOZW_»0«i 2*0 175]
%YouCub« P liyk tl
c wCh hcl^-qf o f f n pfciy lh# d w C M U JM T V ilW G- ¡yeutwDeffeyUI EF1 '« W A ftO ttt t)
Beispiel: YouTubeDas Plugin bietet für
das Einbinden von YouTube- Videos die folgenden beiden Möglichkeiten auf: [youtube id] oder, wenn Sie die Größe für das zur Verfügung stehende Fenster mit angeben wollen, auch [youtube id width height]. ►
Ein Video
Unterstütze PlattformenDas WordPress Video P lug in un te rs tü tz t fo lgende V ideoporta le . (S tand: 19.11.2012)
123video.nl Guba SevenloadAniboom Hamburg 7 Video slideshare.comBlip.tv hulu smotri.comBreak IFILM Sumo.tvBrightcove ISeelt.TV teachertubeCBS Jumpcut TriluliluCeUfish Kewego Tu.tvClipfish Last.fm UnCutClipsyndicate LiveLeak VeohCollegehumor MEGAVIDEO VideotubeCom edyCentral. Metacafe Vimeocom Mncast.com Vsocialcurrent.com Mojvideo.com vzaar.comDlG.com MPORA.com WandeodotSUB MQSTO.com wat.tvFacebook MSN Yahoo! VideoFlickr Video MyspaceTV YoureporterFunnyorDie.com MyVideo YoutubeGameTrailers Novamov Youtube PlaylistGameVideos OnSMASH.comGeneric Flash reason.tvGlumbert ReelzChannelGoalVideoz RevverGoogle Video screencast-o-matic.Grouper com
04/2013 webdesigner 61
TUTORIALVideos in Wordpress
Youirtin **>STRATO Webshops Teil 1: Einrichtungsassistent
Kjiagortan Vötc rocntadan U
C A -» — ■*
u - stfSTBATO
4 ***** 9 »•••" P
□ a
STRATO ttfrtMtopa
mT*4I l\ EmtwitvoniraaOT 6 Al*.*
STRATO WMMfeftf* Tail (:T —*
“2 | • »owtf—PCC O
. — KonftQuraBon 1A1 aS*«p* Aü«nN■ r
u ■ h H»WiKA M
5. T«l. Oate-fcanli TrtaWm M Strata
0 3«wS^ i Umv
_ Vldao A/tfattung - ErMtfto«» ainanNfllMMmM
K "r
m 10WM-A
1 Ttfl: Nomapag* aXiftin ka%tmUo*«u m
CSD
* 77 «fl STRATO Wabtfop« lall J.
mA
l£|CD
1 - ' * H 1 normt ftUrtaono -
' 0 8Die YouTube-ID findenWie findet man nun die YouTube-ID? Wenn Sie
sich ein YouTube-Video anschauen, finden Sie unter dem Videofenster die Rubrik Teilen. Unter dieser Rubrik steht die Webadresse, unter der Sie das Video direkt erreichen können: http://youtu.be/S4b9zOUvOpQ. Der letzte Teil dieser Adresse (S4b9zOUvOpQ) bildet die YouTube-ID.
A Q D i c ID in WordPress einfügen-7 Kopieren Sie jetzt als erstes die YouTube-ID. Um
das Video nun in einem WordPress-Artikel zu verwenden, wechseln Sie in Ihr Dashboard und legen über die Navigationsleiste mit Artikel > Erstellen einen neuen Artikel 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 übersichtlicher, da keine störenden Formatierungen auftreten. Tragen Sie jetzt in das Textfeld einfach den Code [youtube S4b9zOUvOpQ] ein. ▼
10Das Videofenster einstellenSie können hier nicht nur schnell Ihr YouTube-Vi
deo einbinden, sondern auch die Größe des Video-Fensters genau festlegen. Nehmen wir an, Sie möchten, dass das Video mit 600 Pixeln Breite und 300 Pixeln Höhe angezeigt 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 Breite an, die zweite Zahl legt die Höhe fest. ▼
Urtka
nf? Elrwirtluneert
Bearbeit en
Ein Video
STRATO Webshops Teil 1: Einrichtungsassistent Teilen 5 weitere Informationen
Dieser Eintrag wurcie veröffe'ilitf < in Allgemein von administrator. Permanenter Unk des Eintrags.
Ein Video
62 webdesigner 04/2013
TUTORIALVideos in Wordpress
11Video im TextSie können Videos auch zusammen
mit Text einbinden. Fügen Sie einfach neben Ihrem Shortcode den Text Ihres Beitrages ein. Das können Sie übrigens auch in der Editor-Einstellung Visuell machen, um zu sehen, wie Ihr Text formatiert wird. ►12 Beispiel: Vimeo
Für Vimeo sieht der Befehl ganz ähnlich aus: [vimeo id width height]. Auch hier benötigen Sie zunächst die ID des Videoclips. Diese wird bei Vimeo an mehreren Stellen angezeigt: in der Webadresse des Clips und im Teilen-Fenster (unser Beispiel).
13Den Clip einbindenVimeo nutzt dieselbe übersichtliche Shortcode-
Schreibweise wie auch der Befehl von YouTube. Auch hier können Sie Breite und Höhe des Videos einstellen, beispielsweise 250 x 150 Pixel. Für unser Beispiel mit dem Video 45710321 lautet der Shortcode dann [vimeo 45710321250150]. ►
MMehrere Videos in einem BeitragDank der problemlosen Shortcode-Schreibweise
des Plugins können Sie auch mehrere Videos neben- oder untereinander anzeigen lassen - auch aus unterschiedlichen Quellen.Für unser Beispiel haben wir diese Befehlsfolge genutzt: [vimeo 45710321 260 150] [youtube S4b9zOUvOpQ 260 150], Beide Videos wurden hier mit einer Breite (width) von 260 Pixeln und einer Höhe (hight) von 150 Pixel eingestellt. ▼
Ein VideoP a rm a ln fc : h ttp /^ rw w .w «D d 6S <gnef*rraga2 in .deA i& m o/© n*v iöeo*2 / E<J<tieren Kurzhnk a n z o g e n
H o c h la d a n ^ in fü jo n ^
j f / ~ : } « B t t ,• R V - S3 m
Absatz - l A w .T _ «2 * t>
[youtube S4b9z0Uv0pQ 200 120] Lorom ipsun dolor sil amo», consctetur sadipscing elctr, sed diam nonumy eirmod tempor irrvidunt ut labore et dotare magna aliquyam erat, sod diam vduDtua. At vero eos et accusam et justo duo dolores e*. ea rebum. Stet cita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem psum dolor sit amet, consetetur sadipscing elfr, sed diam nonumy eirmod tempor invidunt ut labore et dokxe magna aliquyam erat, sed diam voluptua. Ai vero eos et accusam et justo cuc dotares e: ea rebum. Ste: clita kasd gubergren, no sea takimata sanctus est Lorem
Ho 0 o __Dia* W m* .1 r#dd«t ß JJJJ
E-mailM6 C
M#dÜfNM VeiUlp 'UflSfl«-** »MW’S«* frtMMrMr.'l*Rr:li t i l t o r f u t U c r M " ■BSúllorfi l l ic r M f i
,a llo »# »U S cr»»n > < vi^o ii* > «p x <
T » « a ■/ (M i M A i r » l A p a I c, ...
Pr»vH»
Se'td Umac* ©S T R A T O I■ mfreffi w>-r^art«r>Jp
745710321Itik» wltfl you:
STRATO
AtoU «>k i t o «»*KXC*’>ON Kfettoc HLütf «W tAKMhliWartr Ofc*
M
MIHI H D
tMl M «0t» »np»n WK» mvtmQom
y<rmmnj tm mnm$ M « v 1 VN» *a M f« f car »«• f IM
0*0 «Mi mm« m «Mant
Bearbeiten
Ein Video
Vimeo YouTube
04/2013 webdesigner
Abonnieren S ieweb
ft tu*«ÜTpfOf»s
hineSi i S « u n 9|pW,e
s t °
ir>er
erond'>9e" s t .0ptÜ21
„o b »e 'W* ^ ttÄ wSo
m
-,VL*^ ¿ 5 - ^ * * * * 1 ft
1\ru
I Oö>
v
Ausgaben
ile als Abonnent:- Sie verpassen keine Ausgabe mehr
- Sie erhalten die aktuelle Ausgabe vor dem Erscheinungstermin frei Haus
- Sie sparen 16 % gegenüber dem Kauf am Kiosk
- Sie erhalten eine wertvolle Prämie Ihrer Wahl
m i s n yJuj
juruurSchnell und einfach bestellen
0 22 25/70 85 -367H & 'Hü f l w w w . s o n i c - m e d i a . d e
ho
los
ATH-M40 ( '
(fcaudio-techntriagwwff A
ATH-M40 ( '
(fcaudio-techn»rinvHj«» A
/UWM a tth a i
EffekteHaut. Figur
Portraits retuschieren mit PhotoshopVon der kaum sichtbaren Retusche bis zur makellosen Magazin
schönheit entdecken sie mit diesem Buch den besten Weg für Ihre eigenen Bilder. Sowohl die erweiterten Techniken bei CS5, wie
auch versionsübergreifende Vorgehensweisen für verschiedenePorträtarten werden gezeigt.
ATH-mOtsEin Klassiker unter den Studio-Kopfhörern, der dank geschlossener Bauweise und linearer Abstimmung als echter Allrounder für Aufnahme, Monitoring und Live-Einsätze bestens eignet.
Kugelschreiber- VideokameraDieser edle Kuli sieht nicht nur gut aus. Eine integrierte Farbvi-
deokamera und 2GB USB-Speicher (für bis 60 min. Video und Ton) machen dieses Gadget zu einem Meisterwerk für die Hemdtasche.
TUTORIALSocial Media-Buttons von Jürgen Ortmann
Social Media-Buttons ansprechend gestaltenDamit die Vernetzung der eigenen Seite mit Facebook und Co. gelingt, sind attraktive Social Media-Buttons unverzichtbar. Wir zeigen Ihnen, wie Sie Buttons besonders ansprechend und dennoch unaufdringlich gestalten können.
Triff uns auf faceb o o k
# Fo lge uns auf tw itter
Social Media Buttons sind praktisch von
keiner Website wegzudenken. Die Gestaltung
dieser Schaltflächen ist einfacher als man
vielleicht vermutet.
Triff uns auf X in g
B uttons sind ein zentrales Element bei der Conversi- on-Optimierung. Daher sollte der Gestaltung von Buttons besonders viel Aufmerksamkeit gewid
met werden. Grundsätzlich sollte ein Button auch als solcher leicht identifiziert werden können. Außerdem muss er sich von den Inhalten einer Seite absetzen, ohne aber das Design zu sehr zu stören. Ein sehr beliebtes Mittel ist die plastische Gestaltung, die mithilfe von Verläufen, halbtransparenten Elementen und Schatten erreicht wird und dabei nach wie vor verblüffende Effekte erzielt.In diesem Tutorial möchten wir Ihnen ganz ausführlich zeigen, mit welchen Techniken und Kniffen sich ein professioneller Look erzielen lässt, der den Besucher förmlich zum Anklicken der Buttons drängt. Zudem kann der dabei erstellte Button sehr unkompliziert umgefärbt und mit neuem Logo und Text versehen werden. Wichtig ist vor allem die Entwurfsphase. Viele Designer beginnen mit den Entwürfen direkt am Computer. Für meinen Button habe ich zunächst auf dem Papier verschiedene Entwürfe ausprobiert, bis ich einen Entwurf gefunden habe, mit dem Ich rundum zufrieden war. Der Vorteil solcher Skizzen liegt vor allem darin, dass man gezwungen ist, mehr zu abstrahieren. In Photoshop ist man dagegen viel zu sehr damit beschäftigt, sich mit den Werkzeugen, Eingabewerten, Filtern und anderen Funktionen zu beschäftigen, wobei man schnell den Blick für das Ganze verliert. Außerdem bleiben auf dem Papier alle Ideen gleichzeitig sichtbar, wodurch man sich ursprünglich verworfene Ideen schneller wieder ins Gedächtnis rufen kann, wenn sich diese später doch als nützlich erweisen.
m Der EntwurfWie bereits erwähnt, habe ich die Buttons zu
nächst auf dem Papier skizzenhaft entworfen, bis ich mit einer Skizze zufrieden war und eine klarere Vorstellung von den fertigen Buttons hatte. Die Grundidee dabei war, bunte, attraktive Buttons zu kreieren, die aber dennoch so neutral gehalten sind, dass sie sich problemlos in die meisten Webseiten einfügen. Die Buttons sollten außerdem einen Text mit einer Aufforderung enthalten, wie„besuch uns auf xy". Deshalb müssen sie in der Breite genügend Platz für die Phrasen bieten.
pv Die richtige Arbeitsfläche\ j Wenn das Konzept steht, kann mit der Arbeit in Photoshop begonnen werden. Öffnen Sie das Programm und legen Sie mit„Datei > Neu" eine Arbeitsfläche von 1000 x 1000 Pixeln, 150 dpi im RGB-Modus an. Zunächst soll der Facebook-Button gestaltet werden, der dann später als Grundlage für die anderen Buttons dient. ▼
r.* JL% ■*- 1 • . .. 1
6 6 webdesigner 04/2013
TUTORIALSocial Media-Buttons
Q Rechteck mit runden EckenLegen Sie In der„Ebenen"-Palette eine neue lee
re Ebene an. Wählen Sie dann das „Abgerundete Rechteck-Werkzeug". Stellen Sie in der Optionsleiste einen Radius von 5 Pixeln für die Eckenrundung ein. Klicken Sie dann auf den kleinen Pfeil neben dem „Eigene-Form- Werkzeug". Geben Sie dort die Werte für die Breite („B") und die Höhe („H") ein. Bei mir sind dies 670 Pixel für die Breite und 96 Pixel für die Höhe. Klicken Sie dann in die Arbeitsfläche, um den Pfad für Rechteckform zu erzeugen. Wenn Sie mit gedrückter Strg-Taste in die Form klicken, erscheinen Anfasspunkte an den Ecken und Sie können die Form verschieben. Öffnen Sie dann die „Pfade"-Palette und doppelklicken Sie dort auf den Eintrag „Arbeitspfad". Geben Sie dann in dem Dialog „Pfad speichern" den Namen„Rechteck" ein und klicken Sie auf „OK". Aktivieren Sie danach den Pfad in der„Pfade"-Palet- te erneut und öffnen Sie dann wieder die„Ebenen"-Pa- lette. ▼
vrt-i ew.TxrsöM)]b</K AusvtfthJ iittcf Fcnjtcr H Ä c
Facebook-BlauU lU m die Pfadfläche unseres Rechtecks im typischen Facebook-Blau einzufärben, habe ich zunächst die Farbe auf der Facebook-Seite mit einem Color-Picker- Add-on aufgenommen. In Illustrator habe ich dann bei aktivem Rechteckpfad den Farbwähler für die Flächenfarbe geöffnet und dort den Hexadezimalwert (3b5998) eingefügt, sodass das Rechteck in dem Blauton gefärbt wird. Klicken Sie nun in der Palette „Farbfelder" auf den Button„Neues Farbfeld", um das Facebook-Blau zur Palette hinzuzufügen. ▼
c Rechteck blau füllen\ J Rechtsklicken Sie bei immer noch aktivem Form- Werkzeug in den Rechteckpfad und wählen Sie aus dem Kontextmenü „Auswahl erstellen..." und bestätigen Sie den Dialog mit „OK". Wählen Sie dann in der Werkzeugleiste auf das „Füllwerkzeug". Gehen Sie dann mit dem Cursor in die„Farbfelder"-Palette und klicken Sie auf das Facebook-Blau, um die Farbe zu laden. Klicken Sie nun in die Auswahl, um das Rechteck blau zu füllen.
VerlaufDas Blau des Rechtecks soll nun mit einem Ver
lauf überlagert werden. Klicken Sie dazu nun in der „Ebenen"-Palette auf das „fx"-Symbol und wählen Sie aus dem Menü die Option „Verlaufsüberlagerung". In dem Dialog, der sich daraufhin öffnet, ist ein Verlauf von schwarz nach weiß voreingestellt. Wählen Sie bei „Füllmethode" die Option „Weiches Licht". Dadurch wird der Verlauf transparent und das Blau scheint durch. Mit dem Verlauf wirkt das Rechteck nun so, als wäre es gewölbt. ▼
' S *
©
f \ mm7 Schein nach innen\ J / Die Schaltfläche soll einen dünnen, leuchtenden Rand erhalten. Dies erreichen wir mit dem Ebenenstil „Schein nach innen". Klicken Sie dazu in der„Ebenen"- Palette auf das „fx"-Symbol und wählen Sie aus dem Menü die entsprechende Option. Ändern Sie im „Ebenenstile"-Dialog die Farbe für den „Schein nach innen", indem Sie auf das kleine Farbfeld klicken und dann im„Farbwähler"-Dialog ein mittleres Blau auswählen. Im Beispiel handelt es sich um #2b4482. ▼
r V * 0 > N r»«N »W w - w * otfiv
i IM #
I« ß l M b
1f
04/2013 webdesigner 67
TUTORIALSocial Media-Buttons
Q SchlagschattenW O a Is nächstes soll der Button einen Schlagschatten erhalten. Dieser sorgt dafür, dass der Button sich besser in das Design einer Website einfügt. Wählen Sie dazu über das „fx"-Symbol den Ebenenstil „Schlagschatten" aus. Schalten Sie im Dialog die Option „Globaler Lichteinfall verwenden" aus. Stellen Sie dann einen Winkel von 120° ein. Wählen Sie außerdem folgende Werte: „Deckkraft" 75 Prozent, „Distanz" 5 Pixel,„Überfüllen" 0 Pixel und „Größe" 5 Pixel. Bestätigen Sie dann mit „OK". Der Schatten kann, wie alle anderen Ebenenstile, bei Bedarf in der Photoshop-Datei noch verändert werden. ▼
/^VQEinen Kreis einfügenZ^Um den Kreis einzufügen, wählen Sie von den
Formwerkzeugen das „Ellipse-Werkzeug" aus. Klicken Sie dann in der Optionsleiste wieder auf den kleinen Pfeil, um dort unter den „Ellipse-Optionen" eine feste Größe einzugeben, nämlich 70 Px für Breite („B") und Höhe („H"). Klicken Sie in die Arbeitsfläche, damit der Kreis erzeugt wird. Platzieren Sie den Kreis dann links auf dem Button, indem Sie ihn bei gedrückter Strg- Taste anklicken und verschieben. Wenn Sie den Kreis horizontal mittig auf dem Button platzieren, müssten ober- und unterhalb des Kreises je 13 Pixel Platz sein bis zum Rand des Buttons sein (der Button hat eine Höhe von 96 Pixeln). Platzieren Sie den Kreis außerdem 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 Lineal machen und die entsprechende Option auswählen. Nun können Sie mit der Maus Hilfslinien vom Lineal in die Arbeitsfläche ziehen, mit deren Hilfe das Pixel-ge- naue Arbeiten sehr gut gelingt. Außerdem ist die „lnfo"-Palette („Fenster > Informationen") für solche Arbeiten sehr hilfreich. ▼
i «*Qla \ aZ__ =__ =__ 2__ 2
10. Den Kreis füllenLegen Sie nun eine neue Ebene an. Rechtsklicken
Sie dann in den Kreis und wählen Sie die Option„Füllop- tionen". Daraufhin öffnet sich der Dialog „Ebenenstile". Wählen Sie dort den Ebenenstil „Farbüberlagerung". Öffnen Sie danach per Klick auf das kleine Farbfeld den „Farbwähler"-Dialog und stellen Sie schwarz ein (#000000) und bestätigen Sie mit „OK". Wählen Sie außerdem im „Farbüberlagerung"-Dialog „Farbig abwedeln" als„Füllmethode". Dadurch erscheint die Kreisfläche nun in einem matten Blau. ▼
1
>UM
Wählen Sie nun in dem„Ebenenstile"-Dialog die Option „Abgeflachte Kante und Relief". Stellen Sie dort unter „Struktur" folgende Werte ein: „Stil" -„Abgeflachte innen", „Technik" - „Abrunden", „Farbtiefe" 20 Prozent, „Größe" 2 Pixel,„Weichzeichnen" 0 Pixel. Unter„Schattierung" müsste der„Winkel" bei -60° stehen, wenn die Option „Globaler Lichteinfall verwenden" eingeschaltet ist. Senken Sie unter „Lichtermodus" die „Deckkraft" auf 50 Prozent und unter„Tiefenmodus" die „Deckkraft" auf 30 Prozent ab. ▼
IWfc J M %
■ — -
<*** u i •*)----------------------------- | IN ■
I Q■OB« —
6 8 webdesigner 04/2013
TUTORIALSocial Media-Buttons
12Schein nach innenUm bei dem Kreis dem Eindruck einer Vertie
fung den letzten Schliff zu geben, habe ich zusätlich noch einen „Schein nach innen" eingefügt. Das voreingestellte Hellgelb habe ich über den „Farbwähler" durch schwarz ersetzt und diesen dann mit einem „Überfüllen" von 11 und einer„Größe" von 8 Pixeln versehen. Dadurch wirkt der „Schein nach innen" wie ein ringförmiger Schatten. ▼
» * « *
» * « *
13Das Logo besorgenNun brauchen wir das Facebook-F als Icon für die
Kreisfläche. Zwar ist das Facebook-Logo in einer Schriftart gehalten, die gratis heruntergeladen werden kann („http://www.mediafont.com/font-11 -facebook_letter_ faces.html"), dennoch möchte ich hier zeigen, wie Sie das„f" aus einer Grafik vektorisieren können. Auf diese Weise lässt sich jedes beliebige Form nachbauen. Schauen Sie sich im Internet nach Facebook-Logos in einer guten Auflösung um und speichern Sie ein geeignetes Logo auf Ihrem Rechner. Gehen Sie dann in Photoshop zu „Datei > Platzieren", navigieren Sie in dem Dateibrowser zu dem Logobild und klicken Sie auf „Platzieren". Drücken Sie dann Enter, um das Platzieren zu bestätigen. ▼
rechtwinklig oder im 45°-Winkel zum letzten Ankerpunkt stehen.Dort wo das„f" Kurven hat, klicken Sie einfach von dem Punkt, an dem die gerade Linie in eine Kurve übergeht, und setzen den nächsten Pfadpunkt am anderen Ende der Kurve, dort wo die Kurve wieder in eine gerade Linie übergeht, so wie es im Screenshot dargestellt ist. Schließen Sie zum Schluss den Pfad, indem Sie auf den Anfangspunkt klicken. ▼
<5
I r Das Logo vektorisieren 2J Um nun die Kurven in den Pfad einzufügen, kli
cken Sie bei gedrückter Strg-Taste auf den Pfad, so dass die Ankerpunkte sichtbar werden. Wenn Sie nun den Cursor auf den Pfad zwischen zwei Ankerpunkte stellen, wird neben dem Cursor ein kleines Pluszeichen angezeigt. Per einfachem Klick setzen Sie einen Kurvenpunkt auf den Pfad. Diesen können Sie mit gedrückter Maustaste verschieben, sodass sich zwischen den benachbarten Ankerpunkten eine Kurve bildet. Außerdem besitzt der Punkt zwei Hebel, mit denen die Kurve weiter angepasst werden kann. Setzen Sie jeweils an den beiden Kurven des„f" einen Kurvenpunkt und verschieben Sie diesen, bis er genau auf der Kurve liegt. Formen Sie dann mithilfe der Hebel die Kurve zurecht, bis sie exakt auf dem Umriss des„f" liegt. Die Hebel können Sie ebenfalls mit dem Cursor bei gedrückter Strg-Taste verschieben. Sollte eine Kurve völlig missraten sein, können Sie den Kurvenpunkt mit einem einfachen Klick wieder entfernen und mit einem neuen Kurvenpunkt von vorne beginnen. ▼
M Das Logo vektorisieren 1Legen Sie nun eine neue Ebene an und wählen
Sie das„Zeichenstift-Werkzeug". Vergrößern Sie die Ansicht so, dass das „f" die Arbeitsfläche füllt. Klicken Sie dann mit dem Zeichenstift-Werkzeug zunächst einen Pfad aus geraden Linien entlang der Umrisse des„f". Indem Sie während des Setzens der Ankerpunkte die Shift- Taste gedrückt halten, werden nur Linien erzeugt, die
04/2013 webdesigner 69
TUTORIALSocial Media-Buttons
16Pfad verkleinern und füllenGehen Sie nun in die „Pfade"-Palette, doppelkli
cken Sie auf den „Arbeitspfad" und speichern Sie ihn dann unter dem Namen „Facebook-f" ab. Blenden Sie dann die Ebene mit dem importierten Facebook-Logo aus. Rechtsklicken Sie dann bei immer noch aktivem „Zeichenstift-Werkzeug" in den Pfad und wählen Sie„Frei transformieren Pfad". Halten Sie die Shift-Taste gedrückt und verkleinern Sie den Pfad so weit, bis das„f" in den Kreis des Buttons passt. Verschieben Sie den Pfad in den Kreis und bestätigen Sie mit Enter. Rechtsklicken Sie nun erneut in den Pfad und wählen Sie „Pfadfläche füllen". Stellen Sie in dem Dialog dann bei „Vordergrundfarbe" die Option „Weiß" ein und bestätigen Sie mit „OK". ▼
17m —
Die KerbeDer Bereich mit dem Icon in dem Kreis soll durch
eine senkrechte Trennlinie von dem Bereich, der die Beschriftung trägt, abgegrenzt werden. Die Trennlinie soll zudem eine Schattierung erhalten, sodass sie wie eine Kerbe aussieht. Blenden Sie zunächst die Hilfslinien ein und ziehen Sie eine senkrechte Hilfslinie ein, die 96 Pixel vom linken Rand des Buttons entfernt ist. Stellen Sie in der Werkzeugleiste #42454a als Vordergrundfarbe ein. Wählen Sie dann das „Linienzeichner-Werkzeug" und stellen Sie in der Optionsleiste eine „Stärke" von einem Pixel ein. Ziehen Sie nun eine senkrechte Linie entlang der neuen Hilfslinie ein, die die gleiche Höhe hat wie der Kreis. Damit die Linie wie eine Kerbe aussieht, benötigt sie noch einen Ebenenstil. Rufen Sie die „Ebenenstile"- Palette auf und setzen Sie ein Häkchen bei „Abgeflachte Kante und Relief". Stellen Sie dann dort die folgenden Werte ein: „Stil: Abgeflachte Kante außen", „Technik: Ab- runden"„Größe: 0 Pixel",„Weichzeichnen: 1 Pixel",„Winkel: -60", sowie eine „Deckkraft" für„Lichter-" und „Tiefenmodus" von jeweils 75 %. ▼
I oM •
Die Beschriftung soll nun mit dem „Textwerkzeug" eingefügt werden. Wählen Sie das Werkzeug, stellen Sie in der Optionsleiste weiß als Farbe sowie„Myriad", „Bold" und „22 Pt" ein. Tippen Sie nun den Text „Triff uns auf facebook" ein. Schieben Sie dann die Schrift über den Button, sodass sie horizontal mittig auf dem Button steht. Damit nun auch die Beschriftung aussieht, als wäre sie in den Butten eingekerbt, wird auch sie mit einem Ebenenstil versehen. Rufen Sie wieder die „Ebenenstile"-Palette auf und wählen Sie dort „Abgeflachte Kante und Relief". Wählen Sie dieses Mal folgende Werte: „Stil: Abgeflachte Kante innen", „Technik: Abrunden", „Größe: 1 Pixel", „Weichzeichnen: 0 Pixel" „Winkel: -60", sowie eine „Deckkraft" für „Lichter-" und „Tiefen modus" von jeweils 75 %. t
f~A N* VttY T,* +4 ««*** IKK*?)ibcac Aw m W Ntat Am *
.13....Kf « »■ > ml
je tmjSw kr»- ' l -11*■ 'w*i
__fl
Triff uns auf facebook
V'N*»
CZK
ft*vrS &51 VOTC*«
19Weitere ButtonsDer Facebook-Button ist damit fertig und kann
bequem als Grundlage für weitere Buttons genutzt werden. Sofern Sie die weitere Buttons in dieser Pho- toshop-Datei anlegen wollen, ist es ratsam, alle Ebenen des Facebook-Button zunächst in einer Gruppe zusammenzufassen. Klicken Sie dazu einfach auf das Ordnersymbol unten in der„Ebenen"-Palette. Markieren Sie dann die Ebenen des Buttons bei gedrückter Strg-Taste und ziehen Sie sie dann mit der Maus über den Ordner. Benennen Sie dann den Ordner in„Face- book" um. Der Ordner kann nun bequem dupliziert werden (Rechtsklick >„Gruppe duplizieren").Für die weiteren Buttons muss dann die Farbe und Beschriftung geändert werden. Zudem müssen Sie sich entsprechende Icons, wie etwa den Twitter-Vogel im Falle einesTwitter-Buttons, besorgen und vektorisieren.
70 webdesigner 04/2013
MAuthorised Systems Integrator
ADOBE CREATIVE CLOUD FÜR TEAMS ROADSHOW
E X K L U S IV E F E A T U R E S FÜ R KREATIV-TEAM S D A T E IF R E IG A B E IM TEAM UND FÜ R K U N D EN
Z E N T R A L IS IE R T E S L IZ EN Z M A N A G EM EN T D IG ITA LES P U B L IZ IE R E N ..A D O B E ED G E T O O LS * ;
R E S P O N S IV E W E B D E S IG N . ■ •.M USE, HTML5 . 'T- '
Hamburg: 09.04.2013 Stuttgart: 11.04.2013
München: 12.04.2013 Wien: 18.04.2013
Köln: 19.04.2013 Berlin: 23.04.2013
□EgtflL J I + —k . . . . i
r ;v % ^
Das Event für alle Unternehmen, die innovative Ideen für Design, Web und Video umsetzen und mehrere Adobe Kreativ-Arbeitsplätzs h^ben.
JETZT ANMELDENwww.cancom.de/CreativeCloudTeam
TUTORIALSEO für WordPress von Tobias Henke
SEO für WordPressAuch unter SEO-Gesichtspunkten bietet WordPress zahlreiche Möglichkeiten. Wir nennen Ihnen die besten Techniken, um Ihre Seite zu optimieren.
W ordPress gilt schon in seiner Standardinstallation als das wohl SEO-freundlichste Content- Management- System überhaupt. Das
bedeutet natürlich nicht, dass es nicht trotzdem wichtig und sinnvoll ist, seine Seite für Suchmaschinen weiter zu optimieren. Dies betrifft natürlich den Content, aber auch Dinge wie beispielsweise die richtige Auswahl eines SEO-Plugins. Im Folgenden möchte ich Ihnen zeigen, wo man bei einer WordPress-Seite in Sachen Such- maschinenoptimierung ansetzen muss. Themen sind hier neben den bereits erwähnten beispielsweise die richtige Verlinkung eigener Beiträge, sowie die Frage, wo man Keywords einsetzt.:]] Keywords gehören in die Verlinkung.Wer einen Blog betreibt, sollte auf jeden Fall neuere mit älteren Artikeln verlinken und einen Track-/Pingback setzen, sodass es für User einfacher wird, ältere Artikel zu finden. WordPress setzt standardmäßig einen Pingback von älteren auf neuere Artikel, aber für den Fall, dass das System mal Macken hat, ist es immer sinnvoll, auch manuell Trackbacks zu setzen.Wichtig für die Suchmaschinen ist, dass man wichtige Keywords direkt innerhalb des Links platziert. Also beispielsweise eine Formulierung wie„F1ier der neue Artikel „SEO für Word Press" komplett in den Link setzen. Oft fin
det man Formulierungen wie. „Unseren neuen Artikel zum Thema XY finden Sie hier", wobei nur das Wort„hier" verlinkt ist. Suchmaschinen fällt es im letzten Beispiel schwerer den Link thematisch einzuordnen, daher sollte man hier, wie gesagt, immer mit Keywords arbeiten.
Nutzen Sie die" sprechenden" Permalinks
Mit „sprechenden Permalinks" ist gemeint, dass der Name der URL bereits verdeutlicht, worum es auf der jeweiligen Seite inhaltlich geht. Oft enthalten sprechende Permalinks beispielsweise den Namen und das Datum eines Artikels. Die Funktion der sprechenden Permalinks ist in WordPress standardmäßig deaktiviert. In WordPress haben Sie die Möglichkeit, sich zwischen drei Vorauswahlen von sprechenden Permalinks zu entscheiden. Sie haben die Wahl zwischen einem Link, der neben dem Titel noch das genaue Erscheinungsdatum des Artikels enthält, oder Sie können sich für eine Variante entscheiden, die den Namen des Artikels, das Erscheinungsjahr und den Monat enthält. Die dritte Variante bezieht sich auf ältere Artikel, die sich bereits im Archiv befinden. Außerdem haben Sie die Möglichkeit, sich für eine benutzerdefinierte Struktur zu entscheiden.
webdesigner 04/2013
TUTORIALSEO für WordPress
O Standard http: //www.webdesigner-magazin .de/demo/ ?p=l23
0 Tag und Nam e http://www.webdesigner-magazin.de/demo/20l3/e2/25/Beispielbeitrag/
0 Monat und Nam e http://www.webdesigner-magazin.de/demo/20l3/02/Beispielbeitrag/
0 Numerisch http://www.webdesigner-magazin.de/demo/archive/l23
9 Beitragsname http://www.webdesigner-magazin.de/demo/Beispielbeitrag/
Benutzerdefinierte Struktur http://www.webdesigner-magazin.de/demo / Ä p o s t n a m e V
Z w ischen diesen E in s te llungen kö n n e n Sie s ich entsche iden.
Auch Bildern sollten Sie einen für sich sprechenden Titel verpassen, das heißt nicht Bildnamen wie Bild 123.png verwenden, sondern aussagekräftige Namen wie beispielsweise Fritz-Müller.png nutzen, sodass man schon an dem Dateinahmen erkennt, was auf dem Bild zu sehen ist.
bloginfo(,description'); ?></title><?php} eise {?><titlex?php wp_title(,|', true,,right'); bloginfo(,name');
?></title><?php}?>
Vorteile der sprechenden „Permlinks"
Ein besonders offensichtlicher Vorteil der sprechenden Permlinks ist, dass eine aussagekräftige URL userfreundlicher ist, als eine Nummernkombination aus der überhaupt nichts über den Content hervorgeht. Außerdem ist es suchmaschinen-freundlicher, wenn in der URL bereits die Artikelüberschrift und das ein oder andere Key- word enthalten ist, so dass die Suchmaschine beispielsweise die Unterseiten zu einem bestimmten Oberthema besser sortieren kann.Um die Permalink-Struktur aus dem Admin-Bereich aktualisieren zu können, benötigt man Zugriff auf die .htac- cess-Datei. Diese Datei muss sich im Hauptordner von WordPress befinden.Damit die Änderungen auch aktiv werden, muss die .ht- access-Datei beschreibbar (CHMOD 666) sein. Außerdem muss das Apache-Modul mod_rewrite aktiv sein.
Die Suchmaschinen schauen analysieren im Titel lediglich die ersten 60-70 Zeichen an. Deshalb gehören die Überschrift und wichtige Keywords auf jeden Fall in den Seitentitel. Eine Möglichkeit ist, dass man mit Hilfe eines Code-Editors folgendes in die header.php eingibt:
Dieser Code fragt jedes Mal, ob man sich gerade auf der Startseite befindet oder nicht. Ist dies der Fall, wird zunächst der Name des Blogs/der Seite in die URL geschrieben und dann die Kurzbeschreibung (Descripti- on).Befindet man sich dagegen nicht auf der Startseite, wird zuerst der Titel der Unterseite genannt und anschließend folgt ein Verweis auf den Titel des gesamten Blogs/ der Seite.
Zwischenüberschriften sind attraktiv für die Suchmaschine
Zwischenüberschriften sind nicht nur ein gutes Mittel, um Texte zu strukturieren, sie haben auch für Suchmaschinen einen nicht zu unterschätzenden Wert. Um das zu verstehen, ist es wichtig, dass WordPress bekanntlich auf HTML basiert. Es zieht die Inhalte aus der Datenbank der jeweiligen WordPress-lnstallation und generiert daraus eine dynamische XHtml-Seite.Eine wichtige Rolle bei der Gestaltung der Zwischenüberschriften ist der WYSIWYG-Editor für HTML. WYSIWYG steht für„What you see is what you get" und meint in diesem Fall, dass die Darstellung der Seite im Editor während der Bearbeitung mit der Darstellung der Seite auf einem anderen Gerät übereinstimmt. Im WYSIWYG-Editor für HTML hat man sechs verschiedene Elemente zur Auswahl, mit deren Hilfe man den einzelnen Überschriften und Zwischenüberschriften ein un-
<?php if (is_homeO) {?><titlex?php bloginfo(,name'); ?> - <?php
So optimieren Sie den Seitentitel
04/2013 webdesigner 73
TUTORIALSEO für WordPress
terschiedlich hohe Ordnung geräumt wird und zwar von H1 (hoch) bis H6 (niedrig). Seit WordPress 3.0 hat WordPress die Ordnung H1 für die Artikel- oder Blog- überschriften reserviert, so dass man nur noch zwischen den Überschriften der Ordnung H2-H6 wählen kann. Inzwischen gibt es deutliche Anzeichen dafür, dass Gool- ge den H1-Überschriften eine eher geringe Bedeutung beimisst und die Kategorien H2 und H3 eher entscheidend für ein gutes Ranking sind.Man sollte die Überschriften nach semantischen Gesichtspunkten wählen, also wichtiger Inhalt bekommt eine Überschrift der Ordnung H2 und H3 und Inhalt der weniger wichtig ist dementsprechend eine Überschrift niedriger Ordnung. Die Suchmaschine wird es durch ein hohes Ranking danken, wenn man seinen Inhalt richtig strukturiert.
Dublicate Content verhindern
Mit Dublicate Content ist gemeint, dass identischer Inhalt unter verschiedenen URLs erscheint. Das kann beispielsweise dann passieren, wenn ein Autor denselben Inhalt auf verschiedenen Webseiten veröffentlicht. In Blogs passiert das besonders schnell, da ein Artikel unter anderem auf der Startseite als auch unter dem jeweiligen Permalink auftacht. Wenn Fälle von Dublicate Content auftauchen, müssen die Suchmaschinen sich für eine Seite entscheiden, der sie den jeweiligen Inhalt zuschreiben. Alle anderen Seiten, auf denen derselbe Inhalt auftaucht werden als „Dubletten" ignoriert. Die Problematik kann auf mehrere Arten angegangen werden. Einerseits gibt es einige SEO-Plugins für WordPress, die das Problem lösen. Hier sei beispielsweise auf das kostenpflichtige und sehr umfangreiche Plugin wpSEO verwiesen. Eine kostenlose Alternative ist izioSEO. Diese Plugins arbeiten automatisch und teilen der Suchmaschine mit, welches die relevante URL ist. Man kann das ganze Problem aber auch manuell entschärfen, in dem man mit „Weiterlesen"-Links arbeitet, wie es beispielsweise die großen Nachrichtenportale tun. Auf den Übersichtsseiten muss man klicken, um weiterlesen zu können und nur auf einer Seite ist der vollständige Artikel zu sehen und das Problem des Dublicate Contents ist somit zumindest innerhalb eines Blogs gelöst.
So verwenden Sie die richtigen Metatags
Die Bedeutung der Metadatan für die Suchmaschinen ist inzwischen zwar zurückgegangen, für Google sind sie angeblich deutlich weniger wichtig als früher, aber es schadet trotzdem nicht sie zu optimieren. Vor allem, da
dies mit recht wenig Aufwand möglich ist.Unter den Suchergebnissen taucht bei jeder Suchmaschine ein kleiner Text auf, die Meta-Description. Diesen Text können Sie mit Hilfe des Plugins mit dem Titel „All- in-One-SEO-Pack" bequem editieren. Wenn Sie das Plugin nutzen, haben Sie die Möglichkeit, sich für einen Home-Title, die Home-Description, die Homekeywords, den Post Titel und den Page Title zu entscheiden.In den Home Titel gehört das zentrale Keyword Ihrer Seite sowie den Namen Ihrer Seite ein. In die Homediscrip- tion gehört wie bereits erwähnt der Text, den Sie unter Ihrem Suchergebnis gerne lesen würden. Die Homekeywords haben für Google inzwischen keine Bedeutung mehr. Hier können Sie natürlich trotzdem die Keywords eingeben, die für Ihre Seite relevant sind. Wenn Sie beim Post Title „%post-title%" eingeben bedeutet das, dass für jeden Artikel immer nur der von Ihnen festgelegte Artikelname verwendet wird. Beim Pagetitle können Sie ähnlich verfahren und mit diesem Befehl arbeiten: %page_tltle% | %blog_title%.
SEO-Plugins für WordPress
Es gibt inzwischen mehrere SEO-Plugins für WordPress. Diese hier einzeln detailliert vorzustellen und die genaue Funktionsweise vorzustellen, würde den Rahmen des Artikels sprengen, da allein SEO-Plugins für WordPress Stoff für einen ausführlichen Artikel liefern. Daher werde ich die bekanntesten SEO-Plugins hier kurz nennen und mich auf einige allgemeine Angaben beschränken:• Das vielleicht umfangreichste SEO-Plugin ist das kostenpflichtige wp SEO. Es bietet umfangreiche Einstellungen und ist dank ständiger Aktualisierung immer auf dem aktuellsten Stand.
•f I . * W l H l * W I C ....................
D ank sehr schneller A ktua lis ie rungen ist wpSEO das w o h l beste SEO-Plugin fü r WordPress. wpSEO le g t beispielsweise nach w ie vo r großen W ert a u f die o p tim a le A npassung de r M etada ten , w ie Sie h ie r erkennen können:
74 webdesigner 04/2013
TUTORIALSEO für WordPress
Textfeld a ls P latzhalterVergaDO W w HO« wWwrHJn • OxUW pfO ö erecn
Startseile
Bo < träge
Seiten
InhantiinnMed»enK ategonen
Suche
Schlagw örter
Autoren
Taxonom ien
Restliche Seiten
Trennzeichen n * P latzhalterZechen a b vfeueA* Trenner zwischen em zeton PteizhaAern
Um form a&erung d e r Schreibw etseUmwrarxJung de» T M n GroS- oder Wenechretoung
K eine ;
berem igung vom uDertiuss»gen c o o elL- Entfernung von HTML- und anderen störenden Fragmecrten
Ä nderungen übernehm en
H ie r sehen Sie das M e n ü des P lug ins wp-SEO
Beschreibung
g Autom atische G enerierung der M etab eschreibung ak&vierenAusgaöo der Doscripeion ab Metainformafion
S ta r t* * /le Kein w e rt *«
Beiträge Textausschm tt au s aktuellem Artikel AW
Seiten l extausscnnitz au s aktuellem Artikel aV
Inhaiisarten Textausschm tt aus aktueller tahaftsart aV
M ed*en M edium titel ♦ A /tikeb te l A•
Kategonen Titel gelis teter Artikel •▼
Suche Titel gelis teter Artikel A•
Schlagw örter T iie l o * li* if t t * r Artikel Aw
Autoren Titel gelis teter Artikel A▼
Taxonom ien lite i gelisteter Artikel A»
Restliche Seiten Titel gelis teter Artikel •»
Beschränkung a u f m axim al 1 4 0 Zeichen ® SchersteAung der voAetftndgen ScNbarteft in Google Sncpets
y Ausgabe tfutachliedttcri wilb nOgvf saueKürzere, defür ausgeschriebene S itze in den Suchergebnssen
Optionale MeUbtfbchreiüuny der StarteeiU*M aruoie Descrpton für <*e Startseae
W issensdatenbank mit Hilfesexten und dokun en & erten Funkftonen rund
Ä nderungen übernehm en
wp-SEO b e s c h ä ftig t sich in te n s iv m it den M e ta -D a te n
Steuerung der Indexierung
¡%J Autom atische G e n e n e ru n g d e s Robocs-M etaiag akftvierenSteuerung dar Index «rung e ru einer Beröche der Wobsie
Startseite index. follow
B eiträge index, follow
S eiten index, follow
inhaltsarten index, follow
M ed ien m dex, follow
K ategohen notndex. follow
S uche noendex. follow
Schlagw örtor rxxndex. follow
Autoren no«ndex. follow
Taxonom ien n o in d e x follow
ResG ch e S eden nom dex. follow
y M etatag -W erte M e x . toflow und tnöex nicht au sgeben Standard-Werte Denötigoc « e r * D e k r e te n Im Oueftext
C N oo dp a ls W ert ins Robocs-M etatag schreibenKene Datonvenwendung aus dem D M O Z/O D P-Verrechne
N oarch ive als W ert »ns R ob ots-M etatag schreibenK e n C a c h n g der W o ö s o to n s o to n s S u c h m a s ch n e n
B eitrage nach 6 M o naten rrat notnäex, toflow versehenAw1o»fll>ecN> Soorrung |kor<K B o e a g o v o r ln d a x «ru n Q (? )
0 C an o n ica l Link für je d e W ebse<te gen erie renErmttüng und Ausgabe bevorzugter Adresse ab CanoncaJ
( Ä nd eru ngen üb ern eh m en
H ie r kö n n e n Sie w e ite re d e ta illie r te A npassungen d e r M e ta d a te n vo rn ehm e n
• Ähnlich umfangreich ist das All in One SEO Pack, das sich besonders gut für Einsteiger eignet, da es sehr viele Voreinstellungen gibt.
• Ein sehr gutes SEO-Plugin für Fortgeschrittene ist das sehr umfangreiche Plugin Headspace 2.
•Weitere bekannte SEO-Plugins sind izio SEO, Plati- nium SEO Pack und WordPress SEO Master. Das ist natürlich nur eine Auswahl. Aber unter diesen sechs Plugins ist für jeden Zweck etwas dabei, ob für einen kommerziellen Blog oder für einen Einsteiger.
Fazit: SEO ist auch in Bezug auf WordPress ein sehr weites Feld. Es gibt nicht das eine Patentrezept, mit dem man eine Seite optimieren kann, aber es reicht schon wenn man einige Grundregeln beachtet, um aus dem ohnehin schon SEO- freundlichen Wordpress nahezu das Optimum an SEO-Freundlichkeit herauszuholen.
04/2013 webdesigner
TUTORIALCSS3 Animation von Andreas Hitzig
Als Objekte laufen lerntenCSS3 bietet Ihnen verschiedene Möglichkeiten, Objekte zu animieren ohne dazu Flash oder sogar JavaScript zu verwenden. Im Workshop erfahren Sie, wie Sie die Technik auch auf Ihrer Homepage nutzen.
Demos » Browser Support Checklist CSS3
(ko***«
V w tw i
CiKXtreund Cm*tob UK»*#*** 9m
R M v l
80« Samo*C«k»*w#
I M F I M
NtU
iMteieSM'jiOtfMsOç*c*jM ts
Tt
IfKMftrm 30
T i«bA u(ii
fofelCSS) Support'
. ;.u« i0;<
t e -ftrcfoi © 0Mc«nct (ip w ct
OOpon1t✓✓✓✓▲✓✓✓
4
✓✓▲✓A
A
✓✓
»✓✓✓✓A
✓✓✓
5.1*
✓✓✓✓A
✓✓✓
n✓✓✓✓✓✓✓✓
✓✓✓✓
✓✓A
✓
✓✓A
✓
✓✓✓✓
✓✓✓✓
✓972S
✓9 X * \
✓f »9 S
✓W 4S
H*✓X
S✓«✓
to✓✓✓I I
V✓ ✓ ✓
11.1
✓✓✓✓
«56.CS
✓M.4S
114
II✓✓✓
✓✓✓
12.1✓✓✓✓✓✓✓✓
✓✓✓✓
✓✓✓✓
toes
✓•3.3S
V
U9S
*Thi«U£M06*i»ft6*»rr*A«avMtjaCâ&J»p««AMaôA irtmst r moflfm
Jk. Inzwischen unterstützen alle
aktuellen Browser die Funktionen zur
Animation, wenn auch teilweise nur in einer Engine-abhän-
gigen Version.
pwi MitotfttfraêdâüitoâftrtaroM'Mf «ufc&ttor rautttMUMtrutf s*cem« nter« «MnMimpMM
Auf einen Blick
Verwendete Software:Texteditor
Browser mit CSS3 Unterstützung
Technologien und Standards:HTML5, JavaScript, CSS3
Experte:Andreas Hitzig
Dank CSS3 ist es inzwischen möglich, Bewegungen auf einer Webseite ohne weitere Hilfsmittel zu erzeugen. Dazu war in der Vergangenheit
zumindest JavaScript, wenn nicht sogar eine Flash-Entwicklung notwendig.Die Grundlage hierfür stellt die @keyframes-Technologie dar, die wir in unseren Workshop-Beispielen einsetzen. Leider ist CSS3 noch nicht flächendeckend in allen Browsern implementiert, jedoch gibt es in den neuesten Versionen, selbst beim Internet Explorer, keine Probleme mehr mit dem Einsatz. Inwieweit @keyframes auch von älteren Browsern unterstützt werden, sehen Sie beispielsweise in der Kompatibiliätstabelle von Norman's Blog (http://www.normansblog.de/demos/brow- ser-support-checklist-css3/)
4 Probleme mit der neuen Technologie haben somit nur noch der Internet Explorer bis Version 9 und der Opera Browser bis Version 11.6. Bei Firefox, Safari und Chrome gibt es zumindest eine Engine-spezifische Implementierung.Da vor allem die älteren Internet Explorer Versionen noch eine recht starke Verbreitung haben, sollten Sie nicht zentrale Funktionalitäten Ihrer Website vollständig auf Basis dieser Technologie entwickeln, sondern den Besuchern immer noch eine Alternative bieten. In einem solchen Fall sollten Sie ein Framework wie Modernizr nutzen, um die vorhandenen Funktionen im Browser Ihres Besuchers zu überprüfen und auf Basis dessen die entsprechende Darstellung wählen.
*1 Grundlagen verstehen \ J 1 Nicht alle Browser haben bereits den übergreifenden CSS3 Standard in Bezug auf Animationen implementiert. Aus diesem Grund müssen Sie, wenn Sie die entsprechenden Funktionen verwenden möchten, auf die lokalisierte Implementierung des Browser-Herstellers zurückgreifen. Dies bietet keine zentralen Nachteile in der Ausführung, führt jedoch zu erhöhtem Pflegeaufwand. In Bezug auf die Animationen bedeutet dies eine vierfache Implementierung der jeweiligen Definitionen: eine übergreifende Variante und drei Lokalisierungen für
76 webdesigner 04/2013
TUTORIALCSS3 Animation
- i mwhaoAD DOCH MF NT AT ION RFSOURCFS NFWS
"An indispensable tool."— B ru c« B o w » « * A d o b e JSiC M zaLdb J t e d u c L M t & y a
Modernlrr 1$ a JavaScript library lhai detects HTML5 and CSS3 features In the user's browser
W liv use M tx ie in i/r?#Taiwvg aa*virt*g# dt cool r+M v**b t^rvwUe^et * gr#r. ton, uroi you *ove to »JppOT tKOwV^S tf--* »eg bebmd Mo<Joml*r mo*:#» e * « y »V you to w i t condfao'ial .stvvSw l on«/ CSS to hondte eac* w&adoa a b*o*sc' «.-.ipporv. * fraru»* or ft« ITS pnWocr to# iWsr^JVfU)*eM/v* *nf*A»V#«An? Mtrfy
How it worksMuOvr’iU' run» qufehJy on ^tyv toed to <*r‘.«U fcatu»«. 11 ff>cn t'cr.os a JavaSoft object *th tbe reaufc*. and ©ods ciam s ’c i u i
fv you to key yov? CSS on Mo4 a*nijr t jp c o r ; do;cm o' « « a a ^ opoonafy rwsud** yaps«*» ^ ice renttaanAi foaang o# # «# /'vsi .«a aw m i r#a©u*f#«
O+rk o n tt l* (L Htt c f feetnrr»i¿Meen or tae** more about £&tetcnrca ioaätvi rrlf McOf tl?
m*» M iW rnif»
ustooY fcujitfcer Google hNcrosoft
r « u k i M (a u w U
Download Modernizt ¿.6.¿l ) v itw* rtwwnwHr<1, iiorry*^v^5^<1 DevetopmHif wfMnn to tiewtop w«h •nd teem from.
Th#n. d*# rttft m# Produrt«a* huirt i m •nd picfc Jutt the tests you neetf
orvrioPMfMT
^ P R O D U C T I O N
Gel started wilh Model niziV/^iU MívVmifí iy ,>» you V hk romrH ov#c the e»p*rw*«<# th#-«xigh taveScr^p*-rtn v ^ i faahs* <Vf^<-hAn a t% importent to u%* h e v jv * r iv * ithrouQhoiA yovf devotee»*^« U ta p ro g ra tt^ew t^r-e»^ you can. a'iO don't a t tv t tM ty fo» conven*e«xe orP«m for morte»
• Joe wntftiMfi toft ngrrttc• ;• : ;íS4lí¿ :ÜML¡. y *:t. I . fo»w»*r Are*
• tteyy.io »"v*1 <*» < *<*• **v\k •'* K ’I*»*'Vtfr.-r'v.fl** <Jv V ►/ ffyvr* SeiAfcvt• f iTnnininrwhfi fnaimtriMrinM«»«• frMi-y CiLm^grr P&¿'.¿:
Also cb*c* out our ß c y M ti2 L 6 ß M 3
Tip. cNkà ow y'i ¿» ;v a - V to omtUy iirw yot* cune«* tKcwve* a flcar.ures.
HTM L
Abuitcom san »ostBrous
O Fo*ovw u» on Twi-e«-
C o ^ ^ . e on G*Hub
©O
Sobar «The w*n P5S
D v'» :» X) Moüvf n«r
Latest news^•V4rr Tf ,VtJMedarWir Po-Ucjr on l i W i f T M ifldltantft DiitotRcod our poicy on bugs and aiscPOWVMP*€V>OU$Mod#fni*r 2 .0 ^ r e l«a » «d
Vr »9Mfldt rriif 2-fl rclcmtfW<ir,«r »'Oti
2012
U*4 0**+*—' Moerraff M V « *V< fMCT» hit** A « M tcvWÿ
N ^ ) i lo 9*t you uo «rid n*v*ro Mit dem Framework Modernizr fragen Sie die vorhandenen Fähigkeiten eines Browsers ab.
Mrnandt« >•>»*•09
die Mozilla-Engine (Firefox), Webkit (Safari und Chrome) sowie für den Opera Browser. Das folgende Beispiel zeigt eine entsprechende Struktur für die @keyframes-Eigen- schaft. ►
@keyframes demo
@-moz-keyframes demo /* Firefox V
@-webkit-keyframes demo /* Safari und Chrome V
@-o-keyframes demo /* Opera V
{
}
Das erste Beispiel\ J ^ lm ersten Beispiel gehen wir näher auf die grundsätzliche Funktionsweise und die Parameter von @keyframes ein. Dabei handelt es sich noch um keine Animation im klassischen Sinne, bei der Objekte von einer Position zur nächsten bewegt werden, sondern lediglich um eine Demonstration der Grundtechniken. Deswegen ist das Beispiel so einfach wie möglich gehalten.Eingebettet wird die Animation eines Objektes in den style-Abschnitt einer Webseite, die Definition erfolgt zweistufig. Im ersten Schritt legen Sie die Animation als solche, wie bereits oben gesehen, innerhalb von @key- frames fest. In unserem Fall soll noch keine wirkliche Animation, sondern lediglich die Farbe eines Objekts verändert werden. Dies geschieht über einen Farbverlauf und die beiden Schlüsselbegriffe from und to.
04/2013 webdesigner
TUTORIALCSS3 Animation
Das erste Beispiel zeigt, wie einfach ein
Farbübergang als Animation dargestellt
werden kann. ►
from {background:green;} to {background:pink;}
Die Hintergrundfarbe des Objekts verändert sich somit von Grün nach Pink.Damit ein Objekt auch animiert oder wie im Beispiel farblich verändert werden kann, benötigen Sie einen Selektor wie etwa ein div-Element.Dabei handelt es sich in unserem Beispiel um ein Rechteck mit einer Breite von 250 Pixel, einer Höhe von 150 Pixel und der Hintergrundfarbe Grün. Dieses verknüpfen Sie anschließend mit der zuvor definierten Animation und legen auch die Zeitdauer für die Ausführung fest - in unserem Beispiel fünf Sekunden. Diese Definition umfasst aufgrund der zuvor geschilderten Konstellation die vier Fälle für die unterschiedlichen Browser-Engines.
div {width:250px; height:100px; background:green; animation:demo 5s;-moz-animation:demo 5s;-webkit-animation:demo 5s;-o-animation:demo 5s;
Im letzten Schritt benötigen Sie nur noch innerhalb des body-Bereichs ein div-Tag, welches das Rechteck aufnimmt und darstellt.
<body><p>Ein erstes @keyframes Beispiek/p><divx/div></body>
Damit haben Sie die Grundlage für die folgenden Beispiele sowie ein farblich animiertes Rechteck geschaffen.
E in e rstes 'S k e y f ra m e s B e is p ie l
Eine solche Animation kann nicht nur einen Übergang enthalten, sondern auch mehrere. Im Beispiel des farblichen Verlaufs ist es möglich, mehrere Zwischenstufen zu
definieren und einen zeitlichen Ablaufzu definieren. Im folgenden Beispiel gibt es insgesamt vier Zwischenschritte, bis die Farbe von Grün zu Pink wird. Am Ende springt das Rechteck automatisch wieder auf die Ausgangsfarbe zurück.
@keyframes demo {0% {background:green;}20% {background:blue;}40% {background:yellow;}60% {background:red;}80% {background:orange;}
i
Den zeitlichen Verlauf geben Sie mit einem Prozentwert in Bezug auf die Gesamtzeit an. Da unsere Farben alle gleich lang gezeigt werden sollen, wählen wir einen linearen Verlauf und weisen allen Objekten den gleichen prozentualen Wert zu. Wenn Sie eine Farbe länger anzei- gen möchten, passen Sie die Werte entsprechend Ihren Vorstellungen an.Diese Anpassung haben wir exemplarisch für die Standard @keyframes demo Definition gemacht. Diese müsste natürlich auch noch entsprechend für die Lokalisierungen der Browserengines analog definiert werden. ▼
E in m eh rstu fig er F a rb v e r la u f...
▲ Eine Animation können Sie unter CSS3 m it mehreren Zwischenstufen definieren.
Objekt bewegenEine Animation unter CSS3 kann natürlich viel
mehr sein, als nur ein reiner Farbübergang, denn schließlich sollte ein Objekt ja auch von einer Position zur nächsten bewegt werden können.
Der Programmcode hierfür sieht gar nicht viel anders aus als im vorherigen Beispiel und wird lediglich für die einzelnen Zustände um die Koordinaten des Objektes ergänzt. In unserem Beispiel fährt das Rechteck erst einmal nach rechts um 300 Pixel, dann um 300 Pixel nach unten, anschließend 300 Pixel nach links, wieder schräg
78 webdesigner 04/2013
TUTORIALCSS3 Animation
nach oben und zurück auf die Ausgangsposition.
@keyframes demo{0% {background:green;left:Opx; top:0px;}20% {background:blue; left:300px; top:0px;}40% {background:yellow; left:300px; top:300px;}60% {background:red; left:0px; top:300px;}80% {background:orange; left:300px; top:0px;}100% {background:pink; left:0px; top:0px;}
}
Zu jedem dieser Bewegungsschritte gibt es eine entsprechende Positionsangabe, die mit Hilfe der Parameter left und top gesetzt wird. Damit diese anschließend auch in Bewegung umgesetzt werden können, ist noch die Festlegung eines Bezugspunktes wichtig. Diesbezüglich ergänzen Sie die Definition des div-Tags entsprechend um die Eigenschaft position. In unserem Beispiel ist es ein relativer Bezugspunkt zum Ausgangspunkt.
position:relative;
Alle Angaben, welche Sie innerhalb von @keyframes gemacht haben, orientieren sich somit am Startpunkt der Animation. ▼
E in m ehrstufiger F arb ve rlau f m it B ew eg u n g ...
schaft zu kennzeichnen. Das folgende Beispiel nutzt exemplarisch alle vorhandenen Eigenschaften, wie es CSS3 im Standard vorsieht.
animation-name: demo; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running;
/^Definitionen für Mozilla, Webklt und Opera*/
}
Fügen Sie an der entsprechenden Stelle die zugehörigen Gegenstücke für die drei Browser-Engines mit ein. Falls Ihnen diese Definition zu lang Ist, können Sie auch eine Kurzform verwenden. Bei dieser geben Sie alle relevanten Eigenschaften ohne die entsprechenden Bezeichner an. Das obige Beispiel in Kurzform hat dann das folgende Aussehen.
div {animation: demo 5s linear 2s infinite alternate;
/*Definitionen für Mozilla, Webkit und Opera*/}
▲ Natürlich sind auch Bewegungen m it CS53 a u f Basis von Koordinaten möglich.
Weitere Informationen zur AnimationIm ersten Schritt haben Sie nur eine grundlegen
de Festlegung der Eigenschaften für Ihre Animation getroffen. Es gibt jedoch noch eine Reihe von weiteren Eigenschaften, die Sie festlegen können. Im Kasten auf Seite 80 haben wir diese für Sie gegenübergestellt. Für die einzelnen Browser gibt es wieder, wie bereits bekannt, entsprechende Lokalisierungen. Diese sind durch ein entsprechendes Präfix, analog der Keyframes-Eigen-
Kombination von BewegungenSie können mit CSS3 natürlich nicht nur eine Be
wegung festlegen und ausführen, sondern auch mehrere nacheinander. Bis jetzt ist das Rechteck nur in einer definierten Bahn von Eck zu Eck bewegt worden. In einer zweiten Sequenz fällt es von oben rein, ruckelt noch zweimal kurz und bleibt dann liegen.
@keyframes demol {0% {background:green;left:Opx; top:0px; animation-
timing-function: ease-out;}20% {left:50px; top:300px; animation-timing-function:
ease-in;}40% {left:100px; top:250px; animation-timing-
function: ease-out;}60% {left:150px; top:300px;animation-timing-function:
ease-in;}80% {left:200px; top:250px; animation-timing-
function: ease-out;}100% {left:250px; top:300px;animation-timing-
function: ease-in;}}
04/2013 webdesigner 79
TUTORIALCSS3 Animation
m
Das Ganze ist in Kurzform beschrieben. Das Besondere ist die Eigenschaft animation-timing-function, mit der Sie die Beschleunigung innerhalb der Bewegung festlegen. Wenn es abwärts geht, wird es ein wenig schneller, aufwärts entsprechend ein wenig langsamer.Die beiden Animationen demo und demol kombinieren Sie anschließend durch die Anpassung der div-Defi- nition.
animation: demo 5s, demol 3s;
Damit werden nach dem Start die beiden Animationen nacheinander ausgeführt.
Mehrere Bewegungen kombinieren...
▲ Sie können mehrere CSS3 Animationen miteinander verknüpfen und in Reihe ausführen lassen.
Für die Animation mit CSS3 gibt es verschiedene Eigenschaften. In der folgenden Tabelle werden diese kurz vorgestellt und beschrieben.
Eigenschaft Beschreibung@keyframes Legt die Eigenschaften der Animation fest.animation Eine übergeordnete Eigenschaft, in welcher Sie alle folgenden in Kurzform
verwalten können. Lediglich die Eigenschaft animation-play-state muss explizit gesetzt werden.
animation-name Legt den Namen der @keyframes Animation fest.animation-duration Legt die Dauer einer kompletten Animation fest. Im Standard ist der Wert
auf 0 gesetzt.animation-timing-function Legt fest, wie das Geschwindigkeitsverhalten innerhalb der Animation ist.
Im Standard wird der Wert ease verwendet, bei dem die Animation etwas langsamer startet, dann schneller wird und zum Ende wieder abbremst.
animation-delay Legt die Verzögerung fest, bis eine Animation startet.animation-iteration-count Legt die Anzahl an Durchläufen für eine Animation fest. Im Standard wird
diese nur einmal ausgeführt. Sie können entweder einen numerischen Wert oder für eine Animation ohne Endezeitpunkt angeben.
animation-direction Legt fest, wie die Animation abgespielt wird - im Standard Der Wert SJ^^RHsoielt die Animation für die unaerade Anzahl an Durchläufen in der normalen Richtung und für die gerade Anzahl in umgekehrter Reihenfolge ab.
animation-play-state Gibt den Zustand der Wiedergabe an. Dieser kann entweder oder sein.
Fazit: Mit den Animationen innerhalb von CSS3 kann bereits viel erreicht werden. Die Funktionen sind von Ihrer Grundstruktur sehr einfach, jedoch sind damit umfangreiche Animationen möglich.Dies können Sie natürlich problemlos mit weiteren Funktionen aus dem Leistungsumfang von CSS3 und HTML5 kombinieren und so beispielsweise ein Objekt bewegen und dieses gleichzeitig in der Ausrichtung verändern. Sobald die Browser-Entwickler die Funktionen komplett implementiert haben, können diese auch flächendeckend eingesetzt werden. Bis dahin benötigen Sie zum einen eine Analyse mit einer Bibliothek wie Modernizr und zusätzliche Aufrufe für die lokalisierten Versionen der einzelnen Browser-Herstell er. Dies bläht den Programmcode nicht nur unnötig auf sondern sorgt natürlich auch für zusätzliche Fehlerquellen, da Änderungen an bis zu vier Stellen nachgezogen werden müssen.
80 webdesigner 04/2013
WEB-GALERIE
Auf annays.com werden die besten Titel- Einstellungen von Filmen präsentiert. Alle Screens sind nach Jahren sortiert und können bequem über die eigens eingerichtete Navigation im Header durchstöbert werden. Bei der Gestaltung der Seite hat man sich für ein schlichtes, plakatives Design mit einem guten Schuss „Retro" entschieden. Die zusammengetragenen Screens sind ein ungeheurer Fundus für Vintage-inspirierte Screendesigns. Die typischen Stilelemente praktisch jeder Epoche leben hier wieder auf. Die Seite würdigt damit einen Bereich in der Gestaltung von Filmen, der ansonsten nur zufällig wahrgenommen wird.
MOVIE TITLE STILLS COLLECTION
Online Shops
HOHE /1929 ^^^1939 ^^/l949 ^®/l959 ^^1969 BESTEHN
MOVIE TITLE STILLS COLLECTIONFILM HOIR 1970 11979 1980 11989 1990 11999 200012009 201012019 UPDATES
B
190P■
■
2013 I
ACOUCCÎION CONTAINING HUNDREDS OF
MAIN TITLES FROM FEATURE FILMSfrom CLASSIC ji>4 RECENT FILMS
I m?0IH Cf NI UR V rox • COIUMBIA PICTURES • Ml TRO GOIDWYN MATER • PARAMOUNT PICTURES
RKO RAOIO PICTURES UNIVERSAL PICTURES WARNER BROS tad mftty ethtr studios
TRAILER TITLES ‘ Z S S S rX * “THE ENO" TITLES'PICK YOUR F A W lT I DECADE ►ROW THE TOP OF THIS FACE AMD START EXPLORING
1M4 444*0 M llNn 4 t c n v » r » i
n v « 4 « f t 4H H i n
IIUL9
-C3J M 'UX1mm
TITLE SCQUCNCCS
I a • • I • I • • I
LECERCLEROUGE
C H IS U M
i iINDAGINE
SU UN C1TTAD/WO M W SO**A
Dl OONI S O ET TO! GIRASOL!
iWvWA4KCTU«Sih itm i
wAAfctftttOSArVCK A*r-»C« ft**» 9 Met 1
Tiatfv m t 1110*1114 *I W I I W 1 %U
» JM • • f M fwitmmrnm •i w • • m-«s ♦
w w » w i I m « • Wbwy P— T « « Ob«»HM • » 1% Mtt
m n .**• I--** !
IMTI tmmm • Cwn h i ) • ftM fl Mr
i • l t d l i*<iMl V w i • Ai f t JM • Cr» f r i IW « •
EHr T h e [ N p WARMER BROS. •«?
TtTT Of TW u r j j t i r u w t n m j I M I IM l| • T *r w \ « r mj U M f i l lV i Q w h n n r* t»«0> U f f » » R( I W l«M i»rM N «raiilU 4• c»«n*4 i * i m i • n w m i «im t • jwni • uK>*ai m w H W H lW ’ iV 'W * I M *«< IN h^ » » l ( / » I • « I <1 *
O K I l%44( • 11014 l»«7 ; » «*» Mm«i>11'* 1*14» • Tirrrtvy B«*r | l « i r IU1| . jmmrx» i / w * 11 V U c o m ■ U y a il il%ro I1T?) • T*r C K » i n »H?? 1 VKH • l* w 9 + 0 •«* fuM i ) i l iN >00*1 • MWMM |l|r< • taw* JWM/My 11M4 I M il • U i « iw M w » |t%*1 IMOi illH’-IJMl • P*»»«4lltM‘.'Wn • f»4 M*« #M*»l»44-l**«l • f W Mr* I III»-»»¿I • '•» > I/O*» »All > I • »IO *W W B * y » « iM ll 'l l 'l li • Kl * « i I)
h ö iie üir WHO GAIWTN HAM »70
11919
»IASI THeOUTOfToujneRS
♦ I1M 1114 • l « M I V l • l « M I W • I W I1 U • ) W I4 M • W M ww w i « IK A k4M • IM 1 I4M » » « > » > I4 W 1914 * I M M H 1 • I4 tt ( l * 1M4-1M* « • lM 9t • l|r*>l«M • I P S « ! » * • II^J* k X e i » «M 4 -IM * • I N M t t l ♦ IHO-I004 • I H M H t • JOOO-tt* ♦>4*1 . >01+ N U • * * * * * * • tm m m m • im m rn —— >■»»«*« • 6 m • f t t . *«l M M Mm* CiMtv« . T«f *» «•«•••» 4«»» • tMUW • t%#
CmA*4 • T v «« ( f# M M M «l * W h l « UM« * !*«•§ • ChXtMHH IIMWiri
4#40 M n I««»frrr-
rou.0* t>< ccuccT»0NVPIM fl Q 1 • T M «r • » M i » »
Ym ' mH
FOC*U«Jto«r€H*Af
O K « ’ »
# iMMai ftHMlHMI
* * X T K>•» *4r»«M « 4«**4iM im *n w »n «>| «
III I(4w l4 «*| «w |
14» C4» COWIMCT «*4 N ri 41 MM ft «S04 tt fW* M H
«•OV/I fHilWWJkCI
TUTORIALDer perfekte HTML-Newsletter von Andreas Hitzig
HTML-Newsletter gestaltenIn diesem Workshop zeigen wir Ihnen, wie Sie mit einem gut gestalteten Newsletter eine Vielzahl von Kunden und Interessenten erreichen.
St«ll«n Si* sich*!, dass Si« aii vuM*hd com zu lhr«n Email Kontakt«* Nn2uiüg*rt. damtt d l«* Mails nicht im Spamordn«! landan.
GRATIS LIEFERUNGfü r all© A rtik e l
ans ghgnc
WDW Hüternn o > *
W 3D ♦ BIU-R4Y DkX> IV /VIUSIK SPIELE BÜCHER MttrfRTIKEl
>✓
ES IST UNSER 1. GEBURTSMG!UM DAS ZU FEIERN, GIBT ES DAS HIER:
20% RABATT AWJEDEN ZWEITEN ARTIKEL!
RABAn ENDET AM MITTWOCH, DEN 27. FEBRUARRABATT WIRD AUF D€N GÜNSTIGEREN DE» &EIDEN GEKAUFTEN ARTIKEL
ANGEWENOET UND G*T F0« AHES. AUßER IPODS UND G€SC*ENKGUT5CH£lNE
HIER KAUFEN ODER UNSERE EMPFEHLUNGEN UNTEN ANSCHAUEN >
I
w *
W S I ’
f TDavid Bow ieThe Next Day (Deluxe Edition)11.99 4The Next Day9.99 €
T H E 2 0 / 2 0f K » I a i ( M C I
Ju stin Timber lakeThe 20/20 Expenence (Deluxe Edition)11.99 4The 20/20 Expenence9.99 i
The StrokesComedown Machine 9.99 t
D e p e c lte M o d eDelta Machine (Deluxe Edition)12.99 4 Delta Machine9.99 4
• ••y ) S o u n d C i t y/ ■ am raro-*
M t t i e O I I O l N O T A » B606HmtsExile(Deluxe CD» DVD) 13.99 4E»ieii no <f_______
DidoOirl Who GotAway (Deluxe 2CD) 13,99 4Girl Who Got/wary
SoundtrackSound Citf Real to Reel music by Dave Orohl 11,99 4
Jirn i HendrixPeople Hell & Angels9,99 4
M it einem Newsletter bleiben Sie in Kontakt mit den Besuchern Ihrer Website. Abhängig von der Art der Inhalte kann das Ziel des Newslet
ters sehr unterschiedlich sein: von der Verbreitung aktueller Nachrichten bis hin zur Information über neue Produkte oder Sonderangebote ist alles möglich. In diesem Workshop zeigen wir Ihnen, wie Sie den Newsletter optimal gestalten und technisch umsetzen.
O 1 *n alte c*es Newsletters festlegenI Bevor Sie sich an die technische Umsetzung
des Newsletters machen, sollten Sie sich genaue Gedanken machen, welche Inhalte Sie Ihren Lesern mit- teilen möchten. Abhängig vom Textumfang und der Anzahl der Bilder sollten Sie sich eine grobe Skizze anfertigen, die Sie anschließend in den nächsten Schritten umsetzen.
Ein Newsletter bietet dem Leser aktuelle Informationen, beispielsweisezu Sonderaktionen in Ihrem Webshop.
/"V*} Aufbau mit Tabellen\ J ^ lm Vergleich zu einer klassischen Webseite stehen Ihnen bei einem Newsletter deutlich weniger technische Möglichkeiten zur Verfügung, die Elemente auf dem Bildschirm anzuordnen. Vor allem die Positionierung mit Hilfe von CSS ist innerhalb des HTML-Modus der meisten Webclients, aber auch der E-Mail Programme nicht so perfekt ausgeprägt wie innerhalb des Browsers. Aus diesem Grund sollten Sie für die Aufteilung einer Newsletter-Seite den klassischen Weg über die Tabellen gehen.Generell ist die Unterstützung von CSS über div-Tags gerade in den älteren E-Mail Clients nicht komplett umgesetzt. Sie sollten deswegen Formatierungen immer über inline-Tags mitgeben und auch diese nur so sparsam wie möglich einsetzen, denn auch in diesem Fall ist die Unterstützung nicht vollständig gegeben.Für die Aufteilung des Bildschirms verwenden Sie am besten verschachtelte Tabellen mit einer festen Breitenangabe. Auf diese Weise können Sie im Übrigen auch problemlos Leerräume zwischen zwei Bildern
82 webdesigner 04/2013
TUTORIALDer perfekte HTML-Newsletter
oder einem Bild und einem Text erzeugen. Sie fügen dazu lediglich eine weitere Tabellenzelle mit einer festen Breite ein. Die Umsetzung geschieht über den Parameter width unter Angabe der Breite. ►
f'V *3 Die Breite des Newsletters+ D Es gibt mehrere Wege, die Breite des Newslet
ters auf dem Bildschirm festzulegen. Entscheidend ist in erster Linie, ob Sie für bestimmte Elemente eine fest vorgegebene Position auf dem Newsletter vorgesehen haben. Falls dem nicht so sein sollte, können Sie den Newsletter mit Hilfe der Angabe width="100%" über das gesamte Fenster verteilen.Haben Sie im Design jedoch Elemente mit einer festen Breite vorgesehen, dann sollten Sie eine bestimmte Breite vorgeben.Für die klassische Ansicht auf einem Desktop-PC werden normalerweise 500 bis 600 Pixel verwendet. Diese können Sie entweder über eine absolute Angabe setzen oder Sie verwenden ein Bild mit der entsprechenden Breite, das Sie in die Zelle einerTabelle einfü- gen.Immer mehr Anwender lesen Ihre Nachrichten auch auf einem mobilen Endgerät und den entsprechenden E-Mail Clients. In diesem Fall sollten Sie beachten, dass nicht alle Geräte selbst im Querformat eine Breite von 500 bis 600 Pixel bieten und aus diesem Grund den Newsletter entsprechend skalieren werden. Der Benutzer muss sich in diesem Fall die Seite vergrößern, um alle Informationen problemlos lesen zu können. ►
/ "V ^ D ie richtige Maßeinheiti*Wie auch bei einer klassischen Website gibt es
auch beim HTML Newsletter mehrere Dimensionen für die Breitenangabe. Wie bereits gesehen sind die gebräuchlichsten Optionen der prozentuale Wert oder eine Angabe in Pixel. Aus der Erfahrung heraus sollten Sie letztere Variante bevorzugen, da nicht je der Client mit den Prozentwerten auch sinnvoll umgehen kann. Nachdem Sie sich einmal auf eine Gesamtbreite für Ihren Newsletter festgelegt haben, können Sie im nächsten Schritt mit der Aufteilung beginnen und die einzelnen Tabellenzellen mit einer absoluten Pixelangabe versehen.Lediglich bei der Angabe der Schriften wäre es eine Überlegung, diese in em statt in Pixel anzugeben. Da jedoch auch diese Angabe unterschiedlich interpretiert werden kann, sollten Sie auch an dieser Stelle am besten die Durchgängigkeit beibehalten und auch die Schriftgröße mit Hilfe einer Pixelangabe festlegen.
1 X t K r w I K J
ES IST UNSER 1. GEBURTSTAG!UM 0A3 ZU * K fH C W B 0A3 NCR.
20% RABATT AU?JEDEN ZWEITEN ARTIKEL1
•àiAn MÛft AM
M f« «AUH N t t H I U t f l f fU m K L««Ü lP < (M I N >
m 4» m m m m i i i
{ft **«»■ ■* 9 i* » »*-i
•J
WhM * •4t
Jj
D i* ?rjp A i l i i t d r i t Si r Itorr
CjDSauJUkMB9 __fit\ /«i /0*X» « p j i r n i m «
hm kikti". yawfttttjdIO IIIM ipArrn »c r .T
_ a
IW M•1 ■«»» fc«« •»
—* K M . k «■ « I
J -é êm
f'V C Der Einsatz von CSS\ J Wenn Sie für die Gestaltung Ihres Newsletters bestimmte CSS-Elemente benötigen, sollten Sie sich vorab über den Implementierungsstand innerhalb der einzelnen Web- und lokalen E-Mail Clients informieren. Eine gute Quelle hierfür stellt die Website Campaign Monitor (http://www.campaignmonitor.com/css/) dar. Auf dieser finden Sie eine Übersicht der zehn beliebtesten und verbreitetesten E-Mail Clients und deren Unterstützung von CSS-Elementen. Damit jedoch nicht genug: In einer Offline-Variante als PDF oder Excel-Datei gibt es insgesamt rund zwanzig Clients, die untersucht werden.Ein erster Blick in die Liste zeigt eine flächendeckende Unterstützung der zentralen Tags für die Festlegung der Schrift und der Schriftgröße über die Elemente font-family und font-style. Wenn Sie diese verwenden sollten Sie jedoch auf die Kurzvariante einer Definition verzichten,
Das Basislayout bauen Sie, wie in diesem Beispiel ersichtlich, m it Hilfe von Tabellen auf.
Outlook zeigt im Standard keine Bilder zu Newslettern an.
04/2013 webdesigner 83
TUTORIALDer perfekte HTML-Newsletter
oooo
Überprüfen Sie im ersten Schritt, welche
CSS-Elemente die wichtigsten Darstel
lungsprogramme unterstützen.
oo
oo
o
wie dies im Bereich der Webseiten üblich ist sondern die Angaben entsprechend komplett ausformuliert mitgeben.Das Gleiche gilt im Übrigen auch für die Angabe der Schriftfarbe in Form eines Hex-Codes. Nutzen Sie in diesem Fall immer die Langversion mit den sechs Zeichen und nicht die Kurzversion, also immer #FFFFFF anstelle von #FFF.
Verlinkungen integrierenV^Ein Newsletter enthält in der Regel eine Reihe
von Verlinkungen, dies auf Seiten innerhalb oder außer Ihrer Website verweisen. Zusätzlich kommt normalerweise noch ein Link hinzu, mit dem Ihre Leser den Newsletter wieder abbestellen können.Leider interpretieren nicht alle E-Mail Clients den HTML- und CSS-Code gleichermaßen. Einige von diesen Readern haben sogar die Eigenart, das vorgegebene Layout nicht zu übernehmen oder mit eigenen Standardwerten zu überschreiben. Teilweise hilft es jedoch, die Informationen zweifach mitzugeben: zum einen innerhalb des style-Tags und zum anderen über ein zusätzliches span-Tag.
<a href="http://www.meinewebsite.de" style="color:blue;"xspan style="color:blue;">hier steht der Text vom Link...</span></a>
Auch der hover-Effekt, der auf klassischen Websites gerne für die Anpassung einer Verlinkung verwendet wird, funktioniert in den meisten E-Mail Clients und Web-Mail-An- sichten nur eingeschränkt. Die aktuellen Outlook Versionen 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 entsprechend durch eine alternative Farbwahl hervorheben. Öffnen Sie gesetzte Verlinkungen immer in einem neuen Fenster oder Tab, nicht jedoch im gleichen Fenster. Ansonsten ist die ursprüngliche E-Mail verschwunden, falls der Newsletter über den Browser gelesen wird. Im Falle einer Verbindung auf Basis von https müssen sich die Leser anschließend sogar unter Umständen neu anmelden. Für die Öffnung des Newsletters in einem neuen Fenster verwenden Sie einfach mit Hilfe des Parameters torget="_blank"eine leere Seite als Ziel.
/"V ^M ehrere Sichten\ J / E-Mail Anbieter mit einem Webclient zeigen eine HTML E-Mail normalerweise nicht direkt an, sondern stellen aus Sicherheitsgründen immer nur die Text-Version dar. Damit können nicht unbemerkt Inhalte geladen werden. ▼
3 * a ^ - 0 .- g O □ u * s ü ^ ■• i i m i m m
Nvc » »11 flt 77 M
*/ c.MK VMMtMr an ftwai-w wraft juma—iG TSC. .jJV vrrw fc trW
^ ÖW J» iMrtwr
UM« K M U . .4(1(1 M » ,•1« l u t « f l U l ) X it f '.t H «rftAlOM 5i*
f* m t ’ tf :i*. h i » M i w i n m H 4 •* « u m « >+ ( m i h »w ir« C i C r»»l n t « i l i
i c g K ; : i ? « : : « : is ; Am ; « f o i W K i t s ; . « * : « 4 W N U a jt » : '• 'in»: : ; »Comi M M tn t « ; m m : t< 9 mWC M »IM n x fw Anin;, K»u i t n ««a Wi i m . » v « i n « n u i n i M M « t r m .
tu Ml lu H l f I
U U ...M » IMU.J fr m .. rMdli.MlMUaA, »¿»ürfcll. *
taMiM» ill (;u*s »;• k;«:;fei
lu f« r • >u4iU
h i u l u - . t ; J W t W I
A-XJT3 Vl*t* » M i l «
^ ,M , ~ » « -i, • ■-«J >1»;c n i f f i r i i U i ; i u -:m i i i u u v u
Bieten Sie eine alternative Ansicht für alle Reader, die im Standard keine HTML E-Mail anzeigen.
8 4 webdesigner 04/2013
TUTORIALDer perfekte HTML-Newsletter
Aus diesem Grund ist es jedoch für Sie als Designer des Newsletters besonders wichtig, eine alternative Sicht auf die Inhalte auszuliefern. Dazu sollte Sie zwei Alternativen anbieten: zum einen eine Textversion des Newsletters, bei dem alle gestalterischen Elemente fehlen und zum anderen eine Version, die als HTML- Seite existiert und auf die Sie aus dem Newsletter heraus lediglich verlinken.Die reine Text-Version haben Sie im Normalfall recht schnell angelegt. Entfernen Sie aus Ihrem Newsletter alle gestalterischen Elemente. Am Ende sollte dieser nur noch Text und Verlinkungen enthalten.Wenn es der Aufwand zulässt, sollten Sie jedoch zusätzlich eine Web-Version Ihres Newsletters erstellen, die über einen Link aufgerufen werden kann.Amazon verschickt beispielsweise im Rahmen des Amazon Family Clubs jede Woche einen Newsletter mit neuen Informationen. Diese Angebote finden Sie auch gut integriert in die Amazon-Website, wobei die Seite direkt aus dem Newsletter heraus verlinkt ist. ►
amazon
Q Darstellung von Bildern \ J O N ic h t nur die Web-Clients bieten im Standard keine vollständige Sicht auf die Newsletter an, auch klassische E-Mail Programme extrahieren aus Sicherheitsgründen die Bilder aus einer E-Mail und damit auch aus einem HTML-Newsletter.Einige E-Mail Programme bieten zwar die Darstellung von Bildern für vertrauenswürdige Absender an, wobei diese Funktion jedoch explizit aktiviert werden muss.Aus diesem Grund sollten Sie die Bilder in Ihrem Newsletter immer nur als ergänzende Information einsetzen. Damit kann der Leser direkt einschätzen, ob sich das Nachladen der Bilder lohnt und zugleich die wesentlichen Inhalte des Newsletters trotzdem lesen. Dieses Wissen sollten Sie auch in die Gestaltung Ihres Newsletters mit einfließen lassen und alle irng- Tags immer mit einer festen Breite und Höhe versehen. Auf diese Weise stellen Sie die optisch korrekte Darstellung des Newsletters sicher, auch wenn die Bilder nicht mit angezeigt werden.Pflegen Sie zusätzliche das ALT-Tag eines Bildes, damit der Leser bereits im Vorfeld über den Inhalt des Bildes informiert ist.Die Auslieferung der Bilder sollte von Ihrem Webserver aus erfolgen, damit der Leser bei einer genaueren Untersuchung des Newsletters vor dem Laden kein ungutes Gefühl bekommt. Damit Sie nicht den Überblick verlieren, trennen Sie am besten die Bilder und den Newsletter, indem Sie für die Bilder ein eigenes Verzeichnis anlegen.
Amazon Family • Angebote und Rabatte'/ -r* Nc* M » M r « a m W w » fcyssn u m m « M i
^ « i i ^ . io v leurtn fca hm «Man i t tfiw i w m »y/ \ AHlCM 4 OM tM l M
'Z T (Sparon)=i 0*n trarc-Co* trom w.
H..*«* <*4« M r t M k ]
\ ' 1 m o gr t M i m c>i Um »*w tm m 4, —y >*>•.*« Um jfcWH C*4m* k W « » »»* « W » » » I m
Am m m Y f . « t o A lt iu r fc - r ( h « w v r A / - j r t « a lr 4«*r t f i v h r
»K I O « 4 *»» .
H W w a r w a l M M « « * ) S T U t t T
V'
iee««eww<*d»
I rnm u + m*m <rn4m m m
Bieten Sie eine alternative Ansicht für alle Reader, die im Standard keine HTML E-Mail anzeigen.
/^VQSkalierung von Schriftenv/Z ^ G erad e bei mobilen Endgeräten wie dem iPhone und diversen Android Smartphones kann es durch eine Skalierung der Schriftgröße zu ungewünschten Verschiebungen innerhalb des Layouts kommen. Sie können dies zwar nicht komplett verhindern, jedoch zumindest beim iPhone einschränken. Dazu gibt es die CSS-Eigenschaft -webkit-text-si- ze-adjust. Wenn Sie diese auf none setzen, wird die Schriftgröße nicht angepasst. Im Standard steht dieser Wert jedoch auf auto und es findet somit automatisch eine Anpassung der Schriftgröße abhängig zur Auflösung statt. Dies macht vor allem bei den neuen hochauflösenden Displays Sinn, da mit diesem Wert eine bessere Lesbarkeit gewährleistet wird.
1f\Umfangreiches testen\ J Die Anzahl der verschiedenen Darstellungspro
gramme für eine E-Mail und damit auch für einen Newsletter nimmt stetig zu. Dies liegt nicht nur an den neuen mobilen Endgeräten wie iPhone, iPad oder den Android- Geräten, sondern auch an der Vielzahl von webbasierten E-Mail Readern und verschiedenen Versionen der Desktop E-Mail Clients. Campain Monitor zeigt eine Auswertung von Ende des letzten Jahres. In dieser nehmen die iOS-Geräte den Spitzenplatz ein, gefolgt von Microsoft Outlook, Hotmail und Apple Mail. Gerade bei Microsoft Outlook und Apple Mail gibt es jedoch verschiedene
v r *Matotö tt*wert> fTTi <
üomunrc
Spar-Äbo^ «<w«n
m
Kinderwagers - 2 0 %
Me tu TereAngebot der», ^ Woche . ’ * V vv 1 ---
04/2013 webdesigner 85
TUTORIALDer perfekte HTML-Newsletter
Versionsstände mit unterschiedlichen Implementierungen, was das Testen auch nicht einfacher macht.Es gibt verschiedene kostenlose und kostenpflichtige Dienste, welche die Darstellung eines Newsletters simulieren und das Ergebnis in einer Übersicht darstellen. Kandidaten in diesem Umfeld sind beispielsweise Litmus
(http://litmus.com/), Preview my Email (http://pre- viewmyemail.com/) oder Email on Acid (http://www. emailonacid.com/free-email-test/) Die meisten Dienste bieten eine eingeschränkte kostenlose Nutzung an, bieten jedoch nur in den kostenpflichtigen Zahlungsplänen eine vollständige Analyse an. ▼
Vor dem Versenden sollten Sie Ihren News
letter a u f verschiedenen Plattformen testen. Dies übernimmt
beispielsweise Litmus automatisiert für Sie.
Y o u r E rn a « T e s t r =Ktfr'l
VOMT M C our* ( U l r* v * rt«4 f * j r ii*»*«« f r « « pl*n K i r n mer# jb o o t why you K d J I « « B M I « cfc«ntt or v it* tn » »n u n « » » f « 10
> «Vf n x « v n r . j k m t n i O M '•K'k >) 11 « M i n
«0
>«<x
M M I
MK m*f
IM
» S
ir^rsMi
P e * -' i r O u l i M A tPr«vttw« m
erLwyJmg aa
SutH«ct l»rv«
Cod« w utytb |
Shftrmo
A
4L
H M
10Vorsicht SpamLeider landen Newsletter immer wieder im
Spam-Ordner des Lesers, auch wenn dieser die Informationen explizit angefordert hat. Ein Allheilmittel gibt es für diese Situation nicht, Sie können jedoch eine Reihe von Vorkehrungen treffen, damit dies nicht auch Ihrem Newsletter passiert.Die wichtigste Maßnahme ist eine klare und einfache Struktur der Informationen. Verwenden Sie nicht zu viele Bilder und gehen Sie auch bei der Definition der META- Tags im Kopf des Newsletters mit Umsicht vor.In manchen Fällen spielt auch die Länge der E-Mail eine Rolle. Nicht nur aus diesem Grund sollten Sie die jeweiligen Informationen im Newsletter nur anteasern und anschließend auf die entsprechende Webseite innerhalb Ihrer Webpräsenz verzweigen.
Fazit: Die technische Gestaltung eines Newsletters ist für HTML-Entwickler nicht allzu komplex. Die Schwierigkeit besteht vielmehr darin, den Newsletter technisch so einfach wie möglich zu halten. Wenn Sie dies entsprechend berücksichtigen, steht dem Erfolg Ihres Newsletters technisch nichts mehr im Wege.
Beispiele für Newsletter
Es gibt eine Reihe von Archiven und Generatoren für Newsletter. Wir haben einige interessante für Sie zusammengestellt:• GraphicMail (http://www.graphicmail.
de/site/features_templates.aspx): Über 300 kostenlose Newsletter-Vorlagen
• Newsletter Examples (http://www.news- letter-examples.com/): Archiv mit bekannten englischsprachigen Newslettern, wie Bose oder Apple.
• DesignerFX (http://designrfix.com/ins- piration/newsletter-designs-60-great- examples): Blogartikel mit über 60 Beispielen
• TopDesignMag (http://www.topdesign- m a g .co m /3 5 -su p e rb -e xa m p le s-o f- good-looking-newsletters/): Blogartikel mit 35 interessanten Beispielen
N E W S L t l t R r r X A V I P L -1—v..)
P— — — — — — ^
8 6 webdesigner 04/2013
WEB-GALERIEOnline Shops
C îo rd o n B o w enFounder
M m Cordon
Jo h n P. M c C ia rry , Jr .Found«
Mmt jo t *
rncgarrvbowen London appointed to global Toblerone account
Modern und aufgeräumt präsentiert sich die renommierte amerikanische Werbeagentur megarrybowen auf Ihrer Webseite. Als Header prangt das Logo der schweizer Schokoladenmarke Toblerone auf der Seite, dem sich die Londoner Niederlassung widmet. In der kleinen Galerie darunter werden weitere Kooperationen angezeigt, deren Bilder sich nach einem Klick auf das Vorschaubild in den Header laden.Die Website ist als Single Page aufgebaut, deren Abschnitte sich über die Navigation ansteuern lassen. Im Abschnitt „Work" werden erfolgreiche Projekte gezeigt, die mit gut produzierten Dokumentationsfilmen zu den Projekten verlinkt sind. Nicht nur auf die Optik sondern auch auf die Qualität der Texte wurde viel Wert gelegt. Im Abschnitt „About us" erfährt der Besucher, wer mc- garrybowens eigentlich ist. Sehr sympathisch setzen sich die Gründer der Agentur unter „People" mit einem gemeinsamen Foto in Szene.
W i i
Wallpaper*
RATGEBERWas ist eigentlich Google AdWords? von Tobias Henke
Child-Themes in WordPressSeit WordPress 3.0 gibt es eine interessante, neue Funktion namens Child-Themes, die von den meisten Usern lange herbeigesehent wurde. Wir sagen Ihnen, wie Sie ein Child-Theme erstellen und welchen Nutzen Sie davon haben.
ordPress hat als Content-Ma- nagement-sys-
tem zwar Grenzen, was das Thema Individualität angeht, aber diese sind recht
weit gesteckt. Das gilt selbst dann, wenn man kein komplett eigenes Theme programmiert. Jedem, der sich halbwegs mit WordPress auskennt, gelingt es sehr einfach, eine individuelle Seite zu gestalten. Hier gibt es zahlreiche Möglichkeiten, auf die später noch eingegangen wird. Bis zur Version 3.0 v on WordPress musste man sich als User entscheiden, ob man das individuell ausgestaltete Design seiner Seite behält, oder ob man die mühevoll er-reichte Individualität vorübergehend aufgeben und das Update durchführen soll. Im Zweifel musste man sich dann für das Update entscheiden, gerade wenn es darum ging, mit dessen Hilfe Sicherheitslücken zu schließen.Seit der Version 3.0 wurde dieses Dilemma gelöst, da die Entwickler es möglich machten, sogenannte Child-The- mes zu erstellen. Wer ein Child-Theme programmiert, hat zwei Vorteile: Er muss kein komplett neues Theme programmieren und die individuellen Änderungen und Anpassungen gehen bei einem Update nicht verloren. Child-Themes sind von den sogenannten Parent-Themes abgeleitet Sie nutzen deren Funktionen und Dateien.
Auf einen Blick• Mit Hilfe eines Child-Themes gehen eigene Änderungen nach einem Update nicht verloren
• Um ein Child-Theme anzulegen wird lediglich eine neue Style-CSS benötigt.
•Child Themes sind abhängig von Ihrem jeweiligen Parenttheme.
• Man kann mit einem Child-Theme bei Bedarf auch ein eigenes Template als das im Parenttheme verwenden.
•Je mehr Funktionen ein Parenttheme hat, umso mehr kann man an dem vom Parenttheme abhängigen Childtheme verändern.
Das kann ein Child-Theme
Child-Themes nutzen dieselben Funktionen wie die Pa- rent-Themes, sie sind also von ihnen abhängig — ein Child-Theme braucht daher immer ein Parent-Theme. Was genau vom Parent-Theme übernommen wird, hängt davon ab, welche Funktionen das Child-Theme selbst be-reitstellt. Besitzt das Child-Theme beispielsweise keine eigene functions.php, so wird die functions.php des Parent-Themes genutzt. Andersherum wird eine bestehende functions.php des Child-Themes zusätzlich zur functions.php des Parentthemes geladen. Wenn Sie über PHP-Kenntnisse verfügen, haben Sie natürlich mehr Möglichkeiten, Ihr eigenes Child-Theme zu gestalten. Aber um ein Child-Theme zu erstellen sind PHP- Kenntnisse nicht zwingend erforderlich. Die Entscheidung, wie umfangreich man sein Child-Theme gestalten möchte, liegt bei jedem selbst.
So erstellen Sie ein Child-Theme
Um ein funktionierendes Child-Theme zu erschaffen, muss man mindestens eine neue Style-CSS im Theme- Ordner der eigenen WordPress-lnstallation erstellen. Dies reicht aus, um zu verhindern dass das Child-Theme
webdesigner 04/2013
RATGEBERWas ist eigentlich Google AdWords?
bei einem Update überschrieben wird. Für die Style-CSS benötigt man folgende Befehle:
Theme Name: Name des Child-Themes Theme URI: Die URL des Child-Themes Description: Beschreibung des Child-Themes Author: Der Name des Autors Author URI: Die URL der jeweiligen WordPress-Seite Template: Der Ordnername des Elternthemes Version: Die jeweilige Version des Child-Themes Tags: Hier muss der Name des Child-Themes erneut genannt werden. ►
TWentv TW«iv» cmiä: stviMh«et [style.css/
f »
The ne M d ie : T A e n ly T A e lv r O i l dThe ne URI : h l . p : / / e x d n p le c u ivD e s z n p T ic r : C - i l d i h =re f o r “ he T w e n ty T w e lv e T h e TeA u t - o r : Y :u r ^ani= h e -e/V u t -o r U IU : h t i p : / /C H û r p ic c o rv :D o u t /T ^ m * l« t r t A ^ n ty ~ w « lwrV ^ r < in n : a . i a
V
fc im c o r t u r i i * . . / t w c n t y T w z l v c / s t y le . : s 3 * ) ,
hod y \ü d ik g r .u n d - c u l u r :
>
4 M ehr ist für die Programmierung eines Child- Themes nicht nötig.
Die Bezeichnungen für Theme Name, Theme URI, Descrip-tion, Author, Author URI und Version können mit beliebi-gen Namen bezeichnet werden. Nur unter „Template" muss exakt der gleichen Namen des Pa- rent-Themes auftauchen.Durch den Befehl „@import url(,../twentyten/style.css');" wird die Abhängigkeit des Child-Themes vom Parent- theme klar. Durch diesen Befehl wird WordPress sozusagen ver-deutlicht, auf welches Parenttheme sich das jeweilige Childtheme bezieht. Der Befehl „@import" wird am häufigsten verwendet, da es so am einfachsten ist, die Style.CSS des Child-Themes einzubinden.Wenn Sie alles richtig gemacht haben, müsste Ihr Child- Theme im Theme-Ordner auftauchen, der dann ungefähr so aussehen sollte: ►
C H I L D
Tw enty Tw elve Childu i '.if ■« » « m i l l
CMINnt * N to#* »WM M ««
£2dL3*S* w* B+m
Tn«nt)*âttûsc£m!u2
4 Jetzt ist das Child- Theme aktiviert
Das Childtheme kann dasselbe wie das Parenttheme
Bei Bedarf können Sie das Childtheme jetzt so verändern, wie Sie es gerne möchten. Man kann dieTemplate- Dateien, den Aufbau und das PHP-KnowHow des Basis Themes nutzen. Das neueste Basis-Theme ist TwentyT- welve. Wer möchte, kann sich ausschließlich um das Design kümmern und zwar in beliebigem Umfang. Eine sehr einfache Änderung ist es, wenn man beispielsweise die Hintergrundfarbe ändert. Theoretisch kann man natürlich auch ein Design zu kreieren, so dass es mit dem Parent-Theme überhaupt nichts mehr zu tun hat.
Gestaltungsfreiraum ausnutzen
Neben der Style.CSS haben Sie wie gesagt noch zahlreiche weitere Möglichkeiten, um Ihrer Seite die gewünschte Individualität zu verleihen. Sie haben in Bezug auf die Veränderungen genau dieselben Möglichkeiten, wie wenn Sie ein eigenes Theme erstellen würden. Auf
diese Weise können Sie beispielsweise den Header, den Footer oder die Sidebar nach Ihren Wünschen gestalten. Wenn Sie noch kein Child-Theme angelegt haben, sondern Ihre Änderungen bisher einfach innerhalb der Vorlagen des Parentthemes gemacht haben, können Sie diese einfach kopieren und in das Childtheme einfügen. So sind Ihre Änderungen dann vor Überschreibungen bei einem Update geschützt. Mit einem kleinen Kniff können Sie innerhalb eines Child-Themes sogar an der Hauptdatei, also an der index.php Änderungen nach Ihren Vorstellungen durchführen. Nachdem Sie diese aus dem Parenttheme kopiert und in das Verzeichnis des Child-Themes kopiert haben, müssen Sie sie lediglich umbenen-nen. Statt index.php heißt die Datei im Childtheme dann zwingend loop.index.php. Die Abhängigkeit des Child-Themes von dem jeweiligen Parenttheme sollte man immer im Hinterkopf behalten. Es ist nämlich nicht möglich einem Child-Theme Funktionen zuzufügen, die das Parenttheme nicht unterstützt. Wer möglichst viel verändern möchte, sollte daher auch ein Theme mit möglichst vielen Funktionen und Möglichkeiten als Parenttheme wählen. In diesem Zusammenhang ist oft von sogenannten„Framework-Themes" die Rede
04/2013 webdesigner 89
RATGEBERWas ist eigentlich Google AdWords?
Anpassung der functions.php
Wenn das Child-Theme keine eigene functions.php besitzt, wird die functions.php des Parent-Themes genutzt. Andersherum wird eine bestehende functions.php des Child-Themes zusätzlich zur functions.php des Parent- themes geladen. Das besondere an der functions.php ist, dass sie nicht wie beispielsweise die style.css Datei automatisch in einem Child Theme überschrieben wird. Wenn Sie eine eigene functions.php Datei für Ihr Child Theme anlegen, werden die Inhalte hier zusätzlich zu den Inhalten der functions.php Datei des ParentThemes aufgerufen oder besser gesagt direkt vor den Inhalten der functions.php Datei des Parent Themes. Auf diese Weise können Sie mit Hilfe der Child Theme Option zusätzliche PHP-Funktionen zu einem Theme hinzufügen, ohne dass diese bei einem Update des ParentThemes verloren gehen.
<titlex?php/** Print the <title> tag based on what is being
viewed.* We filter the output of wp_title() a bit -- see* twentytwelve_filter_wp_title() in functions.php.Vif ( function_exists(,seo_title_tag'))
seo_title_tag(); else
wp_title( true,,right' );
?></title>
Das Basis-Theme bleibt unangetastet, kann weiterhin durch Updates auf dem neusten Stand gehalten werden und ab sofort zieht Word Press die header.php immer aus dem Child Theme.
Nachteile der Child ThemesMan kann Templates im Child-Theme ersetzen
Die Funktionalität des Child Theme lässt aber mehr zu als die Änderung des Aussehens. Man kann beispielsweise auch bestehende Template-Dateien des Basis-Themes ersetzen. Word Press sucht quasi im ersten Schritt im übergeordneten Child Theme und dann im Basis-Theme nach dem möglichen Template und durchläuft dabei die Hierarchie der Template-Dateien. Das bedeutet, dass WordPress schaut, ob ein eigenes Template für das Child-Theme vorhanden ist, oder nicht. Wenn keines vorhanden ist, werden einfach die Templates des Parent-Themes genutzt.An vielen Punkten vom Theme kann man per Hook eingrei- fen, was aber nicht jedem Nutzer liegt und zumindest auf den ersten Blick kompliziert erscheint. Ein Hook ist ein Eingriff in einen bestehenden Programmcode, in den der eigene Preogrammcode integriert wird. Daher wird beispielsweise nicht selten die Ausgabe des Title im head einer Website mit eigenen Funktionen oder von Plugins ersetzt. Man kann entweder per Hook den Titel bearbeiten oder die Ausgabe über eine Funktion steuern. Für ein Beispiel soll nun derTitel mit einer Funktion aus einem Plugin ausgegeben werden. In dem Fall muss die header.php bearbeitet werden und darum muss man wie folgt vorgehen, sodass das Basis-Theme unangetastet bleibt.Als erstes kopiert man lediglich die header.php, die den head-Abschnitt für das Theme enthält in das eigene Child Theme. Hier kann sie dann beliebig bearbeitet werden. Anschließend zieht WordPress diese header.php und nicht mehr die Original-Datei aus dem BasisThemeTwentyTwel- ve. Damit kann nun auch die angesprochene Funktion in den Title integriert werden.
Oft sind die dieThemes, für die sich Child-Themes am besten eignen sehr umfangreich und bringen sehr viele Funktionen mit, die man als Laie nicht mehr überschauen kann. Hier können auch die Child Themes nicht helfen.In der Regel werden die Stylesheets mit dem Befehl @im- port, der allerdings, wie in vielen Foren diskutiert wird, Nachteile in der Performance hat. Der Grund dafür ist, dass die @import-Regel das gleichzeitige Laden von verschiedenen Dateien verhindert und daher der Seitenaufbau im Browser etwas länger dauert.
Fazit: Child-Themes sind äußerst nützlich für die WordPress-User. Es ist nicht nur die Tatsache, dass man trotz eigener Änderungen die Updates machen kann und die Änderungen dann weiterhin bestehen. Sie helfen auch den WordPress-Nutzern, die es sich viel-leicht nicht Zutrauen, ein komplett eigenes Theme zu pro-grammieren, aber gerne zumindest ein wenig an einem Theme herumbasteln würden. Hier eignen sich die Child-Themes perfekt, da man auch einfach mit Copy+Paste arbeiten kann und zunächst einfach die Dateien aus dem Parenttheme nutzen und sie in das Child-Theme kopieren kann. Die Frage, ob man nun updatet und damit alle Ände-rungen verloren gehen oder ob man nicht updatet und damit ein Risiko eingeht stellt sich nicht mehr, wenn man ein Child-Theme nutzt.
webdesigner 04/2013
DEUTSCHE POPDie Akademie der Musik- und Medienbranchewww.deutsche-pop.com
TUTORIALAuf zu den Sternen von Oliver Berg hold
Auf zu den SternenBanner-Werbung sieht fast immer irgendwie öde aus. Web Designer Oliver Berghold zeigt Ihnen, wie sich mithilfe von Illustrator und viel Vintage-Charme ein Banner zu einem echten Blickfang machen lässt.
(M^ / - O - : I I
JgJgJgLl3Ll
GE 1 - 8
sB ltBÜT.V. y y.\3
3*ca.i JÉJk
/.*
□ 1 ¡ J*. •j •i/
Banner-Werbung im Vektorgrafik-Design
sieht nicht nur stylish aus, sie ist außerdem
plakativer und hebt sich somit gut von den
kleinteiligeren Inhalten von Websites ab.
\
CODINGFACTORY
YOU DESIGN „ ■ . YOU DESIGN WE HTML I WE HTML
nm wWesigKi u | in ii
n diesem Tutorial möchte ich Ihnen zeigen, wie man mit relativ wenigen Arbeitsschritten und den gängigsten Funktionen in Adobe-Illustrator die Idee für
ein Label samt Grafik in Szene setzen kann. Alle Elemente bleiben voll skalierbar und eignen sich daher sowohl für Print als auch für das Web. Damit steht zum Beispiel der Verwendung im Rahmen einer breit angelegten Kampagne nichts mehr im Weg.Das hier gezeigte Banner soll einen Dienstleister für die Umsetzung von Webdesigns in HTML bewerben. Als Name des fiktiven Dienstleisters habe ich mich für „Rocket Lab" entschieden. Bei so einem Namen ist eine Rakete als Markenzeichen Pflicht. Ich wollte daher eine Kombination aus einer Rakete und einem Schriftzug für das Banner, geeignet sowohl für ein Label, als auch für die Gestaltung eines Banners. Die Rakete sollte auch in kleinem Maßstab prägnant sein und sich gut mit anderen Elementen kombinieren lassen. Daher sollte sie nicht besonders detailreich sein, sondern besser aus einfa-
CODINGFACTORY
a♦
-j%
YOU DESIGN WE HTML
inr».«rtkdesijne» nujaflii.de
chen Formen bestehen.Das Tutorial ist zur besseren Nachvollziehbarkeit in drei Phasen unterteilt, die jeweils unter einer eigenen Überschrift stehen.Unter anderem zeige ich, wie man eine eingescannte Schrift vektorisiert. Außerdem enthält das Tutorial einen kleinen Exkurs zum Thema „Bezierkur- ven", einer zentralen Funktion für Vektorgrafiken. In Photoshop ist das dazugehörige Zeichenstift für viele Einsteiger und Fortgeschrittene ein Buch mit sieben Siegeln. In Illustrator sind die einzelnen Funktionen zudem anders ausgelegt und dürften damit auch Photo- shop-Zeichenstift-Kenner zunächst vor ein Rätsel stellen. Sind die Grundlagen aber erst verinnerlicht, merkt man schnell, dass es sich mit der Illustrator-Variante komfortabel arbeiten lässt.
92 webdesigner 04/2013
TUTORIALAuf zu den Sternen
Der Rumpf der Rakete
pv 1 ZeichenstiftI Mit der Rakete geht es los-sie setzt sich zusam
men aus wenigen verschiedenen und sehr einfach zu zeichnenden Formen. Als Hilfsmittel für das Zeichnen der Formen blende ich in der Illustrator-Arbeitsfläche das Raster ein:„Ansicht > Raster einblenden" (Strg++). Den Anfang macht eine simple Kurve und eine gerade Linie. Mit dem „Zeichenstift-Werkzeug" (P) und mit Hilfe des Rasters im Hintergrund zeichne ich zuerst die Form für den Rumpf der Rakete. ▼
H El
CODINGFACTORY
YOU DESIGN WE HTML
vnvtMesit1« oufuitit
Färben und zusammenfügenW ^ l m nächsten Schritt färbe ich die Oberfläche in der gewünschten Farbe und füge den noch offenen Pfad über die Menüleiste „Objekt > Pfad > Zusammenfügen" (Strg.+J) zu einer geschlossenen Form zusammen. ▼
*mh»> (M * ArwM 9m
S t. A-J - i
r~y~iM*Wri
«1M
1 1 * a.A
Q Klonen und spiegeln\ J ^Anschließend klone ich die Form, dafür halte ich die Alt-Taste gedrückt und bewege gleichzeitig das ausgewählte Objekt mit der Maustaste. Dieser vereinfachte Arbeitsschritt wird sich später noch wiederholen. Während die geklonte Form ausgewählt ist, wähle ich über das Kontextmenü (rechte Maustaste) den Befehl „Transformieren > Spiegeln > Vertikal". ▼
f \ A Die Formen verbindenW ^ T M it dem „Auswahl-Werkzeug" (V) und mithilfe des Rasters positioniere ich die Formen so, dass sie zusammengefügt werden können. Mit dem „Direktaus- wahl-Werkzeug" (A) wähle ich einen Schnittpunkt bzw. zwei Eckpunkte verbinde sie. (Einfacher geht es, wenn in den Illustator-Voreinstellungen die magnetischen Hilfslinien bzw. die Ausrichtungslinien aktiviert sind.) Der Rumpf der Rakete ist damit bereits fertig. ▼
r ß • •
CODINGFACTOR
i. 2^2 IHNII04/2013 webdesigner 93
TUTORIALAuf zu den Sternen
Antrieb und Einzelteile
Die DüsenFür die Düsen der Rakete wiederholt sich der Ar
beitsablauf Alternativ kann man auch den Rumpf der Rakete duplizieren, diese Form etwas modifizieren und anschließend verkleinern. Für das Seitenteil und die stilisierte Flamme werden insgesamt vier Formen gezeichnet. Die Düse wird um eine Ellipse ergänzt. Schließlich kommt noch eine viereckige Form sowie eine Art Tropfenform hinzu.Für das Viereck zeichne ich mit dem „Rechteck-Werkzeug" (M) ein Rechteck und modifiziere mit dem „Dlrektaus- wahl-Werkzeug"(A) die Eckpunkte. ▼
Die „Montage"Anschließend werden die Einzelteile sozusagen
zusammengebaut und an den Rumpf montiert. Für den Hauptantrieb der Rakete dupliziere ich die Tropfenform, skaliere sie entsprechend und platziere sie mittig unter der Rumpf-Form. ▼
Tropfenformv^Für die Tropfenform zeichne ich mit dem „Zei-
chenstift-Werkzeug" (P) eine einfache Kurve. Diese muss nicht genauso aussehen wie im Screenshot. Anschließend wird die Kurve, ähnlich wie beim Erstellen des Rumpfes, geklont, zusammenfügt und gefärbt. ▼
f
YOU DESIGN WE HTML
m.weMttifHMUfuiiit
© CODING FACTORY
YOU DESIGN . WE HTML
/ 'V Q D ie Fenster\ J O je tz t fehlen noch die Fenster. Mit dem „Ellipsen- Werkzeug"(L) zeichne ich einen Kreis, dupliziere und verkleinere ihn. Anschließend richte ich beide Formen vertikal untereinander aus. Damit ist die Rakete fertig! ▼
© CODING FACTORY
9 4 webdesigner 04/2013
TUTORIALAuf zu den Sternen
Klonen und DrehenMit dem „Zeichenstift-Werkzeug" (P) erstelle ich
eine Raute. Auch dieses Mal klone ich die gezeichnete Form. Ich wähle die Form aus und rufe im Kontextmenü die Funktion „Transformieren > Drehen" auf. Daraufhin erscheint das Funktionsfenster „Drehen", in dem ich einen Winkel von 6 Grad wähle und außerdem die Funktionen „Vorschau" und „Kopieren" aktiviere. Damit wird die Einstellung bestätigt. ▼
Das Label
1*1 Inspirationsquellen für ausgefallene I Schriftarten
Möchte man einen Schriftzug mit besonderem Charakter erstellen, wie für unser Label Rocket Lab, kann man einen geeigneten Font in einem Vektorprogramm wie Illustrator in Pfade umwandeln, um ihn anschließend zu modifizieren. Als Alternative zu echter Handarbeit eignet sich in diesem Fall z.B. auch der„Adobe-Font Brush Script Std", zu bekommen z.B. bei MyFonts. („http://www.myfonts.com/fonts/adobe/brush-script") Vielleicht haben Sie aber auch eine besonders schöne Handschrift und zeichnen einfach etwas vor, das Sie dann scannen und vektorisieren können.In alten Zeitschriften, Werbebroschüren und Büchern lassen sich ebenfalls schöne, manchmal sehr skurrile Schriftzüge finden, die als Inspiration oder auch als direkte Vorlage für individuelle Grafiken dienen können. Ein Besuch auf dem Flohmarkt oder das Stöbern bei ebay lohnt sich jedenfalls. ▼
1f\Klonen und Drehen perShortcutDie „Kop/eren'-Funktion sorgt dafür, dass die Rau
te mit jeder wiederholten Drehung gleichzeitig dupliziert wird. Um aber das Funktionsfenster für die Drehung nicht für jeden Schritt erneut aufrufen zu müssen, benutze ich den Shortcut Strg+D. Damit dupliziere und drehe ich die Raute dreißig Mal, bis der Kreis geschlossenen ist. Da jede Drehung um einen Winkel von sechs Grad versetzt ist, verteilen sich die 30 Rauten gleichmäßig über den Kreis, denn 30 x 6° ergibt genau 180°. Anschließend markiere ich alle einzelnen Objekte mit einem Auswahlrahmen und wandle die Rauten in ein einzelnes Objekt um. Dafür rufe ich das „Pathfinder" Werkzeug auf: „Fenster > Pathfinder" oder Umschalttaste+Strg+F9. Mit dem „Auswahl-Werkzeug" (V) markiere ich alle einzelnen Objekte des Strahlenkranzes und mit dem Formmodi-Befehl„l/ere/nen"füge ich sie zu einer Form zusammen.Die Strahlen werden an- , \\\\\w]///// schließend in ihrer Deck- I OsXVwAu\ w / / / / s kraft reduziert und unter der Rakete platziert. ▼
^ 4 Jr s |
/ a / >
J * / t
T ■ " • uv • - o
I Vprnnfn (rum Ervdlcn riner lunimmrngeirtrtrn Fofm und xum Hinnrfugen rum Fc tmbrrei<h b « grdruclctrr AH-Tnttf klicken,
Exkurs „Zeichenstift-Werkzeug": Bezier- Zm kurven
Für das Vektorisieren eines Scans oder allgemein für das Zeichnen nicht geometrischer Formen, also das freihändige Arbeiten mit dem „Zeichenstift-Werkzeug" (P), braucht man etwas Übung, um ein Gefühl für das Werkzeug zu bekommen. Freihändiges Zeichnen am Computer (ohne Grafiktablett) bedeutet in den meisten Fällen: 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 vorgesehen ist.Praktisch bedeutet das: Eine Bezierkurve besteht immer aus mindestens zwei sogenannten Ankerpunkten. Oder anders gesagt, die Kurve entsteht zwischen diesen An-
04/2013 webdesigner 95
TUTORIALAuf zu den Sternen
kerpunkten.Klicken Sie mit dem „Zeichenstift-Werkzeug" (P) auf die Arbeitsfläche, um einen Ankerpunkt festzulegen. Setzen Sie jetzt einen zweiten Ankerpunkt, werden beide Punkte automatisch mit einer Linie verbunden. (Setzt man den zweiten Ankerpunkt bei gleichzeitig gedrückter Shift-Taste, wird die Linie exakt horizontal oder vertikal angelegt, oder auf Zwischenpunkten in Abständen von 45Grad). ▼
A N K IR P U N K T /y
mm -
r 4 «
13Kurven formenWiederholen Sie diesen Schritt, legen Sie zwei
Ankerpunkte fest und halten Sie dieses Mal aber dabei die Maustaste gedrückt. Jetzt ziehen Sie bei gedrückter Maustaste vom zweiten Punkt weg: Es entsteht eine Kurve, deren Form direkt über den zweiten Ankerpunkt gesteuert werden kann. Außer den beiden Ankerpunkten der Kurve erscheinen zwei weitere Punkte, verbunden mit einer Werkzeuglinie, mit denen sich die Kurve direkt modifizieren lässt. Mit dem „Direktauswahl- Werkzeug" (A) lassen sich diese Punkte greifen. Ziehen Sie einen Punkt mit der Maus über die Achse der Werkzeuglinie oder drehen Sie auf dieser Linie über den Ankerpunkt, verändert sich die gezeichnete Kurve. Auch hier wird bei gedrückter Shift-Taste der Winkel auf 45Grad Schritte begrenzt.Beim Zeichnen von Formen mit Bezierkurven, z.B. für das Abpausen eines Schriftzuges, ist es am besten, so wenig Ankerpunkte wie möglich zu setzen, denn je weniger Punkte eine Kurve benötigt, desto „eleganter" wird sie. Fehlt es noch an der nötigen Routine beim modellieren von Kurven oder Formen, lassen sich diese auch anschließend korrigieren bzw. vereinfachen. Illustrator bietet dafür sogar eine eigene Funktion, mit der man aus einer bestehenden Form Ankerpunkte entfernen kann. Die„Vereinfachen"-Funktion bietet eine Einstellung der Kurvengenauigkeit und des „Winkel- Schwellenwerts" über einen Schieberegler nach Prozentwerten. Die Option „Original Anzeigen" bietet für mehr Kontrolle die Kontur der Ursprungsform in einer anderen Farbe.Meiner Meinung nach ist dieses Werkzeug aber so gut wie überflüssig, da es keine detaillierten Einstellungsmöglichkeiten besitzt und sich der Effekt deshalb eigentlich gar nicht kontrollieren lässt. ▼
M Komplexere FormenMöchte man komplexe Formen zeichnen, wie
einen Schriftzug, ist es ratsam, mehrere Pfade bzw. Kurven zu zeichnen, denn kleinere Einheiten lassen sich besser kontrollieren und korrigieren. Stimmt das Ergebnis, kann man anschließend mit dem „Zeichenstift- Werkzeug" (P) am jeweils zuletzt gesetzten Ankerpunkt ansetzten und die Kurve fortsetzen, oder einzelne Pfade zusammenfügen. Für das Zusammenfügen von Pfaden gibt es einen eigenen Befehl, der über die Menüleiste erreichbar ist : „Objekt > Pfad > Pfad zusammenfügen". ▼
□s
» < I- k li r»ti 4<l • . . .
15Ausschnitte in FormenMöchte man Buchstaben zeichnen oder pau
sen, die einen geschlossenen Bereich oder Bauch haben, wie z.B. das„o" in „Rocket" ist es am einfachsten, zwei Formen zu zeichnen, um anschließend den inneren Teil herauszuschneiden.Zuerst zeichne ich mit dem „Zeichenstift-Werkzeug" (P) die äußere Kontur des Buchstaben. Dann sperre ich im Ebenen-Fenster dieses Objekt. ▼
96 webdesigner 04/2013
TUTORIALAuf zu den Sternen
16Die Innenform bearbeitenKlicke ich jetzt mit dem„Zeichenstift-Werkzeug"
in das Dokument, legt Illustrator automatische eine neue Arbeitsebene an und ich kann die Innenform des Buchstabens zeichnen. Außerdem kann ich die Deckkraft soweit reduzieren, dass die darunterliegende Vorlage deutlich sichtbar wird. Für die Fläche der inneren Form wähle ich eine Farbe für deutlichen Kontrast. ▼
fOrrwo#:J * % 4
h -
* 1
b S
• | • | • | • A I
Typografie
19Schriftarten aus anderen QuellenFür die Typografie des Banners kommen zwei
FreeFonts zum Einsatz:„Chunk Five" und„League Gothic". Beide Schriften bekommt man bei Fontsquirrel:
http://www.fontsquirrel.com/fonts/League-Gothichttp://www.fontsquirrel.com/fonts/ChunkFive
Für Chunk Five gibt es keinen kursiven Schnitt (italic). Dieser Effekt lässt mit Illustrator aber leicht imitieren. Dazu wird die Schrift ausgewählt und anschließend mit dem „Frei-tronsformleren-Werkzeug" (E) in eine gewünschte Neigung transformiert. Am einfachsten gelingt das bei gedrückter Shift-Taste. w
\ Q.yy .&
o.
*•• • •
f Frcs-traniform iefcn-W cfkieug (E)IT— — ■■ —■ ■ ■! —
1 “7D ie Sperrung aufheben/ Jetzt hebe ich die Sperrung im Ebenen-Fenster
wieder auf und wähle beide Formen aus. Dafür klicke ich bei gedrückter Strg-Taste nacheinander auf die Farbmarkierungen der Ebenen im Palettenfenster. ▼
/"V Kreis mit Versatz^ Jetzt zeichne ich mit dem „Ellipsen-Werkzeug"(L) einen Kreis. Anschließend verschiebe ich den Pfad um drei Pixel. ▼
i ’ mm2
* ► • % Q * •?£ r ! ttrm* ' * t : m m » *- : mm». $ - : i»m *.
4mTwkk«
rud
18Die Ausschnittform entfernenMit dem „Pathfinder"-Werkzeug entferne ich die
verdeckte Fläche, also den unteren Teil der Formen, der herausgeschnitten werden soll. Jetzt sind beide Formen gruppiert. Ich hebe die Gruppierung auf, wähle die obere (in diesem Fall die grüne) Form aus und entferne sie über die Funktion„Auswahl löschen". Alternativ kann die Auswahl auch mit der Entfernen-Taste gelöscht werden.
(<k
04/2013 webdesigner 97
©CODING FACTORY
Ch u n k f i v e ]
eai.i»c»a ic»n ic» .,*c»aic»aic*3iaic»c»ciiraCTaiEainaicai(nicaG3iaiiEaic»
CODING r rf FACTORY
JNK FIVE
TUTORIALAuf zu den Sternen
*1 Schriftzug und Form ausrichtenI Der äußere, verschobene Pfad wechselt auf
Kontur, dann werden Schriftzug und Form miteinander ausgerichtet. ▼
□ -r. %
I
th erv ^ ’1
• -J0.\ '
■y\, .
C H U
f
Q Letzte Feinheiten« JC hunk Five verwende ich auch für den Schrift
zug „YOU DESIGN WE HTML". Wer will, kann diesen Teil noch mit einigen horizontalen Linien und Sternen ergänzen. Und probieren Sie es doch mal mit anderen Farbkombinationen... ▼
Mt* -
Die Schrift färben ^ ^ A b s c h lie ß e n d erhält die Schrift die Farbe des Banner-Hintergrunds, sodass die Schrift wie ein Ausschnitt aussieht. ▼
LV*' t — t » t » r Cfc*«W S<hn#* i«#<* f«r* * >*•♦» m*j IKS * G o K h w * ß . O V I
S “ ■ — - ------- . -s t * 1 - - . . ■ ! tm • ^ i « J 3 i ¿ - Ut- » 4) 3 $ - B j » « ' » » p . r : m v o * : « u i# « * .) , -
_ 1
- - = • -•« =* =»=noi rzji ruji rím cn* in» .tä rjn rnn íz* ítib crm rjm r» f7m üjp rzn fr i rr i c i.n i:rnji croi rzn r n r ii rrni e r.M ptzu fz» f73i rzji *7 11 ítzji
ID ». s «i.T .
y s.
0.*k « « 3 . - 1 jj j s.*>
*a -r.Q.A
1 %
© CODING FACTORY
¿H U N K FIVE
b i J P i» LOtgwtm *• :■***'4« ¡¡¡ÜacÜ^I± =£
SJkmif*
K. i J I 1 J-
=5 w u
« PiW- »1
t h e
YOU DESIGN WE HTML
League Gothicwww.webd8sitner-masazin.iie
CODINGFACTORY
j¿¡¡6
YOU DESION WE HTM L
m tMtufbtf upMflt
CODINGFACTORY
98 webdesigner 04/2013
WEB-GALERIEInspiration
j r ------------
dustinwoodMMB
1
HELLO. I’M DUSTIN WOOD.
MinUDM • ( W M 1 DESIGN W E B S IT E S , PR INTmm>nrnm M ATERIAL, AND 1 D A B B LE IN
mmmm
VIDEO. SO M ET IM ES 1 PO STTHOUGHTS TO TW ITTER .CHECK O U T MY W ORK AND DON 'T FORGET TO SCROLL DOW N THE PAGES.
CO O L B E A N S - SURFACE51 S E L F PROM O
A i 0 - 1 C O N TACT
eaxCRuflH*
-r
B O X C R U S H W E B DESIG NM tu c * :* t i l ra O A -.r .
ft**
E X P LO D E D PENl-*i '
Ziemlich ungewöhnlich präsentiert sich der Webdesigner Dustin Wood auf seiner Homepage. Die bis auf ein paar einleitende Worte und der links angebrachten Navigation fast komplett in schwarz gehaltene Seite hat einen sehr individuellen Stil. Auf den Unterseiten erfährt man mehr über die Arbeit von Dustin Wood. Er stellt einige seiner Arbeiten vor und man erfährt, dass er neben der Konzipierung von Webseiten und Videos und Printprodukte anbietet.
M >w<t A Icom somAMS conta shcvujt stiwmdshp
8.8 BU/AADVNATIONALLY?VS. COMPETITIVE TRIPLE STACKS*
p — -T—«»")--mrfiiPUPM Cowl I im mm
as* the experts
I #1 ( UPCOMING TRAIT INNOVATIONSIN THE NEWS |
M W l l K M lI %C*. I
GENUITY.COM WEBSITEDEVELOPMENT
SEE MORE ON THIS PROJECT ■
NEIGHBORHOOD SANDBOX
SEE MORE ON THIS PROJECT *
INVkCB 0E»»O**
Shopping auch im Internet als Erlebnis zu zelebrieren, ohne den Produkten die Schau zu stellen, ist eine echte Herausforderung für Webdesigner.
SALEU U f LKD MCUE RLDUMRUNGi M
Der Online Shop von S. Oliver ist im Layout betont schlicht gehalten. Auf der Startseite findet der modebewusste Besucher dafür eine Reihe interessanter Inhalte. Die Seite ist mehr als ein Shop, sie zeigt Hinweise auf Verkaufsaktionen, stellt Trends vor und bietet sogar Modeberatung in Form von sogenannten „Lookbooks" an. All diese Dinge sorgen dafür, dass der Besucher gerne wieder kommt.Die Qualität der Marke S. Oliver wird vor allem durch absolut professionell gemachte Fotos transportiert. Vor allem die ausgewählten Models sprechen die junge Zielgruppe perfekt an. Auch auf Funktionalität wurde großer Wert gelegt. In der Galerieansicht ist zum Beispiel jede Produktabbildung mit einem Hover-Effekt versehen, der nur das Produkt an sich und, in einer zusätzlichen Box, die verfügbaren Größen zeigt.
s & lx m
• | (tM I m w M f l
» mm
LOOKBOOK
<25 - K M M I \Cium njM Hft fi%m n M M
NEWSLETTER10% RABATT JETZT Ali MELDEN
Cf«* OltoM
BALLERINAS
100 webdesigner 03/2013
WEB-GALERIEOnline Shops
æ r s r s f in
Kickz.com ist ein Online Shop für Sportschuhe und Kleidung, wie sie in der Hip- Hop-Szene gerne getragen werden. Entsprechend stylish und sportlich präsentiert sich der Shop. Um bei den Besuchern Begehrlichkeiten zu wecken, werden die Marken und vor allem ihre Produkte zielgrup- pengerecht in Szene gesetzt. Unterhalb der Slideshow befindet sich praktisch als zweite Navigationsleiste eine Leiste mit den Emblemen der namhaftesten Hersteller, so dass die Fans bestimmter Marken und Namen sich gezielt informieren können.Auch auf den Produktseiten fehlt es nicht an Bedienkomfort. So sorgt eine Lupenfunktion für eine detailreiche Darstellung der Produkte. Ein besonderes Problem bei Mode sind die uneinheitlichen Größenbezeichnungen. Kickz.com bietet bei Schuhe zum Beispiel die Option, Größen als europäische, UK- und US-Größenbezeichnun- gen anzeigen zu lassen. So ist zumindest schon eine Verwechslung amerikanischer und britischer Größen ausgeschlossen.
0 MQMI M H A MM N SAU > MV
V<Mm NMiMaH
AIR MAX 1 ESSENTIAL"WOLF GREY/PHOTO BUK* W M ■
4 _JL £mmo»| w»M: B 3 » f l . Vans SUPRA Ä MAflXC*
n
FRA
l* M (M m 4 V i r u i i 4 l « M i I M W l N /4h>— i ^ u h » > i m
« » IHMr« *nr> t feto 1 HVrvMatNir> 1 r M i *
f w w « n l *— m o * W p w » r # t r v * v r «*t a M A M M P « .f i a l j i r f n u
i w » , « M U K v i K a u » H m « )
*»»■urw*>/•
• "• «*■In n
M m . . . .
wähle eine färbe
wähle eine große
G R Ö S S E N T A B E L L E
K l .40 2/3 41 1/3
44 44 2/3
Männer HEU-GRÖSSENEU-GROSSEN
ACHT US-GRÖSSEN UK-GRÖSSEN
46 2 3
471-3
material te>1 il
Vnm tf umw
OMI V lH M l H i . U • OS STOHS U H U S U . l s M
SCHUHE
M W U l f »psn [<.»]M « U . M[■ it] [■ r»] I m ]M « • I W • •»> |m a l lm m I « « •
[ " * J * •v • • «i m « I• - M « I I » M
M ir m m m
• t l • « » •
• - a n mm. » « • • m
> « ■ < V r-iH t r -a ia u « M T I m j
• • • m • ■ 1
03/2013 webdesigner 1 01
o»
WEB-GALERIEOnline Shops
Aus heutiger Sicht ist kaum vorstellbar, dass ama- zon einmal als reiner Bücher-Online-Shop angefangen hat und erst später anfing, seine Produktpalette in alle erdenklichen Richtungen auszubauen, redcoon.de kann beinahe eine ähnliche Unternehmenshistorie vorweisen. 2003 als reiner Online Shop für Unterhaltungselektronik gestartet, bietet das Aschaffenburger Unternehmen heute auch Bücher, Baumarktartikel, Bürobedarf und Sportartikel an, und zwar international.Nicht zufällig erinnert die redcoon-Seite in Aufbau und Funktionalität der aktuellen amazon-Seite. Bei der Firmenfarbe hat man sich für ein feuriges Rot entschieden, das interessanter weise auch für Buttons verwendet wird aus Conversion-Optimie- rungstechnischer Sicht eigentlich nicht ratsam. Der horizontale lineare Verlauf im Fieader wird bei den Buttons wieder aufgegriffen und nimmt dem knalligen Rot geschickt die warnende Wirkung.
inkl. MwSt., keine Versandkosten
► IN D E N W A R E N K O R B
ra fc im o e
M M IU I & 1 M « K it M r a w / im ? !r « * _f i •* • » l 'ié ÿtftifn* « u.uu
» J-»
Will^oowi.nn
i^ rv . «iHIN Ç<«'. «J* ' ; L i -3 M IF K S im
f M l f l lH , ft
HU* ft
l iw fr ft WMmiw i i l n
Mritjm tcaiwi«» ft CM
ft
«fliUltl- M O iü iS
» JETZT BllTTERN
DERREDCOON NEWSLETTER
• IwbrtH* tltUlMMéM
I V I f d M l M r i N lMt
« » K f b i i r t iw iJ i
SOFORTüacRwetsuNG
P a y P a l
—
*■*» i m *
«ferewn '
D ' W A w y*T*t
/190T lü ifW iK O «
Suchen
Das Full-HO-Smsrtpborv#Sen/ xptnft 2 WKx
1 «00 M * a : » r t * b « n ‘
P.vwvww 3TH FD 56 7ni
* 14CO ü *n<n und d*»
B*tirvdruo#r><los FormatA3 i rt*rutrart*f vori Hb
f BOSCH
BO)«») »VAF 28444
*101 fk* 1«00K
9 § ® Q f °
• rC«fT»»A,5# 7 »Q■ * w t(f ir4 n A iiu iiy «• AMiit.« ntfOrirfi«
» f t r t a t n f fk T á if fy v iir iT i) » t/fltnKUgiai1
► ¿UM UÏÂBOJ
Pm M om c P H I L I P S KENW O D
*=“ B7(99 o
P
JAflikiaftJO-*‘tnm*-TV, r « « » c .cvbt>c#82 ves
Jvr
»WniiMM «U/LMt/TOrtiW HiM IrtTUW/HtIG*T\r***«0. CMVTK>G7 KO-TV,r*MO.C*frTK.
UM?mpyN_L H C*iE NA*MT>CN mt
» O f-ÎY Ü iKrW K^fH I
S O N Y Gigaset EPSON
B
& ¡ PVH* NW*.Oü tjflt'ftu i
» m . B w r i
aÉtffâp0 <ß3Qp°lpv-4»WÜMflltf
FuftTfrAN'MtfMi<WC>uW«
v a m v tiH v « * t j > v*r< . A04KlWWrtl 17.1 Cows:o:-6 c-j b
» Ararat mix* » nrfln
A lle s fü rs A b itu r: Je tz t n och mal Gas geben !
ÜVÜkN
<¿!Y É
o « :
. L
1 <asr .1vl
W » prtatn r t f r j w tf r iim ft Ob L r . d c f l i i i : i r a r t i M i r w i f n und A if ir rt t Aff C lu n c n , N r M n t a A m h
^ L ••*«'>? «fX »K* W W f « ki|»nt+« rV & itff* *
Dtn iVJWM n urnerr i r t i w #v r*#tUrM>r H in t * Cm U * ok de» §e*TiK* vn» wV&JM i t *ut * * n «m >vK3<h « W M A M « M l » « » - I n K T 't t ' t f COf r m**c»W0T v n C M M f l m
C 'm y iM »('UiW rrtfV « iiv u n » m WWMW
M r t l w *rt Go^mtr m i r o t « « «♦» 9« U h H k m **Cft Ouc*U - ^ » i * t r h fA r t k ^ >• ,% **• ►*% i|H» fco«*» iHtl 'Mät
<on*»w mfeMt. vrivtv« •#*
cmmcic n k * io .»•*»«« o « « i •*»* rt«u« O tu iN W r n w w u»4 r«eust .’«a «»»>♦'' > t * r ^ i >jmto á t+&.<>M 4» f*jM R<** i*dl«r«4Mn «»ii*« T MO AM ft«*hr* Ji- 1 iV A f r m m l ■rrhaw tKIwáti ba<Jk*€T*
SEHR G U T
1 02 webdesigner 03/2013
WEB-GALERIEOnline Shops
rro îi^ rp iM ir
fo l lo w Utt
on t u i i t t e r
VIDlOBIOG t
Tt M w Hf tfMw: 0*S«A/*??3éA
th mann l.it/ll*«* »MH« l * n I* A (II •*«»« S«t#n mrHrrv
Der größte Nachteil eines Online-Shops ist wohl, dass man die Produkte vor dem Kauf nicht anfassen, geschweige denn ausprobieren kann. Für einen Musikinstrumente- und Studiotechnik-Anbieter ist dieses Problem noch größer, da es sich bei vielen Produkten um recht teure Anschaffungen handelt, diese mitunter auch recht sperrig sind und nicht zuletzt der Klang eine wesentliche Rolle spielt.Thomann als einer der größten Anbieter von Musikinstrumenten und Studiotechnik hat mit seiner Website versucht, seinen Kunden so gut es geht entgegenzukommen. Das Design an sich kommt zunächst etwas bieder daher. Auffällig ist aber die starke Kategorisierung der Produkte. Wer sich nach einer E-Gitarre umschauen möchte, muss sich durch gleich mehrere Kategoriestufen klicken: Gitarren und Bässe>E-Gitarren>E-Gitarren-Modelle. Die beispielhaften Abbildungen bei den Kategorien sind dabei auch für Laien eine ungeheure Hilfe. Auf der Produktseite gibt es dann auf den ersten Blick die technischen Details in Form einer Bullet List und, weiter unten, Produktrezensionen von anderen Kunden. Um den Klang des Instruments beurteilen zu können, wurden in einem eingebundenen Player verschiedene Soundbeispiele bereitgestellt.
( *«««1
M w t lK IN n A lM m lU f M M» — f i t* M
To|)Niw»
100%
SEHR GUT 4 .9 1
IM , I M
IM »
l>*. I M
H«l) I*« Ui»». «f «4u ow
Willkommen zu Hause!Harrte* H Io r iM n b * çrtAlan M*uèN*ut. fan t*n hnétn |Bmrum Thmrts» M iK ik in U n M M n l». ttu 4 to -. U M . u rd RatdM NiM kqitAftM k - öm io«* kotlaMi«
K0
M i ThOÄ^rirt V# r w r m f V#ry<#pofto#fw*t< V*rw»nd iiwcrtialb Ooi^vrMorvlt tb ****** w Jt HÄ. 30 Tag* Moncv !U d l C«ran*iw und 3 Jahn» Car<jntu>
«««. «i
M l, I M
i m ,- i m
i m *. I « « im»
H l, I M
*•»*# In»0 *«rr t» '# i« : U M « » iM f PM rUr*
Ow» M»f I«LT ri»| *nNÂ
iM I t l IMI I I . (M I IM K I X M MM
U M . TM«IN*. .%AU>, M# »w
IW«« *1 IM »«♦. I M OM H H W . W - w
Itt, «Mtf M i
in, i<
sIM \ IM \M • «M l I W - w
Mhiilwr >l«»H«nilw4»wm f
U MrM H v tH N
IM MIM *. I N
«MTV I MnM I »l » M ) ..VM N 1 « | g i. lM aV
RATGEBERBuchrezension, Modernes Webdesign von Dragona Mimic
Photoshop CS6Schritt für Schritt zum perfekten BildLearning by Doing: Auf 440 Seiten erlernen Sie Photoshop CS6 ausschließlich anhand praktischer Beispiele, die Sie mit dem Experten Markus Wäger Schritt für Schritt nachvollziehen können.
W enn Sie kein langes theoretisches Geplänkel möchten, sondern direkt mit der praktischen Photoshop-Arbeit loslegen wollen, ist das
Buch Adobe Photoshop CS6 - Schritt für Schritt zum perfekten Bild genau das Richtige für Sie. Das Sprichwort „Erst die Arbeit, dann das Vergnügen" wird hier einfach komplett ignoriert und der Spaß an erste Stelle gestellt. Auf insgesamt 436 Seiten und in elf sehr ausführlichen Kapiteln zu grundlegenden Themen, wie beispielsweise Auflösung und Grundlagen, Farbkorrektur und Schwarz- Weiß-Bilder oder Retuschieren und Verbessern, führt der Grafikdesigner und Adobe Certified Expert Markus Wäger den Leser Schritt für Schritt in die faszinierende Pho- toshop-Welt ein. Bereits beim Durchblättern wird klar: Lange theoretische Themenbesprechungen wird man
Markus Wäger arbeitet seit den frühen 90er Jahren als Grafikdesigner und betreibt sein eigenes Gestaltungsbüro,Designworks'. Als Adobe Certified Expert ist er auch Software-Trainer für Photoshop, Illustrator, Acrobat und InDesign. Außerdem veröffentlicht er seit 2006 regelmäßig Software-Tipps und Artikel zu den Themen Design und Typografie auf seinem Weblog.
Auf einen BlickDas Produkt: BuchVerlag: Galileo DesignAutor: Markus WägerIm Netz: www.galileodesign.dePreis: 39,90 Euro ISBN: 978-3836218856Highlights: 436 Seiten, Hardcover, DVD zum Buch mit Videotrainings, Arbeitsmaterial und 30-Tage-Testversion von Photoshop CS6 Extended
hier nicht finden. Rund 100 verschiedene Workshops mit Arbeitsmaterial auf der beiliegenden Buch-DVD erwarten den Leser. Besonders gut geeignet ist dieses Praxisbuch durch die klar strukturierte Wissensvermittlung für Einsteiger. Die einzelnen Kurz-Workshops sind nach Schwierigkeitsgrad kategorisiert, sodass der Leser leicht einschätzen kann, ob der eigene Wissensstand den erforderlichen Fähigkeiten entspricht. Das hilft gewiss da
Markus Wäger www.markuswaeger.com
webdesigner 04/2013
RATGEBERBuchrezension, Modernes Webdesign
bei, Frust zu vermeiden und sich langsam an die einzelnen Herausforderungen heranzutasten sowie die unzähligen Facetten des Bildbearbeitungsprogramms schrittweise kennenzulernen. Der Autor greift hier auf seine langjährigen Erfahrungen als Trainer zurück und weiß genau, welche Fragen am häufigsten auftauchen und welche speziellen Themen, gerade für Einsteiger, am schwierigsten zu bewältigen sind. Wenn nötig beginnen die Kapitel mit einem Grundlagenexkurs, in dem alle für die folgenden Seiten notwendigen Informationen kurz und kompakt erläutert werden. Gut ist auch, dass die Workshops jeweils durch einen kurzen Vorspann eingeleitet werden, der den Leser darüber informiert, was man lernen kann, welche Werkzeuge und Funktionen verwendet werden und wie das Endergebnis sein aussehen wird. Die praktischen Workshops sind wirklich sehr gut zu verstehen und leicht nachvollziehbar, sodass sogar blutige Anfänger direkt in die Photoshop-Arbeit einsteigen können. Egal ob ein monochromes Bild koloriert, Hauttöne verbessert oder auch Haare freigestellt werden sollen, Wäger versteht es, auch sehr anspruchsvolle Techniken nachvollziehbar zu erläutern. Auch optisch überzeugt uns das Praxisbuch auf ganzer Linie. Dem Autor ist die Bebilderung des Praxisbuches und damit auch die Auswahl des Arbeitsmaterials sehr gut gelungen. Ein weiterer Pluspunkt ist außerdem, dass man das Buch auch gut als Nachschlagewerk verwenden kann. Der Autor hat darauf geachtet, viele Querverweise zwischen den einzelnen Exkursen und Workshops einzubauen. Zusätzlich rundet ein ausführlicher Index am Ende des Buches den Gesamteindruck ab.
^ G ru n d la g e n : In K a p ite l 1 v e rm it te lt d e r E xperte M a rku s W äger g ru n d le g e n d e K enn tn isse d e r S o ftw a re , d ie je d e r P h o to sh o p p e r kenn en so llte .
Fazit: Das Buch Adobe Photoshop CS6 - Schritt für Schritt zum perfekten Bild ist speziell auf die Bedürfnisse von Photoshop-Einsteigern zugeschnitten. Der Autor Markus Wäger greift auf seine Erfahrungen als Photoshop- und InDesign-Trainer zurück und weiß genau, wo die größten Einstiegsschwierigkeiten auf Bildbearbeitungs-neulinge lauern. Doch mit diesem Buch tappen Sie nicht in die An- fänger-Fallen und bleiben garantiert mit sehr viel Spaß am Ball. Erfolgserlebnisse motivieren bekanntlich, und genau das wollte der Autor mit diesem Werk erreichen. Leicht verständlich, sehr übersichtlich und kompakt erklärt der Experte das komplette Bildbearbeitungsprogramm. Ob Effekte, Retuschen, Farbkorrekturen, Montagen oder einfach grundlegende Fragen zum Arbeiten mit dem Programm - das Praxisbuch hat für alles eine Lösung parat. Toll ist auch, dass eine 30-tägige CS6 Extended-Testver- sion auf der DVD mitgeliefert wird. So steht einem sofortigen Eintauchen in die Photoshop-Welt nichts mehr im Wege. Wir können eine klare Empfehlung aussprechen. Photoshop-Neulinge sind mit diesem Praxisbuch auf jeden Fall auf der sicheren Seite. Fortgeschrittenen Photoshoppern kann dieses Buch vor allen Dingen als praktisches Nachschlagewerk dienen.
^ F re is te lle n m i t K a n ä le n : W enn a u to m a tis c h e F re is te lle r ve rsagen, z e ig t Ih n e n d e r Experte, w ie m a n m ith i l fe von K anä len fre is te lle n kann .
Fotolia 2 Cancom 71Galileo 7 Deutsche Pop 91Plentymarkets 23 hdpk 113dpunkt 29 Strato 115Host Server 59 Host Eurore 116Sonic Media 64, 65
04/2013 webdesigner 105
JOB BOERSEStellenanzeigen aus der Welt des Webdesigns
braintaase - b u s i n e s s t e c h n o l o g y
Online-Marketing & -Analysis Manager/inÜber BraintagsWir sind eine schnell wachsende E-Business 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 eigenes Rechenzentrum sind wir in der Lage, alle Kundenwünsche selbständig umzusetzen und entsprechende Lösungen über die eigene Software-Plattform zu entwickeln.
Neben den technologischen Leistungen stehen wir unseren Kunden als auch E-Business-Consultants zur Verfügung, bieten Web- & Marktanalysen an, entwik- keln umfangreiche Vermarktungs-Strategien und leiten unsere Kunden durch alle Online-Marketing- Kanäle.
Ihr JobGerade um den Bereich Online-Analyse und -Marketing stärker auszubauen, suchen wir dynamische und professionelle Unterstützung in beiden Teilbereichen:
• Umsetzung umfangreicher Online-Analysen• Entwicklung von Online-Marketing-Strategien• Planung, Betreuung und Monitoring der Kampagnen (SEO, SEA, Affiliate, Display, Social-Media, etc.)
• Optimierung der Shops- & Websites durch A/B-Te- sting, Usability-Optimierung, etc.
• Direkter Kontakt zu Kunden & Partnern• Aufbau eines Teams und Betreuung der Mitarbeiter
Ihre QualifikationenUm effektiv und kundenorientiert arbeiten zu können, ist uns Ihre Persönlichkeit mindestens genauso wichtig, wie objektive Anforderungen. Sie sollten daher ein hohes Maß an Teamfähigkeit mitbringen, durch Ihre Arbeit begeistern und sich vor allem selbständig neue Themengebiete erarbeiten können.
• Erfolgreich abgeschlossenes Studium der Betriebswirtschaftslehre oder Kommunikationswissenschaften (Schwerpunkt Marketing) oder ähnliche Qualifikationen
• Mindestens 3 Jahre Erfahrung im Bereich Online- Marketing
• Ausgeprägte SoziaIkompetenz, selbstsicheres Auftreten, sowie Verhandlungsgeschick
•Technisches Verständnis, strategische & analytische Fähigkeiten
Ihre ChancenSie arbeiten innerhalb eines dynamischen Teams im Umfeld einer aufstrebenden Online-Agentur. Durch unsere langjährige Erfahrung können Sie auf bestehende Strukturen zurückgreifen und sind dennoch flexibel in der Implementierung neuer Lösungsansätze. Durch unsere Arbeit mit renommierten und international tätigen Unternehmen, bieten wir Ihnen spannende Projekte, kreativen Freiraum und vielversprechende Perspektiven für Ihre berufliche Karriere.
Bitte senden Sie Ihre Bewerbung inklusive Lebenslauf, frühestem Eintrittstermin und Gehaltsvorstellungen an:
Braintags GmbH Jakob-Kaiser-Straße 12 47877 Willich
Christoph Trautmann Recruitment & Human Resources Tel:+49 (0)2154 4704100 Fax: +49 (0)2154 4704 111 E-Mail: [email protected] Web: www.braintags.de
Job-ID aufwww.der-webdesigner.net: j58
106 webdesigner 04/2013
JOB BOERSEStellenanzeigen aus der Welt des Webdesigns
braintagse - b u s i n e s s t e c h n o l o g y
Java Softwareentwickler/inÜber BraintagsWir sind eine schnell wachsende E-Business 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 eigenes Rechenzentrum sind wir in der Lage, alle Kundenwünsche selbständig umzusetzen und entsprechende Lösungen über die eigene Software-Plattform zu entwickeln.
Ihr JobAls Java Softwareentwickler/in arbeiten Sie innerhalb eines Teams an kundenspezifischen Lösungen und der Weiterentwicklung unseres patentierten Java Application Servers. Zu Ihren Aufgaben zählen:
• Analyse, Spezifikation und Dokumentation programmatischer Anforderungen• Entwicklung und Gestaltung von Software- und Anwendungsarchitekturen• Entwicklung von komplexen Kundenlösungen• Weiterentwicklung eines patentierten Java Application Servers• Betreuung und Beratung der Kunden
Ihre QualifikationenUm effektiv und kundenorientiert arbeiten zu können, ist uns Ihre Persönlichkeit mindestens genauso wichtig, wie objektive Anforderungen. Sie sollten daher ein hohes Maß an Teamfähigkeit mitbringen, durch Ihre Arbeit begeistern und sich vor allem selbständig neue Themengebiete erarbeiten können. Darüber hinaus erwarten wir:
• Ein abgeschlossenes IT-Studium oder eine vergleichbare Ausbildung• Fundierte Erfahrung mit technischer Konzeption / Software-Architektur von Web-Anwendungen• Sehr gute Kenntnisse aktueller Software- (JEE, Java,
SOA, etc.) und Web-Technologien• Ein strukturierter, analytischer und zielorientierterArbeitsstil
Ihre ChancenSie arbeiten innerhalb eines dynamischen Teams im Umfeld einer aufstrebenden Online-Agentur. Durch unsere langjährige Erfahrung können Sie auf bestehende Strukturen zurückgreifen und sind dennoch flexibel in der Implementierung neuer Lösungsansätze. Durch unsere Arbeit mit renommierten und international tätigen Unternehmen, bieten wir Ihnen spannende Projekte, kreativen Freiraum und vielversprechende Perspektiven für Ihre berufliche Karriere.
Bitte senden Sie Ihre Bewerbung inklusive Lebenslauf, frühestem Eintrittstermin und Gehaltsvorstellungen an:
Braintags GmbH Jakob-Kaiser-Straße 12 47877 Willich
Christoph Trautmann Recruitment & Human Resources
Tel:+49 (0)2154 4704 100 Fax: +49 (0)2154 4704 111 E-Mail: [email protected] Web: www.braintags.de
Job-ID a u fwww.der-webdesigner.net: j59
04/2013 webdesigner 1 07
S te lle n a n z e ig e n a u s d e r W e lt d e s W e b d e s ig n s
braintaase - b u s i n e s s t e c h n o l o g y
Head of Development / Entwicklungsleiter/inÜber BraintagsWir sind eine schnell wachsende E-Business Agentur mit über 10 Jahren Erfahrung in der Erstellung von Online-Shops, Websites und komplexen Cloud-Applikationen (CRM, Kam- pagnen-Management, Newsletter-Management, etc.). Durch unseren patentierten Java Application Server und unser eigenes Rechenzentrum sind wir in der Lage, alle Kundenwünsche selbständig umzusetzen und entsprechende Lösungen über die eigene Software-Plattform zu entwickeln.Neben den technologischen Leistungen stehen wir unseren Kunden als auch E-Business-Consultants zur Verfügung, bieten Web- & Marktanalysen an, entwickeln umfangreiche Vermarktungs-Strategien und leiten unsere Kunden durch alle Online-Marketing-Kanäle.
Ihr JobSie leiten ein Projektteam aus den Abteilungen Grafik, Frontend- und Backend-Entwicklung und setzen eigenständig Web- & Softwareprojekte um. Sie berichten direkt an die Geschäftsleitung, stehen in engem Kontakt mit dem Kunden, steuern die internen Ressourcen und planen Budgets, Timings, etc.. Zu Ihren Aufgaben gehören außerdem:
• Mindestens 3 Jahre Berufserfahrung in der Leitung von Software- und Webprojekten
• Kenntnisse der gängigen Frontend-Technologien wie (X) HTML/DHTML, XML/XSL,CSS, JavaScript...
• Strukturierte, selbständige und zielgerichtete Arbeitsweise, Eigeninitiative
• Gute Kenntnisse in Microsoft Office• Service- und Qualitätsbewusstsein sowie Kommunikationskompetenz
• Sehr gute Kenntnisse in Deutsch und Englisch in Wort und Schrift
Ihre ChancenSie arbeiten innerhalb eines dynamischen Teams im Umfeld einer aufstrebenden Online-Agentur. Durch unsere langjährige Erfahrung können Sie auf bestehende Strukturen zurückgreifen und sind dennoch flexibel in der Implementierung neuer Lösungsansätze. Durch unsere Arbeit mit renommierten und international tätigen Unternehmen, bieten wir Ihnen spannende Projekte, kreativen Freiraum und vielversprechende Perspektiven für Ihre berufliche Karriere.
• Analyse, Konzeption und Projektierung von webbasierten Softwarelösungen• Führung des Projektteams, Steuerung und Motivation der Mitarbeiter• Reporting intern und extern• Erster Ansprechpartner für den Kunden
Ihre QualifikationenUm effektiv und kundenorientiert arbeiten zu können, ist uns Ihre Persönlichkeit mindestens genauso wichtig, wie objektive Anforderungen. Sie sollten daher ein hohes Maß an Teamfähigkeit mitbringen, durch Ihre Arbeit begeistern und sich vor allem selbständig neue Themengebiete erarbeiten können.
• Erfolgreich abgeschlossenes Studium (z.B. BWL, Kommunikationswissenschaften, Informatik) oder eine vergleichbare Ausbildung
Bitte senden Sie Ihre Bewerbung inklusive Lebenslauf, frühestem Eintrittstermin und Gehaltsvorstellungen an:
Braintags GmbH Jakob-Kaiser-Straße 12 47877 Willich
Christoph Trautmann Recruitment & Human Resources
Tel:+49 (0)2154 4704 0 Fax: +49 (0)2154 4704 111 E-Mail: [email protected] Web: www.braintags.de
Job-ID auf www.der-webdesigner.net: j60
1 0 8 webdesigner 04/2013
JOB BOERSEStellenanzeigen aus der Welt des Webdesigns
braintagse - b u s i n e s s t e c h n o l o g y
Web-Entwickler/in, Webdesigner/inÜber BraintagsWir sind eine schnell wachsende E-Business Agentur mit über 10 Jahren Erfahrung in der Erstellung von Online- Shops, Websites und komplexen Cloud-Applikationen (CRM, Kampagnen-Management, Newsletter-Management, etc.). Durch unseren patentierten Java Application Server und unser eigenes Rechenzentrum sind wir in der Lage, alle Kundenwünsche selbständig umzusetzen und entsprechende Lösungen über die eigene Software-Plattform zu entwickeln. Neben den technologischen Leistungen stehen wir unseren Kunden als auch E-Business-Con- sultants zur Verfügung, bieten Web- & Marktanalysen an, entwickeln umfangreiche Vermarktungs-Strategien und leiten unsere Kunden durch alle Online-Marketing-Kanäle.
Ihr JobAls Web-, bzw. Frontend-Entwickler/in arbeiten Sie innerhalb unserer Frontent-Abteilung an Websites & Web-Appli- kationen. Je nach persönlichem Schwerpunkt arbeiten Sie dabei eng mit unserer Java-Abteilung an der eigentlichen Anwendung, oder setzen zusammen mit unserer Grafik- Abteilung Screendesigns um.
• Konzeption & Dokumentation von programmatischen Anforderungen
• Entwicklung von kundenspezifischen Lösungen• Umsetzung von Websites in FITML, CSS, JQuery, JavaScript, etc.
• Direkter Kundenkontakt und Arbeit innerhalb eines Projektteams
Ihre QualifikationenUm effektiv und kundenorientiert arbeiten zu können, ist uns Ihre Persönlichkeit mindestens genauso wichtig, wie objektive Anforderungen. Sie sollten daher ein hohes Maß an Teamfähigkeit mitbringen, durch Ihre Arbeit begeistern und sich vor allem selbständig neue Themengebiete erarbeiten können.
• Abgeschlossene Ausbildung zum „Anwendungsentwickler" oder vergleichbare Qualifikation
• Sehr gute Kenntnisse in aktuellen Webtechnologien wie (X)HTML/DHTML, XML/XSL,CSS, JavaScript
• Flohe Affinität zu digitalen Trends, Web-Technologien, Usability, usw.
• Mindestens 3 Jahre Erfahrung im Bereich Software- und/oder Webentwicklung
• Ausgeprägtes Qualitätsbewusstsein•Optional: Erfahrung in der Entwicklung nativer Apps und HTML5
• Optional: Erste Führungserfahrungen• Optional: Online-Marketing Know-How (SEO,Tracking, etc.)
Ihre ChancenSie arbeiten innerhalb eines dynamischenTeams im Umfeld einer aufstrebenden Online-Agentur. Durch unsere langjährige Erfahrung können Sie auf bestehende Strukturen zurückgreifen und sind dennoch flexibel in der Implementierung neuer Lösungsansätze. Durch unsere Arbeit mit renommierten und international tätigen Unternehmen, bieten wir Ihnen spannende Projekte, kreativen Freiraum und vielversprechende Perspektiven für Ihre berufliche Karriere.
Bitte senden Sie Ihre Bewerbung inklusive Lebenslauf, frühestem Eintrittstermin und Gehaltsvorstellungen an:
Braintags GmbH Jakob-Kaiser-Straße 12 47877 Willich
Christoph Trautmann Recruitment & Human Resources
Tel:+49 (0)2154 4704 0 Fax: +49 (0)2154 4704 111 E-Mail: [email protected] Web: www.braintags.de
Job-ID auf www.der-webdesigner.net: j61
04/2013 webdesigner 109
JOB BOERSEStellenanzeigen aus der Welt des Webdesigns
INTERNETONEA K T I E N G E S E L L S C H A F T
Senior/Lead Developer (m/w)Agile Entwicklung, neue Projekte und 1-Wochen Sprints schrecken dich nicht ab, sondern lassen dich aufhorchen? Du entwickelst „schon immer" und hast bereits erste Erfahrung damit, dein Wissen an Junioren weiterzugeben? Dann solltest du zu uns ins Herz von Köln kommen und mit uns durchstarten nach ganz Oben, denn
wir suchen derzeit einenSenior/Lead Developer (m/w)
Was machst du?• Neu- und Weiterentwicklung neuer und bestehen
der Projekte• Backend Entwicklung in C#/MS SQL 2008• Frontend Entwicklung in HTML/CSS/JavaScript• fachliche Führung unseres internationalen Ent
wicklungsteams
Was bringst du mit?• mind. 3-5 Jahre Berufserfahrung mit umfangrei
chen Entwicklungsprojekten• sicherer Umgang mit dem .NET Framework, C# Vi
sual Studio sowie HTML/CSS/JavaScript• versierter Umgang mit dem SQL Server 2008• Architektur-Kenntnisse• SCRUM Erfahrung• erste Führungserfahrung• Lust und Spaß daran, dich „richtig rein zu knien"
Warum wir? Weil wir....• immer höher hinaus wollen und Stillstand ver
meiden!• dir viel Eigenverantwortung bieten und die Mög
lichkeit, dich und deine Ideen einzubringen!• unsere Büros in einer top Lage im Herzen von
Köln haben!• dir kostenlose Getränke und somit u.a. Koffein
bieten!• einfach die Besten sind!:-)
Das klingt nach deiner neuen Stelle? Dann sende bitte deine vollständigen und aussagekräftigen Bewerbungsunterlagen unter der Kennung DWEB-SLD an
Wir freuen uns auf dich!
Weitere Infos findest du auf www.internetone.de
INTERNETONE AG KölnTurm / Im Mediapark 8 50670 Köln
Job-ID aufwww.der-webdesigner.net: j 103
1 0 webdesigner 04/2013
JOB BOERSEStellenanzeigen aus der Welt des Webdesigns
OnPage. orgWebentwickler (w/m)Du bist „durch und durch" Webentwickler? Suchst hier nach einer neuen Herausforderung, in der du dein bisheriges Know-how einbringen und erweitern kannst? Dann komm zu uns ins Herz von Kölle und starte mit uns durch nach ganz Oben denn,
wir suchen derzeit einenWebentwickler (w/m)
Was machst du?• Umsetzung anspruchsvoller Templates für komplexe Webseiten und mobile Endgeräte anhand von Design-Vorlagen und Konzepten• Gestaltung und Entwicklung modernster Web-Portale und interaktiver Web-Frontends• dabei hast du stets im Blick, dass dieTempla- tes im Backendsystem integriert werden müssen. Hierfür hältst du ständig Kontakt mit den entsprechenden Entwicklern.
Was bringst du mit?• mind. 2 Jahre Erfahrung in der Webentwicklung• sehr gute Kenntnisse in HTML, CSS, JavaScript und Ajax• Begeisterung und Gespür für hochwertige und stilvolle Webauftritte• analytisches Denken, hohes Einschätzungsvermögen und konzeptionelle Stärke• sehr gute Englischkenntnisse und idealerweise Deutschkenntnisse• Lust und Spaß daran, dich„richtig rein zu knien"
Warum wir? Weil wir....• immer höher hinaus wollen und Stillstand vermeiden!• dir viel Eigenverantwortung bieten und die Möglichkeit, dich und deine Ideen einzubringen!
• unsere Büros in einer top Lage im Herzen von Köln haben!• dir kostenlose Getränke und somit u.a. Koffein bieten!• einfach die Besten sind!:-)
Das klingt nach deiner neuen Stelle? Dann sende bitte deine vollständigen und aussagekräftigen Bewerbungsunterlagen unter der Kennung DWEB-WE an
Wir freuen uns auf dich!
Weitere Infos findest du auf www.inter- netone.de
INTERNETONE AG KölnTurm / Im Mediapark 8 50670 Köln
Job-ID aufwww.der-webdesigner.net: j 102
04/2013 webdesigner
r
DownloadZusatzm aterial bequem herunterladenDie benötigten Materialien für die Workshops können Sie ganz bequem von unserer Webseite herunterladen. Mit dem exklusiven Leser-Passwort haben Sie die Dateien immer und überall zur Hand.
Download-Anleitung für die WebdiskL
P a s s w o r t
f676g
I t
Wenn Sie unseren Download-Bereich das nächste Mal besuchen, müssen Sie das Passwort nicht erneut eingeben, sondern können die Dateien direkt herunterladen. Wir wünschen viel Spaß beim Nachbauen der Workshops! Bitte beachten Sie dabei die eventuellen Nutzungseinschränkungen der einzelnen Dateien.
Hinweis:Die Download-Daten zu unseren Magazinen stehen unbefristet auf unserer Webseite zur Verfügung.
0 1
0 2
Geben Sie in der Adresszeile Ihres Internetbrowsers www.sonic- m edia-download.de ein. Falls Sie noch nicht auf unserer Webseite registriert sind, klicken Sie bitte auf .Registrieren' und folgen Sie dann den Registrierungsanweisungen. Für die Registrierung benötigen Sie eine gültige E-Mail-Adresse. Falls Sie bereits registriert sind, melden Sie sich wie gewohnt an.
Klicken Sie dort auf den Button,Leser-Passwörter', der sich auf der Leiste des .Anmelden'-Buttons befindet.
-1U .Webdisk
œ s ç p e r a u d io
»«■« +M * m— m . H J
W ftfrd lU
e n t« w »ftf -i m t i i f Mir M m i m
05 Auf der folgenden Seite ist das entsprechende Heft noch einmal aufgeführt. Per Klick auf den Heftnamen gelangen Sie zu der Seite mit der Download-Option.
1)Om«Om
06 Auf dieser Seite finden Sie das Heftcover und einige weitere Informationen zum Heft. Ganz unten finden Sie die Pakete, die die Downloads enthalten.
co<* Cäi ö** MftdHigr«
O GftM t i *0 >« »H C#
03 Daraufhin werden Sie zur Passwörter-Seite weitergeleitet, wo Sie dann in dem Feld,Leser-Passwort' das nebenstehende Passwort eingeben. Klicken Sie nun auf den Button ,Absenden'.
les«fpa$swort aktiveren
04 In dem grünen Feld erscheint die Meldung, dass das Heft aktiviert wurde. Sie finden es in der Liste unter,Aktivierte Magazine'. Klicken Sie nun auf den Heftnamen.
r * 1 «V2IP.T
==J
Passw ort e*
AJcrvierle Maqazire
i-lcU-» Ci« »<n «vi alle dtmrt :• MUn
der M;b3c3>y«-|C4r? :i :?i der •Wc*>.Jei-*r«r|CyST?r
07 Stehen mehrere Pakete als Download bereit, müssen diese nacheinander heruntergeladen werden. Wählen Sie ein Paket aus und klicken Sie auf den Button .Datei herunterladen'. Nach Bestätigen des Dialogs startet der Download. Das Paket wird in den Download-Ordner kopiert.
itM*
A -äv.
• >*>■«
08 Kopieren Sie das ZIP-Paket in Ihren Arbeitsordner und entpacken Sie es mit einem ZIP-Archivierungsprogramm. Sollten Sie ein solches Programm nicht zur Hand haben, finden Sie auf unserer Webseite links neben dem Download einen Link, um sich das beliebte, kostenfreie ZIP-Archivierungsprogramm 7zip herunterladen zu können.
Lizenzierung Von unserer Webseite (www.sonic-media-download.de) herunter- geladene Shareware-Programme erfordern für die kontinuierliche Nutzung eine Registrierung beim Hersteller oder müssen von diesem erworben werden. Freeware kann jederzeit kostenfrei genutzt werden. Die Nutzung von Software-Testversionen ist entweder zeitlich begrenzt, oder es wurden einige Funktionen deaktiviert.
I 1 2 w ebdesigner 03/2013
H o c h s c h u le d e r p o p u lä r e n K ü n s te professionell
persönlichpraxisorientiert
BeW e<3 teractio»\l\|ebs' eS APPS Si90er'
Nächster Studienstart am 1. April. Besuchen Sie unseren nächsten Infotag am 23. März in Berlin!
Hier und jetzt informieren: www.hdpk.de
VORSCHAU
CSS3 Transition, Animation, Transform und 3D-TransformRuckelnde, unschöne Animationen sollen mit CSS3 der Vergangenheit angehören. Animierte Deckkraft, Farben und Größen werden jetzt vom CSS selbst übernommen, ganz ohne eine Zeile JavaScript-Code schreiben zu müssen. Das ist wesentlich performanter, aber entlastet natürlich auch den JavaScript-Prozess.
&3CKUP
BWCßBtoQ
State
rCOFFEE
ii k&mqs
w
mmjiakuiÄff* l l i r U l Áo f m a n t t i
9AM
Í1'LJion
9
Pulse Pro <1
_.== Pulse
aacKup**0*
u
Viele Webworker kennen diese Situation: Der Kunde hat sich bei Vergabe des Auftrags für eine Image-Website entschieden, die im Grunde nur eine digitale Visiten
karte mit zwei bis drei Seiten Content und einer Kontaktmöglichkeit darstellt. Für solche Anforderungen ein vollwertiges Content-Management-System mit Anbindung an eine Datenbank einzusetzen, wäre wie das sprichwörtliche mit Kanonen auf Spatzen schießen. Eine HTML-Version mit einem Kontaktformular würde den Bedarf vollkommen decken, doch leider fehlt dann dem Kunden eine Benutzer
schnittstelle, um die Seite gelegentlich zu pflegen. PulsePro stellt hier eine interessante Lösung dar, mit der auch sehr kleine Seiten bequem editiert werden können.
Webtypografie und Technik
T H c
„Schriftarten können verspielt oder seriös wirken; Farben können die Inhalte betonen. Damit der gute Eindruck auf der Website durchgängig bewahrt wird, sollten Sie optimal für das Web geeignete Schriftarten und Farben wählen. Klingt das zu einfach? Ist es aber nicht." Dieses Zitat von Usability-Pabst Jakob Nielsen ist bereits einige Jahre alt, hat aber an seiner Gültigkeit nichts eingebüßt - im Gegenteil, für eine gelungene Webtypografie ist es aktueller dennje. Webdesigner Oliver Berghold zeigt Ihnen verschiedene Tricks und Techniken für das Einbinden von Typografie in Websites.
Heft 05/2013 ab Mittwoch24.04.2013im Handel erhältlich.
Aus aktuellem Anlass können sich die Themen kurzfristig ändern.
114 webdesigner 04/2013
STRATO
„Kein Hosting-Paket ist günstiger als bei STRATO.Außer bei STRATO!"
1m.Ilias
X , \
) • ' '
1
Vergleichen lohnt sich!HOSTING 1&1
Dual BasicSTRATOPowerWeb Basic
Standardpreis 6,99 €/Mon. 4,99 €/Mon.
Einrichtungsgebühr 9,60 € 8,60 €
Inklusivdomains 4 4
Postfachspeicher 2GB 5GB
Webspace 10GB 10GB
mpro
Stand 6. März 2013. MindestVertragslaufzeit STRATO 12 Monate, 1&1:6 Monate. Preise inkl. MwSt.
Sie sparen bis zu 25 € im Jahr!
M arcus Weltchrom.tv k o n k u r r e n z i o s G Ü H S T Iö !
» strato.de/hosting* Aktion bis 30.04.2013: PowerWeb Basic 6 Monate für 0 €/Mon., anschließend 4,99 €/Mon.
Einmalige Einrichtungsgebühr 8,60 €. MindestVertragslaufzeit 12 Monate. Preise inkl. MwSt.Servicetelefon: 030 - 300146 - 21
PERFORMANCE-GARANTIENeu! Root Server 2.0
Jetzt noch besser!
► bis zu 128 GB RAM► bis zu 32 CPU-Cores► bis zu i|. x 3.000 GB
Festplatten
„ Mit Root Server 2.0 bieten wir Ihnen ein Optimum an Performance und Flexibilität. Dazu profitieren Sie von einem Bedienungskomfort, den Ihnen sonst nur ein virtueller Server bieten kann."
Patrick SchodenHead of Sales Cloud Hosting
Root Server 2.0ab €49 mtl.
€0 Setupgebühr*Aktion bis 30 .0^.2013
Optimale Leistung und Flexibilität für Ihre Hochleistungsanwendungen.
Mehr Power
Eigenes Hardware RAID
Für beste I/O-Raten und Datensicherheit.
oMehr Komfort
Snapshot inklusive
Sichern Sie jederzeit einen Versionsstand Ihres Servers.
□iSO
Mehr Flexibilität
Eigene ISO-lmages
Installieren Sie eigene Betriebssysteme.
Jetzt online bestellen unter: www.hosteurope.de/Server/
HOSTEUROPE
www.hosteurope.de
♦Die A ktio n € 0 S e t u p g e b ü h r g ilt a u s s c h l ie ß l ic h f ü r die N e u b e s t e l lu n g ein e s Root Servers bis zu m 30.0^.2013. Einfach G u tsc h e in c o d e O1203LW bei der B estellung a n g e b e n . Der Betrag w ird Ih n e n
g u t g e s c h r ie b e n . Sonst zzgl. e in m a l ig e r S e t u p g e b ü h r v o n € 9 9 . Keine M indestVertragslaufzeit. Die K ünd ig un gsfrist für Root Server beträgt i* W o ch en zum M o n atsen d e.Alle a n g e g e b e n e n Preise in k lu s iv e MwSt.
Voche