Dienstag, 10. August 2010

YoWindow-Wettermodul individualisieren und in Webseite einbauen.

Eine Anleitung für Webmaster zum Modifizieren des kultigen YoWeather-Wettervorhersage-Moduls.

Der Einbau des Wettervorhersage-Moduls ist einfach.  Den Quellcode erhält man KOSTENLOS und ohne Anmeldung oder sosntigen Aufwand auf Yowindow.com. Dort ist die Unterseite etwas versteckt, denn YoWindow ist hauptsächlich ein Desktop-Programm, das dafür sorgt, dass statt eines x-beliebigen Bildschirmhintergrunds oder Screen-Saver das Wetter für einen Ort in leicht animierter Form  angezeigt wird.

Das Programm


Das Desktop-Programm, das demnächst auch als Mac-Version herauskommen soll,  ist seriös, virenfrei und vielfach empfohlen. Die Betreiber der Webseite machen keinen kommerziellen TamTam umd das eigentlich geniale Modul, das m.E., wegen der Individualisierbarkeit bei entsprechender Mitarbeit der community, zum Renner werden könnte. Der Begriff "Window" in "YoWindow" hat übrigens nichts mit dem Betriebssystem zu tun.

Das Webseiten-Widget


Das Webseiten-Widget, so nennt sich das Modul zum Einbinden auf eine Webseite, findet man rechts über den Button "Add to Webpage"
oder direkt mit Hyperraumsprung, äh, Hypersprung auf die Unterseite
http://yowindow.com/weatherwidget.html
Living Weather for blog or website

Eine komplette Liste aller Parameter findet man hier (ich habe sie noch nicht ausprobiert):

