webtech

Im Zusammenhang des Webtechnolgien-Wahlmoduls erstellten wir sowohl eine eigene Webseite auf Basis von HTML und CSS, sowie auch eine Webseite mit Hilfe vom Tool WordPress.

Der Gesunde Snackautomat soll Studierenden und Dozierenden ununterbrochen Zugang geben zu gesünderen Snacks und Getränken. Ein jeweils kurzer Beschrieb gibt Auskunft über das Sortiment. Dies kann unter https://apatixuv.myhostpoint.ch/ abgerufen werden.

Unter jedem Beitrag kann ein Kommentar abgegeben werden und so ein Urteil über das Gelesene gefällt werden, was neuen Leserinnen und Lesern als Referenz dienen kann.

Als Design wurde Nutrigen gewählt. Dieses bietet auf der Hauptseite einen Überblick über die veröffentlichten Beiträge. Es ist schlicht gehalten und überzeugt mit Übersichtlichkeit und Aussagekraft.

Unter Sortiment können verschiedene Unterkategorien ausgewählt werden. Dadurch kann ganz einfach nach etwas Bestimmtem gesucht werden. Damit die Veganer und Veganerinnen unter uns genau wissen, welche Produkte sie konsumieren können, haben wir gleich eine Unterkategorie dafür erstellt.

Als Plug-In wurde Maps verwendet. Maps ermöglicht eine Implementiereung einer Google-Karte mit Standort.

Durch das Modul haben wir viel Neues gelernt. Sowohl Programmieren, als auch die Gestaltung einer Website war uns bis zu diesem Zeitpunkt komplett unbekannt. Wir empfanden die Informationen als sehr lehrreich und haben nun mehr Ahnung darüber, wie sich Webseiten zusammensetzen und was dafür nötig ist, damit diese auch nach Wunsch funktionieren. Das Gelernte können wir gut anwenden bei der Gestaltung unseres Minorprojekts im Minor Enterpreneurship.

Ich habe versucht 2 Homepages zu erstellen. Eine mittels HTML, Javascript und PHP und eine mittels WordPress.

Die HTML Homepage bietet Webinare für Chat-GPT an.
Die WordPress Homepage ist mein eigener Blog.

Das Konzept der HTML Seite ist äusserst simpel. Es ist sehr textlastig und gefälllt mir weniger. Die WordPress Seite gefällt mir besser. Hier konnte ich auch mit diversen Plug-Ins herumprobieren und auch das einbetten von Bildern war einfacher.

Ein verwendetes Plug-In war JetPacket. Damit kann man diverse Sachen anstellen, ich habe es zum erstellen einer stylishen Gallerie verwendet. Die Bedienung war sehr simpel, das fand ich toll. Einziges Problem ist, dass man sich einen JetPacket Account erstellen muss was ich etwas unschön finde.

Auch gefällt mir bei WP die eingebaute Kommentarfunktion. Die Kommentare kriegt man hübsch aufgelistet im Admin-Menu (wie ein Email-Postfach). Auch sind dort Spam und Beleidigungen nicht möglich, da alle Kommentare zuerst noch vom Admin freigeschaltet werden müssen.

Fazit:

Ich muss sagen, dass mir der Ansatz mit WordPress deutlich besser gefällt.

Ich finde, dass die WordPress-Seite mit deutlich weniger Aufwand deutlich hübscher aussieht. Um mir eine Homepage komplett selbst zu gestalten müsste ich diverse Programmiersprachen lernen und selbst dann würde es vermutlich weniger hübsch aussehen als bei einem Anbieter wie WordPress.

Anbieter wie WordPress sparen deutlich Zeit und wenn man sich die Homepage selber gestalten will und keine grossen technischen Fähigkeiten hat ist dieser Ansatz deutlich besser.

hofallmend.ch (hasn.ch)https://hasn.ch/students/25-winzenried/1%20Webseite%20Hof%20Allmend/index.html

Für das Modul Webtechnologien und Webdesign habe ich mit HTML eine Webseite für unseren Landwirtschaftsbetrieb erstellt.

Auf der Einstiegsseite sind die wichtigsten Infos über den Hof zu finden

