---

Bitte benutzt für heute folgendes Rückmeldeformular:

Dein Name:
Deine Rückmeldung:
Für meine Beteiligung am Projektkurs im Laufe des vergangenen Jahres gebe ich mir folgende Note: (als Notenpunkte, also im Bereich von 0 bis 15): Bemerkungen: ...

---

Hinweise zum Endprojekt:
20240409_pjk_abschlussprojekt.zip

Fahrplan für heute:
• Sichtung des Endprojekts, Benutzung von zip-Dateien
• Benutzung des HTML-Validators
• ggf. Benutzung von HTML-Tidy

---

Vorgaben für ein Referat:
• Dauer in etwa 5 Minuten
• Jedes Referat besteht aus einer HTML-Datei und ggf. Begleitdateien (Bilder o.ä.)
• Das Referat ist kein PowerPoint-Präsi-Blabla. Stattdessen führt ihr live vor, wie sich Aspekte eures Referatsthemas auf die Website auswirken.
• Eure HTML-Webseite enthält außerdem noch 3 Fragen zum Referatsthema, die man dem Publikum stellen könnte (oder in einem späteren Multiple-Choice-Test abfragen könnte)

Referatsthemen:
• Grundlagen: CSS-Selektoren (classes ids Pseudoklassen)
• Grundlagen: Flexbox
• Grundlagen: Farbe auf dem Computer: unterschiedliche Arten, RGB anzugeben (#FFFFFF #FFF rgb(135,206,235) rgb(135,206,235,0.5) )
• Grundlagen: Farbe auf dem Computer: HSV Farbräume und Angabe von HSV-Farben in HTML
• Grundlagen: Einheiten (em,px,ex,pc ... Druckausgabe, Bildschirmausgabe)
• CSS-Versionen und die Website https://caniuse.com/
• HTML-Versionen und die Website https://caniuse.com/
• CSS-Animationen
• svg (und wie man solche Dateien in HTML einbindet)
• Text-Enconding (UTF-8, Ansi)
• JavaScript (für Leute, die schon etwas programmieren können)
• Barrierefreiheit: Blindenschrift, Screenreader ...
• SEO
• Bilder einbinden und Bildformate fürs Web (png jpg gif webp)
• Videos einbinden und Videoformate fürs Web
• Audio einbinden und Audioformate fürs Web
• Spezielle Designelemente: Scrollbares Ribbon, DropDown-Menus, Animierte Icons, CSS-Animationen, Halbtransparente Elemente über Hintergrundbild
• Minimalistischer Nachbau einer bekannten Seite

---

Erinnerung an die Befehle zur Positionierung von Elementen:
Siehe auch: https://developer.mozilla.org/en-US/docs/Web/CSS/position?retiredLocale=de

---

Layout-Spielereien

Eine kleine Demonstration, wie verspielte Layouts umgesetzt werden können:
www.plusplanet.de/miscrawhtml/20231104_fixed_grafik_mit_text/index.html

Dafür notwendige Kenntnisse (neben Grundlagen in HTML und CSS):
• Flex-Layout
• position-Attribut
• Grafiken freistellen, Alphakanal beachten
• mit dem transform-Attribut Linktexte verdrehen und anpassen
• Ansicht auf Desktop und Handyversion optimieren

Aufgabe:
• Recherchiere zum position-Attribut (insbesondere zu den Werten "fixed" und "absolute") und erstelle eine Demoseite, in der Du unten einen immer sichtbaren "Footer" hast. Auf der Demoseite soll auch genügend Blindtext zu sehen sein - und zwar soviel, dass gescrollt werden muss!
• Lade die Kritzelgrafik aus der Webseite herunter. Wir werden später eine eigene Grafik benutzen und diese in einem Grafikprogramm freistellen (also "ausschneiden"). Spiegle diese Grafik an der y-Achse (in Paint3D öffnen, auf "Zeichenbereich" klicken und den entsprechenden Button aus der Seitenleiste klicken. Dann unter neuem Namen abspeichern).
• (Gemeinsam) Wir versuchen die gespiegelte Grafik so einzubinden, wie das auf der Demoseite zu sehen ist.

---

Kleine Computer-Grundlagen-Tour

1• Erstelle auf dem Desktop ein Verzeichnis mit dem Namen "pjk_training"
2• Erstelle ein Dokument (ein einfacher Kurztext wie "Hallo Informatik" genügt) in der Textverarbeitungssoftware "Libre-Office" mit dem Namen gruss.odt und speichere es ab in dem Ordner "pjk_training"
3• Erstelle ein Dokument in dem Programm "Notepad" oder "Notepad++" (beides auf dem Desktop oder über das Startmenü zu finden) mit dem gleichen Text wie in der vorigen Aufgabe und dem Namen gruss.txt. Auch Dieses Dokument soll wieder in dem Verzeichnis "pjk_training" abgespeichert werden.
4• Schaue Dir den Inhalt des Ordners "pjk_training" mit dem Datei-Explorer / Dateimanager an und erkläre, welche Unterschiede die beiden abgespeicherten Dateien besitzen. Speichere deine Erklärung in einem neuen Textdokument mit Namen Aufgabe4.txt
5• Tastaturtraining: Erstelle in Notepad++ eine Kopie von folgendem kleinen Bärchen und speichere Dein Ergebnis unter tier.txt im Ordner "pjk_training":

6• Kopiere dieses Bärchen in ein neues Libre-Office-Dokument mit Namen Aufgabe6.odt hinein und erkläre, warum die Grafik nicht mehr schön aussieht. Schreibe diese Erklärung auch kurz in das Dokument hinein
7• Es gibt nun zwei odt-Dateien im "pjk_training"-Ordner. Erstelle jeweils ein PDF aus diesen Dateien.
8• Erstelle eine Grafik - kein Text! - mit dem Inhalt "PJK bei TOE" und speichere die Datei in den drei unterschiedlichen Formaten jpg, png und bmp unter den Namen grafik.png (bzw. grafik.jpg und grafik.bmp). Die Dateien sollen in dem Unterordner "bilder" innerhalb des Ordners "pjk_training" gespeichert werden.
9• Erstelle einen Screenshot und speichere diesen ebenfalls im Unterordner "bilder".
10• Fotografiere mit deinem Handy deine Schuhe und transferiere das Bild (egal auf welche Art und Weise.) auf deinen Rechner und speichere das Bild ebenfalls im Unterordner "bilder".
11• Bei den Kindern aus der 6. Klasse habe ich Ordnerstrukturen mit folgendem Bild erklärt:

Rufe den Link https://de.wikipedia.org/wiki/Pfadname auf und versuche die Informationen für das Windows-System zu verstehen. Erstelle eine Textdatei mit Namen pfade.txt im Ordner "pjk_training", in denen alle Dateipfade aus dem obigen Bild aufgelistet sind. Dabei gehen wir davon aus, dass die Ordnerstruktur auf einem USB-Stick auf Laufwerk D: liegt.
12• Erstelle eine zip-Datei aus deinem Ordner, ändere den Namen in "pjk_training_fritzi" (oder wie auch immer dein Name lautet) und lade sie hoch auf den Abgabeordner.

Falls Du mit der Aufgabe fertig bist, so hilf anderen!
Falls es nichts mehr zu helfen gibt, beschäftige Dich bitte mit folgenden beiden Links, baue den Effekt nach und erkläre ihn:
https://codepen.io/vavik96/pen/yNoBYK
https://codepen.io/sdthornton/pen/wBZdXq

---

Link zum heutigen Erklärvideo:
www.plusplanet.de/video/20231024_css_flexbox_am_beispiel.mp4

---

Fahrplan für heute:
• CSS zentral in einer Datei definieren/ extern definieren (siehe: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Stylesheets_einbinden )
• CSS Selektoren, Einheiten und Eigenschaften
• Miniprojekt "Katzengalerie" gestalten

---

A) Wir schauen uns als Wiederholung folgende Html-Datei an:
www.plusplanet.de/miscrawhtml/20230905_htmlbefehle.html

