Dokumentation der Website «Lasabell’s Gnadenhof»

Die Idee war es, eine Website mit HTML und CSS für einen fiktiven Gnadenhof zu erstellen. Dabei sind auf der Hauptseite die auf dem Gnadenhof lebenden Tiere mit Namen und Steckbrief ersichtlich. Zudem sind die Lieblingsrezepte der Tiere verlinkt, wodurch die Rezepte zuhause gekocht und den Tieren mitgebracht werden können. Unten auf der Seite sind zudem einige Informationen über unseren Hof sowie unsere Emailadresse ersichtlich. Weiter haben wir den Standort von unserem Hof auf Google Maps verlinkt. Auf der linken Seite in rosa ist eine Liste zur einfachen Navigation angebracht. Die Bilder haben wir mit KI generiert oder aus dem Internet kopiert.

Wenn man mit der Maus auf die Bilder geht, erhält man nähere Informationen zu den Tieren, wie ihr Alter, Gewicht, Grösse und ihre Herkunft. 

Um Spenden entgegenzunehmen haben wir noch einen QR-Code für Twint fixiert.

HTML-Website Seeds&Plants

Ich habe mich dafür entschieden, eine Webseite einer fiktiven Firma Seeds&Plants zu machen, welche Saatgut verkauft. Zudem gibt es auf der Website auch einen Blog, wo über verschiedene Themen zu Saatgut, Pflanzen, Garten und Landwirtschaft geschrieben wird.

Es wurde eine Webseite mit WordPress und eine mit HTML, CSS, JavaScript und PHP erstellt. Im Folgenden wird die HTML-Seite etwas genauer vorgestellt.

Auf der Home-Seite wird der Shop wie im Bild oben dargestellt. Geht man mit der Maus auf ein Bild, so wird das Bild „umgekehrt“ und es erscheint der Name der Pflanze. Hier könnte bei Bedarf noch der Preis, die Menge oder weitere Informationen zum Saatgut hinzugefügt werden. Klickt man auf den Text wird man auf das Bestellformular weitergeleitet, wo man das Produkt und die Menge wählen kann.

Das Bestellformular wurde mittels PHP so programmiert, dass beim Absenden ein Email mit den ausgefüllten Daten verschickt wird – momentan wird das Mail an mein BFH-Mail gesendet. Der Kunde wird auf eine Seite mit der Bestellbestätigung weitergeleitet.

Mail mit den Daten aus dem Formular
Bestätigung für die Bestellung für den Kunden

Zusätzlich kann man auf die Seite Shop durch das Menü auf der Home-Seite oben rechts. Dort sieht man alle Produkte, mit Gewicht und Preis. Auch hier kann man jeweils wieder auf das Produkt klicken, um zum Bestellformular zu kommen.

Der Blog ist ebenfalls auf der Home-Seite ersichtlich. Durch Klicken auf den entsprechenden Titel gelangt man direkt zum Blog-Beitrag.

Wiederum gibt es auch die Seite Blog, welche oben rechts im Menü angewählt werden kann. Dort werden alle Blogs aufgeführt.

Schlussendlich wurde auf der Home-Seite noch ein Abschnitt About eingefügt, bei welchem man den Betrieb/die Firma beschreiben würde. Zudem gibt es auch eine interaktive Karte, wo die Lage der Firma ersichtlich wird.

Auch gibt es eine Seite About oben rechts im Menü. Dort wird zusätzlich die Philosophie, Kontakt und weiteres aufgeführt.

Agri-Connect + AgriInfo

Hey ! Salut à toutes et tous !

Dans le cadre du module de la HAFL Webtech, nous avons eu le plaisir de faire de la programmation et de l’utilisation de logiciel afin de comprendre comment créer des sites internet. Incroyable non ?!

J’ai le plaisir de vous présenter les deux sites que j’ai créer :

Le 1er s’appelle Agri-connect. L’objectif de ce site est de proposer aux personnes du métier agricole ainsi qu’au grand public de nombreuses informations agricoles, allant des actualités aux productions et en passant par les labels Suisses. Concrètement le but est sensibiliser tous les partis à la production agricole Suisse et permettre une meilleure compréhension entre ceux-ci.

La page d’accueil ci-dessous vous présente les éléments essentiels du sites et des diverses informations en fonction du sujet souhaité.

La page „Qui sommes nous“ vous permettra d’en apprendre un peu plus sur la plateforme et ses objectifs ainsi qu’une présentation de votre team (en l’occurence, moi haha)

La prochaine page des „actualités“ vous permettra de rester au courant des événements agricoles important, notamment sur les résultats des initiatives, les changements de réglementation et autres infos croustillantes !

