Monat: Februar 2019

Im Modul Webtech BUUx442 wurde mit Worpress eine Webseite zu einem beliebigen Thema erstellt. Ich habe eine Webseite für meinen Musikverein erstellt. Wichtig war mir, einen internen Bereich für die Mitglieder zu erstellen und ein Platzreservationssystem für unsere Konzerte einzubetten.

Ebenfalls auf der Frontseite befindet sich eine kurze Begrüssung. Im Startseitenabschnitt „Aktuell“ informieren wir kurz über unsere aktuellen Tätigkeiten, zudem ist hier der Link zur Online Platzreservation:

Auf der Seite „Über uns“ werden Dirigent, Mitglieder, Vorstand & Musikkommission vorgestellt. Zudem findet man einen kurzen Abschnitt über unsere Geschichte.

Im Bereich Nachwuchsausbildung befinden sich Informationen zu unserem Nachwuchs, unserem Ausbildungskonzept und weiterführende Links.

Im Bereich Platzreservation können Sitzplätze für unser Konzert & Theater reserviert werden. Die Funktion wurde mit dem Plug in „Book a place“ erstellt und mittels Shortcode in der Seite eingebettet. Leider dauert das Aktualisieren nach der Platzwahl ziemlich lange. Zudem ist das erstellen des Schemes (Saal / Sitzplatzanordnung) sehr zeitaufwendig: es muss jeder Platz einzeln markiert und mit einem Namen oder Nummer versehen werden.

Der interne Bereich ist passwortgeschütz. Hier sind Dokumente abgelegt, welche nur für Mitglieder bestimmt sind.

Im Footer sind die nächsten Anlässe der MG Gurzelen zu sehen.

Im Bereich „Kontakt“ ist sowohl die Postadresse als auch die Mailadresse der Präsidentin zu finden.

Aus der persönlichen Ansicht der Autoren, dass die meisten kleineren Gastrobetriebe eine schreckliche Website unterhalten, entstand der Versuch, eine passendere und einfache Alternative für diese Betriebe zu schaffen.

Wichtig waren dabei folgende Features:

Zum einen war es uns wichtig eine statische Seite für ein kurzes Portrait zu schaffen. Diese Seite stellt zugleich die Startseite dar.

Die News-Seite soll zusätzlich die Möglichkeit bieten, Informationen schnell und einfach im Internetauftritt einzubinden. Dies ist somit die Beitragsseite, wodurch nur noch Beiträge geschrieben werden müssen.

Des weiteren gibt es eine kleine Galerie, welche mit dem entsprechenden Jetpack-Plugin erstellt wurde.

Da die restlichen Themen für die Gastro-Seite zusammengefasst werden können, haben wir uns hier für den Begriff „für Gäste“ und ein Drop-Down-Menu entschieden. So konnte ein weiteres Feature in die Website eingebaut werden.

Unter „Für Gäste“ befinden sich weitere Seiten mit Hilfreichen Tool für Gastgeben und Gäste. Mit dem Reservations-Plugin können Gäste direkt ihren liebsten Tisch reservieren und der Gasthof erhält eine Mail mit den Reservationsdaten.

Ausserdem können Gäste mit einem Formular-Plugin direkt eine Eventanfrage an den Gasthof schicken, worauf das Team reagieren kann.

Zu guter letzt gibt es natürlich noch ein Gästebuch, worin die glücklichen Besucher der BEIZ ihre Erfahrungen teilen können. Hier wäre auch ein Plugin zu TripAdvisor eine gelungene Alternative. Die Social-Media Einbettung wurde allgemein etwas vernachlässigt, damit die Seite für GastgeberInnen jeder Generation funktioniert.

Wir haben ausserdem ein kleines Footer-Menü generiert, welches die Punkte „Anfahrt“ und „Kontakt“ enthält. Wobei wir bei „Anfahrt“ das WP-Maps Plugin eingebettet haben.

Décorama ist die Webseite zum gleichnamigen Möbelgeschäft an der berühmten Champs-Élysées. Hier werden nach altem Handwerk die traditionellen französische Möbel mit grösster Sorgfalt hergestellt.
Bewusst haben wir uns für das schlicht gehaltene Design «Naturelle» entschieden, damit sich auch die ungeübten User zurechtfinden.

Konzept der Webseite

Das Ziel der Webseite «Décorama» ist es antike Möbel zu verkaufen, die das Unternehmen selbst herstellt. Die Kundschaft besteht vorwiegend aus älteren Leuten der oberen sozialen Schicht.
Die Seite ist einfach aufgebaut, besitzt aber dennoch einen edlen Touch. Raffinierte Bilder im Head im Zusammenspiel mit den einzelnen Seiten sollen die Kundschaft zum Kauf anregen. In der einstufigen Header-Navigation sind einerseits Informationen zum Unternehmen zu finden als auch die exklusiven Möbel, welche zur Zeit im Angebot sind.

• 

• 

• 

• 

• 

Auf der Startseite sind auch Widgets wie «Suche» und die heute standardmässigen «Social Media Kanäle» platziert. Zudem ist die Telefonnummer auf den ersten Blick ersichtlich.

