webtech

Die Webseite des Forstvereins der Hafl bestand bereits, allerdings mehr oder weniger standart-Wordpress. Wir haben sie etwas aufgemotzt.

Die Website ist Zweisprachig mit dem Plugin Polylang. Die Spracheinstellung wird automatisch erkannt. Für interessiere hier der Link für die französische Version: forstvereinhafl.ch/fr/

von Lucas Zingerli für das Modul BUUx562

transport.opendata.ch

Auf transport.opendata.ch wird eine API zur Verfügung gestellt, welche Entwicklern Zugriff auf den Schweizer öV-Fahrplan in Echtzeit (sprich mit aktuellen Verspätungen, Gleisänderungen etc.) ermöglicht.

Die Daten werden per GET Befehl angefordert und werden vom Server als JSON File zurückgegeben.

GET http://transport.opendata.ch/v1/locations?query=Zug

Die obenstehende anfrage gibt folgendes zurück:

{
  "stations": [
    {
      "id": "8502204",
      "name": "Zug",
      "score": null,
      "coordinate": {
        "type": "WGS84",
        "x": 47.173702,
        "y": 8.515047
      },
      "distance": null,
      "icon": "train"
    }
  ]
}

Man erhält nun folgende Informationen: ID -> Eindeutige Nummer einer öV Haltestelle in der Schweiz, NAME -> Offizieller Name der Haltestelle, COORDINATE -> Weltkoordinaten der Haltestelle, ICON -> Art der Haltestelle (Bahnhof, Bushaltestelle etc.).

Nebst Informationen zu einer Haltestelle, kann man Abfahrtstafeln einer Haltestelle und Verbindungen zwischen zwei Haltestellen abfragen. Die Abfragen lassen sich mit diversen Parameter anpassen.

Fahrplan Applikation

Nun zur Applikation: Mein Ziel war es mit Node.js, Socket.io und electron eine .exe Applikation zu erstellen, mit welcher ich eine simple Von-Nach anfrage zu einem gewünschten Zeitpunkt machen kann.

Das Formular stellt drei Eingabefelder zur Verfügung. Von, Nach und die gewünschte Uhrzeit. Die Uhrzeit hat als type=“time“, damit der User nichts Falsches eingeben kann. Die rote Schaltfläche mit dem Doppelpfeil, welche zwischen dem Von und Nach Feld liegt dient dazu, die beiden Stationen umzukehren, wenn man den Rückweg suchen will. Die Anfrage wird mit dem Suchen Button gestartet. Nun erscheint unterhalb des Formulars ein grauer Text „Suchen…“ und der Mausanzeiger wird auf beschäftigt gesetzt. Im Hintergrund sendet der Client nun eine Anfrage an den Node.Js Server mit den Angaben aus der Suchmaske:

{ from: 'Zug', to: 'Bern', time: '12:59' }

Der Server setzt nun aus diesen Informationen die Abfrage zusammen, welche er an transport.opendata.ch sendet:

GET transport.opendata.ch/v1/connections?from=Zug&to=Bern&time=12:59

Der Server sendet nun sämtliche Informationen zu den nächsten vier Verbindungen ab dem gewünschten Zeitpunkt:

Viele Informationen werden für die Applikation nicht benötigt. Es werden unteranderem alle Informationen zu sämtlichen Umsteige- und Halteorte geliefert, wann der Zug erwartet wird (Verspätungen), Belegung der ersten und zweiten Klasse und vieles mehr. Für die Applikation werden nur folgende Daten benötigt: Abfahrt, Ankunft, Dauer und Anzal Umsteigen. Da alle Zeitpunkte im Format „2020-02-13T13:29:00+0100“ an. Da dies unbequem zu lesen ist, ändert der lokale Server die Zeiten ins Format HH:MM -> „13:29“. Die nun aufbereiteten Daten sendet der Server nun an den Client. Dieser Wechselt die graue anzeige „Suchen“ nun auf Schwarz und zeigt die beiden Stationen an. Darunter werden die nächsten Vier Verbindungen zwischen den Stationen angezeigt.

Schwierigkeiten

Bei der Entwicklung waren die beiden grössten Stolpersteine die Mischung aus synchronen und asynchronen Aufrufen zum einen und zum anderen das erstellen der .exe Datei.

Asynchron: Daten werden übermittelt, wenn sie bereit sind und es wird auf keine Antwort gewartet. -> z.B. E-Mail
Synchron: auf jeden Aufruf folgt eine Antwort. Der Aufrufer wartet auf die Antwort und macht in der Zwischenzeit nichts anderes. -> z.B. Anruf
Während die Kommunikation zwischen dem lokalen Server und dem Client aus asynchronen Aufrufen besteht, findet die Kommunikation zu den Fahrplandaten Synchron statt. Mit einer Callback Funktion konnte da ein Turnaround geschaffen werden.

Das Problem mit der .exe Datei bestand darin, dass sowohl für die Server-Client Kommunikation (Express) und für die Desktop Applikation (Electron) ein Framework verwendet werden. Dies kann man sich in etwa so vorstellen, wie wenn man mit einem Kaffee-Pad in einer Kapselmaschine Kaffee machen möchte. Man muss sozusagen den Inhalt des Pads nehmen, es mit einer Kapsel umgeben und kann es dann verwenden.

