lehrkraefte:snr:informatik:glf22:html-css:projekt-anregungen

Anregungen für die Projektphase

Ich nehme gerne Fragen und Anregungen auf und ergänze diese Seite entsprechend.

Allgemeines

Alle Webseiten, die du kennst (etwa Google, Youtube, NZZ, KSBG, SBB, etc.) sind (im Wesentlichen) mit HTML und CSS gestaltet. Dies illustriert, dass es sehr viele Gestaltungsmöglichkeiten für Webseiten gibt. Ganze Berufsgruppen (Webdesigner und Webentwickler) kümmern sich um die Erstellung und Pflege solcher Seiten. Es ist relativ utopisch, dass du in der Projektphase eine “professionelle Seite” erstellen wirst.

Es gibt natürlich auch Programme und künstliche Intelligenz, die beim Erstellen von Web-Seiten helfen – jedoch sollst du solche Programme eher nicht für das aktuelle Projekt verwenden bzw. wenn du sie verwendest, erwarte ich, dass du trotzdem verstehst, was dein Code bedeutet. Wenn ich Zweifel habe, lasse ich mir gerne einzelne Zeilen und Abschnitte erklären: “Was passiert, wenn man den Code hier so verändert?” etc.

Bemerkt sei noch, dass wir bisher im Wesentlichen statische Webseiten erstellt haben. Dynamische Webseiten reagieren auf Eingaben des Benutzers. Für ihre Erstellung wird neben HTML und CSS häufig JavaScript oder PHP verwendet.

Im Prinzip sind deiner Kreativität also beim Projekt wenig Grenzen gesetzt (hauptsächlich zeitliche). Du darfst alle im Internet verfügbaren Hilfen verwenden, um deine eigene Website zu erstellen; wenn du dabei wesentlich von Beispielen profitierst, solltest du die Quelle angeben.

Wenn du effizienter mit VS Code arbeiten möchtest, könnte Hotkeys und anderes Nützliches nützlich sein.

Einige Anregungen

Nette Beispiele findet man hier: https://www.w3schools.com/howto/default.asp

Als Anregung folgen unten einige Beispiele für relativ einfache, aber nützliche Gestaltungsmöglichkeiten (die darin vorkommenen HTML-Elemente div und span sind weiter unten erklärt).

Empfohlenes Vorgehen: Wenn dir ein “Layout” gefällt und du es verwenden willst: Schau dir den Quell-Code genau an!

Speichere die entsprechende zip-Datei auf deinem Rechner und entpacke sie richtig (rechte Maustaste, “extract all”).

Nur anklicken der zip-Datei liefert irgendeine Art virtuelle Windows-Pseudoentpackung und dann funktioniert die Seite vermutlich nicht.

Spiele mit HTML- und CSS-File: Ändere etwa einen Parameter und schau dir den Effekt an! Wiederhole dies, bis du so viel wie möglich verstehst. Dann passe den Code so an, dass er deinen Wünschen entspricht!

... und eher stichwortartig

... selbst recherchieren und experimentieren

Du darfst selbstverständlich gerne im Internet nach Layouts oder Tutorials zu gewissen Layouts suchen.

Wenn dir eine Internetseite gefällt, kannst du sie

  • mit F12 inspizieren oder
  • mit Ctrl-s herunterladen und dann lokal auf deinem Rechner analysieren und mit ihr herumspielen.

Wenn du eine gewisse Gestaltungsart verstehen willst, ist folgendes zu empfehlen: Reduziere die Webseite auf das Wesentliche, indem du schrittweise allen unnötigen Code löschst und beobachtest, was sich ändert.

Fortgeschrittene Techniken: JavaScript oder PyScript (= Python in the browser)

Wenn man interaktive Webseiten gestalten will, führt kaum ein Weg an JavaScript oder PHP vorbei. Dazu gibt es viele Tutorials im Internet.

Mir persönlich gefallen die Tutorial von W3schools sehr gut: https://www.w3schools.com/

