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.
SkyEnvision ist ein kleines Unternehmen, das sich auf Fotografie und Videografie spezialisiert hat und dabei sowohl einzigartige Luftaufnahmen als auch traditionelle Perspektiven für jede Gelegenheit bietet. Mit einer Mischung aus technischem Know-how und kreativer Vision verwandeln wir Projekte in visuelle Meisterwerke. Unsere Dienstleistungen sind vielfältig und auf die spezifischen Bedürfnisse unserer Kunden zugeschnitten, sei es in der Food-Fotografie, bei Automobilpräsentationen oder durch die Freiheit der Drohnenperspektive. Skyenvision steht für Innovation, Qualität und unverwechselbaren Stil, um jede Geschichte eindrucksvoll zu erzählen und jedes Bild unvergesslich zu machen.
Design und Funktionalität: Hand in Hand
WordPress und Elementor: Unsere Wahl fiel auf WordPress wegen seiner Flexibilität und Benutzerfreundlichkeit. Elementor ergänzte dies, indem es uns die Freiheit gab, nach Bedarf Seiten unserer Webpage mit einer intuitiven Drag-and-Drop-Schnittstelle zu gestalten.
In der Rubrik „Impressions“ führen wir unseren Besucher auf eine visuelle Reise, die die Vielseitigkeit und die Schönheit der Drohnenfotografie in den Vordergrund stellt. Diese Galerie ist in drei faszinierende Kategorien unterteilt – Food, Drone und Cars – und präsentiert eine Auswahl an Aufnahmen, die unsere Expertise und Leidenschaft für jedes Detail widerspiegeln. Für die diversen Funktionalitäten nutzten wird Elementor.
Particle Background: Für einen lebendigen ersten Eindruck integrierten wir das Particle Background-Plugin (Anpassung header.php und Custom CSS), das sofortige Aufmerksamkeit erregt und unsere Affinität für moderne Präsentationstechniken unterstreicht. Zudem läuft im Hintergrund ein Video, das Drohnenaufnahmen zeigt.
Interaktion und Compliance
WPForms: Durch dieses Plugin haben wir ein einfaches und effektives Kontaktformular erstellt, das die Kommunikation zwischen uns und unseren Besuchern erleichtert.
Complianz: Mit Complianz sorgen wir für Transparenz und Compliance in Bezug auf Cookies und Datenschutzrichtlinien.
Site Kit by Google: Dieses Tool ermöglicht es uns, wichtige Website-Metriken direkt zu überwachen und die Benutzererfahrung kontinuierlich zu verbessern.
Personalisierte Anpassungen
Angepasster Footer: Um einen professionelleren Eindruck zu hinterlassen, haben wir den Footer unserer Webseite angepasst, um den Standardhinweis auf WordPress zu entfernen.
Eingebettete Map auf der Contact-Seite: Die manuelle Einbettung einer Karte mit HTML erlaubt es Besuchern, unseren Standort sofort zu erkennen und wirkt positiv hinsichtlich Transparenz.
Social Media Icons mit Hover-Effekt: Ebenfalls manuell mit HTML und CSS implementiert, bieten diese Icons nicht nur eine visuell ansprechende Darstellung unserer Social Media-Kanäle, sondern fördern durch den Hover-Effekt auch die Interaktion. Jedes Icon ist direkt mit dem entsprechenden Social Media-Profil verlinkt, was eine nahtlose Verbindung zwischen unserer Webseite und unseren Social Media-Plattformen schafft.
Im Kurs haben wir angeschaut, mit welchen Tools eine Homepage erstellt werden kann. Die einfachste Variante ist es, eine Homepage mit WordPress zu bauen.
Ich habe mich entschieden, eine kleine Homepage für meinen Bruder zu erstellen. Mein Bruder hat ein eigenes Blumenfeld auf dem er Schnittblumen produziert. Die Schnittblumen verkauft er einerseits direkt auf dem Blumenfeld zum selber schneiden und andererseits auf dem Wochenmarkt in Wil. Es gibt auch die Möglichkeit bei ihm Blumen zu bestellen. Da er noch keine Homepage für seine Schnittblumen besitzt, bietet dieser Kurs die optimale Gelegenheit, eine zu erstellen.
Vorgang mit WordPress
Um die Homepage zu erstellen habe ich mir das Plugin Elementor heruntergeladen. Mit diesem Plugin ist es einfach möglich, verschiedene Objekte auf der Seite zu platzieren und zu designen. So habe ich eine geeignete Vorlage ausgewählt und mit Elementor die einzelnen Abschnitte nach belieben angepasst.
Home- Seite
Die Home- Seite sieht so aus. Sie hat ein grosses Titelbild und unterhalb sind die drei Möglichkeiten aufgeführt, wo und wie die Blumen erhältlich sind.
Seite für Blumenfeld/ Wochenmarkt/ und auf Bestellung
Jedes Bild ist mit einer eigenen Seiten verlinkt, auf denen das jeweilige Angebot noch genauer beschrieben ist. Die Bilder sind provisorisch gewählt und werden noch ausgetauscht, wenn bessere vorhanden sind.
Seite für Kontakt, über Uns
Weiter soll noch eine Seite erstellt werden über uns, damit sich mein Bruder und seine Freundin dort vorstellen können.
Auch eine Seite für den Kontakt soll noch erstellt werden, damit mein Bruder bei einer anfälligen Bestellung kontaktiert werden kann.
Potenzial für Zukunft
Die Seite hat noch einiges Potenzial mit speziellen Effekten etc. Ausserdem könnte man noch eine Schöne Foto- Galerie erstellen und einen kleinen Webshop, wo die Artikel welche auf dem Wochenmarkt angeboten werden auch online bestellt werden können. So kann mein Bruder dann jeweils die Bestellung richten und die Leute können die Produkte auf dem Wochenmarkt in Wil oder bei ihm zuhause abholen können.
Nous avons choisi de réaliser un shop fictif d’articles de montagne avec WordPress. Pour ce faire nous avons utilisé le plugin WooCommerce.
Voici notre page d’accueil avec un menu fonctionnel qui renvoie sur de nouvelles pages.
Nous avons également utilisé l’Open User Map pour générer des filiales fictives comme le montre l’image ci-dessous.
Chaque point sur la carte est cliquable et affiche l’adresse ainsi qu’une image fictive du magasin.
La boutique est séparée en catégories de produits accessible depuis le menu. Chaque article peut être ajouté au panier. Nous avons utilisé des images libres de droit pour représenter les produits.
Lorsque l’on se rend sur un article en particulier, il est possible de passer la souris sur l’image afin de zoomer. La page contient une description de l’article ainsi que des informations complémentaires comme le poids et les dimensions. En bas de la page, il est également possible de naviguer vers des produits similaires qui sont enregistrés dans la même catégorie (exemple ici : accessoire tête).
Il est possible de noter le produit et de laisser un avis pour les autres utilisateurs.
Le menu pour accéder au panier est fonctionnel et il est possible de valider sa commande en entrant toutes les informations de facturations/livraison. Nous n’avons juste pas rempli la possibilité de renseigner un moyen de paiement.
Et pour finir, l’onglet « compte » permet de créer un compte sur le site afin de passer commande plus facilement et également d’accéder à l’historique de commande.
Im Zusammenhang des Webtechnolgien-Wahlmoduls erstellten wir sowohl eine eigene Webseite auf Basis von HTML und CSS, sowie auch eine Webseite mit Hilfe vom Tool WordPress.
Der Gesunde Snackautomat soll Studierenden und Dozierenden ununterbrochen Zugang geben zu gesünderen Snacks und Getränken. Ein jeweils kurzer Beschrieb gibt Auskunft über das Sortiment. Dies kann unter https://apatixuv.myhostpoint.ch/ abgerufen werden.
Unter jedem Beitrag kann ein Kommentar abgegeben werden und so ein Urteil über das Gelesene gefällt werden, was neuen Leserinnen und Lesern als Referenz dienen kann.
Als Design wurde Nutrigen gewählt. Dieses bietet auf der Hauptseite einen Überblick über die veröffentlichten Beiträge. Es ist schlicht gehalten und überzeugt mit Übersichtlichkeit und Aussagekraft.
Unter Sortiment können verschiedene Unterkategorien ausgewählt werden. Dadurch kann ganz einfach nach etwas Bestimmtem gesucht werden. Damit die Veganer und Veganerinnen unter uns genau wissen, welche Produkte sie konsumieren können, haben wir gleich eine Unterkategorie dafür erstellt.
Als Plug-In wurde Maps verwendet. Maps ermöglicht eine Implementiereung einer Google-Karte mit Standort.
Durch das Modul haben wir viel Neues gelernt. Sowohl Programmieren, als auch die Gestaltung einer Website war uns bis zu diesem Zeitpunkt komplett unbekannt. Wir empfanden die Informationen als sehr lehrreich und haben nun mehr Ahnung darüber, wie sich Webseiten zusammensetzen und was dafür nötig ist, damit diese auch nach Wunsch funktionieren. Das Gelernte können wir gut anwenden bei der Gestaltung unseres Minorprojekts im Minor Enterpreneurship.
