Webseite mit 20 Leuten planen – Nur wie? – Was brauchst du? Gruppenarbeit
Wie könnte man vorgehen? Eine mögliche Anleitung mit vielen technischen Details und Erklärungen. Vielleicht ja hilfreich, falls du so etwas mal organisieren willst.
Ein Webseiten-Projekt planen – nur wie?
Bevor du ein Webseitenprojekt baust, solltest du nicht einfach sofort loslegen mit deiner Idee, sondern alles genau planen, sonst kann einfach zu viel schief gehen, vor allem, wenn ihr viele Leute sind. Spielen wir hier das ganze mal durch:
Beispiel-Fall – Klassengröße 20 Leute
Klasse von 20 Leuten mit verschiedenen Kenntnissen – Ziel eine Homepage entwickeln.
Wie könntest du vorgehen und was ist zu beachten?
Punkt 1
Aufteilung der Gruppen – Wichtig!
Wer soll eigentlich was machen? Halte es schriftlich fest!
Die Klasse besteht aus 20 Schülern, und Herr M. als Leitung. 4 Gruppen à 5 Personen .
Außerdem legte die Klasse einen Projektzeitraum von 1 Monat fest, in dem Idee, Design, Umsetzung, Testphase und Veröffentlichung abgeschlossen sein sollten. Einen Zeitraum festzulegen, ist sehr wichtig, da sich sonst Projekte ewig hinziehen, nicht fertig werden. Gib auch eine Uhrzeit an. Auch ist es ratsam eine Art Dokumentationsplan anzulegen. In unserem Fall macht das die „Springer-Gruppe“.
Die Gruppen könnten so eingeteilt werden: 4 Gruppen a 5 Leute.
Gruppe 1
Die Programmiergruppe – Programmcode schreiben in Visual-Studio-Code
Wenn du Visual-Studio-Code nicht kennst: klick auf das Bild und schau dir Videos dazu an.
Programmiergruppe
Entscheide dich, mit welchen Techniken willst du die Webseite technisch umsetzen?
Diese Gruppe ist zuständig für die technische Umsetzung. Hier gibt es mehrere Möglichkeiten
Der Klassiker, wenn du Programmierkenntnisse hast:
Methode 1 – Arbeiten im Quelltexteditor Visual-Studio-Code
In HTML, CSS, JavaScript
Wie lege ich eine Webseiten-Struktur an im Code? Video
Was für ein Mist, meine Bilder werde nicht angezeigt Video
Wenn du keine Programmierkenntnisse hast
Methode 2
Nimm ein CMS-System wie WordPress, Typo3, oder Drupal, oder Joomla, etc. In unserem Beispiel nehmen wir WordPress, als meist genutztes CMS. (CMS bedeutet Content-Management-System). Auch Schulhof-Programmierung ist mit WordPress erstellt.
Lernfeld – Git & Github
Sollte die Programmiergruppe mit HTML, CSS, und Java-Script in Visual-Studio-Code arbeiten, so könnte es auch deren Aufgabe sein, während des Zeitraums, ein Github-Account anzulegen, den Code dort unter privat hochzuladen, so dass er nicht öffentlich einsehbar ist. Ein weiteres Lernfeld wäre hier das Lernfeld Git ( Versionskontrolle). Alternativ könnte auch die Plattform Codeberg genutzt werden, um den Code hochzuladen.
Wie funktioniert Github – Der Baum
Was ist Git: Video
Gruppe 2
Design-Gruppe
verantwortlich für Farben, Layout, Typografie und optische Gestaltung, CSS-Code. Anmerkung, was ist CSS-Code?
Wenn du dich entschließt, eine Webseite klassisch in HTML, CSS und Java-Script-Code zu coden, dann benötigst du Visual-Studio-Code. Das ist ein sogenannter Quelltext-Editor. Das erste was du machst, wenn du Visual-Studio-Code runtergeladen hast, spiele dir anschließend den Live-Server drauf. Video
HTML ist ja keine Programmiersprache, sondern eine sogenannte Markup-Sprache. HTML liefert dir die Struktur für die Webseite, und CSS-Code namentlich genannt heißt“ Cascading-Style-Sheet, diese Technik ist dafür verantwortlich auf deiner Webseite, für Style und Layout. Das heißt im Code bestimmst du damit, wo sollen die Bilder hin, wie soll der Hintergrund der Webseite aussehen, wie groß sollen die Abstände zwischen den Bilder sein etc. Das alles macht man mit CSS-Code. Mit Java-Script schreibst du Funktionen. Zum Beispiel. Man klickt auf einen Button und ein Text erscheint oder ähnliches. Diese 3 Techniken zusammen werden auch sozusagen „Frontend-Techniken“ genannt. Merke: Frontend ist das was du siehst auf deiner Webseite oder auf deinem Handy. ( Backend ist das was du nicht siehst auf deiner Webseite / Server / Data-Base ).
Erstellen eines Wireframes
Die Design-Gruppe wählt natürlich auch die besten Bilder aus, die zum Thema passen. Unbedingt auf Urheberrecht achten! Das Design-Team überlegt sich zusammen, mit den Programmiern, wie soll denn ein Wireframe aussehen. ( Grobe Skizze der homepage?) . Ein Wireframe kannst du natürlich auch mit Figma machen.
Gruppe 3
Social-Media-Gruppe – betreut TikTok, Instagram und Facebook, plant Beiträge, Posts und kurze Videos, erstellt einen Youtube-Video-Kanal etc. Wichtig ist hier auch zu lernen, wie schneidet man ein Video, wie kann man 2 Video-Clips cool zusammenfügen, etc. HIer kannst du das kostenlose shotcut nutzen. Ein wichtiges Programm um kostenlose Erklärvideos zu machen zu eurem Projekt wäre sicherlich auch OBS-Studio, um euer Projekt zu erklären. Außerdem ist natürlich zu klären, welches Micro sollte man nehmen, dass der Ton im Video sich auch gut anhört. Wenn man das noch nie gemacht hat, kann das durchaus eine Herausforderung darstellen. Auch das Sprechen vor der Kamera und Micro kann testweise geübt werden und bietet ein riesiges Lernfeld. Es gibt sehr viele technische Anleitungen dazu auf youtube. Es gibt z. B. auf youtube auch die Möglichkeit einen youtube-Kanal anzulegen und das Video auf privat hochzuladen, um zu üben wie wird überhaupt ein Video ins Netz gestellt. Beim Upload des Videos auf youtube kann in den Einstellungen eingestellt werden, ob das Video öffentlich oder privat zu sehen ist. Privat bedeutet, nur die Leute die den Link haben zu dem Video können es dann anschauen. Es ist nicht öffentlich. Wie legt man überhaupt einen Youtube-Kanal an? Video
Gruppe 4
Springer-Gruppe / Organisationsteam – die Allrounder, die überall mithelfen, Aufgaben koordinieren, Deadlines überwachen und Engpässe ausgleichen, zu der Orga-Gruppe gehört auch der Dozent. Wird jemand krank, so kann jemand von diesem Team einspringen. Gerne darf die Springer Gruppe auch Kekse und Kuchen mitbringen, während der Gruppenarbeit. -.)
Jede Gruppe wählt eine interne Leitung, die den Überblick behält, Aufgaben verteilt und darauf achtete, dass Deadlines eingehalten wurden. So konnte das Projekt innerhalb des einmonatigen Zeitrahmens realistisch umgesetzt werden.
4 Gruppen a´5 Leute = 20 Leute und schon hast du alle eingeplant.
Idee, Konzept und Domain
Sobald die Gruppen stehen, beginnt die Phase der Ideenentwicklung. Die Schüler diskutierten mögliche Inhalte, Seitenstruktur und Zielgruppen. Dann folgte die Namenssuche ( Internet-Adresse / Domain) – ein heiß diskutiertes Thema:
„Wie wäre es mit grüneIdeen55.de?“ schlug Emma vor.
„Nein, viel zu langweilig. Besser grueneldeen999x.de!“ widersprach Max.
Bei der Domainsuche können erst mal alle Vorschläge notiert werden und dann solltest du schauen, welche Domain es überhaupt noch zu kaufen gibt….
Herr M. nutzte die Gelegenheit, um zu erklären, dass jede Domain weltweit nur einmal vergeben ist und man über die DENIC prüfen kann, ob eine .de-Adresse verfügbar ist. Der Kauf erfolgt immer über einen Provider, nicht direkt bei der DENIC. Ein Provider ist ein Anbieter, der dir alles gibt, was du für eine technische homepage benötigst. Wie kauft man eine Domain? Video
Hosting
Mit dem Namen stand das Thema Hosting auf der Agenda. Jede Webseite benötigt Webspace, Datenbanken und eine Domain, damit sie weltweit erreichbar ist. Herr M. erläuterte die Unterschiede zwischen kostenlosen Anbietern und kostenpflichtigen Paketen. Kostenlos bedeutet oft eingeschränkter Speicher, fehlende Datenbanken oder Werbung – professionelles Arbeiten wird dadurch schwierig.
Kosten einer normalen und einfachen Webseite
Ein typisches Komplettpaket für eine Webseite bei einem Provider kostet etwa 6–8 Euro pro Monat, also rund 70–90 Euro pro Jahr, inklusive Webspace, Datenbanken und Let’s Encrypt SSL-Zertifikat. Letzteres sorgt dafür, dass die Seite als sicher angezeigt wird und Daten verschlüsselt übertragen werden. Ohne SSL-Zertifikat warnt der Browser „Diese Seite ist nicht sicher“ – ein Problem, das die Schüler unbedingt vermeiden wollten. Achte also beim Kauf eines Webspace-Paketes bei einem Provider darauf, dass dieses Zertifikat schon in dem Paket drin ist, sonst musst du es später extra kaufen.
Wireframe: Der Bauplan der Webseite
Bevor Inhalte umgesetzt wurden, mussten die Gruppen ein Wireframe erstellen– eine Art Skizzenplan, der zeigt, wo Menüs, Bilder, Texte und Buttons auf der Seite stehen sollen. Du kannst hier mit Figma arbeiten, oder was du eben zur Verfügung hast. Herr M. erklärte, dass dies der entscheidende Schritt ist, um Design und Programmierung aufeinander abzustimmen.
Das Wireframe wurde von der Programmier- und der Design-Gruppe gemeinsam erstellt. Die Designer entwarfen das visuelle Layout, die Programmierer gaben technische Hinweise, was machbar ist, wie groß Buttons sein müssen oder wie viele Bilder gleichzeitig geladen werden können. So entstand ein klarer Bauplan, auf dessen Grundlage alle Inhalte umgesetzt werden konnten.
Umsetzung: Design, Inhalte und Social Media
Mit Wireframe und Hosting konnten die Teams beginnen:
- Design-Gruppe wählte Farben, Schriftarten, Layouts und erstellte Grafiken.
- Programmiergruppe setzte die Seite technisch um.
- Social-Media-Gruppe plante Beiträge für Instagram, TikTok und Facebook, inklusive kurzer Texte und Videos.
- Springer-Gruppe half überall dort, wo Unterstützung nötig war – bei der Koordination, Korrektur von Inhalten oder Organisation von Terminen.
Parallel achteten die Teams auf rechtliche Aspekte: Impressum, Datenschutzerklärung, Cookie-Banner und Urheberrecht für Bilder und Texte. Bitte achte unbedingt auf ein ordentliches Impressum auf deiner Webseite, sonst droht Abmahnungsgefahr.
Meilensteine
Um den Überblick zu behalten, legte die Klasse Meilensteine fest – klare Orientierungspunkte, die zeigen, ob ein bestimmter Teil erledigt ist. Die „Springer-Gruppe“ übernahm die Überwachung: Sie achtete darauf, dass Deadlines eingehalten wurden, half bei Engpässen und dokumentierte den Fortschritt.
Eine einfache Liste könnte so aussehen:
Wichtig bei Meilensteinen:
- Sie müssen klar definiert, messbar und an einem Datum gebunden sein.
- Verantwortlichkeiten sollten festgelegt sein.
- Fortschritt sollte regelmäßig überprüft werden.
- Meilensteine motivieren und zeigen, wo Anpassungen nötig sind.
Testphase und Veröffentlichung
Bevor die Seite online ging, muss sie intensiv getestet – sowohl am PC als auch auf Smartphones und Tablets. Fehler wurden korrigiert, Texte und Bilder optimiert, und erst als alles stimmte, wurde der Maintenance-Modus deaktiviert und die Webseite veröffentlicht.
Schwierigkeiten in der Organisation
Die Gruppengröße sorgfältig überlegen und wählen, die Rollen klar verteilen und schriftliche festhalten. Wer macht was.
Die wichtigsten Schritte im Überblick
- Teamfindung
- Aufteilung der Gruppen und Projektzeitraum festlegen
- Idee und Konzept entwickeln
- Domain-Suche und Name festlegen
- Hosting auswählen / Paket kaufen
- Kosten klären
- Wireframe anlegen (Designer + Programmierer)
- Theme und Design auswählen
- Impressum / Datenschutz, rechtliche Verantwortung klären
- Social-Media-Strategie planen
- Maintenance-Modus aktivieren
- Homepage testen (inkl. Responsivität)
- Homepage veröffentlichen & Meilensteine dokumentieren
Hilfreiche Videos aus dem Netz
Eine WordPress-Webseite bauen Video
Der Mini-Social-Projekt-Planer Video
Bitte beachte, dass dies nur eine einfache Grob-Struktur enthält. Du kannst beliebig viele Aspekte, oder wichtige Punkte noch mit einbauen, je nach Größe deiner Gruppen-Konstellation.