Archiv für den Autor: Florian Köhler

Florian Köhler

Über Florian Köhler

Als Autor dieses Blogs und Inhaber der Werbeagentur Webtwist bin ich immer auf der Suche nach interessanten Trends, Neuheiten und Hintergrundberichte in den Themenbereichen Mediendesign, SEO und Social Media.

Sonne, Strand, Meer, Wärme, Licht, Palmen: mit Sommer lassen sich nahezu unendlich viele Begriffe assoziieren. Passend zur derzeitigen Hitze in Deutschland findet Ihr in diesem Showcase 20 Beispiele für Webseiten, deren Screendesigns richtiges Summer-Feeling auch am Rechner zu Hause aufkommen lassen. Webdesign Inspiration mitten im Sommer…

Facebook: hashtag wird eingeführtMit der Einführung des #Hashtags versucht Facebook nun, eines der bislang größten Mankos der Social Media Plattform in den Griff zu bekommen: die Suche nach Themen und Inhalten. Die Idee, das Raute Symbol als Instrument für die Auffindbarkeit von Inhalten einzusetzen, ist dabei alles andere als innovativ oder revolutionär. Wird diese Methode doch bereits seit Jahren bei den Social Media Diensten Twitter, Pinterest, Tumblr oder Instagram erfolgreich eingesetzt, um Nutzern die Suche nach Inhalten zu ermöglichen und zu erleichtern.

Vorteile für Nutzer und Unternehmen: schnellere Auffindbarkeit und breitflächigere Verbreitung durch hashtags

Auch bei Facebook besitzen User nun die Möglichkeit, ihre publizierten Texte, Bilder und Videos mit dem Hashtag zu verschlagworten. Suchen Nutzer nach einem Begriff, der mit einem solchen Hashtag versehen wurde, oder klicken diese mit der Maus auf den Hashtag, so werden alle Veröffentlichungen angezeigt, die den gleichen Hashtag beinhalten. Berücksichtigt werden dabei alle öffentlichen Posts sowie Posts von Freunden, die mit dem Schlagwort gekennzeichnet wurden.

Durch die Hashtag-Funktion können Nutzer somit noch schneller an für sie relevante Informationen gelangen, ohne dabei auf Suchmaschinen angewiesen zu sein. Im Gegenzug bietet das Feature Unternehmen die Chance, (Produkt-) Informationen noch breitflächiger und somit auch schneller zu verbreiten, ohne dabei direkt von Likes- und Shares der Fans abhängig zu sein.

Anmerkungen:

  • Die Sicherheitseinstellungen bei der Verbreitung der Posts bleiben indes unberührt: Konkret bedeutet das, dass veröffentliche Inhalte, die nur für den Freundeskreis sichtbar sind, auch durch die Verwendung von Hashtags nicht von der Allgemeinheit gefunden werden können.
  • Aktuell steht die Hashtag-Funktion nur ausgewählten Nutzern und Entwicklern zur Verfügung, doch schon in den nächsten Wochen soll das neue Feature auch der breiten Masse zugänglich gemacht werden.

Über 31.000 hilfsbereite Fans…
Sie bieten Ihre Dienste an, vernetzen sich, koordinieren den Bedarf an Material und Verpflegung. Die einen streichen Butter auf Brötchen, andere fahren Sandsäcke und wieder andere besorgen Sonnenschutz für die Helfer.

Dass es neben Cybermobbing oder Shitstorm auch viele positive, ja sogar soziale Aspekte innerhalb sozialen Netzwerke gibt, mögen viele vielleicht gar nicht mehr für möglich halten. Doch das jüngste Beispiel, die Hochwasser-Katastrophe, zeigt in eindrucksvoller Art und Weise, dass Facebook, Twitter und Co. den Helfern bei Ihrem unermüdlichen Einsatz Unterstützung leisten können.

helfer_benoetigt

Was kann Facebook leisten?

In Ausnahme- und Notstandssituationen sind die Koordination und das Zusammenspiel aller Helfer das A und O. Insbesondere Facebook kann hier als Kommunikationsplattform zur  Koordination einiges beitragen. Hier einige konkrete und beeindruckende Beispiele aus der Seite Fluthilfe Dresden, zur Stunde 30.000 Fans:

Koordination des Helferbedarfs

helfer_benoetigt

Koordination der Verpflegung für Helfer

verpflegung

Koordination von Mitfahrgelegenheiten und Transport

lkw_transport

Regelung von Nachschub an Hilfsgütern, Geräten, Sandsäcken

sandsaecke_benoetigt

Koordination von Spenden

spenden

Worauf kommt es bei der Verwaltung der Fanpage an?

Nicht immer ist es einfach, in solch schwierigen und unüberschaubaren Situationen den Überblick zu behalten. Dies gilt auch für Facebook, insbesondere wenn neue Anfragen und Meldungen im Minutentakt veröffentlicht werden. Die Facebook Fanpage Fluthilfe Dresden zeigt eindrucksvoll, worauf es bei der Verwaltung einer solchen Site ankommt:

Einheitlicher Standard
Es sollte immer ein einheitlicher Standard für Anfragen verwendet werden. Wichtig ist es dabei, die Anfrage so kurz und übersichtlich wie möglich zu gestalten und dabei die notwendigen W- Fragen Was, Wo, Wie, Wer, Wann, zu klären. Wie in den Beispielen der Seite zu erkennen ist, ist es sinnvoll, für Anfragen und Meldungen Großbuchstaben zu verwenden, um diese eindeutig als solche zu kennzeichnen.

 

– Sichtbarkeitseinstellungen
Fans der Page sind mit den Rechten ausgestattet, um Inhalte zu veröffentlichen. Die wichtigsten dabei sind:

  • „Jeder kann Inhalte an XYZs Chronik posten“
  • „Jeder darf Fotos und Videos zu XYZs Chronik hinzufügen“
  • „Das Feld für „Aktuelle Beiträge anderer Nutzer“ über XYZ anzeigen“
  • Standardsichtbarkeit der Beiträge anderer Nutzer in XYZs Chronik: „Auf der Seite erlauben“

 

– Seite und Inhalte teilen – neue Fans erreichen
Fans werden darauf hingewiesen, die Seite und Meldungen zu teilen um so noch mehr gewillte Helfer zu erreichen. Auch Seiten von regionalen und überregionalen Medien werden mit einbezogen!

 

– Zeitnahe Informationsvermittlung
Alle offiziellen Evakuierungsmeldungen der Behörden, aktuelle Meldungen aus dem Krisengebiet,  neue Straßensperren, aktuelle Wasserstandsmeldungen der offiziellen Behörden und Wetterprognosen etc. werden zeitnah veröffentlicht.

Eines bleibt noch zu sagen: Respekt und Danke!

Auch wenn das Gröbste mancherorts noch immer nicht überstanden ist: Ich möchte an dieser Stelle meinen Respekt und Dank an die Tausenden von Helfern in den Hochwassergebieten und den Verantwortlichen der Fanpages aussprechen, die dafür sorgen, dass viele Städte und Gemeinden und damit verbunden auch unzählige Existenzen gerettet werden.

Da Google in seinen Richtlinien klar vorgibt, dass Karten nur in der vorgesehenen Form, also über Iframe oder API, einzubinden sind, ist es demnach nicht erlaubt, einen Screenshot einer Google Map auf einerWebseite im Netz zu veröffentlichen. Doch was tun, wenn ein statisches Bild die einzige Möglichkeit darstellt?

Die Lösung: das Google Static Maps API

Mit dem Google Static Maps API ist dies ohne größere Probleme möglich. Das Prinzip dabei ist denkbar einfach. Aus der statischen Adresse

https://maps.googleapis.com/maps/api/staticmap?

sowie einigen angehängten und mit einem „&“-Symbol verknüpften Parameter/ Wert- Paaren wird eine URL aufgebaut, bei deren Aufruf serverseitig eine Karte generiert und automatisch als PNG (Standard) zurückgegeben wird. Diese URL dient somit als Quelle (src) für das <img>- Tag. Damit der Kartenausschnitt auf der Seite angezeigt wird ist also weder Javascript noch ein Iframe erforderlich.

Zu beachten ist dabei lediglich, dass

– ab 25.000 Anfragen pro Tag ein API Key benötigt wird, um ein zusätzliches Kontingent erwerben und freischalten zu können.

– die Static Maps-URLs maximal 2048 Zeichen lang sein dürfen. Bei Karten mit vielen zusätzlichen Attributen und Markern kann dies unter Umständen nicht ausreichen.

Die wichtigsten Parameter

Zoom-Stufe (zoom)
Definiert die Zoom-Stufe der Karte. Erlaubt sind ganzzahlige Werte von 0 (Weltkarte) bis 21 (bei Satellite-Typ in Städten einzelne Häuser sichtbar).

Kartengröße (size)
Dieser Parameter ist zwingend erforderlich und legt die Dimensionen der angeforderten Karte fest. Breite und Höhe werden dabei mit „x“ voneinander getrennt.

Sensor – Wert (sensor)
Der Sensor-Wert ist ebenfalls zwingend erforderlich und gibt an, ob der aktuelle Standpunkt (falls möglich) übertragen werden soll (true) oder nicht (false).

Center-Position (center)
Der Parameter center legt den Mittelpunkt der Karte fest. Als Werte können sowohl durch Komma getrennte Angaben von Längen- und Breitengrad  also auch mit Komma voneinander getrennte Anschriften verwendet werden. (erforderlich)

Marker
Auch auf der Karte eingezeichnete Marker werden unterstützt. Dieses können optional durch den angehängten Parameter markers angegeben werden. Der Wert eines solchen Markers besteht dabei aus der Angabe des Markerstyles (z.B. color: blue), einem Label (z.B. label:A) und den mit Komma getrennten Koordinaten (z.B. 40.711614,-74.012318).

Alle diese Angaben sind untereinander das pipe-Symbol „|“ (%7C) voneinander getrennt.

Neben den genannten Parametern unterstützt das Google Static Map noch unzählige weitere Angaben, wie beispielsweise das von mir in dem Artikel Google Maps mit mehr Style beschriebene Kartenstyling, Kartentypen oder auch Anzeige von Routen oder Polygonen.

Alle Infos zu den einzelnen Parametern sowie einige Beispiele findet ihr im Entwicklerhandbuch des Google Static Maps API.

Beispiele

https://maps.googleapis.com/maps/api/staticmap?center=49.8935094,10.8849731&zoom=12&size=400×400&sensor=false

https://maps.googleapis.com/maps/api/staticmap?center=49.8935094,10.8849731&zoom=14&size=600×150&sensor=false

https://maps.googleapis.com/maps/api/staticmap?center=49.8935094,10.8849731&zoom=17&size=150×150&sensor=false

https://maps.googleapis.com/maps/api/staticmap?center=49.8935094,10.8849731&maptype=terrain&zoom=16&size=600×150&sensor=false

https://maps.googleapis.com/maps/api/staticmap?center=49.8935094,10.8849731&zoom=14&size=600×150&sensor=false&markers=color:orange|label:W|49.8935094,10.8849731

1. Abrechnung, Buchungen, Steuern

Ein leidiges Thema für Selbstständige: Buchungen, Abrechnung und Steuern. Aus eigener Erfahrung kann ich sagen, dass Disziplin und Motivation das A und O sind. Werden Rechnungen und Belege immer sofort verbucht hilft das, den Überblick zu behalten und gesetzte Fristen nicht ungeachtet verstreichen zu lassen.

Falls doch das ein oder andere liegengeblieben ist, bietet sich freier Zeitraum zwischen Aufträgen förmlich an, um Papierkram zu erledigen. Insbesondere die ersten Tage des Jahres, an denen es meist etwas ruhige ist, bieten sich an,  frühzeitig alle notwendigen Unterlagen für die Einkommensteuererklärung  zusammenzusammeln. So kann man sich in der Zeit, in der sich Aufträge endlos aneinanderreihen, voll und ganz auf die eigentliche Arbeit konzentrieren, ohne dabei zusätzlichen Verwaltungskram erledigen zu müssen.

2.  Muster-/ Vorlagenerstellung

Vorlagen und Muster können helfen, bestimmte Arbeitsabläufe effizienter zu gestalten und einiges an Zeit zu sparen. Die Standardisierung von Arbeitsschritten macht immer dann Sinn, wenn diese in identischer oder leicht veränderter Form immer wieder im Arbeitsalltag benötigt werden.

Muster und Vorlagen für Webdesigner oder Webentwickler könnten beispielsweise sein:

– Typo3- / WordPress- Mustersysteme
– Standardisierte HTML / CSS – Vorlagen
– Vorlagen im Schriftverkehr wie Fahrtkostenübersicht, Verträge, Gesprächsprotokolle, Muster für Vorbereitungsgespräche etc.
– Vorlagen im Emailverkehr

3. Kundenakquise und neue Aufträge

Gerade für Neueinsteiger kann die Akquise von neuen Aufträgen in mauen Zeiten zu einer echten Nervenprobe werden, schließlich muss der Betrieb finanziert und nicht zuletzt der eigene Lebensunterhalt gesichert werden.

Die Problematik hinter der Neukundengewinnung ist dabei so vielschichtig wie der Markt selbst. Konkurrenz, Preise, Leistungsspektrum, Auftreten nach außen, Marktpräsenz,  Erfahrung, Qualität, Know-How etc. sind nur einige ausschlaggebende Aspekte, die über die Gewinnung von Kunden entscheiden. Diese Aspekte gilt es aber auch bei guter Auftragslage stets zu hinterfragen.

Da der Berg allerdings nicht immer zum Propheten kommt, gilt es, statt vor dem Telefon zu warten, aktiv Maßnahmen zu treffen, die zu neuen Aufträgen führen können. Solche Schritte könnten beispielsweise sein:

– In Xing, Facebook und andere sozialen Netzen aktiv werden
– Privates Netzwerk ansprechen:  Freunde, Bekannte, Familie und alte Kontakte nutzen
– Vorstellung des eigenen Angebots in Internetforen, Communities,
– Bestandskunden Optimierungs- und Ergänzungsmöglichkeiten anbieten
– Aufragsportale nutzen: etwa 12designer.com, 99designs.de, myHammer (Problem: oftmals Arbeit zu Dumpingpreisen)
– Telefonmarketing und Klinkenputz: sinnvoll ist es, sich vorab eine Liste mit Kontakten von Firmen und Institutionen anzulegen, die eure Hilfe dringend benötigen könnten. Veraltete Websites und Logos etc. sind hierfür oft ein erstes Indiz
– Werbetrommel rühren: Werbeaktionen, Anzeigen, Plakate, Flyer etc.
– Kontakte knüpfen auf Messen, Vorträgen und Veranstaltungen

4. Eigene Ideen verwirklichen

Eine neue App oder ein neues Tool kommt auf den Markt. Nach dem Ausprobieren denkt man sich, die Idee war ja eigentlich so simpel und die Umsetzung hätte ich eigentlich auch fertig gebracht. So oder so ähnlich ist mir jedenfalls schon oft ergangen.

In der freien Zeit zwischen Aufträgen bietet es sich an, auch eigene Ideen zu entwickeln und eigene Konzepte umzusetzen.  Da man allerdings nie genau einschätzen kann, wie lange man sich mit einem eigenen Projekt beschäftigen kann, empfehle ich, alle Ideen und Arbeitsschritte sauber zu dokumentieren. Dies erleichtert es einem, auch zu einem späteren Zeitpunkt wieder schnell in das Projekt zu finden.

5. Suchmaschinenoptimierung /SEO

Das Thema Suchmaschinenoptimierung ist eng mit der Gewinnung von Neukunden verwurzelt. Denn nur wer von potentiellen Kunden in Google auch gefunden wird, hat eine realistische Chance, seinen Kundenstamm über das World Wide Web auch zu erweitern.

Suchmaschinenoptimierung ist allerdings keine einmalige Sache, sondern ehr ein immer weiterlaufender Prozess, der sich aus mehr oder weniger aufwendigen Aufgaben zusammensetzt. Gerade deshalb eignet sich Suchmaschinenoptimierung auch für Phasen mit wenig freier Zeit.

Typische Aufgaben hierbei sind:
– On-Page Optimierung: Setzen von Meta-Tags, URL-Forming, Verwendung von Keywords in Überschriften, W3C Validierung, Seitentitel optimieren etc.
– Aufbau von Backlinks
– Ladezeiten der Seiten verbessern
– Keywordspotting
– Keyword-Optimierung:  Optimierung von Seiten, Texten und Inhalten hinsichtlich bestimmter Suchanfragen
– Traffic-Analyse und Auswertung von Besuchszahlen
– Ad-Words

Tip:
Ihr habt eine revolutionäre Idee, ein Tool oder eine App entwickelt oder habt besondere Erfahrungen auf einem speziellen Gebiet gesammelt? Dann berichtet auf der eigenen Seite umfangreich darüber, mit Texten, Videos und Bildern, stellt es in Foren vor und teilt es in den sozialen Netzen. Insbesondere Nischenprodukte und Spezialanwendungen eigenen sich hervorragend, um Suchanfragen auf die eigene Seite zu leiten.

6. Pflege des eigenen Webauftritts

Ein Thema, das besonders in stressigen Zeiten oft stiefmütterlich behandelt wird, ist die redaktionelle Pflege des eigenen Webauftritts.
Die Webseite ist die digitale Visitenkarte, die Besucher vom eigenen Angebot und der Qualität überzeugen soll. Ist das Layout allerdings verstaubt oder der Inhalt der Seite veraltet, so kann die Webpräsenz im schlimmsten Fall auch abschreckend auf Interessenten wirken.

Insbesondere Referenzen, Angebote und Kontaktdaten sollten daher immer auf dem neusten Stand sein. Auch bietet es sich in der freien Zeit an, sich Gedanken über zusätzliche Funktionen, Angebote, thematische Ergänzungen und eine Weiterentwicklung des Screendesigns zu machen. Je nachdem wie viel Zeit einem zur Verfügung steht können einfache Änderungen dabei Schritt für Schritt abgearbeitet werden. Bei größeren „Umbauten“ empfehle ich, sich vorher den zeitlichen Ablauf und die Erreichbarkeit der Seite genauestens zu überlegen. Denn auch eine halbfertige Seite oder ein Baustellenschild sind ehr hinderlich als dass sie in irgendeiner Form Nutzen bringen: nämlich Informationen an den Besucher zu vermitteln.

7. Weiterbildung

„Wissen ist Macht“ – Für Selbstständige ist Wissen allerdings vielmehr die Grundvoraussetzung, um die Palette an angebotenen Dienstleistungen erweitern bzw. die Qualität des Angebots verbessern zu können.

Ob Tutorials, Videotrainings, Podcast oder Blogs, ob Photoshop, HTML5, Illustrator, Javascript oder 3D-Modellierung: Im Web ist es für Wissenshungrige aufgrund der Überflutung an Material und Themen heute nahezu eine echte Kunst, mit gezieltem Lernen beginnen zu können.

Aus meiner Sicht ist es jedenfalls kein effizientes Vorgehen, sich parallel mit 10 neuen Thematiken zu befassen und gleichzeitig auch noch mit dem Lernen von drei neuen Sprachen zu beginnen. Rom wurde schließlich nicht an einem Tag erbaut.

Ich empfehle daher vorher kurz zu überlegen, welchen Zeitaufwand das Thema benötigt, was man damit erreichen möchte, ob man überhaupt Lust und Interesse daran findet und ob die Thematik überhaupt eine Bereicherung für die Arbeit darstellt. Erst dann sollte man sich auf die Suche nach dem Lernmaterial machen. Viele schwören weiterhin auf das klassische Buch, andere wiederum auf Onlinetrainings von Galileo oder Video2Brain, wieder andere auf eine Kombination aus beidem.

Welches Medium sich am besten eignet muss also jeder für sich selbst herausfinden. Noch ein abschließender Tipp hierzu: Nehmt euch die Zeit, Tutorials und Übungen je nach Komplexität nach einiger Zeit zu wiederholen, denn frisch angeeignetes Wissen geht ohne regelmäßige Anwendung auch schnell wieder verloren.

8. Inspirationen sammeln

Inspiration ist für Grafiker und Designer ein Gut von unschätzbarem Wert und insbesondere in kreativen Berufsfeldern auch ein entscheidender Aspekt für die Qualität der eigenen Dienstleistungen. Denn nur durch Inspiration lassen sich auch neuartige, großartige Ideen entwickeln.

Als Grafiker/Designer sollte man deshalb stets Ausschau nach optisch ansprechenden Farbkombinationen, Print- und Weblayouts, Typografie,  Gestaltungselementen, Animationen, Effekten oder auch thematischen Aufhängern, Wortspielen und Werbeideen halten. Insbesondere im Web gibt es unzählige Showcase-Webseiten, die sich mit der Veröffentlichung und der Suche nach neuen Layout-Ideen befassen.

Da unser Gedächtnis nicht über unbegrenzten Speicher verfügt ist es wichtig, sich die Ideen nicht ausschließlich zu merken. Man sollte die Eingebungen idealerweise handschriftlich oder in digitaler Form nicht nur mit Hilfe von Skizzen /Screenshots und Bildern festhalten sondern sich hierzu auch einige schlagkräftige Notizen machen. Diese erleichtern es einem  auch nach längerer Zeit, sich die Idee ins Gedächtnis zurückzurufen und ggf. für andere Projekte zu verwenden.

9. Nichts-Tun und Regeneration

Was zunächst ein wenig paradox klingt, besitzt durchaus einen äußerst ernstzunehmenden Hintergrund. Um es ganz klar zu formulieren: es ist keine Schande, auch mal nichts zu tun.

Gerade für Selbstständige und Freelancer besteht meiner eigenen Erfahrung nach die erhöhte Gefahr, dass sich Job und Privatleben mit zunehmender Zeit immer schlechter voneinander trennen lassen. Der Prozess ist dabei oft schleichend: Es beginnt mit ein paar Stunden länger arbeiten, dann wird auch der Samstag  für dringende Arbeiten herangezogen und schließlich verbringt man auch Sonn- und Feiertage im Büro. Drehen sich dann die Gedanken während der Freizeit nur noch um Probleme und Termindruck, ist es höchste Zeit abzuschalten.

Sport, Sauna, abends in gemütlicher Runde ein Bier trinken, mit Freunden gemeinsam etwas unternehmen, ein Spaziergang, Musik, Kino, Theater ja sogar Computer- oder Brettspiele oder kochen: auch kleine Dinge können helfen, Abstand von der Arbeit zu gewinnen, den Körper zu regenerieren und auf andere Gedanken zu kommen. Verweigert man dem Körper diese Regeneration, so kann dies langfristig zu psychischen und körperlichen Krankheiten führen.

10.  Blog einrichten / neuen Blog Artikel verfassen

Ein Weblog ist nicht nur ein ausgezeichnetes Mittel um den Bekanntheitsgrad im Netz zu steigern. Auch ein verbessertes Suchmaschinenranking, der Aufbau von Kontakten und die Vermittlung von authentischen Informationen (Testberichte, Tutorials , Empfehlungen, Tips aus erster Hand etc.) zählen zu den Vorteilen dieses Kommunikationsmediums.