Unter der Rubrik „Hof“ werden die Betriebszweige vorgestellt

Beim Betriebszweig BnB wird das Angebot gezeigt. Ausserdem ist ein google Kalender eingebettet welcher darüber Auskunft gibt an welchen Daten das Zimmer verfügbar ist..

Fazit für den Kurs:

• Spannende Inputs zu HTML / CSS / PHP
• Java =

• Die Domain www.hofallmend.ch ist reserviert 🙂

Das Ziel dieser Webseite ist es, einen allgemeinen Überblick über verschiedene Einsatzmöglichkeiten von KI’s zu schaffen. Daher erstellte ich eine Seite zu ChatGPT, DALL-E 2 und weiteren möglichen Einsatzmöglichkeiten. Dazu wurde sehr viel dieser Webseite mit Hilfe einer KI erstellt. Insbesondere der Text wurde fast ausschliesslich durch eine KI (ChatGPT) geschrieben.

Auch der rote Botton, welcher auf jeder Seite in der Fusszeile zu finden ist, wurde mit Hilfe einer KI programmiert. Beim Drücken dieses Knopfes, wird man automatisch auf eine Seite weitergeleitet, auf der erklärt wird, wie dieser Knopf funktioniert. Ausserdem befindet sich eine Bildergalerie auf der Startseite, welche mit dem Plugin Jetpack erstellt wurde.

Das Logo der Webseite wurde ebenfalls mittels einer KI (DALL-E 2) erstellt.

Die Seite Blog, stellt einen Überblick dar, inklusive einer kurzen Vorschau, über die aktuellen Beiträge. Am Ende der Vorschau gibt es einen Link zum ganzen Beitrag.

Am Ende jedes Beitrages hat man die Möglichkeit einen Kommentar zu hinterlassen. Diese müssen anschliessend noch freigeschaltet werden.

Ein zusätzlicher Nutzer Namens Hans Mustermann wurde auch erstellt. Er hatt die funktion eines Autors.

Zur Programmierung des Kontaktfeldes wurde das Plugin Contact Form 7 benutzt. Bei diesem Schritt wurde ausserdem ein reCaptcha 3 eingefügt, um sicher zu stellen, dass ein Mensch das Kontaktformular ausfüllt.

Ausserdem wurden auf der Seite KI generierte Serie 2 Videos von Youtube verlinkt.

Das Design der Webseite wurde mit Hilfe von den Vorlagen von WordPress erstellt. Dazu gehörte auch der Header, inklusive der möglichkeit die weiteren Seiten zu verlinken.

Über diesen Header sind alle Seiten zugänglich ausser die Seite mit der Beschreibung des roten Konpfes. Ein kleines EasterEgg hat noch nie geschadet ;).

Die Webseite wurde erstellt für Wanderliebhaber, die sich gerne weiter über den Wandersport informieren und sich gerne einige Tipps einholen. Es wurden die Plug ins Jetpack und Robo Gallery verwendet. Das Design wurde möglichst simpel und clean gehalten für eine gute Übersicht und eine gute Wissensübertragung. In diesem Beitrag wird die Webseite kurz vorgestellt.

Startseite

Auf der Ersten Abbildung sehen sie die Startseite der Webseite. Die Webseite ist unterteilt in Seiten: Startseite, Routenplanung, Musik beim Wandersport und Kontakt. Neben den Seiten gibt es noch die Beiträge des Blogs: Gesund durch den Wandersport, Beliebte Wanderrouten in den Italienischen Alpen, Wanderregionen in den Italienischen Alpen und Hallo Wanderwelt. Eine Suchfunktion lässt bestimmte Themen, Seiten oder Einträge schnell ausfindig machen.

Schlagwörterfunktion und Kommentarfunktion

Slideshow

Auf einer Seite habe ich eine Slideshow mit Bildern von den Italienischen Alpen hinzugefügt mithilfe eines Plugins.

Footer

