Im Rahmen des Wahlmoduls Web-Technologien und Web-Design haben Michael Teutschmann und ich, Laura Kunz, die im Folgenden kurz vorgestellte WordPress-Webseite erstellt.
Wir haben eine Webseite für potenzielle Interessentinnen und Interessenten an einem Welpen der Rasse Australian Labradoodle ausgearbeitet. Die Webseite besteht aus verschiedenen Seiten, in welchen unter Anderem die Rasse Australian Labradoodle genauer beschrieben wird. Einige Aspekte zur Zucht sind aufgeführt und auch ein Blog besteht. Darüber hinaus verfügt die Webseite über einen kleinen Shop, über welchen Hundezubehör gekauft werden kann. Um den Überblick nicht zu verlieren, sind die verschiedenen Seiten in einem horizontalen Menüband angeordnet.
Die Startseite zeigt sich mit der Verlinkung der Blogbeiträge. Darin wird das Alltagsleben der Zuchthündin aufgeführt.
Dans le but du module Web Technologie et Web design, j’ai du créer une page web pour pouvoir apprendre les bases des plateformes testée. En faisant de la lutte suisse à haut niveau, il est important pour moi de pouvoir partager mes émotions et mes résultats avec mes proches et les gens qui me soutiennent. Je partage beaucoup sur les réseaux sociaux et je trouvais très enrichissant de pouvoir créer une page web accessible à tout le monde pour partager mon évolution.
Paramètres de la page
Pour la confection de cette page, j’ai utilisé le serveur WordPress par le biais de Hostpoint.ch. J’ai choisis le thème ASHE pour ma base.
Page : menu
C’est la page qui apparait lorsqu’on arrive sur mon site. elle contient l’entièreté du site dessus. La première choses et une image avec mon nom pour mettre le contexte de la page
Le menu se trouve au milieu de la page, en appuyant sur un des thèmes proposé, on arrive directement vers l’article concerné. La fonction „rechercher“ se trouve à droite de l’écran et elle permet de faire une recherche spécifique. Le thème „HAUTE-BROYE“ est un lien direct qui arrive sur la page web du club des lutteurs de la haute-broye.
les articles
Différents articles sont présents sur la page. On peut aussi consulter les résultats des années précédentes :
colonne latéral
Dans la colonne latéral se trouvent la date et le lieu de mes prochaines compétitions programmées
Willkommen auf unserer Website! Wir haben qualitative Wildkräuter für dich, welche du via Online-Shop als auch direkt bei uns im Laden kaufen kannst.
Wir lieben den Geschmack von feinen Kräutern und sind beeindruckt von der bunten Vielfalt, den zahlreichen Aromen und der Kraft der Natur, die in ihnen steckt. Kein Kraut schmeckt wie das andere und jedes hat einen eigenen Charakter und ein eigenes Aroma. Das Wissen der Kräuter fasziniert und begeistert uns und ist unsere Passion. Egal ob du auf der Suche nach einem Wildkraut, Naturheilkraut oder essbaren Blüten bist, in unserem Dona Shop findest du nahezu jedes essbare Kraut, das bis dato erforscht wurde, in höchster Qualität und in seiner reinsten Form. Und weil das Wissen hinter den Kräutern ein sagenumwobener Schatz ist, findest du hier auch Informationen rund um Wildkräuter, die dich einladen, in dieses spannende Thema einzutauchen.
Auf der Homepage stellen wir unsere Seite vor. Hier haben wir auch ein Plugin verwendet, welches ein Karusell mit verschiedenen Bildern enthält. Das Design, welches wir verwendet haben ist „Green Environment“. Die Webseite wollten wir ansprechen, hell, freundlich und natürlich gestalten.
Im Menü haben wir diverse Unterkapitel zu den jeweiligen Themen erstellt.
In unserem Onlineshop kann man Produkte bestellen. Es gibt hier auch die Funktion „Mein Konto“, „Kasse“ und „Warenkorb“. Der Onlineshop wurde mittels des Plugins WooCommerce.
Auf der rechten Seite befinden sich die Beiträge als auch das Suchfeld und die neu erstellten Kommentare. Im Beitrag befindet sich zudem noch ein Link zu unserer HTML-Seite. Zudem steht unter dem Beitrag jeweils noch ein Kommentarfeld.
Dieser Beitrag wurde von Dominique Bürkli & Nadine Ursprung erstellt.
Im Modul Web-Technologien und Web-Design NT FS23 habe ich eine Webseite entworfen, wie sie in Zukunft möglicherweise in einem eigenen Unternehmen Anwendung finden könnte.
Design
Der ganzen Seite liegt das Design Building Construction zu Grunde. Nach einigen Anfangsschwierigkeiten stellte es sich als hilfreiche Basis zum gestalten der Seite heraus.
Home
Auf der Homepage ist ein Slider ersichtlich mit möglichen Tätigkeiten, womit Kunden angesprochen werden sollen. Weiter unten sind die gängigsten Dienstleistungen aufgelistet und anschliessend alle Mitarbeiter erwähnt.
Ein Bild des Slider auf der Homepage
Menü
Unter dem Titel ist das Menü ersichtlich, wodurch alle Seiten der Webseite abgerufen werden können.
Seiten
Auf den verschiedenen Seiten werden die jeweiligen Dienstleistung je Rubrik genauer ausgeführt. Auf der Seite Kontakte sind alle nötigen Informationen enthalten um einen Kontakt herzustellen und zusätzlich ist die Ortsadresse über Google Maps ersichtlich. Die Seite Datenschutz wurde von WordPress vorgeschlagen und ich habe sie schlicht beibehalten.
Die Seite KommunalKontakte mit einem Plugin von Google Maps
Fazit
Ich brauchte eine Weile bis ich mich mit WordPress zurecht gefunden hatte. Nach dem die Anfangsschwierigkeiten jedoch überwunden waren, erhielt ich Freude am gestalten der Seite und freute mich über jeden Fortschritt. Ich denke mit genügend Zeitaufwand und Geduld kann bereits nach diesem Kurs eine anschauliche Webseite mit WordPress erstellt werden.
Im Rahmen des Modules Webtechnologie und Webdesign wurde eine Website mithilfe von WordPress erschaffen. Diese Webseite handelt um eine fiktive Firma, welche neuartige Ernährungsberatungen anbietet. Die Website basiert hauptsächlich auf dem Blocky Themes, sowie dem Blocksy Companion Plugin von CreativeThemes. Dazu wurde Verbesserung der Darstellung das Getwid Plugin und für die Shop-Seite das Contact Form 7 Plugin verwendet. Nachfolgend wird der Aufbau der Website erläutert:
Home-Seite
Die Homeseite ist in drei Teile gegliedert:
Ein «Werbetext» über das Unternehmen.
2. Die Dienste welche Angeboten werden und wie es funktioniert.
3. Die Preise der Dienstleistungen.
News-Seite
Auf der zweiten Seite, werden News und Beiträge angezeigt. Dazu ist auf der rechten Seite noch ein Block, welche die zurzeit populärten Beiträge anzeigt.
About-Us-Seite
Auf der dritten Seite wird die Unternehmensstruktur dargestellt. Dazu werden Erfahrungen, das Team und die Geschichte grafisch dargestellt. Dazu kommt noch die vierte Seite mit Kontaktangaben über das Unternehmen.
Shop-Seite
Die letzte Seite ist die Shop-Seite. Hier können Kunden ein Formular ausfüllen und somit die Diesntleistung buchen. Ausgefüllte Formulare werden dem Inhaber/ der Inahberin per Mail zugesnant.
Im Zusammenhang des Webtec Wahlmoduls erstellte ich sowohl eine eigene, auf Basis von HTML und CSS, wie auch eine über das Tool WordPress her. Letztere soll hier kurz beschrieben werden.
Bar Guide Bern gibt einen kurzen Überblick über sechs verschiede Lokals in der Stadt. Ein jeweils kurzer Beschrieb gibt Auskunft über die Eigenheiten und Charakteristiken der jeweiligen Gastroeinrichtung. Sie kann unter https://egarolos.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 Myazaki gewählt. Dieses bietet auf der Hauptseite einen Überblick über die veröffentlichten Beiträge. Es ist schlicht gehalten und überzeugte mich mit Übersichtlichkeit und Aussagekraft.
Als Plug-In wurde Maps sowie WPForm verwendet. Während Maps eine Implementiereung einer Google-Karte mit Standort ermöglicht, erlaubt das WPForm die Möglichkeit, ein Kontaktformular auszufüllen und so eine Nachricht
Mit dem Besuch des Moduls betrat ich komplettes Neuland. Sowohl Programmieren als auch die Gestaltung einer Website waren mir bis zu diesem Zeitpunkt komplett unbekannt. Da ich es jedoch so erachte, dass eine Internetauftritt, sei es aus ökonomischer oder anderen Gründen, von zunehmender Bedeutung ist, meldete ich ich mich dafür an. Ich empfand die Informationen als sehr lehrreich und bin habe nun eine Ahnung darüber, wie sich Webseiten zusammensetzen und was dafür nötig ist, damit diese auch nach Wunsch funktionieren.
Im Rahmen des Wahlmoduls BUUx442 Webdesign wurde uns gezeigt wie eine WordPress Website erstellt wird.
Somit habe ich mich entschieden eine Website mit Rezepten für Schokoladen Desserts zu kreieren, da ich selbst sehr gerne backe und leckere Desserts mache. Schokolade macht bekanntlich glücklich und die Website soll eine Inspiration sein, sowie eine Sammlung von Schokoladen Köstlichkeiten bereitstellen.
Das Design der Frontpage ist schlicht gehalten und dient als Ausgangspunkt zu den Rezepten, da der Titel selbsterklärend ist. Ebenfalls werden dort neue, zukünftige Posts angezeigt.
Die Menüwahl besteht aus zwei Kategorien. Einerseits Rezepte mit und ohne backen. Beim Anklicken wird dann die Seite mit dem gewählten Rezept angezeigt. Ebenfalls hat man die Möglichkeit über die Suchfunktion spezifisch zu suchen.
Als Plugins habe ich das Scroll to Top und AddToAny Share Button verwendet.
Beim Scroll to Top haben die Besucher der Website die Möglichkeit vom Ende der Seite direkt nach oben zu gelangen ohne zu scrollen. Dies ist praktisch, da ich jeweils für grosse Bilder auf den Rezeptseiten entschieden habe um das Rezept diese Art visuell schmackhaft zu machen. Durch den AddToAny Share Button hat man die Möglichkeit die Rezepte beliebig mit Freunden und Familie zu teilen.
Vielen Dank für das interessante Modul und die Einblicke in Web Technologie und Design.
Im Rahmen der Vorlesung BUUx562: Web-Technologien und Web-Design NT FS22 habe ich eine Webseite für das fiktive Unternehmen der Waldpaten GmbH in WordPress erstellt.
Die Webseite wurde nach den Vorgaben der Modulbeschreibung erstellt. Ich hatte initial keine bestimmte Idee für einen konkreten Internetauftritt, es fehlen daher auch verschiedene Fliesstexte zum Tätigkeitsfeld und Beschreibungen der einzelnen Produkte. Die Seite dient ausschliesslich zu Übungszecken.
WordPress-Theme und Plugins
Die Webseite handelt von der Firma Waldpaten GmbH, die Baumpatenschaften und Waldfrüchte-Abonnemente anbietet. Grundlage des Designs ist das kostenlose WordPress-Theme «Inspiro», welches Plugins von WPZOOM benötigt, um aktuell zu bleiben. Zum vorinstallierten WordPress-Editor nutzte ich die Plugins «Classic Editor» und «Elementor» um Teile des Designs anzupassen.
Kompatibilität mit Mobilgeräten
Die Startseite und das Menu sind an mobile Geräte angepasst. So befinden sich alle aktuellen Blogbeiträge gleich unterhalb der Startseite und sind durch einfaches Scrollen einsehbar:
Um Platz zu sparen, verlegt sich in der mobilen Ansicht das Menu aus der Kopfzeile in den Hamburger in der oberen rechten Ecke der Seite. Beim Klick auf den Hamburger öffnet sich das Menu in der Sidebar, welche in der Betrachtung am Desktop nur die Kontaktangaben enthält:
Karteneinbindung mit Java-Script
Die Seite «Baumpatenschaft» nutzt eine mit Java-Script (JS) eingebundene, personalisierte Google-Maps-Karte, um den Standort verschiedener Bäume darzustellen. Es handelt sich dabei nicht um ein Plugin. Die Karte kann über das «Teilen»-Icon einfach mit Freundinnen und Freunden geteilt werden, ohne dass diese erst die Internetseite aufrufen müssen:
Kontaktformulare
Im Weiteren finden sich auf den Seiten «Waldfrüchte Abo» und «Baumpatenschaft» zwei mit «wpforms» erstellte Kontaktformulare:
Um die Funktion vor Spam-Anfragen und unerwünschten Einträgen zu schützen, nutze ich die Plugins «Askimet Anti-Spam» und «Jetpack».
Fazit
Das Ausprobieren der verschiedenen Funktionen in WordPress hat Spass gemacht. Das Tool eignet sich hervorragend, um schnell eine relativ gutaussehende Webseite zu erstellen und kann von verschiedenen Nutzenden bedient werden. Die vielen Plugins helfen komplexere Systeme, wie z.B. eine interaktive Karte, mühelos in die Webseite einzubinden. WordPress wird aber durch seine Anwendung in einer Browserumgebung durch dieselbe limitiert. Man ist dadurch weniger frei als beispielsweise im Programm «InDesign». Falls man bei der Gestaltung nicht auch bereit ist etwas von den eigenen Vorstellungen abzuweichen, stösst man bald an seine Grenzen. Gewisse Templates lassen sich jedenfalls in der Gratisversion nur sehr umständlich abändern.
Im Rahmen des Moduls BUUx442 war es Ziel eine Website mit Hilfe von WordPress zu erstellen. Die uneingeschränkte Themenwahl hat mich inspiriert, etwas zu erstellen, dass für andere potentiell hilfreich sein könnte. Daher habe ich mich entschieden, einen Blog mit Study Tips für den Studiengang Lebensmittelwissenschaften zu erschaffen.
Der fiktive Blog soll verschiedene Aspekte rund um das Studium Food Science thematisieren und laufend neue Informationen liefern. Das inhaltliche Spektrum des Blogs reicht von Angaben über das Studium selbst, über verschiedene Themen zum Lernprozess bis hin zu Prüfungstipps. Die Website kann auch als Austauschplattform genutzt werden und so Wissen verbreiten.
Nachgehend wird der Aufbau der Website erläutert. Beim Klick auf den Screenshot gelangt man zur Originalseite um sich bei Bedarf den Teil genauer unter die Lupe zu nehmen.
Startseite
Der Header der Startseite stellt zugleich eine Art Übersicht über den Inhalt dar. Da der Titel und der Header beim Scrollen verschwinden, habe ich die Menüleiste hinsichtlich der Benutzerfreundlichkeit fixiert.
Der Rest der Startseite besteht, wie üblich bei Blogs, aus den neusten Beiträgen. Um die Kennzeichnung, dass die Website zu Lehrzwecken dient, nicht untergehen zu lassen, wurde dieser Beitrag auf der Startseite verankert.
Einzelne Seite
Hier ein Beispiel einer einzelnen Seite der Website. Unter jeder Kategorie findet man verlinkte Beiträge zum entsprechenden Thema. Dies wurde in Hinsicht der Überschaubarkeit so gewählt. Ebenso ist hier die Sidebar ersichtlich, welche einen schnellen Zugriff auf weitere, neuere Beiträge erlaubt.
Plugins
Für die einwandfreie Benutzung und Sicherheit der Website wurde Jetpack installiert. Darüber hinaus wurde das WordPress Contact Form Plugin verwendet und ein Kontaktformular zu definieren. Dies ist eine gute Möglichkeit um die Interaktion zwischen Websitebetreibenden und Besuchenden zu fördern.
Fazit
Da man bekanntlicherweise das Lernen soll, was man noch nicht kann, habe ich mich für dieses Modul entschieden. Ich wollte die Gelegenheit nutzen und einen Einblick in die Programmierwelt erhalten – ich wurde nicht enttäuscht.
Durch das Arbeiten mit Visual Studio Code habe ich mir ein Grundverständnis zum Thema aufbauen können. Das Produzieren der eigenen Website mittels HTML, CSS, Javascript, etc. hat mir gefallen, da man kreativ sein konnte und ich nun einzelne Bestandteile von Websiten anhand des Programmierskripts nachvollziehen kann.
Das Projekt mit WordPress hingegen war zeitintensiver. Das Design und die Bestandteile waren zwar schon vorgegeben, aber um diese zu bearbeiten musste zuerst erkundschaftet werden, welche Funktion zu welchem Ergebnis führt. Dies ist vergleichsweise im Visual Studio Code klar ersichtlich. Dafür ist das Resultat mit WordPress ästhetischer.
Meine Seite https://anezapiz.myhostpoint.ch/ wurde für den Jungzüchterverein erstellt. Wichtig für diese Seite ist das sie die aufwändigen Aufgaben für den Verein erfüllen kann.
Die Webseite sollte neu Mitglieder ansprechen, sowie allen Mitgliedern Informationen zur Verfügung stellen.
Das Design ist WordPress Twenty-Twenty. Dazu ein Hintergrundbild von einer Rinderausstellung.
Die Menu Leiste besteht aus 5 Auswahlmöglichkeiten.
Startseite
Verein (Dort werden die Blogbeiträge abgelegt)
Mitglied Werden (Formular)
Agenda (Downloadlink für das Jahresprogramm)
Kontakt (Kontaktformular)
Es gibt nichts mühsamers für einen Aktuar als unvolständige Vereinsdaten. Duch die Anmeldung per Anmeldeformular kann jederzeit und überall eine Anmeldung vorgenommen werden ohne das bestimmte Daten nicht angegeben werden und damit unvollständig sind.
Durch das Plugin WP Forms Lite konnte ich ohne grossen Kenntnisse einfache Fragebögen zusammenstellen. Für aufwändigere Formulare (zb mit Geburtstag in der Form DD.MM.JJJJ ist das Plugin allerdings Kostenpflichtig.
Was auch problemlos möglich war ist das einbetten von externen Dateien. So kann das Jahresprogram das per Mail und Post verschickt wird bequem auch online eingesehen werden.
Alles in allem war das Fach Webtech und Webdesign sehr spannen. Auch wenn Ich oft verloren in einem Jungle voller Möglichkeiten war konnte Ich viel mitnehmen. Anfangs hat mir Programmieren mit HTML, CSS, PHP und JS besser gefallen, da es am Anfang einfacher ist und man seine Fehler sofort bemerkt. Als es dann immer komplexer wurde war es dann trotzdem angenehmer mit WordPress zu arbeiten.
