c2b_default

Medieninformatik

VL

VL

382
0.0 (0)

Kartei Details

Karten 382
Sprache Deutsch
Kategorie Marketing
Stufe Universität
Erstellt / Aktualisiert 29.06.2022 / 30.06.2022
Weblink
https://card2brain.ch/box/20220629_medieninformatik
Einbinden
<iframe src="https://card2brain.ch/box/20220629_medieninformatik/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>
Lernen

Wie ist das www entstanden?

  • Gründer: Sir Timothy John Berners Lee und Robert Caillau
  • Ziel: Wissen verbreiten und gegenseitig bearbeiten (Interaktivität)
  • entwickelten HTML und Anwendungsprotokoll HTTP (bis heute Standard)
  • erstmals erfunden, sehr schnell und stark weiterentwickelt
    • aber früher noch keine Interaktivität, daher Weiterentwicklungen

Definition WWW

  • über das Internet abrufbares System von elektronischen Hypertext und Hypermedia Dokumenten
  • werden mit Links miteinander verknüpft
  • im Internet über Protokolle übertragen
  • mittels Browser dargestellt

Welche 3 Grundkomponenten hat das WWW?

  1. URL (Uniform Resource Locator): einheitliche Adressierung im Internet
  2. http (Hypertext Transfer Protocol): Kommunikationsprotokoll
  3. html (Hypertext Markup Language): Seitenbeschreibungssprache für Dokumente

Was ist das http?

  • Protokoll in Anwendungsschicht des TCP/IP Modells
  • Grundprinzip beim Aufrufen von Webseiten:
    1. Identifizierung über DNS
    2. Aufbau mittels TCP/IP
    3. Datenaustausch mittels http
  • definiert, wie Webserver und -browser miteinander kommunizieren
    • Client-Server, bzw. Request-Response
  • Browser interpretiert html Code 
    • mit http Header und html Payload

Was ist der Browser?

  • Computerprogramm zur Darstellung von Webseiten (oder anderer Dokumente im WWW)
  • über http geladene html Code wird gerendert und interpretiert
    • Rendering: Prozess der Darstellung der Ausgangsdaten auf Rasterbildschirm
  • graphische Elemente in Bildschirmpixel geparst

Was ist html?

  • Markup Sprache 
    • d.h. kein Protokoll, sondern Webseite werden beschrieben
    • Auszeichnungssprache
    • Ergänzungen im Text, die die Logik und Struktur des Bereichs genauer beschreiben
  • Textdateien: .html/.htm
  • Startseite einer Homepage: index.html
  • erlaubt geräteunabhängige Mediendateien zu erstellen, die über einheitliches Verweissystem (Links) verbunden werden können
    • egal, ob Windows/Mac genutzt wird
    • Verweissystem verlinkt Hypertext Dokumente untereinander

Was sind Grundsätze von html?

  • Trennung von Inhalt und Darstellung
    • Darstellung durch bspw. CSS oder Browser
  • Syntax bestimmt formalen Aufbau einer Sprache ( < ... >)
  • Semantik beschreibt Bedeutungsinhalt 
    • Schlüsselworte
    • bescheiben Inhalt in den Klammern: <Text>

Was ist die Geschichte von html?

  • Generic Markup Language (GML): Vorläufer 1969
    • beinhaltete Möglichkeit, Dokumenttypen zu definieren und verfassen
  • 1978: ISO Standard = Standard Generic Markup Language
  • 1991: Berners-Lee und Caillau entwickeln html basierend auf SGML
  • 1993: erster Browser (Mosaic)
  • 1999: html4 von W3C als Standard empfohlen 
  • 2008: erste Version von html5 

Was sind Elemente bei html?

  • Textteile werden mittels Elementen gekennzeichnet (<...>)
    • Schlüsselworte = Inhalt (Konvention: Kleinbuchstaben)
      <schlüsselwort>
  • sind für Formatierung in Anzeige verantwortlich
    • aber: Formatierung in html Dokument hat keinen Einfluss auf Ausgabe
  • paarweise auftretende Elemente, die Beginn und Ende markieren
    p = Paragraph: <p> Hier steht ein eigener Paragraph. </p>
  • alleinstehende (leere) Elemente, die nur Beginn markieren
    z.B.: Zeilenumbruch (br = Break)
    • Dieser Satz enthält <br> einen Zeilenumbruch

Was sind Attribute?

  • beinhalten zusätzliche Infos für Elemente
  • werden nicht angezeigt
  • im Start Tag spezifiziert
  • als "Attribut-Wert-Paare" angegeben 
    • <tag attribute="value"> text </tag>
  • zuverlässige Attribute = abhängig vom konkreten Tag
    • bsp. Titelattribut für Paragraphen, wird angezeigt, wenn Maus sich über Element bewegt
      <p titel="mein allererster"> Hier steht ein eigener Paragraph. </p>

Wie wird der folgende Html Code in der Ausgabe angezeigt?

<p>
<!-- Kommentar: Dies hier ist sehr interessante Info. -->
Welche Sie
<!-- unbedingt -->
lesen sollten !!!
</p>

Welchen Sie lesen sollten !!!

Wie sieht eine Dokumentenstruktur aus?

  1. DOCTYPE: Kopfzeile (Deklaration des Dokumententyps (html))
    • html Dokumente beginnen mit Kopfzeile
    • html5: <!DOCTYPE html>
  2. html-Hauptteil: Beginn der html-Datei
    1. <head>
    2. <body>