Auf dieser Abbildung sehen sie den Footer der Webseite. Dieser Footer ist aufgebaut aus dem Archiv der Beiträge, den Kategorien der Seiten und Beiträge und die häufigsten Schlagwörter, mit denen man schnell zu einer passenden Seite oder einem passenden Beitrag kommt. Oberhalb des Footers kann man mit zwei Buttons einen Beitrag oder Seite vor oder zurück gehen.

Beispiel einer Seite

Auf dieser Abbildung sieht man ein Beispiel für den Anfang einer Seite. Auf dieser Seite geht es darum, wie man die Route für eine Wanderung plant.

Spotifyinput

Bei der Seite Musik beim Wandersport, habe ich eine Spotifyplaylist eingefügt, die beliebte Hiking Songs abspielt.

Kontakt

In dieser Blockwoche war es mein Ziel ein Portfolio für mein grosses grosses Hobby machen. Das Fotografieren.

Dieses Ziel Konnte ich zu gewissem masse erreichen, ich merkte welcher Aufwand hinter einer Website steckt und entschied mich einige Bilder auf eine Website zu laden und diese zu bewerten, des weiteren war es ein grosses Ziel ein Tic-Tak-Toe auf meiner Seite zu haben. Ich habe auch ein Foto als Header über dem Header eingefügt.

Beim Design der Seite habe ich das Standartlayout der vorgegebenen Seite verwendet und die Farben ein wenig verändert und die Icons verändert.

Ich entschied mich für Brauntöne da diese in meinen Fotos auch stark vertreten sind.

Bei den Bildbeschrieben habe ich einen kleinen Text zum Bild, welcher die Kamera, die Location des Bilds und die Wahl des Films kurz Beschreibt.

Ein wenig spass durfte natürlich auch nicht fehlen, ich habe am Anfang de woche in funktionierendes Tic-Tac-Toe gefunden. Das musste fast auf meine Seite. Darum habe ich es auch hinzugefügt.

Im Rahmen des Wahlmoduls Webdesign und Webtechnologien haben wir (Marco Wiedmer und Fabienne Jakob) eine WordPress Webseite erstellt, die wir hier vorstellen werden.

Die Webseite stellt das Einzelunternehmen „Kleiner Lernspass“ vor, welches Nachhilfe Unterricht in Biberist anbietet. Auf der Seite „Start“ und „Über uns“ erhalten die Kundinnen und Kunden einen ersten Einblick in das Unternehmen. Navigieren zwischen den Seiten können sie mittels Menüleiste.

Anschliessend können sich die Kunden über zwei verschiedene Angebote informieren: das Lerncoaching und die Schulstoffbegleitung für das Übertrittsverfahren von der Primarschule zur Sekundarschule. Dabei sind die zwei Unterseiten (Lerncoaching und Schulstoffbegleitung) auf der Seite „Angebot“ verlinkt. Zusätzlich sind sie auch noch als Drop-Down unter dem Angebot in der Menüleiste ersichtlich.

Um eine Nachhilfelektion zu buchen, können die Kunden auf der Seite „Kontakt“ mit der Administration des Kleinen Lernspass Kontakt aufnehmen. Dies können sie telefonisch oder via Kontaktformular machen.

Weiter hat es verschiedene Beiträge rund um das Thema Nachhilfeunterricht auf der Seite „Beiträge“.

Zuletzt hat es auch noch eine Seite über Jobs. Das Unternehmen ist ständig auf der Suche nach neuen Nachhilfelehrpersonen, weshalb sich Interessentinnen und Interessenten per Mail melden können.

Notre site a été conçu dans le cadre du cours BUUx442 „Programmation et graphisme pour le web“. Ce cours nous a permis de nous familiariser et progresser dans l’utilisation de langage informatique tels que html, CSS, PhP, javascript ainsi que dans le fonctionnement d’un serveur Internet. Le site présenté ci-dessous a été réalisé avec l’outil WordPress.

Ce site a pour but de rassembler les étudiants de la HAFL qui cherchent à connaître Dieu au travers de la Bible et à se réunir autour de leur Foi commune en Jésus-Christ.

Notre vœu est également de permettre des échanges plus larges, avec tous ceux qui cherchent comme nous des réponses à notre monde. Il y a tant besoin d’espoir, de justice, de solidarité, et pourtant l’on se heurte à de nombreuses limites.