Avec la page des „Labels Suisse“, ça sera un jeux d’enfants d’expliquer à des personnes peu expérimentés les beaux labels de notre pays et de nos régions ! Découvrez les les normes et les bien-faits de ces labels sur l’agriculture Suisse

QUOI ?! tu ne sais pas comment on produit nos cultures en Suisse ? Alors viens sur la page „Grandes cultures“ afin de devenir un pro de la production de patates Suisse ! Quand tu passeras devant un champs, tu pourras te la pêter devant tes potes 😉

La page „Production animale“ te permettra également de frimer devant les pots lorsque tu passeras devant un troupeau !

Et comme le nom du site l’indique, Agri-Connect reste connecté afin de répondre à tes questions et potentiels réclamations.

Pour le deuxième site internet fais avec HTML, voici AgriInfo ! C’est également le même genre de site internet, mais qui présente une mise en page différente 😉

Site web – Marco Odermatt

Notre site a été développé dans le cadre du cours BUUx442 „Programmation et graphisme pour le web“. Ce cours nous a permis d’acquérir et d’approfondir nos compétences dans l’utilisation de langages informatiques tels que HTML, CSS, PHP et JavaScript, ainsi que dans la gestion d’un serveur Internet. Le site présenté ci-dessous a été conçu à l’aide de WordPress.

Ce site à pour but de mettre en lumière la star suisse de ski Marco Odermatt. Il s’y trouve les informations les plus importantes sur cet athlète.

Il est possible d’entrer en contact avec l’équipe de gestion de Marco et d’intégrer l’équipe de travail à l’aide des postes ouverts disponibles sur le site.

Nous vous invitons à découvrir notre site internet…

Depuis l’intégralité des pages du site web, il est possible de naviguer vers les autres pages en un simple click.

La page d’accueil est composé de descriptions brèves de l’athlète dans un design minimaliste et épuré. Le menu de navigation est disponible en haut de la page peu importe où l’on se trouve sur le page, ce qui rend la navigation facile d’utilisation.

Au fur et à mesure des exploits accomplis par Marco, des articles vont être publiés. Les fans pourront réagir grâce au formulaire pour laisser un commentaire.

La page „contact“ permet d’obtenir les informations nécessaires, lieu, adresse, lieu de présence, etc. Il est aussi possible d’avoir accès aux postes ouvertes pour intégrer l’équipe qui se cache derrière Odi. Ce lien dirige les intéressés vers une page de jobs ouverts.

Une extension Jetpack a été installée pour garantir la sécurité de cette page web.

Pierres et Vignes : Un traiteur fictif basé à Bienne

Salut à tous ! Aujourd’hui, je vous présente mon site web, créé pour une entreprise de traiteur fictive basée à Bienne.

L’objectif ? Offrir une vitrine moderne et fluide où l’on peut découvrir les services proposés, prendre contact facilement par e-mail et même parcourir quelques articles de blog liés au monde de la gastronomie.

Voici un lien vers la page web : Acceuil – Pierre et Vignes

En termes de plugins :

Elementor : Un plugin est ultra-pratique pour structurer un site sans se prendre la tête et de manière fluide. Un must-have pour toute personne qui veut un rendu pro sans trop de complications.

Yoast SEO : Intéressant pour vérifier le référencement et s’assurer que le site est bien positionné sur Google. C’est un vrai plus quand on veut attirer des visiteurs et être visible en ligne.

WP Fastest Cache : Parce qu’un site lent, c’est nul! Ce plugin optimise la vitesse de chargement et rend la navigation plus fluide.

Voici ci-dessous quelques images de mon site internet, à commencer par la page d’accueil. A noter que le logo a été crée à partir d’un modèle depuis le site Canva. Sur la page d’acceuil il est possible de cliquer sur le bouton „Prendre contact“, nous redirgeant directement vers notre boite mail avec l’adresse de l’entreprise :

Un autre page est dédiée aux différents types de services qu’offre l’entreprise, les prix y sont également indiqués. Il y en a 4 au total. :

De même, une page „à propos“ présente notamment les principes de l’entreprise, ou encore différents témoignages d’anciens clients :

Finalement, une page est dédiée au blog de Pierres et Vignes, abordant différents sujets d’actualité, comme par exemple la cuisine végane. Cette dernière est également accessible depuis la page d’accueil.

Certains également rendent le site mieux navigable et plus joli esthétiquement, notamment la présence des widgets Google Maps et l’accès aux réseaux sociaux, ainsi que la structure du menu permettant de naviguer entre les différentes pages.

En espérant vous avoir inspiré pour vos futurs travaux, à bientôt !

Mein Studium

an der Hochschule für Agrar-, Forst-, und Lebensmittelwissenschaften (HAFL)

Im Studium lernte ich viele neue Sachen und durfte an vielen coole Exkursionen teilnehmen.

Bild: Metzgerzentrum Spiez, Zerteilen eines Rindviertels

