Lacoutelie

Introduction

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.

Webseite für den Chüeweg

https://hasn.ch/students/Johannes_Meyer/

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.

Alpbetrieb Michel

Auf dieser Webseite wird der Alpbetrieb der Familie Michel vorgestellt.

https://kehizusu.myhostpoint.ch/

Der Header zeigt die Alphütte und das Menü. Der Titel der Webseite versucht die Webseite möglichst genau zu beschreiben.

Auf der Startseite wird der Betrieb und die Tätigkeiten vorgestellt. Rechts wurden drei Widgets eingefügt.

Im Menü „Über uns“ wurden die Familie und die Arbeitskräfte kurz beschrieben.

In der Galerie wurden einige Fotos eingefügt. Zusätzlich wurde ein TikTok Video eingebettet.

Im Menü „Kontakt“ wurde das Plugin „Maps“ verwendet.

Manufaktur-Arnold.ch von Barbara Arnold

https://odafabor.myhostpoint.ch

Entstehungsgeschichte

Ich habe meine erste Website für das fiktive Start up Namens «Manufaktur Arnold» erstellt. Die fiktive Domain und Surfer werden nach 30 Tagen gelöscht. Die Manufaktur Arnold stellt nachhaltige Delikatessen, wie Rotweinsalz, Holunderblütenzucker, Shrubs, usw. her. Daher sollte für das Unternehmen ein moderner Webshop erstellt werden. Darauf sollten die genannten Produkte in der Deutschschweiz vermarktet werden. Das Logo und die Bilder für die Manufaktur Arnold erstellte ich selber mit Adobe Illustrator bzw. mit einer Canon Kamera.

Der Style der Webseite sollte mit dem Logo und dem zu vermarktenden Produkt harmonieren. Daher wurde sich dazu entschieden das gratis Theme «Ashe» von Word Press zu customizen.

Auszüge aus meiner Website

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

Startseite (erster Beitrag)

Meine ersten Einstellungen, die ich verändert habe sind, die Headline, die Tab Einstellungen und die Menüleiste. Einerseits wurde das Logo auf der Suchleiste, ins Tab und in der Headline untergebracht. Andererseits wurde der Start up Name in der Footline und im Tab dargestellt. Zudem wurden Fotos im Headline eingefügt. Die Schrift wurde verändert. Alle Anfangsbuchstaben wurden automatisch gross geschrieben.

Auf der Startseite ist vermerkt, das es sich um eine Homepage für den schulischen Gebrauch handelt und gelöscht wird.

Shop

Ich erstellte anschliessend den Shop mit den entsprechenden Produkten. Dazu wurde die Produkte mit den Erläuterungsseiten durch Buttons verlinkt.  

Shrubs

Durch den Button «Shrubs» wird man durch einen Link auf die nachfolgende Seite verlinkt. Im Text ist ein Link auf die Wikipedia Seite eingefügt.

Die Buttons «Special Editions» und «Geschenkbox» wurden mit einer zweiten erstellten Webseite verlinkt auf der Bilder zu finden sind.

Kontakt & Gallerie

Aufgrund der noch ausstehenden Produktvielfalt konzentrierte ich mich anschliessend auf die Erstellung der Kontakt- und Gallerieseite.

Ich habe mich bei der Kontaktaufnahme für zwei verschiedene Methoden entschieden. Einerseits habe ich direkt einen Link eingefügt und andererseits einen Button mit einem Link versehen, der direkt mit der Email verlinkt ist. Durch den Befehl «mailto» wird automatisch beim Anklicken Outlook geöffnet und man kein eine Email an die Manufaktur Arnold schreiben.

Auf allen Seiten werden zudem ein Kalender und die zuletzt angesehenen Produkte des Kunden angezeigt.

Plugins

Ich habe diverse Plugins ausprobiert. Einige funktionierten besser als andere, wobei nicht alle bis am Ende fertig registriert wurden. Ich habe mich für nachfolgende Plugins entschieden, da es sich um ein Web Shop handelt.

Für mich waren die Plugins WooCommerce und WP Google Maps die wichtigsten. Ich habe diese Plugins soweit implementiert, das sie ohne grosse Registrierung bei der Erstellung des Online-Shops verwendet werden können. Dabei war besonders WooCommerce von zentraler Bedeutung. Ich konnte dadurch Produkte darstellen und verlinken, wie auch die Buchung und den Versand organisieren.

