Monat: Februar 2021

https://odafabor.myhostpoint.ch

Entstehungsgeschichte

Ich habe meine erste Website für das fiktive Start up Namens «Manufaktur Arnold» erstellt. Die fiktive Domain und Surfer werden nach 30 Tagen gelöscht. Die Manufaktur Arnold stellt nachhaltige Delikatessen, wie Rotweinsalz, Holunderblütenzucker, Shrubs, usw. her. Daher sollte für das Unternehmen ein moderner Webshop erstellt werden. Darauf sollten die genannten Produkte in der Deutschschweiz vermarktet werden. Das Logo und die Bilder für die Manufaktur Arnold erstellte ich selber mit Adobe Illustrator bzw. mit einer Canon Kamera.

Der Style der Webseite sollte mit dem Logo und dem zu vermarktenden Produkt harmonieren. Daher wurde sich dazu entschieden das gratis Theme «Ashe» von Word Press zu customizen.

Auszüge aus meiner Website

In diesem nächsten Abschnitt zeige ich einige Seiten aus meiner Website. Der Link zu meiner Website ist folgender: https://odafabor.myhostpoint.ch/shop/

Startseite (erster Beitrag)

Meine ersten Einstellungen, die ich verändert habe sind, die Headline, die Tab Einstellungen und die Menüleiste. Einerseits wurde das Logo auf der Suchleiste, ins Tab und in der Headline untergebracht. Andererseits wurde der Start up Name in der Footline und im Tab dargestellt. Zudem wurden Fotos im Headline eingefügt. Die Schrift wurde verändert. Alle Anfangsbuchstaben wurden automatisch gross geschrieben.

Auf der Startseite ist vermerkt, das es sich um eine Homepage für den schulischen Gebrauch handelt und gelöscht wird.

Shop

Ich erstellte anschliessend den Shop mit den entsprechenden Produkten. Dazu wurde die Produkte mit den Erläuterungsseiten durch Buttons verlinkt.  

Shrubs

Durch den Button «Shrubs» wird man durch einen Link auf die nachfolgende Seite verlinkt. Im Text ist ein Link auf die Wikipedia Seite eingefügt.

Die Buttons «Special Editions» und «Geschenkbox» wurden mit einer zweiten erstellten Webseite verlinkt auf der Bilder zu finden sind.

Kontakt & Gallerie

Aufgrund der noch ausstehenden Produktvielfalt konzentrierte ich mich anschliessend auf die Erstellung der Kontakt- und Gallerieseite.

Ich habe mich bei der Kontaktaufnahme für zwei verschiedene Methoden entschieden. Einerseits habe ich direkt einen Link eingefügt und andererseits einen Button mit einem Link versehen, der direkt mit der Email verlinkt ist. Durch den Befehl «mailto» wird automatisch beim Anklicken Outlook geöffnet und man kein eine Email an die Manufaktur Arnold schreiben.

Auf allen Seiten werden zudem ein Kalender und die zuletzt angesehenen Produkte des Kunden angezeigt.

Plugins

Ich habe diverse Plugins ausprobiert. Einige funktionierten besser als andere, wobei nicht alle bis am Ende fertig registriert wurden. Ich habe mich für nachfolgende Plugins entschieden, da es sich um ein Web Shop handelt.

Für mich waren die Plugins WooCommerce und WP Google Maps die wichtigsten. Ich habe diese Plugins soweit implementiert, das sie ohne grosse Registrierung bei der Erstellung des Online-Shops verwendet werden können. Dabei war besonders WooCommerce von zentraler Bedeutung. Ich konnte dadurch Produkte darstellen und verlinken, wie auch die Buchung und den Versand organisieren.

Wie die meisten Webseite, wurde auch auf dieser Webseite/Webshop eine Karte mit der Adresse des Unternehmens angegeben. Der verwendete Plugin ist WP Google Maps. Die fiktive Kontaktadresse konnte dadurch auf der Kontaktseite dargestellt werden.

FAZIT

