c2b_default

Medieninformatik

VL

VL

382
0.0 (0)

Fichier Détails

Cartes-fiches 382
Langue Deutsch
Catégorie Marketing
Niveau Université
Crée / Actualisé 29.06.2022 / 30.06.2022
Lien de web
https://card2brain.ch/box/20220629_medieninformatik
Intégrer
<iframe src="https://card2brain.ch/box/20220629_medieninformatik/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>
Étudier

Wieso wird CSS verwendet?

  • html ursprünglich nur für Inhalt -> Formatierung und Gestaltung früher irrelevant und nur im eingeschränkten Maße möglich
  • Webdesign heute sehr relevant
  • HTML 
    • Strukturierung der Dokumente
  • CSS
    • weitere Bearbeitung der Strukturelemente 
    • erfordert mehr Arbeit als html Dateien 

Was sind Vorteile der Trennung von Inhalt und Darstellung?

  1. getrennte Bearbeitung möglich
  2. einzelne Teile sind übersichtlicher (bessere Handhabung in einzelnen Teilen)
  3. Design kann extern gespeichert werden und für viele Dokumente verwendet werden
    • einmal designed, anschließend für alle Websiten weiterverwenden
  4. bessere Wartbarkeit
    • Designänderung an zentraler Stelle (z.B. nur Schriftfarbe)
  5. mehrere Designs pro Inhalt möglich
    • z.B. zur Optimierung für Smartphones/Laptops mithifle der Ablage mehrerer Dateien
  6. Inhalte von Software einfacher auswertbar
    • z.B. Screenreader, der nur Websites vorlesen soll, benötigt CSS Datei nicht un kann sie so ignorieren

Wie wird CSS geupdated?

  • mittlerweile CSS Level 3
    • kein Level 4 geplant
    • mittlerweile sehr komplex
    • nur noch Weiterentwicklung einzelner Untermodule
  • Standardisierung durch W3C
  • in html 4 ist CSS empfohlen, ab html 5 verpflichtend
  • CSS-Dateien = Textdateien mit Endung .css

Welche Gestaltungsmöglichkeiten beinhaltet CSS?

  1. Schriftformatierung
  2. Ausrichtung und Absätze
  3. Abstände und Rahmen
  4. Farben und Hintergründe
  5. Listen- und Tabellenformatierung
  6. Layouting

Woraus besteht CSS?

  • aus Anweisungen (rules)
    • geben an, welche Eigenschaften für Dokumententeile gelten
  • CSS = Selektor und Deklarationsteil
    • CSS-Selektor definiert, auf welche html Elemente Anweisungen angewandt werden sollen
      • Zuweisung über Eigenschafts-Wert Paare
      • erkennen des Selektors mithifle eines Doppelpunktes
    • Deklarationsteil: Eigenschaft-Wert-Paare, getrennt durch Doppelpunkt

Bsp.: Selektor {
                Eigenschaft: Wert;
          }

Was sind Syntax Eigenschaften bei CSS?

  • Verkettung von mehreren Eigenschaften für einen Selektor möglich
    • Trennung durch Semikolon
  • Zuweisung mehrerer Werte pro Eigenschaft
    • Trennung durch Komma
    • Sortierung der Eigenschaften nach absteigender Priorität

Bsp.

body {
      background: #ffffffff;
      color: #ff00000;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 16px;
}
h1 {
      color: #0000ff;
      font-weight: bold;
}

 

> Syntax im Rumpf (Body), Hexadezimalzahl gibt Hintergrund und Schriftfarbe an
> Schriftart: höchste Prio hat Helvetica, wenn die im Browser nicht vorhanden ist, dann nächsthöhere (Arial), ... (hier wurde serifenlos ausgewählt)