Bild: Kersner Edelpilze, Produktionsführung bei Funal Systems Event

Bild: Labor HAFL, Enoki-Pilz auf Dextrose Agar

Zusammengefasst: Sehr cool aber bin froh wenns dann vorbei ist 🙂

Mit gemischten Gefühlen geht das Studium dem Ende zu. Auf der einen Seite freue ich mich auf die Arbeitswelt und neue Challanges, auf der anderen Seite werde ich die (guten und prüfungsphasen) Zeiten vermissen. Es ist und bleibt ein spezielles Privileg an der Hafl studieren zu können.

Mit Besten Grüssen

Benedikt Sager

Betrieb Webseite

Während dieses Kurses habe ich mich entschieden, die Website des Familienbetriebs neu zu gestalten, vielleicht werden wir diese Seite in Zukunft als unsere Offizielle Webseite benutzen.

Bei der Auswahl des Themas habe ich darauf geachtet, dass es eine saubere Seite ohne zu viele Schnörkel ist, da ich viele Bilder verwenden wollte und die Seite nicht zu unübersichtlich werden sollte, ich habe mich für das Thema „Nature Bliss“ entschieden. Was mir auch wicht war ist, dass die Seite in zwei Sprachen, Italienisch und Deutsch, verfügbar sein sollte, was dank eines Plugins (Polylang) möglich war.

Auf der Startseite finden Sie eine kleine Präsentation des Betriebes und ein YouTube-Video, das Coop vor einigen Jahren gedreht hat und das unsere Familienbetrieb in wenige Minuten präsentiert. Der Rest der Website stellt die Familie, unsere Produkte und Dienstleistungen vor, vom Direktverkauf über Gastronomie bis zum B&B. Für mich ist es wichtig, einen klaren Look zu haben mit trotzdem vielen Bildern, die meiner Meinung nach besser erklären als Worte.

Ausserdem wollte ich auf der letzten Seite „Kontakte“ eine Karte mit 2 Platzhaltern für unseres Agroturismus und das Selbstbedienung-Laden haben, was ich mit dem Plugin „WP Map Block“ erzielen konnte.

Verschiedene Arten zum Erstellen von Webseiten

In der letzten Woche wurden 2 Webseiten auf unterschiedliche Arten erstellt. Die erste wurde mit dem Programm WordPress erstellt und die zweite wurde von Grund auf selber mit HTML und CSS erstellt. Im untenstehenden Beitrag wird auf die Webseite eingegangen, die mit WordPress erstellt wurde.

Es wurde eine Webseite für einen Verein erstellt. Es besteht bereit eine Webseite für die Landjugend untere Emme. Der Inhalt wurde grösstenteils von dieser Seite übernommen und es wurden kleinere Anpassungen gemacht.

Auf der Homeseite werden die Besucher begrüsst und es sind die Social Media-Konten der Landjugend verlinkt.

Weiter besteht eine Seite mit dem Vorstand, mit Informationen über den Verein, das Programm wurde eingefügt, es gibt verschiedenen Bildergalerien und eine Seite enthält ein Kontaktformular.

Ich gehe nur kurz auf diese Seiten ein, bei denen etwas spezielles zur Gestaltung eingesetzt wurde.

Das Programm (PDF-Datei) konnte ganz einfach über den Block Datei eingefügt werden. Wie unten ersichtlich wurde es so eingefügt, dass es direkt sichtbar ist und angeschaut werden kann. Unterhalb hat es zusätzlich einen Button, mit welchen das PDF heruntergeladen werden kann.

Plugin wurden diverse eingesetzt. Für die Galerie wurde das Plugin NextGen Gallery eingesetzt. Dort konnten Galerien erstellt werden. Die Galerien konnten einem erstellten Album hinzugefügt werden und am Ende konnte direkt das Album eingefügt werden und es werden alle Galerien von diesem Album nebeneinander angezeigt.

Auf der Seite Bildergalerie befindet sich eine einzelne Galerie mit ein paar Schnappschüssen von den letzten Jahren. Zudem wurden bei dieser Seite mehrere Unterseiten für jedes Jahr gemacht.

Diese Unterseiten enthalten je ein Album welches mehrere Galerien enthalt. Auf der Webseite wird dies so angezeigt:

Weitere Galerien würden unten dran folgen.

Ein weiteres verwendetes Plugin ist das Kontaktformular.

LeubaMot

J’ai décidé de créer un site pour présenter 2 de mes passions: la photographie et la moto. Pour ce faire, j’ai débuté par utiliser un modèle prédéfini sur WordPress que j’ai ensuite adapté, habillé et peaufiner pour que cela ressemble à ce que je voulais.

