Projekte von dem Projekttag der Berufsfachschule Baden

Schlagwort: HTML (Seite 1 von 3)

Chatting Webseite erstellen

Projektleiter

Colyn Fenner

Teammitglieder

Elia Hänggi, Mike Rohr, Nilas Leuzinger, David Ackermann

Beschreibung

In diesem Projekt war unser Ziel eine Chatting Webseite zu erstellen. Diese sollte über eine Login Funktion verfügen, einen Darkmode welcher im Browser gespeichert wird enthalten und natürlich auch Admin Konten besitzen um auf verstosse gegen die Richtlinien vorgehen zu können. Zusätzlich haben wir ein Snake Game integriert um das Ganze etwas interessanter zu machen.

Positives

Die Verständigung in der Gruppe war sehr gut und wir konnten im idealen Tempo miteinander arbeiten wie auch die Arbeiten aufteilen.

Negatives

Wir hatten einige Probleme beim hochladen der Dateien. so wurden oft keine oder alte CSS dokumente als Stylevorlage verwendet oder JavaScripte wurden nicht verwendet obwohl wir dies eigentlich wollten.

Fazit

Wir sind zufrieden mit dem ergebnis auch wenn wir gerne noch einige fehler behoben hätten. Auch die Gruppenzusammenarbeit war sehr angenehm. schlussendlich sieht das Endprodukt sieht grösstenteils gut aus und wir freuen uns auf das nächste Projekt.

https://chat.wubo.ch

Docker ChatApp

Projektbeschreibung:
In diesem Projekt lag der Fokus auf der Entwicklung einer Videochat-Plattform, die es Nutzern ermöglicht, ähnlich wie bei Omegle zufällige Personen der BBBaden zu treffen. Wer keinen Videochat führen möchte, kann alternativ den öffentlichen Chat nutzen.

Umsetzung:
Simon hat zunächst ein Mockup für die Website/PWA-App erstellt, während Gianluca an der Funktionalität des Videochats gearbeitet hat. Für die Übertragung des Videos wollten wir WebRTC verwenden. WebRTC ermöglicht es, Video peer-to-peer zu übertragen, das heisst, ohne dass das Video über den Server übertragen werden muss.

Positive Aspekte:
Die Verwendung eines Mockups hat sich als vorteilhaft erwiesen, da wir die Webseite klar gemäss der Vorlage entwickeln konnten. Ein weiterer positiver Aspekt war, dass wir bereits nach wenigen Stunden eine Version hatten, die es ermöglichte, ein Video von einem Browser zum anderen zu streamen.

Herausforderungen:
Eine Herausforderung, der wir bis zum Ende nicht gewachsen waren, aufgrund unserer begrenzten Zeit, bestand darin, das Kameravideo über das Internet zu übertragen. Wir hatten eine Version, die das Kamerabild erfolgreich von einem Gerät zum anderen im selben Netzwerk übertrug, jedoch scheiterten unsere Versuche, dies über das Internet zu realisieren.

Fazit:
Während des Projekts haben wir zahlreiche neue Technologien wie React, Node.js und WebRTC kennengelernt. Vielleicht haben wir uns etwas zu viel vorgenommen, aber es hat uns Spass gemacht, die fünf Wochen lang an dem Projekt zu arbeiten.

Website gestalten

Projektbeschreibung:
In diesem Projekt lag der Fokus auf der Gestaltung einer eigenen Webseite. Dies umfasste die detaillierte Planung von Designelementen, wie der Farbpalette und dem Wireframe. Eine besondere Absicht war, diese Webseite ohne die Verwendung eines Frameworks zu realisieren, sondern ausschliesslich durch den Einsatz von reinem HTML, CSS und JavaScript-Code.

Die Website als Endprodukt finden sie hier.

Umsetzung:
Nachdem wir den Wireframe und die Farbpalette erfolgreich erstellt hatten, schritten wir zur Umsetzungsphase. Die Realisierung verlief äusserst schnell, da wir uns nicht mehr mit der grundsätzlichen Gestaltung der Website auseinandersetzen mussten. Stattdessen konnten wir uns auf den erstellten Wireframe als klare Vorlage konzentrieren und diesen umsetzen.

