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