This is an old revision of the document!
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
Als Anregung 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!
- Layout mit verschiedenen Boxen:
- NEU: Horizontales Menü (nur mit HTML und CSS):
- NEU: Bild als Mauszeiger:
- Per Buttons verschiedene Texte anzeigen und einfärben (abstrakt: CSS-Eigenschaften ändern mit Buttons):
- Inhalte mit einem “Schalter” sichtbar machen: Gibt es mittlerweile auch direkt in HTML5: https://www.w3schools.com/tags/tag_details.asp.1)
- Horizontales Menü (mit Javascript):
- Wer lieber ein vertikales Menü haben möchte, verwende etwa https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_vertical_menu
- CSS Grids zur genauen Gestaltung des Seiten-Layouts.
- ein nettes Beispiel: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-area_named3
- ein wildes Beispiel:
- Floating text um Bilder:
- Erklärungen dazu: https://www.w3schools.com/cssref/pr_class_float.php
... und eher stichwortartig
- CSS Flexboxes: https://www.w3schools.com/css/css3_flexbox.asp
- HTML Graphics (
svg
ist anfangs vermutlich einfacher alscanvas
, wozu man JavaScript o. ä. braucht): https://www.w3schools.com/graphics/default.asp - Parallax Scrolling: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_parallax_device oder ein gutes Tutorial im Internet dazu
- CSS Image Gallery:
- (Wer findet im Internet eine gute andere Quelle für eine “Photo gallery”? Beispielsweise könnten die Bilder beim Anklicken gross im Vordergrund erscheinen; man könnte sie nacheinander mit einem “Weiter”-Button anschauen etc.; nur mit HTML und CSS geht dies vermutlich nicht “sinnvoll”)
- Ausprobiert habe ich einmal die folgenden Anleitungen:
... 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 dasp
-Element oder dash1
-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 dasstrong
-Element oder dasem
-Element.)
Zu Block- und Inline-Elementen siehe auch https://www.w3schools.com/html/html_blocks.asp.
Einheiten in CSS
Nette Seite zum Ausprobieren von CSS-Eigenschaften
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.
Die Erklärungen in dem folgenden Link beziehen sich teilweise auf die Schulcomputer und das Jahr 2022, sollten aber sinngemäss weiterhin stimmen.