Musikgesellschaft Gurzelen

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.

Das Foto auf der Frontseite dient als Header und wird bei jeder Seite angezeigt.

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:

Startseite

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

Über uns

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

Nachwuchsausbildung

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.

Platzreservation

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.

MGG intern und Footer

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

Restaurant BEIZ by ChampoudTrautweiler

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

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.

Startseite von Décorama

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.

Head mit einstufiger Navigation

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.

Enbindung einer Karte in der Sidebar

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

Formular für eine schnelle Kontaktaufnahme

Zur optischen Wiedererkennung wurde ein Webseiten-Symbol verwendet.

Animal Voice

Ansicht der Startseite

Wir haben uns im Kurs BUUx562 mit dem Erstellen einer WordPress-Website befasst. Dabei haben wir uns für das Thema Tierkommunikation entschieden. Die Website repräsentiert ein Startup, welches Tierkommunikation per Telefon oder Briefkorrespondenz anbietet.

Endlich konnte ich meinem Besitzer sagen, wie sehr ich ihn liebe.

Fido
Bereich: Über uns

Die Website beinhaltet drei Seiten, die über das Menu wählbar sind.

Auf dieser Seite befindet sich eine kurze Beschreibung zum Startup, sowie eine Bildgalerie. Diese wurde mit dem Plugin Jetpack erstellt.

Die Preise sind hoch – wie auch die Dienstleistungsqualität

Auf der letzten Seite befinden sich unsere Tarife für die Dienstleistungen. Sie sind dem Preisniveau unserer Mitbewerber angepasst. Allerdings ist die Qualität unserer Dienstleistungen wesentlich besser.

9 von 10 Katzen würden Animal Voice weiterempfehlen

Bundesamt für Statistik

Im Hintergrund der Website läuft das Plugin: Google Analytics Dashboard for WP . Dieses erstellt Statistiken zu den Besucherzahlen unserer Website und mehr.

Die Besucherzahlen halten sich in Grenzen. Wir versprechen uns trotzdem ein grosses Expansionspotential.

Das Expansionspotential der letzten Tage wird ersichtlich: Die Besucherzahlen sind heute um 300% gestiegen.

Sommerferien – LLoret de Mar

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.

Bicycle-City-Tours

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.

Startseite mit einem Button, welcher den Besucher direkt zu den Touren bringt

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.

Auf der rechten Seite sind die Elemente vom „Elementor“, welche mit Drag and Drop auf die Webseite eingefügt werden können

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.

Verschiedene Seitenlayouts, welche zum Teil gratis sind und solche welche nur in der PRO-Version erhältlich sind

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.

Die „Über Uns“ Seite mit den drei Boxen

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.

Ferienwohnung – Cap d’Agde

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.

TV HAFL

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.

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.

Box of Chocolates

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.

Titel

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.

Sartseite

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

Über uns
Portrait

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.

Produkte
Produkt Tomo

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.

Stellenangebote

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

Kontaktformular

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.

Seitenende

7UP

Descrizione generale del sito

L’idea per questo sito stava nel digitalizzare il ricettario di famiglia. Affinché il contenuto sia attraente per l’utilizzatore, il design del sito è ricco di immagini e di colori vivaci ed è caratterizzato da uno stile di scrivere scherzoso che è enfatizzato dalla presenza di smileys. Inoltre egli può scegliere una categoria di ricette tra le opzioni “Ricette vegane”, “Ricette vegetariane” e “Ricette con carne e pesce”.

Fig 1Fig. 1

L’immagine soprastante (fig. 1) rappresenta la homepage. La disposizione delle ricette segue una logica cronologica di apparizione. A destra si trova il menu che rimane fisso indipendentemente dalla pagina o dall’opzione su cui si clicca. Nella barra del menu figurano:

  • il campo di ricerca (fig. 1)
  • i post più recenti, la possibilità di lasciare dei commenti (fig. 1)
  • le categorie di ricette (fig. 4, fig. 5, fig. 6)
  • Meta con la possibilità d’accesso login al sito, tra cui figura anche l’accesso come amministratore (fig. 1)
  • la cartina di dove i responsabili del sito possono essere raggiunti (fig.7)
  • il contatto dei responsabili del sito (fig.8)

Cliccando sui post che sono caratterizzati da un’immagine, dal titolo e da una parte del contenuto, si accede al suo contenuto completo, che è la lista degli ingredienti e il procedimento di preparazione (fig. 2). Sotto c’è la possibilità di accedere al post precedente e a quello seguente. Inoltre sono presenti la data di pubblicazione e la categoria a cui appartiene la ricetta. Nel caso si voglia lasciare dei commenti al post, è possibile farlo nella sezione sottostanti (fig.3) ed essi appariranno anche nel menu sotto la sezione “nuovi commenti”.  Cliccando sul testo accanto al logo “Ricette per tutti i gusti e… tutte le coscienze” si ritorna alla pagina principale.
Fig 2Fig. 2

fig 3 vFig. 3

Ogni ricetta è stata classificata come vegana, vegetariana o con carne o pesce. Sul menu è possibile scegliere la categoria desiderata, che apparirà su un’altra pagina come indicano gli esempi sottostanti (fig. 4, fig. 5, fig. 6). Nel caso in cui si cerca qualcosa di specifico, si può fare l’uso del campo di ricerca presente nel menu.

Fig 4Fig. 4
Fig 5Fig. 5
Fig 6Fig. 6

Nel caso di domande o difficoltà, l’utilizzatore può rivolgersi direttamente ai responsabili del sito via e-mail (fig. 7) oppure recarsi direttamente in ufficio. L’indirizzo e la posizione precisa sono indicate nel menu nella sezione ove vi è presente la cartina del Google Maps che può essere ingrandita o rimpicciolita direttamente sul sito oppure visualizzata in grande direttamente sulla scheda del Google Maps. Inoltre vi è la possibilità di visualizzazione satellitare per chi sia più facilitato da questo tipo di rappresentazione (fig. 8).

Screenshot (74)Fig. 7


fig 8
Fig. 8