Ich habe eine Website für meinen elterlichen Hof aufgebaut. Momentan betreiben wir jedoch noch keine Direktvermarktung, weshalb der Inhalt der Homepage fiktiv ist. Als Grunddesign wählte ich das Thema „Twenty Seventeen“ aus. Wichtig waren mir Übersichtlichkeit und Einheitlichkeit der Homepage.
Startseite
Auf der Startseite werden die Webbesucherinnen und -besucher von einem Header-Bild, welches unsere weidenden Kühe zeigt, begrüsst. Gleich darunter befindet sich ein horizontales Menu für die Seitennavigation.
Dann kommen zwei Beiträge. Einer beinhaltet eine Slideshow aus dem Plugin Jetpack und der andere ein Video.
Weiter habe ich den Footer angepasst. Mit dem folgenden zusätzlichen CSS konnte ich den Text „Stolz präsentiert von WordPress“ entfernen:
.site-info { visibility: hidden; }
Über uns
Auf der Seite „Über uns“ ist der Betrieb sowie das Angebot beschrieben. Zudem habe ich eine Tiled Gallery aus dem Plugin Jetpack eingefügt.
Kontakt
Für die Kontaktseite habe ich das Plugin „Contact Form 7“ installiert. So konnte ich auf dieser Seite ein Kontaktformular einbetten und anpassen. Zudem habe ich das Plugin „WP Open Street Map“ installiert, damit ich unseren Standort zeigen kann.
Zur Bearbeitung des Auftrages wurden die letzten Winterferien als Anlass genommen. In Zermatt gibt es viele schöne Orte die gerade dazu einladen ein Foto zu machen. Gleichzeitig gibt es auch jede Menge Touristen, deshalb wurde hierfür kurzerhand die Touristenfalle AG gegründet. Die Website soll die Unternehmung kurz vorstellen, das Angebot beinhalten und eine Möglichkeit bieten Kontakt aufzunehmen.
Als Design wurde das Design-Thema 2017 von WordPress gewählt. Dieses sah auf den ersten Anblick ansprechend aus und erledigte den Job relativ befriedigend. Im Nachhinein war es ein guter erster Testversuch- bei einer zweiten konkreteren Durchführung würde aber definitiv ein anderes Design gewählt werden. Die Wahl des Design scheint im Hinblick auf die Absicht der Website ein sehr wichtiger Punkt zu sein und sollte nicht unterschätzt werden. Als Header wurde ein farblich passendes Foto gewählt und auf den ersten Blick erkennt man durch den Schriftzug „Photo-Touren in Zermatt“ um was es sich handelt.
Home
Beim Runterscrollen gelangt der Besucher direkt zur Home. Hier wird der Besucher aufmerksam gemacht, welches Bedürfnis die Touristenfalle AG abdeckt und soll letztendlich dazu führen, dass der Besucher auf der Webseite verbleibt und z.B. in der Menu-Leiste auf Angebot drückt.
Über uns
In der Menu-Kategorie „Über uns“ entstand eine Vorstellung der Unternehmung mit Leitbild usw.
Angebot
Beim Angebot wurden mittels Überschriften und Bilder die verschiedenen Touren vorgestellt.
Impressionen
Da es für eine solche Dienstleistung wichtig ist, ihre „Endprodukte“ den potenziellen Kunden zu präsentieren, wurde eine Menu-Kategorie „Impressionen“ erstellt, worin eine Slide-Show eingefügt wurde.
Kontakt
Notwendig war auch die Erstellung der Menu-Kategorie „Kontakt“. Der Besucher und potenzielle Kunde soll bei Interesse einfach in Kontakt treten können und dabei verschiedene Möglichkeiten zur Auswahl haben. Es wurden Social Media Kanäle und ein Google Maps Standort mittels den Plugins „Social Media and Share Icons & WP Google Maps“ verlinkt. Um dem Kunden ein positives Gefühl bei der Kontaktaufnahme zu vermitteln wurde noch eine kleine Botschaft des CEO’s der Unternehmung eingefügt.
J’ai réalisé mon site dans le but de faire une première ébauche servant de moyen de communication avec la clientèle d’une future vente directe de champignons à la ferme. Mon objectif était de créer un site simple, avec une bonne vue d’ensemble et attrayant pour le regard. Le site peut être consulté à l’adresse suivante: https://retaruru.myhostpoint.ch/
La page d’accueil du site
Le site a une page d’acceuil avec des images défilantes et une carte, une page à propos de la production, la gamme de produits, les offres actuelles et une page de contact avec la carte et un formulaire.
Page de contact avec carte et formulaire
Les extensions utilisées sont openstreetmap pour l’affichage du lieux de vente sur une carte, contact form 7 pour le formulaire de contact et flamingo pour l’enregistrement automatique des formulaires provenant de contact form 7.
Mangels guter Ideen für eine Website wurde die Josi-AG gegründet. Der Inhaber Herr Josi bietet verschiedene Dienstleistungen an. Die Website besteht aus einem Menü, welches in die Kategorien Home, Angebot, Über Mich, Blog und Kontakt unterteilt wurde. Auf der Home-Seite ist eine kurze Beschreibung vorhanden sowie ein Carousel (mittels shortcode eingebettet) mit den verschiedenen Dienstleistungen, welche direkt mit der jeweiligen Überschrift beim Angebot verlinkt ist. Der Header wurde nur auf der Home und Angebots-Seite aktiviert, so dass nicht auf jeder Seite heruntergescrollt werden muss.
Blog
Bei der Blog-Seite ist es möglich verschiedene Themen zu besprechen und Kommentare zu schreiben.
Kontakt
Auf der Kontakt-Seite sind fiktive Adressdatenangegeben. Google maps wurde als Iframe (html-tag) eingebettet, da dies die einfachste Lösung war.
Angebot
Beim Angebot sind die fiktiven Dienstleistungen von Herr Josi ersichtlich. Da die Überschriften mit dem Carousel auf der Home-Seite verlinkt sind, können Kunden schnell Ihre gewünschte Dienstleistung finden.
Plugins & Widgets
Es wurde mit folgenden Plugins gearbeitet: Jetpack by WordPress, Social Media and Share Icons (Ultimate Social Media), MetaSlider, Kalender und Yoast Duplicate Post.
Mit Jetpack können Prozesse beschleunigt werden und stellt zum Beispiel eine Übersicht über die Website-Aufrufe zur Verfügung, was bei einer gewerblichen Website sehr praktisch sein kann.
Das Social Media Plugin wurde benutzt, da das Design noch keine Widgets für diese Funktion bereitstellte. Das Widget wurde dann mittels shortcode implementiert.
MetaSlider ist ein einfaches Widget, um ein Bilder-Carousel zu erstellen. Auch die Verlinkung mit einer anderen Seite war sehr einfach. Die Überschriften des Angebots wurden dann mit einer id dem jeweiligen Bild zugeordnet.
Zusätzlich ist im Footer 1 ein Kalender-Widget eingefügt worden. Bei diesem sind alle Blogeinträge einem entsprechenden Datum zugeordnet, was eine Orientierung in dem Blog vereinfacht.
Mein Projekt war, einen Webshop für die Kunstwerke meiner Frau zu erstellen.
Link zur Webseite: https://uvopiwep.myhostpoint.ch
Die Frontpage ist unten abgebildet. Das Design ist schlicht und einfach und enthält nur die wichtigsten Informationen. In der Kopfzeile ist das Hauptmenü mit den verschiedenen Seiten ersichtlich, es ist auf jeder Seite identisch. Ebenfalls überall ist der Warenkorb mit oder ohne hinugefügten Produkten ersichtlich. Die jewiligen Seitentitel sind mit selbst erstellten Farbverläufen hinterlegt. Der Hintergrund wechselt beim Aktualisieren oder Wechseln der Seite.
Die Social Media Buttons sind noch nicht aktiv, wären aber dazu gedacht durch Klicken auf die jeweilge Plattform weiterzuleiten. Am Kontakt Buttons am Ende der Seite sind verlinkt und leiten zu einem Anruf, E-Mail oder SMS an mich weiter.
In der Mitte der Seite ist ein scrollbares Vorschaufenster mit einigen Produkten aus dem Shop eingebaut, damit könnten z.B Neuheiten etc. direkt ersichtlich gemacht werden. Mit einem Klick auf das Bild gelangt man direkt zur Produktseite oder man kann es direkt zum Warenkorb hinzufügen.
Auf der nächsten Abbildung zeigt ein Produkt, nachdem man es angeklickt hat. Hier kann man spezifische Produktbeschreibungen, Hinweise etc. vermerken. Es wäre auch möglich Produktberwertungen zu erhalten. Die Produkte können nach belieben organisiert und strukturiert werden. Ich werde vielleicht später noch versuchen Bilder zum selber zusammenstellen einzurichten. So könnten Kunden die Leinwandgrösse, Farben und ungefähre Muster auswählen. Dies benötigt aber ein Bisschen Arbeit 🙂
Im Warenkorb habe ich einen Versandkostenrechner eingebaut (nicht ersichtlich), welcher aufgrund von Postleitzahl und den Ort ermittelt, welcher Betrag fällig wird. Ich habe dazu ein Profil erstellt, welches die Postleitzahlen aus meiner näheren Umgebung enthält. Sollte jemand aus der Nähe ein Bild kaufen, erhält er die Option für eine gratis Lieferung oder Selbstabholung. Für alle Orte die nicht bestimmt wurden, wird die nomale Versandpauschale verrechntet.
Wenn die Rechnungsdetails ausgefüllt sind kann man das Produkt via Paypal oder Kreditkarte (in Paypal integriert) bezahlen. Dafür habe ich an mein Privates Paypal-Konto ein Firmen Konto angehängt. Grundsätzlich sind fast alle gängigen Bezahlmöglichkeiten erweiterbar, diese sind aber meistens nur mit kostenpflichtigen Abonnementen erhältlich, z.B Twint.
Der Aufbau der Seite war zu Beginn etwas nervenaufreibend. Ich hatte in etwa eine Vorstellung, wie es aussehen resp. funktionieren sollte aber die nötigen Funktionen waren leider kostenpflichtig. Deshalb verbrachte ich sehr viel Zeit mit dem Suche und ausprobieren von passenden Plugins, welche mir das Gewünschte kostenlos lieferten.
Ich hatte mich dann für das folgende Setting entschieden.
Das Hestia Theme, es ist sehr schlicht gehalten und die Bedienung ist sehr simpel. Deshalb war es sehr geeignet, um mit dem Aufbau Tool Elementor die gewünschten Inhalte einzufügen. Jedoch musst ich noch ein paar zusätzliche Elementor-Plugins hinzufügen, da vieles nur in der Pro Version möglich ist. Das Haupt-Tool für den Shop war WooCommerce, damit können alle Einstellungen welche die Produkte und den Verkauf betreffen eingestellt werden. Es braucht aber sehr viel Geduld, bis alles stimmt. Für umfangreichere Shops wäre aber die Pro-Version besser.
Mir war es wichtig, dass die Seite auf allen Plattformen (PC, Tablet, Smartphone) gut bedienbar und übersichtlich ist, deshalb musste ich einige Elemente doppelt erstellen und danach für die jeweilige Plattform individuell gestalten, resp. für Mobile- und Desktoversion zuweisen.
Link zur Website: https://genekiki.myhostpoint.ch/
Restaurantbesuche sind durch die momentane Situation nicht möglich. Man ist viel zu Hause und muss sich jeden Tag auf’s neue überlegen, was man kochen will. Da kann es sein, dass immer wieder dieselben Gerichte gekocht werden und einem die Rezeptideen ausgehen.
Startseite
MASABI ist ein Foodblog. Auf der Website gibt es verschiedene Rezeptideen für das Frühstück, Mittagessen oder Abendessen. Zudem können auch Rezepte für Drinks oder Smoothies gefunden werden. Auf der Startseite gibt aus drei Kategorien ausgewählt werden. Klickt man auf die gewünschte Kategorie, wird man zu der entsprechenden Seite geführt. Unterhalb der 3 Kategorien finden die Userinnen und User diverse Rezepte und Impressionen der Gerichte.
In den Kategorien, findet man gesunde, nachhaltige und ausgewogene Rezepte mit den entsprechenden Bildern. Das Design wurde dementsprechend gewählt. Es soll durch die Farbwelt, Schriftart und Rezepte gesund, nachhaltig und modern wirken.
Über uns
Klickt die/der User*in oben auf „Über uns“, erfahren sie was MASABI ist, wo sie ihren Standort haben und was sie tun.
Kontakt
Unter Kontakt befindet sich ein Kontaktformular, welches mithilfe des Plugins „WPForms“ erstellt wurde. So können User*innen bei Fragen Kontakt mit masabi aufnehmen.
Impressionen
Unter Impressionen befindet sich eine Bildergalerie. Diese wurde mithilfe des Plugins „NextGENGallery“ erstellt. Hier werden nur Bilder dargestellt ohne ein Rezept. Somit können sich die User*innen Bildinspirationen holen oder Bowls ohne grossen Aufwand zusammenstellen.
Le site web suivant est celui de Lacoutelie, il est seulement destiné à l’exercice pour le cours BUUx442. J’ai décidé de prendre comme thème une des mes passions, l’artisanat en coutellerie. La création du site web, même fictive, me permet de visualiser et de me familiariser avec les outils pour possiblement en créer un officiel dans le futur. J’ai voulu faire un site très simple, similaire à l’image que je donne déjà de Lacoutelie. Le site permet donc d’avoir une courte description de Lacoutelie ainsi que la possibilité de visualiser certains couteaux et de les acheter mais aussi de pouvoir faire une commande spécialisée. Lien : https://ekirires.myhostpoint.ch/wordpress/
Le site web.
Le site commence par la page d’accueil avec le logo et le slogan de Lacoutelie. L’image de fond est une cascade d’eau, scrollez vers le bas et celle-ci (la page blanche représente la cascade) dévoilera une brève présentation de Lacoutelie suivie d’une photo d’un couteau.
Sur la bannière en haut du site il y a le menu qui permet de se déplacer dans les différentes rubriques.
La rubrique « les couteaux » permet aux visiteurs de visualiser tous les couteaux qui sont en vente sur le site, il y a aussi deux sous rubriques pour les catégories de couteaux, « cuisine » et « outdoor ».
Il est possible d’avoir plus d’information et une image plus précise sur un couteau en cliquant dessus. La description détaillée du couteau apparaît et si on souhaite l’acheter on peut l’ajouter au panier.
Le site propose aussi une rubrique « commande personnalisée » certaine caractéristique peuvent être choisi par l’acheteur et il peut aussi faire parvenir par mail ou par téléphone des demandes spéciales.
Les dernière rubriques sont celles du panier, qui permet de finaliser un achat sur le site et celle des contacts. Les contacts permettent d’avoir un formulaire mail, un lien whatsapp, une carte interactive et un lien pour le compte instagram.
Conclusion
C’est très agréable de pouvoir créer un site web avec un design très qualitatif dès le début sans forcement avoir de qualification dans les technologies du web mais on se rend compte que l’on est quand même « limité » dans la créativité en utilisant wordpress sans utiliser les saisies HTML et CSS. Certains plugins aurait mérité un design différent mais dans l’ensemble c’est plutôt propre.
D’autre rubriques pourrait être ajouté, comme une gallerie photo, une vidéo de présentation etc. mais en malheureusement en raison d’un manque de contenu, il n’a pas été possible de le réaliser.
Die Webseite wurde für den Landwirtschaftsbetrieb Chüeweg gestaltet. Dabei gibt es auf der Startseite eine Slideshow mit 4 Bildern des Betriebs, welche alle 5 Sekunden das Bild wechselt. Oben ist die Navigation um auf die verschiedenen internen Webseiten zu gelangen.
Weiter unten auf der Startseite werden die Betriebszweige aufgelistet und mit Bildern ausgeschmückt.
Zuunterst befindet sich auf allen Seiten ein Footer, welcher durch eine Trennlinie visuell vom Rest getrennt wird. Im Fooder befindet sich die Adresse sowie der Hinweis, dass die Webseite selbst gestaltet wurde.
Auf der zweiten Seite wird das Angebot aufgelistet, zudem kann man sich mit einem Klicken auf den Telefonhörer oder eine Klick auf den Briefumschlage direkt den Betrieb kontaktieren. Wird zum Beispiel die Webseite mit einem Mobiltelefon besucht, wechselt es beim Klick auf den Telefonhörer zur Telefonapplikation, wo bereits die Telefonnummer eingetragen ist.
In der Bildergalerie kann man sich einige Fotos des Betriebes anschauen, der Aufbau besteht aus einem PHP-Dokument. Interessierte können sich auch auf Instagram weitere Fotos anschauen. Durch des klicken des Buttons öffnet sich direkt die Instagram Seite des Betriebes.
Im letzten Register „über uns“ findet man eine Karte von Open Street Map wo der Betriebsstandort markiert ist. Weiter untern werden auch die Arbeiter, welche auf dem Betrieb tätig sind aufgelistet und kurz vorgestellt.
