webtech

Entstehungsgeschichte

Dies ist eine eine Website für eine fiktives Restaurant. Entschieden für ein Restaurant habe ich mich aufgrund meiner beruflichen Laufbahn als Koch. Erstellt wurde die Website mit Hilfe von WordPress, den Vorlesungen, Dozenten, Google und Mitstudierenden. Ich habe probiert möglichst alle wichtigen Anforderung, die ein Restaurant an Ihre Website hat, umzusetzen.

Website

Startseite

Die Startseite habe ich so gestaltet,dass auf den ersten Blick klar ist, dass es sich um eine Webiste eines Restaurants handelt. Die Proportionen wirken auf dem Bild nicht ganz wie sie eigentlich sollten, weil ich die Website auf Smartphones und Desktops abgestimmt habe und ich deswegen weit raus zommen musste.

Plugins

Angewendet habe ich folgende 3 Plugins,“ WP Google Maps“, „Photo Gallery“ und “ Five Start Restaurant Reservations“. Letzeres ist ein Plugin für Reservationen. „Wp Google Maps“ wurde verwendet um den Standort des Restaurants anzuzeigen, damit es von den Kunden leicht gefunden werden kann.

„Photo Gallery“ wurde eingesetzt um verschiedene Menüs den Kunden schmackhaft zu machen. Die Fotos können hier vom Kunden entweder in einer Diashow oder mit selber durchklicken angeschaut werden.

Beiträge

Als Zusatz habe ich einen Beitrag hochgeladen, der kommentiert werden kann. Er dient dazu ein möglichst ehrliches Feedback von den Kunden einzuholen. Die Kommentare werden aber erst freigeschaltet nach Überprüfung, damit sich keine Beleidigungen, oder schlimmeres einschleichen und es muss ein Telefon-Nr angeben werden, als zusätzliche Sicherheitsmassnahme .

Fazit

Ich habe meine WordPresse Seite vorgestellt, weil ich diese auch ohne grosse Vorkenntnisse im Bereich Web-Gestaltung zeitgerecht gestalten konnte. Als Anfänger ist WordPress zu empfehlen. Es ist sehr leicht verständlich und es gibt viele klar verständliche Informationen im Netz, die einem bei einem Problem helfen können. Weiter habe Ich gelernt mit Plugins umzugehen und auch wie man Html und CSS kombiniert und auf einer Website einsetzen kann. Dieses erworbene Wissen habe ich aber hauptsächlich in der selber programmierten Website angewendet.

Autor:Simon Schnell 17.02.21

Die gesunden Milchprodukte aus dem Seetal!

https://uxenakuw.myhostpoint.ch/

Auf dieser Website wird ein Landwirtschaftsbetrieb vorgestellt mit Bildern und kleinen Texten. Die Molkerei und deren Produkte sind erfunden doch die anderen Betriebszweige existieren.

Entstehungsgeschichte

Ich habe eine Website über ein fiktives Unternehmen erstellt. Mein fiktives Unternehmen heisst Distillerie Ostermundigen SA(Société Anonyme), kurz DIOSSA. Ich habe meine Lehre als Lebensmitteltechnologe in der Distillerie Willisau gemacht, deshalb war mir das Thema Spirituosen bereits bekannt. So wusste ich was auf eine Website muss, die ein Unternehmen repräsentiert. Ich habe zuerst mein eigenes Logo auf Jimdo erstellt. Danach habe ich mich mit verschiedenen Tutorials schlau gemacht, wie ich am besten meine Website erstelle. Ich habe zuerst mit dem unteren Teil (Footer) und dem Header inklusive Top Bar begonnen und danach noch das Menü erstellt. Ich habe das alles im Theme OceansWP erstellt. Das ist eines der besten Gratis Themes um eine Website zu erstellen mit Word Press.

Plugins

