Webdesigner.april.2013

August 21, 2017 | Author: Constantinescu Mihai | Category: Http Cookie, Web Browser, Google Chrome, Safari (Web Browser), World Wide Web
Share Embed Donate


Short Description

Webdesigner.april.2013...

Description

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#.

{

View more...

Comments

Copyright ©2017 KUPDF Inc.