Wie wird bei HTML das Layout definiert und erzeugt?
HTML erstellt den strukturellen Rahmen (z. B. Container, Überschriften, Text).
CSS greift auf diese HTML-Elemente zu (über Selektoren wie IDs, Klassen oder Tag-Namen) und weist ihnen Layout-Eigenschaften zu.
Trennung von Inhalt und Layout!
HTML liefert die semantische Struktur (wichtig für Barrierefreiheit und Suchmaschinen/Metadaten), während CSS für das visuelle Layout verantwortlich ist.
Das ist besonders bei modernen elektronischen Informationsprodukten (wie Content Delivery Portalen oder HTML5-Hilfen) essenziell.
Was versteht man unter Element-Tags?
Ein Element besteht in der Regel aus einem Start-Tag, dem Inhalt und einem End-Tag:
Start-Tag: Wird in spitze Klammern geschrieben, z. B. <p> (steht für Paragraph/Absatz).
<p>
Inhalt: Der eigentliche Text oder weitere untergeordnete Elemente, die umschlossen werden.
End-Tag: Wiederholt den Namen des Elements mit einem Schrägstrich nach der öffnenden Klammer, z. B. </p>.
</p>
Ein Tag wie <warning> sagt dem System nicht, wie eine Warnung auszusehen hat (rot, fett etc.), sondern dass es sich um einen sicherheitsrelevanten Warnhinweis handelt.
<warning>
Durch diese klaren Tags können die Inhalte automatisiert gefiltert, übersetzt oder über Schnittstellen (wie iiRDS für das Internet of Things) an andere Systeme übergeben werden.
Nennen und erläutern Sie 3 spezifische Anforderungen an elektronische Informationsprodukte.
Erläuterung: Elektronische Informationsprodukte müssen auf völlig unterschiedlichen Endgeräten fehlerfrei und nutzerfreundlich dargestellt werden – sei es auf einem hochauflösenden Desktop-Monitor im Büro, einem Tablet in der Werkstatt, dem Smartphone eines Monteurs oder direkt auf dem Touch-Display einer Maschinensteuerung.
Umsetzung: Durch den Einsatz von Responsive Design passen sich Layout, Schriftgrößen und Navigation automatisch an die jeweilige Bildschirmgröße an, sodass kein mühsames horizontales Scrollen oder Zoomen erforderlich ist.
Erläuterung: Elektronische Dokumente unterliegen immer strengeren gesetzlichen Vorgaben (wie dem Barrierefreiheitsstärkungsgesetz bzw. europäischen Richtlinien). Sie müssen so gestaltet sein, dass auch Menschen mit Einschränkungen (z. B. Sehbehinderungen oder motorischen Einschränkungen) sie problemlos nutzen können.
Umsetzung: Das bedeutet u. a. die Einhaltung von Kontrastvorgaben, die Bereitstellung von Alternativtexten für Grafiken und Animationen, eine saubere semantische HTML-Struktur (für Screenreader) sowie die vollständige Bedienbarkeit über die Tastatur.
Erläuterung: Ein digitaler Nutzer möchte nicht blättern, sondern eine Information sofort finden – idealerweise genau dann, wenn er sie braucht und im exakten Zusammenhang mit seiner aktuellen Handlung.
Umsetzung: Dies erfordert intelligente Suchfunktionen, feingranulare Metadaten (z. B. über Standards wie iiRDS) und Kontextsensitivität. Das bedeutet: Wenn an einer Maschine ein bestimmter Fehlercode auftritt, springt die elektronische Dokumentation über eine direkte Schnittstelle vollautomatisch exakt zu dem Hilfskapitel, das diesen Fehler behebt, anstatt dass der Anwender das gesamte Handbuch durchsuchen muss.
Welche 3 Aspekte eines Dokuments werden bei XML getrennt voneinander behandelt?
Inhalt (Content):
Erläuterung: Der reine Text und die semantischen Informationseinheiten (z. B. Wörter, Sätze, Absätze, Warnhinweise) stehen frei von jeglichen Formatierungsanweisungen im Dokument.
Struktur (Structure / Semantics):
Erläuterung: Die logische Hierarchie und Bedeutung der Inhalte wird mithilfe von Element-Tags (z. B. <chapter>, <section>, <warning>) definiert. Sie legen fest, was ein Inhaltsobjekt semantisch darstellt, nicht aber, wie es aussieht.
<chapter>
<section>
Layout / Darstellung (Presentation / Styling):
Erläuterung: Das visuelle Design, die Formatierung und die Ausgabeformate (z. B. Schriftarten, Farben, Abstände für PDF oder HTML) sind völlig vom XML-Inhalt getrennt. Sie werden erst im Nachhinein über externe Stylesheets (wie CSS oder XSL/XSL-FO) bei der Publikation auf das Dokument angewendet.
Nennen und erläutern Sie 3 Grundregeln, um eine wohlgeformte Technische Dokumentation in XML zu erstellen.
Hier sind die typischen syntaktischen Fehler, die dazu führen, dass ein XML-Dokument seine Wohlgeformtheit verliert und von Parsern als ungültig abgelehnt wird:
Fehlendes oder falsches Wurzelelement
Fehler: Das Dokument enthält entweder gar kein umschließendes Element, mehrere gleichrangige Elemente nebeneinander auf der obersten Ebene (z. B. zwei <chapter> direkt hintereinander ohne gemeinsamen Container) oder das Start- und End-Tag des Root-Elements stimmen im Namen nicht überein.
Falsche Verschachtelung von Elementen (Cross-Nesting)
Fehler: Tags werden nicht nach dem LIFO-Prinzip (Last In, First Out) ineinander geschachtelt, sondern überschneiden sich.
Beispiel (falsch): <p>Das ist <b>wichtig.</p></b> (Das <b>-Tag wird außerhalb des <p>-Tags geschlossen).
<p>Das ist <b>wichtig.</p></b>
<b>
Vergessene End-Tags
Fehler: Ein geöffnetes Start-Tag wird nicht wieder geschlossen (z. B. <title>Einleitung ohne folgendes </title>).
<title>Einleitung
</title>
Nicht geschlossene Anführungszeichen bei Attributen
Fehler: Attributwerte müssen zwingend in einfachen oder doppelten Anführungszeichen stehen. Fehlt eines der Anführungszeichen (z. B. id="kapitel_01), bricht die Syntax ab.
id="kapitel_01
Nicht maskierte Sonderzeichen im Text oder in Attributen
Fehler: Bestimmte Zeichen, die eine feste Bedeutung für die XML-Syntax haben, dürfen nicht einfach so im Text stehen, sondern müssen maskiert (escaped) werden. Das betrifft vor allem das Et-Zeichen (& muss als & geschrieben werden) und das jünger/größer-Zeichen (< muss als < geschrieben werden).
&
&
<
<
Fehlerhafte Groß- und Kleinschreibung bei Tags
Fehler: XML unterscheidet strikt zwischen Groß- und Kleinschreibung (Case-Sensitivity). Wenn ein Start-Tag <Titel> heißt, das dazugehörige End-Tag aber </titel> geschrieben wird, wertet der Parser dies als Fehler, da die Tag-Namen exakt matchen müssen.
<Titel>
</titel>
Vergessener Schrägstrich bei leeren Elementen
Fehler: Elemente ohne Inhalt (wie ein Bildverweis) müssen als selbstschließendes Tag mit einem abschließenden Schrägstrich formatiert sein (z. B. <image href="bild.png"/>). Fehlt der Schrägstrich (<image href="bild.png">), erwartet der Parser ein separates End-Tag.
<image href="bild.png"/>
<image href="bild.png">
Was sind die Unterschiede zwischen HTML und XML? Nennen Sie 3 Unterschiede und erläutern Sie diese.
Obwohl sowohl HTML als auch XML auf Auszeichnungssprachen basieren und spitze Klammern (Tags) verwenden, verfolgen sie völlig unterschiedliche Zwecke.
Hier sind die vier wichtigsten Unterschiede im direkten Vergleich:
HTML (HyperText Markup Language): Wurde entwickelt, um Inhalte im Web anzuzeigen und darzustellen. Der Fokus liegt darauf, wie Daten im Browser für den Menschen lesbar strukturiert werden.
XML (Extensible Markup Language): Wurde entwickelt, um Daten zu speichern, zu beschreiben und zu transportieren. Der Fokus liegt rein auf der Struktur und Bedeutung (Semantik) der Daten, unabhängig von einem bestimmten Ausgabegerät.
HTML: Verwendet einen festen, vordefinierten Satz an Tags, der vom W3C oder WHATWG standardisiert wurde (z. B. <p> für Absatz, <h1> für Überschrift, <img> für Bild). Man kann keine eigenen HTML-Tags erfinden.
<h1>
<img>
XML: Hat keine vordefinierten Tags. Die Tags sind völlig frei definierbar und werden je nach Anwendungsbereich (z. B. in der Technischen Redaktion durch Standards wie DITA oder iiRDS) individuell festgelegt (z. B. <warning>, <step>, <part-number>) über eine DTD (Document Type Definition).
<step>
<part-number>
HTML: Ist sehr fehlertolerant. Wenn ein Browser ein falsch geschlossenes Tag oder einen Syntaxfehler in einer HTML-Seite findet, versucht er, den Fehler zu ignorieren und die Seite trotzdem anzuzeigen.
XML: Ist extrem strikt. Wenn ein XML-Dokument auch nur einen minimalen Syntaxfehler aufweist (z. B. ein nicht geschlossenes Tag oder ein fehlendes Anführungszeichen), bricht der Parser die Verarbeitung sofort ab und verweigert die Annahme des Dokuments (keine Fehlertoleranz).
HTML: Obwohl moderne HTML-Seiten über CSS gestaltet werden, sind Struktur und Darstellung in der Praxis oft enger miteinander verknüpft oder direkt auf die Web-Darstellung ausgelegt.
XML: Trennt Inhalt und Layout kompromisslos. Eine XML-Datei enthält absolut keine Informationen darüber, wie etwas farbig, fett oder groß dargestellt werden soll. Das Layout wird erst im Nachhinein über externe Stylesheets (wie XSL oder CSS) bei der Publikation hinzugefügt.
Wie funktioniert XML? Erläutern Sie die Funktionsweise anhand eines Beispiels.
XML (Extensible Markup Language) funktioniert nach dem Prinzip einer hierarchischen Baumstruktur (Tree Structure). Es speichert und transportiert Daten, indem es ihnen mithilfe frei definierbarer Tags eine eindeutige semantische Bedeutung gibt.
Die Funktionsweise lässt sich in vier Schritte unterteilen:
Strukturierung: Daten werden in logische Einheiten zerlegt und durch selbst gewählte Tags (z. B. <kapitel>, <warnung>) umschlossen.
<kapitel>
<warnung>
Verschachtelung: Die Elemente werden hierarchisch ineinandergestapelt (vom allgemeinen Wurzelelement bis hin zu den detaillierten Textinhalten).
Prüfung (Parsing): Ein XML-Parser liest das Dokument ein, prüft die syntaktische Korrektheit (Wohlgeformtheit) und optional die inhaltliche Regelkonformität (Validität gegen ein Schema).
Ausgabe/Transformation: Die reinen XML-Daten werden über Stylesheets (z. B. XSLT) vollautomatisch in andere Formate (wie HTML für Webportale oder PDF für den Druck) umgewandelt.
Was bedeutet im Kontext von XML "Parsen"? Erläutern Sie kurz und nennen Sie 2 Arten des Parsens.
Wie es funktioniert: Das gesamte XML-Dokument wird komplett eingelesen und im Arbeitsspeicher als vollständige, hierarchische Baumstruktur (DOM-Tree) abgebildet.
Einsatz & Eigenschaften:
Vorteil: Man hat wahlfreien Zugriff auf jedes beliebige Element im Dokument, kann bidirektional navigieren (vor- und zurückspringen) und Inhalte leicht verändern.
Nachteil: Bei sehr großen XML-Dateien (oder massiven Handbüchern) benötigt dieses Verfahren viel Arbeitsspeicher, da das komplette Dokument geladen sein muss.
Wie es funktioniert: Ein ereignisbasiertes (stream-basiertes) Verfahren. Der Parser liest das Dokument sequenziell von vorne nach hinten ein. Er stolpert über Elemente und löst dabei sogenannte Events aus (z. B. „Achtung, Start-Tag X gefunden“ oder „Hier kommt Text“).
Vorteil: Extrem speicherschonend und schnell, da das Dokument nicht im Speicher gehalten wird. Perfekt für riesige Datenmengen.
Nachteil: Kein wahlfreier Zugriff. Der Parser liest den Text einmal durch; man kann währenddessen nicht mal eben „zurückspringen“ oder den Baum im Nachhinein verändern.
Was versteht man unter einer XSL-FO?
XSL (Extensible Stylesheet Language) hat eine ganz andere Aufgabe. Es dient der Transformation und Formatierung von XML-Daten:
XSLT (XSL Transformations): Transformiert XML-Daten in ein anderes Format (z. B. XML zu HTML für eine Online-Hilfe oder XML zu XML für eine Schnittstelle).
XSL-FO (XSL Formatting Objects): Wird genutzt, um XML-Daten für den Druck (z. B. in ein PDF-Dokument) aufzubereiten und zu gestalten.
Prüfungs-Merksatz:
DTD / XML Schema definieren die Grammatik und Struktur (die erlaubten Tags).
XSL (XSLT / XSL-FO) definiert, wie die Daten transformiert oder dargestellt werden.
Was ist der Unterschied zwischen XSL, XSL-FO und CSS?
Das XSLT-Stylesheet: Du schreibst ein XSLT-Skript (das oft fälschlicherweise einfach nur "XSL-Datei" genannt wird).
Die Transformation: Ein XSLT-Prozessor liest deine XML-Datei ein und wendet dieses Skript darauf an.
Das Zwischenformat (XSL-FO): Das Ergebnis dieser Transformation ist in der Regel eine XSL-FO-Datei. Das ist im Grunde wieder eine XML-basierte Datei, die aber nun exakte Anweisungen für Seitenumbrüche, Ränder, Kopfzeilen etc. enthält.
Das Rendering: Diese XSL-FO-Datei wird im letzten Schritt von einer sogenannten FO-Engine (einem Formatierungsprozessor wie Apache FOP) in das endgültige, für den Menschen lesbare PDF-Dokument gerendert.
Wenn du stattdessen eine Online-Hilfe oder ein Web-Portal erzeugst, überspringt man den Schritt mit XSL-FO oft komplett: Dann wandelt XSLT das XML direkt in HTML um, und das Layout wird per CSS gesteuert.
Was sind die Unterschiede zwischen Textverarbeitung (mit z. B. Word oder FrameMaker) und Auszeichnungssprache (wie XML)?
Textverarbeitung (Word / FrameMaker): Arbeitet meist nach dem WYSIWYG-Prinzip (What You See Is What You Get). Der Autor schreibt den Text und formatiert ihn gleichzeitig (z. B. Schriftart auf Arial 12pt stellen, Text fett markieren, Absätze einrücken). Inhalt und optische Gestaltung sind direkt miteinander verzahnt.
XML (Auszeichnungssprache): Trennt Inhalt und Layout strikt. Der Redakteur tippt keine Formatierungsanweisungen ein, sondern zeichnet den Text nur semantisch aus (z. B. <step> für einen Handlungsschritt). Wie dieser Schritt am Ende aussieht (Schrift, Farbe, Einzug), entscheidet erst das Formatierungssystem bei der Ausgabe.
Textverarbeitung: Dokumente in Word sind monolithische Dateien. Zwar kann man Textteile kopieren, aber eine modulare Wiederverwendung von Textbausteinen über hunderte verschiedene Dokumente hinweg ist fehleranfällig und schwer zu steuern.
XML: Ist prädestiniert für Single Source Publishing und den Einsatz in Redaktionssystemen (CCMS). Da Inhalte modular als kleine, unabhängige XML-Bausteine (Topics) vorliegen, können sie vollautomatisch für völlig verschiedene Medien (PDF, Online-Hilfe, App, Ersatzteilkatalog) und Zielgruppen zusammengestellt werden.
Textverarbeitung: Word-Dateien sind für den direkten menschlichen Konsum und Druck ausgelegt. Eine automatisierte Weiterverarbeitung der reinen Daten für maschinelle Schnittstellen (wie iiRDS für das Internet of Things) ist extrem schwierig.
XML: Ist maschinenlesbar und standardisiert. Parser und Programme können XML-Strukturen blitzschnell durchsuchen, filtern, transformieren oder über APIs an andere Systeme (wie ERP- oder Ersatzteilkataloge) übergeben.
Textverarbeitung: Jeder Nutzer kann in Word theoretisch formatieren, wie er möchte (der eine macht Überschriften fett, der andere unterstrichen). Das führt oft zu einem inkonsistenten Layout im Unternehmen, es sei denn, man erzwingt es streng über Formatvorlagen.
XML: Über eine DTD oder ein XML-Schema (XSD) wird die Struktur zwingend erzwungen. Ein Redakteur kann gar kein ungültiges Element an einer falschen Stelle einfügen; das System blockiert dies sofort. Das garantiert absolute Corporate-Compliance und Normgerechtigkeit (z. B. für Sicherheitsanweisungen nach ANSI/ISO).
Welche Medienstandards für auditive Inhalte kennen Sie? Nennen und erläutern Sie 2 Standards.
Was es ist: Ein internationaler Standard für navigierbare, barrierefreie Multimedia- und Audiodokumente (Digital Talking Books), der vom DAISY-Konsortium entwickelt wurde.
Erläuterung & Funktion: DAISY geht weit über ein klassisches, lineares Hörbuch hinaus. Es verbindet gesprochene Sprache (Audio) mit einer strukturierten XML- oder Textbasis. Dadurch wird es dem Anwender ermöglicht, sich in einem auditiven Dokument wie in einem gedruckten Buch zu bewegen: Man kann gezielt Kapitel anspringen, Seiten- oder Abschnittszahlen wählen, Fußnoten überspringen oder Lesezeichen setzen. Zudem können Text, Sprache und Grafiken miteinander synchronisiert werden.
Einsatz in der Tech-Doc: Ein essenzieller Standard für die barrierefreie Technische Dokumentation (z. B. für blinde oder sehbehinderte Menschen), um komplexe Betriebsanleitungen oder Normen in vollwertige, steuerbare Hörfassungen zu übertragen.
Was es ist: Universelle, standardisierte Codecs und Containerformate für die digitale Audiokompression und -übertragung (wobei AAC der modernere, effizientere Standard im Vergleich zu MP3 ist).
Erläuterung & Funktion: Diese Standards definieren mathematische Verfahren, wie Audiosignale digitalisiert und stark komprimiert werden können, ohne dass ein drastischer Qualitätsverlust für das menschliche Ohr entsteht. Sie filtern Frequenzen heraus, die der Mensch ohnehin kaum wahrnimmt, und sorgen für kleine Dateigrößen bei hoher Kompatibilität.
Einsatz in der Tech-Doc: Immer dann relevant, wenn akustische Elemente in moderne Dokumentationen eingebunden werden – etwa Sprach-Tutorials, Audio-Warnsignale, Podcasts für den Service-Außendienst oder multimediale Hilfeseiten (HTML5), die auf verschiedensten Geräten (Smartphones, Tablets, Industrie-Tablets) fehlerfrei abgespielt werden müssen.
Prüfungs-Hinweis:
Während DAISY den strukturellen und barrierefreien Rahmen für ganze auditive Dokumente (Bücher, Anleitungen) vorgibt, regeln AAC oder MP3 die rein technische, datenkomprimierende Ebene des Audio-Formats.
Nennen und erläutern Sie 2 Medienstandards für interaktive Inhalte.
Was es ist: HTML5 ist die aktuelle Version des W3C-Standards für die Strukturierung und Darstellung von Inhalten im Web. Zusammen mit JavaScript (für Logik und Steuerung) und WebGL (für hardwarebeschleunigte 3D-Grafiken im Browser) bildet es das Fundament für moderne, interaktive Online-Hilfen und Web-Portale.
Erläuterung & Funktion: HTML5 ersetzt veraltete Technologien (wie Adobe Flash) vollständig. Es ermöglicht die nahtlose Integration von interaktiven Elementen wie anklickbaren Explosionszeichnungen (Hotspots), zoom- und drehbaren Grafiken, eingebetteten Videos, Audio-Sequenzen und dynamischen Formularen direkt im Browser – ganz ohne zusätzliche Plugins.
Einsatz in der Tech-Doc: Wird für moderne, browserbasierte Bedienungsanleitungen, Content Delivery Portale (CDP) und interaktive Online-Dokumentationen genutzt, die sich flexibel an verschiedene Bildschirmgrößen (Responsive Design) anpassen.
Was es ist: Ein ISO-Standardisierter Standard, der es erlaubt, interaktive 3D-Modelle direkt in ein herkömmliches PDF-Dokument einzubetten.
Erläuterung & Funktion: Anders als starre 2D-Bilder enthält ein 3D-PDF vektorbasierte 3D-Geometriedaten (oft im PRC- oder U3D-Format). Der Anwender kann das Bauteil direkt im PDF mit der Maus frei im Raum drehen, heranzoomen, Schnitte durch die Baugruppe legen, Transparenzen einschalten oder Bauteile über eine integrierte Ersatzteilliste (Strukturbaum) gezielt ein- und ausblenden.
Einsatz in der Tech-Doc: Ideal für komplexe Montageanleitungen, Ersatzteilkataloge oder Wartungshandbücher im Maschinen- und Anlagenbau, bei denen das räumliche Verständnis des Produkts entscheidend ist und der Kunde dennoch ein universelles, offline verfügbares PDF-Dokument wünscht.
Während HTML5 die erste Wahl für webbasierte, plattformunabhängige Interaktivität im Browser ist, schlägt 3D PDF die Brücke, um interaktive 3D-Inhalte in das klassische, druck- und archivierungsfähige PDF-Format zu integrieren.
Zuletzt geändertvor 9 Tagen