Ich habe verschiedene Plugins ausprobiert. Manche funktionierten besser als andere, schlussendlich habe ich mich für folgende Plugins entschieden.

Elementor war für mich das wichtigste Plugin. Mit diesem konnte ich den Inhalt der Website gestalten. Mit dem Elementor Plugin habe ich verschiedene Elemente auf die Website gebracht, z.B. Textfelder, Überschriften, Bilder und auch ein Video.

Mit dem Happy Forms Plugin habe ich auf der Kontakt Seite ein Kontaktformular eingefügt. Dieses Kontaktformular habe ich so eingerichtet, dass die Kontaktanfragen direkt zu meiner Email-Adresse kommen. Das ist ein gutes kostenloses Plugin, ich habe vorher zwei andere Plugins zum Kontaktformulare erstellen benutzt, aber bei beiden hätte ich die Pro-Version kaufen müssen, um dieses Kontaktformular überhaupt auf die Website zu bringen. Mit diesem Plugin ging es aber ohne Probleme, ein simples Kontaktformular zu erstellen. Aber erweiterte Funktionen hätte man auch erst benutzen können, wenn man auf Pro upgegradet hätte.

Auszüge aus meiner Website

In diesem nächsten Abschnitt zeige einige Seiten aus meiner Website. Der Link zu meiner Website ist folgender: https://ukobeliw.myhostpoint.ch/

Home (Startseite)

Auf der Home Seite habe ich einen Disclaimer hinzugefügt, dass diese Seite fiktiv ist und nur zu Lernzwecken erstellt wurde. Ich habe auf dieser Webseite viel mit Bildern gearbeitet, da es die Webseite ansprechender macht. Die Bilder die ich verwendet habe sind allesamt Copyright Free. Ich habe diese Bilder auf der Seite unsplash.com gefunden. Diese Websites bietet eine Sammlung an von Copyright freien Bildern.

Company Seite

Auf dieser Seite habe ich mithilfe von Elementor den Standort der Firma via Google Maps auf die Website gebracht. Sehr viele Firmen haben ebenfalls einen Standort ihrer Firma mit Google Maps auf Ihrer Webseite angefügt.

FAZIT

Für mich war das erstellen einer Website mit Word Press spannend und ich habe viel neues darüber gelernt, wie man eine Website erstellt. Ich habe gemerkt, dass man weit kommen kann mit kostenlosen Versionen von Themes, Plugins usw auf Word Press. Aber um eine wirklich professionelle Website zu erstellen für ein echtes Unternehmen, bedarf es einiger Vollversionen von Themes und Plugins. Allerdings sind dieses Upgrades nicht wirklich teuer. Nur schon wenn man Elementor Pro kaufen würde, hätte man viele neue Funktionen, die man benutzen kann, um die Website zu bearbeiten.

Wenn ich später eine Website erstellen müsste für ein Unternehmen oder einen Verein zum Beispiel, würde ich Word Press vorziehen gegenüber einer selber geschriebenen html Seite. Bei html Website dauert es länger bis man die entsprechenden Codes gefunden hat, um eine Website wirklich professionell zu erstellen. Obwohl mir das erstellen der html Seite etwas mehr spass gemacht hat, als das erstellen der Word Press Seite, weil mir das arbeiten mit Codes mehr spass gemacht hat.

Enstehungsgeschichte

Meine erste Website sollte ein Shop für Fitnessgeräte rund um das eigene Heim darstellen. Die Idee kam weil ich durch die Aktuelle Pandemielage selbst ein kleines Fitnessstudio zuhause einrichtete. Allerdings stellte sich heraus das ein funktionierender Shop schwierig zu erstellen ist. Da aus Zeitgründen kein perfekter Shop möglich war, zeige ich mein Grundgerüst sowie weitere Tools damit ein funktionierender Shop möglich wäre. Das Logo der Firma wurde selber erstellt.

Plugins