Plugins

Für die Darstellung der Bilder wird das Plugin «Nextgen Gallery» verwendet. Der Vorteil besteht darin, dass alle Bilder in der gleichen Grösse und in Form eines Rasters platziert sind.

Die Einbindung von Intergeo Maps hilft den Nutzern den Standort des Geschäfts zu lokalisieren.

WPforms unterstützt das Erstellen eines Kontaktformulars und erleichtert damit den Nutzern mit uns Kontakt aufzunehmen.

Zur optischen Wiedererkennung wurde ein Webseiten-Symbol verwendet.

holiday.alainbuetler.ch

Ich habe mit WordPress auf meinem eigenen Hosting eine Webseite im äusserst übersichtlichen One-Page-Layout gestaltet, welche die wichtigsten Informationen rund um die Sommerferien von meinen Kollegen und mir beinhaltet. Dazu habe ich das Theme „Divi“ verwendet, dieses ist responsive und passt sich an die Bildschirmgrösse des Besuchergerätes an.

Hauptmenü

Die Navigation folgt über ein am oberen Rand fixiertes Hauptmenü, welches mittels Javascript Animation zu den entsprechenden HTML Anchors (z.B. #travel) navigiert.

Inhalt

Die Webseite ist in vier Sections eingeteilt:

• Countdown
• Travel
• House
• Nightlife

Countdown

Mittels dem vom Divi Theme mitgelieferten Countdown Element wird ein Timer angezeigt, wie lange es noch bis zu unseren Ferien dauert.

Travel

Der Travel-Abschnitt enthält lediglich ein Bild mit den Informationen zu unserem Flug.

House

Im Abschnitt „House“ sind einige Bilder des Ferienhauses, welches wir gemietet haben, in einer Galerie ersichtlich. Mit einem Klick auf ein Bild lässt sich dieses vergrössern.

Nightlife

Im Abschnitt „Nightlife“ werden alle Beiträge aus der vordefinierten WordPress-Kategorie „Nightlife“ in einem „Post-Slider“ dargestellt. Dieser Abschnitt enthält die wichtigsten Eckpunkte zu den angesagtesten Ausgangslocations in Lloret de Mar. Fährt man mit der Maus über den Slider erscheint die Navigation, um zwischen den verschiedenen Beiträgen zu navigieren.

Nach dem wir den Auftrag erhalten haben eine Website in WordPress zu erstellen, suchte unsere Gruppe nach einem Thema welches verschiedene Aspekte miteinander verbindet. So kamen wir auf die Idee, den Sport mit der Natur und dem Tourismus zu verbinden und erfanden ein fiktives Unternehmen welches Velotouren in und um eine Stadt anbietet.

Da die Startseite interaktiv und auf den Besucher einladend wirken soll, wollten wir im Hintergrund ein Video laufen lassen, welches jedoch nicht zu aufdringlich wirkt. Da es zum Teil Probleme mit der Darstellung von bewegten Bildern auf Smartphones gibt sollte auf diesen Geräten ein Bild erscheinen. Als erstes suchten wir eine Vorlage in WordPress und wurden mit OceanWP fündig. Um das Design voll nutzen zu können, mussten noch Plugins installiert werden. Das mächtigste von ihnen ist der „Elementor“, welcher sehr gut funktioniert und ziemlich selbsterklärend ist.

Anschliessend erstellten wir vier Seiten; „Home“, „Über Uns“, „Tours“ und „Kontakt“. Nachdem diese Seiten erstellt wurden, wurden sie mit dem Plugin „Elementor“ bearbeitet.

Wir verzichten hier auf einen detailierten Bericht, der jeden Arbeitsschritt beschreibt, da sonst dieser Eintrag unendlich lang wird. Da der „Elementor“ so gross ist, gibt es unzählige Anpassungsmöglichkeiten und weitere Vorlagen von ganzen Seitenlayouts oder nur von einzelnen Blöcken.

Nimmt man eine Vorlage von „Elementor“ können auch diese auf die eigenen Bedürfnisse angepasst werden und so erhält die Webseite einen individuellen Anstrich.

Bei der „Über Uns“ Seite wollten wir ziemlich schlicht bleiben und fügten nur die drei Boxen mit den verschiedenen Social-Media verweisen hinzu. Wird das Icon angeklickt, gelangt der Besucher auf die jeweilige Seite. Es wäre auch möglich die Webseite mit einem Textbeschrieb zu ergänzen.

Weiter wollten wir auf der Seite „Kontakt“ eine Karte von GoogleMaps integrieren. Mit „Elementor“ war das kein Problem und es kann noch gewählt werden, ob der Besucher in der Karte zoomen kann oder nicht. Zudem wollten wir verschiedene Buttons welche direkt auf die jeweilige Seite führt, was auch kein Problem darstellt, da für jeden Button der entsprechenede Link hinzugefügt wird

Bei den Touren verzichteten wir auf eine detailierte Ausarbeitung, da uns die Zeit fehlte. Aus diesem Grund gelangt der Besucher beim klicken auf die jeweilige Tour immer wieder nach oben auf die Seite der Touren.

Da wir das Augenmerk auf das Layout und das Design der Webseite legten, sind verschiedene Textboxen nicht mit einem realen Text versehen, sondern nur mit Fülltext.

Für unsere Ferienwohnung, habe ich eine Homepage entworfen. In dieser können die Besucher der Webpage einen Überblick über die Ferienwohnung erhalten und die wichtigsten Informationen einsehen.

Haus

Unter dem Menu „Haus“ gibt es Informationen über das Haus. Zu jedem Zimmer gibt ein Bild und eine kurze Beschreibung dazu.

Standort

Ein Unterreiter von Haus ist der Standort. Dort wurde eine Google Maps Karte eingefügt (mithilfe von einem HTML-Code direkt von GoogleMaps).

Reservation/Preis

Auf dieser Seite können die Besucher sehen, wann die Ferienwohnung besetzt und wann frei ist, es können auch weitere Infos hinterlegt werden zB. Anz. Personen, wie anreisen etc.

Es handelt sich um den GoogleKalender, welcher sich automatisch erneuert, falls man Änderungen im Kalender direkt vornimmt. Dieser wurde Mithilfe des HTML-Codes direkt eingefügt.

Weiter unten ist eine Tabelle zu finden, mit den Wochenpreisen und weiteren Infos.

Fotos

Hier gibt es einige Fotos und ein YouTube-Video, welches Mithilfe des HTML-Codes direkt von YouTube eingefügt wurde.

Kontakt

Unter der Rubrik Kontakt, können die Besucher direkt via Link mir eine Mail senden um Anfragen für Reservationen oder sonstige Fragen stellen.

Wir haben uns für einen frei erfundenen Verein entschieden. Die Webseite ist einfach und übersichtlich gestaltet. Auf der Startseite ist ein Vereinsfoto und eine kurze Information zum Verein ersichtlich. Oben hat es ein Angebotsmenü, wodrin die verschiedenen Disziplinen ersichtlich und verlinkt sind. Unter der Rubrik Aktuell sind die anstehenden Wettkämpfe oder Veranstaltungen aufgeführt.

Neben den neusten Beiträgen gibt es eine Galerie mit allen Fotos und eine Suchbegriffsuchfunktion.

Zu den Beiträgen kann von den Besuchern sowie den Vereinsmitglieder Beiträge geschrieben werden.

Im Kontaktfenster kann man den Standort des Vereins mit Hilfe des Plugins Google Maps ansehen und allenfalls die Route suchen.

Im Auftrag des Moduls „Unternehmensstrategie“ dürfen wir uns in eine Unternehmung hineinversetzen, die Pralinen herstellt. Mit einem Simulationsspiel in Bologna im April werden wir unsere Produkte verbessern und das Portfolio erweitern.

Die Gruppen bestehen aus 5 Personen, die sich einen Firmennamen aussuchen, Funktionen verteilen sollen und Strategien entwickeln müssen. Zudem sollen wir eine Website für unser Unternehmen gestalten. Daher habe ich diesen Auftrag des Moduls gerade zum Anlass genommen unsere Website für die Unternehmung „Box of Chocolates“ zu gestalten.

Der Titel der Website wurde mit einem Pralinen-Bild hinterlegt, um die Kernkompetenz des Unternehmens hervorzuheben.
Unter dem Firmennamen ist eine Menu-Leiste aufgeschaltet, um direkt zu den einzelnen Punkten zu gelangen.

Unter dem Punkt „Startseite“ wird beschreiben, was das Unternehmen herstellt, welche Dienstleistungen angeboten werden und wo der Standort ist. Die Einzelnen Menu-Punkte werden mit Bildern voneinander unterbrochen.

Beim Punkt „Über uns“ werden die Gruppenmitglieder vorgestellt. Beim Haupttext werden Links zu den einzelnen Portraits der Gründerinnen und Gründer aufgeschaltet.

Beim nächsten Punkt werden die Produkte beschrieben. Wiederum werden die einzelnen Produkte mit Links aufgelistet. Klickt man auf die Produktnamen, werden die Pralinen beschrieben. Das Aussehen wird mit einem Bild dargestellt und die Geschmacksrichtung, Grösse der Packungen und Preise sind angegeben.

Anschliessend wird noch eine Menu-Punkt zu den Stellenangeboten aufgelistet. So können Besucherinnen und Besucher direkt einsehen, ob eine Stelle frei ist oder nicht.

Weiter kann ein Fenster geöffnet werden, in dem Kontakt mit dem Unternehmen aufgenommen werden kann. Dazu wurde ein Kontaktformular eingefügt.

Am Ende der Homepage sind allgemeine Daten zu finden. So werden die Adresse, Telefonnr. und die Öffnungszeiten angezeigt. Ich habe zudem noch erwähnt, dass die Website nur zu Lernzwecken aufgeschaltet wurde. Mithilfe eines Suchfeldes kann nach Stichworten gesucht werden. Ganz unten links werden Icons angezeigt, die auf Social Media verweisen. So sind Facebook, Instagram und Pinterest verlinkt.