5Si SEO Für Wordpress CSS 3 Tutorial HTML Newsletter

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

5Si

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

i n A

SEO für WordPress CSS 3 Tutorial HTML Newsletter Immer noch ein Objekte ohne Flash & Wir zeigen Ihnen unterschätztes Thema JavaScript animieren wies funktioniert Europas Nr. 1 kreative Ressource 21 Mio. lizenzfreie Fotos, Videos und Vektoren ab 0,75€. Tel. +49 (0)30 208 96 208 | www.fotolia.de EDITORIAL

Ltí j g g stcrrr

webdesigner erscheint zehnmal jährlich bei Sonic Media - ein Geschäftsbereich der music support group GmbH Hauptstraße 31,53604 Bad Honnef Tel.: 02224 98826 0, Fax -79 Mail: [email protected] www.webdesigner-magazin.de

Herausgeber und Dipl.-Ing. Hans-Günther Beer (V.i.S.d.P) Chefredakteur [email protected] Willkommen ! Redaktion Jürgen Ortmann [email protected]

Tobias Henke [email protected] nline Shops stellen als Webseiten eine Besonderheit Fraqen an die [email protected] dar, da für den Betreiber von der Funktionalität dieser Redaktion _ _ Seiten enorm viel abhängt. Inzwischen ist der Markt für O Autoren dieser Oliver Berghold, Daniel Flöter, Tobias Henke, Andreas Shopsysteme riesig und die Entscheidung für eines dieser Syste Ausgabe Hitzig Jürgen Ortmann

me und gegen seine Konkurrenzprodukte erfordert eine intensive Grafik & Layout Ronald M. Stirner Recherche, da zum einen die Kosten für das Shopsystem und den [email protected]

Support sich stark voneinander unterscheiden. Zum anderen Lektorat Dagmar Schellhas-Pelzer muss unbedingt sichergestellt werden, dass das System Zukunfts Gesamtanzeigen- Daniyal Rahman fähigkeit ist und genügend Möglichkeiten für einen Ausbau bie leitung Tel.: 02224 9882635 tet. Aus diesem Grund haben wir uns eine Auswahl von insgesamt Fax: 02224 9882679 [email protected] 18 Shopsystemen in Bezug auf den Funktionsumfang näher ange Key Account Brigitta Reinhart,Telemarketing Lehmkuhl schaut und die Ergebnisse in einem großen Ratgeber zusammen Manager Tel.: 089 464729, Fax: 089 463815 getragen. Zur besseren Vergleichbarkeit wurden die wichtigsten Kriterien in einer Tabelle zusammen [email protected] geführt. Karl Reinhart, RMSGmbH Daneben findet auch das Thema WordPress natürlich in dieser Ausgabe statt. Wer ein WordPress-The- Tel.: 089 464729, Fax: 089 463815 me nach eigenen Vorstellungen umbaut, wird sich spätestens beim Installieren des ersten Updates für [email protected] das zugrundeliegende Theme wundern, wenn nämlich die vorgenommenen Änderungen dabei ein Druck Senefelder Misset, fach überschrieben werden. Eine Lösung für dieses Problem ist die Ausgliederung der Änderungen in Mercuriusstraat 35, 7006 RK Doetinchem so genannte Child-Themes. Wie genau diese funktionieren und was Sie dabei beachten sollten, erfah Niederlande ren Sie in dem Tutorial ab Seite 94. In weiteren Tutorials zeigen wir Ihnen außerdem, wie Sie mit CSS3- Vertrieb IPS Pressevertrieb GmbH Animationen umgehen, was sie bei HTML-Newslettern beachten sollten oder welche vielversprechen Meckenheim den Möglichkeiten Web Storage und Super-Cookies für Websites bieten. Bezugsmöglich Zeitschriftenhandel, keiten Fachhandel, Abonnement

Viel Spaß mit der vorliegenden Ausgabe! Preise Einzelbezug 12,95 € Jahresabonnement Inland 109 € für 10 Ausgaben inkl. MwSt und Porto (Ausland: 126 Euro inkl. Porto) Jürgen Ortmann,, Redaktion Webdesigner 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: H RB196730 USt-ldNr.: DE281259857

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

Cache ist noch leer : 1 IMPRESSUM m anifest

Webseite ameigen und in den Anwendungvcache : Manifest-Datei: Anwendungscache laden Cached die in def Beschreibt den Manifest-Datei stehenden Anwendungscache D ateien oder KOLUMNE Cache ist angelegt : * Ist das noch innovativ oder kann das weg? 6 O) Manifest Datei ändern: # Anwendungscache • Dateien aufnetunen aktualisieren • Dateien löschen • Version aktualisieren NEWS & BUCHREZENSIONEN

W ebserver Client/Browser News und Buchvorstellungen 8 Neuigkeiten rund ums Web Web-Anwendungen offline Buchrezension 104 nutzbar machen à "Photoshop CS6" von Markus Wäger Dank sogenannter Super-Cookies können auch kom plexe Web-Anwendungen verfügbar gemacht werden, wenn die Internetverbindung unterbrochen wird. JO B BOERSE > 1 Stellenangebote für Webworker 106

WEB-GALERIE > 1 Interessante Single Pages 48 \ KONZEPriONitRuMG L j w u r - f Aufwändig gestaltete Einseiter Online Shops 100 Web Designs für Online Vertriebsplattformen

Um setzung RATGEBER Web-Anwendungen offline nutzbar machen 14 Web Storage, Application Cache und IndexedDB

Shopsysteme im Vergleich 24 18 Systeme und ihre Stärken und Schwächen Testing un Korrektur Workflow für Web Designer 34 Mehr Effektivität durch geregelte Abläufe

SEOfür WordPress 72 Die wichtigsten Techniken für besseres Page Ranking

Child Themes in WordPress 88 Workflow für Web Designer Was Web Designer SEO-technisch beachten sollten Mit 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 I-

>~n *>t j*> jt.j * < * — * - J i t V »— * - 92 82 88 t J I Jl* ; % 4 I 41 II » 2 ^ 4 ~ p J JEDEN ZWEITEN ARTIKEL! ZWEITEN JEDEN ESIST UNSER 1. GEBURTSTAG! 20% RABATT 20% •twWM'Ä'iAI'WMl «MW» »W *0 RAIATT INCCT AM MTTIWOCH. M H 27. H PISRUAft M MTTIWOCH. AM INCCT RAIATT !«■««• •• !«■««• * » M u sane w w n sca « e« n M*M»u» MC o UM DAS ZU FEIERN. GIBT SS DAS HIER: 0•RMff PKT> f f M •30 R V 2 » fr »4 123 **• « A r « U l f U V Themes die optimale Lösung. optimale die Themes WP-Theme nicht mit dem nächsten Update Update nächsten dem mit nicht WP-Theme o Nwlten nutzen. Newslettern von lässt Kniffen einigen Mit darstellen. einwandfrei des Themes überschrieben werden, sindChild werden, überschrieben Themes des u u e Sternen den zu Auf Gestaltung fürdie gut sehr trotzdem HTML sich hl hms n WordPress in Themes Child Mail-Clients können HTML-Seiten nicht immer immer nicht HTML-Seiten können Mail-Clients Damit individuelle Anpassungen bei einem einem bei Anpassungen individuelle Damit Arbeit mit Bezierkurven. mit Arbeit HTML-Newsletter gestaltenHTML-Newsletter Mit Illustrator lassen sich trendige Retro-Grafiken trendige sich lassen Illustrator Mit und -Banner gestalten. Grundlage dafür ist die dafür Grundlage gestalten. -Banner und I M f » « mm AW ». Œ-J ? I • nln * J SA\ i w o-r.i • ; ^ j ^ *\H JiA T. .T > « M « « MM. * I I« * I.« ■ haben Sie die Dateien immer und überall zurHand. überall und immer Dateien die Sie haben Leserpasswort exklusiven dem Mit herunterladen. Webseite unserer von bequem Sie können Workshops für die Material Dasbenötigte Vorschau 60 ansprechen richtig Email-Clients und Web- einsetzen CSS3-Animationen Photoshop mit Web-2.0-Schaltflächen Videos für WordPress Content für den alsBühne Hintergründe Aufwändige anlegen Code im direkt Grafiken Grafiken mitGrafiken SVG & HTML5 erzeugen gestalten RD-tauglich vornherein von Stylesheets l bet afnlrtn76 Auf zuSternen den laufenAlslernten Objekte Mit Illustrator Banner im Retro-Look gestalten Retro-Look im Banner Illustrator Mit Social Media-Buttons ansprechend gestalten Media-Buttons ansprechend Social einbinden inWordPress-Seiten richtig Filme TUTORIALS neetnezihi 105 Inserentenverzeichnis HTML-Newsletter gestalten Best Practice fürBest Websitesflexible erklärt Schritt für Schritt onodAliug112 Download-Anleitung Designfür App-Downloadseite, Teileine 1 Profi-Techniken der-webdesigner. somc-meaia. 04/2013 der webdesigner 04/2013 webdesigner der ...... : W i J ü 114 82 54 44 40 66 92 5 KOLUMNE

WILLY WEB MASTER

Ist das innovativ oder kann das weg?

Manchmal schreibt das digitale Zeitalter wirklich seltsame Geschichten. Man 1011101 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 1 1 1 0 0 0 1 0 0 1 sein kann, ist spätestens der Nutzen von sprechenden Schuhen, wie Google sie 01101 kürzlich in Texas vorgestellt hat, kaum noch nachvollziehbar. DieGoogle-Schu- he sollen unter anderem mit Hilfe mehrerer Sensoren Bewegungen messen können. Ob es wirklich einen Nutzen hat, wenn sich plötzlich die Schu he mit Sprüchen wie„Das ist super langweilig" melden, darf bezweifelt werden. Allerdings befindet sich das Projekt „TaIking Shoe" noch weit entfernt von jeglicher Marktreife. Ähnlich hat man aber bis vor Kur zem auch über Google Glass gedacht und die Datenbrille soll nun im Januar 2014 tatsächlich in den Verkauf gehen. Auch bei App les iWatch stellt sich die Frage, ob die Armbanduhr wirklich neu erfunden werden musste. Okay, ein Smartphone in Form einer Uhr gibt es bisher noch nicht. Aber reicht das als Argument aus, um ein solches Produkt auf den Markt zu bringen? Auffällig bei diesen Innovationen ist vor allem die Koppe lung von Software an einen Gebrauchsgegenstand. Es scheint auch einem „klassischen" Internetunternehmen wie Google viel daran zu liegen, seine Kunden mit diver sen Geräten auszurüsten. Und sicherlich hat dieser Trend auch damit zu tun, dass man bei den Unternehmen fie berhaft nach neuen Wegen sucht, noch mehr Daten über seine Kunden zu sammeln. Denkbar wäre, dass die Google-Brille Daten über die Umgebung ihres Trägers übermittelt, ohne dass es ihm unbedingt bewusst ist. Eine Armbanduhr lässt man nicht mal eben liegen wie ein Smartphone oderTablet, sondern trägt sie am Handgelenk überall mit hin. Gleiches gilt für Schuhe. Es bleibt abzuwarten, wie erfolgreich diese Produkte sein werden, sofern sie denn auf den Markt kommen. Bei den neuen Innovationen handelt es sich nicht zuletzt um Acces soires, die damit auch modischen Aspekten unterliegen. Nicht jeder wird eine Brille tragen wollen, die genauso verbreitet ist wie heutzutage das iPhone. Vermutlich werden die Produktzyk len im Falle des Erfolgs ähnlich rasant sein, wie beim iPhone, sodass praktisch im Jahrestakt neue Versionen auf den Markt kommen. Und sicherlich sind die neuen Versionen außer mit einem neuen Design auch mit jeder Menge neuer Technik ausgestattet, deren Nutzen für den Anwender nicht immer ersichtlich ist.

6 webdesigner 04/2013 Aktuell 2u iOS 6

JW** ' v « 4

A U t u e U *®p‘ zu \OS 6 c

