Probeklausur Besprechung

Ähnliche Dokumente
Probeklausur. Grundlagen der Medieninformatik. Wintersemester 2018/19

Inhaltsverzeichnis. Florian Bauer CSS Seite 2 von 10

4. Briefing zur Übung IT-Systeme

4. Briefing zur Übung IT-Systeme

1 Definition der Selektoren Einbinden der CSS 3 Möglichkeiten Farbangaben Schriftformatierung Abstände...

CSS. Cascading Style Sheets

Tutorial zum erstellen einer Webseite

HTML & CSS. GIMP > Bild > Bild skalieren Unter diesem Menüpunkt kannst du die Bildgröße verändern. Beachte die Bildproportionen

Allgemeine Technologien II Sommersemester Mai 2011 CSS

Eine Schnelleinführung in CSS

CSS - Cascading Stylesheets

Selektoren in CSS. HTML/CSS 21. November 2013 E1. 1. Beispiel: Kinder und Enkel

Aufbau einer HTML Seite:

Übung: Bootstrap - Navbar

Tabellenfreies Layout in HTML

Computergrundlagen HTML Hypertext Markup Language

Klausur Digitale Medien

ANWENDUNGSSOFTWARE CSS

Aufbau eines Klassen-Selektors: selektor.klasse { css-eigenschaft1:wert1; css-eigenschaft2:wert2;...}

Seite 1 von 10 <!DOCTYPE HTML> <html> <head>

Probeklausur Digitale Medien

CSS in HTML-Elementen. Syntax und Grammatik von CSS

Web-basierte Anwendungssysteme XHTML- CSS

Ändern der Schriftgröße für den Monitorexport

Grundlagen-Beispiel CSS

Mitschrift HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.

3. Briefing zur Übung IT-Systeme

Übung zur Vorlesung. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid, Hanna Schneider

Nachbau der Website 1.)Hintergrundbild einfügen eigene CSS-Datei

FUNKTIONSBESCHREIBUNG. IFRAME EINBETTUNG VERSION: ab

1. Einstieg 2. Selektoren 3. Schriften 4. Strukturen 5. Zwischenräume, Abstände 6. Bilder 7. Farben 8. Beispiel

2. Digitale Codierung und Übertragung

Digitale Medien. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid. Übung zur Vorlesung

Datenkompression. 1 Allgemeines. 2 Verlustlose Kompression. Holger Rauhut

ALLGEMEINES WOMIT KANN ICH WEBSITES ERSTELLEN?

Übung Klebezettel. background, font, color, transform, width, height, margin, cursor, border. Web. Fach: BW1. Klasse: (Donnerstag) Datum:

Digitale Medien. Übung

Webdesign-Multimedia HTML und CSS

Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) <!DOCTYPE HTML> <html> <head>

Diese Site gibt es so nicht mehr, daher muss man in der Geschichte wühlen :

CSS Cascading Stylesheets

Gestaltung von Head Bereich und Impressum bei der Partner-Website

Allgemeine Technologien II Wintersemester 2011 / November 2011 CSS

E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 3: Webdesign mit CSS Stand: Übung WS 2015/2016. Benedikt Schumm M.Sc.

Inhalt: 1)Das Box-Modell

HTML & CSS. Beispiele aus der Praxis

12. Jgst. 3. Kursarbeit Datum: Fach: Informationsverarbeitung (Leistungskurs) & )!!*+,!- -.!-

Digitale Medien. Übung zur Vorlesung. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid

Digitale Medien. Übung

Wert. { color: blue; }

CSS - Cascading Style Sheets

Übung: Projekt Europa mit Bootstrap

Grundlagen zu HTML. Vortrag im Rahmen der BTK-Vorlesung von Herrn Professor Kärger

Inhalt. 1 Mit CSS beginnen 1. 2 Textauszeichnungen und andere Grundlagen 13

Klausur Digitale Medien

Webdesign im Tourismus

Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) <!doctype html> <html lang="de"> <head>

CSS Cascading Style Sheets

[Guide] CSS (+ CSS 3!) Inhaltsverzeichnis. Vorwort

HTML und CSS. Eine kurze Einführung

2. Digitale Codierung und Übertragung

JavaScript II. Hochschule Karlsruhe Technik & Wirtschaft Internet-Technologien T3B250 SS2014 Prof. Dipl.-Ing. Martin Schober

HTML5 & SCC3. PC-Treff-BB VHS Aidlingen. Lothar R. Krukowski. Ein Überblick

HTML. Hypertext Markup Language

Übung zur Vorlesung. Digitale Medien. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid, Hanna Schneider

