webtech

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

Bei der Durchführung des Wahlmoduls Buux442 Webdesigne an der Hafl vom 14.2 bis 18.2 2022 wurde eine eigene Website mit Hilfe von WordPress erstellt. Dabei orientierte ich mich an meinem bereits existierenden Blog, der derzeit auf einer anderen Website publiziert wird. Dies diente mir dazu zu sehen, ob ich meinen bestehenden Blog auf WordPress umlegen möchte oder nicht.

https://mazehazi.myhostpoint.ch/

Es handelt sich hierbei um einen Blog, welche sich rund um das Thema Haarpflege und Frisuren dreht. Gestartet wurde der Ursprüngliche Blog bereits im Jahre 2014, als ich begonnen habe, meine Haare von Kinnlänge an wachsen zu lassen.

Auf dem Blog erscheinen regelmässig Beiträge zu Themen wie Frisurenanleitungen und Pflegehinweise als auch verschiedenste Tipps und Tricks rund um die Thematik. Oft werden auch Fragen aus der Leserschaft aufgegriffen.

Ziel dieses Blogs ist es, die Leserschaft mit zu nehmen auf meinem Weg zu langen und gesunden Haaren. Dabei soll auch ein spannender Austausch generiert werden. Es handelt sich hierbei eher um eine Freizeit Thematik als um wissenschaftliche Artikel.

Das allgemeine Designe wurde bewusst schlicht und überschaubar gewählt und mit dem typischen Elementen eines Blogs gestaltet. Ziel dabei war es, die Artikel in den Vordergrund zu rücken.

Als Plug in wurde einerseits Aksimet als Spamfilter und Jetpack verwendet. Letzteres wurde vor allem für die Fotogalerie benutzt, welche sich im unteren Teil der Navigationsbar befindet.

Beginnen wir mit dem Titelbild:

Hier wird bereits kurz ersichtlich, wie der Blog heisst, welche Thematik angesprochen wird und was die Leserschaf erwarten kann.

Menü:

Hier ist kurz und knapp zu sehen, welche Seiten verfügbar sind. Es sind gewisse Seiten am Menü angepinnt um den Lesern ein schnelles zugreifen zu ermöglichen. Zusätzlich ist unter dem Tab Haarbande ein Link abgelegt. Dieser führt direkt zum Kooperationspartner, mit welchem regelmässig Beiträge erscheinen.

Über mich:

Eines der Seiten, welche sich im Menü befindet ist die über mich Seite, bei dem die Leserschaft direkt eine kurze Information zu mir als Blogbetreiberin vorfindet.

Navigationsbar:

Bei der Navigationsbar wurde darauf geachtet, dass sämtliche Beiträge schnell und einfach zu erreichen sind, eine Suchfunktion integriert wurde und auch Kommentare getätigt werden können.

Erster Beitrag:

Auch ein erster (und noch ein weiterer ) Beitrag wurden veröffentlicht. Hierbei ging es um Methoden, Locken ohne Hitze zu kreieren.

Fazit:

Das Wahlmodul wurde mir von vieler Seite her empfohlen und es hat mir einen spannenden, neuen Einblick in die Thematik der Webseitenerstellung ermöglicht. Ich hatte zuvor kaum Kenntnisse über die Programmiersprache noch über HTML/ CSS oder Java Skript. Diese Inputs nehme ich gerne mit in mein Portfolio auf. WordPress hingegen werde ich wahrscheinlich eher nicht weiter verwenden da es mir doch zu umständlich ist.

Durant la semaine bloc de février, nous avons eu la chance de découvrir WordPress. J’ai pu travailler sur la page internet d’un domaine viticole sur la Côte Vaudoise. L’idée était de pouvoir ouvrir le site sur la page d’accueil. Celle-ci présente rapidement le domaine. La barre en en-tête permet de rediriger rapidement le visiteur vers les différentes pages en fonction de ses souhaits. Quelques images donnent un aperçu du domaine (image 1). Le pied de page a la mention „Ce site internet n’est pas le site officiel du domaine“ pour éviter toute confusion.

Sur la deuxième page, le domaine est présenté plus en détail. Des informations sont données sur les vignes, le domaine et le vin. Cette page sert à donner un aperçu des activités du domaine (image 2).

La troisième page donne une vue d’ensemble des différends vins produits (image 3). Cette page pourra être améliorée à l’avenir en y ajoutant une boutique en ligne. Je n’avais pas à disposition au moment de la création du site, mais une image de chaque bouteille serait souhaitable.