Zwar sind für die Einrichtung eines Blogs auch keine oder sehr wenig finanzielle Mittel notwendig, doch das regelmäßige Verfassen von neuen Beiträgen, Themenfindung und Weiterentwicklung können einiges an Zeit in Anspruch nehmen.

Weitere Informationen zum Thema Corporate Blogs findet ihr in meinem Artikel .

11. Social Networking

Neue Kontakte knüpfen, über vergangene Projekte und Aktionen berichten, Beiträge teilen und kommentieren, neue Videos oder Fotos hochladen etc.: in den sozialen Netzwerken wie Facebook, Twitter und Xing gibt es immer etwas zu tun. Da sich Netzwerktätigkeiten gut voneinander abgrenzen lassen und einen überschaubaren Zeitaufwand benötigen, kann man diese ohne Probleme auch als Lückenfüller im Tagesgeschäft einbauen.

12. Aufräumen und archivieren

Ordnung muss sein, und das sowohl in der realen als auch in der digitalen Welt. Mit der Zeit sammeln sich immer mehr Daten und Material für Projekte an. Nutzt die freie Zeit, um dieses zu strukturieren und zu archivieren. Ein übersichtliches Ablagesystem ermöglicht ein effektiveres Arbeiten und hilft euch, den Überblick zu behalten und somit viel Zeit bei der späteren Suche nach einzelnen Dateien zu sparen.

Einige Tipps für mehr Ordnung in der realen Welt:

– CDs und DVDs sollten immer beschriftet sein
– Alphabetisches Ablagesystem von Projekten, Anlegen von Projektordnern
– Nach der Arbeit Ordnung auf dem Schreibtisch schaffen
– Abheften von Skizzen und Scribbles

Einige Tipps für mehr Ordnung in der digitalen Welt:

– Aufräumen des Desktops: Verschieben von Dateien in Projektordnern
– Eindeutige Kennzeichnung von Dokumenten
– Löschen von doppelten und nicht mehr benötigten Dateien
– Organisieren des Bildmaterials: Verwendung von Bildverwaltungssoftware (iPhoto, Adobe Bridge etc.), Kennzeichnung der Bilder
– Anlegen eines separaten Ordnersystems für Designelemente wie beispielsweise Freebies, Icons, Schatten-Pngs, Pinsel, Schriftarten, Vektorgrafiken etc.
– Aufräumen des Download-Verzeichnisses

13. Konkurrenz Analysieren

Es kann nie Schaden, einen Blick auf die Konkurrenz zu werfen. Dabei soll es aber nicht nur darum gehen, sich einen Überblick über die Stärken und Schwächen zu verschaffen sondern auch kritisch hinterfragen, wie sich die Wettbewerber auf dem Markt positionieren, welche Zielgruppe die Unternehmen ansprechen und wo die Unterschiede im Leistungsangebot liegen. Besonders für Neueinsteiger kann letzterer Aspekt entscheidend sein, um eine Nische zu ermitteln und auf dem Markt Fuß zu fassen.

14. Ausgaben optimieren

Bei der Analyse der eigenen Geschäftsbilanz macht durchaus Sinn, nicht nur einen Blick auf die Einnahmen sondern auch auf die Ausgaben zu betrachten. Insbesondere hinter langfristigen Verträgen und regelmäßig wiederkehrenden Ausgaben wie:

– Mobilfunkverträge
– Webhostingverträge
– Telefontarife
– Versicherungen
– Kontogebühren

steckt oftmals erhebliches Optimierungspotential. Steht einem ein wenig Zeit zur Verfügung, so kann diese sinnvoll genutzt werden, um sich über neue Tarife zu informieren, diese mit bestehenden zu vergleichen und neue Angebote von konkurrierenden Anbietern einzuholen.

15.  Erweiterung / Verbesserung der Geschäftsausstattung

Zur Grundausstattung eines Geschäfts zählen klassischerweise Logo, Briefpapier und Visitenkarte. Je nach Bedarf bietet es sich an, das eigene Spektrum um Ausstattung um verschiedene Facetten, beispielsweise eine Imagebroschüre, ein Imagevideo oder ergänzendes Werbematerial zu erweitern.

Gerade gegenüber Kunden und Geschäftspartnern ist der erste Eindruck meist der wichtigste. Daher ist ein professioneller Auftritt von entscheidender Bedeutung.

Den Anstoss für die Neuauflage einer interaktiven Wetterkarte gab mir vor einiger Zeit ein User, der mich auf den kostenlose XML-Wetterdatenservice des Meteorologischen Instituts Norwegen auf der Seite yr.no  hinwies. Nach kurzer Recherche hörten sich für mich die Vorteile gegenüber  des wetter.com – Api recht überzeugend am: Es gibt weder ein Beschränkungs-Limit für Request-Anfragen noch benötigt man für die Anwendung einen zugehörigen Api-Key.
Am Beispiel einer Wetterkarte von Bayern möchte ich Euch im folgenden Artikel die XML-Schnittstelle sowie den Umgang mit den gelieferten Daten vorstellen.

1.  Funktionen, Aufbau und Struktur: Verwendung von Ajax / JQuery

Der Aufbau und das Zusammenspiel der einzelnen Dateien sind relativ schnell erklärt: In eine einfache HTML- Basisdatei (weathermap.html) sollen über einen assychronen Ajax-Aufruf die Wetterdaten/Symbole geladen und auf der Karte platziert werden. Dieses Daten werden dabei von einem PHP-Skript (forecast.php) bereitgestellt, das die XML-Files der jeweiligen Städte ausliest und an die HTML-Datei zurückgibt.

Dieser Aufbau hat den Vorteil, dass die komplette Seite bei einem Wechsel des Vorhersagezeitpunkts nicht neu geladen werden muss und die Karte sich somit relativ unproblematisch in bestehende Websites integrieren lässt. Über eine Navigationsleiste am Fuss der Karte kann das Wetter zum jeweiligen Vorhersagezeitpunkt angezeigt werden.

Da beim Betätigen der Vorhersage-Navigation der Ajax-Request ausgelöst, alte Daten von der Karte gelöscht, neue hinzugefügt und somit die HTML-Struktur manipuliert werden muss, benötigen wir ferner ein Javascript. Was läge bei dessen Erstellung, schon allein aus Gründen der Effizienz (manche würden es auch Bequemlichkeit nennen)  näher, als auf jQuery-Allmächtig zurückzugreifen?!

Um die Karte abzurunden und etwas subtiler zu gestalten, verwende ich im Beispiel unterschiedliche Kartentypen für Tag und Nacht. Zudem sind die Städte auf der Karte mit einem Mouseover-Effekt ausgestattet, so dass sich beim Darübergleiten mit der Maus ein Tooltip-Fenster mit näheren Wetterdaten öffnet. Auch soll das Datum und der Zeitraum des Vorhersagepunktes auf der Map ausgegeben werden.

2. Vorbereitung / Material

-Kartenmaterial: Kommerziell kostenlos nutzbares und optisch ansprechendes Kartenmaterial ist im Web leider immer noch schwer zu finden. Falls euch kein Kartenmaterial vorliegt und ihr die Wetterkarte selbst erstellen und dem Layout Eurer Seite anpassen möchtet, sucht in der Google Bilder-Suche zunächst nach einer möglichst einfarbigen Karte der dazustellenden Region. Öffnet die Karte in einem Bildbearbeitungsprogramm und erzeugt einen Pfad oder eine Auswahl um die Region und füllt diese mit entsprechender Vordergrundfarbe.

Im Beispiel verwende ich:

Wetterkarten

– Icons: Im Beispiel verwende ich ausschließlich die Wettericons von yr.no. Einen Überblick über alle Wettersymbole findet Ihr auf dieser Seite.
– Wer nachschlagen und vergleichen möchte, hier der Link zum alten ArtikelErstellen einer Wetterkarte mit Hilfe des Wetter.com-Api .

3. Erstellen der HTML-Basisdatei

Beginnen wir also mit der Erstellung der Erstellung der HTML Basisdatei, die uns als Container dient. In dieser werden die Wetterkarte, die Links zu den einzelnen Vorhersagetagen sowie die über AJAX geladenen Wetterdaten der einzelnen Städte zum jeweiligen Vorhersagezeitpunkt dargestellt. Zu Beginn binden wir im header wie gewohnt die CSS-Datei (styles.css) sowie eine aktuelle Version des jQuery Skripts ein.

HTML Datei:

<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Für die Darstellung der Karte benötigen wir einen Div-Container (weathermap), der abhängig von der id den jeweiligen Kartentyp als Hintergrund besitzt.
In diesem befindet sich ein weiterer Div-Container (weatherdata), in den später alle Wetterdaten für die Städte geladen werden. Im Anschluss an die Wetterkarte folgt ein Div-Block (forecast_links) für die Navigation. Dieser wird mit den Links zu den einzelnen Vorhersagepunkten gefüllt.

        <div class="weathermap" id="">
		<div class="weatherdata">
			<div class="ajaxloader"></div>
		</div>
	</div>
	<div class="forecast_links"></div>

4. CSS

Die wichtigste Angabe im Stylesheet ist die Definition des Containers weathermap. Er wird im Beispiel relativ positioniert, da sich die Städteboxen später absolut an diesem orientieren sollen.
Für jede Stadt habe ich eine eigene CSS Klasse angelegt, die u.a. deren absolute Position und Breite definiert. Die Klassennamen sind bewusst gewählt und sollten eine fortlaufende Zahl enthalten. Der Grund hierfür wird später ersichtlich. Die Nummerierung muss allerdings zwingend der Reihenfolge der Städte im Array entsprechen. Da die Boxen auf einer Ebene über der Wetterkarte angezeigt werden sollen, erhalten diese zusätzlich den z-index 2.
Mit Hilfe der ids mapType_0 und mapType_1 werden die beiden Kartentypen festgelegt (Tag/Nacht).

.weathermap{
 position:relative;
 width:549px;
 height:556px;
 background-repeat:no-repeat;
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:14px;
}
#mapType_0{
    background-image:url(../img/weathermap_night.png);
}

#mapType_1{
    background-image:url(../img/weathermap.png);
}
.city_0{ /*Regensburg*/
	width:100px;
	position:absolute;
	top:190px;
	left:290px;
	z-index:2;
	text-align:center;
	}

.city_1{ /*München*/
	width:100px;
	position:absolute;
	top:345px;
	left:223px;
	z-index:2;
	text-align:center;
	}

.city_2{ /*Passau*/
	width:100px;
	position:absolute;
	top:290px;
	left:410px;
	z-index:2;
	text-align:center;
	}

.city_3{ /*Würzburg*/
	width:100px;
	position:absolute;
	top:70px;
	left:75px;
	z-index:2;
	text-align:center;
	}

.city_4{ /*Bamberg*/
	width:100px;
	position:absolute;
	top:90px;
	left:167px;
	z-index:2;
	text-align:center;
	}

.city_5{ /*Bayreuth*/
	width:100px;
	position:absolute;
	top:65px;
	left:265px;
	z-index:2;
	text-align:center;
	}

5. Javascript/JQuery

Wir definieren zunächst eine Javscript Funktion loadForecast(), bei deren Aufruf das Laden der neuen Wetterdaten initiiert wird. Als Parameter werden dieser zum einen der Vorhersagezeitpunkt als Integerwert (0., 1., 2., 3…) sowie der Kartentyp übergeben.

<script type="text/javascript">
 function loadForecast (point_of_forecast,mapType) {

    var forecastHTML; 

     $.post(

            "forecast.php", //Ajax file

            { point_of_forecast: point_of_forecast },  // create an object with all values

            //function that is called when server returns a value.
            function(data){
                forecastHTML = data.mapData;
                forecastLinksHTML = data.forecastLinks;
                initMapType =data.initMapType;

                  $('.jQuery-tooltip').remove();
                  $('.weatherdata').empty();
                  $('.weatherdata').html(forecastHTML);
                  jQuery_tooltip(".weathersymbol","jQuery-tooltip");

                  if(mapType!=2){
                  $('.weathermap').attr("id", 'mapType_'+mapType);
                  }
                  else{

                  $('.weathermap').attr("id", 'mapType_'+initMapType);

                   }

                  $('.forecast_links').empty();
                  $('.forecast_links').html(forecastLinksHTML);

            }, 

            //How you want the data formated when it is returned from the server.
            "json"
            );
     }     

</script>

Den Kern bildet ein Ajax-Request. Dabei wird die Datei forecast.php aufgerufen und dieser mittles POST-Methode der gewünschte Vorhersagepunkt übermittelt. War die Verarbeitung und die Bereitstellung der Daten durch das PHP-Skript erfolgreich, so werden die fertigen HTML-Bausteine für die Navigation und die Städteboxen zurückgeliefert und in den Variablen forecastHTML bzw. forecastLinksHTML zwischengespeichert. Anschließend beginnt die Manipulation der HTML-Struktur: Hierbei wird das div-Element mit der Klasse weatherdata zunächst geleert und die neu empfangenen Städteboxen hinzugefügt. Gleiches passiert im weiteren Verlauf auch mit der Navigation.

Zum Schluss verbinden wir noch die JS-Funktion und das HTML, indem wir sie beim ersten Laden der Seite die Function loadForecast (0,2); aufrufen. Solltet ihr euch fragen, warum als Kartenparameter „2“ definiert wurde: Die Antwort liegt darin begründet, dass, anders als beim Klick eines Links, beim ersten Aufruf des Skripts zunächst nicht bekannt ist, welcher Typ für den aktuellen Vorhersagezeitpunkt verwendet werden soll. Wurde die Wetterkarte also das erste mal aufgerufen, so wird an das PHP – Skript der Initial-Status „2“ übergeben.