Übung: Projekt Europa mit Bootstrap

1 Ein erster Überblick 3

Die Programmiersprache des Webs. HTML HyperText Markup Language Hypertext - Auszeichnungssprache

Unterrichtsmaterialien in digitaler und in gedruckter Form. Auszug aus: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung von Internetseiten

Hintergrundbilder. background-image. Werte: URL (Standort des Bildes) none inherit. Standard: none. Gilt für: alle Elemente.

CSS-Boxen. Hans Gell Schulungen & Dienstleistungen Übersicht der Schulungsinhalte

Scripting für Kommunikationswissenschaftler Gruppe C

Webdesign-Multimedia HTML und CSS

Übung: Überschriften per CSS gestalten

HTML. HyperText Markup Language. von Nico Merzbach

Digitale Medien. Übung

Umsetzen einer skalierbaren horizontalen Navigation:

Der CSS-Problemlöser

Textverarbeitung Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung

Transkript:

WiSe 2018/19

Aufgabe 1: Huffman (10 Punkte) 1 Geben Sie für die Nachricht schnelldurchlauf den Zeichenvorrat mit der Wahrscheinlichkeitsverteilung an. 2 Zeichnen Sie den resultierenden Codebaum und beachten Sie dabei folgende Regeln: 3 Berechnen Sie die durchschnittliche Wortlänge und Redundanz. Geben Sie dabei alle Rechenschritte an.

Huffman Lösung 16 16 7 16 9 16 l 4 16 4 16 5 16 c 2 16 u 2 16 h 3 16 a f s n r 3 16 e d

Wortlänge: Entropie: Redundanz: L A = p a c(a) = 3, 375 a A H A = p a log 1 = 3, 3278195 a A p a R A = L A H A

Aufgabe 2: LZW Kodierung (10 Punkte) 1 Kodieren Sie fliegen fliegen hinter fliegen mittels der LZW-Kodierung.

Lesen(k) Codetabelle schreiben (p & k ) Ausgabe Puffer füllen (p) f l i e g e n f l i e g e n

Lesen(k) Codetabelle schreiben (p & k ) Ausgabe Puffer füllen (p) h i n t e r f l i e g e n EOF

LZW Lösung Lesen(k) Codetabelle schreiben (p & <k>) Ausgabe Puffer füllen (p) f f l fl, 256 f l i li, 257 l i e ie, 258 i e g eg, 259 e g e ge, 260 g e n en, 261 e n n, 262 n f f, 263 f l fl i fli, 264 fl i e ie g ieg, 265 ie g e ie n gen, 266 ge n

Lesen(k) Codetabelle schreiben (p & <k>) Ausgabe Puffer füllen (p) n h n h, 267 n h i hi, 268 h i n in, 269 i n t nt, 270 n t e te, 271 t e r er, 272 e r r h, 273 r f f l fl, 274 f l i li e lie, 275 li e g eg e ege, 276 eg e n en EOF en EOF

Aufgabe 3: Arithmetische Kodierung (10 Punkte) 1 Vervollständigen Sie folgende Tabelle für das Wort heuhaufen : Zeichenindex i 1 = h 2 = e 3 = u 4 = a 5 = f 6 = n 7 =! Häufigkeit p i Linker Rand L i Rechter Rand R i 2 Kodieren Sie mit der vorangegangenen Tabelle das Wort heuhaufen! und geben Sie das Intervall sowie ein Ergebnis an. Stellen Sie die Zwischenergebnisse in einer Tabelle mit den Spalten Zeichen, L, R und B, ähnlich zu der in der Vorlesung dargestellten Tabelle, dar.

Arithmetisch Kodierung Lösung Initiale Tabelle: Zeichenindex i 1 = h 2 = e 3 = u 4 = a 5 = f 6 = n 7 =! Häufigkeit p i 0.2 0.2 0.2 0.1 0.1 0.1 0.1 Linker Rand L i 0.0 0.2 0.4 0.6 0.7 0.8 0.9 Rechter Rand R i 0.2 0.4 0.6 0.7 0.8 0.9 1.0

Wiederhole a nextchar() B R L L L + B L a R L + B R a

Im Folgenden ist zu beachten, dass B für die jeweils nächste Zeile gilt. Zeichen L R B h 0.0 0.2 0.2 e 0.04 0.08 0.04 u 0.056 0.064 0.008 h 0.056 0.0576 0.0016 a 0.05696 0.05712 0.00016 u 0.057024 0.057056 0.000032 f 0.0570464 0.0570496 0.0000032 e 0.05704704 0.05704768 0.00000064 n 0.057047552 0.057047616 0.000000064! 0.0570476096 0.057047616 0.0000000064

