Differences

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

--- lehrkraefte:snr:informatik:glf22:html-css:projekt-anregungen [2023/05/22 10:39]
Olaf Schnürer [Wie man seine Website auf den Tech-Lab-Server überträgt]
+++ lehrkraefte:snr:informatik:glf22:html-css:projekt-anregungen [2024/02/15 21:57] (current)
Olaf Schnürer [Einige Anregungen]
@@ Line 18: / Line 18: @@
 ===== 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 [[https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:snr:informatik:glf22:html-css:projekt#html-elemente_div_und_span|unten]] erklärt).
+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 [[https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:snr:informatik:glf22:html-css:projekt#html-elemente_div_und_span|unten]] erklärt).
 Empfohlenes Vorgehen: Wenn dir ein "Layout" gefällt und du es verwenden willst: Schau dir den Quell-Code genau an!
@@ Line 32: / Line 34: @@
     * {{https://fginfo.ksbg.ch/~olaf/web-projekt-vorlagen/box-layout|zum Anschauen}}
     * {{:lehrkraefte:snr:informatik:glf22:html-css:box-layout.zip|als zip-Datei zum Herunterladen}}
+  * **NEU**: Vertikales Menü (mit JavaScript):
+    * Mausklick links zum Anschauen, Mausklick rechts zum Download: {{ :lehrkraefte:snr:informatik:glf23:html-css-js:vertikales-menu-mit-javascript.html |}}
   * **NEU**: Horizontales Menü (nur mit HTML und CSS):
     * {{https://fginfo.ksbg.ch/~olaf/web-projekt-vorlagen/horizontales-menu|zum Anschauen}}
     * {{:lehrkraefte:snr:informatik:glf22:html-css:horizontales-menu.zip|als zip-Datei zum Herunterladen}}
+  * **NEU**: Bild als Mauszeiger:
+    * {{https://fginfo.ksbg.ch/~olaf/web-projekt-vorlagen/bild-als-cursor|zum Anschauen}}
+    * {{:lehrkraefte:snr:informatik:glf22:html-css:bild-als-cursor.zip|als zip-Datei zum Herunterladen}}
   * Per Buttons verschiedene Texte anzeigen und einfärben (abstrakt: CSS-Eigenschaften ändern mit Buttons):
     * {{https://fginfo.ksbg.ch/~olaf/web-projekt-vorlagen/button-steuerung-von-css-eigenschaften|zum Anschauen}}
     * {{:lehrkraefte:snr:informatik:glf22:html-css:button-steuerung-von-css-eigenschaften.zip|als zip-Datei zum Herunterladen}}
-  * Inhalte mit einem "Schalter" sichtbar machen:
+  * Inhalte mit einem "Schalter" sichtbar machen: **Gibt es mittlerweile auch direkt in HTML5: https://www.w3schools.com/tags/tag_details.asp.**((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.))
     * {{https://fginfo.ksbg.ch/~olaf/web-projekt-vorlagen/inhalt-einblenden|zum Anschauen}}
     * {{:lehrkraefte:snr:informatik:glf22:html-css:inhalt-einblenden.zip|als zip-Datei zum Herunterladen}}
@@ Line 58: / Line 65: @@
   * CSS Flexboxes: https://www.w3schools.com/css/css3_flexbox.asp
-  * Schweizer Karte integrieren per ''Teilen'' und ''Einbetten'' auf https://map.geo.admin.ch/?lang=de <!-- https://help.geo.admin.ch/?ids=52&lang=de -->
+  * Schweizer Karte integrieren über die Menüpunkte ''Teilen'' und ''Einbetten'' auf https://map.geo.admin.ch/?lang=de <!-- https://help.geo.admin.ch/?ids=52&lang=de -->
   * HTML Graphics (''svg'' ist anfangs vermutlich einfacher als ''canvas'', 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
@@ Line 134: / Line 141: @@
 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.
 <WRAP center round important>
@@ Line 144: / Line 153: @@
 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.
+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.
+  * [[lehrkraefte:snr:informatik:glf22:html-css:filezille|Transfer auf Tech-Lab-Server mit Filezilla]]
+  * [[https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:blc:informatik:glf20:webtech-filezilla]]
   * [[https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:blc:informatik:glf20:webtech-filezilla]]
   * eventuell auch nützlich: [[https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:blc:informatik:glf20:webtech-vorbereitung]]
+-->