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 somc-meaia. ü J i W : Child Themes in WordPress Damit individuelle Anpassungen bei einem WP-Theme nicht mit dem nächsten Update 88 des Themes überschrieben werden, sind Child der-webdesigner. Themes die optimale Lösung. TUTORIALS Profi-Techniken Schritt für Schritt erklärt Best Practice für flexible Websites 40 Stylesheets von vornherein RD-tauglich gestalten Grafiken mit SVG & HTML5 erzeugen ........ 44 Grafiken direkt im Code anlegen Design für eine App-Downloadseite, Teil 1 ........ 54 Aufwändige Hintergründe als Bühne für den Content Videos für WordPress 60 !«■««• •• I M f » « I.« Filme richtig in WordPress-Seiten einbinden ■ «Ar« Ulf UV Social Media-Buttons ansprechend gestalten 66 30 • R M f f PKT> Web-2.0-Schaltflächen mit Photoshop ES IST UNSER 1. GEBURTSTAG! UM DAS ZU FEIERN. GIBT SS DAS HIER: Als Objekte laufen lernten 76 20% RABATT AW CSS3-Animationen einsetzen JEDEN ZWEITEN ARTIKEL! RAIATT INCCT AM MTTIWOCH. M H 27. PISRUAft HTML-Newsletter gestalten ........ 82 M*M» MC o u» sca ne« « n w w mm». •twWM'Ä'iAI'WMl «MW» »W *0 Web- und Email-Clients richtig ansprechen HTML-Newsletter gestalten Mail-Clients können HTML-Seiten nicht immer Auf zu den Sternen 92 einwandfrei darstellen. Mit einigen Kniffen lässt Mit Illustrator Banner im Retro-Look gestalten 82 sich HTML trotzdem sehr gut für die Gestaltung von Newslettern nutzen. Inserentenverzeichnis 105 »— * - V t i J V 123 » fr »4 **• I« I* MM. « « I- Download-Anleitung 112 * < * ; • Vorschau 114 w> .T i. SA\ J* *\H ln ^ j Œ-J >~n jt.j *>t >~n j*> o-r.i JiA I J t J p ~ * 4 ^ 2 » II 41 • I ? 4 % ; Jl* Auf zu den Sternen Das benötigte Material für die Workshops können Sie bequem von Mit Illustrator lassen sich trendige Retro-Grafiken unserer Webseite herunterladen. Mit dem exklusiven Leserpasswort und -Banner gestalten. Grundlage dafür ist die haben Sie die Dateien immer und überall zur Hand. 92 Arbeit mit Bezierkurven. 04/2013 der webdesigner 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