Aufgabe 4: Arithmetische Dekodierung (5 Punkte) 1 Dekodieren Sie mit der selben Tabelle (obige Aufgabe) die Darstellung 0.76165987 zu einem Wort der Länge 5 und geben Sie das Lösungswort an. Dokumentieren Sie Ihre Zwischenergebnisse und Ihren Lösungsweg. Zeichenindex i 1 = h 2 = e 3 = u 4 = a 5 = f 6 = n 7 =! Häufigkeit p i 0.2 0.2 0.2 0.1 0.1 0.1 0.1 Linker Rand L i 0.0 0.2 0.4 0.6 0.7 0.8 0.9 Rechter Rand R i 0.2 0.4 0.6 0.7 0.8 0.9 1.0

Arithmetische Dekodierung Lösung Man muss auf die Idee kommen, um das Intervall zwischen 0.76 und 0.762 auf n zu kommen indem man sich denkt, 16/2 = 8 und 0.8 liegt im Intervall von n. Das Lösungswort lautet: fahne Zeichen L R B f 0.7 0.8 0.1 a 0.76 0.77 0.01 h 0.76 0.762 0.002 n 0.7616 0.7618 0.0002 e 0.76164 0.76168 0.00004

Aufgabe 5: HTML und CSS (15 Punkte) 1 Füllen Sie die Lücken in den HTML und CSS Dateien aus, so dass die Webseite aussieht wie auf dem Screenshot. 2 In der HTML-Datei haben sich zwei Fehler (bezüglich XHTML-Standard) versteckt. Benennen Sie diese.

Es ist nicht erlaubt, bestehenden Code zu streichen oder zu ändern! Es ist nicht erlaubt, neue Klassen (ids, tags) oder Blöcke in der CSS Datei hinzuzufügen. Die CSS Datei heißt style klausur.css und befindet sich im selben Ordner. Es ist in der HTML und CSS Datei nur erlaubt, Code an den unterstrichenen Stellen einzufügen. Es müssen aber nicht alle Stellen genutzt werden. Für volle Punktzahl müssen alle vorgegebenen Klassen der CSS Datei genutzt werden. Das Bild befindet sich im selben Ordner, heißt eule.jpg und hat eine Größe von 400 200. Die generelle Schriftgröße beträgt 14pt. Der schwarze Rahmen um die Webseite gehört zu ihr und hat einen Radius (an den Ecken) von 10px.

HTML-Code <!DOCTYPE html> <html> <meta charset=ütf-8 > <link rel= stylesheet type= text/css href= _ ></link> <body> <div class= box > <h1> <span class= _ >Probeklausuraufgabe HTML</span> </h1> In dieser Aufgabe lernen Sie wichtige Features von <span class= _ >HTML</span> und <span class= css >CSS</span>. </br> </br> <div class= blue-box > _ </br> </br> <div class= _ > <img src= _ ></img> </div> </br> <footer _> Viel Glück beim Rest der Probeklausur. </footer> </div> </body> </html>

