lehrkraefte:snr:informatik:glf23:html-css:filezilla [https://fginfo.ksbg.ch Fachgruppe Informatik der KSBG]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
~~NOTOC~~

====== Einmal gemeinsam ======


<WRAP center round box>
Ziele: (1) Lernen, wie man Code von W3Schools in HTML-Teil und CSS-Teil zerlegt; (2) Website hochladen auf den Tech-Lab-Server.
  * (Vorbereitung: Zugangsdaten (einseitig!) ausdrucken und in Streifen schneiden (oder in Klassenchat, falls alle einverstanden).
  * Kleine Website "erstellen":
    * Lege im Verzeichnis ''html'' ein Unterverzeichnis ''upload-test'' an.
    * Zerlege folgendes in HTML-Teil (mit link zu CSS) und CSS-Teil: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_image
    * Speichere ein (anständiges) jpeg-Bild im Ordner ''upload-test'' und ändere HTML-Datei entsprechend.
  * Das eigene Verzeichnis auf dem Tech-Lab-Server:
    * Zettel verteilen; dazuschreiben, dass links URL-Hash und rechts Passwort (Handyfoto!)
    * Schaue deine Seite an: Du findest sie von ''https://ofi.tech-lab.ch/2024'' aus.
  * Nachtrag: Ergänze in ''index.html'' einen Link zur Seite deines Sitznachbarn.
  * Transfer der Website auf den Tech-Lab-Server:
    * Download: [[https://filezilla-project.org/download.php?platform=win64|Filezilla für Windows]] (kostenlose Version links wählen).
    * Achtung: Filezilla will beim Installieren Standardbrowser neu setzen: DECLINE! 
    * Installiere Filezilla und starte es. Dieses Programm dient dem Datentransfer zwischen deinem Computer (client) und Tech-Lab-Computer (Server)
  * Verbinde dich mit Hilfe der folgenden Angaben mit dem Tech-Lab-Server:
    * **Server/Host: <nowiki>sftp://tech-lab.ch</nowiki>**
    * **Username: gleich wie e-mail ohne @ksbg.ch**
    * **Passwort (rechts auf den Papierstreifen): (jeder hat sein eigenes Passwort)**
    * **Port 40199** (falls dieser nicht funktioniert, versuche es mit Port 23).
  * Struktur: links lokal, rechts auf Tech-Lab-Server
  * Benenne **rechts** ''index.html'' um in ''index-original.html''
  * Finde Verzeichnis ''upload-test'' und kopiere seinen Inhalt (drei Dateien) in dein Verzeichnis auf dem Tech-Lab-Server.
  * Nun sollte deine Webseite im Schulnetz öffentlich zugänglich sein. Schau sie dir z. B. per Handy an!
</WRAP>

====== Ab hier als Erinnerung, wenn es ernst wird ======


<WRAP center round important>
Beachte: Alle Dateien deines Webprojekts sollten sich in einem eigenen Verzeichnis (und eventuell in Unterverzeichnissen davon) befinden; deine Hauptseite muss ''index.html'' heissen. 

Alle Pfadangaben zu Bildern und Videos etc. müssen relativ sein: 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 (denn der Tech-Lab-Computer hat keinen Zugriff auf Dateien auf deinem Rechner oder deinem OneDrive). 
</WRAP>


====== 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 %%jede(r)%% sie 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.

<WRAP center round important>
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). 
</WRAP>


<!---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.

  * [[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]]
-->


==== FileZilla installieren und mit dem Tech-Lab-Server verbinden ====

<WRAP center round important>
Dazu benötigst du ein Passwort, das du von mir erhältst.

Auf dem Papierstreifen befinden sich:
  * links dein **Username**
  * in der Mitte der **URL-Hash** alias der Name deines Verzeichnisses dem Tech-Lab-Server
  * rechts dein **Passwort**
</WRAP>

  * Installiere Filezilla mit dem Installer: [[https://filezilla-project.org/download.php?platform=win64|Filezilla für Windows]] (kostenlose Version links wählen). 
  * Starte Filezilla. 
  * Verbinde dich mit Hilfe der folgenden Angaben mit dem Tech-Lab-Server (Eingabe in der Zeile ziemlich weit oben im Filezilla-Fenster, vgl. Screenshot unten, dann auf "QuickConnect" klicken):
    * **Server/Host: <nowiki>sftp://tech-lab.ch</nowiki>**
    * **Username: gleich wie e-mail ohne @ksbg.ch**
    * **Passwort (rechts auf den Papierstreifen): (jeder hat sein eigenes Passwort)**
    * **Port 40199** (falls dieser nicht funktioniert, versuche es mit Port 23).
  * Du kannst gerne den Fingerprint des Servers vergleichen, damit du sicher bist, dass du dich mit dem korrekten Server verbindest.

{{ :lehrkraefte:blc:informatik:glf20:filezilla-config.png?nolink&500 |}}
<!--{{:lehrkraefte:blc:informatik:glf20:filezilla-config.png?nolink&500|}}-->

==== Upload (= Hochladen/Kopieren) Ihres Webprojekts auf den Server (= Computer) des Tech-Lab ====

<WRAP center round important>
Achtung: Erstelle eine Sicherheitskopie des Verzeichnisses, das alle Dateien deines Webprojekts enthält. 

(Du wärst nicht der erste, der aus Versehen sein Projekt (oder seine Matura-Arbeit oder seine Doktorarbeit etc.) löscht.)
</WRAP>


  * FileZilla **öffnet keine Dateien**. 
  * In FileZilla sind **links** Dateien deines (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/2024'' gehört dir. Bisher befindet sich dort eine "Dummy-Datei" index.html.
  * Diese kannst du dir in einem Browser (Edge, Chrome, Safari, Firefox) aus dem Schulnetz anschauen: Du findest sie von ''https://ofi.tech-lab.ch/2024/'' aus.
  * Wenn du die alte Datei ''index.html'' auf dem Server erhalten willst: Benenne in FileZilla die Datei ''index.html'' auf dem Server (also rechts) um, etwa zu ''index-alt.html'' (rechte Maustaste). 
  * In deinem Browser wird jetzt, wenn du einen Reload durchführst, keine Seite mehr gefunden. (Denn Browser suchen standardmässig nach einer Datei namens ''index.html''.)
  * Mit "drag and drop" kannst du Dateien und Verzeichnisse zwischen deinem (d.h. lokalen) Computer, **links** sichtbar, und dem Server, **rechts** sichtbar, kopieren. 
  * Kopiere den gesamten Inhalt (aber nicht das Verzeichnis) deines Web-Projekt-Verzeichnisses in dein Verzeichnis auf dem Tech-Lab-Server: Konkret: Kopiere alle HTML- und CSS-Dateien und alle Bilder etc. auf den Server (und alle Unterverzeichnisse, falls du solche angelegt hast).
  * In deinem Browser wird jetzt, wenn du eine Reload durchführst, hoffentlich deine Website angezeigt.
  * Deine Webseite ist nur aus den Kanti-Netzwerken erreichbar.
  * Mitschülerinnen und Mitschüler können nun schulintern deine Seite ansehen und Links darauf setzen.
<!--  
  *  Wenn du die Seite welt-öffentlich machen möchtest, benenne die Datei .htaccess um (z.B. nach .htaccess.bak).
-->

=== Für Experten: ===


<hidden Passwortwechsel>
Wenn du einen Passwortwechsel wünschst, geh wie folgt vor:
  * Öffne eine Powershell (oder ein Terminal/Konsole unter MacOSX oder Linux) und gib folgendes Kommando ein (wobei natürlich //vorname.nachname// durch deinen //user name// zu ersetzen ist:
<code bash>
ssh -p 40199 vorname.nachname@tech-lab.ch
</code>
Im KSBG-Wild Netz funktioniert obiges Kommando nicht, verwende stattdessen
<code bash>
ssh -p 23 vorname.nachname@tech-lab.ch
</code>

  * Bestätige mit 'yes' den folgenden fingerprint:  SHA256:XJP3qLEnM4RsP5ZVQQa+R6wl1SyQWUYfwowYOB/aoRk. Damit ist garantiert, dass du dich beim richtigen Server anmeldest.
  * Zum Passwortwechsel gib folgendes Kommando ein:
<code bash>
passwd
</code>
  * Befolge die Anweisungen, beim Eingeben des Passworts wird **gar nichts** angezeigt.
</hidden>

<hidden SSH-Config speichern>
Damit die Port-Nummern nicht immer eingeben werden müssen, kann in der persönlichen ssh-Konfigurationsdatei (unter Linux ''~/.ssh/config'', wobei ''~'' für das Home Verzeichnis steht, unter Windows C:\User\Hans\.ssh\config) folgender Eintrag gemacht werden (wobei ''hans.muster'' entsprechend ersetzt oder die Zeile gänzlich gelöscht werden muss).
<code txt>
Host ofi ofi.tech-lab.ch
        HostName tech-lab.ch
        User hans.muster
        Port 23
</code>
</hidden>