Das Erstellen einer Webseite/Webshops ist allgemein sehr spannend und zeitaufwändig. Für mich war das Erstellen einer Website mit Word Press zu Beginn einfacher und kreativer als mit HTML, was daran liegt, das ich schneller Bausteine zusammenstellen konnte. Ich fand jedoch schnell die Grenzen von Word Press kennen. Gratis Webshops Themes waren nicht so ästhetisch wie die gratis Blog Themes. Letztere musste ich in dieser Aufgabe anpassen. Die Anpassungen musste ich teilweise durch HTML vornehmen, was komplexer war. Allgemein konnte ich viel lernen. Für mich sind nachfolgende Learnings wichtig: Nebst den Themes und dem Programmieren, sind der Zeitfaktor und die Kosten zur Erstellung einer Webseite weitere Faktoren, die limitieren können. Der Zeitaufwand ist gross. Man kann viel mit viel Zeit. Zudem sind viele Themes und Plugin kostenpflichtig, unteranderem auch die Domain. Für eine professionelle Homepage ist eine eigene Domain essenziell. Kostenpflichtige Plugins können das Verwalten der Homepage erleichtern. Fazit: Eine Kombination aus Word Press und «Programmieren» ist der Schlüssel für eine professionelle Homepage.

Dies ist eine rein fiktive Seite und wurde nur zu Übungszwecken im Modul Buux442 erstellt. Die Seite wird nach 30 Tagen gelöscht. Matt Erdbewegungen und Transporte besteht als Unternehmen jedoch wurden die Inhalte der Homepage frei erfunden und dienen Übungszwecken.

Startseite

Auf der Startseite sind die Aktualitäten sowie das Menü welches auf die verschiedenen Seiten verweist. Als erster Beitrag ist hier eine Stellenausschreibung eingefügt. Mittels eines Buttons wird auf den Beitrag der Stellenausschreibung verwiesen.

Service

• 

• 

• 

Im Unterpunkt Service werden die verschiedenen Dienstleistungen erläutert. Im Artikel wurde unter NEU Stockpressen ein Beitrag mit verlinkt.

Jobs

Im Untermenü Jobs werden aktuelle Stellenanzeigen gepostet. Hier wurde mit einem Plugin direkt ein Kontaktformular eingefügt um die Kontaktaufnahme für den User zu erleichtern.

Kontakt

Im Untermenü Kontakt wurde ebenfalls noch ein Kontaktformular mittels Plugin erstellt. Zudem wurde zusätzlich noch ein Plugin für Google Maps eingefügt.

Footer

Im Footer werden durch eingefügte Widgets auf jeder Seite der aktuelle Terminkalender sowie die neuesten Beiträge angezeigt.

Blog Beiträge

Zudem wurden noch ein Blog Beitrag zur neuen Stockpresse erstellt. Nach und vor dem Beitrag sind Autor, Datum, und Kommentarfunktion ersichtlich.

Projet Webtech/Wordpress Diane Marty HAFL 2021

Le site présente une société de services de restauration fictive destinée aux enfants. Lien: https://wamigohi.myhostpoint.ch/wordpress/

Les options commentaires ont été supprimés sur les pages.

Ausgangslage

Das Wahlmodul „Web-Technologien“ findet ausgerechnet statt, während dem sich meine Familie in einem Quarantänestrudel befindet. Die Primarschule meiner beiden jüngeren Töchter ist offenbar ein Corona-Hotspot und wurde vom KAZA ab dem 11.2.2021 auf Fernunterricht umgestellt. Dazu kam zuerst die Quarantäne für die Kindergartenklasse meiner jüngsten Tochter und danach diejenige für die 5. Klasse der mittleren Tochter inkl. Familien. Somit fällt sämtliche Kinderbetreuung weg und es finden bei uns zuhause neben dem Web-Technologie-Modul auch noch Kindergarten und 5. Klasse-Fernunterricht sowie home office statt. Eine denkbar ungünstige Ausgangslage für mich als Wahlmodulteilnehmerin.

So stand mir viel weniger Zeit als eingeplant zur Verfügung und ich konnte mich nur oberflächlich in die weiterführenden Seiten wie W3Schools oder die WordPress-Dokumentation einlesen.

Eine Web-Seite ist dennoch entstanden. Die Inhalte habe ich aufgrund der erschwerten Umstände nicht neu erfunden, sondern ich habe grösstenteils diejenigen der bestehenden Internetseite meines künftigen Arbeitgebers, der Schweizer Bergheimat, übernommen.