<script type="text/javascript">
	function jQuery_tooltip(target_items, name){
	 jQuery(target_items).each(function(i){
			jQuery("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+jQuery(this).attr('title')+"</p></div>");
			var jQuery_tooltip = jQuery("#"+name+i);

			if(jQuery(this).attr("title") != ""){ 

			jQuery(this).removeAttr("title").mouseover(function(){
					jQuery_tooltip.fadeIn(150);
			}).mouseout(function(){
					jQuery_tooltip.fadeOut(150);
			}).mousemove(function(tooltip){
					jQuery_tooltip.css({left:tooltip.pageX+15, top:tooltip.pageY+10});	
			});

			}
		});
	}

</script>

Da wir die detaillierten Wetterangaben auf der Karte mit Hilfe eines Tooltips beim Überfahren mit der Maus anzeigen möchten, habe ich bereits vorher ein fertiges Tooltip-Skript hinzugefügt, welches durch den Aufruf  jQuery_tooltip(„.weathersymbol“,“jQuery-tooltip“);  innerhalb der Methode loadForecast() initialisiert wird. Hierbei wird für alle Elemente mit der Klasse .weathersymbol ein kleine, zunächst ausgeblendet Box erstellt, deren Inhalt sich durch das title-Attribut ergibt. Damit es zu keinen Überscheidungen kommt, löschen wir auch hier bei jedem Aufruf der Funktion loadForecast() die zuvor erstellten Tooltips.

6. PHP / XML

Kommen wir nun zum letzten und zugleich kompliziertesten Teil, der unsere Wetterkarte mit Informationen füllt: dem über Ajax aufgerufenen PHP-Skript forecast.php.

Zunächst fragen wir den mittles POST übergeben Zeitpunkt ab, wandeln diesen in einen Integerwert um und legen ihn in der Variable $point_of_forecast ab. Dieser dient im weiteren Verlauf zugleich als unser Index. Anschließend definieren wir 3 Arrays:

– $cityname: Array mit den Städtenamen (die Reihenfolge richtet sich nach der Nummerierung im Klassennamen der Städte im CSS-File)
– $periods: Wie im weiteren Verlauf in der XML-Datei zu sehen sein wird,  gibt es 4 verschiedene Vorhersagepunkte (0,1,2,3) an einem Tag. Damit wir später eine Relation zwischen Vorhersagepunkt und dem dazugehörenden Namen erzielen, definieren wir ein Array, dessen Index der Reihenfolge der Vorhersagezeitpunkte und deren Werte den jeweiligen Namen der Zeitpunkte entsprechen.
– $mapTypes: Ähnlich wie zuvor machen wir uns den Index des arrays zu Nutze, um eine Beziehung zwischen Zeitpunkt der Wettervorhersage und Kartentyp zu erreichen.

if (isset($_POST['point_of_forecast'])){
    $point_of_forecast = (int)$_POST['point_of_forecast'];   
}else{
    $point_of_forecast = 0;
}

//array of cities, shown on map
$cityname=array();
$cityname[0]="Regensburg";
$cityname[1]="München";
$cityname[2]="Passau";
$cityname[3]="Würzburg";
$cityname[4]="Bamberg";
$cityname[5]="Bayreuth";

/*if cities from different countries should be shown on map, you need to set the realted countries/states 
example: 

$countries[0]="Germany";
$countries[1]="Italy";
...
$countries[0]="Bavaria";
$countries[1]="Umbria";
*/

$countries = array();
$states = array();

//translations of periods
$periods=array();
$periods[0] ="night";
$periods[1] ="morning";
$periods[2] ="afternoon";
$periods[3] ="evening";

//relation array: period<->mapType
$mapTypes =array();
$mapTypes[0] ="0";
$mapTypes[1] ="1";
$mapTypes[2] ="1";
$mapTypes[3] ="0";

/*amount of points of forecast*/
$forecastLimit=10;
$returnValuesMap="";
$returnLinks="";
$initMapType;
$length=count($cityname);
$reference_period;

Mit Hilfe der Variable $forecastLimit wird die Anzahl der Vorhersagepunkte festgelegt. Ergänzend sei an dieser Stelle erwähnt, dass man für eine größere Anzahl an Vorhersagepunkten in der HTML-Datei idealerweise auf einen content-slider oder eine drop-down box zurückgreifen sollte.

Das zentrale Element unserer php-Datei bildet nun eine for-Schleife, in der die Rückgabewerte des Ajax Aufrufs erzeugt werden. Der Programmablauf stellt sich innerhalb wie folgt dar:

– Erzeugen des XML-Requests
– Erstellen des Navigationsmenüs im ersten Schleifendurchgang
– Auslesen und Zusammensetzen der Wetterdaten

6.1  XML-Request und XML-Struktur

Zunächst muss für den jeweiligen Ort die entsprechende URL erzeugt werden, unter der die Wetterdaten im XML-Format erreichbar sind. Die URL einer gültigen Suchanfrage setzt sich nach dem Schema
https://www.yr.no/place/[Name des Landes]/[Name des Bundeslandes]/[Name der Stadt]/forecast.xml

zusammen.

Entsprechend dieser Vorgabe wird der URL-String $sSearchUrl schrittweise komplettiert. Welche Teile dabei dynamisch generiert werden müssen, hängt in erster Linie davon ab, ob sich die Orte in unterschiedlichen Ländern/Bundesländern befinden. In unserem Beispiel befinden sich alle Städte in Bayern, so dass im URL-String lediglich der Name der Stadt dynamisch ergänzt werden muss.
Um die URL zu überprüfen, kann diese in die Adresszeile des Browsers eingefügt werden. Besitzt die URL eine gültige Form, sollte die Vorhersage in einer XML-Struktur angezeigt werden. Anschließend werden mit einem verschachtelten Funktionsaufruf die Wetterdaten im XML-Format von unserem PHP-Skript angefordert.

$api = simplexml_load_string(file_get_contents($sSearchUrl));

Hinweis: Um die Funktion file_get_contents() für das Einlesen einer externen URL-Aufruf nutzen zu können, ist in den PHP-Einstellung des Webservers (PHP.ini) die Erlaubnis hierzu zwingend erforderlich (allow_url_fopen=“on„).

In der Variable $api steht uns ab diesem Zeitpunkt die kompletten Vorhersagedaten der Stadt in XML-Form zur Verfügung:

 
<weatherdata>
  <location>
    <name>Bamberg</name>
    <type>City</type>
    <country>Germany</country>
    <timezone id="Europe/Berlin" utcoffsetMinutes="60"/>
    <location altitude="264" latitude="49.87948" longitude="10.88634" geobase="geonames" geobaseid="2952984"/>
  </location>
  <credit>...</credit>
  <links>
    <link id="xmlSource" url="https://www.yr.no/place/Germany/Other/Bamberg/forecast.xml"/>
    <link id="xmlSourceHourByHour" url="https://www.yr.no/place/Germany/Other/Bamberg/forecast_hour_by_hour.xml"/>
    <link id="overview" url="https://www.yr.no/place/Germany/Other/Bamberg/"/>
    <link id="hourByHour" url="https://www.yr.no/place/Germany/Other/Bamberg/hour_by_hour"/>
    <link id="longTermForecast" url="https://www.yr.no/place/Germany/Other/Bamberg/long"/>
  </links>
  <meta>
    <lastupdate>2012-11-16T06:49:58</lastupdate>
    <nextupdate>2012-11-16T09:30:00</nextupdate>
  </meta>
  <sun rise="2012-11-16T07:30:54" set="2012-11-16T16:31:11"/>
  <forecast>
    <tabular>
      <time from="2012-11-16T10:00:00" to="2012-11-16T12:00:00" period="1">
        <!--
        Valid from 2012-11-16T10:00:00 to 2012-11-16T12:00:00
        -->
        <symbol number="4" name="Cloudy" var="04"/>
        <precipitation value="0"/>
        <!-- Valid at 2012-11-16T10:00:00 -->
        <windDirection deg="164.0" code="SSE" name="South-southeast"/>
        <windSpeed mps="2.1" name="Light breeze"/>
        <temperature unit="celsius" value="2"/>
        <pressure unit="hPa" value="1022.2"/>
      </time>
      <time from="2012-11-16T12:00:00" to="2012-11-16T18:00:00" period="2">
        <!--
        Valid from 2012-11-16T12:00:00 to 2012-11-16T18:00:00
        -->
        <symbol number="3" name="Partly cloudy" var="03d"/>
        <precipitation value="0"/>
        <!-- Valid at 2012-11-16T12:00:00 -->
        <windDirection deg="176.1" code="S" name="South"/>
        <windSpeed mps="2.5" name="Light breeze"/>
        <temperature unit="celsius" value="5"/>
        <pressure unit="hPa" value="1021.3"/>
      </time>
      ...
      ...
      ...

Der Aufbau der XML-Datei ist im Hinblick auf unser Vorhaben jedoch ein wenig problematisch: Die Vorhersagepunkte <time> sind nicht in einzelne Tage gegliedert sondern folgen in der XML-Datei fortlaufend aufeinander. Für die Navigationsleiste bedeutet das, dass wir für die Unterteilung in einzelne Tage ein kleines bisschen zusätzliche Logik benötigen, um so die Beziehung zwischen Tag und Vorhersagezeitpunkt herstellen zu können.

Jeder <time>-Knoten besitzt dabei ein Attribut period, dessen Wert die Tageszeit der Vorhersage angibt (0=Nachts, 1=Morgen, 2= Nachmittag, 3=Abend) sowie einige Kindelemente (<symbol>,<windDirection> etc.), die die eigentlichen Wetterdaten beinhalten.

6.2 Erzeugen der Navigationsleiste

Der erste Durchgang der Schleife (if($i==0)) dient uns dazu, die Navigationsleiste zusammenzufügen und in der Variable $returnLinks als String schrittweise abzulegen. In einer weiteren for-Schleife durchlaufen wir deshalb Schritt für Schritt die einzelnen verfügbaren Vorhersagepunkte (time[$j]), ermitteln das zugehörige Datum mit Hilfe der SimpleXML Notation und wandeln dies in die Form „Wochentag, Tag.Monat.Jahr“ um.

$forecast_date= (string)$api->forecast->tabular->time[$j]->attributes()->from;
$tstmp=strtotime($forecast_date);
$dateOfForcast = date("D, d.m.y",$tstmp);

Da wir die Datumsangabe für jeden Tag nur einmalig ausgeben möchten, brauchen wir ein Referenzdatum das uns Aufschluss darüber gibt, ob es sich beim Vorhersagezeitpunkt um den ersten „point of forecast“ am neuen Tag handelt. Sind die Datumsangaben unterschiedlich, so wird das neue Datum ausgegeben und ein Trenner (devider) zwischen beide Tage eingefügt (nicht beim aller ersten Vorhersagezeitpunkt).

if($dateOfForcast==$referenceDate){
  $dateOfForcast ="";	
  $devider="";
}
	// if referenceDate != date of current point of forecast => change of days, devider and output of date are shown
else{
  $referenceDate=$dateOfForcast;
  //no devider infront of first point of forecast
  if ($j==0){
	$devider="";	
  }
  else{
  $devider="<div class=\"devider\"></div>";
  }
}

Nachdem wir die Tageszeit (period) ermittelt haben ($period=(int)$forecasts->time[$j]->attributes()->period;) setzen wir den Link zusammen und fügen diesen an den Rückgabe-String an.

$returnLink=$devider."
<div class=\"forecast_link\"> 
            <div class=\"forecast_date\"> ".$dateOfForcast."</div>
             <div class=\"forecast_point\"><a href=\"javascript:loadForecast(".$j.",".$mapTypes[$period].")\">".$periods[$period]."</a></div> 
</div>";
 $returnLinks.=$returnLink;  

if($j==0){
      /*problematic xml structure of yr.no: the forecast of some cities start with different periods. This happens only from time to time, while yr.no is updating weather data. 
    Solution: First period of first city in array is taken as reference point. */
    $reference_period =$period;
    $initMapType=$mapTypes[$period];
 }

Wie bereits in der Beschreibung des Javscript Parts geschildert, muss der JS Funktion loadForecast() die fortlaufende Nummer für den Vorhersagezeitpunkt sowie der zugehörende Kartentyp als Parameter übergeben werden. Eigentlich wäre es das auch schon gewesen, würde der Teufel nicht im Detail stecken. Denn zwei Dinge sind noch zu erledigen:

– Da beim ersten Aufruf der Seite der Karten-Typ noch nicht bekannt ist, wird dieser in einem separaten Rückgabe-String gespeichert und an das Javscript übermittelt.
– Update Problematik von yr.no : Speichern der ersten folgenden period der ersten Stadt im array (s. nächster Punkt)

6.3 Update Problematik von yr.no

Bevor ich auf das Auslesen der Wetterdaten zu sprechen komme, möchte ich an dieser Stelle auf ein weitreichendes Problem im Umgang mit den yr.no- Wetterdaten eingehen.

Die Aktualisierung der Wetterdaten seitens yr.no für die einzelnen Standorte erfolgt nicht synchron, so dass die Vorhersagezeitpunkte sich unterscheiden können.

Folgende Konstellation der vorhanden Zeitpunkte für zwei Orte wäre während eines Update-Vorgangs denkbar:

Referenzort: 2,3,0,1,2…
Aktueller Ort: 3,0,1,2,3…

Da die Daten im aktuell betrachteten Ort bereits aktualisiert wurden, fehlen die Werte für den Nachmittag. Um dies zu umgehen, wird die erste auftretende Periode der ersten Stadt im Array wird als Refernzwert verwendet, um mögliche Abweichungen aufzudecken.

$upcoming_period = (int)$api->forecast->tabular->time[0]->attributes()->period;

		//example: the first point of forecast for Passau is afternoon, while the forecast of reference city Regensburg still starts with morning 

		if($upcoming_period!=$reference_period)
		{
			// because there are no datas for the first point of forecasts, only the name of passau is shown of the map
			if($point_of_forecast == 0){

				$returnValuesMap=$returnValuesMap."<div class=\"city_".$i."\"> 
				<div class=\"cityname\">".$cityname[$i]."</div>
				</div>";
				//setting the point of forecast to -1 (no data available), only for this city
				$point_of_forecast=-1;
			 }

			else{
				// for the 2nd, 3rd, 4th ... point of forecast, the last point of forecast is taken and $point_of_forecast decreased, only for this city
				$point_of_forecast--;
			}		
		}

Stimmen die Vorhersagezeitpunkte nicht überein, so werden diese, falls der erste „point of forecast“ angefordert wurde, auf der Karte nicht ausgegeben, da dieser nicht mehr vorhanden ist. Falls es sich um den 2., 3., 4. etc. Zeitpunkt handelt, so wird der index temporär um 1 reduziert und der vorherige Vorhersagepunkt verwendet. Der Index muss nach dem Auslesen der Daten am Ende dann natürlich wieder auf den Ursprung zurückgesetzt werden.

Alternative/Hinweis:
Eine alternative Lösung dieser Problematik könnte auch darin bestehen, die XML Files der Orte Cronjob-gesteuert zu einem Zeitpunkt aufzurufen (z.B. am Abend), bei dem alle Vorhersagen mit dem identischen Vorhersagepunkt beginnen, diese auf dem Webserver zu speichern und als Vorhersagebasis zu nutzen. Das hätte zum einen den Vorteil, dass man auf das beschriebene Prozedere verzichten kann und zum anderen, dass man die in 6.1 angesprochene Beziehung zwischen Tag und Vorhersagezeitpunkt einfacher herstellen kann.

Nun hat allerdings nicht jeder Zugriff auf Servereinstellungen und/oder Cronjobs. Um euch eine allgemeine Lösung vorzustellen, habe ich auf die Cronjob Variante verzichtet. Steht die Möglichkeit einen Cronjob einzurichten zur Verfügung, würde ich eindeutig zu dieser „sauberen“ Alternative tendieren.

6.4 Auslesen der Wetterdaten

Nachdem der Index $point_of_forecast im vorherigen Schritt überprüft und ggf. angepasst wurde, ist nun alles für das Auslesen der Daten vorbereitet. Wir ermitteln zunächst das Wetter, das Symbol und die Temeperatur, die in einem String eingesetzt und schließlich an dem bisherigen $returnValuesMap angehängt werden. Alle weiteren Wetterdaten (Windstärke, Windrichtung, Luftdruck) fügen wir ebenfalls zu einem String zusammen, welchen wir im title-Attribut des Bildes / der Links ausgeben.

if ($point_of_forecast!=-1){

		$weather_symbol=(string)$api->forecast->tabular->time[$point_of_forecast]->symbol[0]->attributes()->var;
		$temperature= (string)$api->forecast->tabular->time[$point_of_forecast]->temperature[0]->attributes()->value;	
		$weather_text="Temperature: ".$temperature."°C<br>";		

		$wind_direction=(string)$api->forecast->tabular->time[$point_of_forecast]->windDirection[0]->attributes()->code;
		$windSpeed =(float)$api->forecast->tabular->time[$point_of_forecast]->windSpeed[0]->attributes()->mps;
		$windSpeed = $windSpeed *3.6;

		$wind= "Wind: ".$windSpeed."km/h (".$wind_direction.") <br>";
		$weather_text.=$wind;

		$pressure = "Pressure: ".(string)$api->forecast->tabular->time[$point_of_forecast]->pressure[0]->attributes()->value. "hPa";
		$weather_text.=$pressure;

		$returnValuesMap=$returnValuesMap."<div class=\"city_".$i."\"> <div><img title='".$weather_text."' src='https://symbol.yr.no/grafikk/sym/b100/".$weather_symbol.".png' class='weathersymbol'/></div>
		<div class=\"cityname\"><a href=\"\" class=\"weathersymbol\" title='".$weather_text."' >".$cityname[$i]."</a></div><div class=\"temperature\"><div class=\"temp\">".$temperature." °C</div></div>

		</div>";

		// adding forecast date to map
		if($i==0){

			$curr_period = (int) $api->forecast->tabular->time[$point_of_forecast]->attributes()->period;

			$curr_forecast_date= (string)$api->forecast->tabular->time[$point_of_forecast]->attributes()->from;
			$curr_tstmp=strtotime($curr_forecast_date);
			$curr_dateOfForcast = date("D, d.m.y",$curr_tstmp);

			$returnValuesMap=$returnValuesMap."<div class='current_forecastdate'><span id='dayspan'>".$curr_dateOfForcast."</span><br> <span id='periodspan'>".$periods[$curr_period]."</span></div>";

		}
		//setting the point of forecast back to former value	

	$point_of_forecast = (int)$_POST['point_of_forecast'];
 }

else{	
		//setting the point of forceast back to former value	
		$point_of_forecast = (int)$_POST['point_of_forecast'];	
}

Last but not least möchten wir Datum und Zeitpunkt der Vorhersage auf der Karte ausgeben. Die Zeitangabe lesen wir beim ersten Durchgang aus der XML-Struktur, bringen diese ins gewünschte Format und hängen die erzeugte Zeichenkette ebenfalls an den Rückgabe-String. Wie bereits erwähnt korregieren wir abschließend noch den manipulierten Index, indem wir ihm wieder den ursprünglich übermittelten Wert zuweisen.

Das war’s. Das fertige Ergebnis könnt Ihr Euch nun hier ansehen und alle Meterialien und Skripte herunterladen:

Fazit:

Im Gegensatz zu wetter.com bietet yr.no derzeit eine unbeschränkte Zahl an Zugriffen. Auch Registrierung und API-Key sind nicht erforderlich. Für die Verwendung in einer Wetterkarte stellen die unterschiedlichen Aktualisierungszeitpunkte sowie die vom Anbieter etwas unglücklich gewählte XML-Struktur jedoch ein gewisses Hinternis dar. Benötigt man lediglich die Wetterdaten eines einzelnen Ortes, beispielsweise für Vorhersagediagramme und Prognosen etc., so kann die yr.no XML-Schnittstelle durchaus eine unkomplizierte und lohnende Alternative zu wetter.com sein.

Um es vorweg zu nehmen: Ob ein Unternehmen bloggen soll oder nicht, lässt sich nicht pauschalisieren und auch nicht in zwei kurzen Absätzen zusammenfassen. Es hängt vielmehr von zahlreichen, individuellen, Faktoren ab. Auf diese möchte ich im Laufe des Beitrags näher eingehen und aufzeigen, welche Aspekte bei einer Entscheidungsfindung berücksichtigt werden sollten.

Zielsetzung und Kommunikation

Im Gegensatz zu Landing- oder Sale Pages zielen Weblogs nicht direkt darauf ab, Neukunden/Subscriber zu gewinnen und/oder einen Verkauf zu verbuchen. Ein Corporate Blog stellt ein kostengünstiges Instrument der Unternehmenskommunikation dar, mit dessen Hilfe sich die:

– Kommunikation mit Interessenten
– Kommunikation mit Bestandskunden
– Kommunikation mit Mitarbeitern
– Kommunikation mit Informationssuchenden
– Kommunikation über die direkte Konkurrenz

verbessern lässt.

Im Allgemein unterscheidet man bei Corporate Blogs zwei grundlegende Arten: Interne und externe Blogs. Während bei internen Blogs den Mitarbeitern die Möglichkeit gegeben wird, sich untereinander auszutauschen und Informationen firmenintern weiterzugeben, stehen bei externen Weblogs die Kunden und Interessenten in der Regel im Vordergrund. Aus meiner Sicht ist es deshalb wichtig, sich schon vorab Gedanken über eine mögliche Ausrichtung eines solchen Blogs Gedanken zu machen. Hierzu zählt u.a. zu hinterfragen:

– An wen richtet sich der Blog? Soll der Blog als internes Medium für Mitarbeiter oder als externes Medium für Kunden und Interessenten angeboten werden?
– Kann der Blog helfen, die im Unternehmensumfeld festgelegten Kommunikationsziele zu erreichen ? (z.B. Vertrauensbildung, Identifikation der mit einem Produkt etc.)
– Lässt sich eine Zielgruppe des Unternehmens mit Blogeinträgen ansprechen?
– Wenn ja, mit welcher Art von Beiträgen kann diese angesprochen werden?

Erst wenn diese Fragen umfassend geklärt sind, macht es Sinn, sich näher mit dem Betreiben eines Blogs zu beschäftigen.

Vorteile und Nutzen

Welchen Nutzen kann man als Unternehmen also aus einem Corporate Blog ziehen? Auf die Hauptargumente, die für die Einrichtung eines Weblogs sprechen, möchte ich im Folgenden näher eingehen:

Interesse wecken – der Faktor Mensch

Ob Freizeitblog, Reiseblog, Corporate Blog, Videoblog oder Podcasts, die grundlegende Intention hinter externen Blogs ist nahezu immer die Gleiche: Das Interesse und die Aufmerksamkeit des Lesers (Zuhörers oder auch Zuschauers) soll durch den Inhalt geweckt werden. Erst wenn dieses entscheidende Kriterium erfüllt ist, werden sich auch andere Teilziele, teilweise ohne Zutun, erfüllen lassen. Wecken die Artikel das Interesse der Leser, so werden diese früher oder später von selbst RSS Feeds abonnieren, Artikel kommentieren oder gar persönlich mit dem Anbieter in Kontakt treten.

Dies wiederum ist die Basis dafür, dass so etwas wie eine langfristige Bindung entstehen kann. Aus psychologischer Sicht lässt sich mit Weblogs aber noch einiges mehr erreichen:
Zum einen kann dem Leser die Kompetenz und Qualität des Unternehmens auf einem gewissen Fachgebiet demonstriert werden. Zum anderen können insbesondere authentisch geschriebene Beiträge und Alltagsthemen auch zur Sympathiegewinnung beitragen.

Denn mit der Zeit und einigen gelesenen Artikeln entwickeln die Leser ein recht gutes Gespür für den Autor hinter dem Blog und fangen an, sich ein Bild von dieser Person zu machen. Je offener also kommuniziert wird, desto vertrauter wird man als Autor dem Leser und demonstriert diesem gleichzeitig, dass sich dahinter vielmehr ein Mensch als ein von einer PR Agentur instruierter Mitarbeiter verbirgt. Durch diese Kommunikation auf Augenhöhen können bei (potentiellen)Kunden Barrieren und Hemmungen gegenüber dem Unternehmen abgebaut und gleichzeitig eine gewisse Transparenz geschaffen werden. Welcher Leser bekommt etwa nicht gerne exklusive Einblicke hinter die Kulissen?!

Service-Gedanke und Mehrwert

Ein externer Weblog ist eine hervorragende Möglichkeit, um das Onlineangebot einer Webseite serviceorientiert zu erweitern. So könnte es sich beispielsweise für den Blog einer Metzgerei als durchaus sinnvoll erweisen, Rezepte mit bestimmten Produkten der Angebotspalette zu veröffentlichen. Auch könnte in diesem Beispiel der Weblog als Plattform zum Meinungsaustausch genutzt werden: Leser können das Rezept und die Produkte bewerten, Verbesserungsvorschläge unterbreiten oder eigene Kreationsvorschläge mit einbringen. All das stellt für Kunden und Leser nicht nur einen Mehrwert dar, sondern kann bei diesen im Idealfall auch das Interesse an bestimmten Produkten oder Neuheiten wecken.

Der Service-Gedanke wird auf  Unternehmenswebseiten durch eine Flut von Unternehmensinformationen allerdings oftmals viel zu sehr in den Hintergrund gedrängt und spielt, wenn überhaupt, eine ehr untergeordnete Rolle. Dabei ist aber gerade doch Service ein bewährtes Mittel, um sich von der unmittelbaren Konkurrenz abzuheben.

SEO

Qualitativ hochwertige Beiträge von externen Corporate Blogs erwecken nicht nur die Aufmerksamkeit des Lesers, sondern dieser gerät mit der wachsenden Anzahl von Artikeln auch verstärkt in den Fokus von Suchmaschinen. Dies liegt ganz einfach gesprochen daran, dass die Seite etwas zu bieten hat: nämlich authentische, im Web einzigartige Inhalte. Was im Fachjargon als „unique content“ bezeichnet wird, ist heutzutage die Basis jeglicher Suchmaschinenoptimierung. Die Algorithmen von Google und Co können mittlerweile problemlos erkennen, ob es sich um echte Inhalte, sinnfreie Aneinanderreihungen von Keywords oder um kopierte Inhalte handelt. Einzigartiger Content spiegelt sich in der Regel positiv im Bewertungsverfahren von Suchmaschinen wieder und zählt somit zu den wichtigsten Voraussetzung, die Suchmaschinenplatzierung zu verbessern. Ein weiterer positiver Nebeneffekt, den viele außer Acht lassen: Die Qualität der Artikel trägt in hohem Maße auch zum Aufbau von Backlinks bei.

Schnelle, unkomplizierte und flächendeckende Verbreitung von aktuellen Nachrichten

Ein Blog ist das Mittel der Wahl wenn es darum geht, Aktuelles schnell, flächendeckend und unkompliziert im Web (oder innerhalb des Firmennetzwerkes) zu verbreiten. So bieten Blog-Systeme mit Hilfe von Word-ähnlichen Eingabemasken die Möglichkeit, Artikel auf der Webpräsenz bequem zu veröffentlichen, ohne dass dabei umfassende HTML- oder Programmierkenntnisse erforderlich sind.

Ohne Zweifel könnte dies auch mit jedem beliebigen Content Management System (Tyo3, Joomla etc.) erzielt werden. Die entscheidenden Vorteile von Blog-Systemen, allen voran WordPress, bestehen allerdings darin, dass die Benutzeroberflächen für den User wesentlich übersichtlicher und intuitiver gehalten sind und Blogging-Systeme von Haus aus über weitreichende Vernetzungsmöglichkeiten wie RSS Feed, Bookmarking, Social-Media-Anbindungen etc. verfügen. Dadurch kann eine effiziente und flächendeckende Verbreitung von Unternehmensmeldungen, Ankündigungen, Produktneuheiten, Testberichten etc. sichergestellt werden.

Aufwand und Bedarf

Aus betriebswirtschaftlicher Sicht ist ein Corporate Blog für ein Unternehmen als Investition einzustufen: Die Firma hat für den Weblog einen gewissen Aufwand zu tragen, zieht daraus aber einen gewissen Nutzen. In welcher Form sich ein Blog für ein Unternehmen positiv auswirkt, hängt, wie bereits erläutert, von der strategischen Ausrichtung ab.

Personalbedarf und Zeitaufwand

Bewusst sollte einem sein, dass die Pflege eines redaktionell gut strukturierten Weblogs einiges an Zeit bedarf. Dieser Aufwand beschränkt sich dabei nicht nur auf das Verfassen von neuen Artikeln. Auch für Themenfindung, Qualitätsverbesserung, Recherche, Kommunikation mit Usern und Weiterkonzeption des Blogs wird einiges an Zeit anfallen. Dieser Aufwand muss logischerweise durch einen oder gar mehrerer Mitarbeiter getragen werden. Wie viel Zeit ein Unternehmen für das Betreiben des Corporate Blogs investieren soll, lässt sich nicht verallgemeinern. Der Zeit- und damit verbundene Personalaufwand hängt maßgeblich von der Frequenz, Art und Länge der Beiträge und der unternehmensinternen Organisation bei den weiteren anfallenden, redaktionellen Tätigkeiten ab. Und nicht zuletzt spielen ein stückweit auch die Fähigkeit und Schnelligkeit des Verantwortlichen eine gewisse Rolle.

Um es an dieser Stelle klar zu formulieren: Für das Betreiben eines Blogs bedarf es keine Ausbildung im Bereich Journalismus oder Kommunikation. Auch geht es bei den verfassten Beiträgen nicht darum, Bücher zu füllen oder für den Literaturnobelpreis vorgeschlagen zu werden. Im Gegenteil: Viele Leser schätzen an Artikeln gerade die Authentizität des Verfassers. Der Autor sollte aber dennoch ein gewisses Gespür für Öffentlichkeitsarbeit, Kreativität und Themen Know-how mitbringen, Informationen sprachlich korrekt vermitteln und sich in die Köpfe der Leser hineinversetzen können.

Damit weitestgehend Planungssicherheit erlangt werden kann, sollten sich Unternehmen deshalb bereits in der Vorbereitungsphase genauestens Gedanken über die Zuständigkeiten für die anfallenden Aufgaben, die Blogfrequenz und die dafür notwendige Arbeitszeit machen. Gerade zu Beginn ist es sinnvoll, knappe Vorgaben für die Arbeiten zu setzen und diese im Laufe der Zeit je nach Ergebnis anzupassen.

Hinweis: Die Blog-Frequenz ist nicht alles und richtet sich hauptsächlich nach der Thematik des Weblogs. Ein Weblog, der beispielsweise über das aktuelle Geschehen an der Börse berichtet, wird mit Sicherheit eine höhere Blog-Frequenz anstreben, als die Metzgerei um die Ecke. Ausschlaggebend ist  die Zielsetzung und Ausrichtung des Blogs. Der allgemein bekannte Leitsatz „Qualität vor Quantität“ ist im Grunde genommen auch beim Bloggen gültig, jedoch können, für die Leser unerwartet eintretende, lange Pausen zwischen den Beiträgen auch ein negatives Bild des Unternehmens vermitteln. Denn nicht wenige Besucher assoziieren mit dem Weblog eine Art Logbuch, das in diesem Fall unkontinuierlich geführt wird.

Aufbau- und Unterhaltskosten

Die einmaligen Anschaffungskosten sowie die monatlichen Unterhaltskosten sind im Verhältnis zum notwendigen Personalaufwand als ehr gering einzustufen. Der Blog kann entweder in die bestehende Unternehmens-Website integriert oder als stand-alone Page aufgebaut werden (s. diesen Blog).

Die erstere ist sicherlich die günstigere Variante, da sich das Screendesign des Blogs in der Regel an der bestehenden Website orientieren wird. Somit können für den Aufbau der Blog-Templates weite Teile der bereits existierenden HTML Vorlagen und Stylesheets verwendet werden.

Entscheidet man sich für eine stand-alone Version, so fallen neben der Installation und dem Template-Aufbau zusätzliche Kosten für das Screendesign und die HTML Umsetzung an. Je nach Agentur oder Dienstleister kann die Differenz zwischen beiden Varianten rund 2000€ betragen.

Da für das Betreiben eines externen Corporate-Blogs lediglich Webspace, PHP und eine MySQL Datenbank vorausgesetzt wird,  fallen die Unterhaltskosten (Hostingpakete, falls nicht vorhanden, gibt es ab 2,99€ pro Monat) nicht ins Gewicht. Auch der Installationsaufwand für WordPress oder ähnliche Open-Source Blogging-Systeme hält sich in engen Grenzen.

Fazit

Ein Corporate Blog stellt für Unternehmen ein sinnvolles Kommunikationsinstrument dar. Es bedarf allerdings der richtigen Strategie, der Mitarbeiter und nicht zu vergessen auch der richtigen Überzeugung.  Eine  „dann machen wir eben mal nen Blog und posten ab und zu was“ Einstellung wird jedoch langfristig gesehen nicht zum Erfolg führen. Und für alle die es interessiert: Für Recherche, Themenfindung, Strukturierung und das Verfassen dieses Artikels wurden rund 10 Stunden benötigt, bei einem Umfang von rund 1600 Wörtern.

Voraussetzung für das Styling der Karten ist die Verwendung der aktuellen Version des Google Maps Api (v3). Wir erstellen zunächst ein Div mit einer eindeutigen Id „map_canvas“, in dem die Google Map später platziert wird. Über CSS lassen sich Breite und Höhe der Karte bequem festlegen.

Einbinden von Google Maps

Für alle, die noch nicht mit der aktuellen Version des Apis gearbeitet haben, möchte ich zunächst einen kurzen Überblick geben, wie ihr die Karte in ein HTML Dokument einbindet.

1. Hinzufügen der Google Maps Bibliothek im Header der Seite.

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
</script>

Beachtet hierbei bitte, dass der Parameter „sensor“, der für das Übertragen der eigenen Position gedacht ist, am Ende der URL zwingend gesetzt werden muss.  Da wir in unserem Beispiel den Standort nicht übermitteln möchten ist der Parameter auf „false“, andernfalls auf „true“ zu setzen.

2. Anlegen einer Javascript – Funktion initialize() zum Aufbau der Karte


<script type="text/javascript">// <![CDATA[

function initialize() {
/*Standard Setup der Google Map*/
var latlng = new google.maps.LatLng(49.89354237185578, 10.884897708892822);
var myOptions = {
        zoom: 13,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}
// ]]>
</script>

In einem weiteren Skriptbereich im Header legen wir eine Funktion an, die den Aufbau und das Verhalten der Karte bestimmt. Wir erzeugen hierzu zunächst ein neues google.maps.LatLng Objekt, das spätere das Zentrum unserer Karte sein wird.

var latlng = new google.maps.LatLng(49.89354237185578, 10.884897708892822);

Um an die Koordinaten eines Standortes zu gelangen, gibt es im Web zahlreiche Tools, sog. Geocoder.  (z.B. https://www.cantamen.de/geocoder.php?lang=de)

Im nächsten Schritt gilt es nun, die Optionen der Karte näher zu bestimmen. Hierzu definieren wir ein Optionen-Array myOptions, in dem der Kartenzoom, die Centerposition und der Kartentyp festgelegt werden. Letzteren belassen wir für Testzwecke zunächst bei google.maps.MapTypeId.ROADMAP. Abschließend erzeugen wir ein Kartenobjekt und weißen diesem das Container-Div, sowie das Array mit den Optionen zu.

3. Aufruf der Initialisierungsfunktion beim Laden der Seite

Damit die Funktion beim Laden der Seite auch ausgeführt wird, muss diese mit einem onload Event verknüpft werden. In das body-Tag der Seite schreiben wir deshalb:

<body onload="initialize()">

Habt ihr alle Code-Anweisung in das HTML-Dokument eingefügt, sollte die Karte nun korrekt angezeigt werden.

Styling von Google Maps

Kommen wir nun zum eigentlichen Styling der Google Map. Seit Version 3 des Api stehen Entwicklern hierzu zwei Möglichkeiten zur Verfügung:

Variante 1: Bearbeiten der Default-Einstellungen
Möchte man die Styles der Basiskartentypen  TERRAIN, ROADMAP, SATELLITE, HYPRID verändern, ohne einen zusätzlichen Kartentyp in der Karte mit aufzunehmen, so ist diese Variante die richtig.

Variante 2: Hinzufügen eines neuen Kartentyps, StyledMapType
Soll es im Unterschied dazu bei der Karte möglich sein, zwischen den einzelnen Kartentypen ( TERRAIN, ROADMAP, SATELLITE, HYPRID) sowie den eigenen Typen zu wechseln, so ist Variante 2 das Mittel der Wahl.

Variante 1: Styling der Karte durch Bearbeiten der Default-Einstellungen

Werfen wir zunächst einen Blick auf die erste Variante. Hierfür benötigen wir zwei Dinge. Zum einen ein Style Array, das die Farben von Kartenbestandteilen (Straßen, Plätzen, Parks etc.) festlegt und zum anderen einen Befehl, um dieses Style Array der Karte zuzuordnen.

a, Festlegen der neuen Kartenstyles durch Style Array
Das Array besitzt im Allgemeinen folgenden Aufbau:

var dasStyleArray = [
{
featureType: '',
elementType: '',
stylers: [
  {hue: ''},
  {saturation: ''},
  {lightness: ''},
// etc...
]
},
{
featureType: '',
elementType: '',
stylers: [
  {hue: ''},
  {saturation: ''},
  {lightness: ''},
// etc...
]
},
... usw...
];

Es besteht aus einer Aneinanderreihung von Blöcken, die für die Farbgebung der einzelnen Kartenbestandteile, also Straßen, Landschaften, Wasser, öffentliche Einrichtungen etc., zuständig sind.
Jeder dieser Blöcke besteht wiederum aus drei Abschnitten:

featureType:
Der featureType bestimmt, auf welches Kartenelement sich die späteren Styling-Regeln beziehen sollen. Mögliche Werte sind etwa „administrative“, „landscape“, „water“, „road.highway“. Die komplette Auflistung findet ihr in der Api-Referenz.

elementType:
Der Element Typ gibt an, ob die späteren Styling-Regeln auf die Karte selbst (geometry), die Beschriftungen (labels) oder alles (all) angewendet werden sollen.

Styler:
Bei Farbedefinitionen wird immer auf das HSL-Modell zurückgegriffen. Durch Angabe von Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness) oder durch gesonderte Funktionen, beispielsweise Umkehrung der Helligkeit, bekommt das Kartenelement im Styler somit den eigentlichen Anstrich verpasst. Einen Überblick über alle gültigen Anweisungen findet ihr im Api-Manual.

Tip: Wer auf lästiges Ausprobieren verzichten möchte, findet auf der folgenden Seite einen Styling-Wizard mit komfortabler Benutzeroberfläche, der den fertigen Code für das Style-Array liefert.

b, Zuordnen des neuerstellten Kartenstyles
Damit die definierten Kartenstile auch angezeigt werden, müssen sie der Karte noch zugeordnet werden. Hierfür kann man auf die Funktion setOptions() des erstellten Kartenobjektes wie folgt zurückgreifen:

map.setOptions({styles: dasStyleArray });

c, Beispiel
Ein erstes einfaches Beispiel soll das Styling der Karte Schritt für Schritt veranschaulichen:

Der komplette Code lautet somit:

function initialize() {
/*Standard Setup der Google Map*/
var latlng = new google.maps.LatLng(49.89354237185578, 10.884897708892822);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var blueMoon= [{featureType: "all", stylers: [{ hue: '#0000b0'},{invert_lightness: 'true'},]},
{featureType: "landscape.man_made",stylers: [{ hue: '#fcff05'}]}
];
map.setOptions({styles: blueMoon});}

Variante 2: Hinzufügen eines neuen Kartentyps

Das Festlegen des Stylings mit Hilfe des Style-Arrays ist gegenüber der ersten Variante absolut identisch. Um einen neuen, umschaltbaren Kartentyp hinzuzufügen, bedarf es allerdings ein paar zusätzlicher Anweisungen:

a, Hinzufügen der Kartentyp-Schaltflächen

var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeControlOptions: {
      mapTypeIds: [
        google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.SATELLITE,
        'schalt_flaeche']

     }
 };

Zunächst fügen wir der Karte mit Hilfe des Options-Arrays die gewünschten Schaltflächen für die Standardtypen bzw. für unseren eigenen Kartentyp hinzu.

b, Anlegen eines neuen Kartentyps

var newMapType = new google.maps.StyledMapType(
blueMoon, {name: "Blue Moon"});

Im zweiten Schritt erstellen wir einen neuen Kartentyp. Der erste Parameter des Konstruktors erwartet dabei ein Style Array, das für das Erscheinungsbild der Karte zuständig ist. Der zweite Parameter „name“ legt den Namen des Kartentyps fest.

c, Zuordnung Schaltfläche Kartentyp

map.mapTypes.set('schalt_flaeche', newMapType);
map.setMapTypeId('schalt_flaeche');

Abschließend stellen wir die Beziehung zwischen der Schaltfläche und dem Kartentyp her und aktivieren den Kartentyp direkt nach dem Laden der Karte.

Das komplette Beispiel sieht dann wie folgt aus:


<script type="text/javascript">// <![CDATA[

function initialize() {

/*Standard Setup der Google Map + Hinzufügen der Schaltflächen*/

 var latlng = new google.maps.LatLng(49.89354237185578, 10.884897708892822);
 var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeControlOptions: {
      mapTypeIds: [
        google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.SATELLITE,
        'schalt_flaeche']
      }
 };

 /*Eigenes Style-Array hinzufügen*/

 var blueMoon= [
  {
  featureType: "all",
  stylers: [
   {hue: '#0000b0'},
   {invert_lightness: 'true'},
    ]
  },

  {
    featureType:"landscape.man_made",
    stylers: [
     {hue: '#fcff05'},
    ]
  },

];

/*Erstellen eines neuen Kartentyps*/
var newMapType = new google.maps.StyledMapType(
blueMoon, {name: "Blue Moon"});

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

/*Zuordnung Schaltfläche <=> Kartentyp*/
 map.mapTypes.set('schalt_flaeche', newMapType);
 map.setMapTypeId('schalt_flaeche');
}

