Know-how & Tutorials für Profis
WordPress
jQuery EÍHTM L5 3 CSS
5Si
i t /
C° c /t
*Co 4 l/( '4 o
in
A
SEO für WordPress
CSS 3 Tutorial
HTML Newsletter
Immer noch ein unterschätztes Thema
Objekte ohne Flash & JavaScript animieren
Wir zeigen Ihnen wies funktioniert
Europas Nr. 1 kreative Ressource 21 Mio. lizenzfreie Fotos, Videos und Vektoren ab 0,75€. Tel. +49 (0)30 208 96 208 |www.fotolia.de
EDITORIAL
Ltí
Willkommen !
j
ggstcrrr
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 Chefredakteur
Dipl.-Ing. Hans-Günther Beer (V.i.S.d.P)
[email protected]
Redaktion
Jürgen Ortmann
[email protected] Tobias Henke
[email protected]
O
nline Shops stellen als Webseiten eine Besonderheit dar, da für den Betreiber von der Funktionalität dieser _ _
Fraqen an die Redaktion
Seiten enorm viel abhängt. Inzwischen ist derAutoren Markt für dieser
[email protected]
Shopsysteme riesig und die Entscheidung für eines dieser Syste
Ausgabe
Oliver Berghold, Daniel Flöter, Tobias Henke, Andreas HitzigJü rg en Ortmann
me und gegen seine Konkurrenzprodukte erfordert eine intensive
Grafik & Layout
Ronald M. Stirner
[email protected]
Recherche, da zum einen die Kosten für das Shopsystem und den Support sich stark voneinander unterscheiden. Zum anderen muss unbedingt sichergestellt werden, dass das System Zukunfts fähigkeit ist und genügend Möglichkeiten für einen Ausbau bie
Lektorat
Dagmar Schellhas-Pelzer
Gesamtanzeigenleitung
Daniyal Rahman Fax: 02224 9882679
[email protected]
tet. Aus diesem Grund haben wir uns eine Auswahl von insgesamt 18 Shopsystemen in Bezug auf den Funktionsumfang näher ange schaut und die Ergebnisse in einem großen Ratgeber zusammen
Tel.: 02224 9882635
Brigitta Reinhart,Telemarketing Lehmkuhl Tel.: 089 464729, Fax: 089 463815
[email protected]
Key Account Manager
getragen. Zur besseren Vergleichbarkeit wurden die wichtigsten Kriterien in einer Tabelle zusammen 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 fach überschrieben werden. Eine Lösung für dieses Problem ist die Ausgliederung der Änderungen in
Senefelder Misset, 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-
Druck
IPS Pressevertrieb GmbH
Vertrieb
Animationen umgehen, was sie bei HTML-Newslettern beachten sollten oder welche vielversprechen den Möglichkeiten Web Storage und Super-Cookies für Websites bieten.
Viel Spaß mit der vorliegenden Ausgabe!
Meckenheim Bezugsmöglich keiten
Zeitschriftenhandel, Fachhandel, Abonnement
Preise
Einzelbezug 12,95 € Jahresabonnement Inland 109 € für 10 Ausgaben inkl. MwSt und Porto (Ausland: 126 Euro inkl. Porto)
Jürgen Ortm ann,, 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 R B 196730 USt-ldNr.: DE281259857
web
Bankverbindung
Commerzbank München Kto. 150 757 300 BLZ: 70040041 IBAN: DE92 70040041 0150 7573 00 BIC: COBADEFFXXX
© Für alle Beiträge, Messdaten, Diagramme und Abbildungen bei Sonic Media - Ein Geschäftsbereich der music support group GmbH. Die Zeitschrift und alle in ihr enthaltenen Beiträge sind urheberrechtlich geschützt. Mit Ausnahme der gesetz lich zulässigen Fälle ist eine Verwertung ohne vorherige schriftliche Einwilligung des Verlages verboten. Übersetzungen, Nachdruck oder Vervielfältigung und Spei cherung sind - mit Ausnahme zum privaten Gebrauch - nur mit ausdrücklicher Einwilligung des Verlages zulässig. Eine Haftung für die Richtigkeit der Veröffentli chungen kann trotz sorgfältiger Prüfung durch die Redaktion weder vom Heraus geber noch vom Verlag übernommen werden. Für unverlangte Einsendungen wird keine Haftung/Gewähr übernommen. Für namentlich gekennzeichnete Bei träge übernimmt die Redaktion nur die presserechtliche Verantwortung. Pro duktbezeichnungen und Logos sind zu Gunsten der jeweiligen Hersteller als Wa renzeichen und/oder eingetragene Warenzeichen geschützt. www.webdesigner-magazin.de
Inhalt
Webdesigner 04/2012
1
IMPRESSUM
C ache ist noch le er : m an ifest
KOLUMNE Ist das noch innovativ oder kann das weg?
6
*
A nw endungvcache : C ached d ie in d e f M a n ife s t-D a te i s teh en d en D a te ie n
W e b s e ite a m e ig e n u n d in d e n A nw end ungscach e laden
M a n ife s t-D a te i: B eschreibt den A nw end ungscach e
oder C ache ist angelegt :
#
O) M a n ife s t D atei ä n d ern : • D a te ie n a u fn e tu n e n • D a te ie n löschen
A nw endungscache aktualisieren
• V ersion a ktu a lisie re n
NEWS & BUCHREZENSIONEN News und Buchvorstellungen
W eb server
C lie n t/B ro w s e r
8
Neuigkeiten rund ums W eb
Buchrezension
104
"Photoshop CS6" von Markus Wäger
>
1
JO B BOERSE Stellenangebote für Webworker
>
1
48
Aufwändig gestaltete Einseiter
Online Shops
Dank sogenannter Super-Cookies können auch kom plexe Web-Anwendungen verfügbar gemacht werden, wenn die Internetverbindung unterbrochen wird.
106
WEB-GALERIE Interessante Single Pages
à
Web-Anwendungen offline nutzbar machen
\
KONZEPriONitRuMG L j
w u r- f
100
W eb Designs für Online Vertriebsplattformen
Umsetzung
RATGEBER Web-Anwendungen offline nutzbar machen 14 W eb Storage, Application Cache und IndexedDB
Shopsysteme im Vergleich
24
18 Systeme und ihre Stärken und Schwächen
Workflow für Web Designer
T e s t i n g un K o rrek tur
34
Mehr Effektivität durch geregelte Abläufe
SEOfür WordPress
72
Die wichtigsten Techniken für besseres Page Ranking
Child Themes in WordPress Was W eb Designer SEO-technisch beachten sollten
4
der webdesigner 04/2013
88
Workflow für Web Designer Mit den richtigen Arbeitsabläufen können auch größere Projekte bewältigt werden und es lässt sich effizienter arbeiten.
somc-meaia.
88
ü JiW :
Child Themes in WordPress
Damit individuelle Anpassungen bei einem WP-Theme nicht mit dem nächsten Update des Themes überschrieben werden, sind Child Themes die optimale Lösung.
der-webdesigner.
TUTORIALS
Profi-Techniken Schritt für Schritt erklärt 40
Best Practice für flexible Websites 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
IM
!«■««• ••
f
Videos für WordPress
I.«
»«
60
Filme richtig in WordPress-Seiten einbinden ■
«Ar« UlfUV
Social Media-Buttons ansprechend gestalten 30 • R M f f
PKT>
66
Web-2.0-Schaltflächen mit Photoshop
ES IST UNSER 1. GEBURTSTAG! UM DAS ZU FEIERN. GIBT SS DAS HIER:
Als Objekte laufen lernten
20% RABATT AW
76
CSS3-Animationen einsetzen
JEDEN ZWEITEN ARTIKEL! RAIATT INCCT AM MTTIWOCH. M H 27. PISRUAft
M*M» MC o u»
HTML-Newsletter gestalten
scan e « « n w w mm ».
•twWM'Ä'iAI'WMl «MW»»W *0
82 »— *-
V t iJ V
Web- und Email-Clients richtig ansprechen
HTML-Newsletter gestalten Mail-Clients können HTML-Seiten nicht immer einwandfrei darstellen. Mit einigen Kniffen lässt sich HTML trotzdem sehr gut für die Gestaltung von Newslettern nutzen.
123 » fr »4 **•
I« I *
MM.
Auf zu den Sternen
92
Mit Illustrator Banner im Retro-Look gestalten
Inserentenverzeichnis
105
Download-Anleitung
112
Vorschau
114
««
I-
* < *
........ 82
; • > .T .
wi
SA\
>~n *>t j*>jt.j
J*
IJt
J
4 ^ 2
4 % ;
*\H ln ^ j Œ-J o-r.i JiA*
p ~ »
II
41
• I?
Jl*
92
Auf zu den Sternen Mit Illustrator lassen sich trendige Retro-Grafiken und -Banner gestalten. Grundlage dafür ist die Arbeit mit Bezierkurven.
Das benötigte Material für die Workshops können Sie bequem von unserer Webseite herunterladen. Mit dem exklusiven Leserpasswort haben Sie die Dateien immer und überall zur Hand.
04/2013 der webdesigner
5
KOLUMNE
WILLY WEB MASTER Ist das innovativ oder kann das weg? Manchmal schreibt das digitale Zeitalter wirklich seltsame Geschichten. Man fragt sich, ob die vermeintliche Innovationskraft, die für Dinge wie Google Glass aufgewendet wird, nicht sinnvoller genutzt werden könnte. Wer will schließlich schon mit einer Brille telefonieren? Auch wenn man bei Googles Datenbrille vielleicht noch geteilter Meinung sein kann, ist spätestens der Nutzen von sprechenden Schuhen, wie Google sie kürzlich in Texas vorgestellt hat, kaum noch nachvollziehbar. DieGoogle-Schuhe 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
1011101
01101
1110001001
Aktuell 2 u iOS 6
JW**
A U tu e U
zu \OS 6
' v
« 4
*®p‘
c i c t o n c » - N S S e a rc h P A th F o rD i r e c t o r i< :ft - ( d i r a c t o r l e * o t > ) e c t A t I n d e x ! 0 | ; I ( r e s u l t « o f c je c t A t In d e x r ( ia d e x P a th
at a <
M le c te d S ^ iM m tIn d e x ) jo r
» e t U b lq u lt o u a * N O
—
1)
<
lt « n * tU 9 U « s u r l
d e a t in a t lo n U R L : (K5UHL filo U R L M
Apps programmieren für iPhone und iPad Das umfassende Handbuch ► Grundlagen der A n w e n d u n g s e n tw ic k lu n g mit dem SDK 6 ► Apps entwickeln, testen, abs.chern und vcroffei.ll.chen ► Inkl. Xcode. ¡Cloud. Twitter. Debugging, V e rs te u e ru n g ,
App-Entwicklung mit iOS 6
zahlreicher P ra x isb e isp ie le 1012 Seiten, mit DVD, 39,90 € ISBN 978-3-8362-1915-0
LEH R -
Progra/Tiin
gemaft *1 4
Ju S c h G
S S AlleRm*«'*V .dT eo oo-UK k^1.onen r
Galileo C om puting
Professionelle App-Entwicklung! Profitieren Sie vom Wissen der iOS-Experten Klaus M. Rodewig und Clemens Wagner. Auf über 1.000 Seiten erfahren Sie, wie Sie professionelle Apps für iPhone und iPad ent wickeln, testen, absichern und im App Store veröffentlichen. Inkl. Xcode, Debugging, Versionierung, zahlreichen Praxisbeispielen und Sicherheit. Darüber hinaus bieten wir Ihnen Bücher zu Android, WebApps und Windows Store Apps. Viel Spaß beim Stöbern!
Unsergesamtes Programm
»www.GalileoComputing.de
f
» facebook.com/GalileoPressVerlag
»
» twitter.com/Galileo_Press
R+ » gplus.to/GalileoPress
Galileo Computing 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 haben mag: Die Onpage-Optimierung ist nicht out. Im Gegenteil: Überlegungen
...... - «5.**
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 im H * 1
Marketing Suite, sieht die Zeit für mehr Onpage-Optimierung gekommen und er
r~ T
weitert das hauseigene Onpage-Tool.
«n
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. Hinzugekommen sind nun zwei weitere Rubriken des Onpage-Tools, die allesamt
•M
zum Ziel haben SEO-Texte optimal zu gestalten und zielführend zu gestalten.
MH O
t
Mit Karl Kratz' berühmter Formel „WDF*IDF" arbeitend, können Nutzer damit nicht nur einsehen, welche Mitbewerber besser optimierte Seiten für das entsprechende
U
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
8
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
dewort 15i24 angegeben werden.
len, ob die Dienst
Bei den dedizierten Servern können Neukun
leistungen
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
Einrichtung sowie die Serveradministration
möchten.
lieber ausgelagert werden soll. Für Web- und
K u n d e n k o n ta k t
Werbeagenturen, die ihren Kunden auch
legt internet24 be-
webdesigner 04/2013
wäh unter
auftreten Beim
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
-Sv
w .
Adobe Experten, welche Vorteile Ihnen der
; '
Einsatz der Creative Cloud für Teams in Ih
m
t p
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
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
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
Kooperationspartner
herkömmliche
Lizenzprogramme
04/2013 webdesigner
9
NEWS_________________ Neuigkeiten aus der Welt des Webdesigns
Na c h h a l t i g e V e r b e s s e r u n g e n für im
Unternehmen Dialog
Ku n d en
M
ita r beit ern ,
der
Ge s c h ä ft s-
m it
und
entstehen
fuhrung.
.heidischerm.de
IT-Sicherheit, Qualitätsmanagement, Prozessoptimierung und Datenschutz
Sicheres Hosting mit Hostserver.de
10
webdesigner 04/2013
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
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
„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.
Informations-Sicherheits-Management-System
des
Informations-Sicherheits-Ma-
_________________ 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 Suchmaschinen-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 SuchmaschinenOptimierung reicht das Spektrum von der KeywordRecherche, der wichtigen Onpage-Optimierung Ihrer Website über erfolgreiche Methoden des Linkbuildings bis hin zu Ranktracking, Monitoring und Controlling. Auch ergänzende Bereiche wie Google AdWords, die Konversionsraten-Optimierung und Google Analytics
JO
Auf einen Blick
Suchmaschinen-F m ' O p tim ierun g Das umfassende Handbuch
Titel: Suchmaschinenoptimierung. Das umfassende Handbuch
Autor: Sebastian Erlhofer Verlag: Galileo Computing ISBN: 978-3-8362-1898-6 Preis: 39,90 Euro, als Onlineausgabe 34,90 Euro
►
G r u n d la g e n , f u n k t io n » w f i% * n u n d R a n k in * - O p tim ir r u « g
► P la n u n g u n d D u n h fü h r u n g fü r C o o g l« und Co ►
K o n v * r * io n \ia te n
. t e ig e m , G o o g lr Ä d W o ,d s . W e b A n a l y « ^
" S . C a lillo C o m p u tin g
04/2013 webdesigner
NEWS 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 ProgrammHighlights: 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.
12
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.
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
nicht die eigenen, besonders
eigenen
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
Sullivan beklagt, dass Apple unabhängigen
nutzen.
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.
UlWebView
Apple
hingegen
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 müssen, sondern auf eigener Flardware speichern, wo sie deutlich mehr Kontrolle dar
. a
Social Media
notwendig, weil die dezen tral vorhandenen Kapazitä ten genutzt werden. NGOs 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
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
Struktur
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
13
RATGEBER von Daniel Flöter
Web Storage, Application Cache und IndexedDB
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 WebAnwendungen auch offline nutzbar.
Cache ist noch leer: .manifest Manifest-Datei: Beschreibt den Anwendungscache
* «
Webseite anzeigen und in den Anwendungscache laden
Anwendungscache: Cached die in der Manifest-Datei stehenden Dateien
oder Cache ist angelegt Manifest-Datei ändern: • Dateien aufnehmen • Dateien löschen • Version aktualisieren
Anwendungscache aktualisieren
>----------- J Webserver Durch neue Techno logien wie Applica tion Cache können wesentlich größere Datenm engen im Browsercache vor gehalten werden, als dies bisher m it Cookies möglich war.
14
webdesigner 04/2013
C
Client/Browser
ookies sind in der Webentwicklung nicht mehr
haben ihre eigene Funktionalität zu erfüllen. Zwar besit
wegzudenken. Mit HTML5 & Co. sollten auch die
zen diese Speichertechniken eine gewisse Genialität und
Cookies eine Überarbeitung bekommen, und
eine unglaublich wichtige Funktionalität in der Weben
zwar eine, die gleich etwas größer ausfällt. Dabei sollten
twicklung, es lässt sich nicht von der Hand weisen, dass
die bestehenden alten Cookies nicht einfach ersetzt wer
bei der Entstehung beider Konzepte auch Fragen unbe
den, sondern mit den neuen einen großen Bruder be
antwortet gelassen werden mussten, um die Verbreitung
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.
RATGEBER Web Storage, Application Cache und IndexedDB
Web Storage • O trM
Das neue Web Storage erweitert das JavaScript-Win-
Im » * »
P \* f
V*wTwfca
Qm*S
Ort««
Ç\wàm-ém
Trw*elMi
I%mm
Cougle
dow-Objekt um zwei Funktionen, den Local Storage und den Session Storage. Letzterer ist am ehesten mit
n
Orve
Cookies zu vergleichen. Während Local Storage die Da ten auch dann noch speichert, wenn der Browser ge
Edü OoooWí Docum ontt and v *w Ooogto S p w d tfiM t» • My t>w*
schlossen wird, ist der Session Storage an eine Anwen
ShndttMn« :ttr%s
dung oder Seite sowie an ein Tab und Browserfenster
ÜK«r4
gebunden. Außerhalb einer solchen Session sind die Daten nicht mehr gültig. Je nach verwendetem Brow
1. 8«t V0 Offlin« ttec«
1 In»Uli V* Om* Q n m
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 ***
ZZniDiNNfi «■t» MM« 10 «Mtu«#r LMf^mon C
j
AdNt» 0*1rm0*m
;
- r » CWN rtori
« PU*-; CT öff-1 i n M O I f W O o c i
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 WebkitBrowser 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
Web SQL
mit
der
Speicherung
von
großen
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.m ozilla.org/2010/06/beyond-htm l5-database-apis-and-the-road-to-indexeddb/")
werden, um dann per SQL-Befehle Daten lesen und sch
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 FITTPAufruf (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.
Caching Techniken verwenden
Die API-Schnittstelle sieht folgende Eigenschaf 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") im iE: .removeltem(„key")
vorhandene Benutzerdaten im Web Storage vorhanden
Löscht ein KeyA/alue Paar.
Server synchronisiert werden können. Also immer die
sind, worauf diese Daten dann mit den Daten auf dem 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. window.addEventListener(,offline', function(event) {
Zudem gibt es auch Events:
console.log(„Browser ist jetzt offline.");
,storage' im iE:,onstorage'
}, false);
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); } eise {
if(typeof(Storage)!=="undefined")
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 webdesigner 04/2013
chtml manifest="example.manifest">
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. ▼
R esources |
o Nam e P a th
M e th o d c a r .h tm l
CET
/A p p C a c b e s ty le s h e e tx s s
GET
/A p p C a c b e m a in js __ Ü
CET
/A p p C a c h e /s c r ip tt c a rg p g
C ET
/A p p C a c h f /im * q r\
4 r tq u tid >2
e .
N e tw o rk
1 08 Ir in ifir r td Q.
Q
•
S ta tu s Text 200 ok
200 OK 200 OK 200 OK
S ources
( j t T im e lin e
^
P rofiles
Type
In it ia t o r
t e x t /h t m l
O th e r
A u d its S iz e C o n te n t
c a r.h tm l; S
4m s
Parser
0m s 0m s 0m s 9m s
(fro m c ach e)
Parser
^
0m s
(fro m c a ch e)
c a r.h tm l; 18
•m a g e /jp e g
4m s
(fro m c ach e)
Paner
a p p lic a tio n /p v a s c r.p t
l$rro
(fro m c a ch e)
c a r.h tm l.4
te x t/c s s
C o n so le
*
9m s j
Ml
1 3 6 m » (o n lo a d : 3 8 m s , D O M C o n te n tL o a d e d : 2 8 m i ) O
D o c u m e n ts
S ty le s h e e ts
Im a g e s
S c rip ts
XHR
F o n ts
W e b S o c k e ts
O th e r
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) { if (strpos ( $line, ,#') === 0)
zunehmen ist unter [Laufwerksbuchstabe]:\xampp\apache\conf\mime.ty-
//
startsWidth #: revision {
pes:
fputs ( $fp, „# „. date ( „d-m-Y H:i:s"). $nl); text/cache-manifest
appcache
text/cache-manifest
manifest
//
update 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,
}
else if (strpos ( $line, Sdelete) !== false)
dort liegt die Manifest-Datei. Anstoß von Cacheände rungen gehen von Änderungen dieser Manifest-Datei
{
//delete: not add
aus. Entweder man ersetzt sie mit neuen Inhalten, än dert sie oder löscht dort Dateien mit einer Webserver-
}
else
programmiersprache, wie PHP oder C#.
{