Wie die meisten Webseite, wurde auch auf dieser Webseite/Webshop eine Karte mit der Adresse des Unternehmens angegeben. Der verwendete Plugin ist WP Google Maps. Die fiktive Kontaktadresse konnte dadurch auf der Kontaktseite dargestellt werden.

FAZIT

Das Erstellen einer Webseite/Webshops ist allgemein sehr spannend und zeitaufwändig. Für mich war das Erstellen einer Website mit Word Press zu Beginn einfacher und kreativer als mit HTML, was daran liegt, das ich schneller Bausteine zusammenstellen konnte. Ich fand jedoch schnell die Grenzen von Word Press kennen. Gratis Webshops Themes waren nicht so ästhetisch wie die gratis Blog Themes. Letztere musste ich in dieser Aufgabe anpassen. Die Anpassungen musste ich teilweise durch HTML vornehmen, was komplexer war. Allgemein konnte ich viel lernen. Für mich sind nachfolgende Learnings wichtig: Nebst den Themes und dem Programmieren, sind der Zeitfaktor und die Kosten zur Erstellung einer Webseite weitere Faktoren, die limitieren können. Der Zeitaufwand ist gross. Man kann viel mit viel Zeit. Zudem sind viele Themes und Plugin kostenpflichtig, unteranderem auch die Domain. Für eine professionelle Homepage ist eine eigene Domain essenziell. Kostenpflichtige Plugins können das Verwalten der Homepage erleichtern. Fazit: Eine Kombination aus Word Press und «Programmieren» ist der Schlüssel für eine professionelle Homepage.

Nicole Matt – Projekt Word Press

Dies ist eine rein fiktive Seite und wurde nur zu Übungszwecken im Modul Buux442 erstellt. Die Seite wird nach 30 Tagen gelöscht. Matt Erdbewegungen und Transporte besteht als Unternehmen jedoch wurden die Inhalte der Homepage frei erfunden und dienen Übungszwecken.

Startseite

Auf der Startseite sind die Aktualitäten sowie das Menü welches auf die verschiedenen Seiten verweist. Als erster Beitrag ist hier eine Stellenausschreibung eingefügt. Mittels eines Buttons wird auf den Beitrag der Stellenausschreibung verwiesen.

Service

Im Unterpunkt Service werden die verschiedenen Dienstleistungen erläutert. Im Artikel wurde unter NEU Stockpressen ein Beitrag mit verlinkt.

Jobs

Im Untermenü Jobs werden aktuelle Stellenanzeigen gepostet. Hier wurde mit einem Plugin direkt ein Kontaktformular eingefügt um die Kontaktaufnahme für den User zu erleichtern.

Kontakt

Im Untermenü Kontakt wurde ebenfalls noch ein Kontaktformular mittels Plugin erstellt. Zudem wurde zusätzlich noch ein Plugin für Google Maps eingefügt.

Footer

Im Footer werden durch eingefügte Widgets auf jeder Seite der aktuelle Terminkalender sowie die neuesten Beiträge angezeigt.

Blog Beiträge

Zudem wurden noch ein Blog Beitrag zur neuen Stockpresse erstellt. Nach und vor dem Beitrag sind Autor, Datum, und Kommentarfunktion ersichtlich.

Bienvenue à Kidscanteen

Projet Webtech/Wordpress Diane Marty HAFL 2021

Le site présente une société de services de restauration fictive destinée aux enfants. Lien: https://wamigohi.myhostpoint.ch/wordpress/

Homepage view
Page de contenu avec un calendrier et une horloge
Page de contenu avec les photos des snacks et un tableau des menus de la semaine
Contenu
Formulaire de contact

Les options commentaires ont été supprimés sur les pages.

Schweizer Bergheimat

Ausgangslage

