1. Seminar Multimediale Werkzeuge Sommersemester 2011 file12.04.2011 2 Organisatorisches • Terminplanung? • Übungs- & Hausaufgaben… • Gehen zu 30 % in die Endnote ein •

12.04.2011 www.tu-ilmenau.dePage 1

1. Seminar Multimediale Werkzeuge Sommersemester 2011

Marco Niehaus [email protected]


Organisatorisches

• Terminplanung?

• Übungs- & Hausaufgaben…• Gehen zu 30 % in die Endnote ein

• Sollen jeweils zu Beginn des folgenden Seminars abgegeben

werden

• Die Klausur muss bestanden werden; alleine die Hausaufgaben

reichen zum Bestehen nicht aus!

• Die durch die Hausaufgaben erbrachten Leistungen können bis

max. ein Semester nach dieser Lehrveranstaltung angerechnet

werden (sind also auch im WS11/12 gültig). Danach verfallen die

Leistungen!

• Bewertung: ☺ � �


LATEX

• Setzen Sie einen Wikipedia Artikel in Form eineswissenschaftlichen Papers in LATEX um

• MiKTeX in Kombination mit TeXnicCenter

• Vorschlag: Diskrete Kosinustransformationhttp://de.wikipedia.org/wiki/Diskrete_Kosinustransformation

• Einleitung

• Allgemeines

• Mehrdimensionale DCT


• Dokumentenklasse• \documentclass[10pt]{article}

• \documentclass[twocolumn]{article}

• Deutsche Sprachunterstützung:• \usepackage[latin1]{inputenc}

• \usepackage[T1]{fontenc}

• \usepackage{amsmath}

• \usepackage{amssymb}

• ( \usepackage[ngerman]{babel} ->Paket nicht installiert )

LATEX


• Dokumentkopf• \title{}

• \author{ }

• \date{}

LATEX


LATEX

• Hauptdokument:• \begin{document} … \end{document}

• \maketitle

• ( \tableofcontents )

• Dokument-Strukturierung• Zusammenfassung: \begin{abstract}… \end{abstract}

• Kapitel: \section{}

• Unterkapitel: \subsection{}

• Absatz: \paragraph{}


• Aufzählungen:• \begin{itemize} …

• \item

• \item

• \end{itemize}

• Referenzen• \cite{}

• \bibliographystyle{abbrv}

• \begin{thebibliography} … \end{thebibliography}

• \bibitem{}

LATEX


LATEX

• Formeln mit Latex:

• Formeln im Fließtext: \( .... \)

• Formeln zentriert in eigener Zeile: \[ ... \]

• Brüche: \frac{2+dc}{9} �

• Indices: a_1 � a1

• Hochstellen: a^2 � a2

• Summen: \sum \limits_{Anfangswert}^{Endwert}

• Integrale: \int_0^3 x^2 dx = 9 �

• Weitere Quellen:

• Mathematischer Formelsatz in LATEX:

http://www2.informatik.hu-berlin.de/~piefel/LaTeX-PS/V16-mathe.pdf

• Schlager, P.; Thibud, M.: Wissenschaftlich mit LATEX arbeiten. Pearson Studium 2005

• http://www.latex-project.org


LATEX


� Tags

• Abgeschlossene Tags<HTML-Tag>...Gültigkeitsbereich...</HTML-Tag>

• Standalone Tags<HTML-Tag>...Gültigkeitsbereich...

� Tag-Attribute

• Allein stehende Attribute<HTML-Tag Attribut >... z.B. <hr noshade>

• Wertzuweisungen

HTML - Sprachelemente


� Teile einer HTML Datei:

• Dokumenttyp-Deklaration

• Angabe zur verwendeten HTML-Version

• Header <head>

• Titel: Titelzeile des Browsers, Lesezeichen

• Meta: Informationen über den Inhalt der Seite; wird von vielen

Suchmaschinen ausgewertet

• Body <body>

• eigentlicher Inhalt; Text mit Überschriften, Verweisen,

Grafikreferenzen usw.

Aufbau einer HTML-Datei [1]



HT

ML

-Ber

eich

Hea

der

Bo

dy

Do

ctyp

e� Beispiel:

Aufbau einer HTML-Datei [2]


� Zeilenumbruch• <br>

� Textabsatz• <p> ... </p>

� Überschiften• <h1>…</h1> Überschrift (1-6)

� Allgemeines Blockelement• <div> ... </div> neue Zeile

• <span> … </span> ohne neue Zeile

� Zentrierung• <center>…</center> veraltet

� Trennlinien• <hr> über ganze Breite

• <hr width = "60%"> relative Angabe

• <hr width = "260" size = "4"> absolute Angabe

HTML-Tags | Textfluss


� Physische Textauszeichnungen (Beispiele):

• <u>…</u> Unterstrichen

• <i>…</i> Kursiv

• <b>…</b> Fett

� Logische Textauszeichnungen (Beispiele):

• Der Browser entscheidet, wie z.B. <strong> dargestellt wird (muss

nicht unbedingt fett sein!)

• <strong>…</strong> Text stark betont

• <em>…</em> Text betont

• <cite>…</cite> Zitat

• <code>…</code> Quelltext

HTML-Tags | Textauszeichnungen


� Nummerierte Listen

<ol>

<li> Listeneintrag 1 </li>


</ol>

• alphabetisch

<ol type = "A"> Listeneinträge mit A., B., C.

� Aufzählungslisten<ul>



</ul>

HTML-Tags | Listen


� img-Tag

� Attribute

• alt=“…“ textliche Beschreibung

• width,height=“…“ Breite und Höhe in Pixel oder %

• border=“…“ Rand um die Grafik

� Grafik als Seitenhintergrund

HTML-Tags | Grafiken einbinden


� a-Tag (a = anchor)

� Verweise zu anderen HTML–Dateien

� Statt eines Verweistextes kann auch eine Grafik angegeben

werden (interessant für Buttons)

HTML-Tags | Verweise (Links) [1]


� Email-Verweise mit mailto

HTML-Tags | Verweise (Links) [2]


� Umlaute und Sonderzeichen…

• müssen in einer speziellen Form angegeben werden

ä ä

Ä Ä

“ " usw.

� Tooltips

• mit dem title-Attribut lassen sich für nahezu alle

Elemente eines HTML-Dokuments bei Berührung mit der

Maus kleine Hinweise einblenden

HTML | Besonderheiten


Hausaufgabe für das nächste Seminar

� Erstellen Sie mittels grundlegender HTML Tags ein

Dokument mit folgenden Inhalten:

� Das von Ihnen erstellte .pdf Dokument (LaTex)

� Eine eingebundene Grafik

� Links zu 2 Webseiten Ihrer Wahl

� Ein „Kontakt“ Button, bei dessen Betätigung das

Standard-Mailprogramm mit einer neuen Nachricht

geöffnet wird und bereits der Empfänger und ein

Betreff eingetragen sind.

�� Nutzen Sie: http://de.selfhtml.org/






Documents

1. Seminar Multimediale Werkzeuge Sommersemester 2011 file12.04.2011 2 Organisatorisches • Terminplanung? • Übungs- & Hausaufgaben… • Gehen zu 30 % in die Endnote ein •