Ein guter Kollege von mir hatte letztes Jahr die Idee, ein e-Sports Team für das neue COD zu gründen. Noch vor dem Erscheinen des Spiels hat er mir den Auftrag gegeben, ein Logo für sein Team zu erstellen. Mit Hilfe von Adobe Illustrator habe ich ein paar Entwürfe gemacht. Mein Kollege hat sich am Ende für ein modernes Design mit Bergen darauf entschieden. Dieses Logo ist auf der Titelseite meiner WordPressseite zu sehen:
Auf meiner WordPressseite geht es um dieses e-Sports Team, welches ein paar Monate nach dem Release vom COD aufgrund von Teamdifferenzen aufgelöst wurde. Auch wenn der Traum von grossen Wettbewerben und Preisen geplatzt ist, kann ich mit dieser Webseite ein wenig aufzeigen, was aus dem e-Sports Team hätte werden können. Oder zumindest wie ihre eigene Webseite ausgesehen hätte. Im Hauptmenü unterhalb des Logos gibt es verschiedene Optionen. Dasselbe Menü ist übrigens auch in der alternativen Seitenleiste zu finden (drei Striche links).
Weiter unten im Startbildschirm gibt es die aktuellen News übers Team. Auf diesem Bild sieht man den neuen Sponsor des Teams: Snack Berfin! Als Administrator kann ich dort ganz einfach einen Blog posten, um somit die Startseite beliebig zu aktualisieren.
Auf der Seite „Team Spirit“ sind ein paar Informationen ¨über das Team zu finden. Man kann auf jeden Namen aus dem Team klicken und findet so zu dem Spieler einige Infos und ein Bild von ihm:
Natürlich habe ich keine richtigen Bilder meiner Kollegen verwendet. Unter der Option „Nächste Events“ sind Links zu verschiedenen e-Sports Tournament und unter „Ankündigungen“ wären Neuzugänge oder spezielle Livestreams zu finden.
In diesem Modul BUUx442 habe ich sehr viel über HTML gelernt und wie man diese Programmiersprache verwänden kann um ein kleines Spiel im Webbrowser erstellen kann.
Zuerst habe ich eine Startseite entworfen, wo ich kurz die Regeln des Spieles erkläre und mit einem Hyperlink auf die nächste Seite mit dem Spiel verweise.
Die Überschrift sollte einen direkt präsent und strahlend erscheinen, zudem gab es eine kleine Erklärung warum es das Spiel gibt. Über den Link „Hier Klicken :D“ wurde man zum eigentlichen Spiel weiter geleitet.
Die eigene Spielfigur wird weiss dargestellt und die die Aliens in grün, alle 5 Level kommt ein Boss. Die Level werden mit zunehmenden Fortschritt auch immer schwieriger und es kommen mehr Aliens hinzu. Die eigenen Schüsse werden gelb angezeigt und die Schüsse der Aliens rot.
Oben links hat man eine Level anzeige, die einem Anzeigt in welchem Level man sich befindet. Zudem eine Lebensanzeige die mit jedem Treffer eines Alien Schusses oder direkter Kollision mit einem Alien sich um 1 Herz verringert. Oben rechts wird der Score einem Angezeigt der mit jedem Treffe eines Aliens stieg.
Wenn alle 3 Leben aufgebraucht wurden, kommt ein Game Over! Bilderschirm der das Speil beendete.
Fazit
In dieser Woche des Moduls BUUx442 habe ich sehr viele grundlegende Dinge gelernt, wie Webseiten aufgebaut sind, wie mein PC mit einem Server kommuniziert. Sowie einfaches Programmieren aussieht. Ich fand persönlich mit JavaScript und HTML einfacher zuarbeiten wie mit WordPress. WordPress war für mich mit dem vorgefertigtem Aufbau zum Teil sehr zäh, da ich nicht immer die Website so customizen konnte wie ich wollte. Manchmal musste man dafür Zahlen manchmal ging es schlicht und einfach nicht… Das gleiche wie mit den Plugins bei WordPress.
Das Modul war sehr lehrreich, hat viel Spass gemacht und war sehr interaktiv. Ich würde dieses Modul immer wieder besuchen kommen. 😀
Links
Space Inavders: https://hasn.ch/students/Nicola/
WordPress Seite HAFL-Mate-IceTea: https://ukobapiz.myhostpoint.ch/#haflmate
Ich habe eine Website erstellt, die einem helfen soll bei der Startplatzsuche mit dem Gleitschirm. Die Webseite ist wie ein Blog aufgebaut, für jeden neuen Startplatz kann ein kleiner Beitrag erstellt werden. Mit <iframe> habe ich die Karte von maps.geo.admin.ch verlinkt.
Auf einer zweiten Seite sind einige Infos über die Seite und den Autor ersichtlich.
Mein Ziel in diesem Modul war es für unseren Hof eine eigene Website zu erstellen. Wir verkaufen Natura Beef, also haben Mutterkuhhaltung. Es wäre praktisch, wenn Bestellungen und allgemeine Infos direkt auf der Website gemacht werden können. Hier stelle ich meine HTML-Seite vor.
Logo vom Hof
Mithilfe von KI konnte ich ein Logo für unseren Hof designen. Ich habe es noch so umgestaltet auf meiner Website, dass es die Hintergrundfrabe des Headers angenommen hat.
Abgesehen von der Homepage, habe ich eine Seite für Bestellungen, eine „Über uns“ Seite und eine Kontaktseite hinzugefügt.
Homepage
Auf der Startseite habe ich einen kleinen Infotext und bei „Aktuelles“ kann man Neuigkeiten lesen. In diesem Fall das man bald wieder Fleisch bestellen kann, direkt mit dem Link zur Seite.
Bestellformular
Auf der Bestellungsseite kann das Formular für eine Bestellung ausgefüllt werden. Bei der Menge muss man per drop-down Menü entscheiden, ob man 10 oder 20 kg Fleisch bestellen möchte.
Auf der „Über uns“ Seite stelle ich meine Familie kurz vor. Wenn man weiter runter scrollt, sieht man einige Bilder von unserem Hofleben.
Über uns SeiteÜber uns Bilder
Kontaktformular
Falls jemand Fragen oder anliegen hat, kann man uns unter dem Kontaktformular erreichen. Damit alles einheitlich aussieht, habe ich mich für dasselbe Design wie beim Bestellformular entschieden.
Im Modul habe ich zunächst versucht mit WordPress eine Webseite zu erstellen, jedoch fand ich es zu Beginn sehr kompliziert. Deswegen habe ich mich dann entschieden selbst eine Webseite mit HTML, CSS und JavaScript zu erstellen. Die Webseite ist für ein zukünftiges AirBnB, welches meine Eltern planen. Das Ziel war es, dass die Webseite nach dem Modul weiterbearbeitet werden kann und möglicherweise einmal genutzt wird. Zu Beginn habe ich die Grundstruktur der Webseite erstellt, sodass ich diese auf allen anderen Seiten übernehmen konnte. Dabei habe ich einen Header mit Logo und Navigationsmenu gestaltet und einen Footer erstellt.
Auf der Seite Impressionen habe ich versucht eine Fotogallerie zu erstellen.
Auf der Seite Umgebung gibt es einige Ausflugstipps. Ich habe jeweils ein Bild hinterlegt mit einem Button wo man auf eine Webseite des Ortes gelangt.
Mit JavaScript habe ich noch ein Kontaktformular erstellt:
Die Seiten und der Text sind noch nicht ausgearbeitet. Das Ziel wäre es auf der Seite «Buchen/Preise» einen Verfügbarkeitskalender einzubetten. Zudem sollte man auf dieser Seite die einzelnen Zimmer direkt buchen können.
Mit dieser Webseite wollte ich einen Hofladen für unseren Hof erstellen. Die Seite habe ich mit HTML, CSS und JAVASCRIPT erstellt. Hier meine HTML-Seite.
Auf der ersten Seite ist habe ich einen Header mit der Navigation. Zudem hattes einen Banner mit einem Butten welcher direkt in den Shop führt. Um die Seite etwas zu verschönern, habe ich einen Container mit 4 Bildern eingefügt.
Auf der Seite des Shops sind 4 Verschiedene Produkte mit einem Bild und einem Preis. Um ein Produkt dem Warenkorb hinzuzufügen, kann der grüne Butten gedrückt werden. Wird dieser Butten gedrückt, wird das Produkt im Warenkorb, welcher sich auf der rechten Seite befindet, angezeigt. Es kann auch dien Menge bestimmt werden.
Sobald sich ein Produkt im Warenkorb befindet erscheint ein Button für die Bezahlung.
Bei der Seite „Über uns“ könnte man seine Mitarbeiter beschreiben.
Die Seite wird mit eine Video verschönert. Das Video habe ich in einem Loop programmiert. Somit ist es in einer Endlosschlaufe.
Die Karte welche sich in der Seite „Kontakt“ befindet, hat einen Pfeil auf unserem Hof. Das Kontaktformular unten konnte ich leider nicht mit meiner Mail-Adresse verlinken.
Zum Schluss kommt noch der Blog, welcher ich direkt mit der Übung erstellen einer Image Gallery verknüpft habe. Somit kann auf den Butten gedrückt werden Bild hochladen. Via Link erreicht man die PHP-Seite um ein Bild hoch zu laden.
An WordPress hab ich keinen Gefallen gefunden. Für mich war es zu wenig übersichtlich. Deshalb habe ich mich nicht besonders fest mit WordPress auseinander gesetzt. Hier ist mein WordPress
Seit ich meine Hütte am Robmen im Mürtschental betreibe, hatte ich den Wunsch, eine eigene Webseite zu erstellen. Sie sollte nicht nur Informationen zurHütte und Umgebung bieten, sondern auch nützliche Funktionen enthalten – z. B. eine Wetterstation-Anzeige, welche ich als Minorarbeit gebaut habe, eine Galerie einen interaktiven Routenplaner und ein Buchung und Bewertungssystem.
Doch die grosse Frage war: Wie setze ich das Ganze technisch um?
Zuerst habe ich WordPress ausprobiert, weil es als einfache Lösung für Webseiten bekannt ist. Aber schnell stellte ich fest, dass es nicht so intuitiv war, wie ich gedacht hatte. Viele Funktionen waren an Plugins gebunden, und wenn ich spezielle Anpassungen machen wollte, musste ich tief in den PHP- und CSS-Code eingreifen.
Also entschied ich mich, die Seite von Grund auf selbst zu coden – mit HTML, CSS und JavaScript!
WordPress WebsiteHTML Website
Der technische Aufbau – Vom Code zur Webseite
Mein Ziel war es, eine strukturierte und moderne Webseite zu bauen, die schnell lädt und einfach zu bedienen ist. Hier sind einige der wichtigsten Features, die ich umgesetzt habe:
Startseite mit Infos über die Hütte & das Mürtschental
Wetterdaten und Webcam in Echtzeit (Live-Dashboard + Vorhersage von Obstalden)mithilfe von Iframe
Interaktiver Routenplaner mit Kartenintegration von Komoot
Galerie mit Slideshow-Effekt für Landschaftsbilder & Wetterstation
Buchungssystem und Bewertungssystem
Herunterladen von Geotiff vom Gelände
Ich habe verschiedene JavaScript-Bibliotheken verwendet, um bestimmte Funktionen zu verbessern, darunter:
Leaflet.js für interaktive Karten
Swiper.js für die Bildergalerie
Fetch-API & iFrames für externe Wetterdaten
Dabei war ChatGPT eine riesige Hilfe! Allerdings musste ich lernen, die richtigen Fragen zu stellen und mein Problem genau zu beschreiben, um präzise und funktionierende Antworten zu erhalten. Ausserdem war es hilfreich bereits den MinorNT besucht zuhaben, um die Code Struktur zu verstehen und zu bearbeiten
Downloadbutton für verschieden Vegetations Höhenmodelle (VHM)
Herausforderungen & Learnings – Was nicht sofort funktioniert hat
Natürlich lief nicht alles sofort reibungslos. Besonders knifflig war der Routenplaner, den ich ursprünglich selbst programmieren wollte. Ich hatte geplant, dass der Benutzer Start- und Zielpunkte setzen kann und die Route dann berechnet wird.
Doch es gab mehrere Probleme:
– Falsche Pfade in der Ordnerstruktur – Fehlende Karten- und Höhenmeter-Daten für kleine Wanderwege – API-Authentifizierung war kompliziert & hatte Limitierungen – Berechnung der Wege war ungenau und oft nicht durchführbar
Letztendlich entschied ich mich für eine vereinfachte Lösung mit vordefinierten Routen von Komoot, was besser funktionierte. Die Falschen Pfade habe ich dann nach langem suchen und probieren erkannt.
HTML vs. WordPress – Mein persönlicher Vergleich
Nachdem ich beide Methoden ausprobiert habe, kann ich sagen: Ich bevorzuge das direkte Coden mit HTML, CSS & JavaScript.
Mehr Kontrolle über das Design & die Funktionen
Kein Ballast durch unnötige Plugins
Schnellere Ladezeiten & weniger Serverbelastung
Allerdings muss ich zugeben, dass WordPress mit der Zeit einfacher wurde, nachdem ich einige YouTube-Tutorials angeschaut habe. Dennoch hätte ich ohne HTML- & JavaScript-Kenntnisse viele Dinge nicht umsetzen können.
PHP Bildgalerie erstellen
Eine dynamische Bildergalerie mit PHP ermöglicht es, Bilder hochzuladen, anzuzeigen und zu verwalten. Zunächst wird eine saubere Verzeichnisstruktur erstellt, die aus einem uploads/-Ordner für die hochgeladenen Bilder sowie den Hauptdateien index.php (Galerieansicht), upload.php (Bild-Upload), styles.css (Design) und footer.php (wiederverwendbarer Footer) besteht.
Für den Upload wird ein HTML-Formular erstellt, mit dem Benutzer Bilder auswählen und auf den Server hochladen können. Das Formular sendet die Dateien an ein PHP-Skript, das sie speichert und überprüft. Das PHP-Skript verarbeitet die hochgeladene Datei, prüft den Dateityp und speichert sie im uploads/-Ordner. Falls das Verzeichnis nicht existiert, wird es automatisch erstellt. Um die Sicherheit zu gewährleisten, sind nur sichere Dateiformate wie JPG, PNG und GIF erlaubt. Um Namenskonflikte zu vermeiden, wird jedem Bild eine eindeutige ID zugewiesen. Nach dem erfolgreichen Hochladen erscheint eine Bestätigungsmeldung.
Damit die Galerie automatisch aktualisiert wird, scannt die index.php-Seite den uploads/-Ordner und zeigt alle vorhandenen Bilder in einem Galerie-Layout an. Die Gestaltung wird mit CSS verbessert, indem die Bilder in einem flexiblen Raster-Layout dargestellt werden. Jedes Bild erhält einen Rahmen, eine Vorschaugröße und eine Hover-Animation für eine ansprechende Darstellung.
Um die Nutzererfahrung weiter zu verbessern, kann eine Lightbox-Funktion eingebaut werden. Damit können Bilder im Vollbildmodus geöffnet werden, indem ein Overlay eingeblendet wird. Beim erneuten Klicken schließt sich das Bild wieder.
Ein weiterer wichtiger Bestandteil ist die footer.php-Datei, die das aktuelle Jahr, Navigation und Copyright-Hinweise enthält. Diese wird auf jeder Seite mit PHP-Includes eingebunden, sodass Änderungen an einer zentralen Stelle für die gesamte Webseite übernommen werden.
Diese PHP-Bildergalerie ist nicht nur einfach zu verwalten, sondern kann auch erweitert werden, beispielsweise mit einem Login-System, einer Suchfunktion für Bilder oder einer Datenbank-Anbindung, um Metadaten wie Bildtitel und Beschreibungen zu speichern. Mit diesen Funktionen entsteht eine moderne, dynamische Galerie, die flexibel, erweiterbar und benutzerfreundlich ist.
Fruktoseintoleranz ist ein immer häufiger auftretendes Phänomen, denn man kann sie sich heranzüchten. Good News für dich: die geht wieder weg! Vorausgesetzt natürlich, du hältst dich zukünftig an bestimmte Dinge.
Jetzt stell dir aber vor, dass du nie wieder eine Frucht essen darfst. Dann meine Liebe oder mein Lieber: Willkommen in meinem Leben!
Wer ich bin:
Mein Name ist Grace Sade, ich bin 24 Jahre alt und habe seit zwei Jahren die Diagnose ‚hereditäre Fruktoseintoleranz‘. Wer jetzt denkt, dass man dann einfach keine Früchte mehr essen darf, irrt. Viele Gemüsesorten wie Beispielsweise Paprika, Randen, aber auch Hülsenfrüchte, Knoblauch, Sojaprodukte und praktisch alle Zuckerarten fallen weg. Sollte man doch mal was essen, was man ’nicht sollte‘, gibt es eine Liste von Nebenwirkungen, die bis nach China reicht.
Hier einige davon:
leichte bis schwere Krämpfe
Durchfall
Erbrechen
Kopfschmerzen
massive Stimmungsschwankungen (jaja, Frau und so, blah, blah)
gigantische Blähungen, als ob der Bauch gleich EXPLODIEREN würde (Foto unten)
Die eben genannten Auswirkungen sind noch harmlos, denn Naschen ist Gift. Auch wenn man nur ‚ein bisschen‘ nimmt: Es können schwere Leber- und Nierenschäden entstehen, wenn man die falschen Nahrungsmittel konsumiert. Doch nicht nur das, auch Krampfanfälle und Koma sind nicht ausgeschlossen. Zudem bilden sich im Magen- und Darmtrakt Polypen, welche zu Tumoren heranreifen können.
Als ob das nicht schon genug wäre, ist es in der heutigen Zeit ein wahres Kunstwerk, sich so durch den Alltag zu bewegen. Viele Lebensmittelproduzenten setzen nämlich mittlerweile auf künstliche Süssungsmittel, auf welche ich auch sofort reagiere. Ich selbst laufe mit einer Liste umher, um auf Nummer sicher zu gehen:
Mein Endfeind: SUCRALOSE aka: E955. Die wird in vielen als ‚Zuckerfrei‘ angepriesenen Lebensmitteln verwendet. Selbst Sport machen wird offiziell zur Challenge: kauf mal Proteinpulver, in dem E955 NICHT drin ist…
Immerhin Lee Sports vertreibt ein Qualitativ hochwertiges und leckeres Whey, so kann ich sogar meine Lieblingsfrucht geniessen, ohne zu leiden: Bananen!
Turnspass – Eine WordPress-Website für Bodenturnen
Im Rahmen meines Webprogrammier-Kurses habe ich eine WordPress-Website erstellt, die sich an Primarschulkinder richtet und ihnen hilft, Bodenturnen spielerisch zu lernen. Die Seite bietet eine Mischung aus Anleitungen, Tipps und interaktiven Elementen, um Bewegungsabläufe verständlich und motivierend zu vermitteln.
Ziel der Website: Die Website soll Kindern die Grundlagen des Bodenturnens näherbringen. Durch einfache Erklärungen, Bilder und strukturierte Anleitungen lernen sie, wie sie Bewegungen wie die Rolle vorwärts, den Handstand oder das Rad sicher und richtig ausführen können. Zusätzlich werden Tipps zur Körperspannung, Aufwärmen und häufigen Fehlern gegeben.
Technische Umsetzung: Die Website wurde mit WordPress erstellt und nutzt ein responsives Design, damit sie sowohl auf PCs als auch auf mobilen Geräten gut funktioniert. Die Inhalte sind in verschiedene Bereiche gegliedert:
Startseite: Einführung in das Thema mit Motivation für Kinder
Grundlagen des Bodenturnens: Sicherheit, Aufwärmen und Technik
Übungen & Anleitungen: Schritt-für-Schritt-Beschreibungen von Bodenturn-Elementen
Durch die Nutzung und Verlinkung von visuellen Elementen (z. B. Bilder, Videos oder Animationen) wird das Thema ansprechend gestaltet und für die Zielgruppe verständlich aufbereitet.
Diese Website wurde ins Leben gerufen, um die Aktivitäten und Projekte des Vereins Amici di Camignolo bekannt zu machen – einer Gruppe engagierter Menschen, die sich für die Aufwertung des Gebiets, der Kultur und der lokalen Gemeinschaft einsetzen.
Die Website richtet sich an alle, die Camignolo und seine Umgebung am Herzen liegen: ✅ Einwohner, die aktiv am Gemeinschaftsleben teilnehmen möchten. ✅ Ehemalige Bewohner und Freunde des Dorfes, die mit der lokalen Realität in Kontakt bleiben wollen. ✅ Neue Einwohner, die die Traditionen, Veranstaltungen und Initiativen des Dorfes entdecken möchten. ✅ Vereine und lokale Institutionen, die mit uns zusammenarbeiten möchten, um die Region aufzuwerten.
Die Idee dieser Website entstand aus dem Wunsch, einen digitalen Treffpunkt für alle zu schaffen, die sich über die Aktivitäten des Vereins informieren und zur Entwicklung der Gemeinschaft beitragen möchten. Hier können Sie: 📌 Über Veranstaltungen, Initiativen und Projekte auf dem Laufenden bleiben. 📌 Erfahren, wie Sie aktiv am Verein teilnehmen können. 📌 Ideen und Vorschläge zur Verbesserung des Gemeinschaftslebens teilen. 📌 Die Verbindung zwischen den Menschen stärken, die Camignolo lieben und dort leben.
Struktur der Website
🔹 Home – Die Hauptseite, auf der Sie die Begrüßung zur Website, eine Übersicht über die Seiten und – falls verfügbar – aktuelle Neuigkeiten finden.
🔹 Eventi – Ein aktueller Kalender mit allen organisierten Events, von Wanderungen über Kulturabende bis hin zu Freiwilligenarbeit und Gemeinschaftstreffen.
🔹 Galleria – Eine Sammlung von Bildern und Videos, die die Schönheit unserer Region und die Initiativen des Vereins zeigen.
🔹 Amici di Camignolo – Ein Bereich, der der Geschichte und Mission des Vereins gewidmet ist, mit Informationen über die Mitglieder und die durchgeführten Aktivitäten.
🔹 Contatti – Für alle, die mit uns in Verbindung treten, an den Aktivitäten teilnehmen oder Informationen anfordern möchten.