Nous vous invitons à découvrir notre site internet…

Menus

Nos menus permettent de sélectionner la langue et de naviguer entre les différents thèmes.

Page d’accueil

La page d’accueil présente les articles récents, ainsi qu’une introduction aux principaux onglets. En cliquant sur „lire plus“, on arrive directement sur la page correspondante.

Contenu

Les articles peuvent être ajoutés au fur et à mesure dans les différents menus. Nous avons installé une extension qui propose chaque jour un court texte de la Bible. Ce verset est présent sur toutes les pages, dans la colonne de gauche.

Calendrier interactif

Comme nous souhaitons nous rencontrer en diverses occasions, un calendrier permet de publier les prochains événements de manière claire.

Forum

Le but de cette association est aussi de stimuler la réflexion de chacun sur des sujets existentiels ou des sujets d’actualités. L’idée de Forum, lieu de discussions et d’échanges civilisés sied parfaitement à cette idée.

Le forum permet de lancer des sujets de réflexion. Ces sujets peuvent être repris dans les rencontres ou dans les discussions de tous les jours pour ne pas sans cesse parler de la météo ou des travaux à rendre.

Contact

Pour finir, nous avons créé une page „contact“, afin que vous puissiez nous reconnaître dans les couloirs ou nous écrire simplement un mail.

Nous serions heureux que cette idée que nous avons imaginée cette semaine puisse déboucher sur des échanges et de nouvelles rencontres, sous une forme ou une autre.

Im Rahmen des Wahlmoduls Web-Technologien und Web-Design haben Michael Teutschmann und ich, Laura Kunz, die im Folgenden kurz vorgestellte WordPress-Webseite erstellt.

Wir haben eine Webseite für potenzielle Interessentinnen und Interessenten an einem Welpen der Rasse Australian Labradoodle ausgearbeitet. Die Webseite besteht aus verschiedenen Seiten, in welchen unter Anderem die Rasse Australian Labradoodle genauer beschrieben wird. Einige Aspekte zur Zucht sind aufgeführt und auch ein Blog besteht. Darüber hinaus verfügt die Webseite über einen kleinen Shop, über welchen Hundezubehör gekauft werden kann. Um den Überblick nicht zu verlieren, sind die verschiedenen Seiten in einem horizontalen Menüband angeordnet.

Die Startseite zeigt sich mit der Verlinkung der Blogbeiträge. Darin wird das Alltagsleben der Zuchthündin aufgeführt.

Damit hundeliebhabende Personen mit der Züchterin in Kontakt treten können, müssen sie das unten aufgeführte Kontaktformular ausfüllen und absenden.

Der Webshop besteht aus den verschiedensten Artikeln, welche beim Kauf eines Hundes nicht wegzudenken sind.

Dans le but du module Web Technologie et Web design, j’ai du créer une page web pour pouvoir apprendre les bases des plateformes testée. En faisant de la lutte suisse à haut niveau, il est important pour moi de pouvoir partager mes émotions et mes résultats avec mes proches et les gens qui me soutiennent. Je partage beaucoup sur les réseaux sociaux et je trouvais très enrichissant de pouvoir créer une page web accessible à tout le monde pour partager mon évolution.

Paramètres de la page

Pour la confection de cette page, j’ai utilisé le serveur WordPress par le biais de Hostpoint.ch. J’ai choisis le thème ASHE pour ma base.

Page : menu

C’est la page qui apparait lorsqu’on arrive sur mon site. elle contient l’entièreté du site dessus. La première choses et une image avec mon nom pour mettre le contexte de la page

Le menu se trouve au milieu de la page, en appuyant sur un des thèmes proposé, on arrive directement vers l’article concerné. La fonction „rechercher“ se trouve à droite de l’écran et elle permet de faire une recherche spécifique. Le thème „HAUTE-BROYE“ est un lien direct qui arrive sur la page web du club des lutteurs de la haute-broye.

les articles

Différents articles sont présents sur la page. On peut aussi consulter les résultats des années précédentes :

colonne latéral

Dans la colonne latéral se trouvent la date et le lieu de mes prochaines compétitions programmées