Ensuite, une page (image 4) présente les différentes manifestations faisables sur le domaine. À savoir, les dégustations, les soirées théâtrales ou alors le festival de musique! Pour les clients qui souhaitent avoir plus d’informations, il est indiqué que les clients doivent s’abonner à la newsletter.

Et pour finir, la dernière page permet de contacter le vigneron par mail, téléphone. Un formulaire pour faire parti de la newsletter est aussi à disposition. Une carte géographique (GoogleMaps) interactive montre l’emplacement du domaine. Et pour terminer, un petit message de remerciement est là pour terminer la page (Image 5).

„`A travers ce site internet on a pu apprendre à utiliser WordPress. Le logiciel est assez efficace et plutôt bien adapté pour faire rapidement des sites. En y passant suffisamment de temps, il est sûrement possible de faire un site internet bien construit et fonctionnel.

Während dem Wahlmodul BUUx442 Web-Technologien und Web-Design haben wir gelernt, wie mit WordPress eine Website erstellt wird. Danach durften wir zu einem selbst gewählten Thema eine eigene Website erstellen. Für diesen Auftrag habe ich unser fiktives Unternehmen Schomberg Chocolat Suisse des Moduls BCLf334 Unternehmensstrategie gewählt. In diesem Rahmen hatten wir uns bereits Gedanken zum Inhalt einer Firmen-Website gemacht, welche ich nun mit WordPress umsetzen konnte. Schomberg Chocolat Suisse stellt hochwertige und nachhaltige Pralinen her.

Startseite

Jede Seite beinhaltet einen Header mit dem Firmenlogo und Namen. Auf der Startseite werden die Besucher:innen willkommen geheissen. Zudem gibt es eine kurze Information zu Schomberg. Oben an der Seite befindet sich ein Menü als Verweis zu den anderen Seiten. Der Footer wurde angepasst und es steht anstatt „WordPress“ „Präsentiert von Schomberg Chocolat Suisse“.

Produkte

Auf der Produktseite gibt es Bilder der zwei Pralinesorten von Schomberg. Die wichtigsten Eigenschaften der Produkte werden ebenfalls beschrieben. Hier wäre in einem nächsten Schritt der Einbau eines Onlineshops sehr interessant.

Nachhaltigkeit

Unter dem Menüpunkt Nachhaltigkeit werden die wichtigsten Nachhaltigkeitsaspekte von Schomberg aufgezeigt. Auf dieser Seite wäre in einem weiteren Schritt eine Verlinkung zu Rohstofflieferanten interessant. Da es sich aber nur um eine fiktive Unternehmung handelt, war das nicht möglich. Mit der Tiled Gallery von Jetpack konnten die drei Bilder kreisförmig angeordnet werden.

Über uns

Auf der Seite Über uns sind weitere Informationen über die Unternehmung zu finden. Weiter wurde ein Formular von Jetpack eingebaut. Damit können die Besucher:innen mit Schomberg in Kontakt treten.

Am Ende der Seite ist noch die Adresse und eine Karte mit WP Google Maps eingebaut.

Fazit

Ich habe das Modul als Wahlmodul gewählt und hatte zuvor keine Kenntnisse über WordPress oder Visual Studio Code. Da ich zuvor noch nie etwas programmiert habe, war für mich WordPress einfacher zu verstehen als Visual Studio Code. Jedoch war auch die Arbeit mit WordPress nicht so einfach wie zum Anfang gedacht. Viele Anpassungen waren nicht so einfach möglich wie erwartet. Deshalb ist es sinnvoll, auch ein wenig Kenntnisse über das Programmieren zu haben, um Hintergründe zu verstehen. Für die Website mit WordPress wurde das Design Twenty Seventeen gewählt. Zukünftig würde ich mir zuerst überlegen, welchen Inhalt meine Website haben soll und anhand dessen das Design auswählen. Denn somit müssen nicht all zu viele Bereiche angepasst werden.

Es war sehr interessant zu lernen, wie Websites entstehen. Falls ich zukünftig eine Website erstellen muss, würde ich wieder WordPress nutzen.

Startseite

Auf der Startseite gibt es eine kurzen Text, welcher den Besucher der Seite begrüsst.

Im Menü sind „Unser Angebot“ mit den Auszugrubriken „Getränkeliste“, und „Speisekarte“, „über uns“ mit den Auszugrubriken „Öffnungszeiten“, „Team“, „Jobs“, „Kontakt“, und „Zyt vertriibe“ zu finden

Hier, einige meiner Überlegungen zum Design:

dunkles Design = angenehm für den Betrachter, edel/stilvoll

Bild als „Header“ = ansprechend, roter Faden

Menü horizontal mit vertikalem „Auszug = mehr Übersicht

Plugins

Ausserdem habe ich mich über verschiedene Plugins informiert (was gibt es, was wid oft verwendet). Auf der folgenden Abbildung sehen sie ein Map-Plugin (WP Google Map).

Ein Plugin, welches ich sicherlich verwende würde, wenn ich die Website für einen ersthaften Zweck eingerichtet hätte ist: „Imagify“. Dieses Plugin komprimiert alle Bilddateien auf der Website – ist aber registrationspflichtig.

Eine weiter lustige Option, sind Game-Plugins. Hier; Dinosaur Game! 🙂

Spielstart durch eine Klick auf den Button auf der Seite „Zyt vertriibe“.

• 

• 

Footer anpassen

Ausserdem gibt es für „Programier-kenner“ die Möglichkeit den Footer anzupassen. Dies hinterlässt meiner Meinung nach, einen professionelleren Eindruck!

Hier der Link zu meiner „nachprogrammierten“ Website.

Im Rahmen des Wahlmoduls BUUx552 Webdesign wurde uns gezeigt wie eine WordPress Website erstellt wird. Danach waren wir an der Reihe unser Können zu beweisen und wir erstellten unsere eigene WordPress Website. Als Grundstein für diese Website diente mein Start up namens „Marti-Fütterungen“, welches sich mit der wirtschaftlichen Fütterung von Milchkühen und Aufzucht-, wie auch Mastrindern auseinander setzt.

Die Startseite der Firma Marti-Fütterungen beinhaltet die Aktualitäten, welche zur Zeit zu beachten sind. Zum jetzigen Zeitpunkt ist das der Weidebeginn mit den Milchkühen. Auf dieser Seite werden von Zeit zu Zeit die aktuellsten Artikel oder auch Umstellungen festgehalten. In den Wintermonaten könnten auf dieser Seite beispielsweise Tipps für die erfolgreiche Fruchtbarkeitskontrolle bei Milch- und Aufzuchtvieh veröffentlicht werden. Die Seite beinhaltet auch die verschiedenen Kategorien, wie oben ersichtlich.

In der Kategorie Jungvieh dreht sich alles um die Kälber von heute als Kühe von morgen. Hier werden Infos zur Fütterungsberatung des Jungviehs präsentiert, wie auch Tipps für die erfolgreiche Aufzucht publiziert.

In der Kategorie Milchvieh wird mit Leistungs und Exterieur starken Kühen, welche schon gute Leistungen erbracht haben geworben, wie beispielsweise Dewars Raffa, welche auf dem Bild ersichtlich ist. Zudem erscheinen auch auf dieser Seite Aktualitäten zur Milchproduktion.

Auch in der Kälbermast ist die Beratung von Marti-Fütterungen aktiv um wirtschaftliches Kalbfleisch zu produzieren.

Eine weitere Kategorie der Webseite von Marti-Fütterungen beschreibt den Inhaber und Gründer der Firma. Zudem wird in der Kategorie „Über uns“ erklärt wie die Firma Marti-Fütterungen entstanden ist.

Fazit

Das Erstellen der WordPress Seite bereitete mir Freude und war sehr interessant. Auch die Kombination während der Blockwoche mit Unterricht und Kontaktstudium fand ich sehr gelungen und angenehm. Da mir die Bearbeitung einer Webseite mit WordPress viel mehr zugesagt hat als die Bearbeitung einer HTML Seite habe ich nach Rücksprache mit Herrn Wyss, dass es auch möglich sei sich auf einen Websitetyp zu konzentrieren, meine Energie in die WordPressseite investiert und diese ausgefeilt mit dem für mich passenden Design usw.

Für das Modul BUUx562 habe ich eine Internetseite kreiiert mit dem Programm Visual Studio Code über mein Hobby. Ich habe versucht möglichst viele verschiedene Techniken einzubetten damit ich sehen kann was alles mit dem Programm gemacht werden kann. Wenn die Seite einmal wirklich brauchen würde werde ich es einheitlicher machen.

Menuliste

Die Menuliste sollte oben in Form von einem Balken dargestellt werden. Als Spezialeffekt habe ich programmiert, dass wenn man mit der Maus auf eines der Menuauswahl geht, wird der Hintergrund der Auswahl Pink. Ich wollte dazu noch die Menuauswahl „Material“ unterteilen in „Acrylfarben“, „Pastelkreide“ und „Marmorierfarben“. Dafür habe ich das ganze Design nochmals geendet weil ich es mit der Bootstrap Variante nicht herausgefunden habe. Ich wollte dazu noch den Namen oder ein Logo für die Seite hinzufügen. Eine Variante habe ich gefunden. Ich habe die erste Menuauswahl „S&S“ genennt aber keinen Link dazu programmiert. Somit kann man damit nicht auf eine andere Seite gehen.

Natürlich musste diesen Teil bei jeder Seite im Programm eingefügt werden damit man von jede Seite zu jede andere Seite gehen kann.

Home

Die Homeseite habe ich auf Visual Studio Code „index“ genannt, damit sie aus erstes kommt wenn man auf die Seite gehen will. Als Hintergrund habe ich eines meiner Bilder genommen. Als Spezieleffekt für die Seite habe ich einen Timer eingebaut welcher eines der Bilder zeigt. Dies funktioniert immer in der gleichen Reihenfolge und mit einer Zeitspanne von 5s. Dazu habe ichdie Bildvisualisierung rot eingerahmt, mit einem Schatten versehen, um einem 10° Winkel nach rechts gedreht und die Ecken gerundet.

Material

Die Menuauswahl „Material“ habe ich unterteilt, damit jedes Material einzel erklärt werden kann. Hier habe ich als Spezialeffekt für den Hintergrund ein Bild ausgewählt, dass nicht den ganzen Bildschirm einnimmt, sondern nur 40% der Breite des Bildschrims. Dazu habe ich das Bild fixiert. Das heisst, wenn runtergeskrollt wird, bleibt das Bild auf dem Bildschirm auf der gleichen Position und den Rest verschiebt sich. Dabei habe ich bemerkt, dass je nach Grösse des Bildschirmes diesen Effekt verschwindet, weil den Text zu kurz wird um runterzuskrollen. Dies ist den Fall auf dem Bild unten. Die Schwierigkeit ist, dass ich den Text nur eine Marge in Pixel (px) verschieben konnte und so je nach Bildschirm ist es zu viel verschoben oder zu wenig. Also kann es nicht mehr schön aussehen weil es zu viel weiss hat oder umgekehrt den Text über das Bild kommt und vielleicht nicht mehr lesbar ist.

Meine Kreationen

Auf dieser Seite habe ich meine Kreationen aufgelistet mit einem Kommentar auf der Seite. Ich habe dies in einem Tabellenformat gemacht, damit der Kommentar immer auf der Seite eingeblendet ist. Ich habe jedes Mal die Bilder und Kommentare abgewechselt, damit es weniger steif ist.

Downloads

Auf dieser Seite werden alle Bilder die hochgeladen wurden angezeigt. Ich habe die Eingenschaft „display: inline-block“ genutzt, damit die Bilder auch nebeneinander eingeblendet werden soweit es Platz hat. Die Bilder haben unterschiedliche Grössen. Deswegen habe ich eine Maximalbreite von 600px eingefügt. Wichtig war auch eine Marge zu integrieren damit es einheitlicher wurde. Des Schatteneffekt durfte natürlich nicht fehlen. Es lockert das Ganze auf.

Fazit

Ich bin im Minor Neue Technologien, deswegen fande ich es einfacher mit Visual Studio Code als mit WordPress eine Internetseite zu kreieren. Ich habe aber schon die Grundlagen vom Programmieren gehabt und komme auch gut zu recht damit. Man kann viel mehr machen und auch besser die Idee umsetzten die man hat.

Den Zeitaufwand ist aber natürlich auch grösser, weil man viel recherchieren muss wie etwas geht. Beide Methoden haben ihre Vorteile und je nach dem was man erreichen will mit der Seite ist das einte oder andere besser.

Wenn es eine einfache Seite sein soll würde ich WordPress auswählen, zum Beispiel eine Seite mit den Kontaktdaten und ein paar andere Information über ein Unternehmen.