// ]]></script>

Beispiele, Code Snippets

1. Night hawk

2. Ohne Straßen

3. Graustufen

4. Modern

5. Gewerbe

6. Silent


/*1. Night hawk*/
var nighthawkStyle= [
   {
     featureType: 'all',
     stylers: [
         {invert_lightness: 'true'}
     ]
   },
];

/*2. Ohne Straßen */
var ohneStrassenStyle= [
   {
     featureType: 'road',
     stylers: [
       {visibility: 'off'}
     ]
   },
];

/*3. Graustufen*/
var graustufenStyle= [
   {
     featureType: 'all',
     stylers: [
       {saturation: -100},
       {gamma: 0.90}
      ]
   },
];

/*4. Modern */
var modernStyle= [
   {
     featureType: "water",
     stylers: [
      { hue: "#0066ff" },
      { lightness: -29 },
      { saturation: 7 }
    ]
  },

  {
    featureType: "landscape.natural",
    stylers: [
      { visibility: "on" },
      { saturation: 22 },
      { hue: "#00ff44" },
      { lightness: -42 }
    ]
  },

  {
    featureType: "road.highway",
    stylers: [
      { visibility: "simplified" },
      { hue: "#ff0000"},
      { saturation: -57 }
    ]
  },

  {
    featureType: "road.arterial",
    stylers: [
      { hue: "#ff0000"},
      { visibility: "simplified" },
      { saturation: -56 }
    ]
  },

  {
    featureType: "poi",
    stylers: [
      { visibility: "off" }
    ]
  },

  {
    featureType: "road.local",
    elementType: "geometry",
    stylers: [
      { visibility: "on" },
      { saturation: -59 },
      { hue: "#00ffdd" },
      { lightness: -18 }
    ]
  }
];

/*5. Gewerbe */
var gewerbeStyle= [
   {
     featureType: "road",
     stylers: [
      { visibility: "off"; }
     ]
   },

   { featureType: "poi.business",
     elementType: "geometry",
     stylers: [
       { hue: "#ff2b00" },
       { saturation: 63 },
       { lightness: -22 }
     ]
   }
];

/*6. Silent */
var silentStyle= [
   {
     featureType: 'road',
     elementType: 'geometry',
     stylers: [
       {'visibility': 'simplified'}
     ]
   },

   {
     featureType: 'road.arterial',
     stylers: [
       {hue: '#005eff'},
       {saturation: -78},
       {lightness: 0}
      ]
    },

    {
      featureType: 'road.highway',
      stylers: [
        {hue: '#ff0000'},
        {saturation: -40},
        {lightness: 2.8}
       ]
     },

     {
       featureType: 'water',
       stylers: [
         {hue: '#0077ff'},
	 {lightness: -22},
	 {saturation: -11},
        ]
      },

      {
        featureType: 'landscape',
        stylers: [
          {hue: '#0008ff'},
          {saturation: -26},
          {lightness: -1.1}
         ]
       },

       {
         featureType: 'poi',
         elementType: 'label',
          stylers: [
            {'visibility': 'off'}
          ]
        },

        {
          featureType: 'transit',
          stylers: [
            {'visibility': 'off'}
          ]
        },
];

1. Inhalt oder Layout? Henne oder Ei?

Vielen Webdesignern und Agenturen wird folgende Aussage des Kunden bekannt vorkommen: „Machen Sie erst einmal das Layout fertig, und wir liefern dann die Texte nach und nach„. Je nach Skalierbarkeit des entworfenen Layouts und Umfang des finalen Inhalts wird dieser Workflow auch mehr oder weniger gut funktionieren. Doch was passiert, wenn das schönste Screendesign, das Sie je entworfen haben, durch eine Maße an eingehenden Bildern, Videos, Texten und sonstigen Inhalten überladen wird?

Zum einen verändert sich gegenüber dem Entwurf mit Platzhaltertexten die optische Wahrnehmung des Layouts. Zum anderen geht die Übersicht und somit auch die Benutzerfreundlichkeit der Webseite Schritt für Schritt verloren. Spätestens wenn durch eine Vielzahl an neu hinzugefügten Unterseiten die Navigationsstruktur und Menüs über den Haufen geworfen werden müssen wird einem als Screendesigner bewusst, dass diese nicht der richtige Weg gewesen sein kann.

Qualitativ hochwertiges Webdesign zeichnet sich dadurch aus, Informationen den Besuchern übersichtlich, in kürzest möglicher Zeit (mit wenigen Klicks) und optisch ansprechend zu vermitteln. 

Besprecht also zunächst mit den Kunden die inhaltlichen Aspekte so detailliert wie nur irgendwie möglich und klärt u.a. folgende Fragen:

  • Welchen Seitenumfang soll die Webpräsenz später besitzen und wie soll die Seitenstruktur des Webauftritts gegliedert sein? (Kategorisierung)
  • Welchen Umfang werden die Inhalte der einzelnen Seiten besitzen?
  • Welche Inhaltstypen werden verwendet? Sollen 10 DinA4 Seiten Text untergebracht werden oder doch nur wenige Absätze mit Bildern?
  • Sollen die Inhalt auch auf mobilen Endgeräten vollständig darstellbar sein? Flash-Präsentationen, aufwendige Videos und Inhalte, die auf mobilen Endgeräten nicht darstellbar sind, sind dann entweder zu vermeiden oder zu ersetzen.

Je mehr Informationen über den Inhalt in diesem wichtigen Konzeptionsgespräch bekannt werden, desto präziser kann der Webdesigner das Layout, Navigationsstruktur und den Seitenaufbau auf die Inhalte abstimmen.

2. Warum ist die Qualität der Inhalte so wichtig?

Präsentation der Marke, Informationsvermittlung

Die Webseite ist ein zentrales Marketinginstrument und aus dem modernen Marketingmix nicht mehr wegzudenken. Sie ist die virtuelle Visitenkarte des Unternehmens, Person oder einer Marke und somit für Besucher (oder deutlicher ausgedrückt, für potentielle Kunden) die erste Anlaufstelle, um Informationen über das Angebot einzuholen.

Werden aus Sicht der Interessenten möglichst viele der ev. auftretenden Fragen beantwortet, so ist schon einmal ein erstes Ziel erreicht: den Besucher ausreichend mit Informationen zu versorgen.

Welche Inhaltsart in welchem Umfang allerdings für eine ausreichende Informationsvermittlung geeignet ist, hängt maßgeblich von den gesetzten Zielen sowie Art, Umfang und Thematik der Webseite ab. Hierauf werde ich späterer noch gesondert eingehen

Suchmaschinenranking

Dass das Suchmaschinenranking einer Internetpräsenz eng verknüpft mit der Qualität der Webseiteninhalte ist, klingt zunächst vielleicht ein wenig verwunderlich. Wie soll eine Suchmaschine schon entscheiden können, ob Webcontent hochwertig oder nichtssagend ist?

In der Tat können Google und Co. derzeit nur in sehr begrenztem Maß durch direkte Codeanalyse feststellen, ob es sich beim Content einer Webseite um hochwertigen oder gar sinnvollen Inhalt handelt. Zwar verfügt Google bereits heute über einige einfache Algorithmen zur semantischen Analyse (z.B. Messung und Bewertung der Keyword-Dichte, Wiederholung von Texten und Passagen, gefährdendes Material usw.), doch um die genaue Qualität zu bestimmen, benutzen Suchmaschinen einen ganz anderen Ansatz.

Unter der Annahme, dass andere Webauftritte nur auf die eigene Seite verlinken, wenn auch der Inhalt qualitativ hochwertig ist, werden Backlinks als entscheidendes Kriterium zur Bewertung herangezogen. Je mehr (themenrelevante) Seiten also einen Link zu Eurer Website einbauen und somit eine Art Empfehlung aussprechen, desto sicherer ist es für Suchmaschinen, dass die angebotenen Inhalte qualitativ hochwertig sind, wodurch sich das Ranking verbessert.

Auf indirektem Weg trägt somit die Qualität des Inhalts entscheidend zur Verbesserung des Suchmaschinenergebnisses bei.

Suchmaschinenoptimierung

Wie bereits angedeutet sind Inhalte die Basis jeglicher Suchmaschinenoptimierung. Sowohl On- als auch Off-Page Optimierung kann nur dann funktionieren, wenn Inhalte in ausreichender Qualität (und Umfang) vorhanden sind.

Während Flashanimationen, Bilder und Videos kaum positive Auswirkungen auf das Ranking von Suchmaschinen besitzen, basiert die Indizierung fast ausschließlich auf den textuellen Angeboten.

Das bekannte Sprichwort „content ist king“ hat sich im Laufe der Zeit dabei immer mehr in Richtung „Klasse statt Masse“ gewandelt. Im Vordergrund stehen nun nicht mehr Ansammlungen an wertlosen (ev. kopierten) Inhaltselementen, sondern echter Content, von dem sich Besucher der Webseite einen gewissen Mehrwert versprechen können.

Für die Suchmaschinenoptimierung bedeutet das vereinfacht ausgedrückt, Texte weniger auf die Suchmaschinen- Bots zuzuschneiden, sondern originellen, einzigartigen Content zu konzipieren, der von Besuchern als Bereicherung empfunden wird und sich von Inhalten konkurrierender Webseiten abhebt.

User binding

Ähnlich wie im realen Geschäftsleben, in dem es neben der Akquise von Neukunden insbesondere auf die Pflege der Bestandskunden ankommt, muss es auch für Betreiber von Webseiten ein Anliegen sein, User dazu zu bewegen, in regelmäßigen Abständen die Webseite zu besuchen. Qualitativ hochwertiger Content hilft dabei einerseits, die Verweildauer auf der Webseite zu erhöhen und andererseits im Gedächtnis der Besucher zu bleiben.

3. Was zeichnet „gute“ Inhalte aus?

Welche Inhalte gut oder schlecht sind, hängt zugegeben auch ein Stück weit vom subjektiven Empfinden des Besuchers ab. Ich möchte Euch im folgenden Abschnitt  einige Merkmale vorstellen, anhand derer Ihr die Qualität von Inhalten etwas genauer und neutraler bewerten könnt.

Vermeiden von Plagiaten und Wiederholungen

Was bereits Karl-Theodor zu Guttenberg zum Verhängnis wurde, gilt auch für Webseitenbetreiber: Nicht nur, dass das Kopieren von Inhalten ohne Genehmigung des Urhebers untersagt ist, Google verfügt über einen ausgefeilten Mechanismus, der „duplicate content“ sofort entdeckt und negativ bewertet.

Doch nicht nur aus diesem Grund sollte auch auf das Kopieren von einzelnen Textpassagen verzichtet werden: Bekommen Besucher der Webseite immer wieder identische Information vermittelt, so werden diese kaum bereit sein, längere Zeit auf der Page zu verweilen.

Thematisch einzigartig

Zugegeben ist es, abhängig von Thematik und Art der Seite oft nicht gerade einfach, vollkommen neuartige Themen zu finden. Insbesondere um sich von Konkurrenten abzuheben und aus der Masse herauszustechen bedarf es hierbei Einiges an Kreativität.

Gerade bei sehr allgemeinen und aktuellen Themen ist es nicht immer möglich, das Rad neu zu erfinden. Existieren im Web bereits vergleichbare Ausführungen, so sollte der Anbieter zunächst überlegen, ob und wie der Inhalt sinnvoll ergänzt werden kann. Als Stütze könnten Euch folgende Fragen hilfreich sein:

  • Welche Informationen fehlen in bereits existierenden Inhalten? (Ergänzungen)
  • Welche Angaben sind überflüssig oder falsch? (Richtigstellungen)
  • Werden alle Konsequenzen, Ergebnisse oder Zusammenfassungen angesprochen? (Auswirkungen)
  • Lassen sich die Ausführungen auch auf andere Situationen oder Sachverhalte ausweiten? (Übertragung)
  • Werden in den Darstellungen alle Details und Sachverhalte ausführlich und verständlich erklärt? (Vertiefung, Veranschaulichung)
  • Werden alle wichtigen Zielgruppen angesprochen? (Optimierung, Anpassung an Zielgruppe)

Mit eigenen Worten wiedergegeben und mit verschiedensten Details ergänzt entsteht so authentischer „unique content“, der den Besuchern der Webseite gegenüber der Konkurrenz einen echten Mehrwert verspricht.

Service und Mehrwert

Bei der Konzeption von Inhalten vergessen Webseitenbetreiber oft, sich auch in die Lage der Besucher hinein zu versetzen und zu hinterfragen, welche Aspekte aus deren Sicht von zusätzlichem Interesse sein könnten. Einige Inhalte, die häufig als ergänzender Service für Benutzer angeboten werden, sind beispielsweise:

Glossare, Lexika, Wikis
Nachschlagewerke eignen sich einerseits hervorragend, den Usern die wichtigsten Fachbegriffe verständlich zu machen. Zum anderen bieten sie aus Sicht der Suchmaschinenoptimierung die Möglichkeit, themenrelevante Keywords im Text zu integrieren.

Top 10- / Bestenlisten
Top 10 – und Bestenlisten sind ein ideales Mittel, um aus einer Fülle von Angeboten die wichtigsten oder besten, je nach Auswahlkriterium, zu kennzeichnen. Für einen Onlineshop könnten das etwa die durch Besucher am besten bewerteten Produkte, für einen Blog die am meisten kommentierten Artikel und für eine Infosite die wichtigsten Informationen sein.

Linksammlung
Verlinkungen zu themenverwandte Seiten sind insbesondere dann sinnvoll, wenn deren Inhalte für die Besucher eine echte (kostenlose) Ergänzung zum eigenen Angebot darstellen. Bei der Aufnahme von Links sollte man jedoch stets die Gefahr im Hinterkopf behalten, dass Besucher auf die verlinkten Sites abwandern könnten.