Nochmal zu CSS Selektoren - was können die?

  • mehrere Selektoren mit gleicher Eigenschaft angeben
    • Trennung durch Komma: h1, h2 {color: #FF000; }
  • Verschachtelung von Selektoren
    • Trennung durch Leerzeichen: div h2 { color: #FFFF00; }
      > Zuweisung gilt nur für Überschrift zweiter Ordnung innerhalb einer Division (sonst wieder Farbe von vorher)

Wie werden Kommentare gekennzeichnet?

/*....*/

Wie wird CSS eingebunden?

  • Kombination von CSS mit html (oder anderer Datei)
  • CSS-Stilangaben an verschiedenen Stellen definieren
    1. externe Definition in eigener Datei
    2. interne Definition innerhalb der html Datei
      1. zentrale Definition
      2. lokale Definition

Beschreibe das Externe Stylesheet genauer

  • Stildefinitionen werden extern in eigenem Dokument abgelegt
  • z.B. index.html und myStyle.css
    • Achtung: müssen im gleichen Verzeichnis liegen
  • CSS-Datei wird im Kopfbereich der html Datei eingebunden
    • mittels Befehl <link ... > 
    • oder mithifle eines Hyperlinks (Link, der extern im Internet verfügbar ist)
  • für mehrere html Dateien verwendbar

Bsp.: 
html Dokument 
<head>
     ...
     <link rel = "stylesheet" href = "myStyle.css">
</head>

Beschreibe die Internen Stylesheets genauer.

  • Zentrales internes Stylesheet
    • Stildefinition wird zentral, an einer Stelle spezifiziert
    • CSS-Code mithifle <style> eingebunden und im gesamten Dokument eingehalten
    • meist im Kopfbereich eingebunden
    • Erweiterung des html Dokuments um CSS Element und somit Vermischung der Syntaxstile 

 

  • Lokales internes Stylesheet ("inline")
    • Stildefinition wird lokal, direkt bei html Element angegeben
    • Stildefinition mittels style-Attribut eingebunden
    • nur für dieses Element eingehalten
      • nur in Ausnahmefällen gemacht, weil sehr aufwändig (oft nur für einzelne Wörter)
    • ist kein Element vorhanden, wird <span> oder <div> eins erstellt
      • bei Div wird neuer Absatz für hervorgehobenes Wort erstellt
      • bei Span nur Wort hervorgehoben, nicht extra neuer Abschnitt

Nenne die Gründe für interne vs. externe Stilsheets

  • Intern: einzelne Elemente sollen anders aussehen als der Rest der Website
  • Extern:
    • eine Website soll für mobile Endgeräte optimiert werden
    • ein Cooperate Design soll eingehalten werden

Was ist Kaskadierung in CSS?

  • Cascading Style Sheets
  • mehrstufige, nacheinander Ausführung
  • Eigenschaften werden vererbt
  • Grundsatz: bei auftretenden Konflikten überschreibt die speziellere Definition die allgemeinere
    • abhängig von der Stelle der Spezifikation
      • intern überschreibt extern
      • lokal überschreibt zentral
    • abhängig vom Selektor

CSS-Selektoren...welche gibts?

  • mehr Selektoren in CSS als html (da nur <p> und <body>, <head>)
  • hier:
    1. Universal-Selektor
      • definiert Eigenschaften, die für alle html Elemente gelten
      • markiert mit *
      • niedrigste Priorität
    2. Klassenselektor
      • Eigenschaften für selbst definierte Klassen (wird angewandt, wenn html-Elemente nicht ausreichen)
      • markiert mit .
      • Anwedung mittels class-Attribut ( <h2 class="fremdwort" > Überschrift mit Fremdwort </h2>
      • höhere Prio als Universal
    3. ID-Selektor
      • hat höchste Priorität
      • markiert mit "#"

Seitenlayout: Wie wirds gemacht?

  • mithilfe <div> oder html5 Strukturelementen
    • Definition eines logischen Seitenlayouts
    • z.B. welcher Teil ist die Linkliste, welcher der Inhalt etc.
  • Blockelemente bekommen Platzierung zugewiesen
  • nicht alle Browser interpretieren einheitlich
  • CSS-Boxmodell

Was ist das CSS-Boxmodell?

  • jeder Block = "Block" mit folgenden Bestandteilen:
    • Content: Inhalt des Blockelement
    • Padding: Transparenter Innenabstand
    • Border: Rahmenlinie (border: 10px solid gray;) 
    • Margin: transparenter Außenabstand
  • alles außer Content ist optional, wird aber empfohlen (da übersichtlicher)
  • Beachte: bei Außen- und Innenabständen muss der Platz doppelt eingeplant werden
    • absolute Angaben, z.B. in Pixeln, cm, etc.
    • relative Angaben, relativ zur Schriftgröße des Elements (em)
  • für Rahmenlinie kann Stil (solid, dotted, doubled, ...) und Farbe definiert werden
  • siehe Bild

Wie kann man Blockelemente positionieren?

  • Position static: Element wird im Textfluss des Elternelements platziert (absolut Angaben werden ignoriert)
  • Position fixed: Element wird im Browserfenster fest platziert, bleibt beim Scrollen uvnverändert
  • Position relative: Element wird innerhalb Elternelements relativ zum ursprünglichen Ort platziert (bewegt sich beim Scrollen mit)
  • Position absolute: Element wird innerhalb Elternelement absolut platziert (überschreiben Elternelemente, bewegen sich beim Scrollen mit)

Was sind Autoren-, Benutzer- und Browser Stylesheets?

  • Autorenstylesheets: Autoren der Website definieren CSS Selektoren
  • Browserstylesheet: Browser legt Aussehen der Website durch Standardeinstellungen fest
    • niedrigere Priorität als Autorenstylesheets 
    • nur angewandt, wenn Autorenstylesheets nicht mitgeliefert werden
  • Nutzerstylesheets: Nutzer kann eigene Einstellungen festlegen
    • Autoren > Nutzer > Browser
    • Ausnahme: Nutzer gibt explizit an, dass seine Stylesheets höhere Prio haben sollen (z.B. bei Sehbeeinträchtigung)

Wofür wird JavaScript benötigt?

  • dynamische Websiten
  • Website ändert sich, man kann interagieren
  • ab Web 2.0 = Mitmach-Web
  • dynamische Anzeigen mithilfe von Skriptsprachen

Was sind Skriptsprachen?

  • Skript für Website > Dynamik muss programmiert werden, sodass sich die Website verändert
  • z.B. Inhale eines Online-Warenkorbs, Verwendung der aktuellen Uhrzeit, soziale Medien, Blogs etc.

Welche Ansätze gibt es zur Umsetzung dynamischer Websites?

  1. Clientseitige Dynamik (Berechnung auf lokalem Rechner des Nutzers/Clients)
  2. Serverseitige Dynamik (Berechnung auf Server)

Wie funktioniert der normale Ablauf von http?

  • Hypertext Übertragungsmodell
  1. Client stellt URL (Uniform Resource Locator) Request via http Anfrage
  2. Server sucht nach Index.html (Startseite der Homepage)
  3. Server schickt Response zurück 
  4. http im Header wird zuerst geschickt
  5. anschließend werden Inhalte der Daten durch html Datei (Payload) übermittelt
  6. Browser interpretiert html-Code und zeigt Webseite entsprechend an

Wie läuft die clientseitige Dynamik ab?

  1. Skriptinfo liegt auf Server
  2. Client stellt Anfrage
  3. Server schickt Datei unverändert mit Skript an Client
  4. Skript wird beim Client ausgeführt
  5. Anzeige wird je nach Berechnung modifiziert

Wie läuft die serverseitige Dynamik ab?

  1. Skriptinfo liegt auch auf Server
  2. Client stellt auch Anfrage
  3. jetzt wird aber ein standardkonformes html-Dokument beim Server erzeugt 
    1. Berechnung findet lokal auf Server statt
    2. Server konvertiert in html
  4. Server schickt reines html-Dokument an Client zurück
  5. Anzeige des erhaltenen hmlt-Dokuments im Browser des Clients

Welche Vor- und Nachteile hat die clientseitige Dynamik?

Vorteile

  1. schnelle Reaktionszeiten (Berechnung auf Rechner schneller als über Internet)
  2. Ausführung des Skripts benötigt kein Internet mehr

Nachteile

  1. Browser muss Skriptsprache unterstützen (heute eigentlich gegeben)
  2. eingeschränkte Funktionalität 
    • z.B. kann man nicht auf Datenbanken zugreifen, weil sonst zu viele Daten an Client gesendet werden müssten
  3. Sicherheit
    • Client führt fremdes Skript aus
    • aber mittlerweile recht sicher, weil Clients keinen Zugriff auf das lokale Betriebssystem und Dateiensystem haben (isolierte Ausführung jeder Webanwendung)
    • Ausnahme: beim Hochladen und Downloaden von Daten kurzfristiger Zugriff (nur Leseberechtigung)

Welche Vor- und Nachteile hat die serverseitige Dynamik?

Vorteile

  1. unabhängig von Einstellungen beim Client
  2. Abstimmung zwischen Serversoftware und Daten = problemlos
  3. Zugriff auf Datenbanken möglich (z.B. bei Bestellungen bei Amazon benötigt Server ZUgang zu seinen eigenen Datenbanken)

Nachteile

  1. keine schnellen, dynamischen Vorgänge möglich, da Austausch der Daten über Internet erfolgt

Welche clientseitigen Webskriptsprachen gibt es?

JavaScript (alle Browser verstehen JavaScript)

Welche serverseitigen Webskriptsprachen gibt es?

  1. php
  2. pearl
  3. python
  4. Java Server Pages
  5. JavaScript (.js)
  • viele weitere: Server ist unabhängig vom Client Browser

Was sind hybride Ansätze und wann werden sie genutzt?

  • Mischung: Berechnungen = client- und serverseitig
  • einseitige Dynamik nicht immer ausreichend
    • kleinere Aktualisierungen sind clientseitig (z.B. wenn bei Mailadresse ein @ fehlt, wird das clientseitig geprüft)
    • Zugriff auf Datenbanken sind serverseitig

 

Wie werden Webseiten ohne Nutzerinteraktion automatisch aktualisiert?

  • z.B. bei Newsstream, Blogs, digitale Uhr, die umschaltet
  • mithilfe von AJAX (Asynchronous JavaScript and XML)
    • senden selbstständig Request in gewissen zeitlichen Abständen

Wie läuft AJAX ab?

  1. auf Server liegt Datenbank
  2. Client stellt http Request zum Aufruf der Seite
  3. Server schickt Response als html 
    • nun eigentlich fertig, solang der Nutzer nichts klickt
  4. AJAX: sendet selbstständig neue Requests (http) und erfragt so Updates
  5. Server hat Skript laufen und erfragt bei Datenbank Neuerungen 
  6. bei Neuerungen: schickt Response (Daten, html, ...)

Unterscheide nochmal kurz JavaScript, html und CSS

  • html: Hypertext Markup Language
    • Inhalt und logische Struktur
  • CSS: Cascading Style Sheets
    • Formatierung und Gestaltung
  • JS: JavaScript
    • dynamische Anpassung und Interaktivität

Was ist JavaScript so?

  • Skriptsprache
    • wird interpretiert, nicht kompiliert
  • Ursprung : 1995, hieß da mal LiveScript
  • standardisiert als ECMAScript/ISO Standard
    • European Computer Manufacturers Association

Was sind Anwendungsgebiete für JavaScript?

  1. dynamische Manipulation von Websiten
    • z.B. weitere Pop-Up Fenster öffnen, Anzeigen neu gestalten, Formulareingaben prüfen
  2. Plausibilitätsprüfung (Formulareingaben prüfen, bevor sie zum Server übertragen werden)

Was sind Voraussetzungen, dass JavaScript so funktionieren kann?

  1. Verarbeitung von Maus- und Tastatureingaben
  2. Zugriffe auf html-Dokumentenstruktur haben (um zu wissen, was geändert werden kann)
  3. neue html Ausgaben erzeugen

Wie ist die allgemeine JavaScript Syntax aufgebaut?

  • Statements (Anweisungen) durch Semikolon getrennt 
    • JS Programm sind Listen von Statements
  • Unterscheidung von Groß- und Kleinschreibung 
    • Konvention: CamelCase (meinParagraf)
  • Kommentarmarkierung:
    • // einzeiliger Kommentar
    • /* mehrzeiliger Kommentar
      endet irgendwann auch */

Wie wird ein Zugriff auf html Elemente ermöglicht?

  • Zugriff über das id Attribut des html Elements
    • document.getElementById("Id");
  • Attribute = Zusatzinfos, die nicht auf Webseiten angezeigt werden
  • Bsp.
    • Paragraf im html Dokument:
      <p id="meinParagraf">
      Mein erster Paragraf.
      </p>
    • Zugriff auf Paragrafen durch:
      document.getElementById("meinParagraph");

    Wie kann man mithilfe von JS html-Elemente manipulieren?

    • Document.write
      • legt Inhalt des gesamten html Dokuments fest
      • überschreibt das, was zuvor geschrieben wurde 
      • Bsp.: document.write("Test");
        > es steht im Dokument nur noch Test
    • innerHTML
      • enthält Inhalt eines Elements
      • nicht gesamte Webseite wird geändert, sondern nur ein Element
      • Bsp.: document.getElementById("meinParagraf").innerHTML = "Mein veränderter Paragraf.";

    Wie werden Ausgaben mit JS erzeugt?

    • window.alert
      • öffnet Pop-up Fenster
      • wird über Website gelegt
      • z.b. window.alert("Warnung");
        > Popup-Fenster wird erzeugt mit Inhalt: Warnung
    • Console.log
      • speichert (logged) Daten für spätere Fehlersuche
      • debugging

    Wie kann man JS mit html kombinieren?

    1. externe Definition der Funktionalität in eigener Datei
      • Standard, weil übersichtlicher
    2. interne Definition der Funktionalität in der html Datei
      • Aufruf über Eventhandler (Anbindung an html Element)

    Study