Erweiterungsmöglichkeiten

Da die API von opendata sehr viele Informationen liefert, kann man die App noch um all diese erweitern. Beispiele:

• Anzeige von Verspätungen und Gleiswechsel
• Auslastung der 1. und 2. Klasse
• Via Station hinzufügen
• Datum hinzufügen
• Detaillierte Reiseroute anzeigen
• Stationen auf einer Karte (map.geo.admin.ch, Google Maps…) anzeigen

Sources

Code ohne .exe Datei -> Entpacken und Node Starten (npm start) http://bfh.lzingerli.ch/html/fahplan/fahrplan.zip

App als .exe Datei -> Entpacken und fahrplan.exe ausführen
http://bfh.lzingerli.ch/html/fahplan/fahrplan_exe.zip

Code mit Generierung als .exe Datei. -> Entpacken, yarn und electrons mit npm install installiere (im Zip wurde aus Platzgründen darauf verzichtet).
http://bfh.lzingerli.ch/html/fahplan/fahrplan_electron_ohne_electrons_yarn.zip

Grundgedanke zur Webseite

Da ich schon seit längerem immer wieder Aufträge für Zeichnungen aufnehmen, kam mir die Idee eine Webseite dafür zu entwickeln.

Für die Webseite wurde das Customify Theme verwendet, da es sehr viel Gestaltungsfreiraum lässt und sich vielseitig einsetzen lässt.
 

Startseite – Newsfeed

Die Startseite ist der Newsfeed, wo die letzten Beiträge angezeigt werden. Die Beiträge sollten den Besucher meine zuletzt gefertigten Werke zeigen und gleichzeitig grob über meine momentane Situation im Bezug auf die Bilder informieren. (Ob ich z.B. viel Zeit habe momentan für Kunst oder ob etwas passiert ist und ich wenig Zeit habe,etc.).

Footer

Unten im Footer werden randomisiert Bilder aus allen Galerien angezeigt, für die Galerien wurde das Plugin «Nextgen Gallery» verwendet.

Weiterhin kann man mit dem Kalender Beiträge nach Datum finden. Auch hat es einen Abschnitt mit meinen Kontaktinformationen.

Da man bei diesem Theme den Footercontainer nicht direkt im footer.php editieren kann, blieb als Option nur diese kleine Fusszeile.

About the Artist

Die nächste Seite ist eine kurze Information über mich.

Commissions

Die Commission Seite informiert mit Beispielbildern was für Bilder man mir in Auftrag geben kann. Die meisten Typen haben einen Startpreis oder einen groben Preisrahmen, dies liegt daran dass je nach Wunsch oder Charakter ein verschieden grosser Aufwand besteht.

Get a commission quote

Die «Commission» Seite hat eine weitere untergeordnete Seite, wo man direkt ein Formular ausfüllen kann um eine Offerte (Quote) zu bekommen. Das Formular wurde mit dem NinjaForm Plugin erstellt.
Im freien Eingabefeld können auch Bilder hochgeladen werden.

Gallery

Zudem enthält die Webseite eine kleine Galerie mit mehr Beispielen von meinen Werken damit man sich ein besseres Bild machen kann. Da die Webseite als Portfolio und zum Aufnehmen von Aufträge dient, gibt es keine Kommentarfunktion bei den Bildern.

Info

Auf der Info Seite gibt es einen Link zu meinem Trello (Grob gesagt eine «To-Do-Liste» Webseite) wo man sehen kann, wie weit ich mit diversen Kunstwerken bin.
Und noch einmal eine Angabe wie man mich direkt kontaktieren kann, falls die Angabe unten rechts im Footer übersehen wird.

l’idée du site web vient de notre passion pour le ski. Nous avons donc décidé de créer une page d’information, où les descriptions des sorties et des conditions d’enneigement sont ajoutées.

La page principale du site est caractérisée par des graphiques simples et un menu en haut. L’image la rend plus attrayante pour le visiteur.

dans la section information, une brève description du projet et une note sur la source médiatique.

Grâce au plugin „contact“, les utilisateurs du site peuvent nous contacter et nous envoyer des idées ou des rapports pour de nouveaux articles directement depuis le site. De plus, un plugin montre une tempête de neige sur les pages du site, ce qui le rend inesthétique mais cool 😉 Une jolie photo d’en tête est present en tous les pages, soif l’accueil.

Notre site s’intéresse aux énergies renouvelables et plus particulièrement à l’énergie hydraulique. Nous avons donc décidé de présenter plus en détails ce type d’énergie et ses particularités au travers d’un site internet réalisé grâce à la plateforme WordPress.

La page d’accueil explique de manière succincte l’objectif du site. Une barre de recherche a été ajouté ainsi que l’adresse, les heures d’ouverture du bureau et un calendrier afin de faciliter la navigation et permettre quelques fonctionnalités en plus pour l’utilisateur. Les autres pages présentent également quelques photos ou vidéo de manière à interpeller le visiter et rendre plus agréable la lecture. Deux plugins ont été utilisés, à savoir WP Google Maps qui permet d’ajouter la localisation du bureau ainsi que Dynamic To Top qui permet de remonter en haut de chaque page.