Die Seite ist zugegebenermassen noch sehr rudimentär und entspricht weder einem Corporate design noch meinen Qualitätsansprüchen. Ich habe jedoch versucht, verschiedene Funktionalitäten einzubauen.

Aufbau der Seite

Die Seite hat eine Einstiegsseite mit dem Logo der Organisation und einem Titelbild. Unterhalb des Titels befindet sich die Navigation mit fünf Menupunkten, wovon aktuell nur einer eine Unterseite hat. Die Unterseiten müssten natürlich noch ausgebaut werden.

Seite Über uns

Auf dieser Seite wird die Organisation vorgestellt. Im Text befinden sich zwei Links, einer auf die Originalseite der Schweizer Bergheimat, die andere auf die Seite der Bio Suisse. Eine „Baustelle“ auf dieser Seite ist das Label mit dem Hinweis, dass dies eine Übungsseite ist. Dieses verschwand wieder von der Einstiegsseite, ohne dass ich es wieder gefunden habe.

Diese Seite verfügt über die Unterseite „Aktuelles“. Auf dieser werden die Posts publiziert.

Seite Was wir wollen

Hier habe ich mit dem Plugin Meta-Slider eine Bilder-Slideshow eingebaut. Das hat sehr gut funktioniert.

Seite Geschäftsstelle

Dies ist meine Sorgenseite, zwei Probleme konnte ich darin bisher nicht lösen. Der obere Teil der Seite (siehe Bild links) ist ok, der untere Teil mit Öffnungszeiten und Karte funktioniert leider nicht optimal. Beim Plugin Maps konnte ich den Zoom nicht korrekt einstellen. Die Aktualisierung der Karte war äusserst langsam und schliesslich ist der viel zu nahe Zoom eingefroren, ohne dass ich ihn hätte ändern können.

Die Öffnungszeiten geraten auf der Seite viel zu stark nach links, was ich auch noch nicht beheben konnte.

• 

• 

Seite Mitgliederbetriebe

Auf dieser Seite befindet sich oben eine Bildergalerie, die natürlich nichts mit dem Inhalt zu tun hat, bzw. sinnvollerweise Bilder von Betrieben zeigen sollte.

Darunter folgt eine Tabelle mit Betrieben, wobei deren Namen und auch ein Angebot mit ihren eigenen Internetseiten verlinkt sind.

Seite Arbeitseinsätze

Hier ist das einzige „spannende“ ein Kontaktformular.

Barrierefreiheit

Ich habe versucht, im Sinne der Barrierefreiheit meine Seite möglichst einfach aufzubauen. Die vorliegende Seite ist natürlich keineswegs fertig. Aber auch eine vollständige Seite würde nicht zu viele Ebenen enthalten und wäre möglichst übersichtlich. Soweit mir bekannt ist, lesen Programme für Sehbehinderte den Alternativtext von Bildern vor, wenn die Nutzenden mit der Maus auf das Bild fahren. Es ist mir deshalb wichtig, bei den Bildern jeweils einen Alternativtext zu hinterlegen.

Schlussfolgerungen

WordPress ist ein interessantes Programm, mit dem relativ einfach eine Internetseite erstellt werden kann. Was mir zu Beginn Probleme bereitete, waren die Voreinstellungen des gewählten Themes. Bis ich darauf kam, dass meine Mühen nicht mit mir zu tun haben, sonden mit dem Theme, brauchte ich eine Weile. Nach dem Wechseln des Themes ging es wesentlich besser.

Allgemein scheint mir aber WordPress in erster Linie ein Programm zum Erstellen eines Blogs zu sein. Für den Aufbau einer guten Inhaltsseite braucht es doch vertieftere Kenntnisse, die ich mir aufgrund der erschwerten Umstände nicht aneignen konnte. Ich habe mir deshalb mit einigen Anleitungsvideos auf Youtube geholfen und dadurch einige Tricks entdeckt.

Weiterentwicklung