Wie sieht der Hauptteil der Dokumentenstruktur aus?

  • in html Element eingeschlossen
  • Kopfbereich
    • Titelangaben (zwingend)
    • Metainformationen (beschreiben Dokument genauer)
      • Autor, Ändeurngsdatum, Suchbegriffe
      • nicht auf Website dargestellt, aber ggf. von Suchmaschine ausgewertet
    • Bezug zu anderen Dateien, z.B. CSS oder JavaScript
  • Rumpfbereich (Body)
    • Inhalt und Struktur des Dokuments
    • sichtbarer Teil, der im Browser angezeigt wird
    • Standardelemente helfen bei Seitenstrukturierung 
      • Textauszeichnung, Hyperlinks, -media, Seitenstrukturierung

 Was sind logische Auszeichnungen zur Textstrukturierung?

  • logische Auszeichnungen, die die inhaltliche Funktion beschreiben
    1. Überschriften
    2. Listen (ordered/nummeriert vs. unordered/ungeordnet)
    3. Abschnitte (<section>)
    4. thematischer Wechsel mit Trennlinie (<hr>)
    5. Tabellen: teilen Fläche in Zeilen und Spalten
    6. betonter Text
    7. Zitate
    8. vorformatierter Text (dichtengleiche Schrift, Umbruch und Leerzeichen wie in der html Datei)
  • generell gilt:
    Text wird logisch ausgezeichnet, aber die konkrete Formatierung wird separat festgelegt

Was sind physische Auszeichnungen bei der Textstrukturierung?

  • fett oder kursiv
  • mittlerweile veraltet, bei html 5 nur noch logische Auszeichnungen

Was sind Hyperlinks?

  • geräteunabhängige Mediendateien erstellen, die über einheitliches Verweissystem (Links) verbunden werden können
  • html Verweise = unidirektional
  • Definition als Verweis (Link)
    • Element <a> (anchor): markierter Anker im Text
    • Attribut href (hyperreference): Referenz auf Ziel

Wie kann man das Ziel des Hyperlinks beschreiben?

  • absolute Adressierung: vollständige URL
  • relative Adressierung: im Verhältnis zum Speicherort der Quelldaten
    • z.B. bei untergeordneten oder übergeordneten Verzeichnissen
    • untergeordnet: "unterordner/name.html"
    • übergeordnet: "../name.html"

Wie kann man spezielle Stellen im Dokument adressieren (Bookmarks)?

  • Definition des Ankers: <a href = "..."> Übung </a>
    • zu bestimmten Absatz oder Überschrift springen

 

  • Deklaration der Zielstelle
    Zielstelle muss wissen, dass sie eine Zielstelle ist
    • falls Element vorhanden, zu dem man springen will: <p id="stelle">Text</p>
    • falls Element nicht vorhanden, kann es mithilfe von <span> definiert werden: <span id="stelle">Text</span>

Was sind Hypermedia und wie können sie eingebunden werden?

  • Multimedia = mehr als nur Text
    • Bilder, Audio, Videos
  • vor html5: Einbettung über Plugins
    • seit html5: Einbettung in allen gängigen Browsern unterstützt
  • Bilder
    • Element: <img>
    • Attribute: scr (Quelle), width, height (px oder %), alt (textuelle Alternativbeschreibung, falls Bild nicht angezeigt wird)
  • Audio
    • Element: <audio>
    • Attribute: scr (Quelle, unterstützte Formate: MP3, Wav, Ogg), Autoplay)
    • Kontrollelemente: controls (play, pause, ...)
    • Source Elemente: Angabe von alternativen Quellen und Angaben des Dateitypes
  • Video
    • vgl. Audio
    • Zusätzlich: Größe des Videos
    • unterstützte Formate: mp4, WebM, Ogg

Was sind Formulare?

  • erlauben es Anwendern Eingabefelder auszufüllen, Optionsfelder auszuwählen, Schaltflächen zu drücken, Listen aus Einträgen auszuwählen
    • Bsp. Name, Geschlecht angeben
  • <form>
  • jedes untergeordnete <input> Element besteht aus Attributen für Eingabetyp und Namen/Wert

Welche Eingabetypen gibt es?

  1. Text
    • text (Textfeld)
    • textarea (mehrzeiliges Textfeld)
    • password (Textfeld zur Passwortabfrage)
  2. Auswahlboxen
    • checkbox (Mehrfachauswahl möglich)
    • radio (Radioknöpfe für Alternativen)
  3. Schaltknöpfe
    • button (normale Schaltfläche)
    • submit (Schaltfläche zum Absenden)
    • reset (Schaltfläche zum Zurücksetzen des Inhalts)

ab html5: Eingabetypen, die korrekte Eingabe erzwingen und Möglichkeit, eigene Ausdrücke anzugeben

Wie kann man Webseiten strukturieren?

  • Layout
    • verschiedene Bestandteile, unterschiedliche Funktionen
    • Ziel: übergreifende logische Struktur für gesamten Webauftritt
  • Bsp.: 
    • Kopfbereich (header): alle Seiten gleich
    • Navigationsbereich: z.B. Linkliste, für alle Seiten gleich
    • Hauptteil: individuelle Inhalte
    • Fußzeile (footer): Impressum, für alle Seiten gleich
  • Realisierungsmöglichkeiten:
    • Blockelemente <div> id
    • html5 Strukturelemente

Lernen