Tip 1:
Ich empfehle daher, nur auf Kooperationspartner oder themenrelevante Seiten zu verweisen, die einen Backlink auf die eigene Seite setzen.

Tip 2:
Um tote Links („dead links“) zu vermeiden, sollte man die Erreichbarkeit aller ausgehenden Verlinkungen von Zeit zu Zeit überprüfen.

Blogs / Tagebücher
Auch Blogs bieten dem Webseitenbetreiber einen vielfachen Nutzen. Einerseits demonstrieren branchenspezifische Fachartikel ein hohes Maß an Fachkompetenz und Seriosität. Andererseits können wichtige Suchbegriffe im Text untergebracht und der Umfang einer Website vergrößert werden.

Darüber hinaus lassen sich mit Blogeinträgen bestimmte Themengebiete / Sachverhalte aus dem Angebot der Webseite explizit herausheben und subjektiv bewerten. Last but no least bietet ein Blog die Möglichkeit, zeitnah auf aktuelle Entwicklungen, Ereignisse und Neuigkeiten zu reagieren und kann so für mehr Aktualität sorgen.

Interaktion: Quiz, Wissenstest, Umfragen, Gewinnspiele
Vorbei sind die Zeiten, als das Web noch aus leblosen Texten und einzelnen Bildern bestand. Statt passiver Informationsaufnahme steht mehr denn je das aktive Eingreifen des Besuchers im Vordergrund.
Interaktive Elemente, beispielsweise ein kurzes Quiz, Wissenstest, Gewinnspiel oder Umfrage, sind unteraltsame Möglichkeiten, User zur Interaktion aufzufordern, für mehr Abwechslung zu sorgen und zugleich Anreize zu schaffen.

FAQ
Für die Beantwortung von immer wieder auftauchenden Fragen erweist sich eine FAQ Liste als äußerst hilfreich. So kann schnell und benutzerfreundlich auf die offenen Fragen der Besucher eingegangen und der Aufwand für die Bearbeitung einzeln eingehender Supportanfragen reduziert werden.

Zielgerichtet und strategisch

Wie bereits angedeutet gibt es für „guten“ Inhalt kein Patentrezept. Ob Infosite für Hobbyimker, Reiseportal, Selbstporträt oder ein Blog über Briefmarken, eines haben aber alle Seitentypen gemeinsam: Sie verfolgen ein (oder auch mehrere) Ziele. Gute Inhalte sind stets die entscheidenden Puzzleteile, um die gesetzten Zielvorgaben zu erfüllen.

Allerdings sollte man als Webseitenbetreiber Zielvorgaben nicht immer allzu eng sehen. Inhalte können beispielsweise informativ, humorvoll, attackierend, authentisch / transparent, wertend, aktuell, werbend etc. ausfallen. Es spricht nichts dagegen, diese Eigenschaften auch miteinander zu kombinieren und so für mehr Abwechslung auf der Seite zu sorgen.

Eine Infosite für Hobbyimker verträgt sicherlich auch den ein oder anderen humorvollen Beitrag, nur sollte dabei eben das übergeordnete Ziel, die Besucher über die Imkerei zu informieren, nicht gänzlich aus den Augen verloren werden.

Linkbaiting / geeignet Aufbau von Backlinks

Im Hinblick auf den Erfolg einer Internetpräsenz sind Backlinks auf die eigene Webseite ein entscheidendes Hab und Gut. Warum sollten andere Seiten allerdings ausgerechnet auf meine Seite verlinken? Genau um diese Frage dreht es sich beim Linkbaiting (engl. to bait: ködern). Nicht jeder Inhalt eignet sich für erfolgreiches Linkbaiting. Hochwertiger Content sollte in Bezug auf Linkbaiting in der Regel mindestens zwei der folgenden Attribute aufweisen können: beeindruckend, nützlich/ hilfreich, einzigartig, dauerhaft

Je mehr dieser Eigenschaften erfüllt sind, desto eher werden andere Seitenbetreiber bereit sein, einen Backlink auf deren Seite zu veröffentlichen. In der Praxis haben sich insbesondere folgende Inhaltstypen als bewährt: Nützliche Tools/ give aways, eBooks, whitepapers, Gewinnspiele, Quiz, Listen, Auszeichnungen uvm.

Grammatikalische und orthografische Korrektheit

Nicht jeder von uns, der textuelle Inhalte im Web veröffentlicht, muss ein zweiter Goethe oder Schiller sein und es bedarf auch keines Romans, um einfachste Sachverhalte darzustellen.

Wichtig ist, Informationen in einem flüssigen, für die Zielgruppe verständlichen Stil darzustellen und bei seinen Ausführungen insbesondere auf Grammatik, korrekte Rechtschreibung und Sinn zu achten. Gerade in Zusammenhang mit der On-Page Suchmaschinenoptimierung entstehen oftmals haarsträubende Textkonstrukte. Einige reale Beispiele gefällig? Bitte schön:

  • „Dienstleistung XYZ Bamberg nach Maß“
  • „Kostenlose Lieferung der XYZ – Waren frei haus“
  • „Onlineshop für XYZ – XYZ bestellen und kostenlos rund um die Uhr“

Bei allem (teils blinden) Optimierungs-Aktionismus sollte man die Verständlichkeit der Inhalte zu keinem Zeitpunkt aus den Augen verlieren. Die Kunst ist es, die Keywords in nicht übertriebener Anzahl und auf natürliche Art und Weise im Text so zu platzieren, dass die Lesbarkeit stets erhalten bleibt.

Zielgruppenorientiert

Guter Content orientiert sich stets an die Zielgruppe der Webseite. Kein Kind der Welt möchte eine dreiseitige Abhandlung zum Thema Auftrieb lesen, wenn es lediglich wissen möchte, wie man ein Papierschiff bastelt. Ebenso sollte man überlegen, ob und wie sehr die Zielgruppe Kaninchenzüchter wirklich an einer Bilderserie “Designgrundlagen nach Maß“ interessiert ist.

Sprache von Texten, Bilder, Präsentationen und Videos sollten also genauestens der Zielgruppe angepasst sein und eine gewisse Themenrelevanz aufweisen. Nur so können Interessenten gezielt angesprochen werden und ein reibungsloser Kommunikationsfluss stattfinden.

Barrierefreiheit (Accessbility)

Der Begriff Barrierefreiheit beschreibt die Eigenschaft von Webinhalten, von allen Anwendern, unabhängig von ihren körperlichen und technischen Möglichkeiten, genutzt werden zu können.

Körperliche Einschränkungen sind dabei nicht ausschließlich als Behinderung, wie etwa Sehschwäche, zu verstehen. So besitzen beispielsweise auch Kinder bis zu einem gewissen Alter eine körperliche Barriere, da sie nicht lesen und die textuelle Informationen einer Webseite nicht aufnehmen können.

Technische Einschränkungen beziehen sich dagegen meist auf Hard- und Software des Users. Eine häufig auftretende Barriere ist in diesem Zusammenhang etwa die Notwendigkeit, einen bestimmten Browsertyp bzw. eine bestimmte Browser‐Version verwenden zu müssen, um Inhalte erfassbar darstellen zu können.

Ein in der Praxis immer wieder auftretendes Problem sind Flashinhalte und Videotypen, die insbesondere von mobilen Endgeräten oft nicht unterstützt werden. Um es klar zu formulieren: Barrierefreiheit bedeutet nicht, dass man auf solchen Content zwangsweise verzichten muss. Werden in diesen Flashinhalten allerdings Informationen dargestellt, die für das Verständnis von essentieller Bedeutung sind, so sollte man über alternative Varianten nachdenken, beispielsweise eine für mobile Endgeräte optimierte Version einer Webseite.

4. Weiterführende Links, Material

Bamberg hat nicht nur in der realen Welt sondern auch im World Wide Web einiges zu bieten. Ich habe euch einen zweiten Website Showcase zusammengestellt.

Gasthof Schiller / Wernsdorf


Branche: Gastronomie

Docufy / Bamberg


Branche: Softwareentwicklung

Zeck GmbH / Scheßlitz


Branche: Industrie, Antennenbau

Live Club / Bamberg


Branche: Gastronomie

Pose Down / Bamberg


Branche: Fitness

Creo Druck / Bamberg


Branche: Druck

Schlafen in Bamberg


Branche: Hotel, Gastronomie

Der Bademeister / Bamberg


Branche: Baddesign

Salino / Bamberg


Branche: Gastronomie

IGZ / Bamberg


Branche: Dienstleistungen, Existenzgründung

St. Georgen Bräu / Buttenheim


Branche: Gastronomie

Blüte & Ambiente / Bamberg


Branche: Messe, Veranstaltung

modernhouses / Schlüsselfeld


Branche: Wohnungsbau

Fässla / Bamberg


Branche: Gastronomie

Bamberger Symphoniker


Branche: Kultur, Musik

spicystyles / Pettstadt


Branche: Bekleidung, Onlineshop

Rolands Alpin Laden / Bamberg


Branche: Alpinsport, Freizeit

Upjers / Bamberg


Branche: Spieleentwicklung, Onlinegames

Dorfrocker / Oberaurach


Branche: Musik

Weinfachhandel Scharfenberg / Bamberg


Branche: Gastronomie, Wein

Das Erstellen von individuellen Landing-Pages für Facebook Unternehmensseiten ist für den Betreiber von enormer strategischer Bedeutung. Mit Hilfe einer optimierten Landing-Page können „Nicht Fans“ begrüßt und diesen die wichtigensten Informationen schnell und übersichtlich vermittelt werden. Durch orginelle Ideen und ein kreative Layouts können so Anreize für Besucher geschaffen werden, den „gefällt mir“ Button zu betätigen. Wir haben in diesem Artikel für Euch 40 deutschsprachige Facebook-Pages zusammengetragen, deren Landing-Pages als echte Eyecatcher das Interesse der User wecken und als Inspiration für Eure nächste Facebook Page dienen können.

Aperol Spritz Deutschland

Branche: Lebensmittel/Getränke | Fans: 94.161 | Adresse: www.facebook.com/aperol.de

Aperol Spritz Deutschland

Assassin´s Creed

Branche: Computergames | Fans: 115.899 | Adresse: https://www.facebook.com/AssassinsCreedDE

Audi Deutschland

Branche: Automobile | Fans: 134.108 | Adresse: https://www.facebook.com/AudiDE

Audi Deutschland

Baileys

Branche: Lebensmittel/Getränke | Fans: 87.308 | Adresse: www.facebook.com/BaileysDeutschland

Baileys Deutschland

DailyDeal

Branche: Coupons | Fans: 24.916 | Adresse: https://www.facebook.com/DailyDeal.Deutschland

DailyDeal

Deichmann

Branche: Schuhe | Fans: 25.531 | Adresse: https://www.facebook.com/Deichmann

Deichmann

Deutschland findet euch

Aktion: Suche von vermissten Kindern | Fans: 106.481 | Adresse: https://www.facebook.com/deutschlandfindeteuch

Deichmann

Duracell

Branche: Batterien/Energie | Fans: 591 | Adresse: https://www.facebook.com/DuracellDeutsch

Duracell

easyJet

Branche: Flüge/Reisen | Fans: 5.797 | Adresse: https://www.facebook.com/easyJet.Deutschland

easyJet

Fa

Branche: Hygiene/Pflegemittel | Fans: 6.441 | Adresse: https://www.facebook.com/fadeutschland

Fa

Ford in Deutschland

Branche: Automobile | Fans: 8.403 | Adresse: https://www.facebook.com/fordindeutschland

Ford Deutschland

Gillette

Branche: Rasur/Pflegemittel | Fans: 19.300 | Adresse: https://www.facebook.com/Gillette.Deutschland

Gillette Deutschland

Haribo

Branche: Lebensmittel | Fans: 60.394 | Adresse: https://www.facebook.com/haribo

Haribo Deutschland

hohes C

Branche: Lebensmittel/Getränke | Fans: 10.121 | Adresse: https://www.facebook.com/hohesC

hohesC

HP Deutschland

Branche: Hardware | Fans: 7.951 | Adresse: https://www.facebook.com/HPDeutschland

HP Deutschland

Jack Daniels

Branche:Lebensmittel/Getränke | Fans: 58.102 | Adresse: https://www.facebook.com/jacklivesheredeutschland

Jack Daniels

Joop

Branche: Bekleidung/Mode | Fans: 33.138 | Adresse: https://www.facebook.com/joop

Joop Deutschland

Jugendherbergen in Deutschland

Branche: Jugendherbergen | Fans: 4.082 | Adresse: https://www.facebook.com/Jugendherberge

Jugendherbergen Deutschland

KLM

Branche: Fluggesellschaft | Fans: 4.417 | Adresse: https://www.facebook.com/KLM.Deutschland

KLM Deutschland

Labello

Branche: Pflegemittel | Fans: 73.692 | Adresse: https://www.facebook.com/LabelloDeutschland

Labello

Neutrogena

Branche: Gesundheit/Pflegemittel | Fans: 9.110 | Adresse: https://www.facebook.com/NeutrogenaDeutschland

Neutrogena Deutschland

Nokia Deutschland

Branche: Handys/Mobilfunk | Fans: 21.138 | Adresse: https://www.facebook.com/nokiadeutschland

Nokia Deutschland

Nordsee

Branche: Fisch Restaurant | Fans: 5.235 | Adresse: https://www.facebook.com/Nordsee.Deutschland

Nordsee Deutschland

Nutella

Branche: Lebensmittel | Fans: 156.806 | Adresse: https://www.facebook.com/nutelladeutschland

Nutella Deutschland

Opel

Branche: Automobile | Fans: 44.120 | Adresse: https://www.facebook.com/OpelDE

Opel Deutschland

Otto

Branche: Versandhandel | Fans: 177.852 | Adresse: https://www.facebook.com/Otto

Otto

Panasonic Deutschland

Branche:Elektronikhersteller | Fans: 8.605 | Adresse: https://www.facebook.com/Panasonic.Deutschland

Panasonic Deutschland

Pantene Pro-V

Branche: Shampoo/Pflegemittel | Fans: 8.303 | Adresse: https://www.facebook.com/PanteneDeutschland

Pantene Pro-V

Paramount Pictures

Branche: Filmproduktion | Fans: 41.043 | Adresse: https://www.facebook.com/Paramount.Pictures.Germany.Kino

Paramount Pictures Deutschland

Persil

Branche: Waschmittel | Fans: 48.757 | Adresse: https://www.facebook.com/persil

Persil Deutschland

Peter Fox

Branche: Musiker | Fans: 350.333 | Adresse: https://www.facebook.com/pages/Peter-Fox/42592738173

Peter Fox

Pixmania

Branche: Onlineshop/Elektroartikel | Fans: 1.051 | Adresse: https://www.facebook.com/Pixmania.de

Pixmania

Playboy Deutschland

Branche: Magazin | Fans: 29.882 | Adresse:https://www.facebook.com/PlayboyGermany

Playboy Deutschland

Pringles

Branche: Lebensmittel/Chips | Fans: 14.476 | Adresse: https://www.facebook.com/PringlesDeutschland

Pringles Deutschland

Prinzenrolle

Branche: Lebensmittel/Süßwaren | Fans:10.121 | Adresse: https://www.facebook.com/prinzenrolle.germany

Prinzenrolle

Red Bull

Branche: Lebensmittel/Getränke | Fans: 16.839.508 | Adresse: https://www.facebook.com/redbull

Red Bull

REWE

Branche: Lebensmittelhandel | Fans: 11.141 | Adresse: https://www.facebook.com/REWE

Rewe

Starbucks Deutschland

Branche: Kaffeehäuser | Fans: 263.819 | Adresse: https://www.facebook.com/StarbucksDeutschland

Starbucks Deutschland

TUI

Branche: Reisen/Freizeit | Fans: 10.788 | Adresse: https://www.facebook.com/TUI.com

TUI

Weleda

Branche: Schönheit/Beauty | Fans: 7.359 | Adresse: https://www.facebook.com/Weleda.Deutschland

Weleda

Ein ereignisreiches Jahr 2010 neigt sich so langsam dem Ende entgegen. Im Web waren Facebook, Twitter, Xing, StudiVZ usw. zweifelsohne das allgegenwärtige Thema. Ein Ende der Sozialen Netzwerke ist derzeit überhaupt noch nicht absehbar. Im Gegenteil: Experten erwarten den Höhepunkt der Social Media Welle erst im Jahr 2012. Grund genug also einen Blick in die Glaskugel zu wagen. In diesem Artikel möchte ich Euch drei Themen vorstellen, die sich 2011 zu einem echten Trend entwickeln könnten.

1. Location Based Services – Quo vadis?!

Einen wahren Boom erlebten in diesem Jahr Location Based Services – Tools, mit deren Hilfe sich der aktuelle Standort veröffentlichen, die Umgebung nach Freunden absuchen und ortsbezogene Angaben posten lassen… eine Thematik mit gewissem (Spaß-)Potential.

Die Problematik

Doch der „Big Brother Gedanke“, jederzeit jeden und alles verfolgen zu können, scheint alleine nicht auszureichen, um Benutzer langfristig zu binden. Nach einer Webstudie nutzt derzeit lediglich 1% aller Internetuser regelmäßig derartige Services.

Der Hauptgrund ist in erster Linie darauf zurückzuführen, dass die Popularität von Gowalla und Co. bis dato ausschließlich auf dem Spaß der User an der Sache und Mundpropaganda basiert, was nach einer gewissen Phase des Testens und des Ausprobierens auf kurz oder lang das sinkende Interesse der User zur Folge hat.

Genau diese Problematik wird die Ausrichtung und Funktionalität von Location Based Services im nächsten Jahr in hohem Maße beeinflussen und sich zu einer echten Chance für Anwender und Anbieter gleichermaßen entwickeln.

Foursquare´s mayoring – Modell

Bei einem Blick über den großen Teich trifft man auf das in Deutschland noch weitgehend unbekannte Foursquare, das ein Modell mit Zukunftsperspektiven verfolgt. Foursquare verfügt neben den aus anderen Services bekannten Funktionen über ein aktives Belohnungs- und Bonussystem, das den Usern zusätzliche Anreize bieten soll: Wer am häufigsten an einer Location (min. 2x) eincheckt, der wird zum Bürgermeister (“mayor“) dieser Einrichtung. Der Clou: dem Betreiber/ Ersteller einer Location steht es frei, für den Bürgermeister ein Sonderangebot (“special offer“ ) auszurufen. Beliebte Formen sind hierbei jegliche Arten von Preisnachlässen, gratis Getränke, Flatrates etc., was das Foursquare-Prinzip besonders für die Gastronomie und den Einzelhandel interessant macht.

Mit ein wenig Kreativität und etwas Gespür für Marketing lassen sich auf effiziente Art und Weise Anreize für Besucher schaffen und neue Kunden akquirieren. Zwar sieht die Praxis in Deutschland in Bezug auf Foursquare noch recht trostlos aus (gerade einmal 0,3% aller Orte bieten „special offers“), die Kombination aus Tracking, Interaktion und Anreiz für User ist jedoch so erfolgsversprechend, dass sie auch von anderen Services bereits aufgegriffen wurde.

Facebook Places / Facebook Deals

Wie sollte es auch anders sein ist der Social Media Gigant Facebook mit Einführung von Facebook Places auf diesen Zug aufgesprungen. Allein mit der Zahl der potentiellen Nutzer liefert Facebook schlagkräftige Argumente für einen Erfolg: Von 500 Millionen Usern weltweit verwenden 150 Millionen User Facebook von mobilen Endgeräten aus.

Das Angebot steckt in Deutschland allerdings noch in den Kinderschuhen. So können derzeit ausschließlich von mobilen Geräten aus zwar Orte erstellt, dort eingecheckt und die Aktivitäten an einem Ort verfolgt werden, doch die für Unternehmensseiten interessanten Funktionen wie beispielsweise die Verknüpfung eines Ortes mit Unternehmerseite, die Beanspruchung eines Ortes durch ein Unternehmen und v.a. die Facebook-Deals, das Pendant zu den „special offers“ von Foursquare, sind noch nicht in vollem Umfang nutzbar.

Aktionen, wie der „Destroyer Burrito“ von Nike in den USA, lassen aber schon jetzt die zukünftigen Möglichkeiten und die marketingtechnische Tragweite erahnen:

Facebook Deals – Belohnungssystem im Überblick

Die folgende Auflistung gibt einen Überblick über die verschiedenen Arten von Facebook-Deals und zeigt, wie diese in der Praxis Anwendung finden könnten:

Individual Deals (Einmalige Angebote)

Hierbei handelt es sich um einmalige Check-In Angebote, die sich sowohl an die bestehenden als auch an Neukunden richten und besonders für die Einführung von neuen Produkten geeignet sind.

Beispiele für Individual Deals:

  • Bei der Einführung eines neuen Produkts/ Kollektion erhalten die Kunden bei Check-In X Prozent Rabatt.
  • Der Kunde erhält bei Check-In ein kostenloses Geschenk zu seinem Einkauf.
  • Saisonale oder Tageszeitabhängige Specials für Check-Ins
  • wechselnde Specials des Tages
  • Die ersten 5 Check-Ins erhalten 20% Preisnachlass auf bestimmte Artikel.
  • Buy one, get one free für die ersten X Check-Ins
  • Bei einem Check-In innerhalb der nächsten X Minuten, Stunden oder Tage bekommen die Facebook-User 20% Preisnachlass auf den Einkauf.
  • Checkt ein User an seinem Geburtstag ein, so erhält er kostenlos X…
  • 10€ Rabatt für Einkäufe ab 50€
  • Die ersten 10 Check-Ins erhalten kostenlosen Eintritt für das Event X…
  • die nächsten 25 Nutzer, die einchecken, erhalten X …
  • Die ersten X User, denen ein Event/Artikel/Gruppe etc. in Facebook gefällt, erhalten beim Check-In Y
  • Checkt ein User bei 2 befreundeten Unternehmen ein, erhält er X
  • Besonders geeignet für Restaurants, Hotels, Gaststätten usw.: Der User erhält bei Check-In einen kostenlosen Cocktail zum Abendessen /Aperitif
  • Eine Tasse Café gratis bei Check-In

 

Loyalty Deals (Treueangebote)

Die Treu des Kundesn wird belohnt. Checkt ein Kunde an einem Ort X mal ein, so erhält er als Treuebonus spezielle Sonderangebote, Preisnachlässe etc..

Beispiele für Loyalty Deals:

  • Eine Tasse Café gratis nach X Check-Ins
  • Ein kostenloser Kinobesuch nach X Check-Ins
  • Flatrate nach X Check-Ins
  • Mit X Check-Ins erhält der Besucher einen Treuegutschein im Wert von Y Euro
  • Bei zweimaligem Check-In an einem Tag erhält der User einen Rabatt von Y Prozent

 

Friend Deals (Gruppenangebote)

