Schneeweisschen Blog

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.

Domaine de Serreaux-Dessus

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.

Image 1: Page d’accueil

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).

image 2: Descriptif du domaine

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.

Image 3: Page présentant les vins

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.

Image 4: Page sur les manifestations

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).

Image 5 Page de contact

„`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.

Schomberg Chocolat Suisse

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.

BUUx442 – Café und Bar Liebling (fiktiv)

Da ich mich vorwiegend für’s Programmieren und weniger für‘ Bedienen von WordPress und ähnlichen Tools interessiere, habe ich mich entschieden, nicht all zu viel Zeit in diesen Teil des Moduls zu stecken. Ich wählte ein „Design“ aus welches, mich ansprach und begann in diesem mit den erst besten Ideen eine einfache Website mit den gängigen Rubriken zu erstellen. Mein Ziel war es später, diese selbst „nachzuprogrammieren“ (html, css, javascript,..).

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.

Sonderwaldreservat

Im Rahmen des Wahlmoduls BUUx552 Webdesign wurden wir in die Thematik Home Page erstellen mit Word Press eingeführt. Als Grundlage diente das neu ausgeschiedene Sonderwaldreservat Thurau in Wil SG welches ich als Förster betreuen darf.

Im Sonderwaldreservat werden verschiedene Waldperimeter unterschiedlich gepflegt um eine vorher definierte Zielsetzung zu erreichen.


Ziel ist ein virtueller Rundgang durch das Waldreservat. Die Seite soll schlicht und ohne viel Schnick schnack daher kommen. Ich arbeite lieber mit aussagekräftigen Bilder. Mit wenig Text ist die Page auch mit mobilen Geräten gut lesbar.

Titelbild:

Ein von meinem Vorgänger aufgenommenes Titelbild ohne viel Text soll die Besucherinnen und Besucher auf der Homepage willkommen heissen.

Menü

Da jeder Perimeter nach anderen Zielsetzungen bewirtschaftet werden, werden die unterschiedlichen Pflegemassnahmen inkl. einem Foto vom Standort beschrieben.

Links:

Damit ersichtlich ist, wem das Grundstück gehört und durch wen das Reservat bewirtschaftet wird, wird mit den entsprechenden Links auf die jeweilige Homepage verwiesen.

Maps (Plug In):

Damit sich Waldbesucherinnen und Waldbesucher im Waldreservat orientieren können, wurde eine Karte mit dem Plug in «MapPress Maps for WordPress»

Ich favorisierte das Plug in mit Open Maps. Hier entfällt die Anmeldung (Google) und es entstehen keine Lizenzkosten).

Zukunft

In einer weiteren Phase werden die einzelnen Perimeter mit einem physischen QR Code versehen. So können die Waldbesucherinnen und Waldbesucher vor Ort auf den QR Code klicken und werden direkt auf den entsprechenden Menüpunkt auf der Homepage verwiesen.

Start up: Marti-Fütterungen

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.

Startseite Marti-Fütterungen

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.

Jungvieh Marti-Fütterungen

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.

Kategorie Milchvieh Marti-Fütterungen

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.

Kälbermast Marti-Fütterungen

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

Über uns Marti-Fütterungen

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.

Meine Hobbyseite

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.

Arbres // Bäume & Technology

Présentation

Au commencement du projet, je me suis demandé quel objectif je pouvais remplir en lançant ce site internet, pour lui donner une utilité concrète. Le but étant de pouvoir, par la suite, l’employer réellement au-delà du cadre du module. En tant que futur professionnel de la forêt, la reconnaissance des essences est l’un de mes prérequis pour effectuer mon travail correctement mais c’est encore à présent l’une de mes plus grandes difficultés. C’est pourquoi j’ai choisi de réaliser ce site internet dans un but d’information et d’aide à la reconnaissance des arbres, ce qui me permet de me former tout en apportant quelque chose à d’autres personnes. Cela me semble aussi cohérent avec ma spécialisation en forêt & société. Proposer des pages comparatives et dynamiques est un aspect important car il est souvent laissé de côté dans les encyclopédies ou les autres sites de particuliers que j’ai pu consulter : les espèces sont souvent décrites seules et en absolu, mais, sur le terrain, la comparaison permet parfois de reconnaître les essences plus rapidement avec un raisonnement par élimination.
Afin d’être accessible au plus grand nombre et à but d’exercice, le site internet est disponible dans quatre langues (français, allemand, anglais, espagnol).

Cliquez ici pour accéder à Arbres // Bäume & Technology

https://vatumaxu.myhostpoint.ch/

Theme & Plugins

J’ai utilisé le thème „Blocksy“ qui m’a semblé offrir de nombreuses possibilités de personnalisations pour offrir un aspect attrayant à mon site internet. La plupart des éléments (header, footer, barres latérales, etc.) sont configurables en détail, même si parfois on atteint quelques limites (ce n’est pas pixel perfect).

Pour gérer les quatre langues, j’ai installé le plugin polylang qui permet de gérer les liens entre les pages qui sont des traductions. Les drapeaux se trouvent dans le menu 1, tout en haut du site, à côté des pages statiques. Ils ne s’affichent pas si la langue souhaitée n’est pas disponible pour la page ou l’article actuel. Trois pages fixes sont disponibles pour chaque langue (12 total) : La page d’accueil, „Qu’est-ce que c’est?“ et „Contact“. Certains éléments, comme le module de partage, ne sont pas traduisibles, parce qu’ils dépendent de Blocksy qui n’est pas entièrement compatible avec polylang, apparemment.

Fig. 2 : Diaporama.

Jetpack permet de facilement dupliquer une page, c’est pratique pour la traduction comme le contenu reste en place (seule la version pro de polylang permet aussi de dupliquer les pages automatiquement). Par contre, la traduction des médias et des images passe obligatoirement par la création d’une copie et demande énormément de temps, on atteint une limite de wordpress ou des plugins gratuits.

Jetpack offre aussi des galeries plus jolies que la base de wordpress, avec des possibilités de diaporamas (Fig. 2), de mosaïques ou de comparaison entre deux images (Fig. 3).

Fig. 3 : Mosaïque d’images rondes pour les bourgeons et comparaison pour les écorces.

Responsive Progress Bar est un petit plugin qui permet d’afficher des barres de progression avec un shortcode. J’affiche donc de manière attrayante dans la page d’accueil le niveau de complétion des différentes traductions (Fig. 1) et du nombre d’essences à traiter. Le seul problème est que le texte n’apparaît que dans la barre remplie.

J’ai installé WP Google Maps, mais je ne l’ai pas utilisé. Je n’avais pas envie de demander une clé API pour le moment.

Pages & Catégories

Le site internet est conçu avec un menu 1 qui permet de naviguer entre les langues et les pages statiques et un menu 2 qui permet de naviguer entre les catégories. Seule la version pro de Blocksy permet d’avoir un header différent pour certaines pages, mais mon objectif aurait été d’avoir une page d’accueil plus „punchy“ avec les menus disposés différemments. Dans la page „Qu’est-ce que c’est“, j’ai affiché une image mise en avant contrairement aux autres pages statiques. Pour la page contact, j’ai intégré deux cartes qui indiquent l’emplacement de la HAFL avec des iframe : une de Google maps et l’autre de map.geo.admin.ch. Le formulaire de contact a été mis en place grâce à Jetpack.

Fig. 4 : La page de contact en espagnol.

Les pages de catégories n’affichent pour le moment du contenu qu’en français, mais elles permettent de réunir les articles publiés sous forme de blog. À l’avenir, je pourrais réfléchir à un moyen plus ergonomique de naviguer entre les articles tout en évitant trop de redondance. J’ai laissé les modules qui affichent les derniers articles publiés, mais je pourrais peut-être modifier ça.

Finalement, j’ai modifié le footer en intégrant un bloc html dans la structure que propose Blocksy, ce qui me permet d’afficher une version modifiée de l’horloge Javascript que l’on a vue lors du module BUUx562.

Fig.5 : Footer avec l’horloge Javascript.

Conclusion

Partir d’un projet de cours pour obtenir un „vrai“ site internet fonctionnel m’a demandé plus de temps que prévu, d’autant plus en ajoutant du travail de traduction qui n’était pas nécessaire, en plus de la prise des photos et du dessin du logo. Je suis cependant content d’avoir à présent une plateforme qui est tout à fait fonctionnelle sur laquelle je peux à présent ajouter du contenu.

Sonnebueb Hofprodukte

Link: https://reliluko.myhostpoint.ch

Ich habe eine Website für meinen elterlichen Hof aufgebaut. Momentan betreiben wir jedoch noch keine Direktvermarktung, weshalb der Inhalt der Homepage fiktiv ist. Als Grunddesign wählte ich das Thema „Twenty Seventeen“ aus. Wichtig waren mir Übersichtlichkeit und Einheitlichkeit der Homepage.

Startseite

Auf der Startseite werden die Webbesucherinnen und -besucher von einem Header-Bild, welches unsere weidenden Kühe zeigt, begrüsst. Gleich darunter befindet sich ein horizontales Menu für die Seitennavigation.

Dann kommen zwei Beiträge. Einer beinhaltet eine Slideshow aus dem Plugin Jetpack und der andere ein Video.

Weiter habe ich den Footer angepasst. Mit dem folgenden zusätzlichen CSS konnte ich den Text „Stolz präsentiert von WordPress“ entfernen:

.site-info {
visibility: hidden;
}

Über uns

Auf der Seite „Über uns“ ist der Betrieb sowie das Angebot beschrieben. Zudem habe ich eine Tiled Gallery aus dem Plugin Jetpack eingefügt.

Kontakt

Für die Kontaktseite habe ich das Plugin „Contact Form 7“ installiert. So konnte ich auf dieser Seite ein Kontaktformular einbetten und anpassen. Zudem habe ich das Plugin „WP Open Street Map“ installiert, damit ich unseren Standort zeigen kann.

BUUx442 Webdesign

Eine eigene Website erstellen mit WordPress

Zur Bearbeitung des Auftrages wurden die letzten Winterferien als Anlass genommen. In Zermatt gibt es viele schöne Orte die gerade dazu einladen ein Foto zu machen. Gleichzeitig gibt es auch jede Menge Touristen, deshalb wurde hierfür kurzerhand die Touristenfalle AG gegründet. Die Website soll die Unternehmung kurz vorstellen, das Angebot beinhalten und eine Möglichkeit bieten Kontakt aufzunehmen.

Als Design wurde das Design-Thema 2017 von WordPress gewählt. Dieses sah auf den ersten Anblick ansprechend aus und erledigte den Job relativ befriedigend. Im Nachhinein war es ein guter erster Testversuch- bei einer zweiten konkreteren Durchführung würde aber definitiv ein anderes Design gewählt werden. Die Wahl des Design scheint im Hinblick auf die Absicht der Website ein sehr wichtiger Punkt zu sein und sollte nicht unterschätzt werden.
Als Header wurde ein farblich passendes Foto gewählt und auf den ersten Blick erkennt man durch den Schriftzug „Photo-Touren in Zermatt“ um was es sich handelt.

Home

Beim Runterscrollen gelangt der Besucher direkt zur Home. Hier wird der Besucher aufmerksam gemacht, welches Bedürfnis die Touristenfalle AG abdeckt und soll letztendlich dazu führen, dass der Besucher auf der Webseite verbleibt und z.B. in der Menu-Leiste auf Angebot drückt.

Über uns

In der Menu-Kategorie „Über uns“ entstand eine Vorstellung der Unternehmung mit Leitbild usw.

Angebot

Beim Angebot wurden mittels Überschriften und Bilder die verschiedenen Touren vorgestellt.

Impressionen

Da es für eine solche Dienstleistung wichtig ist, ihre „Endprodukte“ den potenziellen Kunden zu präsentieren, wurde eine Menu-Kategorie „Impressionen“ erstellt, worin eine Slide-Show eingefügt wurde.

Kontakt

Notwendig war auch die Erstellung der Menu-Kategorie „Kontakt“. Der Besucher und potenzielle Kunde soll bei Interesse einfach in Kontakt treten können und dabei verschiedene Möglichkeiten zur Auswahl haben. Es wurden Social Media Kanäle und ein Google Maps Standort mittels den Plugins „Social Media and Share Icons & WP Google Maps“ verlinkt. Um dem Kunden ein positives Gefühl bei der Kontaktaufnahme zu vermitteln wurde noch eine kleine Botschaft des CEO’s der Unternehmung eingefügt.

Link: https://ikikatip.myhostpoint.ch/