Differences

This shows you the differences between two versions of the page.

--- lehrkraefte:snr:informatik:html-erste-schritte [2022/06/01 21:12]
Olaf Schnürer [Projektphase: Websites]
+++ lehrkraefte:snr:informatik:html-erste-schritte [2022/06/28 07:53] (current)
Olaf Schnürer [Einführung: Webgestaltung mit HTML und CSS]
@@ Line 2: / Line 2: @@
 ====== HTML: Erste Schritte ======
-===== Einführung: Webgestaltung mit HTML und CSS (noch nicht alles erklärt) =====
+===== Einführung: Webgestaltung mit HTML und CSS =====
+Vorbemerkung: Das Ziel ist zu lernen, wie man den Inhalt einer Webseite (oder andere Informationen) sinnvoll speichern kann (mit HTML) und wie man dann die konkrete Darstellung beeinflussen kann (mit CSS). An einem Projekt werdet ihr euer Können demonstrieren. Wenn ihr später in eurem Leben Websites erstellen werdet, werdet ihr dies vermutlich (und je nach Geschmack/Programmieraffinität) nicht von Hand (wie hier) machen, sondern mit einem Content Management System, vgl. [[https://de.wikipedia.org/wiki/Content-Management-System]].
 Tafelerklärungen:
@@ Line 178: / Line 180: @@
 ==== Wie man seine Website auf den Tech-Lab-Server überträgt ====
-Werde ich mal vormachen. Ich empfehle, die Website NICHT öffentlich zugänglich zu machen - je nach Inhalt und Copyright-Verletzungen kann das sonst sehr unangenehm werden! Wer sein Passwort ändert, merke sich das neue Passwort bitt gut. Ich habe keine Lust, neue Accounts zu kreieren bzw. kreieren zu lassen.
+Werde ich mal vormachen. Ich empfehle, die Website NICHT öffentlich zugänglich zu machen - je nach Inhalt und Copyright-Verletzungen kann das sonst sehr unangenehm 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 befinden in einem geeigneten Unterverzeichnis von [[https://ofi.tech-lab.ch/2022/]].
@@ Line 199: / Line 201: @@
   * Du darfst das Thema deiner Website frei wählen.
   * Zweiergruppen sind ebenfalls erlaubt - die beiden vorigen Punkte gelten sinngemäss.
+===== Wer von zu Hause aus arbeiten möchte =====
+Du kannst einen beliebigen Editor verwenden, um die HTML- und CSS-Dateien zu erstellen. Du kannst aber auch auf deinem Privatrechner Visual Studio Code installieren. VS Code hat den Vorteil, "intelligente" Vervollständigungsvorschläge zu machen.
+Das Hochladen deiner Dateien mit FileZilla sollte von zu Hause aus funktionieren - unter den aktuellen Einstellungen ist deine Website aber nur aus dem Schulnetz anzeigbar. Man kann dies ändern, siehe [[https://ofi.tech-lab.ch/2022/teach/0cc6ccab/]]. Beachte dann aber, dass deine Dateien weltweit zugänglich werden und du aufpassen musst, dass du dich nicht strafbar machst (Copyright-Verletzungen etc.).
 ===== Bewertung der Projekt-Websites =====
+(Nächstes Jahr anders machen: Genug Zeit am Ende. Jeder muss hochladen, es muss dort funktionieren. Manche hatten mir ge-zip-te Folder geschickt, wo Bilder/Videos fehlten und die internen Links nicht funktionierten - ich war relativ grosszügig, da alles zeitlich knapp war. Irgendwie ausschliessen, dass Leute Content-Management-Systeme verwenden. Auch sollten nicht zu viele Sachen aus den Vorlagen kopiert werden. Gut wäre, Hintergrund-Bild zu erklären, bei float auf alle Fälle ''clear: both;'' erklären. Punkteraster und Benotung war recht grosszügig.)
 Abgabetermin (in dem Sinne, dass die Website danach nicht mehr geändert werden soll): Mittwoch 22. Juni, 23:59 Uhr.
-Ich werde mir die Websites voraussichtlich am 23. Juni (ein Tag vor der Notenabgabe) anschauen, sie bewerten und die Note auf NESA veröffentlichen((Wem dies zu spät ist, teile mir früher mit, dass die Website fertig ist, damit ich sie dann hoffentlich früher benote.)). Bitte ändere deine Seiten an diesem Tag nicht - sonst bewerte ich eventuell eine nicht von dir gewünschte Version. Ist keine Website vorhanden, gibt es die Note 1.0.
+Ich werde mir die Websites voraussichtlich am 23. Juni (ein Tag vor der Notenabgabe) anschauen, sie bewerten und die Note auf NESA veröffentlichen((Wem dies zu spät ist, teile mir früher mit, dass die Website fertig ist, damit ich sie dann hoffentlich früher benote.)). Bitte ändere deine Seiten an diesem Tag nicht - sonst bewerte ich eventuell eine nicht von dir gewünschte Version.
+Ich suche Eure Websites von
+[[https://ofi.tech-lab.ch/2022/]]
+aus, indem ich von dort in Euer Klassenverzeichnis und dann in Euer Verzeichnis (der Name ist die Zahlen-/Buchstabenkombination, die ihr bekommen habt) wechsle.
+**Ist keine Website vorhanden, gibt es die Note 1.0.** Bei Problemen beim Hochladen: Mir per Email alle relevanten Dateien senden.
 Bewertungskriterien((motiviert durch das Bewertungsraster auf [[https://www.swisseduc.ch/geschichte/methodik/webseiten/]])); Maximalpunktzahl 30; voraussichtlich reichen 25 Punkte für Note 6.0:
+  * **Bei Partnerarbeit:** Die gemeinsam erstellte Seite wird von einem Partner veröffentlicht, der andere setzt auf seiner Seite einen Link auf die gemeinsam erstellte Seite.
   * Bewertungskriterium A, 5 Punkte: Mindestens zwei HTML-Seiten sind vorhanden, unter ihnen die Hauptseite ''index.html'', die durch sinnvoll beschriftete und gut erkennbare Links miteinander verbunden sind.
   * B, 3 Punkte: Mindestens zwei Links zu Websites anderer Schüler oder Schülerinnen existieren und funktionieren; sie müssen sinnvoll beschriftet und erkennbar sein. Diese Links sollen sich in einem neuen Tab öffnen.
   * C, 2 Punkte: Mindestens zwei Links zu anderen Websites im Internet existieren.
-  * D, 5 Punkte: Titel (im HTML-Element ''title''), Überschriften und Text (im HTML-Element ''p'') sind auf jeder Seite (= web page) der Website (web site) vorhanden. Insgesamt sind mindestens ein Bild (oder eine Grafik) und mindestens ein Video (oder ein Audio) eingebunden. (Diese bisher genannten Bedingungen sichern ab, dass mindestens 5 verschiedene HTML-Elemente verwendet werden.)
+  * D, 5 Punkte: Titel (im HTML-Element ''title''), Überschriften und Text (im HTML-Element ''p'') sind auf jeder Seite (= web page) der Website (web site) vorhanden. Insgesamt sind mindestens zwei der folgenden Elemente eingebunden (zwei Bilder tun's beispielsweise auch): ein Bild (oder eine Grafik), ein Video, ein Audio. (Diese bisher genannten Bedingungen sichern ab, dass mindestens 5 verschiedene HTML-Elemente verwendet werden.)
   * E, 5 Punkte: Die Gestaltung funktioniert über eine (oder mehrere) CSS-Dateien. Mindestens 5 verschiedene CSS-Selektoren werden verwendet.
-  * F, 6 Punkte: Die Website ist ansprechend gestaltet (was immer das genau heisst ...), was Inhalt und Form angeht.
+  * F, 6 Punkte: Die Website ist ansprechend gestaltet (was immer das genau heisst ...), was Inhalt und Form angeht. Dabei geht es um das Aussehen in einem Browser in einem maximal grossen Fenster bei "normaler" Schriftgrösse.
-  * G, 2 Punkte: Die HTML- und CSS-Dateien sind "grammatikalsich" korrekt - die Validatoren [[https://validator.w3.org/]] und [[https://jigsaw.w3.org/css-validator/]] liefern keine Fehler (höchstens Warnungen).
+  * G, 2 Punkte: Die HTML- und CSS-Dateien sind "grammatikalisch" korrekt - die Validatoren [[https://validator.w3.org/]] und [[https://jigsaw.w3.org/css-validator/]] liefern keine Fehler (höchstens Warnungen).
-  * H, 2 Punkte: Am Ende deiner Hauptseite ''index.html'' befindet sich ein ''footer''-Element, in dem du als Autor genannt bist. Ausserdem gibst du dort an, wie viele Punkte du für jedes der obigen Bewertungskriterien für angemessen hältst und welche Gesamtpunktzahl das ergibt. Wenn du willst, kannst du auch eine Note vorschlagen.
+  * H, 2 Punkte: Am Ende deiner Hauptseite ''index.html'' befindet sich ein ''footer''-Element (siehe [[https://www.w3schools.com/tags/tag_footer.asp]]), in dem du als Autor genannt bist. Ausserdem gibst du dort an, wie viele Punkte du für jedes der obigen Bewertungskriterien für angemessen hältst und welche Gesamtpunktzahl das ergibt. Wenn du willst, kannst du auch eine Note vorschlagen.
 Beispiel: A5, B3, C2, D5, E0, F0, G0, H0; Gesamtpunktzahl 15 Punkte; Notenvorschlag: 4.0