ALLES ÜBER hwwetter UND WIE ES AUF WEBSITES EINGESETZT WIRD

Untersuchte Extension

hwwetter

Readme zu der Extension: hwwetter

1. Installation

Die Extension kann mit folgendem Code in der Konsole installiert werden:

in das Verzeichnis "projekt.t3/typo3conf/ext" wechseln

git clone git@bitbucket.org:hirschwoelfl/typo3.ext.hwwetter.git hwwetter

1.2 TYPOSCRIPT einbinden

Im TYPO3-Modul "Template" in den 1. eigenen Knoten des Projekts wechseln und unter "Info/Bearbeiten" -> "Edit the whole template record" im TAB "enhält" das TYPOSCRIPT der Extension einbinden.

1.2 Einstellungen

Im Konstanten-Editor lässt sich eine CSS-Datei für die Wetter-Icons einbinden. Die Option ist per default ausgeschaltet.

1.3 Alternative Wetter-Icons

Durch zusätzliches Einbinden der TS-Datei "Hirsch & Wölfl Wetter Icons MeteoCons FILLED" werden die ausgefüllten Wetter-Icons dargestellt.

1.4 Wetter-Icons über Grafiken

Durch zusätzliches Einbinden der TS-Datei "Hirsch & Wölfl Wetter Icons PNG-Bildersatz 1" werden die Wetter-Icons durch PNG-Grafiken realisiert.

2 City-ID bestimmen

http://api.openweathermap.org/data/2.5/find?&mode=xml&APPID=bd82977b86bf27fb59a04b61b657fb6f&q=Vellberg

3. Plugins

3.1 Hirsch & Wölfl Wetter - Startseite - Nur aktuelles Wetter

Dieses Plugin ist für die Startseite / Header / Footer gedacht und liefert nur das aktuelle Wetter.

3.1.1 Installation

Plugin in Seite einfügen. City-ID für den Ort bestimmen.

Im Ordner "fileadmin/templates/extensions/hwwetter/Resources/Private/Templates/Wetter/" eine Datei "Aktuell.html" erstellen.

3.2 Hirsch & Wölfl Wetter - Startseite - Aktuelles Wetter und 7 Tage Vorschau

Dieses Plugin ist für die Startseite / Header / Footer gedacht und liefert neben dem aktuellen Wetter zusätzlich das Wetter der nächsten 7 Tage.

3.2.1 Installation

Plugin in Seite einfügen. City-ID für den Ort bestimmen.

Im Ordner "fileadmin/templates/extensions/hwwetter/Resources/Private/Templates/Wetter/" eine Datei "Vorschau.html" erstellen.

3.3 Hirsch & Wölfl Wetter - Details

Dieses Plugin ist für eine Wetter-Detailseite gedacht und liefert neben dem aktuellen Wetter zusätzlich das Wetter der nächsten 7 Tage.

3.3.1 Installation

Plugin in Seite einfügen. City-ID für den Ort bestimmen.

Im Ordner "fileadmin/templates/extensions/hwwetter/Resources/Private/Templates/Wetter/" eine Datei "Details.html" erstellen.

3.4 Hirsch & Wölfl Wetter - Wetter-Icons-Test

Dieses Plugin dient zum Testen der Wetter-Icons.

3.4.1 Installation

Plugin in Seite einfügen.

4. Musterdateien

Die Musterdateien dienen als Grundlage für die benötigten Templates. In ihnen werden alle möglichen Werte ausgegeben. Der Quellcode in den Dateien sollte in die neuen Dateien kopiert werden und dann nach eigenen Vorgaben angepasst und umgebaut werden.

5. Wetter-Daten in den Templates

{heute} -> das aktuelle Wetter
{vorschau} -> ARRAY, das Wetter der nächsten 7 Tage
{morgen} -> {vorschau}[0]
{uebermorgen} -> {vorschau}[1]

Objekte anzeigen um lassen
<f:debug>{heute}</f:debug>
<f:debug>{vorschau}</f:debug>
<f:debug>{morgen}</f:debug>
<f:debug>{uebermorgen}</f:debug>

6. Wetter-Icons

HTML

<span class="hwwettericon" data-icon="{icon}" title="{text}"> </span>

CSS

@font-face {
    font-family: 'MeteoconsRegular';
    src: url('Font/meteocons-webfont.eot');
    src: url('Font/meteocons-webfont.eot?#iefix') format('embedded-opentype'),
         url('Font/meteocons-webfont.woff') format('woff'),
         url('Font/meteocons-webfont.ttf') format('truetype'),
         url('Font/meteocons-webfont.svg#MeteoconsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.hwwettericon:before {
    font-family: 'MeteoconsRegular';
    content: attr(data-icon);
    font-size: 64px;
}

Font-Files

7. Texte in Sprachdatei

Folgende Texte sind in der Sprachdatei der Extension vorhanden und können mit Hilfe des Translate-ViewHelpers eingesetzt werden:

Einsatz des Translate-ViewHelpers

<f:translate key="uhr"/>

KEY -> Text

uhr -> Uhr
sonnenaufgang -> Sonnenaufgang
sonnenuntergang -> Sonnenuntergang
temperaturEinheitKurz -> &amp;deg;C
temperaturEinheitLang -> &amp;deg;Celsius
hoechstwert -> Höchstwert
tiefstwert -> Tiefstwert
luftfeuchtigkeit -> Luftfeuchtigkeit
luftfeuchtigkeitEinheit -> %
luftdruck -> Luftdruck
luftdruckEinheit -> mbar
niederschlag -> Niederschlag
niederschlagEinheit -> mm
bewoelkung -> Bewölkung
bewoelkungEinheit -> %
windrichtung -> Windrichtung
windrichtungEinheit -> &amp;deg;
wind -> Wind
windEinheitMPS -> m/s
windEinheitKMH -> km/h
morgen -> Morgen
mittag -> Mittag
abend -> Abend
nacht -> Nacht

8. Changelog

Version 4.0.0

  • Stable

Version 4.1.0 (21.07.2015)

  • Wetter-Icons über Grafiken hinzugefügt
  • 1 Satz Wetter-Icons hinzugefügt (10 Grafiken, 550x500 Pixel)

Version 4.2.0 (29.08.2017)

  • Umstellung auf Wetterproxy (wetterproxy.hirsch-woelfl.de)

Benötigen Sie schnelle Hilfe mit dieser Extension? Unser Team von erfahrenen TYPO3-Entwicklern löst Probleme unkompliziert und zum Stundensatz.

responsive - image 4

speed test - image 5

Ran an die Resultate – unser Newsletter für Sie!

Damit Sie gleich Wind davon bekommen, wenn wir in unserem Magazin zu neuen Erkenntnissen kommen.