Was mich noch sehr interessieren würde ist, wie die Seite zusätzlich kopiert werden könnte, damit sie auch in einer anderen Sprache zur Verfügung steht. Meine Seite sollte in allen vier Landessprachen besucht werden können.

Ebenfalls spannend fände ich auszuprobieren, wie erhaltene Rückmeldungen (im Dashboard unter Feedback) als CSV-Datei exportiert werden können.

Gedanken zum Konzept

Landing Page – Frontpage

Auf der ersten Seite, wird man willkommen geheissen und es gibt einen kurzen Einführungstext zur Schokoladen Firma.

Menü und Suchfunktion

Das Menü zeigt auf, was alles auf der Website gefunden werden kann. 
Es gibt zudem eine Suchfunktion und direkt Links zu den Social Media Konten der Unternehmung

Seite – Finde uns

Auf dieser Seite steht die Adresse der Firma. Auf der eingefügten Karte kann gesehen werden wo sich die Firma befindet.

Seite – Über uns

Hier wird die Firma, ihre Gründer und ihre Vision kurz beschrieben. 

Seite – Webshop

Auf der Website gibt es einen Webshop in dem die eigenen Produkte bestellt werden können. Mit rauf und runter Scrollen kann man die verschieden Produkte ansehen. Klickt man auf die Bilder kommt man auf die Detailansicht.

Seite – Warenkorb

Werden Produkte dem Warenkorb hinzugefügt kann man auf das Warenkorb Symbol klicken und es erscheint diese Seite. Hier erscheinen alle Produkte die dem Warenkorb hinzugefügt wurden.

Footer

Auf dem Footer sind verschiedene Informationen zu finden. Die Kontaktadresse mit Tel. und E-Mail können eingesehen werden. Weiter sind Metadaten sichtbar und es gibt ein lokales Werbevideo für die Stadt Thun.

Link: https://vipuseso.myhostpoint.ch/

Diese Website ist ein Betriebsportrait meines elterlichen Betriebes. Ich möchte mit einer Website einen kleinen Einblick geben und es soll auch ein Verkaufskanal für unser Fleisch entstehen.

Die Website ist sehr neutral gestaltet, da ich nicht ein bestimmtes Kundensortiment anstrebe möchte, sondern gerne Kunden von jung bis alt hätte.

Startseite

Auf der Startseite steht als erstes unser Logo im Vordergrund, welches eher verspielt wirkt. Das Hintergrundbild ist auf allen Seiten das selbe, was eine gewisse Struktur gibt.

Über uns

Ich habe sechs Menupunkte gestaltet, welche Auskunft geben. Im Kapitel „Über uns“ werden die wichtigsten Betriebszweige vorgestellt.

Bildergalerie

Im Menuteil „Bildergalerie“ wurde eine Galerie mit ein paar Bildern eingefügt.

Shop

Da ich keinen Shop an sich eröffnen möchte, habe ich mittels des Plugin „MailPoet Subscription Form“ eine Einschreibeliste kreiert.
Da wir nicht zu jedem Zeitpunkt Fleisch haben und dieses auch nicht im grossen Stil lagern können, sollte die Lösung diese Liste sein. Eingeschriebene Personen werden jeweils kontaktieren wennn geschlachtet wird. So können sich sich Personen mit Name, Email und gewünschter Menge Fleisch einschrieben.

Kontakt

Zu guter Letzt habe ich noch unsere Kontaktinformationen hinterlegt. Dies umfasst natürlich Adresse und Telefonnummer.
Weiter sind Social Icons vorhanden, welche auf die Netzwerke verlinken (jedoch keine Seiten vorhanden).
Mittels dem Plugin „WP Map Block“ habe ich zusätzlich eine Karte mit unserem Standort eingefügt.

Im Modul BUUx442 WebTechnologie und WebDesign war das Ziel eine Website mit WordPress zu gestalten. Da fast jeder gerne Desserts und Süssigkeiten isst, habe ich mir gedacht, eine Website mit Rezepten zu gestalten. Dabei werden die Rezepte jeweils als Blog verfasst und gepostet. https://udufiteg.myhostpoint.ch/

Die Webseite ist fiktiv und dient zu Lernzwecken. Die Rezepte sind jedoch wahrheitsgemäss und können ausprobiert werden.

