Während dieses Kurses habe ich mich entschieden, die Website des Familienbetriebs neu zu gestalten, vielleicht werden wir diese Seite in Zukunft als unsere Offizielle Webseite benutzen.
Bei der Auswahl des Themas habe ich darauf geachtet, dass es eine saubere Seite ohne zu viele Schnörkel ist, da ich viele Bilder verwenden wollte und die Seite nicht zu unübersichtlich werden sollte, ich habe mich für das Thema „Nature Bliss“ entschieden. Was mir auch wicht war ist, dass die Seite in zwei Sprachen, Italienisch und Deutsch, verfügbar sein sollte, was dank eines Plugins (Polylang) möglich war.
Auf der Startseite finden Sie eine kleine Präsentation des Betriebes und ein YouTube-Video, das Coop vor einigen Jahren gedreht hat und das unsere Familienbetrieb in wenige Minuten präsentiert. Der Rest der Website stellt die Familie, unsere Produkte und Dienstleistungen vor, vom Direktverkauf über Gastronomie bis zum B&B. Für mich ist es wichtig, einen klaren Look zu haben mit trotzdem vielen Bildern, die meiner Meinung nach besser erklären als Worte.
Ausserdem wollte ich auf der letzten Seite „Kontakte“ eine Karte mit 2 Platzhaltern für unseres Agroturismus und das Selbstbedienung-Laden haben, was ich mit dem Plugin „WP Map Block“ erzielen konnte.
In der letzten Woche wurden 2 Webseiten auf unterschiedliche Arten erstellt. Die erste wurde mit dem Programm WordPress erstellt und die zweite wurde von Grund auf selber mit HTML und CSS erstellt. Im untenstehenden Beitrag wird auf die Webseite eingegangen, die mit WordPress erstellt wurde.
Es wurde eine Webseite für einen Verein erstellt. Es besteht bereit eine Webseite für die Landjugend untere Emme. Der Inhalt wurde grösstenteils von dieser Seite übernommen und es wurden kleinere Anpassungen gemacht.
Auf der Homeseite werden die Besucher begrüsst und es sind die Social Media-Konten der Landjugend verlinkt.
Weiter besteht eine Seite mit dem Vorstand, mit Informationen über den Verein, das Programm wurde eingefügt, es gibt verschiedenen Bildergalerien und eine Seite enthält ein Kontaktformular.
Ich gehe nur kurz auf diese Seiten ein, bei denen etwas spezielles zur Gestaltung eingesetzt wurde.
Das Programm (PDF-Datei) konnte ganz einfach über den Block Datei eingefügt werden. Wie unten ersichtlich wurde es so eingefügt, dass es direkt sichtbar ist und angeschaut werden kann. Unterhalb hat es zusätzlich einen Button, mit welchen das PDF heruntergeladen werden kann.
Plugin wurden diverse eingesetzt. Für die Galerie wurde das Plugin NextGen Gallery eingesetzt. Dort konnten Galerien erstellt werden. Die Galerien konnten einem erstellten Album hinzugefügt werden und am Ende konnte direkt das Album eingefügt werden und es werden alle Galerien von diesem Album nebeneinander angezeigt.
Auf der Seite Bildergalerie befindet sich eine einzelne Galerie mit ein paar Schnappschüssen von den letzten Jahren. Zudem wurden bei dieser Seite mehrere Unterseiten für jedes Jahr gemacht.
Diese Unterseiten enthalten je ein Album welches mehrere Galerien enthalt. Auf der Webseite wird dies so angezeigt:
Weitere Galerien würden unten dran folgen.
Ein weiteres verwendetes Plugin ist das Kontaktformular.
J’ai décidé de créer un site pour présenter 2 de mes passions: la photographie et la moto. Pour ce faire, j’ai débuté par utiliser un modèle prédéfini sur WordPress que j’ai ensuite adapté, habillé et peaufiner pour que cela ressemble à ce que je voulais.
L’objectif est de présenter les images et l’équipe de travail, mais aussi, de proposer une option d’achat pour les photos. En proposant un portfolio et un formulaire de contact pour définir quelles sont les photos et les formats qui sont demandés.
On commence donc sur cette première page, Home, du site. Elle s’occupe de captiver l’attention de l’utilisateur grâce a plusieurs images défilant derrière cette accroche „Découvrez un nouveau monde“. On peut aussi remarquer des informations de contact sur le haut de la page, ainsi que les liens direct sur les différents réseaux sociaux. Juste en dessous on peux voir le menu avec „Home“, „Découverte“, „Portfolio“, „Blog“ et „Contact“.
Sur la suite de la page, nous pouvons découvrir différents blocs présentant les objectifs du site et donnant des introductions sur les différentes pages du site. Des boutons cliquables renvoie directement sur les autres pages.
Un premier espace de contact est déjà disponible sur cette page.
Un rappel des coordonnées et des réseaux sociaux est fait tout en bas de la page.
Découverte
Ensuite nous passons sur la page Découverte qui permet de présenter l’équipe derrière le travail de modèles et photographe. De plus, nous en avons profiter pour partager notre vision de la moto et de la photo.
Portfolio
Sur cette page, Nous retrouvons les différentes photos que nous proposons. Il y a deux méthodes pour les voir:
La première est une simple suite d’images avec les numéros pour les identifier.
La seconde est un format diaporama pour lequel j’ai utilisé une version gratuite de l’extension „NextGEN Gallery“.
Blog
Cette page nous permet de facilement partager notre actualité et aussi de recevoir des commentaires de la part des visiteurs. Les carrés bruns sont remplaceables par des images si on remplis correctement le formulaire pour l’article.
Contact
Cette page permet d’envoyer directement un mail.
Extension „Jetpack“
Cette extension permet de visualiser les statistique du site telles que le nombre de visiteurs, leurs origines, le nombre de clics, etc… Toutefois la version gratuite est assez limitée.
In the first day, we had to create a Website with WordPress. So first I had to figure out, what kind of website I want. As I had no idea, and no plan to ever make a Website, I decided to just invent something.
That was the birth of my „Formicia Antventure“ Website!
The Idea was, that a section of a Ant colony tries to get more Ants to joint their ranks and go adventureing.
So I tried to find a fitting Design and tried out 3. Wasn’d happy with it and started over. So I chose to take a plugin wich gave me to option to create a WordPress design with AI (starter Templates). So I did that and hoped for the best! Alongside this plugin I allsow installed some plugins that helped me modify the Desing and the sites of the Website.
The Webite was fine, I guess. I added one extra site and made a blog Post wich was accessible via a Button. But I felt verry restricted in how to build the Website and what features I want.
So the second day, where we learned to make our own Website with HTML and CSS was way more intresting for me.
Ironicly I tried to copy the Website I had created with WordPress in HTML and give it my own touch. But to noones suprise it was way more work. In the End, I am verry satisfied with my work. Probably becouse it felt like I made everything by my self (with a lot of help from Chat GPT).
WordPress (top) html (bottom).
My html-website had a verry similar homescreen as the wordpress Website. The Button leads on to the bottom of the Site, where you see the informations, how to join the Ant Expeditions. The header is fixed. So you allways see it, even if you scroll down. This was probably the best improvment to the WordPress site. The links in the header leads you to a second Site, similar as in my wordpress site, and to the WordPress Website itselfe. When you click on the logo (or the website Name) you get to the top of the main html-site.
WordPress (top) html (bottom).
The header is the same on the second site, wich would be more important, fi you add more sites.
The most demanding part of making the whole website with html was to arrang Objects and sections in a way, that look good.
WordPress (top) html (bottom).
I had strugles to create a body with a image as a background, while writeing on top of it. I allsow created a object that has transparent gray ontop of the img, so it looks darker, this was somewhat the same, as it was on the wordpress website. But alining everything, and allsow making shure, that the text was abov the image and the shade took quite a while.
On the second part of the picture you see how I tried to aling diffrent textes in sepeart colums. But if you konw html, you see that I made some pseudo-objects to creat thees fine lines and checkmarks. Learning how to make those, gave me the freedom to add little items to decorate the Website. Little decorations that took a lot of work.
I couldend work fast enght, to make everything with html and css in 3 Days, what I made in Worpress in 1 Day. So I mad no Post in the html-website and left out 2 sections in the mainsite.
Conclusion
If I’m ever to make a serious Website, I probably want to make it from scratch with html/css/js. With the main reason that its just way more fun. I allsow think that with a bit of training, the website looks way better if done with html and allsow not as generic as with WordPress.
I realy enjoyed playing around with html/css and invite you to look around on the Website at:
Die Überlegung hinter der Website „Carfunkelt“ ist keine fiktive. Das Unternehmen existiert wirklich und die Homepage soll bestehen bleiben und seine Funktion als Informationsträger liefern. Folgende Screenshots repräsentierten die Homepage und deren Inhalte:
Die Startseite soll schlicht und übersichtlich daherkommen. Alle Informationen sollen einfach ersichtlich sein. Ich habe ein Theme gewählt Namens „Car wash“.
Die Website-Besucher sollen alle Dienstleistungen erkennen und wissen wie und wo man sein Auto reinigen kann. Die Vorlage habe ich bearbeitet und angepasst.
Der Standort ist mit einem Plug-In der Google-Maps Version gut ersichtlich. Zuerst muss man das Feld der Map anklicken, um die Bestimmungen von Google Maps zu akzeptieren. Danach öffnet sich das Feld.
Um unser Personal ersichtlich zeigen zu können sollen die Leute wissen wer in der Anlage arbeitet. Hier habe ich eine Vorlage verwendet und angepasst.
Im Footer sind noch die sozialen Medien und eine Suchfunktion verlinkt.
Die Leute sollen über die Autowaschanlage und Neuerungen informiert werden. Ausserdem wird die Homepage noch mit einem Kontaktformular und mindestens einem weiterem Plug-in ergänzt. -work in progress 🙂
Le site a été conçu dans le cadre du cours BUUx442 „Programmation et graphisme pour le web“. Ce cours nous a permis de nous familiariser et progresser dans l’utilisation de langage informatique tels que html, CSS, PhP, javascript , ainsi que dans l’utilisation de WordPress.
La création d’un site internet était donc la bonne occasion de rendre service à un membre de ma famille qui avait justement besoin d’un nouveau site web pour l’entreprise dont il est directeur. L’entreprise n’a donc pas été inventée, elle existe réellement. C’est donc génial de pouvoir lier les compétences apprises cette semaine à la pratique et de savoir que ce site va être utile pour quelqu’un par la suite.
Le site présenté ci-dessous a donc été réalisé avec l’outil WordPress.
Ce site a pour but de présenter l’entreprise et les employés, ainsi que les services proposés par celle-ci, ses fournisseurs et comment on peut la contacter. Le thème du site doit donc être simple, élégant et professionnel.
Présentation du site
Tout d’abord, un menu a été crée pour permettre aux clients de naviguer facilement entre les thèmes afin de trouver le sujet qui l’intéresse.
La page d’accueil du site est très importante pour une entreprise. Elle doit faire bonne impression tout en poussant le client à devenir acheteur. C’est pourquoi j’ai décidé de mettre directement un „call to action“ (l’image, avec le texte de bienvenue et le bouton „Nos services“), qui est en fait un appel inconscient pour le client afin de l’invité à devenir acheteur en allant directement voir la proposition de service fournit par l’entreprise.
Toujours dans l’idée de convaincre l’acheteur des qualités de l’entreprise, j’ai choisi de présenter l’entreprise et de mettre en avant ses qualités, tout en illustrant mes propos avec des photos. Cette première page pourrait en quelques sortes se présenter comme l’identité visuelle de l’entreprise.
Par le menu, les clients ont alors la possibilité d’en apprendre plus sur l’entreprise grâce aux pages dédiées à son histoire et son équipe ou encore de découvrir les projets passés, en cours ou ainsi que leur donner un peu d’inspiration pour leur futur maison à travers la galerie photo.
Une page est également dédiés aux fournisseurs collaborant avec l’entreprise. Vient ensuite une page permettant aux clients de s’informer sur l’actualité de l’entreprise. Le service de communication pourra s’en servir par exemple pour informer les clients des périodes de fermetures de l’entreprise ou simplement pour leur souhaiter des belles fêtes de fin d’année.
Pour finir, une page de contrat, ainsi qu’une page contenant les horaires mis à disposition du client afin qu’ils puissent facilement retrouver l’entreprise. Un formulaire a également été créé afin que le client puisse facilement prendre contact avec les employés de l’entreprise, pour obtenir un rendez-vous.
Plugins utilisés
SEOKEY a été installé dans le but d’optimiser les moteurs de recherche pour notre site, en ajoutant des mots clés, des définitions et des métadonnées qui permettront aux clients de tomber sur le site de l’entreprise.
W3 Total Cache a été installé dans le but d’améliorer la vitesse et l’expérience utilisateur du site internet. C’est un plugin utile lorsqu’on a beaucoup de photos sur le site, mais également beaucoup de plugins qui peuvent ralentir le temps de chargement de la page.
Otter blocks permet d’autres agencements des blocs et de la galerie photos. J’ai beaucoup utilisé ce plugin pour sa fonction „slider“.
Option „slider“
Contact form 7 a été installé pour pouvoir introduire un formulaire de contact.
Call to action Customizable Block a été installé afin de créer la bande „call to action“ mise sur la page d’accueil dans le but de pousser les clients vers la page des prestations et services proposés par l’entreprise. Le plugin permet notamment une personnalisation de la photo utilisé dans le „call to action“.
Protection anti-spam Akismet a été installée pour protéger le site web des spams.
Utilisation future du site
Des améliorations vont encore être apporté dans les semaines et mois à venir. Notamment des photos personnalisées vont être ajoutées. En effet, j’ai utilisé plusieurs images libres de droit pour développer le site. L’idée, à l’avenir, est de changer ces photos libres de droit pour des images prises dans l’entreprise lors du travail des employés.
Im Rahmen dieses Moduls haben wir uns dazu entschieden, eine Website zu erstellen, welche für mich als Fotografie Portfolio dient. Die Idee war zudem, dass ich die Website nach dem Modul möglicherweise weiter benutzen könnte, um im Netz präsent zu sein.
Dafür hat sich insbesondere WordPress als geeignetes Tool angeboten. In WordPress können einfach verschiedene Designs/ Themes ausgewählt werden, welche zum Inhalt der geplanten Website passen. Auch die Suche passender Templates über enstprechende Filter, wie beispielsweise „Fotografie“ ist möglich.
In der untenstehenden Abbildung ist oben links das von uns gewählte Theme zu sehen.
Die untenstehende Abbildung zeigt nun die Hauptseite der von uns erstellten Website. Die drei Themenbereiche Landschafts-, Portrait- und Reisefotografie wurden separat gegliedert. Wichtig war uns, die Seite übersichtlich und simpel zu gestalten.
Klickt man auf die unterschiedlichen Bereiche, gelangt man zu einem einfachen Portfolio (einer Bildersammlung). Das Portfolio zeigt Fotos, welche in den entsprechenden Bereichen gemacht wurden. So kann sich die Person, welche die Website besucht, besser ein Bild meiner Arbeit machen.
Möchte man die einzelnen Bilder genauer betrachten, gibt es zudem die Möglichkeit, in eine via Plugin geschaffene Bildergallerie zu wechseln. Dies ist in der Abbilung unterhalb zu sehen. In der Gallerie kann man die Bilder vergrössern, teilen oder auch die Aufnahmeinformationen des Bildes nachlesen.
Zudem war uns wichtig, dass die Besucher-/innen der Website auch etwas über aktuelle Projekte erfahren. Hierfür eignet sich die einfache Blog-/ Beitragsfunktion, welche von Grund auf in WordPress integriert ist. Mit dieser Funktion können einfach neue Beiträge erstellt werden, wobei diese chronologisch geordnet werden (was bedeutet, dass der aktuellste Blogeintrag immer zuoberst erscheint).
In unserem Fall wurden zwei Beiträge erstellt mit einigen Bildern der letzten zwei Reisen, welche ich unternommen habe. Die Blogeinträge können von den Websitebesuchern-/ besucherinnen auch kommentiert werden.
Eine weitere wichtige Funktion unserer Website ist zudem der Link via Button zu Instagram, wo weitere Bilder und aktuelle Arbeiten betrachtet werden können. Für Personen, welche keinen Zugriff auf Social Media haben, besteht zudem die Möglichkeit über ein Kontaktformular zu kommunizieren, welches direkt mit meiner Mail verbunden ist.
Im folgenden Abschnitt wird nun noch die Erarbeitung einer HTML Seite vorgstellt (https://hasn.ch/students/02_LangeneggerHochhuth/HJHochhuth.html). Die Idee hierbei war, die Seite möglichst nah am „Original“ auf wordpress zu halten.
Für die HTML-Website haben wir rund 300 Zeilen Code gebraucht. Darin beinhaltet ist ein Nachbau der WordPress-Website, sowie eine Uhr mit Javascript. Nachdem einige Schwierigkeiten aus der Welt geschafft wurden, (danke Flexbox für die Kopfschmerzen), stand endlich unsere eigens gebaute HTML-Seite, welche unterhalb zu sehen ist.
Darin enthalten sind diverse Links, die auf einzelne Fotogallerien in WordPress verweisen, sowie auch einen Link mit entsprechendem Symbol zu Social Media.
Ganz unten haben wir noch ein Nachrichtenfeld eingefügt, womit Besucher-/ innen uns Nachrichten zukommen lassen könnten. Eigentlich wollten wir uns damit Mails zusenden lassen, aber nach cirka zwei Stunden festgestellt, dass das unsere Fähigkeiten leicht übersteigt. Nach vielen kleinen Tweaks und Additionen stand dann unsere Website wie ihr sie seht.
Mit PHP haben wir dann schlussendlich noch eine kleine Fotogallerie serverseitig eingerichtet. Dafür haben wir einige Bilder von unserer Website geholt, und sie auf den Server geladen. Die Bilder werden in unserem Ordner auf hasn.ch als Thumbnail angezeigt und erst bei anklicken vergrössert, was dann doch eine ziemliche Datenerpsarniss beim laden der Website ergibt.
Diese letzte Abbildung zeigt, welche Datenmengen bei solch einem kleinen Spass anfallen können 🙂
Im Rahmen des Moduls «BUUx562 Web-Technologien und Web-Design NT FS24» wurden zwei Webseiten erstellt. Eine davon mit Hilfe des Tools WordPress, die andere von Grund auf mit HTML, CSS und JavaScript. Dabei habe ich mich entschieden, die zuvor mit WordPress erstellte Website in HTML mit allen Funktionalitäten so gut wie möglich nachzubauen.
Die WordPress-Seite ist bis am 12.03.2024 unter folgendem Pfad abrufbar: https://wowekego.myhostpoint.ch/. Es handelt sich um einen Blog mit Startseite und zwei Unterseiten. Für die WordPress-Seite wurde das Thema «Tewenty Tewnty-Four» gewählt. Dieses wurde anschliessend angepasst. Genauer wurde der Header verändert, um die Links zu den beiden Unterseiten anzuzeigen und der Footer so weit angepasst, dass dieser immer zu der Hauptseite verlinkt und einen Disclaimer enthält. Der Body wurde auf das Wesentliche reduziert. Dazu gehört ein eine Schaltfläche mit einem Link zum «Interaktiven Stegosaurus», welcher der Hauptinhalt der Seite bildet. Darunter befindet sich eine Slideshow mit Bildern eines Stegosaurus-Skeletts. Darunter befindet sich weiter ein Zitat aus einem Wikipedia-Artikel.
Auf der Unterseite «Lerne den interaktiven Stegosaurus kennen» befindet sich ein Bild eines Stegosaurus-Skeletts. Mit Hilfe der Plugins «Draw Attention» und «Elementor» wurden einzelne Bildteile gemappt, damit diese mit dem Cursor angewählt werden können. Beim Klicken wird der Besucher auf einen Wikipedia-Abschnitt des gewählten Skelett-Bestandteils weitergeleitet, welcher mit der anwählbaren Schaltfläche verlinkt wurde.
Die zweite Unterseite des Blogs, «Finde den Stegosaurus in deiner Nähe», beinhaltet eine Anzeige für das Sauriermuseum in Aathal (ZH) mit eingebetteter Karte von Google Maps, welche die Funktion eines Routenplaners beinhaltet. Oberhalb der Karte befindet sich eine Schaltfläche, welche auf die Webseite des Sauriermuseums verlinkt, genauer den Abschnitt mit den Öffnungszeiten und Eintrittspreisen.
Die HTML-Seite wurde auf den Server hasn.ch hochgeladenen und ist unter dem Pfad https://hasn.ch/students/11_Wullschleger/htmlcss/ abrufbar. Am anspruchsvollsten war das Implementieren der Mapping-Funktion für den «Interaktiven Stegosaurus».
Die Mapping-Funktion konnte ohne grössere Probleme mittels CSS auf das Bild angewendet werden. Leider hat sich der Effekt für das Aufleuchten des entsprechenden Bereichs, wie es im Screenshot der WordPress-Seite erkennbar ist, als schwierig herausgestellt. Nach Ausprobieren verschiedener Lösungen bin ich zum Schluss gekommen, dass die Hover-Funktion der verwendeten jQuery die vielversprechendste Methode ist. Leider leuchtete der Bereich bis zum Schluss nicht auf, obwohl der Code korrekt war und der Effekt nicht von einem anderen Effekt überschrieben werden sollte. Zur Kontrolle wurde ein «console.log»-Befehl in die Funktion integriert. Bei jedem Überfahren mit dem Cursor erfasst die Konsole einen Log-Eintrag, wodurch die Anwendung der Funktion ersichtlich wird.
Die Arbeit mit WordPress habe ich als sehr intuitiv empfunden. Es lässt sich damit in kurzer Zeit eine professionell aussehende Webseite, beziehungsweise ein Blog, erstellen. Die HTML-Programmierung ist deutlich aufwendiger, ermöglicht allerdings eine bessere Steuerung der einzelnen Inhalte, weshalb ich persönlich diese Methode bevorzuge.
Anlässlich des Wahlmoduls BUUx442 «Webtechnologien und -design» vom 12. bis 16. Februar 2024 kreierte das LMW-Duo um Clément Bastien und Hirsbrunner Marcel aus dem 1. Studienjahr eine Website des fiktiven Unternehmens «Cheesedream.ch». Die Homepage wurde mehrheitlich mittels Funktionen der WordPress-Software erstellt, einem Content-Management-System, das sich ohne grosse Programmierkunst bearbeiten lässt. Die insbesondere für Anfänger*innen geeignete Software ist das am weitesten verbreitete System weltweit und zeichnet sich durch ihre Webstandards, Eleganz, Benutzerfreundlichkeit sowie ihre Möglichkeiten zur Verwendung externer Plug-ins aus, weswegen das LMW-Duo nicht von derer Nutzung zurückschreckte. Daneben bot das Modul ebenso die Gelegenheit, die eigenen Programmierkompetenzen auszubessern und weiterzuentwickeln. So wurden einfache Websites anhand von HTML-, CSS-Codes und JavaScript-Funktionen im Visual-Studio-Code-Editor von Grund auf selbst programmiert, wobei nebst zahlreichen Übungen ein möglichst identisches Abbild der mit WordPress erstellten Homepage repliziert wurde.
Die erstellte Webseite liegt der Geschäftsidee eines Käsereishops zugrunde. Die Firma mit Sitz in Zollikofen BE vermarktet ihren Käse nicht nur über den Ladentisch, sondern ebenfalls per Webshop. Hausgemachte Käsespezialitäten erlangen damit entsprechend mehr als nur lokale Bedeutung. Nebst dem E-Commerce betreibt das Unternehmen einen Verkaufsladen sowie ein kleines Café und übt daneben weitere verkaufsfördernde Aktivitäten aus (z.B. Käsesommelier-Ausbildung, Moonlight-Dinner…). Mithilfe des WordPress-Tools wurden einzelne Seiten und Beiträge obengenannter Firma verfasst, Designgestaltungen vorgenommen, Menüleisten erstellt, Header und (Footer) Sidebars bearbeitet und webspezifische Plug-ins installiert.
Als Basisdesign wurde das Free Restaurant WordPress Theme ausgewählt, welches sich sowohl inhaltlich als auch visuell für den Verkauf von Lebensmitteln bewährt. Es enthält eine schlichte Grundstruktur und zeichnet sich durch seine Übersichtlichkeit aus, was sich speziell im Webshop-Business als Vorteil erweisen kann. Mit dem gewünschten Customizing der Produkte soll das Theme deswegen möglichst «customerkonform» zur Geltung kommen.
Nebst den Grundfunktionen kamen folgende Plug-ins zur Anwendung:
WooCommerce erlaubt es, den gesamten Produktbestellungsvorgang auf einer Site zu verknüpfen und zu vereinfachen. Dazu wurden die Käseprodukte und ihre dazugehörigen Preise aufgeführt, eine Warenkorb-, Kassen- und Kontoseite erarbeitet sowie die dazugehörigen Widgets auf der Site positioniert. Darüber hinaus lassen sich die Produkte mit WooCommerce bewerten, kennzeichnen, filtern und anhand von Sammlungen sortieren. Mit dem Zusatz-Tool WooPayments können Umsatzsteuern, Zahlungs- und Versandoptionen erfasst werden.
Jetpack ist für eine Vielzahl von Funktionen auf der Homepage zuständig. Mit jenem Plug-in lassen sich beispielsweise eine KI-Suchleiste, Kontakt-, Anmelde- und Bewertungsformulare, ein CRM-System, ein Blogroll oder der Zugriff auf einen Kalender oder Social Media aktivieren, wie es auf Cheesedream.ch teilweise in die Tat umgesetzt wurde. Des Weiteren ist Jetpack in hohem Masse an Sicherheits- und Schutzfunktionen der Site beteiligt, tätigt Backups und Malware-Scans und leistet Gewähr für eine sichere Anmeldungsabwicklung sowie die Webgeschwindigkeit der Site. Jetpack setzt sich aus diversen «Unter-Plug-ins» zusammen und enthält u.a. Akismet, einen Anti-Spam-Dienst, der bereits vorinstalliert ist.
Mit WP Go Maps (formerly WP Google Maps) werden der Standort eines Unternehmens (Google Maps oder Open Layers Maps) sowie potenzielle Routen ermittelt. Auf diese Weise können Karten mit Beschreibungen, Bildern, Orten, Richtungsanweisungen und Links auftauchen. Bedauerlicherweise liessen sich unsere Anmeldeambitionen nicht mit den Interessen von WP Google Maps vereinen, weswegen der Unternehmensstandort als Screenshot in Google Maps mit dem dazugehörigen Link auf der Homepage aufgeschaltet wurde.
Modulrückblick:
Das Wahlmodul BUUx442 des Frühlingssemester 2024 war äusserst informativ, lehrreich und fördernd zugleich. Mit einer optimalen Mischung aus theoretischen Inputs, praktischen Demonstrationen und Selbststudieneinheiten wusste der Dozierende alle Modulteilnehmenden mit den vorbereiteten Inhalten zu überzeugen. Das Modul legt eine generelle Basis bezüglich des Programmierens von Codes und der Nutzung entsprechender Tools zur Be- und Aufarbeitung einer potenziellen Website.
Die Teilnehmenden: Clément Bastien und Hirsbrunner Marcel
Unsere Gedanken: Wir haben uns überlegt eine fiktive Website inkl. Online-Hofladen zu erstellen. Dazu haben wir uns zuerst eine Vorlage ausgesucht und die entsprechenden Plugins für den Online-Shop sowie die Karten Option heruntergeladen.
Wenn man die Webseite aufruft, kommt man direkt auf die «Über uns» Seite, dort kann man via die zwei Buttons «Shop» und «Kontakt» auch direkt zum Online Hofladen gelangen oder uns bei Fragen kontaktieren.
Wenn man weiter nach unten scrollt, werden die verschiedenen Betriebszweige unseres fiktiven Betriebes kurz beschrieben.
Auf unserer «Shop» Seite, finden sie eine aktuelle Auswahl unserer Hofprodukte, diese können mit einem Click in den Warenkorb gelegt werden. Den Shop haben wir mit dem Plugin WooCommerce erstellt.
In der Seite «Warenkorb» respektive links oben beim Einkaufswagen, kann man sich die Produkte ansehen, welche man kaufen möchte.
Weiter gibt es eine «Info und Kontakt» Seite, auf welcher man unsere Kontaktangaben findet oder bei Rückmeldungen oder sonstigen Anliegen gerne auch eine Kontaktanfrage senden kann.
Zum Schluss findet man den Google-Standort am Ende der Seite.