Einige meiner Kollegen verwenden http://html.net/ oder die etwas weniger umfangreiche deutsche Version http://de.html.net/ (auch wenn ich sie etwas langatmig finde).

Eine interessante und recht neue Alternative zu JavaScript ist PyScript. Damit kann man Python in seine HTML-Dateien integrieren. Siehe https://pyscript.net/

Weiteres zu HTML und CSS

HTML-Elemente div und span

Zwei nützliche HTML-Elemente, nämlich div und span, habe ich bisher nicht erklärt. Sie haben keine “semantische” Bedeutung, dienen jedoch dazu, gewisse Teile der HTML-Datei zu benennen (per class oder id), um sie dann per CSS gestalten zu können.

  • div: Dies steht für “division” (“Division” im Sinne von “Bereich”) und ist ein sogenanntes Block-Element: Letzteres bedeutet, dass seine Box in einer neuen Zeile beginnt und die gesamte zur Verfügung stehende Breite einnimmt. (Andere Beispiele für Block-Elemente sind etwa das p-Element oder das h1-Element.)
  • span: Dies steht für “span” und ist ein sogenanntes Inline-Element. Letzteres bedeutet, dass seine Box an der aktuellen Stelle (etwa mitten in einer Zeile) beginnt und nur soweit reicht wie nötig (eventuelle Zeilenumbrüche inbegriffen). (Andere Beispiele für Inline-Elemente sind etwa das strong-Element oder das em-Element.)

Zu Block- und Inline-Elementen siehe auch https://www.w3schools.com/html/html_blocks.asp.

Einheiten in CSS

https://www.w3schools.com/cssref/css_units.php

Nette Seite zum Ausprobieren von CSS-Eigenschaften

https://www.w3schools.com/cssref/playdemo.php?filename=playcss_background-image

Neue semantische Elemente in HTML5

Zur Verwendung “semantischer” HTML-Elemente siehe etwa:

Wie man seine Website auf den Tech-Lab-Server überträgt

Das Ziel ist nun, deine Website von deinem Rechner auf einen Rechner des Tech-Lab (= den Tech-Lab-Server) zu übertragen, so dass sie jede(r) im Schulnetz anschauen kann.

Dazu benötigst du Benutzernamen und Passwort, welche du von mir erhältst.

Bevor du den Inhalt deines Verzeichnisses auf den Tech-Lab-Server überträgst: Erstelle eine Sicherheitskopie des gesamten Verzeichnisses!

Grund: Wenn du Dein Verzeichnis bzw. deine Dateien mit Filezilla überträgst, kannst du mit wenigen Mausbewegungen deine Dateien löschen bzw. durch ungewünschte (alte) Dateien überschreiben (wenn du zum Beispiel in die falsche Richtung kopierst).

Wie das geht, ist in dem Link unten erklärt. Eventuell werde ich das auch einmal vormachen. Ich empfehle, die Website NICHT öffentlich zugänglich zu machen - je nach Inhalt und eventuellen Copyright-Verletzungen kann das sonst sehr unangenehm und kostspielig werden! Wer sein Passwort ändert, merke sich das neue Passwort bitte gut. Ich habe keine Lust, neue Accounts zu kreieren bzw. kreieren zu lassen.

Deine Website wird sich später in einem geeigneten Unterverzeichnis von https://ofi.tech-lab.ch/2023/ befinden und a priori nur aus dem Schulnetz zugänglich sein.

Link zur Kursseite

Zur Kursseite

1)
Solche Elemente heissen wohl “accordions” oder Akkordeons. Vgl. https://blog.novatrend.ch/2021/11/15/auf-und-zuklappen-von-textteilen-mit-einfachen-html5-befehlen/, wobei die Spezialeffekte bei mir nicht oder nur teilweise funktioniert haben. Auch auf W3Schools ist eine selbstgebaute Variante: https://www.w3schools.com/howto/howto_js_accordion.asp.
  • lehrkraefte/snr/informatik/glf22/html-css/projekt-anregungen.txt
  • Last modified: 2024/02/15 21:57
  • by Olaf Schnürer