CSS-Code Teil 1.html { body {.box {.css {.img-eule { img { /* Es folgt noch mehr */

CSS-Code Teil 2.blue-box { color: white; padding: 40px; font-size: 20px; h1 span { /* Innenabstand ist 7px */.bold { /* bold = fett */.italic { /* italic = kursiv */.underline { text-decoration: underline; footer { /* Der footer hat eine Schriftgröße von 9px */

HTML Lösung <!DOCTYPE html> <html> <meta charset=ütf-8 > <link rel= stylesheet type= text/css href= style_klausur.css ></link> <body> <div class= box > <h1> <span class= underline >Probeklausuraufgabe HTML</span> </h1> In dieser Aufgabe lernen Sie wichtige Features von <span class= html >HTML</span> und <span class= css >CSS</span>. </br> </br> <div class= blue-box > Frohe Weihnachten </br> </br> <div class= img-eule" alt="eule"> <img src= eule.jpg ></img> </div> </br> </div> <footer _> Viel Glück beim Rest der Probeklausur. </footer> </div> </body> </html>

CSS Lösung 1.html { color: red; body { font-size: 14pt;.box { border: solid; border-radius: 10px; border-color: black; padding 20px;.css { color: green;.img-eule { text-align: center; img { width: 400px; height: 200px; /* Es folgt noch mehr */

CSS Lösung Teil 2.blue-box { background-color: blue; border-radius: 15px; color: white; padding: 40px; font-size: 20px; h1 span { /* Innenabstand ist 7px */ background-color: red; padding: 7px; color: white; font-weight: bold;.bold { /* bold = fett */ font-weight: bold;.italic { /* italic = kursiv */ font-style: italic;.underline { text-decoration: underline; footer { /* Der footer hat eine Schriftgröße von 9px */ font-size: 9pt; text-align: right;

Aufgabe 6: MPEG-Layer III Encoding (5 Punkte) 1 Beschriften (Nummerieren) Sie die Kästchen in folgender Abbildung mit den angegebenen Elementen eines MPEG-Layer-III-Encoders. (Hinweis: Die Liste enthält einen Eintrag zu viel, dieser ist nicht im Encoder enthalten.)

Elemente eines MPEG-Layer-III-Encoders: Komprimierte Daten MDCT Filterbank DFT FFT 1024 Bitstrom-Generator PCM Audio Huffman-Kodierung Maskierung Quantisierer

MPEG-Layer III Encoding Lösung Erste Zeile: PCM Audio, Filterbank, MDCT, Quantisierer, Huffman-Kodierung Zweite Zeile: FFT 1024, Maskierung, Bitstrom-Generator Dritte Zeile: Komprimierte Daten

Aufgabe 7: Fourier-Transformation (10 Punkte) 1 Führen Sie den reellen Teil der Fourier-Transformation für die Schwingung f (t) = 7 cos(2πt) durch. F (ω) = f (t) cos(2πωt)dt Dabei soll ω = 1 und t [0, 2π] sein. Hinweis: cos 2 (x) = 1 2 (1 + cos(2x))

Fourier-Transformation Lösung F (1) = 0 2π F (1) = 7 7 cos(2tπ) cos(2πt)dt 0 2π cos 2 (2tπ)dt F (1) = 7 2π 2 (1 + cos(4πt))dt 0 F (1) = 7 2 [x + 1 4π sin(4πt)]2π 0 F (1) = 7(π + sin(8π2 ) ) 8π

Aufgabe 8: Bilder und Lauflängenkodierung (15 Punkte) Gegeben sei folgender (verkleinerter) QR-Code: Der Code wird als Bitmap (schwarz = 0, weiß = 1) der Größe 8 8 gespeichert.

Algorithm 1 Scale8x8Image(img, scaledimage) 1: for x=0 to 3 do 2: for y=0 to 3 do 3: sum img(2x, 2y) + img(2x + 1, 2y) + img(2x, 2y + 1) + img(2x + 1, 2y + 1) 4: if sum 2 then 5: scaledimage(x, y) 1 6: end if 7: end for 8: end for 9: return scaledimage

Hinweise: In img steht das aktuelle Bild und scaledimage (4 4) soll beschrieben werden. x gibt die horizontale und y die vertikale Position an. Der Pixel (0, 0) ist dabei der Pixel oben links. img(x, y) gibt in diesem Beispiel 0 für schwarz aus und 1 für weiß. Z.B. img(5, 2) = 1 (weiß)

1 Kodieren Sie das Bild mit Hilfe der Lauflängenkodierung auf zwei Arten. Indem Sie zeilenweise (von links oben) durch das Bild gehen. Indem Sie spaltenweise (von links oben) durch das Bild gehen. Welche Vorgehensweise verbraucht weniger Speicher? Begründen Sie Ihre Antwort. 2 Zeichnen Sie den skalierten QR-Code in folgendes Raster... 3 Wie müsste der Pseudo-Code verändert werden, so dass ein Bild der Auflösung 99 99 nach 33 33 skaliert wird?

Bilder und Lauflängenkodierung Lösung Lauflängenkodierung #09 #16 #02 1 #03 #12 #02 1 0 #14 #02 1 0 1 #02 1 #02 1 0 1 #02 1 #02 #16 #09 #09 #16 #02 1 #04 1 #02 1 0 #14 #02 1 0 1 #02 1 #02 #13 #02 1 #02 #16 #09 zeilenweise 53 > spaltenweise 51 Zeichen

Skaliertes Bild:

Veränderter Pseudo-Code: Algorithm 2 Scale99x99Image(img, scaledimage) 1: for x=0 to 32 do 2: for y=0 to 32 do 3: sum img(3x, 3y) + img(3x + 1, 3y) + img(3x + 2, 3y) + img(3x, 3y + 1) + img(3x + 1, 3y + 1) + img(3x + 2, 3y + 1) + img(3x, 3y + 2) + img(3x + 1, 3y + 2) + img(3x + 2, 3y + 2) 4: if sum 4.5 then 5: scaledimage(x, y) 1 6: end if 7: end for 8: end for 9: return scaledimage