icto n c» - NSSearchPAthForDi rector i< :ft - (diractorle* ot>)ectAtIndex!0|; I (re su lt« ofcjectAt Index r (iadexPath

MlectedS^iMmtIndex) — 1) < at jor »etUblqultoua*NO lt«n*tU9U«surl a deatinatlonURL: (K5UHL filoURLM < Apps programmieren für iPhone und iPad

Das umfassende Handbuch

► Grundlagen der Anwendungsentwicklung mit dem SDK 6 ► Apps entwickeln, testen, abs.chern und vcroffei.ll.chen App-Entwicklung mit iOS 6 ► Inkl. Xcode. ¡Cloud. Twitter. Debugging, Versteuerung, zahlreicher Praxisbeispiele 1012 Seiten, mit DVD, 39,90 €

ISBN 978-3-8362-1915-0 LEHR- Progra/Tiin gemaft SS AlleRm*«'* T o o K ^ r *14 V.deo-Uk1.onen Ju S c h G Galileo Com puting

Professionelle App-Entwicklung!

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

Unsergesamtes Programm »www.GalileoComputing.de

f » facebook.com/GalileoPressVerlag » » twitter.com/Galileo_Press Galileo Computing R+ » gplus.to/GalileoPress Wissen, wie's geht. NEWS______Neuigkeiten aus der Welt des Webdesigns NEWS Onpage mit Xovi - Erfolg dank WDF*IDF Auch wenn es nach dem Pinguin-Update Googles vielleicht den Anschein gehabt

...... - «5.** haben mag: Die Onpage-Optimierung ist nicht out. Im Gegenteil: Überlegungen wie diezurTermingewichtung SEO-Texten, WDF*IDF als„Zauberformel", bezeugen «*VW| den hohen Stellenwert der Onpage-Optimierung. Auch die Xovi GmbH, Vertreiber der gleichnamigen SEO Controlling und Online M i m H * 1 r ~ T Marketing Suite, sieht die Zeit für mehr Onpage-Optimierung gekommen und er

«n weitert das hauseigene Onpage-Tool. Die Grundlegenden Aufbereitung sind dabei gleich geblieben: Weiterhin erfährt •t der Nutzer, ob es doppelte Inhalte auf der Seite gibt, Seiten nicht erreichbar und • •• falsch weitergeleitet sind, Überschriften und Formatierungen suboptimal verwen • I det werden, Metaangaben hinterlegt wurden und dergleichen mehr. • M Hinzugekommen sind nun zwei weitere Rubriken des Onpage-Tools, die allesamt zum Ziel haben SEO-Texte optimal zu gestalten und zielführend zu gestalten. MH t Mit Karl Kratz' berühmter Formel „WDF*IDF" arbeitend, können Nutzer damit nicht OU 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äum Der Dresdner Business Hoster internet24 Webhosting-Leistungen anbieten möchten, sonderen Wert auf eine persönliche Betreu GmbH startete zum Jahreswechsel bereits in hat internet24 spezielle Agenturserver-Tarife ung. Deshalb beginnt der Support nicht in das 16. Jahr der Geschäftstätigkeit. Zu diesem und Reseller-Angebote im Portfolio. Das Ser einem Callcenter, sondern bei einem direkten besonderen Anlass hat der Hoster exklusiv für vermanagement erfolgt dabei über inter- Ansprechpartner. Das zertifizierte Technik- die Leser des Webdesigners eine ganz spe net24, so dass die Agentur sich auf ihr eigent Team ist rund um die Uhr, auch an Feiertagen, zielle Aktion: Neukunden, die sich bis zum liches Kerngeschäft konzentrieren kann. Im per Telefon und E-Mail erreichbar. 30.04.2013 für einen dedizierten Server von Rahmen einer Zu internet24 entscheiden, erhalten auf die er sammenarbeit mit sten drei Monatsgebühren 50 Prozent Erlass. internet24 können Bei der Bestellung muss einfach nur das Co Agenturen wäh dewort 15i24 angegeben werden. len, ob die Dienst Bei den dedizierten Servern können Neukun leistungen unter den zwischen einem Managed oder einem eigenem Namen Root Server wählen, je nachdem, welcher verkauft werden technische Background im Unternehmen sollen, oder ob die vorhanden ist. Managed Server bieten sich Agenturen als Ver insbesondere dann an, wenn die technische mittler auftreten Einrichtung sowie die Serveradministration möchten. Beim lieber ausgelagert werden soll. Für Web- und Kundenkontakt Werbeagenturen, die ihren Kunden auch legt internet24 be-

8 webdesigner 04/2013 NEWS Neuigkeiten aus der Welt des Webdesigns

Adobe Creative Cloud für Teams Roadshow / Besuchen Sie die Adobe Creative Cloud * • • V J T für Teams Roadshow in einer Stadt in Ihrer /• Nähe und erfahren Sie von renommierten - S v w . ; Adobe Experten, welche Vorteile Ihnen der ' m t p - Einsatz der Creative Cloud für Teams in Ih O* rem Unternehmen bietet. Die Veranstaltung richtet sich an Unternehmen, die innovative Ideen für Design, Web und Video umsetzen und mehrere Kreativarbeitsplätze haben. Die Adobe Creative Cloud für Teams bietet das ultimative Kreativ-Toolset für die Krea tivabteilung von Unternehmen, speziell auf Teamarbeit abgestimmte Features und ein einfaches Lizenz-Management. DieTermine der Roadshow in der Übersicht:

09.04. Hamburg 11.04. Stuttgart 12.04. München 18.04. Wien 19.04. Köln 23.04. Berlin mopreis von nur € 49,- pro Monat zzgl. be Muse oder Adobe Edge Tools arbeiten MwSt. Dieses Modell bietet Ihnen nur oder mit HTML, CSS und JavaScript ein Mit der Creative Cloud für Teams können CANCOM. Informieren Sie sich jetzt bei drucksvolle Inhalte und Apps für mobile die kreativen Mitarbeiter in Ihrer Firma Ihrem CANCOM Ansprechpartner! Adobes Endgeräte erstellen. oder Arbeitsgruppe sämtliche Desktop- langjähriger Kooperationspartner berät Erleben Sie live, wie Teammitglieder dank Applikationen der Adobe Creative Suite Sie umfassend über das neue Adobe VIP der neuen Funktionen, Programme und 6 sowie weitere Programme und Dienste Lizenzprogramm. Apps effizienter zusammenzuarbeiten - nutzen, darunter Adobe Lightroom 4, Ad Sie entscheiden, ob Sie die Abo-Kosten für intern aber auch extern mit Kunden und obe Acrobat XI, Adobe Muse, Adobe Edge Ihre Kreativarbeitsplätze als Einmalzahlung Partnern. Lernen Sie die neue Verwal Tools & Services und viele mehr! oder bequem in 12 Monatsraten bezahlen! tungskonsole für Lizenzmanagement und Die Abo-Lizenz umfasst zudem optional Bitte wenden Sie sich bei Fragen und be Teamverwaltung kennen und erfahren Sie, pro Arbeitsplatz 100 GB Speicherplatz in züglich der Finanzierung an unser Creative welche Vorteile Ihnen das neue VIP Lizenz der Cloud sowie Zugriff auf Online-Dien Cloud Competence Center! programm im Vergleich zur Lizenzierung ste für Zusammenarbeit innerhalb priva Das Arbeiten mit der Creative Cloud für über herkömmliche Lizenzprogramme ter Arbeitsgruppen. Hinzu kommen neue Teams bietet Agenturen, Verlagen und bietet. Publishing-Lösungen für innovative Apps Kreativabteilungen völlig neue Möglichkei Im Vortrag über iPad Publishing lernen Sie, und Medieninhalte. Neue Features und ten im Einsatz und bei der Verwaltung von wie Sie Inhalte, die mit InDesign erzeugt Applikationen stehen unmittelbar nach Adobe Software. Kreativteams arbeiten wurden, mit wenigen Handgriffen in digi Veröffentlichung zum Download bereit. immer mit der neuesten Adobe Software, tale App-Dateien umwandeln und qualita Während der Abolaufzeit nutzen Sie immer neuen Diensten und den innovativsten tiv hochwertigen digitalen Content erzeu die neueste Software - Upgradekosten Tools und können Projekte gemeinsam gen können. entfallen vollständig. planen und bearbeiten. Und zuletzt präsentieren wir Ihnen in ei Für einen günstigen Monatsbeitrag „mie Lernen Sie die neuen exklusiven Creative nem exklusiven Apple Vortrag, welche ten" Sie einen Kreativarbeitsplatz anstatt Cloud Features kennen und erfahren Sie, Vorteile Ihnen die neuesten Apple Techno Lizenzen zu kaufen - zum günstigen Pro wie Sie mit neuen Applikationen wie Ado logien

04/2013 webdesigner 9 NEWS______Neuigkeiten aus der Welt des Webdesigns

Nachhaltige V erbesserungen

für U n t er n eh m en entstehen

im Dialog mit M itarbeitern ,

Kunden und der Geschäfts-

f u h r u n g .

.heidischerm.de

IT-Sicherheit, Qualitätsmanagement, Prozessoptimierung und Datenschutz

Sicheres Hosting mit Hostserver.de

Die Hostserver GmbH, ein Spezialanbieter für Managed Informationssicherheits- beauftragten Fred van Gestel, Hosting, ist nach dem führenden internationalen Si waren alle Mitarbeiter und Abteilungen von der Evalu cherheitsstandard ISO 27001:2005 durch den TÜV SÜD ierung und Erarbeitung bis zur Implementierung betei zertifiziert. Hostserver betreut für Agenturen und Unter ligt. nehmen komplexe Webanwendungen und Server mit „Nach der erfolgreichen Einführung von ISO 9001 „Qua hohen Sicherheitsanforderungen. litätsmanagement" 2011 haben wir darauf aufbauend „Datenschutz und IT-Sicherheit sind heute die zentralen unser Informations-Sicherheits-Management-System Anforderungen für professionelles Hosting von Anwen nach ISO 27001 intern in nur einem Jahr umgesetzt. dungen und Daten. Als zertifizierter Anbieter stehen wir Wir sind sehr stolz darauf, dass der hohe Standard der unseren Kunden in Fragen des Hostings, des Betriebs, Informationssicherheit, den wir in unserem Unterneh des Datenschutzes und der IT-Sicherheit kompetent men haben, jetzt unabhängig bestätigt wurde", erklärt und beratend zur Seite. So können sich unsere Kunden Marcus Schäfer, Geschäftsführer der Hostserver GmbH. ganz auf Ihre Anwendungen und Webprojekte konzen Informationssicherheitsbeauftragter (ISB) Fred van Ge trieren," erklärt Geschäftsführer Julian Wyneken. stel bestätigt:„Der bewusste Verzicht auf externe Berater Die Zertifizierung umfasst das ganze Unternehmen und vorgefertigte Lösungen bei der Umsetzung von mit allen Standorten und legt den Fokus auf die tech ISO 27001 hat zu einer besonders tiefen Verankerung nischen Kernprozesse Managed Hosting, Domain- und des Sicherheitsbewusstseins im Unternehmen geführt, Nameservice, sowie den Kundensupport. Damit ist die das täglich aktiv durch unsere Mitarbeiter gelebt wird." Hostserver GmbH einer von wenigen nach ISO 27001 Alle Maßnahmen des Informations-Sicherheits-Ma- „IT-Sicherheit" und ISO 9001 „Qualitätsmanagement" nagement-Systems der Hostserver GmbH sind doku zertifizierten Anbieter in Deutschland, die individuelles mentiert und werden bei rechtlichen, technischen oder Managed Hosting anbieten. organisatorischen Veränderungen angepasst. Ein ISMS Im Zuge der Zertifizierung hat Hostserver ein struktu ist ein kontinuierlicher Prozess, an dem unser Informa- riertes Informations-Sicherheits-Management-System tionssicherheitsteam unter Leitung des ISB permanent (kurz ISMS) eingeführt, das den Vorgaben des ISO- arbeitet. Der TÜV SÜD prüft jährlich die ISO-konforme Standards 27001 folgt. Neben dem Kernteam um den Umsetzung im Rahmen eines Überwachungsaudits.

1 0 webdesigner 04/2013 ______NEWS Neuigkeiten aus der Welt des Webdesigns

Telekom plant„WLAN to go //

Die Deutsche Telekom will WLAN künftig stär Angaben des Unternehmens nicht zwingend ker nutzen und ihr Netz von derzeit 12.000 auf ein Anschluss der Telekom erforderlich, wohl 2,5 Millionen Hotspots im Jahr 2016 ausbauen. aber ein spezieller Router. Die Telekom will Die Telekom will das Produkt unter dem Namen ihre Festnetzanschlüsse auch in anderen WLAN to go vertreiben. Ab Juni 2013 soll der Ländern mit WLAN-Hotspots nachrüsten. DSL-Router W724V den Festnetzanschluss des Die Telekom will einen dichten "WLAN- Kunden zum Access Point machen. Da die Tele Teppich" schaffen, der die durch den kom jährlich rund 2 Millionen DSL-Router aus Smartphone- und Tablet-Boom immer tauscht, soll die Zahl der Hotspots rasch steigen. stärker in Anspruch genommenen Mo Kunden, die ihren Festnetzanschluss für WLAN bilfunknetze in den Ballungszentren entla to go bereitstellen, können im Gegenzug auf das sten und dafür ansonsten brachliegende Ka komplette Hotspot-Netz der Telekom und die pazitäten der Festnetzanschlüsse der eigenen Fon-Hotspots weltweit zugreifen. Dazu ist nach Kunden nutzen.

Suchmaschinenoptimierung. Das umfassende Handbuch

Das Handbuch zur Suchmaschinen-Optimierung von kommen nicht zu kurz. Sebastian Erlhofer gilt in Fachkreisen zu Recht als das Die aufgabenorientierte Struktur und die anschau deutschsprachige Standardwerk. lichen Beispiele ermöglichen Ihnen die direkte und Es bietet Einsteigern und Fortgeschrittenen fundierte schnelle Umsetzung in der Praxis. Informationen zu allen wichtigen Bereichen der Such- maschinen-Optimierung. Tauchen Sie ein in die Welt des Online-Marketings. Verständlich werden alle rele vanten Begriffe und Konzepte ausführlich erklärt und Sebastian Erlhofer 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 Blick Suchmaschinen-F m' Optimierung Titel: Suchmaschinenoptimierung. Das umfassende Handbuch Das umfassende Handbuch Autor: Sebastian Erlhofer Verlag: Galileo Computing ► Grundlagen, f unktion»wfi% *n und Rankin*-O ptim irru«g ISBN: 978-3-8362-1898-6 ► Planung und Dunhführung für Coogl« und C o ► Konv*r*ion\iaten .teigem , Googlr ÄdW o,ds. W eb Ana ly « ^ Preis: 39,90 Euro, als Onlineausgabe 34,90 Euro "S. Calillo Computing

04/2013 webdesigner NEWS Neuigkeiten aus der Welt des Webdesigns

Host Europe Root Server 2.0: Mehr Performance zum gleichen Preis

Host Europe Root Server schinen Vorbehalten waren. arbeiten mit der innova Mit der neuen Produktgeneration „Root Ser tiven Vollvirtualisierung ver 2.0" erhalten die Kunden bei Host Europe von Parallels Server Bare ab sofort eine hochgeschraubte Server-Per- Metal, die die Vorzüge von formance - bei gleichem Preis. Denn Host Eu virtuellen und dedizierten rope stattet seine Root-Server mit mehr RAM Servern in einer Lösung und zusätzlichen Prozessorkernen aus. Inter vereint: essierte können unter sieben Leistungsklas Dank dedizierter Hardware sen die für ihre Anforderungen ideale Lösung liefern sie die Performance auswählen. eines physikalischen Host Europe Root Server 2.0 kosten zwischen Hochleistungsservers und 49 und 399 Euro monatlich und können jeder ermöglichen vollen Root- zeit mit einer Frist von 4 Wochen zum Monat Host Europe hat die Leistung seines Root-Ser- Zugriff auf alle Hardware-Ressourcen. Gleich sende gekündigt werden. Im Preis enthalten vers erhöht. Künftig erhalten Neukunden von zeitig überzeugen Root Server durch einfache ist bereits der Support, der an 365 Tagen im Root Server 2.0 bis zu 50 Prozent mehr RAM und komfortable Installations- und Admini Jahr 24 Stunden am Tag kostenlos per E-Mail und bis zu 8 zusätzliche Prozessorkerne. strationsroutinen, die bislang virtuellen Ma oderTelefon (0800 Rufnummer) erreichbar ist.

„Conference on Animation, Effects, Games and Transmedia" vom 23. bis zum 26. April im Stuttgarter Haus der Wirtschaft

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

1 2 webdesigner 04/2013 NEWS Neuigkeiten aus der Welt des Webdesigns

Firefox hat keine Lust auf Apple

Weil unabhängige Entwickler für iPhone die von Apple vorgeschriebene. und iPad keine Browser mit eigener Darstel Mozilla könnte deshalb beim ei lungstechnologie anbieten dürfen verzichtet genen Firefox-Browser unter iOS Mozilla auf die Entwicklung eines eigenen nicht die eigenen, besonders Browsers für iphone und ipad. Deshalb ist es schnellen Verfahren zur Dar unmöglich, einen schnelleren Browser als das stellung von Web-Inhalten Apple-eigene Produkt zu vertreiben. nutzen. Solange Apple unabhängige Entwickler be Apple schreibt Entwick nachteiligt, wird die Mozilla-Stiftung keine Ver lern vor, dass sie zur Dar sion des Firefox-Browsers für iPhone und iPad stellung von Websites die entwickeln, sagte Firefox-Produktmanager Jay von Apple vorgegebene Sullivan bei der Konferenz SXSW in Austin Komponente UlWebView Sullivan beklagt, dass Apple unabhängigen nutzen. Apple hingegen Entwicklern Browser-Innovationen erheblich nutzt für seinen eigenen erschwert. So sei es verboten, über Apples Safari-Browser unter iOS eine App Store Browser zu vertreiben, die eine an andere Technologie, unter ande dere Technologie zum Darstellen von Websi rem die Nitro-Engine, die Apple- tes und Ausführen von JavaScript nutzen als Software Vorbehalten ist.

Universität Paderborn entwickelt P2P-Facebook Auf der CeBIT hat ein hauptsächlich an der größeren als den eigentlich vorgesehenen born und Düsseldorf läuft, allerdings eher bei Universität Paderborn ansässiges Team um Personenkreis erfolgt. Letzteres garantiert das Unternehmen, im öffentlichen Dienst und den in Düsseldorf lehrenden Juniorprofes Framework auch dadurch, dass alle Daten ver bei NGOs, wo sie beispielsweise Schulungen sor Kälmän Graffi ein peer-to- oder örtliche verstreute Ar Peer-Framework für dezentrale beitsgruppen nutzen könn soziale Netzwerke vorgestellt, te. Durch das P2P-Prinzip in denen die Nutzer ihre Da wären dazu keine großen ten nicht mehr einem großen Investitionen in neue Server Unternehmen überantworten /. notwendig, weil die dezen müssen, sondern auf eigener tral vorhandenen Kapazitä a Flardware speichern, wo sie ten genutzt werden. NGOs deutlich mehr Kontrolle dar Social Media in Staaten mit Zensurpro über haben. blem hätten darüber hin Dies ist unter anderem des aus den Vorteil, dass sich ein halb der Fall, weil Nutzungs solches Netzwerk aufgrund bedingungen nicht beliebig seiner verteilten Struktur geändert werden können und nur schwer vollständig ab weil ein Anreiz fehlt, mit einem schalten lässt. mehr oder weniger heimli Grundsätzlich soll die Tech chen Verkauf von Daten Geld nologie aber jeder nutzen zu verdienen. Außerdem können Oberflächen schlüsselt und signiert werden. Graffi selbst können - egal ob er damit ein eigenes Netz so gestaltet werden, dass die Sichtbarma sieht den Einsatz seiner Entwicklung, deren werk für zehn Freunde oder ein neues Face- chung nicht versehentlich für einen weitaus Prototyp bereits an den Universitäten Pader- book betreiben will.

04/2013 webdesigner 1 3 RATGEBER Web Storage, Application Cache und IndexedDB von Daniel Flöter

Web Storage, Application Cache und IndexedDB Web-Anwendungen offline nutzbar machen Serverseitige 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 Webseite anzeigen und in den Anwendungscache: Manifest-Datei: Anwendungscache laden Cached die in der Beschreibt den Manifest-Datei stehenden Anwendungscache Dateien oder * Cache ist angelegt « Manifest-Datei ändern: Anwendungscache • Dateien aufnehmen aktualisieren • Dateien löschen • Version aktualisieren >------J

Webserver Client/Browser

Durch neue Techno ookies sind in der Webentwicklung nicht mehr haben ihre eigene Funktionalität zu erfüllen. Zwar besit logien wie Applica tion Cache können wegzudenken. Mit HTML5 & Co. sollten auch die zen diese Speichertechniken eine gewisse Genialität und wesentlich größere Cookies eine Überarbeitung bekommen, und eine unglaublich wichtige Funktionalität in der Weben Datenmengen im Czwar eine, die gleich etwas größer ausfällt. Dabei sollten twicklung, es lässt sich nicht von der Hand weisen, dass Browsercache vor die bestehenden alten Cookies nicht einfach ersetzt wer bei der Entstehung beider Konzepte auch Fragen unbe gehalten werden, als dies bisher m it Cookies den, sondern mit den neuen einen großen Bruder be antwortet gelassen werden mussten, um die Verbreitung möglich war. kommen. Man erahnte dann wohl so viel Potenzial für die und die Implementierung in allen Browsern zu schaffen. neuen Cookies, dass sie sogar ihren eigenen Standardisie So helfen Cookies dabei Anmeldedaten, Artikel in einem rungsprozess erhielten. Inzwischen haben sich nun drei Einkaufswagen oder Klickverhalten bei Werbebannern neue Namen für die Supercookies etabliert, die die Vortei über mehrere Seitenwechsel hinweg zu erfassen, jedoch le der neuen Cookies verdeutlichen sollen:„Web Storage", ist die Größe der zu speichernden Daten recht begrenzt „Application Cache" und „IndexedDB". Der Vollständigkeit und die Cookies werden unverschlüsselt übertragen. Für wegen soll hier auch ein Standardisierungsprozess nicht den Browsercache gilt, dass er keinerlei API zur Verfügung unerwähnt bleiben, der allerdings schon wieder als aufge stellt und so zwar zur Verbesserung eines schnelleren Sei- geben gilt, und zwar„Web SQL". tenaufbaus verhilft, aber man keine Chance hat determi Cookies erlauben es Daten dauerhaft im Browser zu spei nistischen Programmcode um den Browsercache zu sch chern, ähnlich wie es der Browsercache eigenständig tut. reiben. Genau an diesen Schwächen wurde gearbeitet Beide Möglichkeiten der Zwischenspeicherung im Client und neue Standards definiert.

14 webdesigner 04/2013 RATGEBER Web Storage, Application Cache und IndexedDB

Web Storage

•OtrM Im»*» P \ * f V*wTwfca Qm*S Ort«« Ç\wàm -ém Trw*elMi I%mm Das neue Web Storage erweitert das JavaScript-Win- Cougle dow-Objekt um zwei Funktionen, den Local Storage n und den Session Storage. Letzterer ist am ehesten mit Orve Cookies zu vergleichen. Während Local Storage die Da ten auch dann noch speichert, wenn der Browser ge Edü OoooWí Documontt and v*w Ooogto Sp w d tfiM t» • My t>w* schlossen wird, ist der Session Storage an eine Anwen ShndttMn« 1. 8«t V0 Offlin« ttec« 1 In »Uli V* Om* Q n m ;

:ttr%s fcwgm Ou u ii f t i m rä C m fm You r« M M i O n r a «M i i m * ** dung oder Seite sowie an ein Tab und Browserfenster ZZniDiNNfi «■ t» MM« 10 - r » CWN rtori ÜK«r4 «Mtu«#r LMf^mon gebunden. Außerhalb einer solchen Session sind die C « PU*-; CT AdNt» öff-1 inM O IfW O oci Daten nicht mehr gültig. Je nach verwendetem Brow j 0*1 rm 0*m ser können zwischen fünf MB und zehn MB große Da ten als Key/Value-Paar gespeichert werden. Bei den Cookies sind es nur vier kilobyte und sie sind auf eine Ow#*w1 rVaq/w f>*M Anzahl zwischen 20 bis 50 Cookies begrenzt. Dabei las sen sich nur Werte vom Typ String speichern, weshalb beim W3C auch über einen Zugriff auf SQL-Basis disku tiert wird. Bis dies aber umgesetzt ist, kann man sich mitJSON.stringifyO" undJSON.parseO" behelfen. ► Google Does kann im Chrome-Browser auch offline verwendet werden.

Application Cache men und nicht vom Server, weshalb er auch den Na men „Offlinecache" bekommen hat. Mit dem Application Cache oder dem Offline Cache ist Eine Aktualisierung ist natürlich möglich, es sind aber ein weiterer Cache im Browser entstanden, der eine zwei Seiten- oder JavaScript-Aufrufe nötig. Der Erste hundertprozentige Stabilität und Zuverlässigkeit ga dient dazu, den Cache zu aktualisieren, der zweite hat rantiert, um ganze Anwendungen im Browser offline die Funktion die Daten aus dem Cache auch anzuzeigen. verfügbar zu machen. Was Google hier mit Applikatio Beide Speichermöglichkeiten, Web Storage und Appli nen für den Chrome Browser bei den Offline-Modi von cation Cache, sollen hier betrachtet werden. Beide wer Google Docs (Abbildung 1), Gmail und Google Calen- den von allen gängigen Browsern unterstützt. Der Appli dar Vormacht, ist auch für Notizanwendungen wie cation Cache steht allerdings erst im Internet Explorer ab Evernote verfügbar. An dieser Stelle ist jedoch hinzuzu der Version 10 zur Verfügung, welcher nun aber auch für fügen, dass diese nur mit der kostenpflichtigen Premi- Windows 7 downloadbar ist. umversion für iOS, Android und Windows Phone funk tionieren. Der Application Cache wird mit JavaScript aktualisiert und verwaltet, setzt aber zusätzlich eine IndexedDB Manifest-Datei auf dem Webserver voraus, die die zu cachenden Dateien auflistet. Ohne die Manifest-Datei Bei IndexedDB ist die Browserunterstützung recht gut würde der Application Cache nicht funktionieren (sie fortgeschritten, sie ist aber noch nicht ganz gegeben he Abbildung 2). Da der Cache ohne Ablaufdatum und soll deshalb hier auch nicht im Detail erläutert wer funktioniert, sollte man sich über das Konzept dahinter den. Auch wenn die beiden Browser Chrome und Safari im Klaren sein, sonst werden Webseiten im Browser die gleiche Browserengine Webkit verwenden, funktio nach einem Update möglicherweise nicht mehr oder niert IndexedDB im Safari„noch" nicht. Gleiches gilt auch nicht richtig aktualisiert. für Opera. Chrome und Safari kommen zusammen auf Beim Application Cache sind zwei Zustände zu unter etwa fünf bis sechs Prozent Marktanteile, was zwar nach scheiden: wenig klingt, aber dennoch sollten die beiden Webkit- Browser nicht vernachlässigt werden, zumal ihr Marktan 1. Der Application Cache ist noch leer bzw. noch nicht teil in den letzten Jahren recht konstant blieb. angelegt und der Cache ist gefüllt und muss aktuali IndexedDB lässt sich bei den NoSQL Speicherarten ein- siert werden. ordnen und unterstützt die Suche nach Indizes. Der Vor 2. Der Application Cache geht davon aus, dass die Än teil ist eine sehr schnelle Suche nach Objekten, die ei derungen, die gemacht werden, vom Benutzer kom nem bestimmten Feld entsprechen, ohne jedes Objekt

04/2013 webdesigner 15 RATGEBER Web Storage, Application Cache und IndexedDB

im Speicher zu durchlaufen. Zu den Nachteilen zählt im reiben zu können. Mozilla bekannte sich beispielsweise, Moment noch, dass die Browserimplementierungen un hauptsächlich aus philosophischen Gründen, gegen terschiedlich und miteinander inkompatibel sein kön eine Verwendung von SQL im Client per JavaScript-API nen. Dennoch wird derTechnologie ein großes Potenzial und stuft das Vorhaben in verschiedenen Gesprächen vorausgesagt. IndexedDB-lnteressierte können sich un auf dem eigenen Mozilla Campus, mit Microsoft oder mit ter,http://nparashuram.com/lndexedDB/" näher mit dem ChromeTeam als besonders anspruchslos ein. Un der Materie vertraut machen. ter anderem verweist man dort auf die umstrittene Be nutzung von SQL auf Webservern, gerade im Zusam menhang mit der Speicherung von großen Web SQL Datenmengen im Browser. Es müsse erst eine geeignete SQL-Implementierung gefunden werden, welche die be Für Web SQL ist von Seiten vonseiten der W3C Vorsicht nötigte Funktionalität im Browser mit sich bringt ohne geboten, da das Konsortium die Spezifikation nicht wei einen bestehenden Standard, wie SQLite, ändern zu ter pflegen und entwickeln möchte. Mit Web SQL sollte müssen. Was z.B. mit IndexedDB zutrifft, („https:// die SQLite-Datenbank in den Browser fest eingebaut hacks.mozilla.org/2010/06/beyond-html5-databa- werden, um dann per SQL-Befehle Daten lesen und sch se-apis-and-the-road-to-indexeddb/")

Warum Offline-Daten praktisch sind

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

Chrome für Android Firefox für Android 15.0 15.0 Opera Min Opera Mobile Blackberry Browser

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

webdesigner 04/2013 RATGEBER Web Storage, Application Cache und IndexedDB

Vorteile für Offline-Anwendungen Auch stellt sich die Frage, warum es sich eigentlich um zwei Technologien handelt. Das hat vor allem damit zu Für Offline-Anwendungen gibt es mehrere verschiedene tun, dass nach wie vor eine Kommunikation zwischen Gründe: Browser und Server stattfinden muss, um das offline Ar beiten zu gewährleisten. Zum einen kommen die benö •Im Flugzeug ist es nicht erlaubt eine mobile Verbin tigen Daten für eine Anwendung von einem Server, wie dung zum Internet zu nutzen. Für viele Passagiere ist es etwa HTML-, CSS-, JavaScript-Dateien oder Bilder. Zum praktisch, wenn sie Anwendungen trotzdem nutzen anderen macht der Benutzer Eingaben in Form von bei können, die sie sonst auch zur Kommunikation verwen spielsweise Formulardaten, in Textfeldern, Checkboxen den, und diese nach dem Flug leicht synchronisieren oder Dropdown-Auswahlmenüs. Für beide Arten von können. E-Mail-Entwürfe, Artikel, Newsletter, Webaus Daten gibt es eine eigene Speichermethode im Browser schnitte können im Offlinespeicher abgelegt werden bzw. im Browser und auf dem Server, denn der Applica und arbeiten quasi wie mit vorhandener Internetanbin tion Cache wird eigentlich im Webserver definiert und dung. geändert, wo er schließlich vom Browser aktualisiert wird. Der Web Storage ist dagegen für die Benutzerein •Auf Konferenzen, Open-Air-Veranstaltungen oder in gaben zuständig. freier Natur ist die Netzverbindung oft schlecht oder unter Umständen überhaupt nicht möglich. Bestimmte Daten, wie Telefonnummern oder Wegbeschreibun Der Vergleich von Web Storage und Cookies gen, oder aber auch bestimmte Programme können mit der neuen Technik in diesen Situationen verfügbar Der Web Storage wird oft mit Cookies verglichen. Und gemacht werden. ähnlich wie Cookies können sitzungsabhängig oder do mänenspezifische Key/Value-Daten gespeichert wer • Auch digitale Notizzettel, Einkaufzettel oder ToDo-Lis- den. Ein großer Vorteil ist aber, dass sich beim Web Sto ten können problemlos auch ohne Netz mit einer Web- rage Speicherbereiche nicht mehr gegenseitig stören Anwendung erstellt werden und bei nächster Gelegen können. Im Zuge der Offlineverhaltensweisen, z.B. das heit über das Internet synchronisiert werden, sobald lokale Speichern von Werten für die spätere Verbin eine Verbindung wieder verfügbar ist. dungsaufnahme mit dem Server, verhält sich der Web Storage eindeutiger, da er keinen Informationsverlust •Viele Mobilfunknutzer haben volumengebundene Tari duldet. Gerade bei mehreren offenen Tabs oder Fenstern fe oder wollen den mobilen Internetzugang wegen ho kann es bei Cookies leicht passieren, dass das gleiche her Roaming-Gebühren nicht oder nur eingeschränkt Cookie gelesen und beschrieben wird, so dass zum Bei nutzen. Viele Aufgaben lassen sich dank Web Storage spiel beim Onlineshoppen der Warenkorb plötzlich leer und Application Cache ohne Netzzugang erledigen. ist oder aber zwei gleiche Artikel hinzugefügt wurden. Der Speicherbereich unterscheidet sich aber auch •Zunehmend werden auch professionelle Anwendun grundlegend von dem der Cookies. Es werden keine Da gen wie etwa Bildbearbeitungs- oder DTP-Software als ten zum Server geschickt, wie es bei Cookies der Fall ist, mietbare Cloud-Lösungen angeboten. Die temporäre noch laufen die Daten in einem lokalen Speicherbereich Unabhängigkeit von einem Internetzugang steigert jemals ab. Im Gegensatz zu den Cookies ist die JavaScript den Nutzen solcher Dienste für den Anwender unge API umfangreicher und kann so leichter auf einzelne Da mein. ten zugreifen.

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

Bisher konnte sich die Kombination aus Application .getltem(„key") Cache und Web Storage in den oben genannten großen Ruft dem Key zugeordneten aktuellen Wert ab. Anwendungen behaupten. Es ist aber auch zu sagen, dass Google Does - Offline Does nur im Chrome-Brow- .setltem(„key" „value") ser als Desktopinstallation oder in den Chrome Books Legt ein KeyA/alue Paar an. von Google unterstützt wird. Der Chrome-Browser für Android sowie andere Browser erkennen die Funktion .length noch nicht. Ruft die Länge der Key/Value Liste ab.

04/2013 webdesigner RATGEBER Web Storage, Application Cache und IndexedDB

.remove(„key") vorhandene Benutzerdaten im Web Storage vorhanden im iE: .removeltem(„key") sind, worauf diese Daten dann mit den Daten auf dem Löscht ein KeyA/alue Paar. Server synchronisiert werden können. Also immer die Daten vom Server und die vom Web Storage anzeigen .dear() und beim Übertragen zum Server die Daten aus dem Entfernt alle KeyA/alue Paare. Web Storage nicht vergessen zu übertragen und dann aus dem Web Storage zu löschen. .remainingSpace Um beide Zustände (online/offline) zu testen, gibt es im Ruft den verbleibenden Speicherbereich ab, in Bytes. Firefox mit „Datei -> Offline arbeiten" eine Funktion, mit der die Internetverbindung unterbrochen werden kann.

Zudem gibt es auch Events: window.addEventListener(,offline', function(event) { console.log(„Browser ist jetzt offline."); ,storage' }, false); im iE:,onstorage' Wird an document-Object ausgelöst, wenn ein Speicher window.addEventListener(,online', function(event) { bereich geändert wird. Alle Dokumente, die denselben console.log(„Browser ist jetzt online."); Sitzungskontext nutzen und die Dokumente, die mo var request = new XMLHttpRequestO; mentan eine Seite von derselben Domäne anzeigen, request.open(,get', ,save.php?query=' + localStorage. empfangen das Ereignis. getltem(„query"), true); request.send(null); Der Zugriff mit JavaScript ist folgender: }, false);