Finalement, une page de contact permet à l’utilisateur de nous contacter en cas de besoin. La localisation du bureau est également disponible.

Forêt Fiaugères est un site web créer pour les besoins du cours „Technologies du Web“. Ce site a pour objectif de promouvoir la forêt de Fiaugères et sa fonction d’accueil pour le public. La caractéristique principale de cette forêt est qu’il s’y trouve un ZURICH parcoursvita. De plus, 2 espaces facilement accessibles sont mis à disposition pour les pic-nic, grillades, temps de pause.

Le style du site est basé sur le thème „Twenty Seventeen“. La page d’accueil contient un en-tête principal, avec l’intitulé du site web et un petit slogan. On y retrouve ensuite un message de bienvenue présentant le but du site. Une barre de menu présente constamment permet de naviguer aisément entre les différentes pages.

Sur le côté de la page d’accueil figure une rubrique rechercher ainsi qu’une rubrique „A propos de ce site“ ce qui permet à l’utilisateur de prendre directement des repères. Au fond de chaque page, un espace est dédié aux commentaires, et les deux rubriques précédemment citées sont à nouveau présentes.

Sur la page „Accueil“, on y retrouve un article avec un mot de bienvenue. Ce même mot de bienvenue ainsi qu’un diaporama de photos et images réalisé grâce à l’extension „Smart Slider“ peut être retrouvé sur la première page nommée „Bienvenue“.

La page „Parcoursvita“ présente le parcoursvita à l’utilisateur. Il y retrouve notamment les caractéristiques de ce parcours et les types d’exercices qu’il peut y retrouver. Un lien permet de consulter la site officiel de ZURICH parcoursvita. La page est illustrée par des photos.

La page „Installations“ montre à l’utilisateur les autres infrastructures d’accueil présentes dans cette forêt. Une explication générale précède une partie plus détaillée, présentant de manière illustrée les 2 places de pic-nic présentes.

La page „Plan de situation et accès“ permet à l’utilisateur d’avoir dans un premier temps un plan du parcoursvita, et dans un deuxième temps une carte interractive issue de google maps. Cette dernière permet à l’utilisateur d’observer son itinéraire afin de se rendre à la forêt de Fiaugères.

Finalement, la page „Contact“ affiche un formulaire de contact intégré, réalisé grâce au plugin WPForms. Celui-ci permet à l’utilisateur de contacter la commune de Saint-Martin, propriétaire de cette forêt, pour obtenir de plus amples informations ou pour d’éventuelles remarques.

Touchant à la fin de notre cursus en sciences forestières à la HAFL, l’idée de concevoir un site présentant une entreprise forestière fictive nous a permis de démontrer nos connaissances par le biais des fonctionnalités de HTML / CSS et JS.

Touchant à la fin de notre cursus en sciences forestières à la HAFL, l’idée de concevoir un site présentant une entreprise forestière fictive nous a permis de démontrer nos connaissances par le biais des fonctionnalités de HTML / CSS et JS.

Une présentation succincte de l’entreprise fictive permet d’illustrer que l’utilisation de templates (w3school) permet d’atteindre une présentation plus soignée avec moins d’effort qu’avec l’utilisation unique du html/css.

L’intégration de médias permet de rendre plus attractif le site internet et interpelle le visiteur. Facilement réalisable avec des balises html pour afficher des fichiers mp3 ou mp4.

D Becke: Valerie und Sandra

Dies ist unser Becker Blog, mit einem Klick aufs Bild gelangst du auf die Startseite.

Wir haben auf unserer WordPress-Seite einen Blog mit verschiedenen Einträgen und ein Rezeptverzeichnis erstellt.

Am besten besuchst du unser Blog direkt.

Die Seite Neue Technik im Forst beschäftigt sich mit den neusten technischen Errungenschaften im Forst. Sie ist in vier verschieden Teile gegliedert. Der erste teil besteht aus einer Startseite welche nur beim erstmaligen öffnen der Seite erscheint, welche einfach die neusten Beiträge anzeigt.

Weiter bietet die Webseite einen Kalender an, der mit Hilfe eines Kalender Plugins erstellt wurde, der die nächsten Interessanten Veranstaltungen im Bezug Technik und Forst anzeigt. Zudem werden, je nach angaben des Veranstalters noch Anfahrtsweg oder genauere Angaben zur Veranstaltung publiziert.

Beim zweiten anwählen der Startseite tritt sie in leicht abgeänderter Form in Erscheinung hier werden schlussendlich alle Beiträge angezeigt und nicht nur die Aktuellsten.

Zu guter Letzt, werden noch angaben zu den Verfassern dieser Seite gegeben. Ein langwiriges Thema welches den Aufbau der Webseite über längere Zeit verfolgte, war die Idee, dass das Foto im Header bei jeder Seite anders wird. Nach langer suche fand man ein Plugin, mit welchem man dies bewerkstelligen konnte.