Das Wahlmodul „Web-Technologien“ findet ausgerechnet statt, während dem sich meine Familie in einem Quarantänestrudel befindet. Die Primarschule meiner beiden jüngeren Töchter ist offenbar ein Corona-Hotspot und wurde vom KAZA ab dem 11.2.2021 auf Fernunterricht umgestellt. Dazu kam zuerst die Quarantäne für die Kindergartenklasse meiner jüngsten Tochter und danach diejenige für die 5. Klasse der mittleren Tochter inkl. Familien. Somit fällt sämtliche Kinderbetreuung weg und es finden bei uns zuhause neben dem Web-Technologie-Modul auch noch Kindergarten und 5. Klasse-Fernunterricht sowie home office statt. Eine denkbar ungünstige Ausgangslage für mich als Wahlmodulteilnehmerin.

So stand mir viel weniger Zeit als eingeplant zur Verfügung und ich konnte mich nur oberflächlich in die weiterführenden Seiten wie W3Schools oder die WordPress-Dokumentation einlesen.

Eine Web-Seite ist dennoch entstanden. Die Inhalte habe ich aufgrund der erschwerten Umstände nicht neu erfunden, sondern ich habe grösstenteils diejenigen der bestehenden Internetseite meines künftigen Arbeitgebers, der Schweizer Bergheimat, übernommen.

Die Seite ist zugegebenermassen noch sehr rudimentär und entspricht weder einem Corporate design noch meinen Qualitätsansprüchen. Ich habe jedoch versucht, verschiedene Funktionalitäten einzubauen.

Aufbau der Seite

Die Seite hat eine Einstiegsseite mit dem Logo der Organisation und einem Titelbild. Unterhalb des Titels befindet sich die Navigation mit fünf Menupunkten, wovon aktuell nur einer eine Unterseite hat. Die Unterseiten müssten natürlich noch ausgebaut werden.

Seite Über uns

Auf dieser Seite wird die Organisation vorgestellt. Im Text befinden sich zwei Links, einer auf die Originalseite der Schweizer Bergheimat, die andere auf die Seite der Bio Suisse. Eine „Baustelle“ auf dieser Seite ist das Label mit dem Hinweis, dass dies eine Übungsseite ist. Dieses verschwand wieder von der Einstiegsseite, ohne dass ich es wieder gefunden habe.

Diese Seite verfügt über die Unterseite „Aktuelles“. Auf dieser werden die Posts publiziert.

Seite Was wir wollen

Hier habe ich mit dem Plugin Meta-Slider eine Bilder-Slideshow eingebaut. Das hat sehr gut funktioniert.

Seite Geschäftsstelle

Dies ist meine Sorgenseite, zwei Probleme konnte ich darin bisher nicht lösen. Der obere Teil der Seite (siehe Bild links) ist ok, der untere Teil mit Öffnungszeiten und Karte funktioniert leider nicht optimal. Beim Plugin Maps konnte ich den Zoom nicht korrekt einstellen. Die Aktualisierung der Karte war äusserst langsam und schliesslich ist der viel zu nahe Zoom eingefroren, ohne dass ich ihn hätte ändern können.

Die Öffnungszeiten geraten auf der Seite viel zu stark nach links, was ich auch noch nicht beheben konnte.

Seite Mitgliederbetriebe

Auf dieser Seite befindet sich oben eine Bildergalerie, die natürlich nichts mit dem Inhalt zu tun hat, bzw. sinnvollerweise Bilder von Betrieben zeigen sollte.

Darunter folgt eine Tabelle mit Betrieben, wobei deren Namen und auch ein Angebot mit ihren eigenen Internetseiten verlinkt sind.

Seite Arbeitseinsätze

Hier ist das einzige „spannende“ ein Kontaktformular.

Barrierefreiheit

Ich habe versucht, im Sinne der Barrierefreiheit meine Seite möglichst einfach aufzubauen. Die vorliegende Seite ist natürlich keineswegs fertig. Aber auch eine vollständige Seite würde nicht zu viele Ebenen enthalten und wäre möglichst übersichtlich. Soweit mir bekannt ist, lesen Programme für Sehbehinderte den Alternativtext von Bildern vor, wenn die Nutzenden mit der Maus auf das Bild fahren. Es ist mir deshalb wichtig, bei den Bildern jeweils einen Alternativtext zu hinterlegen.

Schlussfolgerungen

