Der allgemeine Computerpool steht allen Student*innen der HGB im Raum 2.34 zur Verfügung. Der Arbeitsraum bietet 10 iMacs (6 neue M1 und 4 ältere i5 Geräte) mit einer sehr breiten Palette von Software. Auch kann hier an einem frei zugänglichen A4-Flachbettscanner und einem A4 Schwarz/Weiss Duplex Laserdrucker gearbeitet werden. Papier ist selber mitzubringen!
Zugang
Ein Schlüsseltransponder kann an der Zentrale gegen einen Pfand entliehen werden. Nach Nutzung muss dieser ohne Umwege sofort zurück. Ist der Transponder bereits entliehen so ist der Raum offen. Die letzte Person im Raum hat den Transpoder - Übergaben und Austausch des Pfands sind dazu nötig.
Nutzungsetikette
• Bitte Rechner wie vorgefunden oder sogar besser hinterlassen: Desktop leeren, Papierkorb entleeren, eigene Downloads löschen (Datenschutz, Privatsphäre). Daten werden ggf. ohne Rückfrage gelöscht. Arbeitsdokumente sinnvoll wegspeichern (Datenträger, Nextcloud etc.), sonst ggf. bald weg.
• Bitte Software niemals selber installieren, sonst kaputt.
• Bitte kein illegales Filesharing, kein illegales Streaming, sonst rechtlichen Ärger für die gesamte HGB.
• Bitte Andere nicht mit Inhalten auf den Arbeitsrechnern verstören, sonst mindestens Ausschluss! Übergrifflichkeiten werden nicht toleriert und geduldet.
• Bitte Rechner nach Gebrauch immer herunterfahren, sonst unnötiger Stromverbrauch und Verschleiß.
• Bitte Rechner in der Grundkonfiguration, die vorgesehen ist/war, hinterlassen. Es sind die für alle bestimmten Einstellungen.
• Bitte kein Essen und Trinken am Computer, sonst kaputt und/oder ekelig.
• Bitte Müll stets in den Mülleimer, sonst ekelig.
• Die letzte Person im Raum hat Verantwortung! Sie schließt beim Hinausgehen alle Fenster, löscht das Licht und schaut sich nochmal um, bevor sie geht. Fundsachen zur Zentrale.
• One Klotz to rule them all (Der Transponder aus der Zentrale); Wer ihn hat, hat die Verantwortung! Bitte nie mitnehmen - immer sofort zurück zur Zentrale oder Übergabe an im Raum an Verbleibende (Pfandtausch!).
• Ideen, Anregungen und Wünsche bezüglich der Soft- und Hardwareausstattung hören wir gerne!
• Wenn was klemmt, nicht geht oder fehlt, bitte sofort die Ansprechpartner*innen informieren. Weglaufen hilft meist nicht. Aushalten auch nicht.
• Umgang mit Technik umsichtig und auf Nachhaltigkeit bedacht, sonst bald kaputt.
Verstösse gegen die Nutzungsetikette, kann zum sofortigen Ausschluss der Nutzung des Computerpools führen.
HTML und CSS in der künstlerischen Praxis
Linkliste zur Veranstaltung:
- SelfHTML https://wiki.selfhtml.org
- W3Schools https://www.w3schools.com
- CSS grid layout https://css-tricks.com/snippets/css/complete-guide-grid/
- CSS flexbox layout https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- Lightbox 2 Plugin https://lokeshdhakar.com/projects/lightbox2/
- Cycle 2 Plugin https://jquery.malsup.com/cycle2/
- Ergebnisse des aktuellen Kurses https://www.hgb-leipzig.de/~abhoette/projects/HTMLKURS2023/ und als ZIP
Webseiten-Analyse für HTML/CSS-Kurs
Hallo zusammen! Hier ist eine Übersicht über die Struktur und die wichtigsten Inhalte eurer Webseite, die im Rahmen des HTML/CSS-Kurses entstanden ist. Diese Analyse soll euch helfen, die verwendeten Techniken besser zu verstehen und bei Bedarf weiter zu vertiefen.
Aufbau der index.html Datei
Die index.html bildet das Grundgerüst eurer Webseite und ist semantisch in mehrere Hauptbereiche unterteilt.
-
<head>:
-
Definiert den Zeichensatz (UTF-8) und den Ansichtsbereich für responsive Design.
-
Setzt den Titel, der im Browser-Tab angezeigt wird (<title>THIS TEXT ON TAB</title>).
-
Verlinkt die CSS-Dateien für das Styling (style.css und lightbox.css).
-
-
<body>: Enthält den sichtbaren Inhalt der Seite und ist weiter strukturiert:
-
<header>: Beinhaltet das Logo (<div class="mylogo">) und den Haupttitel sowie Untertitel der Seite (<div class="mytitle">).
-
<nav>: Die Navigation der Seite, realisiert als unsortierte Liste (<ul>) mit verschachtelten Untermenüs.
-
<main>: Der Hauptinhaltsbereich der Seite, unterteilt in mehrere <section>-Elemente.
-
Erste <section>: Präsentiert eine Bildergalerie/-slideshow (<div class="cycle-slideshow">) mit Navigationspfeilen und Pager. Die Bilder werden dynamisch geladen.
-
Zweite <section>: Zeigt eine Bildergalerie im Flexbox-Layout mit Lightbox-Funktionalität.
-
Dritte <section>: Demonstriert verschiedene Textauszeichnungen wie Fett (<b>, <strong>), Kursiv (<i>, <em>), Markierungen (<mark>), Unterstrichen (<u>), Durchgestrichen (<s>), Hoch- (<span class="sups">) und Tiefstellung (<span class="subs">) sowie verschiedene Ligaturen und Brüche über CSS-Klassen. Es werden auch verschiedene Link-Typen gezeigt (extern, intern, Sprungmarke, E-Mail).
-
Vierte <section>: Behandelt "Assets" und zeigt Beispiele für verschiedene Bildformate (PNG, JPG, GIF, WEBP), eine eingebettete SVG-Grafik sowie eingebettete Videos (YouTube, Vimeo, lokal) und eine Audiodatei.
-
<aside>: Ein Seitenbereich, der hier vermutlich für ergänzende Informationen gedacht ist.
-
<footer>: Der Fußbereich der Seite, enthält einen Link zum Impressum.
-
<script>: Am Ende des <body> werden JavaScript-Dateien für die Lightbox und die Cycle2-Slideshow geladen und initialisiert. Es gibt auch ein Inline-Skript, das die Optionen für die Lightbox setzt und das Verhalten der Navigations-Untermenüs steuert (Auf-/Zuklappen bei Klick).
-
Mehr zu jQuery .on("click"): W3Schools jQuery
-
Mehr zu jQuery .slideToggle(): W3Schools jQuery
-
Analyse der style.css Datei
Die style.css Datei ist verantwortlich für das Aussehen und Layout der Webseite.
-
CSS Variablen (:root): Globale Variablen für z.B. Abstände (--gutter), Farben (--hausfarbe, --hintergrundfarbe) sind definiert, was die Wartung und Anpassung erleichtert.
-
@font-face: Eigene Schriftarten ("InterVariable", "EB Garamond") werden eingebunden, um ein individuelles Schriftbild zu ermöglichen.
-
Globaler Reset (*): Standard-Außen- und Innenabstände sowie Rahmen aller Elemente werden auf 0 gesetzt (margin: 0; padding: 0; border: 0;). box-sizing: content-box; wird verwendet.
-
Layout mit CSS Grid (body): Das Hauptlayout der Seite wird mit CSS Grid erstellt, wobei Bereiche wie header, nav, main, aside und footer definiert werden.
-
Typografie und OpenType Features: Die Schrift "InterVariable" wird mit spezifischen font-variation-settings und font-feature-settings (z.B. calt, dlig, ss03, ss05, tnum, subs, sups, frac) genutzt, um erweiterte typografische Möglichkeiten wie Ligaturen, alternative Zeichen oder spezielle Ziffernformen zu aktivieren.
-
Flexbox Layout (.flex-container, .column): Innerhalb der zweiten Sektion wird Flexbox für die Anordnung der Bilder in Spalten verwendet.
-
Styling der Hauptbereiche:
-
header: Wird mit Flexbox gestaltet, um Logo und Titel anzuordnen. Eine Hover-Transition und eine Keyframe-Animation (myrot) für das Logo sind vorhanden.
-
nav: Die Navigation wird ebenfalls mit Flexbox für die Hauptpunkte gestaltet. Links haben Hover- und Aktiv-Zustände. Die Untermenüs (nav ul ul) werden initial ausgeblendet (display: none;) und per JavaScript (siehe index.html) ein- und ausgeblendet.
-
main: Enthält allgemeine Padding-Regeln für Überschriften und Absätze. Bilder, SVGs und Videos im Main-Bereich werden auf 100% Breite skaliert.
-
Galerie-Steuerung (.remote, .cycle-pager): Spezifische Styles für die Bedienelemente der Cycle2-Slideshow, inklusive position: sticky für das "Klebenbleiben" der Steuerung beim Scrollen.
-
Video Container (.videodiv): Sorgt für ein responsives Seitenverhältnis bei eingebetteten Videos.
-
-
Responsive Design (@media screen and (max-width: 40rem)): Für Bildschirme mit einer maximalen Breite von 40rem wird das Grid-Layout angepasst, sodass die Bereiche (header, nav, main, aside, footer) untereinander angeordnet werden. Auch das Spaltenlayout der Flexbox-Galerie wird auf 100% Breite für jede Spalte umgestellt.
Dieses Skript gibt euch einen guten Überblick über die verwendeten HTML-Strukturen und CSS-Techniken. Nutzt die verlinkten Ressourcen, um einzelne Aspekte genauer zu studieren. Viel Erfolg weiterhin im Kurs!