B1) Lesen von https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Stylesheets_einbinden
B2) Verstehen des Textes anhand des Projektes "Boxmodel"
B3) Mit diesem Wissen versuchen wir, die Datei mit den wichtigsten HTML-Befehlen zu "verschönern"

C) Aufhübschen des Uhrzeitrechners von Leon Wimmel

---

Wir üben noch einmal den Grundaufbau einer Webseite bzw. einer Website (Webseite und Website bedeuten nicht das gleiche! Wo liegt der Unterschied?)

Wir versuchen heute, eine kleine Website nachzubauen. Ich habe dabei (ziemlich willkürlich) eine Vorlage im Netz herausgesucht:
https://aussichtaufwelt.de/usa-blog/
Auf der verlinkten Seite erzählt ein Paar von ihrer USA-Reise.

Aufgabe: Kopiere die oben verlinkte (Teil-)website. Aber: Es dürfen nur Texte und Bilder kopiert werden - der HTML-Teil der Website muss komplett selbstgeschrieben werden! (Die Webseitennavigation ganz oben und die Kommentarfunktion ganz unten etc. lassen wir aus)

• Erstelle (mit unserer bekannten Webseitenvorlage) zunächst eine Kopie der "Startseite" mit Links auf die 6 Unterseiten. Beschränke dich zunächst nur auf den Text und funktionierende Links. Bilder und andere Stile kommen später.
• Erstelle die 6 Unterseiten (wieder nur mit Text und ggf. Links bzw. dem "Zurück zur Übersicht"-Link)
• Formatiere die Texte mit Hilfe folgender Tags: <br> <b> <i> <ol> <ul> <li> <hr> und <table> <th> <tr> <td>
• Füge Bilder mit dem <img> Tag ein
• Für schnelle Webdesigner:
   • Wie erzielt man die grau unterlegten Hinweisboxen?
   • Wie ändert man die Standard-Schriftart?
   • Wie bekommt man kleineren Text (z.B. unter die Bilder) hin?
   • Wie bekommt man die restlichen Design-Features hin?
  