Friend Deals können nur dann eingelöst werden, wenn eine Gruppe von Leuten (maximal 8 Personen) zusammen an einer Location eincheckt. Dies hat zur Folge, dass sich für eine erfolgreiche Abwicklung des Deals mehrere Nutzer auf Facebook zwingend untereinander über das Angebot austauschen müssen, was gegenüber einmaligen Angeboten wiederum zu verstärkter Mundpropaganda und mehr Aufmerksamkeit führt.

Beispiele für Friend Deals:

  • Bei Check-In mit X Freunden erhält jeder Teilnehmer einen Gutschein über Y€ für den nächsten Einkauf
  • Checkt eine Gruppe bestehend aus 5 der mehr Leuten bei einer Bar, Diskothek Gaststätte etc. ein, so erhält jeder der Gruppe einen Verzehrgutschein in Höhe von X
  • Geeignet für Kino/Sportevents: Bei Check-In mit 3 Freunde erhält man ein kostenloses Popcorn
  • Checkt die erste Gruppe bestehend 8 Leuten bei einem Event ein, so erhalte alle freien Eintritt
  • Bei Check-In mit mind. 5 Leuten erhalten die Teilnehmer einen Preisnachlass X (weitere Möglichkeit: 3 Freunde erhalten 10%, 4 Freunde 20% Rabatt usw.)
  • Checkt ein Freund an einer Location mit ein, so erhält man kostenlos X
  • Die ersten 5 Leute, die zusammen mit 3 oder mehr Freunden einchecken, erhalten X
  • Neukundenwerbung: Checkt ein Neukunde zusammen mit einem Bestandskunden ein, so erhält der Neukunde X, der Bestandskunde Y

 

Charity Deals (Wohltätigkeit Deals)

Charity Deals richten sich an Unternehmen, die soziale Verantwortung übernehmen möchten. Für jeden Check-In eines Facebook Users spendet der Anbieter einen festgelegten Geldbetrag, Artikel etc. an gemeinnützige Einrichtungen. Facebook stellt dabei lediglich die Oberfläche, nicht aber die gesamte Infrastruktur für die Abwicklung des Spenden-Prozesses (PayPal, Zahlungsmethoden, Kontodaten etc.) zur Verfügung.

Beispiele für Charity Deals:

  • Spende pro Check-In 1€ für einen wohltätigen Zweck an einem bestimmten Tag X
  • Spende für jeden Check-In eine warme Mahlzeit für Obdachlose
  • Spende für jeden Check-In einen Gegenstand X
  • Für jeden Kauf von Handschuhen, Schals, Spielzeug etc. bei Check-In wird der gleiche Artikel an X gespendet
  • Jeder eingecheckte Nutzer erhält X Prozent Preisnachlass für den nächsten Einkauf, wenn er selbst einen Artikel für die Spende an Y vorbeibringt

2. Social Gaming

Begib dich sofort zur nächsten Kasse, erwerbe ein McMenü (besser zwei oder drei), gehe nicht über Los, und ziehe keinen Hauptgewinn ein… beim Burger Riesen Mc Donalds wird also wieder Monopoly gespielt.

Reale Welt meets social networks

Mit Beginn der Kampagne steigt zeitgleich auf Ebay und ähnlichen Plattformen die Zahl an Auktionen, in denen Sticker zu horrenden Preisen, geöffnet oder verschlossen, erworben werden können, um die fehlenden Straßen doch noch zu ergattern. Auf Facebook Pages wird gehandelt, gefeilscht, Diskussionen zu den Tauschobjekten geführt und via Twitter Statusmeldungen über die neusten Errungenschaften gepostet.

Die Anbieter selbst werden in Zukunft versuchen, sich dieses Verhalten der User weiter zu Nutze zu machen. Ergänzen sich die Sozialen Netzwerke doch hervorragend mit der Philosophie, die hinter den spielerischen Aktionen steckt: Je länger sich ein Kunde mit einer Marke beschäftigt, desto vertrauter wird er mit dieser und gleichzeitig steigt in einem bestimmten Zeitraum der Umsatz.

Doch nicht nur zum Gedankenaustausch allein sind die Social Media Plattformen bestens geeignet. Eine Steigerungsform dieses Ansatzes ist die Kombination aus einem realen Spiel und Verbreitung von Informationen über die sozialen Netzwerke, die das Spiel unmittelbar beeinflussen oder gar erst spielbar machen.

An diesem Punkt schließt sich letztendlich auch wieder der Kreis zu den Location Based Services. Geocaching wurde lange Zeit belächelt und als Hobby für einen Haufen Freaks abgestempelt, die nichts Besseres zu tun haben, als ihre Zeit mit der Suche nach Müll zu verschwenden. Schnitzeljagd, Echtzeit-Schatzsuche im Indiana Jones Stil, „Catch me if you can“, Scotland Yard, Georätsel, ortsbasierte Gruppenspiele… , all diese Spielevarianten könnten durch die Integration von Sozialen Netzwerken in Zukunft neuen Auftrieb erhalten und diese sich sowohl für die Teilnehmer als auch für werbetreibende Unternehmen (Adgames) zu einem, im wahrsten Sinne des Wortes, grenzenlosen Spielfeld entwickeln.

Social Gaming und virtuelle Güter

Lange Zeit stand Managern in der Spieleindustrie der Angstschweiß auf der Stirn, als man sie auf das Thema Social Gaming ansprach. Eine nicht ganz unbegründete Reaktion wie sich im Laufe der Zeit herausstellen sollte. Denn in der Tat waren Social Games maßgeblich für die markanten Umsatzeinbrüche am Spielemarkt verantwortlich.

Allein das Unternehmen Zynga, das mit der Entwicklung von Farmville 80 Millionen Hobbybauern auf den Plan rief, peilt für 2011 einen Umsatz von 2 Milliarde US Dollar an. Die Einnahmen stammen überwiegend aus dem Verkauf von virtuellen Gütern, wie etwa Traktoren und Bauernhäusern, die dem Spieler helfen, sich gegenüber seinen Konkurrenten einen unmittelbaren Vorteil zu verschaffen.

Den umwerfenden Erfolg des Unternehmens Zynga aus San Francisco, das erst im Jahr 2007 von 6 Personen gegründet wurde, konnten die großen Spieleschmieden unmöglich auf sich sitzen lassen. 2011 wird das Jahr, in dem auch Blizzard, Take Two (Civilization Network), Ubisoft und Co. versuchen werden, sich auf dem Markt zu positionieren. Die Spieleindustrie stuft Social Games mittlerweile mehr als Chance als eine Gefahr ein und setzt darauf, dass die Spieler auch über das Online-Angebot hinaus an den Produkten des jeweiligen Anbieters Gefallen finden.

Ralf Wirsing, Sprecher des Unternehmens Ubisoft, das mit „Die Siedler online“ bereits im Herbst die Bea-Version des beliebten Spiele-Klassiker mit beeindruckender Grafik ins Netz gebracht hat, sieht das ähnlich: „Social Gaming hat die Neugier vieler Leute geweckt, die bis dato keinerlei Erfahrungen mit Videospielen hatten.“

Social Gamer dürfen sich im Jahr 2011 also auf viele Stunden, Tage und Wochen Online-Spielspaß freuen.

3. Group Buying

Ein Thema, das 2011 zu einem echten Renner avancieren könnte, ist eine Variante des Social Commerce: Group Buying. Vorreiter auf dem Gebiet in Deutschland ist das Unternehmen Groupon (City-Deals), dessen Angebot sich heute schon großer Beliebtheit erfreut und eine ständig wachsende Zahl an teilnehmenden Kunden und Unternehmen verzeichnen kann. Dabei ist die Philosophie dahinter eigentlich eine alt bekannte: Je mehr Käufer sich für ein Produkt finden lassen, desto weiter sinkt der Preis – Einkaufsverbände in virtueller Form.
Während Groupon derzeit noch die eigene Plattform nutzt und der Facebook Seite lediglich die Multiplikatorenrolle mit einigen zusätzlichen Specials zukommen lässt, beginnen die ersten namhaften Firmen bereits mit Erfolg, Group Buying Aktionen direkt in Facebook zu integrieren. So findet man auf der Facebook Page von Walmart eine eigene Rubrik “CrowdSafer“, unter der jede Woche ein besonderes Angebot zum Vorzugspreis veröffentlicht wird. Bevor die Kunden allerdings in den Genuss dieses Preisnachlasses kommen, muss die vorgegebene Zahl an „Likes“ erreicht werden.
Die Vorteile der Verankerung in Facebook liegen auf der Hand: Zum einen kann die vollständige Palette der Facebook-Funktionalitäten verwendet werden, zum anderen stehen 500 Millionen Facebook Nutzer als potentielle Kunden zur Verfügung. Hinzu kommt für die Anbieter noch das Argument des gläsernen Facebook Users. Sie sind jederzeit in der Lage, die Angaben in öffentlichen Benutzerprofilen zu analysieren, neue Trends zu erkennen und Interessensbezogene Angebote zu erstellen.

Im Bereich des Social Commerce / Group Buying sind der Kreativität und den Anwendungsmöglichkeiten also nahezu keine Grenzen gesetzt. Die Folgende Auflistung zeigt eine kleine Auswahl an Ideen und Strategien, denen man in Zukunft häufiger bei Facebook begegnen könnte:

  • Die ersten X Benutzer, denen ein Angebot gefällt, bekommen das Produkt zum Preis von X, die zweiten Y Benutzer zum Preis von Y, usw.
  • Der erste, dem ein Artikel gefällt, bekommt ihn mit X-Prozent Rabatt
  • “Facebook Happy Hour“: Zwischen Y.00Uhr und Y.00 Uhr bekommen alle Fans einen Artikel zum Preis von Z
  • Geschlechtsspezifische Angebote: Alle Frauen/Männer, denen ein Angebot gefällt, bekommen den Artikel zum Preis von X
  • Ortsspezifische Angebote: Alle Kunden aus dem Ort X, denen ein Angebot gefällt, bekommen das Produkt zum Preis von Y
  • Kleingruppen Angebote: Gefällt dir und X deiner Facebook-Freunde das Angebot, so erhält die Gruppe es zum Preis von Y
  • Alle Personen, die in ihrem Profil unter Interessen X angegeben haben, erhalten einen Artikel zum Preis von Y.

Das Kürzel HDR steht in Bezug auf die digitale Photographie für  „High Dynamic Range“, was so viel bedeutet wie erhöhter Kontrastumfang.  Ein HDR-Bild zeichnet sich gegenüber herkömmlichen Aufnahmen dadurch aus, dass innerhalb des Bildes feinste Strukturen und Details sowohl in den Schatten-  als auch in den Lichtbereichen erhalten bleiben.  

Fotoserie – Bamberg in HDR-Bildern

Bamberg in HDR-Bilder

Vorgehensweise

HDR-Bilder bestechen meist durch eindrucksvolle Farben und Kontraste. Doch wie erreicht man eine derartige Vielfalt? Das Prinzip ist so einfach wie genial: Ein „echtes“ HDR-Bild wird nicht aus einer einzigen Aufnahme, sondern aus einer  Serie von mindestens drei  Bildern erzeugt. Jedes dieser Bilder wird dabei mit einer unterschiedlichen Belichtungszeit aufgenommen und enthält exakt den gleichen Bildausschnitt.  

Mit Hilfe von geeigneter Bildbearbeitungssoftware werden die einzelnen Aufnahmen dann zu einer HDR-Datei zusammengeführt. In diesem entscheidenden Schritt wird der Farbtiefe eines  Bildes, die bei herkömmlichen Spiegelreflexkameras im RAW-Datenformat maximal 14bit pro RGB-Farbkanal beträgt (16384 Farben pro Kanal), auf 32bit erweitert.

Wer anschließend das Ergebnis dieser Konvertierung betrachtet wird zunächst ziemlich enttäuscht sein und sich zu Recht fragen: wo ist denn nun dieser versprochene HDR-Look geblieben?  Die verblüffende Antwort: Er ist eigentlich da, man sieht Ihn nur nicht. Standardmonitore und Drucker können derzeit leider nur 8bit (max. 16bit) darstellen. Bei  „HDR-Bildern“, wie sie im Netz und in der obigen Galerie zu sehen sind, handelt es sich somit nicht um „echte HDR-Bilder“ , sondern der HDR-Effekt wird lediglich durch das anschließende Tone Mapping der jeweiligen Software simuliert. Dabei wird die Farbtiefe von 32bit wieder auf die eines normalen Bildes (8bit) reduziert.   

Ausrüstung / Fotoserie

Für die Erstellung einer Fotoserie ist eine digitale (Spiegelreflex-) Kamera mit  einstellbaren Belichtungszeiten notwendig. Zudem ist die Verwendung eines Stativs bei den Aufnahmen dringend anzuraten, da kleinste Bewegungen eine Veränderung des Bildausschnittes zur Folge haben. Diese Abweichungen führen bei der Zusammenführung in das HDR Format zu Unschärfe und unschönen Schlieren. Um die Kameraschwankungen so gering wie möglich ist zudem ein Selbst- bzw. Fernauslöser ist zu empfehlen.

Auch bei der Auswahl der Szenerie selbst ist darauf zu achten, dass das Motiv sich möglichst bewegungslos verhält.  Personen, Tiere, Straßen etc. sind für eine Fotoserie daher nur bedingt als Motiv geeignet, aber auch der Wind kann bei Außenaufnahmen ein großes Hindernis darstellen.

Welche Belichtungszeiten bzw. wie viele Einzelaufnahmen für eine Serie notwendig sind, hängt stark von den gegebenen Lichtverhältnissen ab.  In der Regel sind zwei unter-, zwei  über- und ein normalbelichtetes Bild ausreichend. Der Abstand zwischen den einzelnen Belichtungszeiten sollte etwa 2 Stufen betragen.

Weitere Einstellungen, um Veränderungen im Bild zu vermeiden:

  • feste Blendenzahl
  • fester Weißabgleich
  • manueller Fokus

Software

Weiterführende Links und Tutorials

Was man in 10 Minuten alles erreichen kann, das hat schon Ede Stoiber in seiner legendären Transrapid-Rede verweifelt versucht, dem Zuhörer verständlich zu machen. In 10 Minuten kann man im Gegensatz dazu aber auch etwas sehr produktives anstellen…

Das Problem

Vielleicht kommt Euch die folgende Situation, zumindest in ähnlicher Form, bekannt vor: Ihr sitzt gerade an einem Typo3-Projekt, habt die Nachrichtenerweiterung tt_news installiert und konfiguriert und bei der Erstellung des Templates fällt Euch auf, dass nicht ausreichend Marker zur Verfügung stehen bzw. die vorhanden Funktionen einfach nicht genügen, um die Vorlage nach Euren individuellen Vorstellungen anzupassen.

Dieser Artikel soll demonstrieren, wie Ihr in rund 10 min einen zusätzlichen Marker (in diesem Fall für einen Ansprechpartner einer Nachricht) inkl. des passenden Eingabefeldes im Typo3 Backend erstellen und somit für mehr Flexibilität in der Arbeit mit tt_news sorgen könnt. Wer Typo3, mit seinen auf den ersten Blick verworrenen Strukturen, als programmiertechnisches Hexenwerk betrachtet, dem sei gesagt: Neue Marker für tt_news anzulegen ist halb so wild.

An dieser Stelle sei noch erwähnt, dass es auch mit Hilfe von hooks und einer eigenen Erweiterung für tt_news möglich ist, neue Marker anzulegen. Viele Wege führen eben nach Rom… diese Beschreibung soll jedoch ein möglichst effizientes Vorgehen aufzeigen und richtet sich v.a. an Typo3- Anwender und User, die sich nicht täglich mit der Programmierung rund um Typo3 befassen.

Die Lösung

0. Sicherung der Quelldateien

Bevor Ihr Euch voller Tatendrang in die Erweiterung stürzt, sichert Euch zunächst bitte die folgenden Orginaldateien, die sich in der Verzeichnisstruktur von tt_news (typo3conf/ext/tt_news/…) befinden:

  • tca.php
  • pi/class.tx_ttnews.php
  • res/tt_news_v3_template.php
  • falls benötigt locallang_tca.xml

1. Datenbanktabelle erweitern

Um die im Backend eingegebenen Ansprechpartner zu speichern, benötigen wir zunächst ein zusätzliches Feld in der Datenbanktabelle tt_news. Mit Hilfe des Datenbankadministrationstool phpMyAdmin fügen wir an das Ende der Tabelle ein neues Feld mit dem Namen ‚Ansprechpartner‘.

Wichtig ist bei diesem Schritt die korrekte Deklaration des Feldes. Da es sich bei einem Ansprechpartners zweifelsohne um Wörter, also eine Zeichenkette, handeln wird, wählen wir für das Feld den Datentypen VARCHAR aus. MySQL setzt dabei die Angabe der maximalen Länge des Strings voraus. 128 Zeichen sollten für den Vor- und Zunamen hierbei ausreichen.

Falls Ihr mehr Infos zu den  MySQL-Datentypen benötigt oder nicht schlüssig seid, welcher für Euer Feld der Passende ist, dem empfehle ich einen Blick ins übersichtliche Manual von MySQL.

2. Anpassung des Backends (ext/tt_news/tca.php)

Nachdem wir mit dem Anlegen des Datenbankfeldes die notwendige Infrastruktur geschaffen haben, geht es in diesem Schritt nun darum, das Eingabefeld im Backend von Typo3 zu erzeugen und dafür zu sorgen, dass die Daten auch im dafür vorgesehenen Feld der Datenbank gespeichert werden.

Die Datei tca.php (Table Configuration Array) ist für die Anzeige der Formularelemente im Backend sowie für das korrekte Ablegen der Eingaben in der Datenbanktabelle verantwortlich. Drei kleine Ergänzungen im Code sind hier nötig:

PHP-Code (Zeile 25):