WordPress ist ein interessantes Programm, mit dem relativ einfach eine Internetseite erstellt werden kann. Was mir zu Beginn Probleme bereitete, waren die Voreinstellungen des gewählten Themes. Bis ich darauf kam, dass meine Mühen nicht mit mir zu tun haben, sonden mit dem Theme, brauchte ich eine Weile. Nach dem Wechseln des Themes ging es wesentlich besser.

Allgemein scheint mir aber WordPress in erster Linie ein Programm zum Erstellen eines Blogs zu sein. Für den Aufbau einer guten Inhaltsseite braucht es doch vertieftere Kenntnisse, die ich mir aufgrund der erschwerten Umstände nicht aneignen konnte. Ich habe mir deshalb mit einigen Anleitungsvideos auf Youtube geholfen und dadurch einige Tricks entdeckt.

Weiterentwicklung

Was mich noch sehr interessieren würde ist, wie die Seite zusätzlich kopiert werden könnte, damit sie auch in einer anderen Sprache zur Verfügung steht. Meine Seite sollte in allen vier Landessprachen besucht werden können.

Ebenfalls spannend fände ich auszuprobieren, wie erhaltene Rückmeldungen (im Dashboard unter Feedback) als CSV-Datei exportiert werden können.

Timon Moser Projekt WordPress

Gedanken zum Konzept

Landing Page – Frontpage

Auf der ersten Seite, wird man willkommen geheissen und es gibt einen kurzen Einführungstext zur Schokoladen Firma.

Menü und Suchfunktion

Das Menü zeigt auf, was alles auf der Website gefunden werden kann. 
Es gibt zudem eine Suchfunktion und direkt Links zu den Social Media Konten der Unternehmung

Seite – Finde uns

Auf dieser Seite steht die Adresse der Firma. Auf der eingefügten Karte kann gesehen werden wo sich die Firma befindet.

Seite – Über uns

Hier wird die Firma, ihre Gründer und ihre Vision kurz beschrieben. 

Seite – Webshop

Auf der Website gibt es einen Webshop in dem die eigenen Produkte bestellt werden können. Mit rauf und runter Scrollen kann man die verschieden Produkte ansehen. Klickt man auf die Bilder kommt man auf die Detailansicht.

Seite – Warenkorb

Werden Produkte dem Warenkorb hinzugefügt kann man auf das Warenkorb Symbol klicken und es erscheint diese Seite. Hier erscheinen alle Produkte die dem Warenkorb hinzugefügt wurden.

Footer

Auf dem Footer sind verschiedene Informationen zu finden. Die Kontaktadresse mit Tel. und E-Mail können eingesehen werden. Weiter sind Metadaten sichtbar und es gibt ein lokales Werbevideo für die Stadt Thun.

Fando

https://uhomubut.myhostpoint.ch

Dies ist eine rein fiktive Seite und wurde nur zu Übungszwecken im Modul Buux442 erstellt. Die Seite wird nach 30 Tagen gelöscht – die Idee dahinter wird mich allerdings weiter verfolgen, da ich meinen Erstberuf in der Pflege weiterhin ausüben will.

Fando vermittelt Bauernhöfe mit einer Institution. Ursprünglich ermöglichte fando Tagesausflüge für Bewohner und Bewohnerinnen von Pflegeheimen. Heute vermittelt fando Tagesausflüge für jegliche Institutionen an. Da jeder Mensch individuelle Bedürfnisse und Einschränkungen hat, begrenzt sich fando nur auf die Vermittlung der Kontakte. Die Abklärungen, ob ein Ausflug mit einer Klienten-Gruppe möglich ist, trifft der Institutionsleiter direkt mit dem Partner-Bauernhof. Fando erleichtert die Kontaktaufnahme, hilft beim Organisieren und weiss, welche Abklärungen vorher getroffen werden müssen.

Gestaltung, verwendete Elemente

Mit WordPress kann ich die Seite über das Dashboard und die Programme gestalten oder „Live“ indem ich die Seite so sehe, wie sie anschliessend für andere Nutzer sichtbar ist und dort auf zu ändernde Elemente klicke. Die „Live-Variante“ habe ich v.a. für die letzten Schritte genutzt, da die vielen Möglichkeiten im Dashboard besser ersichtlich waren. WordPress bietet vorprogrammierte Themes. Ich habe mich für „Neve“ entschieden, da es sehr schlicht gehalten ist und ich nicht durch viele Features oder Grafischen Spezialeffekten vom Thema ablenken wollte.