---

Hausaufgabe zum nächsten mal: (also zum 15.08.2023)
Lesen:
https://wiki.selfhtml.org/wiki/Grundlagen/Entstehung_des_Internet#Die_60er_-_Das_ARPA-Net
Darin die Kapitel
• Die 60er - Das ARPA-Net
• Die 70er - Wissenschaftliche Einrichtungen
• 1993 - Das World Wide Web (WWW)
• Die 90er - Die Browserkriege
• Das iPhone - die mobile Revolution
• Big Data und die Cloud

https://wiki.selfhtml.org/wiki/Grundlagen/Namensauflösung_im_Domain_Name_System#Domain_Name_System
Hier nur der Abschnitt "Domain Name System" bis "Aufbau/Syntax von DNS-Namen"

---

1. Sitzung
• Begrüßung, Kursinhalt, zu meiner Person, Bewertung
• Alles erlaubt, aber keine Gewalt/Sex (Bilder/Namen), für die ich mich rechtfertigen müsste, wenn die Schulleitung mal reinkommt
• Essen und Trinken, eigenen USB-Stick mitbringen
• Fragen an die SuS: Wer hat Erfahrungen/Kontakt gemacht? Eltern etc. im Web-Job?
• Einordnung des Themenumfangs: Webdesign ist ein Mix aus Kunst und mindestens 50% IT (so werde ich das hier im PJK jedenfalls unterbringen). Dort, wo ich - im künstlerischen Bereich - weniger Expertise habe, werden wir selbst Kriterien festlegen.
• Zielsetzung: eher "Schreiner" als "IKEA"


Zitate:

„Design ist Kunst in der zweiten Potenz. Man muss die Ästhetik mit Zweckerfüllung multiplizieren. Damit ist es der Dimension der Kunst enthoben. Kunst betreibt Ästhetik um der Ästhetik willen. Sie ist eindimensional.“
Otl Aicher, Gestalter, aus „Die Welt als Entwurf“, Ernst & Sohn, 1991

„It took me a few seconds to draw it, but it took me 34 years to learn how to draw it in a few seconds.“
Paula Scher, Designerin

„Design setzt Inhalt voraus. Design ohne Inhalt ist Dekoration.“
Jeffrey Zeldman, Webdesigner, 2008

„Design is a relationship between form and content.“
Paul Rand, Grafikdesigner (Quelle: designersreviewofbooks.com)

„Design should never say ‚Look at me.‘ It should always say ‚Look at this.“
David Craib, Designer

Design ist ursprünglich die äußerliche Form- und Farbgestaltung eines Objekts, beinhaltet aber heute eine Vielzahl von weiteren Aspekten [...]. Insbesondere umfasst es auch die Auseinandersetzung des Designers mit der technischen Funktion eines Objekts sowie mit dessen Interaktion mit einem Benutzer.
Wikipedia

Übung: Text gemeinsam formulieren: Aufgabe von Webdesign (Unterschiede zum Printmedium, responsives Webdesign)

Technische Grundlagen
MC-Test: (Ohne Einsammeln, direkte Auswertung!)

Kurzdemonstration:

Frage 0: Paris ist ....
A) Eine Stadt in Europa
B) Die Hauptstadt Frankreichs
C) Eine Stadt in Deutschland

Es sind 0,1 oder mehrere oder alle Antworten korrekt. Ich frage später bei jeder einzelnen Antwort, wer die angekreuzt hat, und wer nicht

Frage 1: Folgende Programme sind Webbrowser:
A) Google
B) Firefox
C) Microsoft Edge
D) Microsoft Windows
E) Linux
F) Apple Safari
G) Instagram
H) HTTP

Frage 2: Ein typisches Handyfoto hat heutzutage grob etwa folgende Dateigröße
A) 3 MB/s
B) 3 MB
C) 3 KB
D) 3 GB
E) 3 TB
F) 3000 KB

Frage 3: Welche der folgende Dateitypen sind für Bilddateien gedacht und auch direkt innerhalb von Webseiten darstellbar?
A) PDF
B) DOC
C) JPG
D) HTML
E) PNG
F) PIC

Frage 4: Welche der folgenden Erklärungen sind korrekt:
A) HTML ist eine Markup-Sprache, mit der man Texte für's Web sinnvoll formatieren kann
B) HTTP ist ein Protokoll, also ein Ablaufregelwerk dafür, wie Webseiten (aber auch andere Daten) über das Internet übertragen werden
C) CSS ist eine Stylesheet-Sprache, mit der man Webseiten gestalten und layouten kann
D) JavaScript ist eine Programmiersprache, die im Browser ausgeführt werden kann, um Webseiteninhalte dynamischer zu gestalten
E) Während Fotos oft in einem Rasterformat abgespeichert werden, liegen einzelne Buchstaben in der Regel in einem Vektorformat vor.


Erster Arbeitsauftrag:
• Trash-Webseite aus Word heraus und Untersuchung des Quelltextes
Gemeinsam: Text formulieren: Unterschied "Word-Datei" und "Textdatei". Einheit Byte.

• Untersuchung des Quelltextes von Google oder Plusplanet, Copy Quelltext von Plusplanet in eine eigene HTML-Datei (CSS fehlt, kann aber eingebunden werden)

• Modifizierung einer ersten Webseite mit Bootstrap (columns ändern)
bootstrapTest.zip

Erste Hausaufgabe
https://wiki.selfhtml.org/ anschauen: Grundlagen/Geschichte lesen lassen

---

Ein Minimal-Template für kleine Projekte:
show hide

---

Bitte benutzt für heute folgendes Rückmeldeformular:

Dein Name:
Deine Rückmeldung:
Die Idee mit dem Video war ... Noch besser wäre es gewesen, wenn ...