$TCA['tt_news'] = Array (
	'ctrl' => $TCA['tt_news']['ctrl'],
	'interface' => Array (
		'showRecordFieldList' => 'title,hidden,datetime,starttime,
                archivedate,category,author,author_email,short,image,
                imagecaption,links,related,news_files,Ansprechpartner'
	),


Das Array $TCA['tt_news'], das für die komplette Konfiguration der Backendanzeige verantwortlich ist, beinhaltet eine Reihe von weiteren Unterarrays. Eines davon (<em>'interface' =&gt; Array...</em>) hält für Typo3 die Informationen bereit, welche Eingabefelder auf der Oberfläche geladen werden.  In der Liste (<em>'showRecordFieldList' =&gt; '...'</em>) fügen wir das Feld <em>Ansprechpartner</em> hinzu, welches wir im folgenden Schritt genauer spezifizieren:

PHP-Code (Zeile 150):

'no_auto_pb' => Array (
			'l10n_mode' => 'mergeIfNotBlank',
			'exclude' => 1,
			'label' => 'LLL:EXT:tt_news/locallang_tca.xml:tt_news.no_auto_pb',
			'config' => Array (
				'type' => 'check'
			)
		),
		'short' => Array (
			'exclude' => 1,
			'label' => 'LLL:EXT:lang/locallang_general.php:LGL.subheader',
			'l10n_mode' => $l10n_mode,
			'config' => Array (
				'type' => 'text',
				'cols' => '40',
				'rows' => '3'
			)
		),
               'Ansprechpartner' => Array ( 'label' => 'Wer ist der Ansprechpartner?', 'config' => Array ( 'type' => 'input', 'size' => '50', 'max' => '128' ) ),

Wie die anderen Eingabefelder benötigt auch unser neues Formularelement ein eigenes Konfigurationsarray, in dem der Typ, das zugehörige Label etc. festgelegt werden. Zwar ist die Reihenfolge dieser Konfigurationsarrays innerhalb des $tca Arrays unabhängig von der späteren Ausgabe im Backend, der Übersicht halber habe ich es jedoch direkt nach der Kurzbeschreibung eingefügt, also an der Stelle, an der es später auch im Backend angezeigt werden sein soll.

Um sicherzustellen, dass die Eingabe im richtigen Datenbankfeld gespeichert wird, ist  für den Namen des Arrays die exakt gleiche Schreibweise, wie der Name des Feldes in der Datenbank (‚Ansprechpartner‘),erforderlich. Mit Hilfe des ‚label‘-Attributs könnt Ihr die Überschrift im Backend entsprechend festlegen. Hier habt Ihr die Möglichkeit entweder direkt einen Wert einzugeben (‚Wer ist der Ansprechpartner?‘) oder einen Wert aus der locallang_tca.xml-Datei, in der die Labels in unterschiedlichen Sprachen festgelegt sind, automatisch einfügen zu lassen (‚LLL:EXT:tt_news/locallang_tca.xml:tt_news.LABELNAME‘).  Die letztere Variante ist besonders dann zu empfehlen, wenn Ihr die Mehrsprachigkeit des Backends nutzt, da das Label dann in der jeweiligen Landessprache ausgegeben wird.

Das ‚config‘ -Array ist schließlich für die eigentliche Konfiguration des Formularelements zuständig. Der ‚type‘ gibt dabei an, welcher Typ von Formularelement erzeugt werden soll (Texteingabe, mehrzeilige Textarea, Checkboxen, Radiobuttons etc.). In unserem Beispiel wird für den Ansprechpartner ein einfaches Texteingabefeld angelegt. Die Parameter ’size‘ und ‚max‘ bestimmen die Breite des Textfeldes bzw. die maximale Anzahl an zulässigen Zeichen. Wer hier tiefer einsteigen möchte und mehr Informationen zu den einzelnen Parameteren und Datentypen benötigt, findet in der Dokumentation von Typo3 eine Auflistung aller Typen3 sowie deren zulässige Attribute.

PHP-Code (Zeile 423):

'types' => Array (
		'0' => Array('showitem' =>
			'hidden, type;;;;1-1-1,title;;;;2-2-2,short,Ansprechpartner,bodytext;;2;richtext:rte_transform[flag=rte_enabled|mode=ts];4-4-4,
			--div--;LLL:EXT:tt_news/locallang_tca.xml:tt_news.tabs.special, datetime;;;;2-2-2,archivedate,author;;3;; ;;;;2-2-2,
				keywords;;;;2-2-2,sys_language_uid;;1;;3-3-3,
			--div--;LLL:EXT:tt_news/locallang_tca.xml:tt_news.tabs.media, image;;;;1-1-1,imagecaption;;5;;,links;;;;2-2-2,news_files;;;;4-4-4,
			--div--;LLL:EXT:tt_news/locallang_tca.xml:tt_news.tabs.catAndRels, category;;;;3-3-3,related;;;;3-3-3,
			--div--;LLL:EXT:tt_news/locallang_tca.xml:tt_news.tabs.access, starttime,endtime,fe_group,editlock,
			--div--;LLL:EXT:tt_news/locallang_tca.xml:tt_news.tabs.extended,
			'),

Die letzte Änderung in der tca.php bezieht sich auf die Position, an der unser Eingabefeld im Backendformular ausgegeben werden soll. Mit Komma getrennt fügen wir es in der Liste ( ’showitem‘  -Array) auf der 1. Seite (‚0‘=>) hinter der Kurzbeschreibung (short) ein. Das wars auch schon.

3. Erstellen des Markers  (ext/tt_news/pi/class.tx_ttnews.php)

In der Basisklasse class.tx_ttnews.php der Erweiterung, genauer gesagt in der Funktion function getItemMarkerArray( $row, $lConf, $textRenderObj) werden nun die Marker und die Codefragmente erzeugt, die an der jeweiligen Position des Markers in den HTML Code integriert werden sollen. Alle Marker der tt_news Extension werden in einem assoziativen Markerarray $markerArray[] zwischengespeichert und mit dem jeweiligen Wert versehen.

Mit $markerArray[‚###ANSPRECHPARTNER###‘]=$row[‚Ansprechpartner‘] erstellen wir einen neuen Marker ###ANSPRECHPARTNER### und weisen diesem den Wert aus der Datenbank zu:

PHP-Code:

function getItemMarkerArray($row,...){
...
$markerArray['###ANSPRECHPARTNER###'] = $row['Ansprechpartner'];
...
}

 

Bei dem an die Funktion getItemMarkerArray() übergeben $row-Array handelt es sich um einen kompletten Datensatz aus der Tabelle tt_news der Datenbank. Um an den gespeicherten Wert des Ansprechpartners zu gelangen, verwenden wir die assoziative Schreibweise $row[‚Ansprechpartner‘].

4. Verwendung des Markers im Template  (ext/tt_news/res/tt_news_v3_template.html)

Wie auch die Standardmarker  von tt_news können auch die Hinzugefügten mit der entsprechenden Schreibweise (###MARKER###) direkt im Template verwendet werden. Unser Ansprechpartner für eine Nachricht lässt sich somit über ###ANSPRECHPARTNER###  ins Template einfügen.

5. Unbedingt beachten !!!

Bei einem Update von tt_news werden Eure modfizierten Dateien mit den Codeänderungen automatisch überschrieben und müssen somit nach dem Updatevorgang erneut hinzugefügt werden.  Es ist daher dringend zu empfehlen, die angepassten Dateien zu sichern und diese mit einem kurzen Kommentar über die vorgenommenen Änderungen zu versehen. Die Datenbankstrukturen (die hinzugefügten Felder und die bestehenden Einträge) bleiben bei einem Update von tt_news in der Regel erhalten.

Design und Analyse

Beim Design von Sportler/-innen Webseiten können im Allgemeinen zwei unterschiedliche Strategien beobachtet werden: Zum einen steht die Sportart im Vordergrund, die die Profisportler ausüben. Oft werden charakteristische Farben, Elemente, Fotos, populäre Assoziationen und nicht zuletzt die Eigenschaften einer Sportart gewählt, um den Besucher auf den ersten Blick zu verdeutlichen, welchen Sport ein Athlet ausübt.

Hervorragend lässt sich ist dies am Webauftritt von Julius Brink und Jonas Reckermann nachvollziehen: Denkt man beispielsweise an Beachvolleyball, so kommt einem natürlich zuerst Sonne, ein Strand mit Palmen, ein strahlend blauer Himmel und ein türkisfarbenes Meer in den Sinn. Zwar werden viele Beachvolleyballturniere heutzutage gar nicht mehr an derartigen Bilderbuchstränden ausgetragen, aber genau diese vorurteilsbehafteten Vorstellungen werden vom Designer der Webseite aufgegriffen: Dem Besucher, der die beiden Sportler ev. vom Namen oder vom Aussehen her nicht kennt, wird dadurch auf den ersten Blick und unmissverständlich vermittelt, dass es hier um zwei Beachvolleyballer handelt.

Interessant sind auf dieser Webseite auch die konsequent eingestreuten Grunge Elemente (Farbkleckse, Schrift, Anordnung). Grunge, was übersetzt so viel wie Schmutz bedeutet, ist ein Webdesigntrend, der auf gerade Kanten, klare Formen und Strukturen verzichtet und auf diese Art versucht, dem Mainstream entgegenzuwirken. Genau diese Eigenschaften treffen im übertragenen Sinn auch auf die Sportart Beachvolleyball zu: Sie ist als Trendsportart einzuordnen, die sich v.a. bei Jugendlichen größter Beliebtheit erfreut. Gespielt wird sie, im Gegensatz zum fast schon bieder wirkenden Hallenvolleyball, von der breiten Masse meist in Schwimmbädern, an Seen oder am Strand, auf unebenem Sand, ohne klare oder nur mit selbst bestimmten Spielfeldbegrenzungen und Regeln, oft mit lauter Musik usw.. Von diesem Standpunkt aus betrachtet ist die Verwendung von Grunge Elementen nachvollziehbar und eine logische Wahl.

Ein zweiter Ansatz beim Design von Sportler/-innen Webseiten konzentriert sich auf die reine Außendarstellung der Person. Bestes Beispiel hierfür sind die Webauftritte von David Beckham oder Serena Williams, bei denen auf der Einstiegsseite kaum Elemente aus den Bereichen Fußball bzw. Tennis zu finden sind. Vielmehr steht die Person im Vordergrund und es dominiert ein elegant-lässiger Charakter. Da beide als zweites, manche meinen als erstes, Standbein auch in der Modebranche bzw. als Model Fuß gefasst haben, ist dies auch nicht allzu verwunderlich.

Aus technischer Sicht stehen Flashinhalte bei den Webauftritten der Athleten immer noch hoch im Kurs. Zum einen lassen sich persönliche Videos, die Einblicke in das Privatleben des Stars liefern sollen und so die Distanz zum Fan verringern sollen, und Erfolgsvideos einbinden. Andererseits bietet Flash die Möglichkeit, die Dynamik des jeweiligen Sports in den Animationen widerzuspiegeln.

Zielgruppe

Zwar hängt die Hauptzielgruppe von Sportler/-innen Webseiten stark von der jeweiligen Sportart bzw. dem Athleten selbst ab, allgemein betrachtet bewegt sie sich aber in etwa im Bereich zwischen 12-35 Jahren. Dies liegt einerseits darin begründet, dass viele Athleten gerade von Jugendlichen als Idol angesehen werden. Daher werden auf vielen Seiten diverse Möglichkeiten angeboten, um mit dem Sportler in Kontakt zu treten: Sei es durch einen Gästebucheintrag, eine persönliche Email oder durch Autogramm- und Fanpostanschriften. Auch das Tagebuch des Athleten ist ein sehr beliebtes und häufig verwendetes Mittel, um den Kontakt mit den Fans von Seiten des Sportlers aus zu festigen.

Für Fans im jungen Erwachsenenalter hingegen, für die der Sportler nicht mehr die Rolle des Idols oder Vorbilds einnimmt, werden auf vielen Webseiten Onlineshops angeboten, über die auf die Zielgruppe zugeschnittene Fanartikel, Collectionen oder Accessoires erworben werden können, wodurch sich die Popularität des Sportlers aus wirtschaftlicher Sicht weiter steigern lässt.

Nun aber genug der Worte, hier kommen 50, teilweise beeindruckende, Webseiten:

Als Roundup zum Thema Webseiten-Wetter möchte ich Euch in diesem Artikel nun zeigen, wie sich eine Wetterkarte für die Region Oberfranken mit 6 eingetragenen Städten (Bamberg, Bayreuth, Forchheim, Coburg, Kronach und Hof) und eine Vorhersagetabelle für einen Standort (Bamberg) mit Hilfe des wetter.com-Api erstellen lässt. Hierfür wird lediglich ein kostenloses wetter.com-Account sowie PHP in einer Version 5.x benötigt, da für das Auslesen der Wetterdaten die simple_xml – Bibliothek  verwendet wird.

1. Vorbereitungen

Registrierung und Anlegen eines Projekts bei wetter.com

Um das wetter.com – Api (openweather-Schnittstelle) nutzen zu können, müsst Ihr Euch zunächst auf wetter.com kostenlos registrieren. Nach erfolgreicher Anmeldung legt Ihr im Api-Center (der Link versteckt sich in der Fußleiste von wetter.com)  unter Projektverwaltung ein neues Projekt an und bestätigt die Nutzungsbedingungen. Bitte beachtet  in diesem Zusammenhang, dass die Anzahl der maximalen Zugriffe auf die openweather-Schnittstelle derzeit auf 10000 pro Monat und pro Projekt beschränkt ist und das wetter.com-Logo, das Ihr im Api-Bereich unter Downloads findet, zwingend in den Quelltext einzubinden ist.

Unter dem Punkt „Übersicht“  findet Ihr nun den eindeutigen API Key, der im weiteren Verlauf für die Abfrage der Wetterdaten benötigt wird. Zudem ist die URL der Webseite anzugeben, unter der Ihr die Wetterkarte/Wetterdaten veröffentlichen wollt.

Mit  Hilfe der Liste „Felder der Ortssuche“ unter Sucheinstellungen können die Parameter festgelegt werden, die für die eindeutige Identifikation des Standorts bei der Abfrage der Wetterdaten dienen sollen. In der Regel sind die Werte „Suche nach City-Code“, „Suche nach PLZ“ etc. bereits voreingestellt.

Die Optionen, die sich unter dem Menüpunkt  „Vorhersageeinstellungen“ befinden, legen schließlich fest, welche Daten von wetter.com zurückgeliefert werden sollen.  Zuerst werdet Ihr nach der Anzahl der Vorhersagetage gefragt. In der kostenlosen Version stehen maximal 3 Vorhersagetage (Wetter von heute, morgen und übermorgen) zur Verfügung.

Nun könnt Ihr per Drag and Drop die Parameter auswählen, die für Eure Wetterkarte benötigt werden. Die wichtigsten hierbei sind sicherlich die Minimal- und Maximaltemperatur (tn,tx) und der Code für den Wetterzustand (w). Da ich in diesem Beispiel eine möglichst detaillierte Vorhersage erreichen möchte, habe ich zusätzlich noch die Angaben für den Wind (wd,ws) und die Niederschlagswahrscheinlichkeit (pc) selektiert.

Wetter.com City-Code ermitteln

Der City-Code des gewünschten Standorts lässt sich am einfachsten über das Suchfeld auf der Startseite von wetter.com ermitteln, wo Ihr die PLZ oder den Ortsnamen des gewünschten Ortes eintragt. Ihr werdet nach dem Absenden auf die URL für die Stadt weitergeleitet, an deren Ende sich der City-Code befindet. Der 9-stellige Code hat für Orte in Deutschland stets die Form:  DExxxxxxx. Für dieses Beispiel ergibt sich somit :

Bamberg (DE0000772)
Bayreuth (DE0000856)
Forchheim (DE0002952)
Coburg (DE0001794)
Kronach (DE0005784)
Hof (DE0004666)

Benötigtes Material

-Karte: Frei nutzbares und noch dazu optisch ansprechendes Kartenmaterial ist im Web nicht gerade einfach zu finden. Falls Ihr die Wetterkarte selbst erstellen wollt, sucht in der Google Bilder-Suche nach einer möglichst einfarbigen Karte der Region. Öffnet diese in Eurem Bildbearbeitungsprogramm und erstellt eine Auswahl um die Region. Skaliert  die Auswahl nun auf die gewünschte Größe und füllt diese nach Belieben. Mit einem leichten Schatten bringt Ihr, insbesondere bei hellen Hintergründen, etwas mehr Tiefe ins Spiel. Speichert die Karte nun entweder als PNG mit transparentem Hintergrund oder als JPG mit  der selben Hintergrundfarbe, wie Ihr Sie in Eurem Seitenlayout verwendet, ab.

Wetterkarte

-Icons: Im Api-Bereich findet Ihr unter Downloads das Wetter- und Wind Icon-Set von wetter.com.

Wettericons

Der Dateiname der Icons setzt sich dabei wiefolgt zusammen:

d_<erste Ziffer des Wetterzustandcodes>_b.png   (Tagicons)
n_<erste Ziffer des Wetterzustandcodes>_b.png   (Nachticons)
<Windrichtung>.png (Windicons)

Natürlich könnt Ihr jederzeit eigene Wetter-Icons verwenden. Es empfiehlt sich jedoch, die von wetter.com vorgeschlagene Namenskonvention einzuhalten.

2. automatisierte Wetterkarte

Zu Beginn des Codes wird zunächst die CSS-Datei (styles.css) festgelegt, die unsere Wetterkarte und Vorhersagetabelle formatiert.

HTML:

<link href="css/styles.css" rel="stylesheet" type="text/css" />

Bevor wir die Wetterdaten von wetter.com abfragen, brauchen wir zunächst einen Div-Container mit der Wetterkarte als Hintergrundbild. In diesen werden im weiteren Verlauf die Divs für die sechs Städte eingefügt.  Höhe und Breite entsprechen dabei den Maßen des Karten-Images.

HTML:

<div class="wetterkarte">Hier kommen die PHP-generierten Staedteboxen rein</div>

CSS:

.wetterkarte{
	position:relative;
	width:400px;
	height:400px;
	background-image:url(../img/Wetterkarte.png);
	background-repeat:no-repeat;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:11px;    
}

Der Container wurde im Beispiel relativ positioniert, da sich die Städteboxen später absolut an diesem orientieren sollen. Für jede dieser Städte habe ich eine CSS Klasse angelegt, die u.a. deren absolute Position und Breite definiert. Die Klassennamen  sind bewusst gewählt und sollten eine fortlaufende Zahl enthalten. Der Grund hierfür wird später ersichtlich. Die Nummerierung muss allerdings zwingend der Reihenfolge der Städte im Array entsprechen. Da die Boxen über der Wetterkarte angezeigt werden sollen, erhalten diese zusätzlich den z-index 2. Die weiteren CSS-Klassen dienen der Formatierung der Städteboxen.

CSS:

.city_0{ /*Bamberg*/
	width:100px;
	position:absolute;
	top:190px;
	left:55px;
	z-index:3;
	text-align:center;
	}

.city_1{ /*Bayreuth*/
	width:100px;
	position:absolute;
	top:181px;
	left:213px;
	z-index:3;
	text-align:center;
	}

.city_2{ /*Forchheim*/
	width:100px;
	position:absolute;
	top:250px;
	left:113px;
	z-index:3;
	text-align:center;
	}

.city_3{ /*Coburg*/
	width:100px;
	position:absolute;
	top:75px;
	left:80px;
	z-index:3;
	text-align:center;
	}

.city_4{ /*Kronach*/
	width:100px;
	position:absolute;
	top:90px;
	left:177px;
	z-index:3;
	text-align:center;
	}

.city_5{ /*Hof*/
	width:100px;
	position:absolute;
	top:55px;
	left:275px;
	z-index:3;
	text-align:center;
	}

.cityname{
margin:0;
padding:0;
margin-top:-10px;
text-align:center;
color:#FFFFFF;
	}	

.temperature{ 
text-align:center;
margin:0;
padding:0;	
color:#FFFFFF;
	}

.temp_min{
	color:#06C;
	font-size:13px;
	}

.temp_max{
	color:#C00;
	font-size:13px;
}

Kommen wir nun zum Teil, der unsere Wetterkarte mit Informationen füllt, dem PHP-Skript. Damit wir später jedem City-Code den Namen der Stadt wieder eindeutig zuordnen können, legen wir für die Codes und für die Städtenamen jeweils ein Array an und füllen diese in der gleichen Reihenfolge. Anschließend ermitteln wir deren Länge.

PHP:

$citycodes[0]="DE0000772"; //Bamberg
$cityname[0]="Bamberg";

$citycodes[1]="DE0000856"; //Bayreuth
$cityname[1]="Bayreuth";

$citycodes[2]="DE0002952"; //Forchheim
$cityname[2]="Forchheim";

$citycodes[3]="DE0001794"; //Coburg
$cityname[3]="Coburg";

$citycodes[4]="DE0005784"; //Kronach
$cityname[4]="Kronach";

$citycodes[5]="DE0004666"; //Hof
$cityname[5]="Hof";

$length=count($citycodes);
$tag=0;

Mit Hilfe der Variable $tag wird der Vorhersagetag festgelegt, für den die auf der Karte angezeigten Wetterdaten gelten sollen. In einer for-Schleife sollen nun für jeden Ort im Array zunächst die Wetterdaten abgefragt und im weiteren Verlauf die Städtebox erzeugt werden.

PHP:

for($i=0;$i<$length;$i++){
	$sSearchUrl="";
	$sSearchUrl     = "https://api.wetter.com/forecast/weather";
	$sProjectName   = "wetterartikel";
	$sApiKey = "74c7845b29a513b86e8bda764398be67";
	$sChecksum  = md5($sProjectName . $sApiKey .  $citycodes[$i]);
	$sSearchUrl .= "/city/" . $citycodes[$i];
	$sSearchUrl .= "/project/" . $sProjectName;
	$sSearchUrl .= "/cs/" . $sChecksum;	
...
}

Das Format einer gültigen Suchanfrage lautet:

https://api.wetter.com/forecast/weather/city/<citycode>/project/<projektname>/cs/<checksumme>

Entsprechend dieser Vorlage wird der URL-String $sSearchUrl mit den in der Projektverwaltung von wetter.com angegebenen Werten schrittweise zusammengesetzt. Die Checksumme egibt sich dabei aus dem MD5-Hashwert der Zeichenkette, die sich wiederum aus dem angegeben Projektnamen, dem von wetter.com zugeteilten Api-Key und dem City-Code zusammensetzt. Um den URL-String zu testen, gebt Ihr diesen mit einem „echo“- Befehl aus und kopiert die URL anschließend in die Adresszeile des Browsers. Bei korrekter Zusammensetzung sollte der HTTP-Request mit der XML-Struktur der Wettervorhersage für den gewünschten Standort beantwortet und diese im Browser wie folgt angezeigt werden:

XML:

<city>
<city_code>DE0000772</city_code>
<name>Bamberg</name>
<post_code>96047</post_code>
   <credit>
     <!--
     In order to use the free weather data from wetter.com you HAVE TO display at least two out of three of the following possibilities: text, link, logo
      -->
     <text>Powered by wetter.com</text>
     <link>https://www.wetter.com</link>
     <logo> Download at https://www.wetter.com/api/downloads/#logos</logo>
   </credit>
   <forecast>
      <date value="2010-04-24">
        <du>1272081600</du>
        <d>1272088800</d>
        <dhu>2010-04-24 04:00</dhu>
        <dhl>2010-04-24 06:00</dhl>
        <p>24</p>
        <w>10</w>
        <pc>0</pc>
        <wd>90</wd>
        <ws>9.3</ws>
          <time value="06:00">
            <du>1272081600</du>
            <d>1272088800</d>
            <dhu>2010-04-24 04:00</dhu>
            <dhl>2010-04-24 06:00</dhl>
            <p>5</p>
            <w>0</w>
            <pc>0</pc>
            <tn>6</tn>
            <tx>14</tx>
            <wd>90</wd>
            <ws>7.4</ws>
            <w_txt>sonnig</w_txt>
            <wd_txt>O</wd_txt>
          </time>
          ...

Nachdem Ihr den String erfolgreich getestet habt, ist es nun an der Zeit den HTTP Request mittels PHP automatisiert an wetter.com zu senden und die Wetterdaten abzufragen:

PHP:

$api = simplexml_load_string(file_get_contents($sSearchUrl));

Die Funktion file_get_contents sendet die Anfrage und erzeugt aus der Antwort des wetter.com-Servers eine Zeichenkette. Dieser String wird anschließend in ein simple_XML- Objekt umgewandelt. Aus diesem lassen sich nun die Parameter für den heutigen Tag auslesen:

PHP:

	$wetter=$api->forecast->date[$tag]->w;
	$wetter_symbol=substr($wetter,0,1);
        $wetter_text= $api->forecast->date[$tag]->w_txt;

	/*Maximumtemperatur/Minimumtemperatur ermitteln*/
	$tmax=-100;
	$tmin=100;

	for ($a=0;$a<4;$a++){
		$tmax_curr=(int)$api->forecast->date[$tag]->time[$a]->tx;
		$tmin_curr=(int)$api->forecast->date[$tag]->time[$a]->tn;

		if($tmax_curr>=$tmax){
			$tmax=$tmax_curr;
		}
		if($tmin_curr<=$tmin)
		{
			$tmin=$tmin_curr;
		}
	}

Beginnen wir mit dem Wetter für den heutigen Tag. Alle Parameter, die sich auf den gesamten heutigen Tag und nicht auf eine Vorhersage zu einer bestimmten Uhrzeit beziehen, befinden sich unterhalb des ersten <date value=“…“> Knotenpunktes außerhalb der <time >-Angaben. Das Wettersymbol verbirgt sich dabei im Parameter w, und zwar genau in der ersten Stelle des Wertes. Mit Hilfe der XML Notation (->) hangeln wir uns vom Basisknoten <city> aus über <forecast>,  dem ersten darin aufgeführten <date>-Knoten (date[0]) hin zum Knoten w und legen den Wert in $wetter ab. Danach verwenden wir die substr – Funktion, um die Zeichenkette („10“)  in zwei Teilstrings („1″|“0“)  zu zerlegen und die erste Stelle („1“)  in der Variable $wetter_symbol („1“)  zu speichern. Zusätzlich lesen wir noch den Zustand des Wetters in Textform (w_txt) aus. Fertig.

Nun wird es ein klein wenig komplizierter, es folgt die Ermittlung der minimalen bzw. maximalen Tagestemperatur. Da von wetter.com keine Höchst-/Tiefsttemperatur für den gesamten Tag geliefert wird, müssen wir aus den Daten der vier Zeitpunkte (06:00 ,11:00, 17:00, und 23:00 UTC) die höchste(tx) bzw. niedrigste Temperatur(tn) ermitteln. In einer for-Schleife lesen wir deshalb die vorhergesagte Maximal-/Minimaltemperatur zu den Zeitpunkten time[0], time [1], time[2], time[3] aus. Da beim Zugriff auf XML-Knoten immer Zeichenketten zurückgeliefert werden, wandeln wir die gewonnenen Temperaturen in einen ganzzahligen Wert (integer) um und legen sie jeweils in $tmax_curr/ $tmin_curr ab.

Wir vergleichen diese nun mit zwei vorher festgelegten Hilfsparametern$tmax=-100,$tmin=100, die die bisherige maximale / minimale Tagestemperatur bilden:

Die aus dem ersten Zeitknoten (06:00 UTC) ermittelte Tageshöchsttemperatur wird mit 100%iger Sicherheit höher sein als -100°C. Die -100°C werden daher durch die ausgelesene Maximaltemperatur ersetzt. Im nächsten Schritt wird die Maximaltemperatur von 09:00 UTC ermittelt. Ist diese höher als die bisherige Tages-Maximaltemperatur,  wird $tmax wiederum durch den neuen Wert ersetzt. Ist diese kleiner, bleibt $tmax unverändert. Dies wiederholt sich für die Zeitpunkte 17:00, 23:00 zwei weitere Male.

Die gleiche Prozedur wird auch für die Tages-Tiefsttemperatur $tmin durchgeführt, allerdings mit umgekehrten Vorzeichen. Am Ende befinden sich in $tmax und $tmin die gewünschten Werte.

Nachdem wir die Wetterdaten nun vorliegen haben, können wir die Städtebox zusammensetzen und in den Wetterkartencontainer einfügen:

PHP:

echo 

"<div class=\"city_".$i."\"> 
   <div>
     <img title=\"".$wetter_text."\" src=\"img/icons/d_".$wetter_symbol."_b.png\"/>
   </div>
  <div class=\"cityname\">".$cityname[$i]."</div>
  <div class=\"temperature\">
    <span class=\"temp_min\">".$tmin."</span>|<span class=\"temp_max\">".$tmax."</span>
  </div>
</div>";

Der Div-Container erhält die CSS-Klasse der entsprechenden Stadt (city_0,city_1 usw.). In diesen wird zunächst das korrespondierende Wettersymbol eingefügt. Mit der Angabe des Wettertextes im title des Images wird erreicht, dass der Wetterzustand in Textform beim Überfahren mit der Maus angezeigt wird. Schließlich folgt der Name der Stadt sowie die Ausgabe der minimalen / maximalen Tagestemperatur, Das war’s. Unsere Wetterkarte ist fertig.

3. Vorhersagetabelle für die nächsten 3 Tage

Im zweiten Teil dieses Tutorials möchte ich Euch nun zeigen, wie Ihr für einen bestimmten Ort eine Vorhersagetabelle für die nächsten Tage erstellt. Der Aufbau ist im Grunde identisch mit dem der Wetterkarte. Die Unterschiede bestehen lediglich darin, dass wir uns bei der Wettervorhersage nun auf einen Ort  konzentrieren, den Vorhersagezeitraum auf 3 Tage (heute, morgen übermorgen) erweitern und den Detailgrad der Vorschau erhöhen. Neben den zusätzlichen Parametern Niederschlagswahrscheinlichkeit, Windrichtung und Wingeschwindigkeit soll zudem das Wetter an den Vorhersagezeitpunkten (06:00, 11:00, 17:00 und 23:00 UTC)  des jeweiligen Tages angezeigt werden. Das Ganze soll in etwa so aussehen:

Für das Layout der Tabelle benötigen wir deshalb ein paar ergänzende CSS-Klassen:

CSS:

.weather_table{
	text-align:center;
        font-family:Georgia, "Times New Roman", Times, serif;
        font-size:11px;	
        color:#4a4a4a;
        background-color:#acc1ff;
	}

.weather_table tr{
	height:25px;
	}	
.weather_table tr td{
	padding-left:8px;
	padding-right:8px;
	}		
#headline{
	height:45px;
	font-weight:bold;
	}
.even{
background-color:#bccdff;
	}
.legend{
	text-align:right;
	font-weight:bold;
	}	
}

PHP:

	$sSearchUrl     = "https://api.wetter.com/forecast/weather";
        $sProjectName   = "wetterartikel";
        $sApiKey = "74c7845b29a513b86e8bda764398be67";
        $citycode="DE0000772";
        $sChecksum  = md5($sProjectName . $sApiKey .  $citycode);
        $sSearchUrl .= "/city/" . $citycode;
        $sSearchUrl .= "/project/" . $sProjectName;
        $sSearchUrl .= "/cs/" . $sChecksum; 
        $api = simplexml_load_string(file_get_contents($sSearchUrl));

Der Quelltext für die Abfrage der Wetterdaten bei wetter.com ist nahezu identisch. Diesmal brauchen wir allerdings nur den City-Code des gewünschten Standortes und kommen somit ohne die for-Schleife aus.

Auch das Auslesen der Parameter aus dem simpleXML-Objekt funktioniert nach dem selben Prinzip. Über die „->“ Schreibweise greifen wir auf die Wetterdaten für den aktuellen Tag (date[0]) zu und ermitteln an den vier Vorhersagezeitpunkten (time[0], time[1], time[2], time[3]) die minimale / maximale Tagestemperatur, die Niederschlagswahrscheinlichkeit, die Windgeschwindigkeit und die Windrichtung und legen die Daten jeweils in einer Variablen ab.

PHP:

$datum_heute= date("d.m.Y");

$wetter=$api->forecast->date[0]->time[0]->w;
$wetter_heute_frueh=substr($wetter,0,1);

$wetter=$api->forecast->date[0]->time[1]->w;
$wetter_heute_mittag=substr($wetter,0,1);

$wetter=$api->forecast->date[0]->time[2]->w;
$wetter_heute_abend=substr($wetter,0,1);

$wetter=$api->forecast->date[0]->time[3]->w;
$wetter_heute_nacht=substr($wetter,0,1);

$tmax_heute=-100;
$tmin_heute=100;

for ($a=0;$a<4;$a++){
  $tmax_curr=(int)$api->forecast->date[0]->time[$a]->tx;
  $tmin_curr=(int)$api->forecast->date[0]->time[$a]->tn;

  if($tmax_curr>=$tmax_heute){
    $tmax_heute=$tmax_curr;
  }
  if($tmin_curr< =$tmin_heute){
    $tmin_heute=$tmin_curr;
  }
}

$niederschlags_ws_heute=$api->forecast->date[0]->pc;
$wind_geschwindigkeit_heute = $api->forecast->date[0]->ws;
$wind_richtung_heute = $api->forecast->date[0]->wd_txt;

/* Parameter morgen*/
$datum_morgen = date("d.m.Y", time()+86400);
$wetter=$api->forecast->date[1]->time[0]->w;
$wetter_morgen_frueh=substr($wetter,0,1);

$wetter=$api->forecast->date[1]->time[1]->w;
$wetter_morgen_mittag=substr($wetter,0,1);

$wetter=$api->forecast->date[1]->time[2]->w;
$wetter_morgen_abend=substr($wetter,0,1);

$wetter=$api->forecast->date[1]->time[3]->w;
$wetter_morgen_nacht=substr($wetter,0,1);

$tmax_morgen=-100;
$tmin_morgen=100;
for ($a=0;$a<4;$a++){
$tmax_curr=(int)$api->forecast->date[1]->time[$a]->tx;
$tmin_curr=(int)$api->forecast->date[1]->time[$a]->tn;

if($tmax_curr>=$tmax_morgen){
$tmax_morgen=$tmax_curr;
}
if($tmin_curr< =$tmin_morgen)
{
$tmin_morgen=$tmin_curr;
}
}

$niederschlags_ws_morgen=$api->forecast->date[1]->pc;
$wind_geschwindigkeit_morgen = $api->forecast->date[1]->ws;
$wind_richtung_morgen = $api->forecast->date[1]->wd_txt;

/*Parameter uebermorgen*/
$datum_uebermorgen = date("d.m.Y", time()+172800);
$wetter=$api->forecast->date[2]->time[0]->w;
$wetter_uebermorgen_frueh=substr($wetter,0,1);

$wetter=$api->forecast->date[2]->time[1]->w;
$wetter_uebermorgen_mittag=substr($wetter,0,1);

$wetter=$api->forecast->date[2]->time[2]->w;
$wetter_uebermorgen_abend=substr($wetter,0,1);

$wetter=$api->forecast->date[2]->time[3]->w;
$wetter_uebermorgen_nacht=substr($wetter,0,1);

$tmax_uebermorgen=-100;
$tmin_uebermorgen=100;
for ($a=0;$a<4;$a++){
$tmax_curr=(int)$api->forecast->date[2]->time[$a]->tx;
$tmin_curr=(int)$api->forecast->date[2]->time[$a]->tn;

if($tmax_curr>=$tmax_uebermorgen){
$tmax_uebermorgen=$tmax_curr;
}
if($tmin_curr< =$tmin_uebermorgen)
{
$tmin_uebermorgen=$tmin_curr;
}
}
$niederschlags_ws_uebermorgen=$api->forecast->date[2]->pc;
$wind_geschwindigkeit_uebermorgen = $api->forecast->date[2]->ws;
$wind_richtung_uebermorgen = $api->forecast->date[2]->wd_txt;

Dies wiederholen wir jeweils für den morgigen (date[1]) und den übernächsten Tag (date[2]).  Mit Hilfe der PHP-Funktion date(„d.m.Y“) lässt sich das jeweilige Datum errechnen und in der Form TT.MM.JJJJ ausgeben. Um an das morgige Datum zu gelangen, besitzt die Funktion einen zweiten Parameter für die Definition eines bestimmten Zeitpunktes. Zum aktuellen Zeitpunkt time() werden also 24 (h) *60 (min) *60 (s)= 86400 Sekunden addiert date(„d.m.Y“, time()+86400), für das Datum am übernächsten Tag 172800.

Abschließend puzzlen wir die Tabelle mit den gewonnenen Wetterdaten zusammen:

PHP:

<table class="weather_table" border="0" cellspacing="0" cellpadding="0">
  <tr class="even" id="headline">
    <td></td>

    <td>heute<br />
    <?php echo $datum_heute; ?>
    </td>

    <td>morgen<br />
    <?php echo $datum_morgen; ?>
    </td>

    <td>übermorgen<br />
    <?php echo $datum_uebermorgen; ?>
    </td>
  </tr>

  <tr>
    <td class="legend">Früh:</td>
    <td>
      <img src="img/icons/d_<?php echo $wetter_heute_frueh; ?>_b.png" 
      width="73" height="63" />
    </td>

    <td>
      <img src="img/icons/d_<?php echo $wetter_morgen_frueh; ?>_b.png" 
      width="73" height="63" />
    </td>

    <td>
      <img src="img/icons/d_<?php echo $wetter_uebermorgen_frueh; ?>_b.png" alt="" 
      width="73" height="63" />
    </td>
  </tr>

  <tr class="even">
    <td class="legend">Mittags:
    </td>

    <td>
      <img src="img/icons/d_<?php echo $wetter_heute_mittag; ?>_b.png" 
      alt="" width="73" height="63" />
    </td>

    <td>
      <img src="img/icons/d_<?php echo $wetter_morgen_mittag; ?>_b.png" alt="" 
      width="73" height="63" />
    </td>

    <td>
      <img src="img/icons/d_<?php echo $wetter_uebermorgen_mittag; ?>_b.png" alt=""
      width="73" height="63" />
    </td>
  </tr>
  <tr>
    <td class="legend">Abends:</td>
    <td>
      <img src="img/icons/d_<?php echo $wetter_heute_abend; ?>_b.png" alt=""
      width="73" height="63" />
    </td>
    <td>
      <img src="img/icons/d_<?php echo $wetter_morgen_abend; ?>_b.png" alt="" 
      width="73" height="63" />
    </td>
    <td>
      <img src="img/icons/d_<?php echo $wetter_uebermorgen_abend; ?>_b.png" alt=""
      width="73" height="63" />
    </td>
  </tr>

  <tr class="even">
    <td class="legend">Nachts:</td>
    <td>
      <img src="img/icons/n_<?php echo $wetter_heute_nacht; ?>_b.png" 
      width="73" height="63" />
    </td>
    <td>
      <img src="img/icons/n_<?php echo $wetter_morgen_nacht; ?>_b.png" alt="" 
      width="73" height="63" />
    </td>

    <td>
      <img src="img/icons/n_<?php echo $wetter_uebermorgen_nacht; ?>_b.png" alt="" 
      width="73" height="63" />
    </td>
  </tr>

  <tr>
    <td class="legend">Temperatur:<br />
    (min/max)
    </td>

    <td>
      <span class="temp_min"><?php echo $tmin_heute; ?></span>|
      <span class="temp_max"><?php echo $tmax_heute; ?></span>
    </td>

    <td>
      <span class="temp_min"><?php echo $tmin_morgen; ?></span>|
      <span class="temp_max"><?php echo $tmax_morgen; ?></span></td>
    <td>
      <span class="temp_min"><?php echo $tmin_uebermorgen; ?></span>|
      <span class="temp_max"><?php echo $tmax_uebermorgen; ?></span>
    </td>
  </tr>

  <tr class="even">
    <td class="legend">Niederschlagsrisiko:</td>
    <td><?php echo $niederschlags_ws_heute;?>%</td>
    <td><?php echo $niederschlags_ws_morgen;?>%</td>
    <td><?php echo $niederschlags_ws_uebermorgen;?>%</td>
  </tr>

  <tr>
    <td class="legend">Windrichtung:</td>

    <td>
      <img src="img/icons/<?php echo $wind_richtung_heute;?>.png"
      alt="<?php echo $wind_richtung_heute;?>" 
      title="<?php echo $wind_richtung_heute;?>" width="50" height="50"/>
    </td>

    <td>
      <img src="img/icons/<?php echo $wind_richtung_morgen;?>.png" 
      alt="<?php echo $wind_richtung_morgen;?>" 
      title="<?php echo $wind_richtung_morgen;?>" width="50" height="50"/>
    </td>

    <td>
      <img src="img/icons/<?php echo $wind_richtung_uebermorgen;?>.png" 
      alt="<?php echo $wind_richtung_uebermorgen;?>" 
      title="<?php echo $wind_richtung_uebermorgen;?>" width="50" height="50"/>
    </td>
  </tr>

  <tr class="even">
    <td class="legend">Wind:</td>

    <td><?php echo $wind_geschwindigkeit_heute;?> km/h</td>

    <td><?php echo $wind_geschwindigkeit_morgen;?> km/h</td>

    <td><?php echo $wind_geschwindigkeit_uebermorgen;?> km/h</td>
  </tr>
</table>

Das war’s. Das fertige Ergebnis könnt Ihr Euch nun hier ansehen und alle Meterialien und Skripte herunterladen:

stay connected

1. WetterOnline.de –  Wetterbox

Das Einbinden der Wetterbox von WetterOnline.de ist denkbar einfach: Unter https://www.wetteronline.de/homepage/index.html steht ein entsprechender Online-Konfigurator zur Verfügung, bei dessen Verwendung lediglich die Postleitzahl bzw. der Namen des gewünschten Ortes (weltweit) einzutragen ist. Dieser generiert schon im nächsten Schritt den HTML-Code für ein iframe, das schließlich in den Quelltext der Seite eingebunden wird.

Konfiguration/Layout

Von Wetteronline werden im Online-Konfigurator einige Standard-Hintergrundfarben für die Wetterbox angeboten. Mit einem Mausklick auf eine dieser Farben wird im Quelltext nun der Parameter „BGC“ für die Background-Color am Link hinzugefügt, dessen Wert sich manuell nach Belieben an ein vorhandenes Layout anpassen lässt – zumindest auf den ersten Blick. Warum allerdings nur helle Farbtöne zur Auswahl stehen, zeigt das nachfolgende Beispiel:

     

Zum einen ist das WetterOnline-Logo im GIF-Format von so schlechter Qualität, dass die weißen Pixelfehler nur durch nahezu weiße Hintergründe retuschiert werden können, zum anderen besteht wegen des iframes keine Möglichkeit, die Schrift der Wetterbox zu formatieren. Von der Verwendung dieses Tools auf Seiten mit dunklen Hintergründen ist somit dringend abzuraten. Auch die Möglichkeit zur Änderung der iframe-Größe ist in meinen Augen sinnfrei, da lediglich der Hintergrund der Box, nicht aber der eigentliche Inhalt an die neue Größe angepasst wird. Die Frame-Rahmen lassen sich jedoch optional ein und ausblenden.

Funktionsumfang

Auch der Funktionsumfang der WetterOnline-Box überzeugt in keinster Weise: Lediglich die Wettervorhersage für den aktuellen Wochentag sowie die Tageshöchsttemperatur lässt sich direkt anzeigen. Zwar beinhaltet dieses Tool auch ein Drop-Down-Menü für weitere Parameter, doch wird man bei deren Auswahl direkt auf die Seiten von WetterOnline weitergeleitet, wodurch ein gewisses Risiko besteht, Besucher der Seite zu verlieren.

2. Wetter.de – Homepage Tool

Auch wetter.de bietet mit dem Homepage Tool eine Wetterbox, die sich durch einen Online-Konfigurator im Handumdrehen gestalten und anpassen lässt. Die Postleitzahl des gewünschten Ortes oder der Ortsname (weltweit) reicht aus, um den HTML Code, ein Flash Objekt mit diversen Parametern, zu generieren.

Konfiguration/Layout

Neben zwei unterschiedlichen Größen lässt sich auch die Hintergrundfarbe der Box per Mausklick anpassen. Dem Benutzer stehen allerdings nur 8 vordefinierte Farbwerte zur Verfügung. Da es keine Möglichkeit gibt, die Hexwerte der Farben zu manipulieren, kann die Wetterbox nicht in jedes Layout fließend integriert werden.

Dank der Wettericons, der klaren Strukturierung der Angaben und nicht zuletzt dank des Flash animierten Windmessers überzeugt das Tool vom optischen Gesichtspunkt her. Der letzte Aspekt ist allerdings, bezogen auf die Barrierefreiheit, auch als Nachteil zu sehen: Für die korrekte Anzeige ist die Installation des Flash-Plugins zwingend erforderlich, was gerade bei mobilen Endgeräten oftmals nicht gewährleistet ist.

Funktionsumfang

Zwar lässt sich auch mit dem Homepage-Tool von wetter.de nur die Vorhersage für den aktuellen Wochentag darstellen, mit der zusätzlichen Höchst- und Tiefsttemperatur, Windrichtung und Windgeschwindigkeit verfügt dieses jedoch über einen deutlich höheren Informationsgehalt als das zuvor beschriebene Wetter-Tool von WetterOnline.de.

3. Wetter.com – Homepagewetter

Die zweifelsohne bekannteste Webseite rund ums Thema Wetter ist wetter.com, die mit dem Homepagewetter-Button ebenfalls ein Wettertool zur Verfügung stellt. Um die angebotenen Services nutzen zu können, muss man sich, anders als bei den übrigen Anbietern, zunächst unter https://www.wetter.com/community/mein_wettercom/anmelden/ kostenlos registrieren. Zudem muss vor der Erstellung der Homepagewetter-Buttons die URL angegeben werden, unter der die Wetterbanner später eingebunden werden, da die Boxen ausschließlich auf den Webseiten des jeweiligen Nutzers verwendet werden dürfen.

Konfiguration/Layout

Bei den Homepagewetter-Buttons von wetter.com handelt es sich um das einzige Tool, das nahezu vollständig an ein individuelles Layout angepasst werden kann. Neben Hintergrund- und Schriftfarbe lassen sich jeweils auch drei verschieden Schriftarten (Verdana, Times New Roman, Arial) und Schriftgrößen (10px, 11px, 12px) auswählen. Auch sind sowohl die Größe der Box als auch die des Wettericons optional veränderbar.

Da alle erstellten Wetterboxen unter dem jeweiligen Account abgespeichert werden, besteht die Möglichkeit, diese auch nachträglich noch zu bearbeiten. Das Grundlayout der Homepagewetter-Buttons ist zwar übersichtlich und gut strukturiert, insgesamt aber doch eher schlicht gehalten. Ein Feature, das keine der anderen Wetterboxen aufweisen kann, ist die Mehrsprachigkeit: Neben Deutscher und Englischer Sprache stehen zusätzlich auch Französisch, Italienisch, Spanisch und Ungarisch zur Auswahl.

Funktionsumfang

Eine weitere Besonderheit dieses Tools ist die Tatsache, dass der Benutzer in der Lage ist, die Anzeige von drei verschiedenen Parametern selbst zusammenzustellen. Verfügbar sind u.a. das aktuelle Wetter, Höchst-und Tiefsttemperatur in Grad Celsius oder Grad Fahrenheit, Windgeschwindigkeit, Windrichtung, Niederschlagswahrscheinlichkeit, Luftdruck etc.. Die Wetterdaten lassen sich allerdings nur für einen einzigen (bis zu 3 Tage späteren) Wochentag anzeigen.

4.Wetter.info – Wetterbox

Ein Tool, das sowohl das Herz eines jeden Hobbymeteorologen als auch das von so manchem Webdesigners höher schlagen lässt, bietet wetter.info. Den Konfigurator hierzu findet man unter https://www.wetter.info/wetterbox/17957368. In drei Schritten wird der Benutzer durch den Anpassungsprozess des Moduls geleitet, beginnend mit der Auswahl des gewünschten Ortes über die individuelle Anpassung bishin zur abschließenden Erzeugung des HTML-Codes.

Konfiguration / Layout 

Nach Angabe des Ortsnamens (weltweit) bzw. der Postleitzahl gelangt man direkt zur Einstellungsseite der Wetterbox, die eine Vielzahl an optionalen Einstellungsmöglichkeiten aufweist. Die wichtigste aus Sicht des Webdesigners, und zugleich auch einer der großen Pluspunkte dieses Tools, besteht in der Wahl des Formats. Sowohl eine HTML- als auch eine animierte Flash Version wird von wetter.info angeboten:

Beide Formate sind jeweils als großes und als kleines Modul mit weniger Inhalten verfügbar. Zu beachten ist allerdings, dass laut Nutzungsbestimmungen nur zwei unterschiedliche Versionen der Wetterbox pro Domain verwendet werden dürfen. Daher muss im Konfigurator für jede Box eine eindeutige Box-Nummer vergeben werden.

Um die Wetterbox fließend in das bestehende Layout einbinden zu können, muss die Rahmenfarbe an die Hintergrundfarbe der Seite entsprechenden angepasst werden. Hierzu steht sowohl ein Eingabefeld für den Hexwert als auch ein Color-Picker dem Benutzer zur Verfügung. Der erzeugte Quellcode der Box selbst darf den Nutzungsbestimmungen nach nicht verändert werden, was schließlich dazu führt, dass das Layout der HTML- Wetterbox selbst nicht formatiert werden kann (CSS Formatierungen werden durch eingebundene CSS Datei von wetter.info überlagert).

Optional kann für die großen Module ein Suchfeld für das Wetter in weiteren Städten eingeblendet werden.

Funktionsumfang

Auch in Sachen Funktionalität hat die Wetterbox von wetter.info einiges zu bieten: So beschränkt sich die Vorhersage nicht ausschließlich auf den aktuellen Wochentag, sondern es werden auch Wetter, Höchst- und Tiefsttemperatur der beiden folgenden Tage angezeigt. Hinzu kommt eine Fülle an Parametern für den aktuellen Tag wie etwa die zu erwartende etwa Regenmenge, die relative Luftfeuchtigkeit, Windrichtung, die durchschnittliche Windgeschwindigkeit im 10-Minuten Intervall, maximale Böen etc. Auch das derzeitige Wetter und die derzeitige Temperatur findet in den übersichtlich angeordneten Boxen Platz.

5. Weitere Tools im Kurzüberblick


WetterVista PLZ-Wetter

Quelle der Wettervorhersage: Wetter-Vista.de

Bitte geben Sie einen Ort oder eine deutsche Postleitzahl in die Suchmaske ein.

Wetter-Vista bietet zudem einen XML-Service, der sowohl für kommerzielle als auch für private Webseiten kostenlos genutzt werden kann. Der Vorhersagezeitraum erstreckt sich dabei über 4 Tage. Die URL lautet hierzu:

https://www.wetter-vista.de/api/xml.php?q=Bamberg

Um an die Wetterdaten für einen bestimmten Ort im XML Format zu gelangen, ist am Ende der URL die jeweilige PLZ bzw. der jeweilige Ortsname als Wert für den Parameter q anzugeben.


Wetter.net – Webseitenwetter


nordseewolf

Bamberg Wetter mit 5-Tages-Prognose
© Nordseewolf.de – Urlaub auf Sylt

Wettersack.de


Swiss.de – Wetter für die Schweiz


Wetter24.de

Ostsee24- Wetter Widget


Weather.com


Über diesen Artikel

Dieser Artikel wurde in den Kategorien Allgemein veröffentlicht und mit den Schlagworten , , versehen.