This is an old revision of the document!
Beachte: Alle Dateien deines Webprojekts sollten sich in einem eigenen Verzeichnis (und eventuell in Unterverzeichnissen davon) befinden.
Alle Pfadangaben zu Bildern und Videos etc. müssen relativ sein (denn der Tech-Lab-Computer hat keinen Zugriff auf Dateien auf deinem Rechner): Wenn du ein Bild (im selben Verzeichnis) mit einem Befehl wie <img src=“kanti.jpg” alt=“Kanti”>
einbindest, solllte dies klappen; vor dem Dateinamen “kanti.jpg” sollte nichts wie C:
oder Onedrive
o.ä. stehen.
Hochladen der Website auf den Tech-Lab-Server
Das Ziel ist nun, deine Website oder genauer gesagt dein gesamtes Webprojekt von deinem Rechner auf einen Rechner des Tech-Lab (= den Tech-Lab-Server) zu übertragen, so dass sie jede(r) im Schulnetz anschauen kann. Wir verwenden dazu das Programm Filezilla. Zuerst wird eine Verbindung zu dem Tech-Lab-Server hergestellt, danach kannst du wie im File Explorer Dateien verschieben.
Um Zugriff auf den Tech-Lab-Server (oder genauer ein Verzeichnis dort) zu erhalten, benötigst du einen Benutzernamen und ein 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).
FileZilla installieren und mit dem Tech-Lab-Server verbinden
Dazu benötigen Sie ein Passwort, das Sie von mir erhalten.
- Installieren Sie Filezilla mit dem Installer: Filezilla für Windows (kostenlose Version links wählen).
- Starten Sie Filezilla.
- Verbinden Sie sich mit folgenden Angaben mit dem Tech-Lab-Server (Eingabe in der Zeile ziemlich weit oben im Filezilla-Fenster, vgl. Screenshot unten):
- Server/Host: sftp://tech-lab.ch
- Username: gleich wie e-mail ohne @ksbg.ch
- Passwort (rechts auf den Papierstreifen): (jeder hat sein eigenes Passwort)
- Port 40199 (falls dieser nicht funktioniert, versuchen Sie es mit Port 23).
- Sie können gerne den Fingerprint des Servers vergleichen, damit Sie sicher sein können, dass Sie sich auch wirklich auf den korrekten Server verbinden.
Upload (= Hochladen/Kopieren) Ihres Webprojekts auf den Server (= Computer) des Tech-Lab
Achtung: Erstellen Sie eine Sicherheitskopie des Verzeichnisses, das alle Dateien Ihres Webprojekts enthält.
(Sie wären nicht der erste, der aus Versehen sein Projekt (oder seine Matura-Arbeit oder seine Doktorarbeit etc.) löscht.)
- FileZilla öffnet keine Dateien.
- In FileZilla sind links Dateien Ihres (lokalen) Computers sichtbar, rechts Dateien auf dem Computer des Tech-Labs. Im oberen Bereich ist jeweils der aktuell gewählte Ordner sichtbar, im unteren der Inhalt dieses Ordners.
- Ein Unterordner von
https://ofi.tech-lab.ch/2023
gehört Ihnen. Bisher befindet sich dort eine “Dummy-Datei” index.html. - Diese können sie sich in einem Browser (Edge, Chrome, Safari, Firefox) aus dem Schulnetz anschauen: Sie finden Sie von
https://ofi.tech-lab.ch/2023/
aus. - Bennen Sie in FileZilla die Datei
index.html
auf dem Server (also rechts) um zuindex-alt.html
(rechte Maustaste). - In Ihrem Browser wird jetzt, wenn Sie einen Reload durchführen, keine Seite mehr gefunden. (Denn Browser suchen standardmässig nach einer Datei namens
index.html
.) - Mit “drag and drop” können Sie Dateien und Verzeichnisse zwischen Ihrem (d.h. lokalen) Computer, links sichtbar, und dem Server, rechts sichtbar, kopieren.
- Kopieren Sie den gesamten Inhalt (aber nicht das Verzeichnis) Ihres Web-Projekt-Verzeichnisses in Ihr Verzeichnis auf dem Tech-Lab-Server: Konkret: Kopieren Sie alle HTML- und CSS-Dateien auf den Server (und alle Unterverzeichnisse, falls Sie solche angelegt haben).
- In Ihrem Browser wird jetzt, wenn Sie einen Reload durchführen, hoffentlich Ihre Website angezeigt.
- Ihre Webseite ist nur aus den Kanti-Netzwerken erreichbar.
- Mitschülerinnen und Mitschüler können nun schulintern Ihre Seite ansehen und auch entsprechende Links setzen.