Die Startseite enthält lediglich den Slogan, das Logo von fando und die Menüleiste (Über uns – Gutsbetriebe (mit Unterkategorien) – Kontakt – Suchfunktion). Die Menüleiste bleibt beim Navigieren durch die verschiedenen Kategorien immer angeheftet.

Das Kapitel „Über uns“ erklärt den Gedanken hinter dem Projekt fando und die Namensentstehung. Zudem enthält die Seite ein Youtube-Video und ein pdf-Dokument, welches entweder geöffnet oder direkt heruntergeladen werden kann.

In der Rubrik „Gutsbetriebe“ kann man entweder über die Menüleiste auf die Portraits der Betriebe navigieren. Oder man nutzt einen Button, der einen per Mausklick direkt zum Portrait leitet.

Die Portraits enthalten einen kurzen Beschrieb, eine Liste, welche die wichtigsten Faktoren aufzählt, Fotos/Videos und einen Button, der direkt zur Internetseite des jeweiligen Betriebs führt – wenn dieser existieren würde.

In der Kontaktrubrik findet sich die Telefonnummer und die E-Mail Adresse von fando. Die E-Mail Adresse leitet den Nutzer direkt zu seinem E-Mail Account. Da erfundene Firmen wie fando keinen festen Geschäftssitz haben, zeigt GoogleMaps den Standort der HAFL in Zollikofen an.

Fazit

Die Seite ist sehr schlicht gehalten und ist v.a. mit weiterleitenden Buttons oder Links gestaltet. Falls ich weiter an dieser Idee arbeite, wäre es sicher sinnvoll im Bezug auf die Bauern-Betriebe einen Suchfilter einzurichten mit Filterfunktionen wie „Sitzgelegenheit geschützt“, „Rollstuhlgängige Toilette“, „Demenzgerecht“, „Pflegebetten“, etc. Da ein solcher Ausflug aber sehr viel Planung benötigt und viele Fragen erst entstehen, weil ein Klient ein bestimmtes Krankheitsbild aufweist, bleibt der Kontakt von den Institutionen zu den Bauern-Betrieben ein wichtiges Gut.

Blomberghof

Link: https://vipuseso.myhostpoint.ch/

Diese Website ist ein Betriebsportrait meines elterlichen Betriebes. Ich möchte mit einer Website einen kleinen Einblick geben und es soll auch ein Verkaufskanal für unser Fleisch entstehen.

Die Website ist sehr neutral gestaltet, da ich nicht ein bestimmtes Kundensortiment anstrebe möchte, sondern gerne Kunden von jung bis alt hätte.

Startseite

Auf der Startseite steht als erstes unser Logo im Vordergrund, welches eher verspielt wirkt. Das Hintergrundbild ist auf allen Seiten das selbe, was eine gewisse Struktur gibt.

Über uns

Ich habe sechs Menupunkte gestaltet, welche Auskunft geben. Im Kapitel „Über uns“ werden die wichtigsten Betriebszweige vorgestellt.

Bildergalerie

Im Menuteil „Bildergalerie“ wurde eine Galerie mit ein paar Bildern eingefügt.

Shop

Da ich keinen Shop an sich eröffnen möchte, habe ich mittels des Plugin „MailPoet Subscription Form“ eine Einschreibeliste kreiert.
Da wir nicht zu jedem Zeitpunkt Fleisch haben und dieses auch nicht im grossen Stil lagern können, sollte die Lösung diese Liste sein. Eingeschriebene Personen werden jeweils kontaktieren wennn geschlachtet wird. So können sich sich Personen mit Name, Email und gewünschter Menge Fleisch einschrieben.

Kontakt

Zu guter Letzt habe ich noch unsere Kontaktinformationen hinterlegt. Dies umfasst natürlich Adresse und Telefonnummer.
Weiter sind Social Icons vorhanden, welche auf die Netzwerke verlinken (jedoch keine Seiten vorhanden).
Mittels dem Plugin „WP Map Block“ habe ich zusätzlich eine Karte mit unserem Standort eingefügt.