Home
Für das Design der Website wurde das Theme Ashe verwendet. Auf der linken Seite werden jeweils die neusten Beiträge und Kommentare angezeigt. In der Mitte sind alle Beiträge in Kurzform zu sehen. Dabei können die einzelnen Beiträge angeklickt werden und das ganze Rezept ist ersichtlich. Auf der rechten Seite kann mit der Suchfunktion ein Rezept schnell gefunden werden. Ebenfalls wurden bei jedem Rezept verschiedene Schlagwörter definiert, welche ebenfalls zur erleichterten (Schnell-)Suche dienen. Zudem ist auf der rechten Seite noch das Archiv zu finden.

Menu
Das Menu besteht aus vier verschiedenen Kategorien. Die einzelnen Rezepte stellen jeweils die Unterkategorie dar.

• Kuchen
  • Marmorcake
  • Schoggiwürfel mit Kokosstreusel
• Creme & Mousse
  • Apfelsaftcreme
  • Schokoladenmousse
  • Vanillecreme
• Muffins
  • Heidelbeermuffins
  • Kinderschokoladen Muffins
• Smoothies
  • Beerentraum
  • Grashüpfer

Mein Lieblingsrezept: Schokoladenmousse
Das Schokoladenmousse ist schnell gemacht und zu jeder Jahreszeit ein Gaumenschmaus.

Kontakt
Das Plugin ‘Contact Form 7’ kann gratis installiert werden. Damit wurde das Kontaktformular gestaltet. So können die Nutzer der Webseite schnell und einfach Kontakt mit der Betreiberin aufnehmen.

Über mich

Ein kleiner Text beschreibt die Betreiberin der Seite. Dieser ist jedoch noch ausbaufähig.

Idee

Da die Website unseres Familienbetriebes schon sehr veraltet ist und teilweise nicht mehr funktioniert, ist es mein Ziel, möglichst bald eine neue Website zu erstellen. Die Website soll über unser Angebot informieren, den Betrieb vorstellen und einen Webshop beinhalten, wo Christbäume online gekauft werden können.

Einen ersten Entwurf habe ich hier mit WordPress umgesetzt. Es handelt sich nur um eine Testseite – Preise, Adresse etc. entsprechen daher nicht der Wahrheit. Die Website ist unter https://tufugogu.myhostpoint.ch/ zu finden Da es sich jedoch um einen temporären Webserver handelt, wird sie nach 30 Tagen wieder gelöscht. Verwendet wurde das Theme „Hestia“.

Home

Die Startseite soll einladend wirken und auf den ersten Blick wichtige Informationen preisgeben. Aus meiner Sicht ist an diesem Theme der Vorteil, dass der Button für den Onlineshop direkt in der Mitte platziert wird und so die Kunden aufmerksam gemacht werden. Ausserdem werden immer die aktuellsten Beiträge auf der Startseite publiziert, so können Angaben wie z.B. ändernde Öffnungszeiten gut kommuniziert werden. Im Hauptmenu am oberen Seitenrand sind alle Unterseiten zu finden, ausserdem dient das Logo ebenfalls als Link zur Startseite. Im Fussmenu können Instagram- und Facebookseite verlinkt werden.

Allgemeine Informationen

Kontakt und Anfahrt

Hier wurden zwei Plugins installiert, einerseits WP Google Maps, mit welchem sehr einfach eine Karte eingefügt werden konnte. Zum Zweiten das WPForms Lite, damit wurde das Kontaktformular erstellt. Beide sind sehr einfach anzuwenden, jedoch sind mit den Gratisversionen die Möglichkeiten limitiert. Besonders beim Kontaktformular wäre ein Feld für die Telefonnummer praktisch. Wenn man draussen arbeitet, ist es oft „gäbiger“, jemandem telefonisch zu antworten. Dafür müsste man jedoch die Pro Version erwerben.

Onlineshop

Zwar wird die Mehrheit der Kunden ihren Baum immer vor Ort kaufen wollen, aber in speziellen Situationen wäre ein Angebot für den Onlinekauf von Vorteil. Mit dem Plugin WooCommerce ging das Erstellen des Shops überraschend einfach. Lediglich die Produkte mussten erstellt werden, Warenkorb, Kasse etc. ist bereits vorhanden und kann ohne grossen Anpassungen genutzt werden. In diesem Fall wurden für jede Baumart zwei Variationen erfunden, hier könnten aber noch viele weitere erstellt werden.