window.addEventListener(,storage', function(event){ if (navigator.onLine) { console.og(event.key + „ wurde geändert von „ + event. console.log(„Browser ist online.") oldValue + „ in „ + event.newValue); var request = new XMLHttpRequestO; }, false); request.open(,get', ,save.php?query=data', true); request.send(null); if(typeof(Storage)!=="undefined") } eise {

{ console.log(„Browser ist offline."); // Das localStorage und sessionStorage Objekt wird localStorage.setltem(„query", „data"); unterstützt localStorage.setltem(„name", „Simone"); localStorage.setltem(„name", „Susanne"); var strName = localStorage.getltem(„name"); Die Vorteile des Application Cache }else{ // Kein Web Storage Support! Der Application Cache hat die Besonderheit, dass die } Implementierung bzw. die Programmierung client- und serverseitig erfolgt, wie in Abbildung 2 gezeigt Um daraus eine Offline Anwendung zu machen, sind die wird. Serverseitig liegt die Manifest-Datei, in der alle ,online'- und ,offline'- Events sowie die navigator. Dateien aufgelistet sind, die gecached werden sollen. onLine-Property wichtig. Speichert man also den aktu Diese Manifest-Datei kann mit beliebigen serverseiti ellen Verbindungsstatus, sollte die Anwendung im gen Programmiersprachen geändert werden. Eine Än „online"-Fall alle Benutzerdaten unverzüglich zurück derung der Datei ist zwingend erforderlich, selbst zum Server senden. lm„offline"-Fall gehen alle Benutzer wenn es nur um einen geänderten Versionskommentar daten in den Web Storage. Ob es sich dabei um localSto handelt, der besagt, dass aktualisierte Dateien vom Cli rage oder sessionStorage handeln soll, muss sich der ent angefordert werden können. Damit der Client mit Webentwickler überlegen. Hierbei ist die Überlegung der Manifest-Datei umgehen kann, muss sie im rnani- wichtig, ob die auch zur Verfügung stehen sollen, wenn fest-Attribut des html-Tags stehen. Dadurch weiß der der Browser geschlossen wird, oder ob sie so lange ver Browser, wo er die Manifest-Datei findet, kann sie ausle- fügbar sind, bis die Seite bzw. der Tab geschlossen wird. sen und alle darin stehenden Dateien cachen. Außerdem muss eine Abfrage eingerichtet werden, die bei der nächsten Internetverbindung prüft, ob eventuell chtml manifest="example.manifest">

webdesigner 04/2013 RATGEBER Web Storage, Application Cache und IndexedDB

Hier ist auch anzumerken, dass der Application Cache sucht, Dateien vom Server anzufordern und nachzula ein Offlineverhalten zeigt, das besagt: Wird die Mani den. Wenn es sich um Background-Images, CSS-Files fest-Datei mithilfe des manifest-Attributs referenziert, oder ähnliche Dinge handelt, gibt es anstatt 200-0« müssen immer alle benötigten Dateien im Applica Statusmeldungen (wie in Abb. 3 zu sehen) nur tion Cache stehen. Es wird dann nämlich nicht ver 404-Fehlermeldungen. ▼

o Resources | N etw o rk Sources ( j t Timeline ^ Profiles Audits Console

N am e S tatu s S ize M e th o d T y p e In itia to r Path T e x t C o n te n t l$rro c a r.h tm l 2 0 0 4m s <> CET te x t/h tm l O th er (from cache) /A p p C a cb e o k 4 m s ^

stylesheetxss 2 0 0 c a r.h tm l.4 0m s GET te x t/c s s (from cache) /A p p C a cb e OK P a n e r 0m s

m a in js 2 0 0 car.html; S 0m s CET application/pvascr.pt (from cache) __Ü /AppCache/scriptt OK Parser 0m s

carg p g 2 0 0 car.html; 18 9m s CET •m a g e /jp e g (from cache) * M l /AppCachf/im *qr\ OK Parser 9 m s j

4 r t q u t i d 1 08 Irinifirrtd 1 36m» (onload: 38ms, DOMContentLoaded: 28m i)

>2 Q . • Q O Documents Stylesheets Images Scripts XHR Fonts WebSockets O th e r e . Alle Daten werden aus dem Cache geladen.

Da es sich um einen relativ neuen Mimetyp handelt, sollte man prüfen ob er in die Konfigurationsdatei auf foreach ( SAppCache as $line) { zunehmen ist unter if (strpos ( $line, ,#') === 0) // [Laufwerksbuchstabe]:\xampp\apache\conf\mime.ty- startsWidth #: revision pes: { fputs ( $fp, „# „. date ( „d-m-Y H:i:s"). $nl); // text/cache-manifest appcache update text/cache-manifest manifest else if (strpos ( $line,,CACHE:') !== false) Alternativ kann man die .htaccess-Datei mit AddType { modifizieren fputs ( $fp, ,,{$line}" ); [Laufwerksbuchstabe]:\xampp\htdocs\forbidden\.ht- fputs ( $fp, ,,{$add}". $nl); // add new line access: } else if (strpos ( $line, .NETWORK:') !== false)

AddType text/cache-manifest .manifest { AddType text/cache-manifest .appcache //... same as CACHE: for NETWORK: and FALLBACK:

Die eigentliche Dynamik findet auf dem Server statt, } dort liegt die Manifest-Datei. Anstoß von Cacheände else if (strpos ( $line, Sdelete) !== false) rungen gehen von Änderungen dieser Manifest-Datei { aus. Entweder man ersetzt sie mit neuen Inhalten, än //delete: not add dert sie oder löscht dort Dateien mit einer Webserver- } programmiersprache, wie PHP oder C#. else {

$add = „styles.css"; } Sdelete = „jquery.js"; SAppCache = file ( „example.manifest"); $fp = fopen ( „example.manifest", „w"); echo „Applicatio Cache wurde aktualisiert.

"; if($fp){ flock ( $fp, 3 ); flock ( $fp, 2); fclose ( $fp ); $nl = ehr (1 3 ). ehr (10); } else {

04/2013 webdesigner 19 RATGEBER Web Storage, Application Cache und IndexedDB

echo „Datei konnte nicht zum"; Datei beschrieben wird (vergleiche Abbildung 4). ▼ echo „ Schreiben geöffnet werden";

} ^Ikrwns ^ ftrwurio ^ Sflwt 0 Timc'inc ^ Flo'i'«) [ ^ ConxAe

Creatu n Application Cache «ith aarufest http.//localtost/AppCache/Ae«{ache.app/»aift.j j Appli

FALLBACK: Beim Befüllen des Caches können einige Statusevents Offline.html gefeuert werden, deren Event-Typ in der Handlermetho- de abgefragt und unterschieden werden können. Soll der Cache refreshed werden, um beispielsweise neue Seiteninhalte oder ein geändertes CSS-File zu la window.applicationCache.addEventListener(,checking'; den, muss immer die Manifest-Datei geändert werden. handleCacheEvent, false); Für den Fall dass die geänderte Datei nicht umbenannt window.applicationCache. werden soll, da sonst auch keine neuen Dateien hinzu addEventListener(,downloading', handleCacheEvent, kommen oder entfernt werden, kann man sich eines false); Tricks bedienen und Versionskommentare in die Datei window.applicationCache.addEventListener(,progress', überschreiben, wie zum Beispiel: handleCacheEvent, false); window.applicationCache. # new version at 2012-12-30_14:13:11. addEventListener(,updateready', handleCacheEvent, false); Damit der neu geladene Cacheinhalt auch auf der Seite window.applicationCache.addEventListener(,error', angezeigt wird, muss man die Seite neu laden mit„win- handleCacheError, false); dow.location.reloadO. Ist die Manifest-Datei geändert window.applicationCache.addEventListener(,noupdate', worden und wird der Cache neu geladen, wird immer handleCacheEvent, false); der ganze Cache neu geladen, wie er von der Manifest

webdesigner 04/2013 RATGEBER Web Storage, Application Cache und IndexedDB

o Ü*/r*r.<í i ( j ) NctWO* ^Sources ^jTirofl.n« ^ Proles ^Auditt ^ Conto*

* Cu * Type •I jWebSQt Hn» / AtçCéchc/AeeCftc»* j * pcacH< M W ctt f l « * I irt0««*aDB mtpy/iou*cst/A3ecxr#;car mmj IX PKK •/V» btto '/locafcosi/AocCache/imaoes/HimJKono Cxofccft 1.22a ► £ local Storage htt» 7/1oc**«5i/AteCacht / images / HavtC. 0«9 tupfte* 129.3*1 fr ¿ ! S*tl«OA nno7/»oa«o«‘Wtacf>e/ifTuçej,cif r*09 U p M lZ V .* iU ► %Cook*i hno //>ouftosi/AdtiCxhe/imiots/looo.iDQ Dtofick 76.50U ? J Appt<4t>o* Cach« hup UM1 «r EMpKA 1711 T iï AopLJCf« ippcjcn« Mtp //ioc4iest/AopCjcr>e/scripts/ruJn.ji tXpBCft 54*1 fei KrmJ) 1 http //locafcost/AeoCache.itvieihertcis brpidl

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

04/2013 webdesigner RATGEBER Web Storage, Application Cache und IndexedDB

gespeichert werden können, da sich der Application Abbildung 6). Die gute Unterstützung kommt nicht Cache dann wie ein Offlinecache verhalten soll. von ungefähr, denn Google bietet auch in vielen eige • Die Application Cache Events werden nur dann ge nen Anwendungen einen Offlinemodus an. feuert, wenn das HTML-Tag der Webseite das mani- Für den Firefox gibt es das„CacheViewer Continued Ad- fest-Attribut mit Angabe des Namens der Manifest- dOn". Allerdings muss man wissen, dass einzelne Datei Datei enthält. en im Application Cache den Eintrag „Device=offline" • Extern eingebundene Dateien wie CSS, Images und haben. Löschen lässt sich der Application Cache im Scripte werden nicht automatisch im Application Firefox unter „Alt -> Extras -> Einstellungen -> Erweite Cache gespeichert. rungen -> Netzwerk".

Für den Safari muss man das Menü für Entwickler akti Application Cache überwachen vieren, unter„Safari -> Einstellungen -> Erweiterungen -> Menü Entwickler in der Menüleiste anzeigen", und Mit dem Chrome Browser kann der Application Cache hat dann die gleichen Möglichkeiten wie im Chrome, einfach über die URL-Adresszeile erfragt oder gelöscht es sei denn die Abfrage über die Adressleise ist nicht werden („chrome://appcache-inernals/", vergleiche implementiert.

j AppCache Internals x ^ Offlfl« - Google Drrve x Fazit: Der Applicaton Cache wird auf dem Ser C chrome://appcache-internals ver per Manifest-Datei vorkonfiguriert und be

Manifest: nötigt Root-Rechte. Er muss je nach Bowserein- RemoYfi VHtaEnüitt stellung auch vom Internetbenutzer bestätigt werden. Web Storage ist eine rein clientseitige • Size 3.3 MB • Creation Time Samstag. 12. Januar 2013 20.47:11 JavaScript-API und ist auf die aktuell weitver • Last Update Time: Samstag. 12. Januar 2013 20 47:11 • Last Access Time Samstag. 12. Januar 2013 20 49 11 breitete Browserunterstützung angewiesen. Wie der Web Storage zeigt der Application Cache ein Offlineverhalten, das beim Application Cache Manifest: https V/docs googte com/olfiin^offlme/mamfest noch deutlicher wird. Will man hier Problemen FtemoYfl Yiowfntrl« aus dem Weg gehen, sollte der Cache erst ange • Size: 242 kB • Creation Time Samstag. 12. Januar 2013 20.47:01 fordert werden, wenn der Benutzer offline gehen • Last Update Time Samstag. 12. Januar 2013 20 47 04 will. Mit den neuen Standards bekommen die • Last Access Time Samstag. 12. Januar 2013 20 47:41 Browser vollwertige Möglichkeiten, um Daten auf dem Client zuverlässig und über Sessions Manifest: NJj?g7/^g.ggggl^.ggnVaMrgxx/Q(?ljn^m^fOTt.?Qg^w71fl26b3bQMlM» hinweg zu speichern. Dabei gilt noch keiner der Remove View Entries Standards als wirklich fertiggestellt, obwohl alle • Size: 82 9 kB aktuellen Browser die Technik bereits unterstüt • Creation Time Samstag, 12. Januar 2013 20 47 05 • Last Update Time: Samstag, 12. Januar 2013 20 47 05 zen. Echte Offline-Applikationen für mittlere und • Last Access Time Samstag. 12. Januar 2013 20 47:42 größere Projekte zu programmieren werden die eleganten Web-APIs nach wie vor an ihre Gren Manifest: zen bringen. Man muss auch einzelne Standards BfltnoYü Vxm Entriss untereinander kombinieren, weshalb die Wart • Size 1.9 MB barkeit, Fehleranfälligkeit und Cross-Browser- • Creation Time Samstag. 12. Januar 2013 20 47 05 • Last Update Time: Samstag. 12. Januar 2013 20:47:05 Kompatibilität dem Entwickler viel abverlangt. • Last Access Time: Samstag. 12. Januar 2013 20 47 42 Caching birgt auch Fehlerquellen, meist sind es aber HTML- oder PHP-Programmierfehler, wie

Manifest m u » .//i>Tyg.lmAnäigal falsche Linknamen und Dateiendungen oder Bernov.e Yh>w Entfto JavaScript-Fehler, die das Caching fehleranfällig • Size 6 9 kB machen. Jedoch ist der Nutzen dieser Anstren • Creation Time Samstag. 12. Januar 2013 20 47:05 gungen klar erkennbar, werden doch Offline-Ap • Last Update Time: Samstag, 12. Januar 2013 20 47 05 • Last Access Time Samstag. 12. Januar 2013 20 47:42 plikationen immer mehr in State of the Art Web anwendungen verwendet oder bei den teureren So einfach wie mit dem Chrome Browser lässt sich der Offline Cache (Application Cache) Premium-Apps angeboten. mit keinem anderen Browser überwachen.

22 webdesigner 04/2013 plentymarkets' S-C o iu Lu Zrce, une Ich es 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 Warenwirtschaft/ Hosting Statistik

Software Payment/ wartung Faktura

Das plentymarkets-Prinzip: Beratung / L Logistik/ Support Fulfillment E-Commerce as a Service CRM

www.plentymarkets.com RATGEBER Shopsysteme im Vergleich von Tobias Henke Shopsysteme im Vergleich 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 /"V Q Kaufshop betreiben möchte, v J Sie zahlen eine Lizenzgebühr und können in steht vor der großen nerhalb kürzester Zeit mit Ihrem Shop auf Ihrem eigenen Frage, welches Shop-System für das jeweilige Pro Server loslegen. jekt am besten geeignet ist. Die meisten Herstel ler bieten verschiedene Produkte an, die sich oft In unserer Übersicht sind die Open-Source-Lösungen nur in einigen wenigen Punkten unterscheiden, da in und die Kaufshops in der Überzahl. Insgesamt haben wir vielen Fällen bereits die Standard-Installation über zahl uns mit 18 Produkten von sieben verschiedenen Herstel reiche wichtige Features verfügt. Hier heißt es dann ge lern beschäftigt. Es werden acht Open-Source-Lösun- nau hinsehen, um den optimalen Anbieter, beziehungs gen, sechs Kaufshops und zwei Mietshops vorgestellt. weise das optimale Shopsystem zu finden. Grundsätzlich Die Hersteller sind Magento, Zaunz Publishing, Plenty- wird zwischen drei Modellen von Online-Shopsystemen markets, Gambio, Shopware, Oxid e-Sales und Modfield. unterschieden: Bei allen Anbietern hat man die Möglichkeit, sich einen Demoshop herunterzuladen, um sich so im Backend ei *1 Open Source System nen „Live-Eindruck" des jeweiligen Shopsystems zu ver \J I -Bei den Open-Source-Sytemen fallen keine schaffen. Kosten für die Installation an, da diese in der Regel von den Shop-Betreibern selbst durchgeführt werden muss. Der Shop wird auf einem eigenen Server installiert. Be Cosmoshop zahlt werden muss jedoch in aller Regel für Support und Updates. Wie viele andere Anbieter bietet auch die in Süddeutsch land ansässige Firma Zaunz Publishing mit ihrem Shop /"V Mietshop system Cosmoshop mehrere „Ausbaustufen" ihres Shop \ J ^ - Bei dieser Variante wird die gesamte technische systems an. Diese nennen sich„eStart", ePRO,„eMAX und Struktur von einem Provider zur Verfügung gestellt und „Mandant". Die Kaufshopsysteme von Cosmoshop war es ist eine monatliche Gebühr fällig. ten mit einer Besonderheit auf, da man das System ent-

24 webdesigner 04/2013 RATGEBER Shopsysteme im Vergleich

weder kaufen oder sich für einen Mietkauf entscheiden Version eSTART Version ePRO Version eMAX kann. Die Lizenzkosten liegen zwischen 795 € und 11995 Starttn S it 9tr orttnt B utw ts s rrwt d e s *' Proftsswtfct AÄfOgridiOSwng fur 5«s zu 1000 ua

Support werden prozentual nach dem Kaufpreis berech £ r* ;• Hrçh/içhts Vtfjjon ru&atä>cft« H»gWigf*s i*so r .'•ft»on wo(!*r* ä«s»( Vtruon net, was eine Besonderheit im Vergleich zu anderen Sho ► ws zu 250 ► t#s 1000 ArtMl nog*K* ► ï»S(4 100.000 AflfctKfltttirtSt * 20c*n*ns «ttj * 4 OOflMlrtS inid gfctf» psystemen darstellt. Die monatlichen Support-Kosten ► 1 z«r**>0sst Fin*\M«uftg fr Dthtoiç *it

Schon in seiner Grundfunktion bietet Cosmoshop sehr ► ßtsieibtrftanuno ► t#m ► TemcüÄesfStem viele interessante Features und Funktionen an, wie bei ► NewsleBers-rStcrn spielsweise eine Facebook-Einbindung und einen Link Sajtaötctn ► 2ahfcr>gsscfvrtttr*!i«n ▲ Für Shops m it sehr manager. Auf der Cosmoshop-Website bietet der Her ► Cfos s-Stw»g und Zut>#r»o* vielen Artikeln sollten steller einen Überblick über die Funktionen seiner U*Wisttrtiiink»o* ► tmp«rt-Æ>p4

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

4 Praktisch: Durch 6 weitere Module ____ I Klick au f den roten Pfeil werden die Massenüberarbeitung von Artikeln v ✓ 'S 'S 'S Funktionen der Er weiterungen erklärt. Lexikon-Plugin V

~~Merklistenfunktion enthalten ab Version 10.1 'S'S'S 'S~~

~~Mediafiles je Artikel V 'S'S 'S 'S~~

~~Gutscheinverwaltung V optional 'S 'S'S~~

~~Angebot statt Kauf Modul V optional optional ✓~~

~~Wunschzettel-Funktion V optional optional optional optional~~

~~Massenbestellformular V optional optional optional optional~~

~~ab 18 Modul V optional optional optional optional~~

~~Look & Feel Farb- Grafikanpassung V optional optional optional optional~~

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

Die maximale Größe des Shops hängt stark vom jeweili Community-Edition. Das Besondere an dieser Open gen Produkt ab und schwankt zwischen 250 und 50000 Source-Variante ist, dass auch für den Support keine Kos möglichen Artikeln. ten fällig werden. Der Support für die Community-Versi on erfolgt vielmehr ausschließlich über die große Com munity im Online-Forum von Shopware - hier ist also Shopware der Name Programm. Ein negativer Aspekt ist, dass es in der Community-Editi Die im münsterländischen Schöppingen ansässige on keine Gewährleistung, keinen Wartungsvertrag und Shopware AG bietet ebenfalls vier verschiedene Varian keinen Herstellersupport gibt. Daher ist man als Nutzer ten seines Shopsystems an. Die Standard-Version ist die der Community-Edition komplett auf die Hilfe im Forum

~~04/2013 webdesigner 25 RATGEBER Shopsysteme im Vergleich~~

CQMMuwrr» angewiesen. Die Kosten für den Support betragen bei (»HON Eomo« der Professional Edition 49 bis 99 Euro im Monat und bei der Enterprise Edition je nach Support-Level zwischen T'«krf*y«*ft*n «CM«) o o V V 49 und 249 Euro.

imftnoppinf - - 1 —*-— o o V y/ Wenn man sich für die Community-Version von Bun^W-f iKkfclion 0 0 ✓ V 4 Shopware entscheidet, sollte man idealerweise also Butin«*» («MntiaU 0 0 y V über eine gewisse Programmiererfahrung verfügen. fhMNpt o o Die wichtigsten Unterschiede zwischen den einzelnen Pr«dvtclb«r>t«r 0 o V V Produkten liegen auch bei Shopware in der Anzahl der • rhu 0 o V V verkauften Produkte. Schon in der Standard-Installati- lfrt«tllg«nlar NmtU(l«r o o V V on können Sie allerdings bis zu 10000 Artikel verwal ten. Auch ist in der Standard-Installation bereits ein in 8oau« 0 0 VV tegriertes CMS enthalten, allerdings in einer ziemlich (Bild vcrfugbjr) ReMrvaaioA« 0 0 «✓ <✓ abgespeckten Version. Wer viel Wert auf ein vollum 10*44 Cr*»p Shoppi+f o o V V fängliches CMS legt, sollte in ein Premium-Plugin inves iB»U vwfwgtjr; Abo Ctmmtrct 0 0 V V tieren. Eine Übersicht über verfügbare Premium-Plug- S»*9*ng VT^H-SyU »m X VVV ins finden Sie hier: Atirrt Oif«d«ry Q XX VV

~~Vjrn*»h 3 XXX V~~

~~SwcH* mil KH.R B»ck*rtd Q XXX V~~

~~r i a i t M - U XXX V 4 Die Kreise markieren die Plugins, die man optional kaufen kann.~~

In der Community-Variante ( « M H 0 » « 4 Für viele Shop-Betreiber ist der Support ein entschei ist der Support sehr stark dender Faktor bei der Entscheidung für oder gegen MM eingeschränkt. ► ein bestimmtes Produkt. Shopware bietet hier auf sei V W- * ^ Ä . •» Ä ÜÄ w » ner Homepage eine detaillierte Auflistung des Sup ports für die verschiedenen Versionen. X HM< * «Mac X WIMM» ummm 4 Shopware arbeitet zurzeit an einem Tool, mit des ✓ ✓ ✓ V sen Hilfe sich Shops untereinander vernetzten kön s ✓ ✓ ✓ nen. Mit Hilfe des Systems Namens Bepado soll es V V V V möglich sein, dass ein Händler Lieferant eines ande X X X V ren werden, oder dessen Ware einstellen kann. * V V V 3 X X X Mit der Beta-Version, die im April 2013 in Betrieb geht, V u.3 ■V wird Bepado zunächst nur mit Shopware-Shopsyste- Ut . P, X X V < u. men funktionieren. Spätestens im Juni soll das System U «JlW r X X X V < X X X V auch mit anderen Shopsystemen kompatibel sein. X m m m X X X ✓ X X X Plenty Markets X X X ✓ X * V Bei der in Kassel ansässigen Plenty Markets GmbH ha X m ns ben Sie die Wahl zwischen der Professional und der X X X Enterprise-Version. Die Professional-Version ist die Mietversion, die Enter-

i m I m W i MIMI prise-Version ist die Kaufversion. Die Produkte von 9 » W '!•> 9 ^ ^ *^9 *^9 •» ^9 ^--— - A ». . NW Plenty-Markets eignet sich laut Angaben des Herstel *9ß9^9 ler sehr gut für größere Projekte mit Multisites. Hier ■M M * SM M */* IMIMÜM àAMftâS finden Sie eine Übersicht über die Funktionen: ►

~~26 webdesigner 04/2013 RATGEBER Shopsysteme im Vergleich~~

W ebshop 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 <*) l*r*j»u oflC *5tg* iiMr HTML uo3 CSS ir-r«r*2c*«f» m c n \ u t pro Monat.Die Kosten für den Support sind ebenfalls stark gestaffelt und ^ Z0C*vfiX*»O* liegen zwischen. Auf der Homepage von Plenty-Markets finden Sie eine ^ IAÄ»ir»5üjt»UI (VTF1 »öfttoim; detaillierte Übersicht über die Preise, die sich sehr stark an der Größe des ^ BM urUM C jeweiligen Shops orientieren.

~~^ CtüechoMm»au4 1. Wahlen Sie ein Tftnfpeket: ^ G«Ci»»n*tKW~~

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

~~6 » (*M»| *««<» • X M ♦'9*t D K*«» M «< M » MMMf M (««t «Mtvm *tfU>« «k »M H M i « ^UK V ^ v»*:-ogi S;q-Ucou» 4A*»'*ia— 3*n Dato«? i u i ^ i Ij M~~

~~ffj Kwv3#n>e*wn t « * ( M l «MM» Trtflfc 1• * + * * AlWUt IflCOMl~~

~~^ C^tMdk m m u o N iS W » t J K * UWJW8 llNVUb MM tfyabi(o:fl Mnww tWO »«•EU** NCMie jooo ue WO00 d r a - S « M i~~

~~N i n m n UMO 1W CU*** 40 00JMB 4J00 ue >9 900 OUB#< Muiim»2IOO iOOlUÄ* na» 1* 4t00UII 40000 >*;•* v.w «i~~

~~400 F l« * 1«4 0 ttM * 7 > ttU R «OttO~~

~~Kjtt->V)w» <5 E »n f o ) t 000 'm u H * 0900 m 00 o w 10900 meur 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~~

~~^ PniSOlutACA * t0 0 O tt U6 14 KD US 300 009 I M » tu * r 1000 009 ue 19ÍWW P 750 009 £ / ft^Ü N f r o m w w S O M 4 ¿«teuft 1 *W 009 UB 2*900 MB >00 009 CCI9-9«ep«lt~~

~~<+j l’<*Jtt EtfMAM FNtttM t »'■># «/ m m~~

d^lKiMen lUaMiMMkaftlAw« ft* oKO»H S»MWM »k* »«»dn.+an nt<%jlrtril«n4«rtrti) »> «» «UH|< &» «»» >n »»—cm* »ill» fto *« ^KTftlS &j| r a ■ > II^ L kWpv &A* i. •• f> A a ;e09 *rt*9»:*m9«*Jrt0t« VHK-*n.T*f rtcN MUKMn 4Vff «»C M4r« WS»W l

~~Trui*3-Sncp*-Ki*v3«nc>#***ji^ •=*«~ o«* ^ Die Kosten des~~

~~^ *Kam»Kuo4«fti<»t«%K»pen Mietshops von Plenty Markets.~~

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

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

~~^ *A>m 9»**rt«r »rneort *0« C00«< ¿9not** UA4 (T R k M KifVM«) Wer sich für den Mietshop entscheidet, sollte sich vorher sehr detailliert~~

SvcN-vM ** « 9C0m*rt#rt UGU darüber informieren und beraten lassen, welche Größe für den jeweiligen S90-MP TB99. 0**«ftC*Oft«. My*0*09 Shop das Optimum ist. Ein Mietshop hat natürlich den Vorteil geringer LKe-StKfto **v«r>6oe<&m0tt««fscftc'fl«tc>*»**o<3« Cf^Mrn»» vM uid 4«« £rji6f S ch **ört«n a Socf-*r>S«*1#m «ff« Proc*ooc u rtff *CT*.oö«r monatlichen Kosten recht hoch. £:c<-Anji i« Für Kunden, die sehr viele Produkte verkaufen wollen ist die Version Enter prise zu empfehlen, da hier keine Limits in Bezug auf die Größe des Shops o * »ceboc* «\r>r«>3*no existieren. O « W M « Plenty Markets legt besonderen Wert auf optimale Kundenbetreuung, 6*r4U<-A/ie*rt

<*J 'B ta > U ir> tw ; H .fftrv^n ? .* 6 f ^ n - * 5 g ? !•—« j»»ef fMsrwtwt *ÄUi9 O«»*0tltt»r Q £r<3n$#ir>}\*nr-Ji&'.i&n0«*puCC0rt wie bei allen K*wur*mm«K*rT»wif>0#n»Of«ö OpenSpurce-Systemen heißt das natürlich nicht, dass bei einem Magen- B**l*tt*^nvT\ü# ,F»H» ttftta ä » UMr-vOuftg nM n n li«9ift^tvnfu an e»»>«®v**g X»vJi t*r»i K«#*0*«» ) to-Shop keine Kosten anfallen. Für die recht komplizierte Einrichtung je <*j FS*1«U©CU des Magento-Shops gibt es zahlreiche sogenannte Magento-Agenturen,

~~04/2013 webdesigner RATGEBER Shopsysteme im Vergleich~~

~~Oxid e-sales hß 'U 1 Key Features Community Mafvtfor*0 üviefpns« Wer Wert auf besonders leicht anpassbares Custom A^»x~~

~~W wif»MN MW 4M«« System befindet, ist es ab der Professional Edition auch~~

~~V (|M |. and problemlos möglich, seinen Shop vollständig über ein~~

~~S:o*-« C*»«-» anderes selbst gewähltes CMS, wie beispielsweiseTypo~~

~~C su k f Md Cm « mn 3 zu verwalten. Diese Funktion findet sich sonst nur bei Vjl*#* (f MW) wenigen Konkurrenten. IW» Md ^ nM lcn IW ««~~

~~U fift Uck*|~~

~~A4««*t>ttd Highlights~~

~~Ci* «m» Wry«f • Integriertes Content Management System (CMS)~~

~~W S«*n> • Schnell Projektumsetzung, kurze Einrichtungszeit (Time to Market) • Web 2.0 Paket (Tagging, Rating, tiefe F acebook-Integration, etc.) IUI i Cm m ..» • Suchmaschinenoptimiert V»~~

Md W A((«M • 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 rw.AW p..^itU r« Datenverlust möglich

~~«nd~~

~~▲ Funktionsübersicht der Community-Edition W#M^KM«l(MIMMr#««4l~~

( a a ly ito M Md Ein weiterer Schwerpunkt von oxid-e-Sales liegt in der feudwt Web 2.0-Anbindung Magento hat Urx ai, O»» ^ w l *«MW einige Funktionen N fc a zu bieten, die uu Die Enterprise-Edition schließlich liefert verbesserten man nicht bei Support und weitere Funktionen, die in der Communi allen Konkurrenten ty- und der Professional Edition nicht enthalten sind. findet. ►

~~Highlights~~

~~wie beispielsweise die Firma welance, die sich vor al • Professional Services~~

lem mit der Einrichtung des Shops beschäftigen. Hier • Enterprise Support fallen schon für die Community-Edition Kosten von • Kurze Einrichtungszeit (Time to Market) 5000 € aufwärts an. Die Vorteile eines Magento-Shops • Multichannel (Point-of-Sale &. Mobile App) sind die laut Hersteller sehr hohe Leistungsfähigkeit • Master/Slave-Architektur • Cache Manager, Vamish Reverse Proxy, Memcached und die umfangreichen Funktionen. Für kleine Shop- • Mall-/Mandantenfähigkeit (Subshops) Betreiber scheint Magento allerdings ein wenig über • Sprach- und Landerverwaltung dimensioniert. Dafür ist die Community-Version von • B2C- und/oder B2B-Fähigkeit

Magento eine der umfangreichsten im Vergleich zur • Einfache Anbmdung an Drittsysteme (ERP, PIM, CMS etc.) Konkurrenz. Sie lässt sich fast beliebig erweitern. Die • Web 2.0 Paket (Tagging, Rating, tiefe Facebook-Integration, etc.) Kosten für den Support hängen stark vom jeweiligen • Suchmaschinenoptimiert Projekt ab. • Rechte-/Rollenver\valtung Eine Schwierigkeit war bisher, dass Magento für den • Funktional erweiterbar und anpassbar • Modular und ausbaufähig deutschen Markt nicht optimal konfiguriert war, da • Skalierbar für künftige Anforderungen beispielsweise einige Zahlungsarten fehlten. Seit dem • Performant, hochverfugbar und sicher 7.3.2013 gibt es ein vorkonfiguriertes Paket mit dem

~~Titel magento.de, was optimal auf den deutschen ▲ Zu den Funktionen, die nur die Enterprise-Edition enthält Markt zugeschnitten ist. gehört beispielsweise die Möglichkeit eines Multi- channels~~

~~28 webdesigner 04/2013 m dpunkt.web~~

Die Kosten für Support belaufen sich bei Modfield e-commerce oxid-esales auf mindestens 49 Euro pro Monat in der Community Edition. Für die Bei der Berliner Firma Modfield e-commer anderen Versionen lässt sich das nicht so ce handelt es sich auch um eine Open- genau sagen, denn hier hängen die Kosten Source-Lösung. Modfield e-commerce legt Simon Widjaja stark vom Projekt ab. besonderen Wert auf die einfache Installati Lebendige Webseiten mit Adobe Edge Animate on. Die Kosten für den Support können nicht pauschal benannt werden und rich 2013,238 Seiten Gambio ten sich nach der Größe des jeweiligen Pro € 33,90 (D) ISBN 978-3-86490-025-9 jektes. Das Open-Source-System der Bremer Gam bio GmbH ist eines der günstigsten Shop Die Hauptvorzüge dieser Version: systeme. Für die Einrichtung sind keine Pro • Die "gesetzlichen Mindestanforderungen' werden er M t. wie grammierkenntnisse erforderlich und man Abzeichnen der DatenschutzerkJ*ung, Widerruf* und AG8* Unk bc«m Checkout (Abschluss des Bestellvorgangs)« Angabe de* kann es sehr leicht selbst einrichten. Als Al Lieferzeit, automjbsches Mtsenden des Widerrufsrechtt und der Signatur m der Bestei E-Mal. etc. ternative stehen auch mehrere Mietshops • W3C XKTML-vahdes Standardtemptate zur Auswahl. • Der Einbau vieler nützlicher Funktionen erleichtert des PhoneGap tnkaufen und das Adrr*mstneren des Shops. Mit Hilfe des Standard-Templates von Gam • F e rt>3 implemenberte Sochopt>nr*erungsmodif*at>onen (SCO) Marcus Ross smd standardmäßig vorhanden. PhoneGap bio lässt sich der Shop schon recht indivi • double*opt n für E-M jJ (ab vl.0 3 ), des bedeutet, die duell gestalten. Wer mit dem Standard- Kontrote der Cmad Addresse beim Registrieren verringert Fehler be» d er E r g e b e . 2013,248 Seiten Template nicht zufrieden ist, der kann unter • Konto löschen Funktion für den Kunden (et» 1.03) - Zogen S*e € 29,90 (D) welche Bedeutung Tnvatsphare" für Sie hat, bieten Sie thren ISBN 978-3-89864-824-0 zahlreichen kostenpflichtigen Templates Kunden <>e Mogbchke»t« Ihre Konten setost zu laschen. wählen. Der Support hält sich mit Kosten • Das Googlebase Export*Modul mit Versendkosten erfüllt die rechtfcchen Anforderungen von 149 Euro pro Jahr auch für die Betreiber • SCO - Suchmaschnenopbrrierungen (Metatags, ShopStat URLs, CSS-Template) smd fertig mplemenbert und von kleinen Shops in einen gut zu finanzie standardmäßig vorhanden. renden Rahmen. • Wichtige S^herheitsupdJtes(t) sind eetgebaut und weiter entwickelt. S • D*e TWckbo* bietet eme 'State of the Art DarsteCung* Ihrer » ------« - r j ProdcAtbader. • Shop Dashboard • die überarbeitete start.php für den Admin v/ «ulfimAcchM ttftd Aut*}an -mm sorgt für leichte Administration. Node.js & Co. • D»e Schne*e und Einfache Instattationsroutine sorgt dafür, •S m l SuCif S —• dass M i sofort los legen können. Golo Roden V IXnac* «*♦ mUgn • Aktuelle Zahlungsmodufte wurden ettegnert (PayPaä, Sofortuberweisung, Moneybookers. etc.) Node.js & Co. IN n t c » +*+ jto • Der Shop wurde von Sofortiiberw cKung.de zertifczsert.

S CCV MUldd** k» L ß p aA (r B «Ein TÉ»frt{ siehe: Kbck mch • und noch vieles mehr 2012,334 Seiten 'S f» I 11»» r Xm» «<« • Lest but not least: Jeder, der die modJfled eContmerce € 32,90 (D)

V k^nuiiii ATA« ■*> Ut WtoUyti Shop-voftwArc» o ln v t/ l, sollte d«s An wender hnndburh ISBN 978-3-89864-829-5 von DokuM^n kennen. Da Dokiftfan emer der Entw ».mow kKwmçwwwwi Bugfixes m der modifed eCommerce Shopsoftware bereits engearbeitet' Hier der Link iur aktuellsten Version des V* O i m I K«nümwiiiid Na Anwenderhandbuches: Kftck mich

~~S H»wiwi»>i»« b S» élUnw~~

~~'S M ifw u« Cwiiiiw«v IMI ▲ Die Highlights von Modfield e-commerce~~

~~^ W rp6» Wh A#tA«*ewwtanQen~~

V Wifln*«** CCIAMC Ujrugtm»* Sytf«Ai * CMS Eine große Stärke von Modfield ist die sehr S W i y w w v%'«crnaMr Stefan Koch V VWk K^4 CufrOiya* IWU».*« gute Anpassungsfähigkeit des Shopsystems. JavaScript V B » i j Ü Iw G*«4>*%*«ri Es lässt sich sehr leicht an die Vorstellungen V wr des Anwenders angleichen. 6. A uflage Bei Modfield e-commerce handelt es sich 2011,476 Seiten V üJffOio-m»% Uoqj w Adfe-o— icft € 39,90 (D) um eine vollkommen unabhängige Weiter ISBN 978-3-89864-731-1 ^ t « Al*«i entwicklung des renommierten Shopsys y/ FtmkUm tems xt-commerce. Viele der Module für + / f y w I

«/ Nm^odwi«ttcn Modfield e-commerce sind nach wie vor mit der Basis-Version von xt-commerce kompa V Fine« flw utw épi Adiw^ewcfi dpunkt.verlag rm tibel. Wie bei vielen anderen Herstellern ist Ringstraße 19 B • D-69115 Heidelberg auch bei Modfield e-commerce der Support ▲ Multifunktionalität wird bei Gambio fon: 0 62 21 / 14 83 40 • fax: 0 62 21 / 14 83 99 großgeschrieben. stark vom jeweiligen Projekt abhängig. e-mail: [email protected]

~~www.dpunkt.de RATGEBER ShoDsvstemgShopsysteme jp^Veraleich ima Vergleich a~~

~~Hersteller Magento~~

Produkt Magento Communitiy Magento Enterprise Magento Go Vertrieb Magento GmbH und Co KG Systemvoraussetzungen: PHP-Version 5.2.13 bis 5.3.15 5.2.13 bis 5.3.15 5.2.13 bis 5.3.15 MySQL-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 GB anfallende Kosten: Lizenskosten ab 5000 € ab 14420 Dollar/jahr Mietshopsystem, ab 15€ Kosten für Support keine Kosten vom Projekt abhängig vom Projekt abhängig Grundfunktionen Kundengruppen Keine Begrenzung Keine Begrenzung Keine Begrenzung

~~Mehrsprachigkeit •••~~

Multi-Shop-Fahigkeit ••• Plugin-Management sehr gut sehr gut sehr gut Kategorien und Unterkategorien beliebig viele beliebig viele beliebig viele Produktvarianten fast unbegrenzt fast unbegrenzt fast unbegrenzt

Suchfunktion ••• Schnittstellen Warenwirtschaftssysteme alle relevanten Systeme alle relevante Systeme alle relevante Systeme Preissuchmaschinen alle relevante Systeme alle relevante Systeme alle relevante Systeme Versand/Versender alle großen Anbieter alle großen Anbieter alle großen Anbieter SEO-Optimierung

~~Title-Tags • Meta-Discription~~

~~Caching • Marketing~~

~~Newsletter-System •~~

~~Facebook-Integration •~~

~~Gutscheinmodul •~~

~~Cross-Selling •~~

~~Sonderangebote •~~

~~Statistiken Shop-Besucher •~~

Umsatzstatistiken • Artikel/Kataloge Maximale Artikelanzahl unbegrenzt unbegrenzt vom Projekt abhängig Anzahl Bilder pro Artikel unbegrenzt unbegrenzt unbegrenzt Filter Lagerverwaltung Downloadbare Produkte Layout und Design Templates verfügbar Custom Design leicht anpassbar Zahlungsarten PayPal Click&buy per Sofortüberweisung Besonderheiten Rechnung/Lieferschein per PDF als E-Mail zustellbar? Gibt es eine CMS-Funktion?

~~30 webdesigner 04/2013 RATGEBER Shopsysteme im Vergleich~~

~~Shopware Cosmoshop Community Edition Professionei Edition Enterprise edition eStart ePro eMax Shopware 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 egal 5 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 viele fast 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 Systeme alle relevante Systeme alle relevanten Dienstleister alle relevante Systeme alle relevante Systeme alle relevante Systeme alle relevante Systeme alle 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 50000 unbegrenzt unbegrenzt unbegrenzt unbegrenzt unbegrenzt unbegrenzt~~

~~04/2013 webdesigner RATGEBER Shopsysteme im Vergleich~~

~~Hersteller Gambio plenty markets~~

~~Produkt Gabio Shopsoftware plenty markets professional plenty markets professional Vertrieb Gambio GmbH plenty markets gmbh Systemvoraussetzungen:~~

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 SQL erforderlicher Webspace mindestens 50 MB hängt vom Projekt ab hängt vom Projekt ab anfallende 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 unbegrenzt~~

~~Mehrsprachigkeit •••~~

Multi-Shop-Fahigkeit ••• Plugin-Management Sehr gut sehr gut sehr gut Kategorien und Unterkategorien beliebig viele sehr gut sehr gut Produktvarianten fast unbegrenzt fast unbegrenzt fast unbegrenzt

Suchfunktion ••• Schnittstellen Warenwirtschaftssysteme alle relevante Systeme alle relevanten Systeme alle relevanten Systeme Preissuchmaschinen alle relevante Systeme alle relevanten Systeme alle relevanten systeme Versand/Versender alle großen Anbieter alle großen Anbieter alle großen Anbieter SEO-Optimierung

~~Title-Tags •~~

~~Meta-Discription •~~

~~Caching • Marketing~~

~~Newsletter-System • Facebook-Integration~~

~~Gutscheinmodul •~~

~~Cross-Selling •~~

~~Sonderangebote •~~

~~Statistiken Shop-Besucher •~~

~~Umsatzstatistiken ••~~

Artikel/Kataloge Maximale Artikelanzahl unbegrenzt unbegrenzt unbegrenzt Anzahl Bilder pro Artikel unbegrenzt unbegrenzt unbegrenzt Filter Lagerverwaltung Downloadbare Produkte Layout und Design Templates verfügbar Custom Design leicht anpassbar Zahlungsarten PayPal Click&buy per Sofortüberweisung Besonderheiten Rechnung/Lieferschein per PDF als E-Mail zustellbar CMS-Funktion

~~webdesigner 04/2013 RATGEBER Shopsysteme im Vergleich~~

~~Oxid E-Sales Modfield Community Edition Professionei Edition Enterprise Edition Modfield e-Commerce Shopsoftware Oxid 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.x 5.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 keine Ab 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 gut beliebig 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 Systeme alle relevante Systeme alle relevante Systeme alle relevante Systeme alle relevanten Systeme alle großen Anbieter alle großen Anbieter alle großen Anbieter alle großen Anbieter

~~unbegrenzt unbegrenzt unbegrenzt umbegrenzt unbegrenzt unbegrenzt unbegrenzt unbegrenzt~~

•

04/2013 webdesigner RATGEBER Workflow für Web Designer von Jürgen Ortmann Workflow für Web Designer Ohne 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.

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

T e s tin g und - die dabei helfen, die Arbeit möglichst effektiv zu ge Korrektur | stalten. Der hier vorgestellte Workflow soll die Arbeit an einem Webprojekt im Allgemeinen abbilden und kann bei Bedarf natürlich auf das jeweilige Projekte angepasst werden.

▲ Ob bewusst oder icht nur bei der Arbeit im Team sind koordinier unbewusst, diese Pha te Arbeitsabläufe gefragt. Auch wer als Einzel Die einzelnen Stadien des Workflows sen durchläuft praktisch kämpfer unterwegs ist, sollte die verschiedenen jedes Webprojekt. N Stadien bei der Gestaltung von Webseiten kennen und Der Workflow lässt sich in acht grundlegende Stadien ganz bewusst abarbeiten. Dadurch können ein Großteil unterteilen, die im Folgenden näher erläutert werden der Fehler und mögliche Missverständnisse zwischen sollen. Zeitlich fällt die Gewichtung der einzelnen Stadi Kunde und Web Designer vermieden werden. Auch bei en sehr unterschiedlich aus. So ist die Definition des Pro der parallelen Bearbeitung mehrerer Projekte sind gere jekts sehr häufig bereits mit Beauftragung durch den gelte Abläufe unverzichtbar, um die Aufgaben innerhalb Kunden und dem vorangegangenen Beratungsge des gegebenen Zeitrahmens zufrieden stellend umzu spräch im Wesentlichen abgeschlossen. Die Umsetzung setzen. Die einzelnen Stadien des hier vorgestellten des Entwurfs dagegen dürfte den größten Teil der Zeit Workflows bauen dabei aufeinander auf. Das bedeutet, einnehmen. dass ein Stadium abgeschlossen sein sollte, bevor zu dem nächsten Stadium übergegangen werden kann. Wie bei kreativer Arbeit üblich, lassen sich die einzelnen Projektdefinition und Analyse: Stadien in der Praxis nicht immer so klar voneinander Das Projekt richtig erfassen trennen. Sie bieten aber eine Grundstruktur, an der man sich in jedem neuen Projekt orientieren kann. Gleichzei Am Anfang des Projekts stehen die Definition und Ana tig sorgen geordnete Abläufe dafür, dass man als Desig lyse. Diese besteht darin, sich genügend relevante Infor

~~34 webdesigner 04/2013 RATGEBER Workflow für Web Designer~~

mationen zu sammeln, um eine Grundlage für alle weite Tools für Planung und Projektmanage- ren Schritte zu schaffen. Dieses Stadium besteht vor al ment lem aus einem oder mehreren ausführlichen Gesprä chen mit dem Kunden, die vor und nach der Beauftragung Eines der wenigen frei verfügbaren Projektmanagement- stattfinden. Als Designer sollten Sie sich eine Checkliste Tools ist GanttProject. DasTool hat aber einiges zu bieten für diese Gespräche bereithalten, in der alle relevanten und kann bei Bedarf auch mit Projektplänen umgehen, Fragen zur Beauftragung aufgeführt sind. Dadurch stel die mit MS Project erstellt wurden. Einzelne Aufgaben len Sie sicher, dass Sie die wichtigsten Informationen zu können hier in einen Zeitplan eingetragen und mit Prio dem Auftrag auch von dem Kunden bekommen. Als ritäten versehen werden. Außerdem lassen sich in Gantt Fachmann ist es Ihre Aufgabe, sich diese Informationen Project die Abhängigkeiten der Aufgaben untereinander aktiv zu besorgen, denn der Kunde ist Laie und hat sehr darstellen. ▼ wahrscheinlich keine konkrete Vorstellung davon, wel che Dinge Sie wissen müssen, damit Sie das Projekt für ihn zufrieden stellend erledigen können. IPrcyert Edit View Itsks Resources Help Diese Aufgaben umfassen hauptsächlich: y y ©x a&dPti «>

• Die Absicht des Kunden: Was hat der Kunde mit der Zoom h i zocr Out Oggi * I P rtw u i | Next íwr cnocH cm* | Sa* fertigen Website vor? Was genau verspricht er sich da I A*XH2012 von? Test • Vorstellungen und Wünsche des Kunden: Welche konkreten Vorstellungen hat der Kunde von der ferti

gen Website? Gibt es möglicherweise eine bestimmte o N cw U lk CtH»T Farbe, die in dem Design immer wieder Vorkommen 0 Tesk Properties... Alt* Ent ef soll? * Unmdent * Indent • Zu verwendende Technologien und Standards: In der V Wp A ll* Up Definitions- und Analysephase sollte auch über mög 4 Oown Aft«Oowf licherweise zum Einsatz kommende Technologien 0 IM r A Unlink und Webstandards nachgedacht werden. Dies ist ins y Cue Ctf1*X besondere mit Hinblick auf die Ausbaufähigkeit der d p Copy Ctil-C fertigen Website interessant. Webtechnologien und - r Pacte CtH.V Standards verändern sich rasend schnell. Noch vor X Oektc TtsL.. Dekt« wenigen Jahren war zum Beispiel XHTML in aller Mun O CM rt options

• M it ponfo MrviWijy* de, heute gehört HTML5 die Zukunft. • Vom Kunden bereitgestellte Materialien und Medien: RSS b re n Je spezifischer die Vorstellungen des Kunden sind, des to mehr ist das Miteinbeziehen des Kunden in den kre Mit dem kostenlosen SmartTools Projektplan für Excel ativen Prozess erforderlich. Zudem kann der Kunde den kann MS Excel als Projektmanagement-Tool genutzt wer Web Designer unterstützen, indem er ihm Medien oder den. Der vorgefertigte Projektplan reicht aus, um bei klei Materialien, wie etwa Werbebroschüren oder das Fir neren Projekten den Überblick zu behalten. ▼ menlogo in digitaler Form zur Verfügung stellt. .°8( ■* J * __ __ - “*"■££ 1 * — a n Als Ergebnis der Defintions- und Analysephase sollten / * • » • m * *■ Urm. allen Beteiligten inklusive des Kunden die Anforderun gen an das bevorstehende Projekt klar sein. Aus den An forderungen werden dann die Vorgaben formuliert, die im späteren Verlauf des Projekts immer wieder zur Kont rolle herangezogen werden. In diesem Zusammenhang haben sich Roadmaps als äu ßerst nützlichesTool bewährt. In einer Roadmap werden alle Vorgaben erfasst uns erläutert. In den weiteren Stadi en kann die Roadmap dann verwendet werden, um dar in die Zuständigkeiten festzulegen und Termine für die einzelnen Teilaufgaben zu vergeben.

~~04/2013 webdesigner 35 RATGEBER Workflow für Web Designer~~

~~ZCOPE Horn« (2 3 5 3 3 2 3 Fallstuditn Preis« ä Anmeldung HiiTo & Support Forum b’log Alles was Sie für erfolgreiches Projektmangement brauchen.~~

~~Den Überblick behalten 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~~

~~Den Überblick behotten • j» 148,16 Aufgaben vctwaccn 9% Zeilen err»«n Trrmtnr fr%n*grn 9 budgets venenen Di4ajnw4v UriMrn K QD % s z . tcr er 9 ^fnrm»tir>r^n nini^^n~~

~~□ fci 9 ZCOPE Academy ¿k f l~~

phase gesammelten Informationen sortiert und in einen Zusammenhang gebracht, der für das anstehende Pro jekt optimal ist. Dabei können zunächst mehrere alterna Neben installierbaren Projektmanagement-Tools wie MS tive Konzepte entwickelt werden, von denen man dann Project oder GanttProject gibt es im Netz eine ganze Rei in einem weiteren Schritt das optimale Konzept aus he von Web Apps wie zum Beispiel ZCOPE (www.getz- wählt. Durch die Konkretisierung wird in diesem Stadi cope.com/de). Diese besitzen den Vorzug, dass sie prak um bereits auf Probleme eingegangen, die bei der spä tisch auf jedem Rechner mit Internetzugang verfügbar teren Umsetzung erfahrungsgemäß auftreten können. sind und somit alle Beteiligten stets auf jeweils aktuellste Die wichtigsten Tools für das Erstellen von Konzepten im Version zugreifen können. Da Projektmanagement-Tools Webdesign sind Dummies und Wireframes. Diese die praktisch immer professionelle Anwendungen sind, die nen vor allem zur Veranschaulichung möglicher Layouts dem Nutzer einen echten Mehrwert bieten, sind diese für die Webseite. Neben Papier und Bleistift kommen in Web Apps leider immer auch mit zum Teil erheblichen dieser Phase häufig Bildbearbeitungs- und Screendesig- Kosten verbunden. Das Testen ist aber in der Regel nach nprogramme, sowie vorgefertigte und anpassbare Wire einer Registrierung kostenlos. frames zum Einsatz.

Erstellung eines Konzepts: Entwurf: Von der Theorie zur Praxis Die Ideen nehmen Form an Steht das Konzept, kann mit dem Entwurf begonnen Dreh- und Angelpunkt jeder professionellen kreativen werden. Der Entwurf ist der erste Schritt der praktischen Arbeit ist das Konzept. Das Konzept bildet die Brücke Umsetzung. Zwar ist der Entwurf noch nicht funktions zwischen Ideenfindung und Umsetzung. Es stellt die tüchtig, er zeigt aber, wie das Ergebnis konkret aussehen Konkretisierung einer Idee dar. Beim Erarbeiten eines könnte. Neben dem Aussehen der Website können in Konzepts werden die in der Definitions- und Analyse dem Entwurf auch grundlegende Funktionen verdeut

~~36 webdesigner 04/2013 RATGEBER Workflow für Web Designer~~

licht werden. So ermöglicht das Screendesignprogramm Adobe Fireworks es sogar, einen Entwurf als interakti Umsetzung: Der handwerkliche Teil ves PDF zu exportieren. Das PDF enthält dann zum Bei spiel funktionierende Links zu Unterseiten und exter Bei der Umsetzung geht es darum, den Entwurf ein nen Seiten. Der Entwurf ist somit tatsächlich nutzbar schließlich des Kunden-Feedbacks aus der Präsentation und liefert somit bereits in der Entwurfsphase erste in eine lauffähige Website zu verwandeln. Wichtig ist Hinweise auf die Usability und User Experience der hier, dass bei der Arbeit im Team alle Aufgaben und Zu Webseite. ständigkeiten klar verteilt sind und dass den Beteiligten Der fertige Entwurf dient in der Regel auch zur Präsen alles zur Verfügung steht was sie brauchen. Darunter fällt tation beim Kunden. Die Präsentation stellt bereits das die benötigte Software, Farbvorgaben, Schriftarten, aber nächste Stadium des Workflows dar, jedoch unterliegt auch Hilfsmittel wie Stylsheet-Sprachen, die richtig be der Entwurf damit bereits der Anforderung, dass er herrscht werden müssen. Bei der Umsetzung kann zu dem Kunden grundsätzlich Zusagen sollte. Dadurch dem die Vergabe an andere Dienstleister einThema sein, orientieren sich alle Arbeiten der Entwurfsphase be wenn es darum geht sehr spezielle Funktionen oder Ele reits an den Wünschen und Vorstellungen des Kunden. mente in die Website zu integrieren. Die Notwendigkeit Durch die Erfahrung aus früheren Projekten können für die externe Vergabe sollte aber bereits in der Projekt aber auch Ideen mit einfließen, die der Kunde nicht definition und Analyse erkannt und dann rechtzeitig in ausdrücklich gewünscht hat oder von deren Nutzen die Wege geleitet werden. der Kunde bei der Präsentation noch überzeugt wer Speziell beim Coding wird bei der Umsetzung in aller den muss. Regel mit Basisvorlagen gearbeitet. Das hilft, unnötige Fehler zu vermeiden und somit den Aufwand für die Testing-Phase kurz zu halten. Präsentation beim Kunden: Die Bewährungsprobe Testing und Korrekturphase: Die Generalprobe Die Präsentation ist die Bewährungsprobe für den Ent wurf. An diesem Punkt entscheidet der Kunde ob er mit Webseiten sind, ähnlich wie Softwareprodukte, auf ein dem Entwurf zufrieden ist. Zudem kann der Kunde Än umfassendes Testing angewiesen, da trotz größter Sorg derungswünsche am konkreten Beispiel des Entwurfs falt immer wieder Unvorhergesehenes auftreten kann einbringen. Gleichzeitig ist auch der Kunde gefordert, und in aller Regel auch auftritt. Zwar müssen keine wo sich mit dem Entwurf auseinanderzusetzen und seine chenlangen Alpha- und Beta-Stadien durchlaufen wer Ideen und Vorstellungen von der fertigen Website an den, aber ein Testing auf den gängigsten Browsern und hand des Entwurfs zu prüfen und gegebenenfalls zu den wichtigsten Vertretern mobiler Endgeräte ist uner ändern oder an die Gegebenheiten anzupassen. lässlich. Das Testing soll zum einen zeigen, ob alles so Der Entwurf sollte daher klare Hinweise auf die endgül umgesetzt wurde, wie es beabsichtigt ist, zum anderen tige Version derWebsite liefern. Im Entwurf müssen alle Standardmäßig sollten folgende Dinge getestet werden. getroffenen Entscheidungen der Definition und Analy -Vergrößern und Verkleinern der Schriftgröße: Beim Ver se sowie des Konzepts deutlich werden. kleinern oder Vergrößern der Schriftgröße zeigt sich, ob Die im endgültigen Design verwendeten Farben, das sich eventuell Floats überschneiden oder Texte aus dem Layout und die Vorzüge des gewählten Designs soll Rahmen laufen. ten möglichst konkret im Entwurf dargestellt werden, -Validierung des Codes: HTML und CSS sollten in vali damit sie bei der Diskussion gezielt diskutiert werden dem Code geschrieben sein, um die Grundlagen für op können. An dieser Stelle bietet sich für den Kunden timale Sicherheit zu gewährleisten und damit es bei spä die Gelegenheit, letzte größere Änderungswünsche teren Bearbeitungen nicht zu vermeidbaren Problemen zu äußern. kommt. Für diese Prüfung eignet sich das Web-Devel- Sofern es sich um kein größeres Website-Projekt han oper-Add-on des Firefox-Browsers sehr gut. delt, besteht die Präsentation in der Regel aus einem -Alternativtexte von Bildern: Indem Sie die Darstellung Austausch per Email und Telefon. Der Kunde erhält von Bildern unterdrücken, können Sie überprüfen, ob für PDFs oder Bilddateien, die den Entwurf oder verschie jedes Bild ein geeigneter Alternativtext hinterlegt wur dene Varianten des Entwurfs zeigen. In einem Gespräch de. Dies ist nicht zuletzt aus SEO-Sicht ein wichtiger As kann dann das weitere Vorgehen bei der Umsetzung pekt. und eventuelle Änderungswünsche besprochen wer -Die Seite ohne CSS: Wählen Sie im Web-Developer- den. Die Änderungswünsche sollte möglichst exakt Add-on die Funktion „Disable Styles", um das Laden des schriftlich festgehalten werden. 04/2013 webdesigner 37 RATGEBER Workflow für Web Designer

CSS zu unterbinden. Dadurch können Sie prüfen, ob die Tools für das Wireframing Seite auch ohne Stylesheet noch nutzbar ist. -Skripte abschalten: Nutzen Sie ebenfalls das Web-Deve- Für das Wireframing gibt es inzwischen eine ganze loper-Add-on, um Skripte abzuschalten. So können Sie Reihe praktischer Tools, sodass diese Aufgabe nicht die Zugänglichkeit der Seite prüfen. Viele Internetnutzer mehr mühsam mit Photoshop umgesetzt werden haben bei ihrem Browser zum Beispiel JavaScript oder muss. Unter anderen sind hier justinmind Protoyper Flash abgeschaltet. (www.justinmind.com, Pro-Verison kostenpflich Die gefundenen Fehler und Schwächen müssen selbst tig) und das OnlineTool Protoshare (www.protosha- verständlich behoben und die Seite dann erneut getes re.com, kostenpflichtig) sehr interessant. Zudem tet werden, bis schließlich alles in einwandfreiem Zu steht mit Wirefy eine flexibel anpassbare Beispielseite stand ist. Erst dann ist die Webseite fertig und kann zurVerfügung. ▼ online gehen.

~~P*- M I farm* Vrw frtwvt Tdàr . ù y ù * # A C ^ :>30Q * »oiwjjcts a~~

~~IQnftiwrij» t\~~

~~□ Loram iptum Scr«n 1~~

~~I f'.uü'ouw i yrvUt) ö u u □~~

tot trvpvtn \9 ai *

~~___ ...... E> P«j»jiai2 vm* iflranpun t 4______* 'Vxf\JertJT~~

~~TöOt£ § A~~

~~• / «rii ■ Te.t...... g o • . •¿«tr.'1ZI~~

~~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 RATGEBER Workflow 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. ►~~

~~te ntuat*tb*¡&B~~

Firebug m m r n à ter P *

~~n 5 Etwas umfangreicher und leistungsfähiger als das Web N Developer-Add-on ist die Browser-Erweiterung Firebug, iw e b r Lightroom~~

~~Mim • O i *>V» OOM tk-j«*.* <.«* j P - 0 4 3 KO* . M « A * I I « I I « « k t * I m M (««>«# (KM m ^ — ---- . • — •~~

~~(N I I1 H ’ tl »9 IIOTn ■ ■u ril'U U U » •• »*r** *• » ■>** * iw • • • i if t '» I •/ n .* f 0ÍHI44 M 1.« Im H • » XAMPP I. ______~~

Sofern man über keinen Testserver verfügt, ist XAMPP Hy XAMPP für Windows eine sehr gute Lösung, um auf einem Rechner lokal eine Testumgebung einzurichten. Die Installation ist etwas W iß k o m m e n ¿ u XAMPP für W indows! umständlich, XAMPP erfüllt dafür aber seinen Zweck HvrjlkbvN Clwtk«vwn\«li. XAMPP Kl vrfultf* vidi W ijivvvm Rvilw vr Iii>l«lltvrl1 hervorragend. ► • » * • • ♦ » • A Qr+M thank yrut tn h.wÁAtt¿ck147 tor ttu\ n+w tin 0 Contrat P,>n+H M i t I I I «

~~7 * E ) XAMPP für Windows . ...« Rückblick: XAMPYMftafcJt Was war gut und was war nicht so gut? t » J i W m L t v K i t k««i • « « ! wvkJm •A ^lin u ivU ii unUM u«J Im« ht*l»r««vt.~~

Mit der Auslieferung ist das eigentliche Projekt abge -.au schlossen. Insbesondere wenn es sich um ein größeres Projekt handelt, bei dem mehrere Personen beteiligt waren und bei dem bestimmte Problemstellungen zum ersten Mal aufgetreten sind, sollte das Projekt 1 t u » j _X j noch einmal im Team besprochen werden. Bei dieser >~«6#V*I. *• I 4 i'M í' vi’ j | C»or>a Gelegenheit kann die Arbeitsweise besprochen wer mo:» ftttZMil y jtjc jrM n ro y v m •4 a: io j**wrcuryl Starte ^roçrcnm Mere ir* den und es können Lösungsansätze für aufgetretene u 9 t ia jwcur/] UxtfLnûnScrxtQ cfkrrl y¡rt£f.¡t 14 3f 1 i pâffvjtfJ trim‘/é Schwierigkeiten entwickelt werden, die idealerweise *4 9 f 18 f w*rj i zu besseren Herangehensweisen bei zukünftigen Pro ¡ jekten führen.

04/2013 webdesigner 39 TUTORIAL Best Practice für flexible Websites von Jürgen Ortmann Best Practice für flexible Websites Responsive Design wird häufig als das Nachrüsten einer Nutzeroberfläche für mobile Endge räte verstanden. Dabei können bereits beim Coden von Desktopseiten verschiedene Dinge implementiert werden, um das Design möglichst flexible zu halten.

▲ Die Ausgabe auf verschiedenen Ausgabege S eit der Einführung von Smartphone und Tablet- erdenkliche Displayformat optimal für die Darstellung räten sollte bereits bei der Computer ist im Web Design das„Responsive De der Inhalte nutzt. Gestaltung von Webseiten sign" in aller Munde. Und wie bei allen neuen Dies betrifft sowohl das Layout einer bereits vorhandenen berücksichtigt werden, Web-Trends gibt es auch hier so manches Missverständ Website, die bereits existiert hat, als es noch keine Smart- selbst wenn diese zunächst als reine Desktopseiten nis. Worum geht es beim Responsive Design eigentlich? phones und Tablets gab, als auch von Grund auf neu ge konzipiert werden. Um das Erstellen von Webseitenablegern für mobile staltete Webseiten, bei denen die mobilen Endgeräte und Endgeräte? Oder um das Gestalten von drei Versionen deren Bedienkonzepte von vornherein berücksichtigt für Desktop-Monitor, Tablet-Computer und Smartpho werden können. Grundlage für das Responsive Design ist ne? Eigentlich nicht. Das Wesentliche des Responsive insbesondere die Möglichkeit, dass die Breite von Contai Designs ist die Anpassungsfähigkeit des Layouts einer nern im CSS so definiert werden kann, dass sie durch den Website an verschiedene Viewports. Ein alternativer Be vorgegebenen Platz bestimmt wird. Damit ist das Arbei griff, der dieses Konzept besser verdeutlicht, ist der des ten mit festen Breiten endgültig passé. „Liquid Designs", denn das Ziel dieses Gestaltungsansat In diesem Tutorial soll eine Herangehensweise vorge zes ist, ein Layout zu entwickeln, der automatisch jedes stellt werden, die als fester Bestandteil in jedes neue

~~40 webdesigner 04/2013 TUTORIAL Best Practice für flexible Websites~~

~~Webprojekt einfließen sollte. Bei den hier vorgestellten~~

Techniken handelt es sich sozusagen um Best Practices,
durch die eventuell später auftauchende Probleme be < lixa href="#" title="Home">Home züglich der weiteren Optimierung für mobile Endgeräte < lixa href="#" title="About">About vermieden werden können. Ist das Layout flexibel ge c lix a href="#" title="Projekte">Projekte nug, wird sich zum Beispiel das Anpassen von Schaltflä < lix a href="#" title="Kontakt">Kontakt chen für die Bedienung mit dem Finger ebenfalls weni
ger problematisch gestalten.

Die flexible Gesamtbreite
Die Grundlage für ein anpassungsfähiges Layout ist eine
Gesamtbreite, die sich an die Breite des Viewports an
Main section passt. Dazu müssen im Wesentlichen alle Inhalte von ei
Lorem ipsum
nem Wrapper mit flexibler Breite umschlossen werden
und die Breite für Inhalte und Spalten muss ebenfalls
flexibel angelegt werden. Die Möglichkeiten dazu beste Sub sectionc/hl > hen in CSS schon länger, sie sind nun aber wichtiger
Lorem ipsum
denn je. Als Beipiel dient eine Website, die über eine Na
vigation, ein großes Bild und einem zweispaltigen Text

~~besteht. Im HTML sieht das Ganze dann wie folgt aus. cIDOCTYPE html> chtml lang="en"> ♦ • » « Beipielseite Responsive Design clink href="styles/main.css" type="text/css" rel="stylesheet">~~

5Si SEO Für Wordpress CSS 3 Tutorial HTML Newsletter

Main section passt. Dazu müssen im Wesentlichen alle Inhalte von ei­ Lorem ipsum nem Wrapper mit flexibler Breite umschlossen werden

Main section passt. Dazu müssen im Wesentlichen alle Inhalte von ei
Lorem ipsum
nem Wrapper mit flexibler Breite umschlossen werden