lehrkraefte:snr:informatik:glf23:html-css:projekt-anregungen [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~~

====== 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 [[lehrkraefte:snr:informatik:glf22:hotkeys|Hotkeys und anderes Nützliches]] nützlich sein.

===== Einige Anregungen =====

Nette Beispiele findet man hier: https://www.w3schools.com/howto/default.asp

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

Empfohlenes Vorgehen: Wenn dir ein "Layout" gefällt und du es verwenden willst: Schau dir den Quell-Code genau an! 
<WRAP center round important>
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.
</WRAP>

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: 
    * {{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**: 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: **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}}
  * Horizontales Menü (mit Javascript): 
    * {{https://fginfo.ksbg.ch/~olaf/web-projekt-vorlagen/horizontales-menu-mit-javascript|zum Anschauen}}
    * {{:lehrkraefte:snr:informatik:glf22:html-css:horizontales-menu-mit-javascript.zip|als zip-Datei zum Herunterladen}}
    * 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:
      * {{https://fginfo.ksbg.ch/~olaf/web-projekt-vorlagen/grid|zum Anschauen}}
      * {{:lehrkraefte:snr:informatik:glf22:html-css:grid.zip|als zip-Datei zum Herunterladen}}
  * Floating text um Bilder:
    * {{https://fginfo.ksbg.ch/~olaf/web-projekt-vorlagen/floating-images|zum Anschauen}}
    * {{:lehrkraefte:snr:informatik:glf22:html-css:floating-images.zip|als zip-Datei zum Herunterladen}}
    *  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
  * 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
  * CSS Image Gallery: 
    * https://www.w3schools.com/css/css_image_gallery.asp
    * (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:
      * https://stackoverflow.com/questions/69598371/css-photo-gallery-with-zoom-on-click-simple
      * https://css-tricks.com/zooming-images-in-a-grid-layout/

<!--  * Zoom in picture https://www.w3schools.com/howto/howto_js_image_zoom.asp
  * Photo Gallery?
-->



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

<WRAP center round info>
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 das ''p''-Element oder das ''h1''-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 das ''strong''-Element oder das ''em''-Element.)

Zu Block- und Inline-Elementen siehe auch https://www.w3schools.com/html/html_blocks.asp.
</WRAP>

=== Einheiten in CSS ===

https://www.w3schools.com/cssref/css_units.php

=== Nette Seite zum Ausprobieren von CSS-Eigenschaften ===

https://www.w3schools.com/cssref/playdemo.php?filename=playcss_background-image

=== Neue semantische Elemente in HTML5 ===

Zur Verwendung "semantischer" HTML-Elemente siehe etwa:
  * [[https://html.com/document/#New_Semantic_Tags_Added_by_HTML5]]
  * [[https://www.w3schools.com/html/html5_semantic_elements.asp]]














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

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






==== Link zur Kursseite ====

[[lehrkraefte:snr:informatik:glf23|Zur Kursseite]]