L’objectif est de présenter les images et l’équipe de travail, mais aussi, de proposer une option d’achat pour les photos. En proposant un portfolio et un formulaire de contact pour définir quelles sont les photos et les formats qui sont demandés.

On commence donc sur cette première page, Home, du site. Elle s’occupe de captiver l’attention de l’utilisateur grâce a plusieurs images défilant derrière cette accroche „Découvrez un nouveau monde“. On peut aussi remarquer des informations de contact sur le haut de la page, ainsi que les liens direct sur les différents réseaux sociaux. Juste en dessous on peux voir le menu avec „Home“, „Découverte“, „Portfolio“, „Blog“ et „Contact“.

Sur la suite de la page, nous pouvons découvrir différents blocs présentant les objectifs du site et donnant des introductions sur les différentes pages du site. Des boutons cliquables renvoie directement sur les autres pages.

Un premier espace de contact est déjà disponible sur cette page.

Un rappel des coordonnées et des réseaux sociaux est fait tout en bas de la page.

Découverte

Ensuite nous passons sur la page Découverte qui permet de présenter l’équipe derrière le travail de modèles et photographe. De plus, nous en avons profiter pour partager notre vision de la moto et de la photo.

Portfolio

Sur cette page, Nous retrouvons les différentes photos que nous proposons. Il y a deux méthodes pour les voir:

La première est une simple suite d’images avec les numéros pour les identifier.

La seconde est un format diaporama pour lequel j’ai utilisé une version gratuite de l’extension „NextGEN Gallery“.

Blog

Cette page nous permet de facilement partager notre actualité et aussi de recevoir des commentaires de la part des visiteurs. Les carrés bruns sont remplaceables par des images si on remplis correctement le formulaire pour l’article.

Contact

Cette page permet d’envoyer directement un mail.

Extension „Jetpack“

Cette extension permet de visualiser les statistique du site telles que le nombre de visiteurs, leurs origines, le nombre de clics, etc… Toutefois la version gratuite est assez limitée.

My first Websit with HTML/WordPress

By Noé Bell

In the first day, we had to create a Website with WordPress.
So first I had to figure out, what kind of website I want.
As I had no idea, and no plan to ever make a Website, I decided to just invent something.

That was the birth of my „Formicia Antventure“ Website!

The Idea was, that a section of a Ant colony tries to get more Ants to joint their ranks and go adventureing.

So I tried to find a fitting Design and tried out 3. Wasn’d happy with it and started over. So I chose to take a plugin wich gave me to option to create a WordPress design with AI (starter Templates). So I did that and hoped for the best! Alongside this plugin I allsow installed some plugins that helped me modify the Desing and the sites of the Website.

The Webite was fine, I guess. I added one extra site and made a blog Post wich was accessible via a Button. But I felt verry restricted in how to build the Website and what features I want.

So the second day, where we learned to make our own Website with HTML and CSS was way more intresting for me.

Ironicly I tried to copy the Website I had created with WordPress in HTML and give it my own touch. But to noones suprise it was way more work. In the End, I am verry satisfied with my work. Probably becouse it felt like I made everything by my self (with a lot of help from Chat GPT).

WordPress (top) html (bottom).

My html-website had a verry similar homescreen as the wordpress Website. The Button leads on to the bottom of the Site, where you see the informations, how to join the Ant Expeditions. The header is fixed. So you allways see it, even if you scroll down. This was probably the best improvment to the WordPress site. The links in the header leads you to a second Site, similar as in my wordpress site, and to the WordPress Website itselfe. When you click on the logo (or the website Name) you get to the top of the main html-site.

WordPress (top) html (bottom).

The header is the same on the second site, wich would be more important, fi you add more sites.

The most demanding part of making the whole website with html was to arrang Objects and sections in a way, that look good.

WordPress (top) html (bottom).

I had strugles to create a body with a image as a background, while writeing on top of it. I allsow created a object that has transparent gray ontop of the img, so it looks darker, this was somewhat the same, as it was on the wordpress website. But alining everything, and allsow making shure, that the text was abov the image and the shade took quite a while.

On the second part of the picture you see how I tried to aling diffrent textes in sepeart colums. But if you konw html, you see that I made some pseudo-objects to creat thees fine lines and checkmarks. Learning how to make those, gave me the freedom to add little items to decorate the Website. Little decorations that took a lot of work.

I couldend work fast enght, to make everything with html and css in 3 Days, what I made in Worpress in 1 Day. So I mad no Post in the html-website and left out 2 sections in the mainsite.

Conclusion

If I’m ever to make a serious Website, I probably want to make it from scratch with html/css/js. With the main reason that its just way more fun. I allsow think that with a bit of training, the website looks way better if done with html and allsow not as generic as with WordPress.

I realy enjoyed playing around with html/css and invite you to look around on the Website at:

Formicia Antventure (hasn.ch)