Das System hat mich so begeistert, dass ich  es (trotz des Erfordernisses von Flash beim User) vor ein paar Wochen  testweise eingebaut habe, z.B. auf meinem Regensburger Blog (http://regensburger-tagebuch.de/Wetter.html) oder auf dem eMagazin in einem Artikel zur WM-Fußballweltmeisterschaft: ((Wie ist sieht das aktuelle Wetter in Südafrika aus?), aber jeweils nur im Standardformat:

Beispiel aus Regensburger-Tagebuch.de


Navigieren Sie durch Uhrzeit und Datum, und sehen Sie was herauskommt. Benutzen Sie den oberen Rand und klicken oder ziehen Sie mit der Maus auf eine bestimmte Uhrzeit.
YoWindow.com Forecast by yr.no
Das hier verwendete Standardbild lässt sich durch ein eigenes ersetzen und einbinden. Yowindow blendet dann in dieses Bild den jeweiligs passenden Himmel ein  und lässt im Vordergrund den Regen, den Hagel oder den Schnee fallen. Gemacht haben das schon viele User aus der Wetterbranche, z.B. http://www.luckysnet.de/Php/dwdforecast.php (Wetterseite von Fam. Luckner)
http://wetter.altenessen.info/animation.html (Wetterseite von Dietmar Hollenberg)
http://wetter.toernover.com/ (Wetterstation von Werner Heidotting auf Mallorca)
oder, aus dem YoWindow-Forum:


Die Individualisierung durch landscapes


Wie bekomme ich aber nun ein eigenes Vorhersage-Bild? Durch "landscapes". Jeder kann eigene landscapes basteln, indem er Fotos oder andere Bilder entsprechend präpariert und zusammen mit einer speziellen Datei hinterlegt. Das hört sich schlimmer an, als es ist. Auch ein Nicht-Programmierer kann das. Es gibt eine Anleitung auf YoWindow, sogar in deutscher Version.
Die bereits hinterlegten Landscapes und die Anleitung findet man im Forum, und zwar auf
http://yowindow.com/forum/viewforum.php?f=22

Die landscapes können sowohl im Desktop-Programm als auch im Webseitenwidget verwendet werden.

Beim Einbau des Widgets wird  als Parameter die URL zu den Landscape-Datei angefügt (Beispiel:  … landscape=http://www.deinedomain.de/wetter/landscapes/regensburg.ywl).

Beispie:
… http://yowindow.com/online.html?location_id=gn:360630&ln=Cairo&tf=24&us=metric&landscape=http://landscape.yowindow.com/landscapes/pyramids/pyramids1.ywl

Dort im Forum versteckt  findet Ihr auch die Anleitung, wie man solche landscapes selbst erstellt.


Eigene Anmerkungen


Diese Anleitung möchte ich nicht wiederholen, sondern nur ergänzen:
I
m Wesentlichen geht es darum, ein Stadt- oder Landschaftsbild mit Himmel zu erstellen, bei der Himmel entfernt bzw. transparant gemacht wurde. Dazu wird das Bild als .png-Datei abgespeichert. Speziell in PNG und GIF-Dateien kann man bestimmte Farben (bzw. farbige Flächen) transparent machen, bei JPG oder BMP-Dateien funktionart as nicht. Das PNG-Format ist dabei weniger bekannt, aber schon lange in Gebrauch. Es wurde speziell zum Einsatz in Webseiten erfunden.
Gelegentlich lesen Sie den Begriff "freistellen" oder "maskieren". Gemeint ist genau das oben gesagte: dass man Objekte freistellt, indem man den Hintergrund transparent macht.
Hat man in einem  Bild den Himmel "entfernt" speichert man es zusammen mit einer kleinen Datei im Internet ab.

Die Datei mit der Endung .YWL ist schnell erstellt; sie enthält die Information, wo im Bild die Sonne aufgeht, also den "horizonlevel". Die Datei kann dann so aussehen
<landscape name="Live Sky example" type="picture"  id="com.yowindow.pyramids">
    <data src="http://www.deinedomain.de/landscapes/pyramids.png" horizonLevel="382">
        <about>The original photo by Ed Yourdon</about>
    </data>
</landscape>

Diese YWL-Datei enthält die Angabe, wo das Bild gespeichert ist. Die YWL-Datei und Bilddatei müssen im Internet auf irgendeinem Server gespeichert sein. Bei der Einbindung des Widgets in die Webseite muss dann nur noch bei der Einbindung des Flash-Applikation als zusätzlicher Parameter der Pfad zur YWL-Datei (=landscape-Datei) angegeben werden

  …landscape=http://landscape.yowindow.com/landscapes/pyramids/pyramids1.ywl


Für diejenigen, die das KnowHow zum Erzeugen maskierter Bilder haben, dürfte das Ganze  jetzt kein Problem mehr sein. Sie müssen nur wissen, dass maskierte Bilder auch als PNG-Datei statt als GIF-Datei gespeichert werden können. Im PhotoImpact (meinem haushohen Favoriten) ist es am besten, über den Bildoptimierer im Menüpunkt WEB zu gehen, dort gibt es auch eine PNG-Variante.
Für diejenigen, die bezüglich der Bildfreistellung noch Lernende sind: benutzten Sie das im YoWindowtutorial genannte Opensource-Programm GIMP oder das von mir genannte PhotoImpact (Version 11 ist für ein paar Euro originalverpackt auf ebay erhältlich, das reicht vollkommen). Verlieren Sie keinesfalls Zeit, indem Sie versuchen, das  das ebenfalls im Tutorial genannte Programm PHOTOSHOP zu organisieren, es sei denn, Sie haben dieses (völlig überteuerte) Programm bereits. Und PhotoshopElements, die nur scheinbar leichtgewichtige Variane von Photoshop, können Sie hier sowieso vergesen.

Installieren Sie GIMP und gehenSie auf youtube.com. Geben Sie dort als Suchbegriff ein "GIMP Tutorial freistellen".

Ein Beispiel wäre: The Gimp / Objekt frei stellen

Das von mir genannte Tutorial berücksichtigt die Möglichkeiten des neuesten Version von GIMP, weshalb ältere Tutorials unnötig aufwändig sind. Falls Sie noch einfachere Anleitungen finden oder wissen, melden Sie sie hier.

Zu dem Thema Bildbearbeitung möchte ich demnächst noch etwas schreiben. Ein bisschen Geduld.


Aus der Homepage von YoWindow


Das Tool wird bisher ganz überwiegend von Betreibern von Wetterstationen benutzt, ist aber für jedermann erhältlich. Die Selbstbeschreibung auf der Homepage von YoWindow sieht übrigens so aus.
Aus der YoWindow-Webseite (Stand August 2010): What is YoWindow?
YoWindow is a weather application.
A new kind of a weather application.
YoWindow displays weather conditions over a nice and peaceful landscape. So you can watch the weather looking at the landscape.
Naturally – just like looking out of your window.
That makes YoWindow special.
You see the picture instead of bare weather data.
In your window you can watch current weather only.
YoWindow is able to display the weather forecast.
You can point at any time you wish and enjoy the weather picture.
You can even scroll the time.
At the moment, there are no weather application of this kind.
YoWindow is a next generation interface for weather application

YoWindow Editionen, Stand August 2010
Eine Apple-Mac-OS X Version ist laut der Webseite in Vorbereitung.


Die Erfinder von YoWindow


Ich persönlich finde es wichtig, bei nicht-kommerziellen Projekten dieser Art auch immer die Initiatoren zu nennen, das sind hier:
  • Pavel Repkin
  • Yuri G. Elshin
Näheres hierzu: http://yowindow.com/team.html

Keine Kommentare: