webtech

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.

Link zu meiner Website: chocolate – Dessertträume mit Schokolade (myhostpoint.ch)

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.

Sie ist bis zum 13. März 2022 unter folgendem Link einsehbar: https://cuvepewu.myhostpoint.ch/ .

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

Einzelne Seite

Plugins

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.

Lukas Abt

Im Rahmen des Moduls BUUx562 und als Teil des Minors Neue Technologien, wurden zwei Websites erstellt. Eine mit Hilfe von Hostpoint und eine mittels HTML, CSS und JS. Die auf Hostpoint erstellte Website werde ich nun kurz vorstellen.

Die Website wendet sich an Hundehalter:innen, welche auf der Suche nach Rezepten für Kekse & Snacks für ihre Fellnasen sind. Ich selbst habe einen Mischlingsrüden mit extrem sensiblem Magen, was mich zum Teil dazu gezwungen hat selbst die Kelle zu schwingen. Da habe ich mir gedacht, dass dies sicherlich auch anderen so geht…

Es wurde das Theme „My Dog Lite“ verwendet. https://ihewafet.myhostpoint.ch/

Die Startseite ist eher schlicht, mit Menubanner und führt die letzten bzw. neusten Beiträge auf:

Auf der Willkommensseite ist die Motivation hinter der Website erläutert. Ausserdem ist ein Bilderkarussell mit 12 (möglchen) glücklichen Hunde der Website-Besuchern aufgeführt. Dazu wurde das Plugin „Carousel Slider“ verwendet.

Auf der nächsten Seite folgen Hundekeks-Rezepte. Sie sind simpel und knapp gehalten, damit sie in der Smartphone-Version möglichst auf Bildschirmgrösse ganz angezeigt werden. Dies liegt meines Erachtens im Sinne des Anwenders. Eine weitere Seite sammelt Hundekuchen-Rezepte, bspw. für einen Geburtstag oder übermotivierte Hundehalter und -halterinnen.

Zu guter letzt folgt eine Seite mit Erfahrungsberichten. Hier sollen gute wie auch weniger gute Erfahrungen geteilt werden. Die Besucher und Besucherinnen der Website können dabei in einem untenstehenden Feld frei Kommentare verfassen. Damit es nicht langweilig wird hier einmal die Smartphone-Ansicht davon:

Die Website mit Hostpoint zu gestalten war okay. Mir gefällt es jedoch einiges mehr die Website zu programmieren. Dadurch hat die Website, welche mit HTML, CSS, JS gestaltet wurde, deutlich mehr Interesse geweckt wurde auch länger bearbeitet. Die Blockwoche war sehr aufschlussreich und die Inhalte sehr gut, danke!
Debora Lang

Hier geht’s zur Webseite

Was ich noch lieber mache als Fussball zu schauen, ist Fussball zu spielen. Dies mache ich „nur noch“ zum Plausch einmal in der Woche. Im Graben, wo ich aufgewachsen bin.

Für’s Modul Webtechnologie und Webdesign habe ich mich entschieden, für unsere Hobby-Truppe eine Webseite zu erstellen, obwohl wir mit unserem Whatsapp-Chat eigentlich sehr gut zurecht kommen.

Das Layout der Webseite ist „afang“ sehr rudimentär, etwa so, wie wir es beim Schutten handhaben.

Da sich nicht jeder etwas unter „Bänklischutte Oberfrittenbach“ vorstellen kann, habe ich ein kurzes Video gedreht, welches ich auf meinem persönlichen Youtube-Kanal aufgeschaltet habe.

Achtung: Das Video ist nicht öffentlich und kann nur über den Link aufgerufen werden. Video wird in 30 Tagen gelöscht.

Anhand der Menubar kann innerhalb der Seite navigiert werden.

News

Unter „News“ findet man die aktuellen Blogbeitrage, die wiederum auf der Homepage aufgelistet sind. Die Blogeintrage sollen vor allem die aktuellen Mitgleider der Schutttruppe über Aktualitäten informieren.

Die Rubriken „Wann und Wie“ und „Über uns“ könnte man gut auch auf einer Seite zusammenfassen. Darin findet man Infos über „wie“ wir spielen, wer wir sind und wann wir die Turnhalle benützen dürfen.

Unter „Kontakt“ habe ich meine Natelnummer hinterlegt, da ich generell am Besten per Whatsapp erreichbar bin.

Anfahrt

Unter „Anfahrt“ findet man den Standort der Turnhalle Oberfrittenbach. Diesen habe ich mit dem Plug-In „Easy Google Maps“ erstellt.

Fazit

Das Arbeiten mit WordPress ist nicht ganz so intuitiv, wie ich es mir bspw. von Jimdoo gewohnt bin. Gefühlt muss man sehr oft klicken, bis man an dem Bearbeitungspunkt ankommt, welchen man sich wünscht. Teilnehmende des Kurses, die eine reale Webseite erstellt haben, haben hier sicherlich mehr gelernt. Mir persönlich hat das Arbeiten in html und css mehr Spass gemacht, weil man da nicht nur sieht, „was“ man macht, sondern auch „wie“ man es macht.

Hier geht’s zur Webseite

Für meinen Bruder durfte ich eine Website erstellen. Dieser will sich selbständig machen und da bot sich das Modul BUUx442 – WebTechnologie und Web-Design gerade an, um für ihn eine Website zu generieren.

Da mein Bruder ein vielbeschäftigter Mann ist, fehlt es der Homepage noch ziemlich an Content. Deshalb wird das Projekt Homepage uns wohl noch etwas über das Modul hinaus beschäftigen. Zu Beginn hatte ich mich für ein sehr beschränktes Theme entschieden. Deshalb wechselte ich nach einigen Misserfolgen zum BeTheme, welches kostenpflichtig ist. Da es sich irgendwann um eine zumindest Semi-Professionelle Seite handeln soll, trägt mein Bruder die Kosten dafür :-). Zu diesem Theme macht es Sinn, die Plugin’s BeCustom, BeTheme Header Builder, ContactForm7 zu installieren. https://gidaxobi.myhostpoint.ch

Bild 1 zeigt einen Ausschnitt aus der Unterseite Steuern und Treuhand. Der Kunde gelangt hier über verschiedene Buttons zu seinen Informationen und kann direkt einen Termin mit dem Steuerberater vereinbaren.

Dieser Seite muss zum Beispiel noch das pdf für den Flyer hinterlegt werden.

Ein Teilausschnitt aus dem Shop wird in Bild 2 zur Verfügung gestellt. Die Beiträge schweifen jeweils beim herunter scrollen von rechts herein. So besteht eine gewisse Interaktivität und der Kunde soll auf die Angebote aufmerksam gemacht werden.

Damit die Firma auch gefunden werden und persönliche Termine im Office wahrgenommen werden können, wurde ein Kontakt erstellt. Die Karte macht das ganze viel visueller und der Kunde kann direkt auf Routenplaner klicken und en Weg ganz leicht finden. (Bild 3)

Im Rahmen des Moduls BUUx442 – WebTechnologie und Web-Design FS22 wurde eine Website auf Hostpoint mit Hilfe von WordPress erstellt.

Die Webseite dient als Portofolio von eigenen Tortenkreationen und als Inspiration für neue sowie bestehende Kunden und ihre zukünftigen Bestellungen.

Die Titelseite/ der Head sieht folgendermassen aus:

Anhand der Menübar kann innerhalb der Website navigiert werden, um auf diverse Informationen zuzugreifen:

Unter Angebot und Preis ist eine grobe Auflistung der erhätlichen Produktvarianten aufgelistet, sowie die entsprechenden Preise:

Unter „Fotos“ kann der Inhalt des Portofolios aufgerufen werden, um sich ein Bild über vergangene Arbeiten zu machen:

Die Sidebar enthält verschiedene Funktionen und erlaubt es, auf verschiedene Forumsbeiträge und die neusten Kreationen aufzurufen:

Beispiel; Disneys Katzentorte :

Fazit

Das Arbeiten mit WordPress hat aufgrund der kreativen Möglichkeiten viel Freude bereitet. VideoStudioCode war da schon aufwändiger und brauchte komplexeres Verständnis und vorsichtige Arbeitsweise, sowie ständige Kontrolle über den Browser. Beide Optionen haben ihre Vor- sowie Nachteile. Für mich als Programmier-Noob war es schön, mal in diese Welt einzutauchen und ein Basic Verständnis zu beiden Tools zu erarbeiten. Die Erstellung und Bearbeitung einer Webseite für das Tortenportofolio habe ich aus finanziellen Gründen nun bei einem anderen Anbieter (https://www.hosttech.ch/) begonnen. Diese ist zurzeit „under construction“. (find me under sugarbellylove.ch ) Diese wird hoffentlich bald mehr dahergeben als das, was hier präsentiert wurde.

Ich habe das Modul BUUx442 aufgrund meines Praktikas im Onlinemarketing und des Minors Management und Leadership besucht. Zum einen wollte ich mir vertieftes KnowHow über Webtechnologien und -gestaltung aneignen, zum anderen wollte ich für unser Minorprojekt eine provisorische Webseite erstellen.

Da ich im Rahmen meines Praktikas bereits mit WordPress in Kontakt kam, interessierten mich vor allem das Aufsetzen eines Onlineshops mit WooComerce und die Disziplin der Search Engine Optimization (SEO).

Aufbau der Seite

Entsprechend habe ich mich auf die Anwendung der Plugins fokussiert und der Gestaltung von neuen Seiten nicht viel Zeit gewidmet. Der Umfang ist sehr schlicht. Die Seite verfügt über:

• eine Homepage
• einen Shop mit 2 Produkten (OOS um Bestellungen zu verhindern 😉

Plugins

Die erstellte Webseite, welche über den Link https://ehabixor.myhostpoint.ch/ aufrufbar ist, verfügt über drei Plugins:

• Jetpack
• WooCommerce
• All In One SEO (AIOSEO)

Jetpack

Das Jetpack Plugin wurde mir von WordPress empfohlen. Dieses habe ich installiert um mehr Gestaltungselemente für die einzelnen Seiten zur Verfügung zu haben. Davon habe ich folgende verwendet:

WooCommerce

Der Woocommerce-Shop habe ich provisorisch mit den verfügbaren Daten eingerichtet. Aktuell fehlen noch Angaben zum Firmenkonto, welche noch hinterlegt werden müssen. Ein Plugin zur Implementierung eines Mailabonnementes wird empfohlen. Solche Marketingmassnahmen sind zur Zeit jedoch nicht geplant.

Im Shop habe ich zudem zwei Produkte hinterlegt. Alle Angaben sind frei erfunden, mal schauen wie teuer die Sache tatsächlich wird…

AIOSEO

Das SEO-Plugin war mir unter diesem Namen nicht bekannt, die Oberfläche und Anwendung kam mir jedoch irgendwie bekannt vor.

Die Anwendung des Plugins fokussiert sich auf zwei Arbeitsbereiche: Der SEO Headline Analyzer und die AIOSEO.

Headline Analyzer

Mithilfe dieses Fensters, wird der Titel der Webseite genauer unter die Lupe genommen. Dafür werden verschiedene Kriterien wie die verwendeten Wörter, die vermittelte Emotion oder die Anfangs- und Schlusswörter herangezogen. Wenn der Titel verändert wird, steigt/ sinkt auch die Headline-Score.

• 

Zudem können alternative Headlines ins Tool getippt und so analysiert werden, ohne die eigentliche Webseite zu verändern. Ebenso werden die Vorschläge direkt mit der aktuellen Headline verglichen.

AIOSEO

Der allgemeine Bereich wird in folgende Punkte aufgeteilt:

• Focus Keyphrase
• Additional Keyphrases (Nur für PRO-Users)
• Basic SEO
• Title
• Readability