Um diese Website zu erstellen wurden zuerst 2 Plugins installiert. Das Thema Oceans Extra sowie das Pugin Elementor. Ocenas ist ein sehr schlichtes und neutrales Thema und diente als Basis dieser Webseite. Elementor ist ein erweiteretes Tool um die einzelnen Seiten zu gestalten. Des weiteren wurde WP Google Maps verwendet um eine Karte mit Standort einzubauen.

Elementor:

WP Easy Cart

Nach der Installation des Plugins erfolgt die Registrierung (wurde nicht durchgeführt). Nach der Registrierung und erfolgreichen Anmeldung erhält man die Seiten „Store“, „Cart“ und „Account“. Diese dienen als Schlüsselfunktion um ein funktionierendes Warenkorb-System einzurichten. Jeder Käufer kann sich ein Account erstellen. Es können mehrere Produkte angeboten werden und der Zahlungsprozess ist auch beinhaltet. Leider war dies aus zeitlichen Gründen nicht möglich das Plugin einzubauen.

Weitere Infos zu WP Easy Cart unter: https://docs.wpeasycart.com/wp-easycart-administrative-console-guide/

Startseite

Die Startseite enthält das Hauptmenu und das Firmenlogo im Header. Ebenfalls im Header ersichtlich sind die Telefonnummer, E-Mail und Socialmedia-verlinkungen mit Symbol. Insgesamt wurden. Im Footer sind die AGB`s und ein Impressum aufgeführt mit zusätzlicher Verlinkung. Die Menüliste beinhaltet Shop und Kontakte mit Unterseiten sowie einem nicht funktionierenden Warenkorb. Ein richtiger Warenkorb würde durch das Plugin WP Easy Cart automatisch erstellt.

Shop

Im Shop sind die verschiedenen Kategorien dargestellt und zur Unterseite Verlinkt.

In der Untergeordneten Seite findet man die Angebotenen Produkte. Diese Seite kann auch durch WP Easy Cart gestaltet werden. Somit werden die angeklickten Produkte des Kunden zu dem Warenkorb hinzugefügt. In diesem Beispiel wurde zu Übungszwecken Google.com verlinkt, ohne WP Easy Cart.

Über Uns

In diesem Abschnitt könnte Geschichte der Unternehmung dargestellt werden. In diesem Fall wurde erwähnt dass es sich um eine fiktive Firma handelt. Als Unterseite wurde Kontakt erstellt, auf dieser Seite findet man Informationen zur Ansprechperson bei Fragen oder Anliegen.

Warenkorb

Der Warenkorb ist sehr Provisorisch und erfüllt seine Zwecke nicht, wie bereits erläutert. Es finden sich alle Bilder der Angebotenen Produkte wieder in diesem Fall. Weitere Informationen zu einem funktionierendem Warenkorb finden Sie unter Plugins (siehe weiter Oben).

Search (Lupe)

Mit diesem Suchfeld kann beequem nach Stichworten gesucht werden und bei Übereinstimmung findet man sich auf der entsprechenden Seite wieder.

Fazit

Eine einfache Website zu erstellen macht Laune aber braucht viel Zeit. Ein funktionierenden Shop zu erstellen stellte sich als besonders Zeitaufwändig heraus, doch es existieren sehr gute Hilfmittel damit dies gelingen kann.

Eine Html Seite bedient sich Geschriebenen Codes. Die schwierigkeit ist meiner Meinungt nach dass entsprechende Codes gefunden werden. Das Design lässt sich sehr individuel gestalten, da alle Codes selber eingebaut werden. Bei WordPress kann passieren dass gelegentlich mehrere Features kurzerhand und ungewollt überarbeitet werden, da zu Beginn ein Thema gewählt werden muss. Diese beinhalten bereits verschiedene Grundbausteine. Mit dem Elementor und Oceans WP eröffnen sich neue Möglichkeiten um die Seiten zu gestalten und bieten interessante Fuktionen.

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.