Wetter auf der Homepage anzeigen

Verfasst am: 09.04.2007, 20:46

Wetter auf der Homepage anzeigen

Typ: HTML Programmierung
Schwierigkeitslevel: für HTML Anfänger geeignet
Tools: Texteditor (z.Bsp. Notepad), FTP Programm (z.Bsp. Filezilla)
Homepage Dateien die geändert werden: links.html

Da die Sonne ja der wesentliche Faktor für die Photovoltaik ist, interessiert viele Anlagenbetreiber, wie denn das Wetter die nächsten Tage wird.

Ich beschreibe hier, wie Ihr eine aktuelle Wettervorhersage in die Solarlog Homepage einbauen könnt.

Zunächst ein paar Hinweise:
- Ihr solltet immer VORHER ein Backup Eurer Dateien durchführen (man weiß ja nie Wink

)
- Wer seine Daten auf einem der Solarlog-home Server stehen hat, sollte sicher sein, das er bei der Anmeldung bei „Automatisches Update“ „Nein“ angekreuzt hat, ansonsten sind beim nächsten Homepage Update alle Änderungen weg. Wer die Update Funktion abschalten lassen will, schickt bitte eine e-mail an info@solarlog-home.de
- Im Internet kommt es an einigen Stellen besonders auf GROSS- und klein-Schreibung an, also bitte genau hinschauen

Bevor wir anfangen, müsst Ihr Euch für einen "Wetter-Provider" entscheiden. Die meisten der im Internet vorhandenen Wetterdienste bieten kostenlosen Code an, den Ihr in Eure Web Seite einbauen könnt. Bei einigen ist nicht mal eine Registrierung erforderlich. Am Ende dieser Seite findet Ihr einige Links zu Wetterdiensten.

1. Wetter für den eigenen Ort erstellen / bestellen
(Nach dem Anmelden) Beim Wetterdienst Eurer Wahl geht Ihr auf die Seite wo Ihr Euren Ort eingeben könnt. Meistens funktioniert das auch mit der PLZ. Bei einigen Anbietern kann man dann noch verschiedene Einstellungen vornehmen, z.Bsp. Rahmen, Größe, Hintergrundfarbe, Textfarbe, Aussehen, usw. Ihr könnt aber auch im Nachhinein noch Änderungen vornehmen.
Dann wird meistens per e-mail der Code geschickt, der in die Seite einzubauen ist. Viele Wetterdienste verwenden dazu Javascript, andere IFrames, und wieder andere Flash. Aber dass ist hier nicht so wichtig. Jetzt geht es lokal auf dem PC weiter.

2. lokale Version der Datei links.html erstellen
Zunächst braucht Ihr die aktuelle Version der Datei links.html . Wer keine lokale Version auf seinem Rechner gespeichert hat, holt sich mit einem FTP Programm eine Kopie auf seinen Rechner. Das FTP Programm benötigt dazu Euren Benutzernamen, das zugehörige Passwort und den Namen des Servers mit dem sich das FTP Programm verbinden soll. Für die Benutzer der Solarlog-home Server gibt es hier eine Kurzanleitung => http://www.solarlog-home.de/download/SolarLog-Home-Kurzanleitung.pdf. Eventuell müsst Ihr noch das Arbeitsverzeichnis auf dem Server wechseln um zur links.html zu gelangen. Dann die Datei auf dem Server auswählen und auf den PC runterladen.

3. Datei mit Texteditor laden
Für Windows Benutzer gibt es auf jeder Installation einen einfachen Texteditor Notepad , der völlig ausreichend für diese Aufgabe ist. Bitte NICHT mit „Word“ oder anderen Office Programmen versuchen, es besteht die Möglichkeit, das der gesamte HTML Code von Word so richtig durch die Mangel genommen wird.
Die Linux Benutzer haben sicher schon einen Texteditor ihrer Wahl geladen.
Zum Starten von Notepad den Windows „Start“ Button und „Ausführen“ drücken. Dann Notepad eintippen und mit der Enter Taste bestätigen. Im Notepad dann im Menü „Datei-> Öffnen…“ auswählen. Im Öffnen Dialog bei „Dateityp“ "alle Dateien" auswählen und dann zum Verzeichnis mit der links.html Datei wechseln. Die Datei links.html auswählen und „öffnen“ drücken.