Positive Aspekte:
Die Verwendung des Wireframes und der Farbpalette als klare Vorlagen ermöglichte eine präzise und exakte Umsetzung der Webseite gemäss der ursprünglichen Vorstellung. Die bewusste Entscheidung, ohne ein Framework zu arbeiten und stattdessen ausschliesslich auf reinem HTML, CSS und JavaScript zu setzen, trug dazu bei, unser Verständnis für diese Sprachen zu vertiefen und neue Fähigkeiten zu entwickeln.

Herausforderungen:
Es war nicht selten der Fall, dass CSS scheinbar eigene Wege ging und kleine Änderungen unvorhersehbare Auswirkungen auf die Platzierung von Elementen, wie etwa Buttons, hatten.

Eine weitere Herausforderung war die Entwicklung eines stimmigen Farbschemas für die Website. Die Komplexität dieses Aspekts wird oft unterschätzt. Die Farben sollten nicht nur ästhetisch ansprechend sein, sondern auch eine angemessene Balance zwischen Helligkeit und Dunkelheit aufweisen. Zusätzlich dazu war es wichtig, dass die Farben miteinander harmonieren – eine Aufgabe, die zunächst einfach erscheinen mag, in der Praxis jedoch vielschichtige Überlegungen erfordert.

Fazit:

Insgesamt lässt sich konstatieren, dass die Planung und Gestaltung unserer Webseite eine lehrreiche Reise voller Herausforderungen und kreativer Entscheidungen war. Das Eintauchen in die Welt der Webentwicklung sowie der UX- und UI-Designs gestaltete sich als faszinierende Erfahrung.

Unsere Website

Simon Kneubuehl & Gianluca Giarritta

Webseite auf Raspberry Pi hosten

Projektleiter

David Ackermann

Gruppenmitglieder

Colyn Fenner, Elia Haenggi, Mike Rohr, Nilas Leuzinger

Projektbeschreibung

Unser Projektziel war es, eine Webseite auf unserem Raspberry Pi zu hosten. Die Hauptseite sollte mindestens drei Unterseiten umfassen. Zusätzlich haben wir einen Dark Mode integriert, der jedoch nicht auf allen Seiten verfügbar ist.

Positives

Wir konnten viel über HTML, CSS und JavaScript lernen, ebenso wie das Einrichten des Raspberry Pi, was sehr interessant war.

Negatives

Wir stießen auf einige Schwierigkeiten bei der Installation eines neuen Betriebssystems auf unserem Raspberry Pi. Das Beheben von Fehlern im Code erwies sich ebenfalls als zeitaufwändig.

Fazit

Insgesamt sind wir zufrieden mit unserem Projekt. Es hat uns in vielen Bereichen weitergebracht, insbesondere in Bezug auf Webprogrammierung und die Funktionsweise von Servern.

Clicker Game

Projektleiter: André Bütler

Mitglieder: Eli Lantsch, Weyner Beldi, Timo Krebs

Projektbeschreibung:

In diesem Projekt wollten wir ein Clicker Game erstellen. Das Ziel in diesem Spiel ist es, möglichst viele Zitronen zu verdienen. Ein Ende hat das Spiel jedoch nicht. Wir haben uns in diesem Projekt dazu entschieden, HTML und JavaScript zu verwenden, um neue Erfahrungen zu sammeln. Für das Programmieren haben wir Visual Studio Code benutzt. Wir haben mit einer Anleitung begonnen, haben das Spiel jedoch selber erweitert. Das Design haben wir ebenfalls selber ausgedacht und haben es ebenfalls selber gezeichnet.

Reflexion:

Nachdem wir die Grundlagen gelernt hatten, konnten wir selbstständig Erweiterungen und Verbesserungen hinzufügen. Mit den vielen Möglichkeiten und Ideen konnten wir das Spiel spannender und besser machen. Zum Schluss hatten wir jedoch keine Zeit mehr. Durch die selbstständige Veränderungen tauchten ebenfalls mehrere Probleme auf, welche zum Teil viel Zeit beanspruchten. Im grossen Ganzen sind wir mit dem Resultat zufrieden, auch wenn es viel Erweiterungs- und Verbesserungspotential besitzt.

JavaScript Jet Fighters

Projektleiter: Janik Meier
Projektmitglieder: Kim Roos, Lauren Emmenegger

Projektbeschreibung

In diesem Projekt haben wir das Arcade Game Jet Fighter(Atari, 1975) mit Javascript programmiert. Zu dritt haben wir zuerst Prototypen entwickelt und diese dann visuell und mechanisch erweitert. Neben Javascript haben wir hier auch mit HTML und CSS gearbeitet und dies auf einen Webhost-Server hochgeladen.

Gameplay in Full-Action

Der Restart Button

Was haben wir gelernt:
Wir haben gelernt, wie man mit Javascript in Webseiten programmieren kann und wie man die Canvas in Javascript benutzt.

Das gefiel uns:
Uns gefiel es, ein Game zu programmieren, zu testen und zu verbessern.

Das gefiel uns nicht:
Uns hat eigentlich alles gefallen.

Fazit:
Dies haben wir gut gemacht:

Wir konnten meist effizient arbeiten und haben verschiedene Spielmechaniken eingebaut. Für die Jets haben wir eine sehr detailreiche Grafik erstellt.

Dies können wir noch verbessern.
Wir hätten das Programm zuerst planen sollen, um strukturierteren Code zu schreiben.

Webserver und Website

Team

Projektleiter: Aaron Stadler

Teammitglieder: Marco Rohner, Colin Sprenger, Mischa Lehner

Projektbeschreibung

Wir wollen in diesem Projekt einen Webserver aufsetzen/konfigurieren und eine Website zu den Themen: Trojaner, Viren und Sicherheit im Internet erstellen.

Reflexion

Unser Fazit ist, dass uns das Projekt Spass gemacht hat und wir vieles lernen konnten oder altes auffrischen konnten. Wir sind sehr zufrieden mit dem Endprodukt, da wir alle unsere Vorstellungen/Anforderungen erfüllen konnten.

Das Resultat

Hier ist der Download

Gamebook

Ersteller: Sabri Mendil

Bei diesem Projekt handelt es sich, wie der Titel schon sagt, um ein Gamebook. Es ist eine Art Spiel, wo man selber eine Geschichte in Textform erlebt, diese aber durch verschiedene, gegebene Option selber beeinflussen kann. In diesem Gamebook geht’s um eine Zombieapokalypse in welcher man überleben muss. Das Gamebook wurde mithilfe des Programms “Twine” erschaffen.

Hier kann man das Spiel herunterladen:

Website-HTML

Dieses Projekt wurde von drei Informatiklernenden; Kristian Velkov, Fabian Bähler und Samuel Lenzin verwirklicht.

Wir haben jeweils eine eigene Webseite über jeweils verschiedene Themen erstellt und am Ende alles Wissen, das wir beim Kreieren der Seiten bekommen haben, haben wir in eine gemeinsame Seite gesteckt, die mindestens ein spezielles Attribut der jeweiligen Seiten beinhaltete.

 

Die Seiten sind zu gross für diese Seite hier, deswegen ist der Download woanders: https://www.file-upload.net/download-13398737/DieSeiten.zip.html

Programmierbüchlein

Projektleiter: Tawanboon Yimvuthikul, Teammitglieder: Yves Geiger, Robin Kiel

Wir sollten als erstes Projekt eine Präsentation zu einem Informatikthema erstellen. Unsere Gruppe entschied sich ein kleines Programmierbüchlein zu den Grundlagen der Programmierung zu machen.


Das Büchlein können Sie als PDF hier herunterladen.

« Ältere Beiträge