Fazit

Aus meiner Sicht kann mit WordPress sehr einfach eine ansprechende Website gestaltet werden, wenn man genügend Zeit investiert. Die Plugins erleichtern einem die Arbeit sehr, besonders überrascht war ich, wie einfach das Erstellen des Shops ablief. Natürlich gibt es auch Nachteile, so kann zum Beispiel ein Layout nicht beliebig verändert werden, wenn man sich einmal für ein Theme entschieden hat. Auch ist das Wechseln zwischen Themes nicht möglich, wenn man die Website schon etwas entwickelt hat. Jedoch denke ich, wenn man ein bisschen Zeit investiert und sich mit den Möglichkeiten der verschiedenen Themes auseinandersetzt und geeignete Plugins verwendet, dass noch viel mehr Dinge möglich sind.

Ich würde jederzeit wieder mit WordPress arbeiten. Das Erstellen einer HTML / CSS Seite ist aus meiner Sicht für Laien viel zu kompliziert und zeitaufwändig. Ich fand es schwierig (auch mit CSS), eine Seite etwas ansprechend zu gestalten – irgendwie sah es immer aus wie aus dem letzten Jahrhundert… Wenn aber jemandem das Programmieren Spass macht und er sich damit intensiv auseinandersetzt, sind wahrscheinlich die Möglichkeiten grösser.

Entstehungsgeschichte

Dies ist eine eine Website für eine fiktives Restaurant. Entschieden für ein Restaurant habe ich mich aufgrund meiner beruflichen Laufbahn als Koch. Erstellt wurde die Website mit Hilfe von WordPress, den Vorlesungen, Dozenten, Google und Mitstudierenden. Ich habe probiert möglichst alle wichtigen Anforderung, die ein Restaurant an Ihre Website hat, umzusetzen.

Website

Startseite

Die Startseite habe ich so gestaltet,dass auf den ersten Blick klar ist, dass es sich um eine Webiste eines Restaurants handelt. Die Proportionen wirken auf dem Bild nicht ganz wie sie eigentlich sollten, weil ich die Website auf Smartphones und Desktops abgestimmt habe und ich deswegen weit raus zommen musste.

• 

Plugins

Angewendet habe ich folgende 3 Plugins,“ WP Google Maps“, „Photo Gallery“ und “ Five Start Restaurant Reservations“. Letzeres ist ein Plugin für Reservationen. „Wp Google Maps“ wurde verwendet um den Standort des Restaurants anzuzeigen, damit es von den Kunden leicht gefunden werden kann.

• 

„Photo Gallery“ wurde eingesetzt um verschiedene Menüs den Kunden schmackhaft zu machen. Die Fotos können hier vom Kunden entweder in einer Diashow oder mit selber durchklicken angeschaut werden.

• 

• 

Beiträge

Als Zusatz habe ich einen Beitrag hochgeladen, der kommentiert werden kann. Er dient dazu ein möglichst ehrliches Feedback von den Kunden einzuholen. Die Kommentare werden aber erst freigeschaltet nach Überprüfung, damit sich keine Beleidigungen, oder schlimmeres einschleichen und es muss ein Telefon-Nr angeben werden, als zusätzliche Sicherheitsmassnahme .

• 

• 

Fazit

Ich habe meine WordPresse Seite vorgestellt, weil ich diese auch ohne grosse Vorkenntnisse im Bereich Web-Gestaltung zeitgerecht gestalten konnte. Als Anfänger ist WordPress zu empfehlen. Es ist sehr leicht verständlich und es gibt viele klar verständliche Informationen im Netz, die einem bei einem Problem helfen können. Weiter habe Ich gelernt mit Plugins umzugehen und auch wie man Html und CSS kombiniert und auf einer Website einsetzen kann. Dieses erworbene Wissen habe ich aber hauptsächlich in der selber programmierten Website angewendet.

Autor:Simon Schnell 17.02.21