4. Änderungen einbauen
Ich gehe davon aus, das Ihr inzwischen eine E-mail Eures Wetterdienstes mit dem HTML Code bekommen habt, oder Ihr den Code Euch auf einer der Seiten selber erstellt habt.
Entscheidend ist, das Ihr den Code nicht verändert. Meistens ist der auch noch mit einem Kommentar umschlossen. Dieser sollte so belassen werden und ebenfalls übernommen werden. Dann findet man sich später leichter zurecht.
Der Code und Inhalt der Datei links.html interessiert uns hier gar nicht. Vielmehr gehen wir mit dem Texteditor an das Ende der Datei. Die letzten 2 Zeilen lauten:

</body>
</html>

Jetzt fügt Ihr den Wettercode VOR diese 2 Zeilen ein (das geht z.Bsp. zwischen dem E-mail Programm und dem Texteditor über die Menüfunktionen „kopieren“ in dem einen und „einfügen“ in dem anderen Programm)
Wichtig ist, das auch nach Eurem Einfügen des Wettercodes die beiden letzten Zeilen immer noch

</body>
</html>

sind. Jetzt noch im Menü „Datei->Speichern“ auswählen und den Texteditor verlassen.

5. Änderungen auf Homepage übernehmen
Als letztes brauchen wir wieder das FTP Programm um unsere lokal geänderte Datei wieder auf den Server zu kopieren. Wie unter Pkt.2 schon einmal durchgeführt benötigt Ihr dazu Euren Benutzernamen, das zugehörige Passwort und den Namen des Servers mit dem sich das FTP Programm verbinden soll. Eventuell müsst Ihr noch das Arbeitsverzeichnis auf dem Server wechseln. Dann die Datei lokal auf Eurem PC auswählen und auf den Server hochladen. Das war’s Wink

Fertig !
Jetzt könnt Ihr Euch das Ergebnis mit dem Browser auf Eurer Homepage anschauen.

Achtung:
- einige Browser erkennen nicht, das sich die Datei geändert hat und verwenden trotz des Reload Buttons die alte Version aus dem Cache. Ihr müsst dann Euren lokalen Browser Cache löschen. Meistens reicht es aus, die Shift Taste beim Reload festzuhalten

So, sollte jetzt etwas schief gelaufen sein, habt Ihr ja noch das Backup vom Anfang. Damit könnt Ihr einen neuen Versuch starten. Sollte es wider Erwarten gar nicht richtig funktionieren, spielt Ihr einfach das Backup zurück auf den Server und probiert erst mal lokal die Änderungen aus. Ein Doppelklick auf die lokale Datei startet Euren Internetbrowser und Ihr könnt lokal weiter probieren.

Ich wünsche Allen viel Spaß mit den Änderungen und natürlich bestes Wetter Wink

Gruss, Wessi

Einige Links:

Filezilla siehe => http://www.filezilla.de/

http://www.wetteronline.de ein Beispiel siehe => http://www.solarlog-home.de/floh-flocke/
http://www.wetter.de ein Beispiel siehe => http://www.solarlog-home3.de/alz-gs/
http://www.wetter.com ein Beispiel siehe => http://www.solarlog-home2.de/michalski/
http://www.donnerwetter.de ein Beispiel siehe => http://www.ottersweier-solar.de

P.S.: Die HTML Cracks unter Euch haben sicher gemerkt, das ich hier viel zu weit ausgeholt habe und das alles „kalter Kaffee“ oder „kleine Fische“ sind. Aber wir wollen doch auch den Newbie’s eine Chance geben.