Bachelor_Thesis.css
| "Print-to-Web" - Neue Möglichkeiten der Datenkonvertierung
|
XSLCSS/
„Print-to-Web“
Neue Möglichkeiten der
Datenkonvertierung
Ich möchte mich an dieser Stelle bei den Personen bedanken, die mir bei der Erarbeitung dieser Abschlussarbeit geholfen haben. Mein herzlicher Dank gilt Dipl.-Ing. (FH) Marko Hedler für die Betreuung dieser Ausarbeitung und für seine Vorlesungen, die mein Interesse für das
Thema XML/XSLT geweckt und schließlich zu dieser Abschlussarbeit geführt haben. Weiterhin möchte ich mich bei meinem Betreuer Christian Spieker und dem gesamten Team der
One Advertising AG für die Unterstützung dieser Ausarbeitung und die Nutzung von Firmenressourcen herzlich bedanken.
Außerdem möchte ich mich bei Andreas Imhof, Entwickler von BatchXSLT, für seinen E-Mail-Support und das kostenlose Bereitstellen seiner Software bedanken, sowie bei Robert Lemke, Kernentwickler von Projektleiter von TYPO3 Version 5.0, der mir in den Vorbereitungen dieser Ausarbeitung bei allen Fragen rund um das Content Management System zur Seite stand.Desweiteren bedanke ich mich bei der Macwelt-Redaktion, besonders bei Frau Buschbeck-Idlachemi für die Übermittlung der Daten der aktuellen Macwelt-Ausgabe und bei der Firma Meinders & Elstermann GmbH & Co. KG für die freundliche Unterstützung beim Druck und bei der Weiterverarbeitung dieser Ausarbeitung. Vielen Dank!
„Print-to-Web“ – Neue Möglichkeiten der Datenkonvertierung
Bachelor Thesis zur Erlangung des akademischen Grades
eines „Bachelor of Engineering“ für Druck- und Medientechnik
am Fachbereich I der Hochschule der Medien, Stuttgart.
Vorgelegt von: Ingo Fängmer, Matrikel-Nummer 15804
Erstprüfer: Marko Hedler
Zweitprüfer: Christian Spieker
Eingereicht: 31. 12. 2007
Ich versichere, dass ich die vorliegende Arbeit selbstständig angefertigt und mich fremder Hilfe nicht bedient habe.
Alle Stellen, die wörtlich oder sinngemäß veröffentlichten oder unveröffentlichten Quellen entnommen sind, habe ich als solche kenntlich gemacht.
Ort, Datum Unterschrift
„Print-to-Web“ – Neue Möglichkeiten der Datenkonvertierung
Die mehrfache Verwertung von Inhalten wird im Medienbereich immer wichtiger, die Begriffe XML und medienneutrale Datenhaltung spielen eine immer größer werdende Rolle. Das Ziel dieser Entwicklung ist, mit einem gemeinsamen Datenbestand verschiedene Ausgabeformate möglichst automatisch generieren zu lassen.
Ein weiterer wichtiger Prozess ist die Verknüpfung von Daten und Inhalten zwischen Online- und Print-Medien. In letzter Zeit wurde das Thema „Web-to-Print“ immer stärker fokussiert und es sind verschiedene Technologien und praktische Anwendungsmöglichkeiten entwickelt worden. „Web-to-Print“ ist ein Verfahren der Online-Erzeugung von Druckvorlagen via Internet mithilfe serverbasierter Layout-Technologie, die Server-Templates und Client-Eingaben miteinander kombiniert.
Was ist jedoch mit dem entgegengesetzten Weg? Der weniger kommunizierte Begriff „Print-to-Web“ beschreibt den Weg einer Überführung von Informationen aus Layout-Dokumenten in den Online-Bestand. In dieser Ausarbeitung werden verschiedene Möglichkeiten untersucht, um bereits proprietär gespeicherte Inhalte einzelner Layout-Programme möglichst komfortabel in ein internetfähiges Online-Format zu übertragen.
Die Notwendigkeit der Verarbeitung bereits gespeicherter Inhalte ergibt sich dadurch, dass sich entweder in der Praxis der Mehraufwand der medienneutralen Datenhaltung wirtschaftlich nicht für jedes Printprodukt lohnt, oder aber andererseits es bereits fertige Layout-Daten existieren, die in ein Online-Format umgewandelt werden sollen.
Neben technischen Hintergründen der Konvertierungsmethoden wird desweiteren auch auf das Workflow-Optimierungspotenzial einzelner Möglichkeiten eingegangen. Insbesondere werden die beiden Werkzeuge Adobe InDesign, als Print-Komponente, und das Content Management System TYPO3, als Online-Komponente, näher betrachtet.
Schließlich wird ein Vergleich der Konvertierungsmethoden unter verschiedenen Gesichtspunkten durchgeführt und bewertet.
Schlagworte:
Print-to-Web, HTML-Export, Adobe InDesign, TYPO3, XML, XSL, INX
III. Abbildungs- und Quellcode-Verzeichnis
IV. Abkürzungen
1. Einleitung
1.1 Motivation zur Themenwahl und persönliche Zielsetzung 2
1.2 Struktur der Ausarbeitung 3
1.3 Vorstellung der betreuenden Firma 3
2. Ausgangssituation und
angestrebte Ziele
2.1 Aktuelle Situation zur Verwertung von Inhalten 6
2.2 Zeitverlust durch manuelle Optimierung der Inhalte 6
2.3 Workflow-Optimierung als primäres Ziel 7
2.4 Bewertung der Konvertierungsmöglichkeiten und
Anwendung auf ein Beispiel-Szenario 7
3. Cross-Media-Publishing
3.1 Medienneutrale Datenhaltung – zur Diskussion 10
3.1.1 Vorteile medienneutraler Datenhaltung 10
3.1.2 Veränderung des Workflows 10
3.1.3 Umsetzung in der Praxis 11
3.2.2 XSLT – Extensible Stylesheet Language Transformations 12
3.2.5 Content Management System (CMS) 13
3.3 Anforderungen an den Print-to-Web-Workflow 14
3.3.1 Hoher Automatisierungsgrad des Konvertierungsprozesses 14
3.3.2 Hohe inhaltliche und technische Integrität 14
3.3.4 Barrierefreiheit 15
4. Print-Komponenten – im Detail
4.1 Adobe InDesign CS2/CS3 18
4.1.1 Das InDesign-Interchange-Format 18
4.2.3 Konvertierung der Dokumente in das InDesign-Format 21
5. Web-Komponenten – im Detail
5.1 Statische HTML-Seiten 24
5.2 Dynamische HTML-Seiten/Dynamische Webseiten 24
5.3 Content Management System 25
5.4.2 TYPO3-Extensions 27
5.4.4 Die Benutzeroberfläche von TYPO3 28
6. Möglichkeiten zur Konvertierung
6.1 PDF-Export aus Layoutapplikationen 32
6.1.1 Konvertierungsvorgang 32
6.1.2 Anforderungen an PDF-Dokumente 33
6.1.3 Manuelle Einbindung ins Web 33
6.1.4 Inhalts- und Navigationskomponenten im Browser 34
6.1.5 Automatische Einbindung in ein CMS (TYPO3) 34
6.2 Konvertierung auf Flash-Basis (ADE/Livepaper/speedPaper) 35
6.2.1 Adobe Digital Editions (ADE) 35
6.2.4 Manuelle Einbindung ins Web 36
6.2.5 Automatische Einbindung in ein CMS (TYPO3) 37
6.3 BatchXSLT – XML-Konvertierung aus Layoutapplikationen 38
6.3.1 Vorbereitungen für die Konvertierung 38
6.3.2 Analyse des Adobe InDesign-Interchange-Formates (INX) 40
6.3.3 BatchXSLT for InDesign 55
6.3.6 Funktionsweise von BatchXSLT 58
6.3.7 Auswertung der Export-Daten 59
6.3.8 Manuelle Einbindung ins Web 67
6.3.9 Automatische Einbindung in ein CMS (TYPO3) 67
6.4 (X)HTML-Export aus Layoutapplikationen 68
6.4.1 Konvertierungsvorgang 68
6.4.2 Einstellungsmöglichkeiten beim Export 69
6.4.3 Auswertung der Export-Daten 71
6.4.4 Weiterverarbeitung der Daten mittels Cascading Stylesheets 73
6.4.6 YAML – Yet Another Multicolumn Layout 74
6.4.8 Manuelle Einbindung ins Web 85
6.4.9 Automatische Einbindung in ein CMS (TYPO3) 85
7. Gestaltungsmöglichkeiten
in Web und Print
7.1 Mehrspaltiges Webseitenlayout 88
7.3 Schriftenvielfalt – Neue Möglichkeiten mit SIFR 91
7.4 Silbentrennung im Internet 92
8. Vergleich der
Konvertierungsmöglichkeiten
8.1 Zielsetzungen und deren Erreichungsgrade 96
8.3 Individuelle Konvertierungsmöglichkeiten und Erweiterungen 98
8.3.1 XSLT-Weiterverarbeitungsmöglichkeit 98
8.3.2 CSS-Weiterverarbeitungsmöglichkeit 98
8.4 Übersicht und firmeninterne Bewertung der Möglichkeiten 99
9. Workflow-Integration
und Praxisbeispiel
9.1 Optimierter Workflow der One Advertising AG 102
9.2 Magazin-Beispiel: Macwelt 102
10. Zusammenfassung
und Ausblick
102
11. Anhang
11.1 Literaturverzeichnis 110
11.2 Stichwortverzeichnis 112
Daten-CD mit Quellcode
und Anwendungsdaten
III. Abbildungs- und
Quellcode-Verzeichnis
[Abb.: 1.01] Logo der One Advertising AG,
www.advertising.de 3
[Abb.: 4.01] Screenshot, Splashscreen Adobe InDesign CS3
18
[Abb.: 4.02] Screenshot, Splashscreen QuarkXPress 7
20
[Abb.: 5.01] Logo TYPO3,
www.typo3.org 26
[Abb.: 5.02] Screenshot, Benutzeroberfläche von TYPO3
28
[Abb.: 5.03] Screenshot, Modulbereich Web
29
[Abb.: 5.04] Screenshot, Modulbereich Datei
29
[Abb.: 5.05] Screenshot, Modulbereich Benutzer
29
[Abb.: 6.01] Screenshot, PDF-Export aus QuarkXPress
32
[Abb.: 6.02] Screenshot, Einstellungen beim PDF-Export aus QuarkXPress
32
[Abb.: 6.03] Screenshot, PDF-Export aus Adobe InDesign
32
[Abb.: 6.04] Screenshot, Einstellungen beim PDF-Export aus Adobe InDesign
32
[Abb.: 6.05] Screenshot, Betrachtung einer PDF-Datei in einem Browser
34
[Abb.: 6.06] Screenshot, ADE-Beispielumsetzung im Adobe Digital Reader
35
[Abb.: 6.07] Screenshot, Konversats mithilfe der Livepaper-Technologie
35
[Abb.: 6.08] Screenshot, ePaper-Konvertierung mittels speedPaper-Technologie
36
[Abb.: 6.09] Screenshot, Scripting-Palette von Adobe InDesign
38
[Abb.: 6.10] Screenshot, Vorschau: Leeres InDesign-Dokument
42
[Abb.: 6.11] Screenshot, Vorschau: InDesign-Snippet mit Textinhalt
43
[Abb.: 6.12] Screenshot, Vorschau: InDesign-Snippet mit Bildinhalt
43
[Abb.: 6.13] Screenshot, Meta-Informationen aus Adobe Bridge
43
[Abb.: 6.14] Screenshot, Meta-Informationen im Layoutprogramm
54
[Abb.: 6.15] Screenshot, Grafische Benutzeroberfläche von BatchXSLT
55
[Abb.: 6.16] Screenshot, Display: Benutzerinterface von ImageMagick
56
[Abb.: 6.17] Screenshot, Benutzerinterface von GSView
57
[Abb.: 6.18] Screenshot, Einstellungsmöglichkeiten in BatchXSLT
58
[Abb.: 6.19] Screenshot, Beispiel 1: Leeres Dokument
66
[Abb.: 6.20] Screenshot, Beispiel 2: Text-Snippet
66
[Abb.: 6.21] Screenshot, Beispiel 3: Bild-Snippet
66
[Abb.: 6.22] Screenshot, Medienübergreifender (X)HTML-Export aus InDesign
68
[Abb.: 6.23] Screenshot, Exportoptionen: Allgemein
70
[Abb.: 6.24] Screenshot, Exportoptionen: Bilder
70
[Abb.: 6.25] Screenshot, Exportoptionen: Erweitert
70
[Abb.: 6.26] Screenshot, Browserausgabe Beispiel 1
72
[Abb.: 6.27] Screenshot, Browserausgabe Beispiel 2
72
[Abb.: 6.28] Screenshot, Browserausgabe Beispiel 3
72
[Abb.: 6.29] W3C-CSS-Boxmodell,
www.linkwerk.com 73
[Abb.: 6.30] Logo T3N-Magazin,
www.t3n-magazin.de 79
[Abb.: 6.31] Screenshot, YAML Grundgerüst für TYPO3
79
[Abb.: 6.32] Screenshot, blueprintcss: Beispielseite
85
[Abb.: 7.01] Screenshot, blueprintcss: Gestaltungsraster
88
[Abb.: 7.02] Screenshot, blueprintcss: Mikrotypografie
90
[Abb.: 7.03] Screenshot, SIFR deaktiviert
91
[Abb.: 7.04] Screenshot, SIFR aktiviert
91
[Abb.: 7.05] Screenshot, Silbentrennung
93
[Abb.: 9.01] Cover Macwelt 01/2008,
www.macwelt.de 102
[Abb.: 9.02] Screenshot, Macwelt ePaper-Konvertierung (Artikel)
103
[Abb.: 9.03] Screenshot, Macwelt ePaper-Konvertierung (Tabelle)
103
[Abb.: 10.10] Wikipedia, Grafische Darstellung Web2.0,
www.wikipedia.de 107
[Code: 6.01] HTML-Aufruf einer PDF-Datei
33
[Code: 6.02] Filelink (TypoScript)
34
[Code: 6.03] Einbinden einer Flash-Datei mit der objekt-embed Kombination
37
[Code: 6.04] Einbinden einer Flash-Datei gemäß (X)HTML-Standard
37
[Code: 6.05] Einbinden einer Flash-Datei in TYPO3 als HTML-Objekt
37
[Code: 6.06] Quellcode: BXSLTExport.jsx
39
[Code: 6.07] INX: XML-Deklaration, Verarbeitungsanweisung, Wurzelelement
40
[Code: 6.08] INX: Leeres InDesign Dokument
48
[Code: 6.09] INX: InDesign-Snippet-Text
50
[Code: 6.10] INX: InDesign-Snippet-Bild
52
[Code: 6.11] INX: InDesign Meta-Informationen
54
[Code: 6.12] XML: Leeres InDesign Dokument
59
[Code: 6.13] XML: InDesign-Snippet-Text
61
[Code: 6.14] XML: InDesign-Snippet-Bild
62
[Code: 6.15] Quellcode: xml2htmEpaper.xsl
66
[Code: 6.16] HTML-Aufruf einer XML-Datei
67
[Code: 6.17] XML-Transformationsmöglichkeit in PHP
67
[Code: 6.18] (X)HTML: Leeres InDesign Dokument
71
[Code: 6.19] (X)HTML: InDesign-Snippet-Text
71
[Code: 6.20] (X)HTML: InDesign-Snippet-Bild
72
[Code: 6.21] Inhalt einer CSS-Datei
73
[Code: 6.22] Eigenschaften eines div-Containers
73
[Code: 6.23] YAML: base.css
77
[Code: 6.24] blueprintcss: grid.css
83
[Code: 6.25] blueprintcss: typography.css
84
[Code: 6.26] HTML-Aufruf einer HTML-Datei
85
[Code: 7.01] Grundlinienraster, Standardschriftgröße und Zeilenabstand
89
[Code: 7.02] Grundlinienraster, Absatzformate
90
[Code: 7.03] Grundlinienraster, Überschriftenformat h1
90
[Code: 7.04] Grundlinienraster, Überschriftenformat h2
90
[Code: 7.05] Skript-Einbindung: Hyphenator.js
93
[Code: 7.06] Skript-Aufruf: Hyphenator.js
93
ADE – Adobe Digital Editions
AJAX – Asynchronous JavaScript and XML
API – Application Programming Interface
BE – Backend
BMP – Windows Bitmap
CGI – Common Gateway Interface
CI – Corporate Identiy
CJK – CJK-Schriftarten (Chinesisch, Japanisch, Koreanisch)
CMS – Content-Management-System
CMYK – Cyan, Magenta, Yellow, Key (Schwarz)
CSS – Cascading Stylesheets
DBMS – Datenbankmanagementsystem
DIV – Division (Block/Bereich)
DOM – Document Object Model
DPI – Auflösung in Dots per Inch
DRM – Digital Rights Management
DTP – Desktop Publishing
EDV – Elektronische Datenverarbeitung
EPS – Encapsulated Postscript
FAQ – Frequently Asked Questions
FE – Frontend
FTP – File Transfer Protocol
GUID – Globally Unique Identifier
GIF – Graphics Interchange Format
GNU – GNU‘s Not Unix
GPL – General Public License
GS – GhostScript
GZ/ZIP – Dateiarchiv (PKzip Dateierweiterung)
HTM/HTML – Hypertext Markup Language
HTTP – Hypertext Transfer Protocol
ID – Identifikationsnummer
INDD – InDesign-Dokument
INDS – InDesign-Snippet
INX – InDesign-Interchange-Format
ISO – Internationale Organisation für Normung
JAVA VM – Java Platform, Virtual Machine
JPG/JPEG – Joint Photographic Experts Group
JS/JSX – Javascript
LAMP – Linux-Apache-MySQL-PHP-Kombination
MAMP – MacOS-Apache-MySQL-PHP
MIME – Multipurpose Internet Mail Extension
MPG/MPEG – Moving Picture Experts Group
OS – Operation System
PCX – Picture Exchange
PDA – Personal Digital Assistant
PDF/PDF X-3 – Portable Document Format
PID – Packet Identifier
PHP – PHP: Hypertext Preprocessor
PNG – Portable Network Graphics
PPML – Personalized Print Markup Language
PS – Postscript
PSD – Photoshop-Dokument
QXML – QuarkXpress Markup Language
RA/RAM – RealAudio
RDF – Resource Description Framework
RGB – Rot, Grün und Blau
RIA – Rich Internet Application
RTF – Rich Text Format
SEO – Search Engine Optimization
SGML – Standard Generalized Markup Language
SIFR – Scalable Inman Flash Replacement
SQL – Structured Query Language
SSMC – Single-Source Multi-Channel
SWF – Small Web Format/Flash-Dateien
TIFF – Tagged Image File Format
TT, TX – TYPO3-Extensions
TXT – Text
UID – Unique Identifier
URI – Uniform Resource Identifier
W3C – World Wide Web Consortium
WAMP – Windows-Apache-MySQL-PHP-Kombination
WAV/WAVE – Windows Media Audio Wave Dateiformat
WWW – World Wide Web
(X)HTML – (Extensible) Hypertext Markup Language
XAMPP – X (betriebssystemunabhängig) Apache-MySQL-PHP-Kombination
XMP – Extensible Metadata Platform
XML – Extensible Markup Language
XPath – XML Path Language
XSL – Extensible Stylesheet Language
XSLT – Extensible Stylesheet Language Transformations
YAML – Yet Another Multicolumn Language
[1]
Zitat:
http://www.vva.de/
index.php?id=31
1.1 Motivation zur Themenwahl
und persönliche Zielsetzung
Das Thema „Print-to-Web – Neue Möglichkeiten der Datenkonvertierung“ hätte nicht treffender – so wie in diesem Zitat formuliert – eingeleitet werden können. In der folgenden Ausarbeitung werden genau diesen besseren Lösungen gesucht und einzelne Verfahren miteinander verglichen.
Die Potenziale einzelner Konvertierungsmethoden, die Inhalte aus Print-Produkten in onlinefähigen Web-Content überführen, werden oft nicht richtig erkannt, zu oberflächlich behandelt und dann in der Praxis an den Anforderungen des Ausgabemediums vorbei realisiert.
Gerade als Person mit einer starken Affinität zu Printmedien, habe ich es als interessante Herausforderung betrachtet,
in Zusammenarbeit mit einer auf Online-Medien und Digitales Marketing spezialisierten Firma, der One Advertising AG [2] aus München, einen Vergleich der Konvertierungsmöglichkeiten vorzunehmen, um mit dieser Ausarbeitung im Produktionsalltag die beiden Welten um Print und Web ein Stück näher zusammen bringen zu können.
Wichtigster Aspekt dieser Untersuchung ist aus Firmensicht die zeitliche Optimierung der Datenaufbereitung von Inhalten aus Print-Dokumenten für eine optisch und benutzermäßig dem Medium Internet angemessene Darstellungsweise.
Desweiteren stellt sich die Frage nach der Wirtschaftlichkeit der Konvertierungsmethoden – genauer, nach dem Arbeitsaufwand und den Zeitvolumina, welche für eine Datenaufbereitung der Inhalte für eine Zweitverwertung benötigt werden. Letztendlich spielt auch die Integration in den firmeninternen Workflow eine wichtige Rolle: Umstellungen des Arbeitsablaufes und Sekundärinvestitionen sollten nach Möglichkeit minimal ausfallen.
Persönlich ergibt sich für mich durch diese Ausarbeitung einerseits eine starke Horizonterweiterung in Richtung Online-Medien und andererseits eine fachliche Vertiefung in die Analyse des XML-basierten Adobe InDesign-Interchange-Formats und dessen weiteren Bearbeitungsmöglichkeiten sowie in die Datenaufbereitung für das Content Management System TYPO3.
„Nichts leichter, als ein Kundenmagazin ins Netz zu bringen: Einfach ein PDF schreiben, und
ab damit auf den Server, wer will, kann sich die Zeitschrift dann herunterladen.
Das macht zwar wenig Arbeit und in manchen Fällen durchaus Sinn – aber gibt es nicht
bessere Lösungen?
Gerade das Online-Medium bietet hervorragende Möglichkeiten, mit Bestandskunden zu kommunizieren und mit potenziellen Kunden ins Gespräch zu kommen. Da ist es nur folgerichtig, nach Wegen zu suchen, die Print und Online sinnvoll miteinander verknüpfen.“ [1]
[2]
One Advertising AG:
Fullservice Online
Marketing/Werbeagentur/Webdesign/SEO Agentur in München
[Abb: 1.01]
Logo der One Advertising AG
1.2 Struktur der
Ausarbeitung
Zu Beginn dieser Ausarbeitung geht es um die thematische Problembeschreibung der Datenaufbereitung von Print-Dokumenten für eine Zweitverwertung in einem Onlinemedium, um die Definition der Rahmenbedingungen in der Firma und die anschließende Skizzierung der angestrebten Ziele.
Nach einer durchaus kritischen Betrachtung des Prinzips der medienneutralen Datenhaltung, werden zunächst die – die Problemstellung betreffenden – Print- und Web-Komponenten betrachtet und einzelne Funktionen näher beschrieben. Anschließend folgt mit der Untersuchung und dem Vergleich verschiedener Konvertierungsmöglichkeiten, um Inhalte von Print-Dokumenten in onlinefähige Formate übertragen zu können, der Kernbereich dieser Ausarbeitung.
Es werden vier Ansätze vorgestellt, die jeweils auf einer anderen Basistechnologie (PDF, Flash, XML, HTML) aufbauen.
Aus den Untersuchungsergebnissen resultiert dann die Empfehlung einer bestimmten Konvertierungsart, die – den angestrebten Zielen der Firma entsprechend – am ehesten geeignet ist. Zuletzt wird die Umsetzung dieser präferierten Methode anhand eines Beispiels aus der Praxis gezeigt.
1.3 Vorstellung der
betreuenden Firma
Die One Advertising AG ist eine Agentur für Digitales Marketing und entwickelt performance-orientierte Lösungen für Online Marketing, Online Vertrieb und Online Kommunikation.
Sie wurde 2006 von den beiden Online Marketing Experten Christian Spieker und Andreas Kelnberger gegründet.
Die One Advertising AG bietet ihren Kunden aufgrund der interdisziplinären Kompetenz in den Bereichen Gestaltung und Technologie ein integriertes Dienstleistungsangebot für Digitales Marketing von der Konzeption über die Kreation bis zur technischen Umsetzung von performance-orientierten Online Kampagnen.
Innerhalb kurzer Zeit konnte die One Advertising AG namhafte Kunden von ihrer Leistungsfähigkeit überzeugen: 1&1 Internet AG, Quelle, TUI, IDG Mediengruppe, United Internet AG.
2. Ausgangssituation
und angestrebte Ziele
[4]
Proprietär:
Dateiformate werden als proprietär bezeichnet, wenn sie nicht oder nur mit Schwierigkeiten mit freier Software verarbeitbar sind
[3]
Synergieeffekte:
Zusammenwirken von Kräften zur gegenseitigen Förderung, Durch die Kooperation wird ein Erfolg erzielt, der größer ist als
jener der einzelnen Anteile alleine.
[5]
Look and Feel:
Gesamteindruck und Wiedererkennung zum Corporate
Design, sowie Handhabung entsprechend den Rahmenbedingungen des Mediums
2.2 Zeitverlust durch manuelle
Optimierung der Inhalte
Oftmals sind bereits vorhandene Satzdateien von Drucksachen Ausgangsmaterial für eine Webpräsenz, da bei vielen kleinen und mittleren Unternehmen Webdesign bisher eher als ein Nebenprodukt der Werbepräsenz behandelt wurde. Erst so langsam entwickelt sich ein eigenständiges Bewusstsein im Umgang mit Online-Medien und somit auch die Wichtigkeit der Kommunikation aktueller Informationen. Auch Zeitschriften- und Zeitungsverlage fusionieren ihre Online- und Printsparten, damit die Inhalte der Produkte parallel – und nicht nicht wie bisher linear vom Layoutdokument hin zum onlinefähigen Format – in die jeweiligen Vertriebskanäle gelangen kann und somit Synergieeffekte [3] und Kosteneinsparungen bei den Konvertierungsvorgängen erzielt werden können.
Trotz dieser Bemühungen bleibt letztendlich aber die Frage nach den Konvertierungsmöglichkeiten von bestehendem Material und den Wegen, diese Inhalte für eine Zweitverwertung aufzubereiten, weiter offen. Ein medienneutraler Workflow würde zwar viele dieser Probleme beseitigen, doch aufgrund der Vielfalt der Produkte und der Individualität der Arbeitsabläufe der One Advertising AG wirtschaftlich sich nicht rentieren.
2.1 Aktuelle Situation zur
Verwertung von Inhalten
Bei der Wiederaufbereitung der Inhalte kann man grob zwischen allgemeinen Gestaltungselementen, Bildern und Texten unterscheiden.
Besonders bei der Aufbereitung bestehender Textinhalte erweisen sich proprietär [4] in das jeweilige Dokument eingearbeitete Zusatzinfomationen, sanfte und harte Zeilenumbrüche, Farbe, Größe und Schriftart eher hinderlich als hilfreich. Die reichen typografischen Möglichkeiten, die in der Druckvorstufe zur Verfügung stehen, lassen sich leider nicht ohne Weiteres in Webseiten umsetzen.
Inhalte aus bestehenden Satzdateien können daher erst nach zum Teil beachtlichen Nach- und Umarbeitungen für verschiedene Ausgabemedien genutzt werden.
Um dem Inhalt bei unterschiedlichen Verwendungszwecken ein einheitliches „Look and Feel“ [5] zu geben, ist eine Aufbereitung der Textinformation und der Bilder sowie eine optische Optimierung des Gestaltungsrahmens entsprechend den – durch das Ausgabemedium festgelegten Rahmenbedingungen – unumgänglich. Der hieraus resultierende höhere Zeitbedarf ergibt sich zwangsläufig.
Primäres Ziel dieser Untersuchung ist eine Optimierung des Arbeitsablaufes ohne große Veränderungen des bestehenden Workflows zu erzeugen.
Die Analyse verschiedener Konvertierungsmöglichkeiten wird mit dem Ziel durchgeführt, Inhalte von Archivmaterialien, sowie Daten aus laufenden und zukünftigen Print-Produktionsprozessen bei Bedarf in ein onlinefähiges Format konvertieren zu können, ohne den internen Ablauf der Produktion umfassend verändern zu müssen. Eine zu erzielende Kosteneinsparung durch zeitlich verkürzte Arbeitsabläufe mit möglichst hohem Automatisierungsgrad hat bei dieser Untersuchung oberste Priorität. Dennoch sollte die Qualität der optischen Darstellung und der technischen Umsetzung entsprechend den Anforderungen des Ausgabemediums auf einem hohen Niveau gehalten werden.
Der Kunde beziehungsweise Mitarbeiter sollte die Möglichkeit haben, jederzeit entscheiden zu können, ob ein weiterer Ausgabekanal neben dem Printmedium bedient wird – ohne den permenenten Mehraufwand einer medienneutralen Datenhaltung oder des datenbankbasiertem Layouts eingehen zu müssen.
2.3 Workflow-Optimierung
als primäres Ziel
Die untersuchten Möglichkeiten werden anschließend nach den Zielerreichungsgraden – gemessen an den Anforderungen und Rahmenbedingungen des Firmen-Workflows – verglichen.
Wichtige Entscheidungskriterien sind zum einen ein hoher Automatisierungsgrad bei der Konvertierung, eine hohe inhaltliche und technische Integrität sowie ein hoher optischer Wiedererkennungswert zum Printmedium beziehungsweise zum Corporate Design.
Zuletzt werden sowohl die Potenziale als auch die technischen Grenzen der Gestaltungsmöglichkeiten in Print und Web verglichen, das Konversat auf die Verständlichkeit bei der Interaktion mit dem Benutzer hin untersucht und außerdem die jeweiligen Konfigurations- und Erweiterungsmöglichkeiten miteinander verglichen. Durch eine Bewertung mithilfe gewichteter Faktoren wird eine Entscheidung für das Verfahren der Wahl getroffen und schließlich anhand einer Beispielumsetzung belegt.
2.4 Bewertung der Konvertierungs-
möglichkeiten und Anwendung
auf ein Beispiel-Szenario
3. Cross-Media-Publishing
[6]
Zitat:
http://www.w3c.de/Events/Cross-Media-Publishing.html
[7]
SSMC-Publishing:
Möglichkeit aus einer Datenquelle mehrere Ausgabekanäle bedienen zu können
„Information zur richtigen Zeit am richtigen Ort auf dem richtigen Gerät im richtigen Format dem richtigen Benutzer zu rentablen Preisen zu präsentieren ist eine der großen Herausforderungen des Informationszeitalters. [ ... ]
Aus Gründen der Konsistenz, Integrität und Aktualität aber auch um den Aufwand für Erstellung, Speicherung und Pflege in Grenzen zu halten, sollte Information nur einmal erfasst und gespeichert werden“ [6]
Die Motivation diese Herausforderung anzugehen ist verständlicherweise sehr hoch, aber so lange nicht alle technischen Komponenten und alle beteiligten Anwender in der Produktionskette das XML-Format unterstützen, wird sich die medienneutrale Datenhaltung nicht für jedes Produkt in der Praxis lohnen.
Vor allem, wenn es sich um rein statische Inhalte handelt, steht die Vorbereitung und Realisierung einer neutralen Produktionsbasis für ein einzelnes Produkt in keinem Verhältnis zum dem weiteren Einsparungspotential.
Die Umsetzung des Modells der medienneutralen Datenhaltung ist in der Praxis mit einem nicht zu unterschätzenden Aufwand verbunden.
Für einige Produktionen ist diese Arbeitsweise überaus sinnvoll, für viele kleinere Produktionen, bei denen die Inhalte erst noch aufwändig semantisch strukturiert werden müssen, eher weniger.
3.1.1
Vorteile medienneutraler Datenhaltung
Eine medienneutrale Datenhaltung basiert auf einer Datenbank, in der die Inhalte des Produktes medienneutral im XML-Format gespeichert werden.
Aus dieser Datenbank werden dann die verschiedenen Ausgabemedien bedient. Es findet somit eine klare Trennung zwischen dem Inhalt und der jeweiligen für das Ausgabemedium entsprechenden optischen Ausprägung statt.
Die wichtigsten Vorteile medienneutraler Datenhaltung im Überblick:
– Ermöglichen des Single-Source-
Multi-Channel-Publishing [7]
– Möglichkeit der Generierung von
Inhalten durch Auswahl und
Neukombination von Inhalten aus mehreren Publikationen
– die Option, Inhalte in verschiedenen Produkten optisch anders wiederzugeben
– Etablierung des XML-Formats als Standardformat für den Datenaustausch
3.1.2
Veränderung des Workflows
Medienneutrales Datenmanagement führt zu umfassenden Veränderungen der internen Agentur- und Herstellungsabläufe und die beteiligten Mitarbeiter sind mit einer Umorganisation der beste
3.1 Medienneutrale Datenhaltung –
zur Diskussion
[8,9]
Aufbauorganisation:
Festlegung der Rahmenbedingungen,
Ablauforganisation:
intern ablaufenden Arbeits- und Informationsprozesse
henden Prozesse konfrontiert. Diese Veränderungen beziehen sich zum einen auf die internen Abläufe, zum anderen aber auch auf das Zusammenspiel mit externen Dienstleistern (insbesondere Satz- und Druckbetrieben, sowie freien Mitarbeitern).
Die optimale aufbau- und ablauforganisatorische Integration [8,9] eines medienneutralen Workflows ist stark von den spezifischen Rahmenbedingungen abhängig und daher von Unternehmen zu Unternehmen unterschiedlich zu lösen.
3.1.3
Umsetzung in der Praxis
In der Praxis geht die Tendenz bei vielen Anwendern eher zur der folgenden Workflow-Variante: Bei dieser bleibt die interne Arbeitsweise weitgehend unverändert und die Erstellung der XML- und HTML-Daten wird auf externe Dienstleister übertragen.
Vorteile bestehen insbesondere darin, dass die XML/HTML-Konvertierung sehr kostengünstig durchgeführt werden kann und sich keine großen Veränderungen im Arbeitsumfeld des Unternehmens ergeben.
Nachteil ist jedoch, dass durch das lineare Verfahren ein Zeit- und Aktualitätsproblem entsteht, da die XML/HTML-Daten in der Regel erst nach der Druckfreigabe für das Printprodukt zur Verfügung stehen. Desweiteren ist die Qualität und Korrektheit der Daten bei der Bearbeitung durch externe Dienstleister oft nicht ausreichend.
Diese Art des Praxiseinsatzes entspricht nicht dem Bild des idealen Cross-Media-Verständnisses. Sie kann aber aus organisatorischen und insbesondere betriebswirtschaftlichen Gründen für die Praxis des jeweiligen Unternehmens die geeignete Form der Umsetzung sein.
3.1.4
Lösungsansatz
Um eine Konvertierung ohne Veränderung des Produktionsprozesses zu ermöglichen, muss ein Konvertierungsverfahren so modular in den Arbeitsprozess – jederzeit und nur nach Bedarf – eingreifen können, dass sich keine Wechselbeziehungen und sonstigen Abhängigkeiten sowie zeitlichen Verzögerungen zwischen Print- und Web-Ausgabe ergeben.
Der theoretische Idealfall einer vollständigen Automatisierung mit Ausgabe einer optimal auf das Medium zugeschnittenen Daten-Charakteristik, ist auf dieser Basis nicht möglich. Für diese Belange gibt es wiederum medienneutrale XML-Produktionen, die aber einen gewissen Mehraufwand und sorgfältige Vorbereitung benötigen. Die totale Flexibilität aus struktureller Sicht und die Möglichkeit, lokale Korrekturen des optischen Erscheinungsbildes vornehmen zu können, sind dann aber nicht gegeben.
So ergibt sich schießlich die Notwendigkeit, einen idealen Kompromiss zwischen den beiden Ausrichtungen Flexibilität und Automatisierung zu finden, damit sowohl xml- als auch nicht-xml-basierte Print-Dokumente für eine Zweitverwertung aufbereitet werden können.
[10,11]
con_mode, tag_mode:
Variablen zur Steuerung
der Lesemodi einer
Verarbeitungssoftware
[12]
XPath:
Anfragesprache, um Teile
eines XML-Dokumentes
zu adressieren
[13]
Pattern:
Untergruppe der XPath-Ausdrücke, die als Vergleichsmuster für Knoten dient
In diesem Abschnitt sind einige grundlegende Begriffe definiert, die feste Bestandteile des Cross-Media-Workflows sind.
Kleinere Definitionen und detailliertere Ergänzungen sind im gesamten Dokument in den Marginalspalten beschrieben.
3.2.1
XML/(X)HTML/CSS
XML (Extensible Markup Language) = Auszeichnungssprache. XML ist hierarchisch strukturiert und trennt Struktur und Inhalt. XML ist ein wichtiger Standard für eine medienneutrale Verarbeitung von Inhalten.
Jedes XML-Dokument besteht aus:
1. dem eigentlichen Inhalt des Dokumentes. Data characters werden von der XML-Software im con_mode [10] gelesen und an die Anwendungssoftware zur Bearbeitung weitergegeben.
2. dem Markup – den Charakteristika, die dem Nutzer mitteilen, welche Stellung im Ganzen (Titel, Paragraphen, Absätze) oder welchen Stellenwert ein Teil des Dokuments hat (Hervorhebungen, Zitate, Fußnoten); bestehend aus markup characters. Delimiter characters < > (Begrenzer) teilen der Software mit, dass die dadurch gekennzeichneten Zeichen im tag_mode [11] gelesen werden müssen.
(X)HTML (Extensible Hypertext Markup Language) = XML-basierte Auszeichnungssprache im Internet. Browser ab der vierten Generation kommen mit diesem Standard gut zurecht.
CSS (Cascading Style Sheets) = Formatierungssprache. Ermöglicht die Trennung von Inhalt und Layout. Layouteigenschaften wie zum Beispiel Schriftarten und Schriftgrößen werden über CSS ähnlich wie Formatvorlagen deklariert. CSS-Dateien können aus HTML-Dateien ausgelagert werden.
3.2.2
XSLT – Extensible Stylesheet Language Transformations
Die Sprache XSLT beschreibt die Umwandlung eines XML-Derivats in ein anderes Dokument. Diesen Vorgang nennt man Transformation. Das resultierende Dokument entspricht meist der XML-Syntax, es können aber auch andere Textdateien und sogar Binärdateien erstellt werden.
Dazu werden die XML-Dokumente als logischer Baum betrachtet: Die Quellbäume der zu transformierenden Dokumente und die durch die Transformation entstehenden Zielbäume der zu erzeugenden Dokumente.
Eine Transformation besteht aus einer Reihe von einzelnen Transformationsregeln, die Templates genannt werden. Ein Template besitzt ein auf XPath [12] basierendes Pattern [13], das beschreibt, für welche Knoten es gilt, und einen Inhalt, der bestimmt, wie das Template seinen Teil des Zielbaums erzeugt.
[15]
Apache HTTP Server:
Produkt der Apache Software Foundation, meistbenutzte Webserver im Internet
[14]
Template:
Bauteil einer Webseite,
welches einen Teil des Inhaltes,
der Struktur oder der
Gestaltung vorgibt
3.2.3
Web-to-Print
Die Grundlage für Web-to-Print-Verarbeitungen sind immer vordefinierte Vorlagen. Während der eine Hersteller auf XML zur Erzeugung setzt, nutzt ein anderer PDF-Formulare und wieder ein
anderer Vorlagen aus Adobe InDesign oder QuarkXPress. „Web-to-Print“ ist ein Verfahren der Online-Erzeugung von Druckvorlagen via Internet mithilfe serverbasierter Layout-Technologie, die Server-Templates und Client-Eingaben miteinander kombiniert.
3.2.4
Print-to-Web
Print-to-Web beschreibt den Weg der Überführung von Informationen aus Print-Dokumenten in den Online-Bestand. Falls nicht die Inhalte des Printproduktes selbst aus einer XML-Datenquelle erzeugt wurden, gilt es, nach Möglichkeiten zu suchen, bereits proprietär gespeicherte Daten wieder in andere Dimensionen bearbeitbar zu machen und webgerecht aufzubereiten.
3.2.5
Content Management System (CMS)
Unter Content Management versteht man die systematische und strukturierte Erzeugung, Aufbereitung, Verwaltung, Darstellung und Verarbeitung von Inhalten. Am Anfang steht die Unterscheidung von Inhalt und Darstellung. Traditionelle HTML- als auch PDF-Dokumente weisen eine Verzahnung von Inhalt und Darstellung auf. Die Struktur des Dokumentes erlaubt es nicht, zwischen Inhaltsobjekten genauer differenzieren zu können. In einem HTML-Dokument lässt sich aufgrund der Struktur nicht erkennen was Headline, Subline oder etwa Kommentar ist. Die konsequente Trennung von Inhalt und Darstellung dagegen speichert den Inhalt – also Headline, Subline, Text, Bilder – sowie die Darstellung – also Farbe, Formatierung, Aussehen, Gestaltungselemente – separat. Die Darstellungsdatei, oftmals das sogenannte Template [14], kennzeichnet an bestimmten Positionen die dort einzufügenden Inhaltsobjekte. Der Inhalt wird oft in einer Datenbank gespeichert, wo er administriert werden kann.
3.2.6
MySQL
MySQL ist ein Multi-Thread und Multi-User SQL-Datenbank-Server. SQL steht für Structured Query Language. MySQL ist als Open-Source-Software für verschiedene Betriebssysteme verfügbar und bildet die Grundlage vieler Webauftritte.
Ein bevorzugtes Einsatzgebiet von MySQL ist die Datenspeicherung für Web-Services. MySQL wird häufig in Verbindung mit dem Webserver Apache [15] und PHP eingesetzt. Diese Kombination wird entsprechend der Anfangsbuchstaben der beteiligten Software als LAMP, MAMP beziehungsweise WAMP (XAMPP) bezeichnet, je nachdem ob als Betriebssystem Linux, Mac OS oder Windows benutzt wird. MySQL wird in vielen Produkten als eingebettetes Datenbanksystem eingesetzt – so arbeitet innerhalb von TYPO3 eine Datenbank auf MySQL-Basis.
[17]
Gütekriterien:
W3C-HTML/(X)HTML-Markup-,
CSS-, Feed-Validation-Service,
Link-Checker
[16]
Corporate Design:
Teilbereich der Corporate
Identity und beinhaltet
das gesamte visuelle
Erscheinungsbild
Zur Festlegung der Vergleichskriterien verschiedener Konvertierungsmöglichkeiten wurden in Zusammenarbeit mit der One Advertising AG die folgenden Anforderungen an den „Print-to-Web“-Workflow definiert.
Wichtige Gesichtspunkte sind zum einen ein hoher Automatisierungsgrad des Konvertierungsprozesses, um kosteneffizient eine Zweitverwertung der Inhalte herstellen zu können, zum anderen ist aber auch der zielgruppenspezifische Nutzungsgehalt des Konversats und die Benutzbarkeit im Ausgabemedium entscheidend.
Alles wird natürlich unter der Berücksichtigung eines hohen Qualitätsniveaus, sowohl bei der optischen Darstellung und Wiedererkennung zum Print-Dokument beziehungsweise zum Corporate Design [16], als auch bei der technischen Umsetzung entsprechend den Anforderungen des Ausgabemediums und entsprechend im Internet validierbarer Gütekriterien [17] betrachtet.
3.3.1
Hoher Automatisierungsgrad
des Konvertierungsprozesses
Der Grad der Automatisierung hängt zum einen von der Qualität des Ausgangsmaterials und zum anderen von der Individualität des jeweiligen Konvertierungsprozesses ab. Dabei kann der Automatisierungsgrad von der Teil- bis hin zur Vollautomatisierung reichen.
Ein wesentlicher Faktor dabei ist die Layoutgestaltung: So ist der Automatisierungsgrad für einheitlich gestaltete und wiederkehrende Produkte höher als für Dokumente mit individuellen Designs.
3.3.2
Hohe inhaltliche und technische
Integrität
Wenn alle Inhalte konvertiert und zu einer Webseite zusammengefügt wurden, wird die Prüfung des gesamten Systems durchgeführt.
Dieser Funktions- und Qualitäts-Test kann sowohl im Intranet als auch in einer externen Testrunde durchgeführt werden.
Im Rahmen einer externer Testgruppe können auch Personen aus der Zielgruppe eingebunden und somit Usability-Tests durchgeführt werden.
Die Qualitäts-Tests konzentrieren sich vor allem auf die folgenden Bereiche:
– Inhaltliche Integrität:
Korrektheit der Inhalte,
Rechtschreibung
– Technische Integrität:
Funktion der Links
– Richtigkeit der HTML-Attribute
– Browserkompatibilität
– Performance-Tests:
Belastbarkeit des Web-Servers,
Stabilität und Zuverlässigkeit des
Systems bei einem überdurchschnittlich hohen Zugriff auf die Inhalte
3.3 Anforderungen an den
Print-to-Web-Workflow
[19]
Webcrawler:
Computerprogramm,
welches automatisch das
World Wide Web durchsucht
und Webseiten analysiert
[18]
Usability:
laut ISO 9241
3.3.3
Hohe Usability
Eine Definition des Begriffes Usability stammt aus der Software-Ergonomie:
„Usability ist das Ausmaß, in dem ein Produkt durch bestimmte Benutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen.“ [18]
Obwohl die Entwickler dieser Norm dabei an die ergonomische Gestaltung von Software dachten, lässt sie sich genauso gut auf Webseiten anwenden.
Die Effektivität bezeichnet die Genauigkeit und Vollständigkeit, mit der ein Nutzer sein Ziel erreichen kann. Unterstützen können ihn Hilfefunktionen, verschiedene Sortieroptionen oder Navigationsmöglichkeiten zum selben Ziel.
Die Effizienz beschreibt, mit welchem zeitlichen Aufwand der Nutzer seine Aufgabe auf der Webseite lösen kann. Sie ist sehr stark von der Navigation abhängig, aber auch von technischen Parametern wie Ladezeiten und der Performance des Webservers.
Die Zufriedenheit beschreibt das subjektive Empfinden des Nutzers, sein Erleben der Interaktion. Der Nutzungskontext spielt eine zentrale Rolle bei der Definition, Entwicklung und Bewertung der Usability einer Webseite. Er beinhaltet auf der einen Seite den Benutzer (Eigenschaften, Erwartungshaltung, Gefühlswelt, Ziele und Aufgaben) und auf der anderen Seite die Kommunikationsabsichten des Anbieters und die Zielsetzung der Webseite.
3.3.4
Barrierefreiheit
Barrierefreies Internet bezeichnet Internet-Angebote, die von allen Nutzern unabhängig von körperlichen und/oder technischen Möglichkeiten uneingeschränkt genutzt werden können. Dies schließt sowohl Menschen mit und ohne Behinderungen, als auch Benutzer mit technischen (zum Beispiel Handy oder PDA) oder altersbedingten Einschränkungen (zum Beispiel Sehschwächen) sowie Webcrawler [19] ein, mit denen Suchmaschinen den Inhalt einer Seite erfassen.
Auch nichtbehinderten Nutzern soll nicht die Pflicht auferlegt werden, beim Abruf von Internet-Angeboten genau dieselbe Hard- und Softwarekonfiguration zu verwenden wie der Autor des Angebots.
Neben der Zugänglichkeit geht es hier auch um Plattformunabhängigkeit – ein Internetangebot soll sowohl mit Bildschirm als auch mit PDA oder Handy nutzbar bleiben. Es soll unabhängig vom verwendeten Betriebssystem und von der Software funktionieren. Mindestens ebenso wichtig wie technische Zugangsbedingungen ist, dass die Inhalte übersichtlich und in leicht verständlicher Sprache präsentiert werden.
4. Print-Komponenten –
im Detail
[Abb.: 4.01]
Splashscreen Adobe InDesign
[20]
Document Object Model (DOM): Programmierschnittstelle (API = Application Programming Interface) für den Zugriff auf XML-Dokumente
4.1 Adobe InDesign CS2/CS3
InDesign ist ein Desktop-Publishing-Programm von Adobe Systems und gehört mit QuarkXPress zu den marktführenden DTP-Layoutprogrammen.
Mit diesem Programm ist es möglich in beliebigen Seitenformaten ein- oder mehrseitige Layouts zu erstellen. Dazu werden Elemente auf den Seiten in
Form von Rahmen angebracht, die anschließend mit Inhalten wie Text, Bildern und Tabellen oder auch mit anderen Objekten gefüllt werden.
Rahmen- und Inhaltsfarben, Zeichen- und Absatzattribute, verwendete Konturstile, Transparenzen, Effekte und andere Parameter können dabei frei und flexibel definiert und in Stilvorlagen für die spätere Wiederverwendung gespeichert werden.
Der (X)HTML-Export aus Adobe InDesign ermöglicht Publikationen in mehrere Ausgabekanäle, indem InDesign-Inhalte als (X)HTML-Dateien exportiert werden. Bearbeitet werden die exportierten Dateien anschließend im Web-Editor und können mithilfe von Cascading Style Sheets formatiert werden.
4.1.1
Das InDesign-Interchange-Format
Durch XML-Export eines InDesign CS3-Dokuments in das InDesign-Interchange-Format kann es in InDesign CS2/CS geöffnet werden. Desweiteren dient das Format als Ausgangsbasis für xml-basierte Konvertierungen.
Das Interchange Format ist ein XML-basiertes Format, welches benutzt wird um das InDesign-DOM [2o] abzubilden und weiter verarbeiten zu können. Das Format wird gewöhnlich als Austauschbasis genutzt, InDesign-Dokumente in ältere Programmversionen zurückzuspeichern.
Eine INX-Datei ist der augelesene Zustand der DOM-Struktur eines InDesign-Dokumentes. Jedes InDesign-Dokument wird als eine Baumstruktur von Objekten, die allesamt in einem Wurzelobjekt zusammengefasst sind, beschrieben.
Beispielsweise hat jedes Dokument Farbeigenschaften und Ausdehnungseigenschaften, die als Unterelemente im Wurzelelement gelistet sind. Neben weiteren Kind-Elemente, kann jedes einzelne Objekt Eigenschaften und Attribute haben. Das Objekt color hat beispielsweise Eigenschaften, die den Farbnamen, den Farbraum und die Farbwerte beschreiben.
Wenn ein InDesign-Dokument in das INX-Format exportiert wird, wird jedes Objekt mit seinen gesamten Eigenschaften
[21]
InDesign-Snippets:
Einzeln isolierbare Objekte eines InDesign-Dokumentes
[22]
Glyphen:
Grafische Darstellung eines Schriftzeichens, einer Ligatur oder eines Buchstabenteils
und Werten in ein XML-basiertes Format überführt. Beim erneuten Importieren, werden all diese Informationen dann benutzt, um ein neues InDesign-Dokument zu generieren.
Innerhalb der gleichen Programmversion von Adobe InDesign wird beim Exportieren und beim anschließendem Re-Importieren der INX-Datei, ein komplett zum Original identisches Dokument erzeugt.Eine neuere Version einer INX-Datei kann bestimmte Objekte oder Objekteigenschaften besitzen, die in einer älteren Programmversion von Adobe InDesign nicht interpretierbar sind und deswegen beim Import ignoriert werden. Daher kann das neu generierte InDesign-Dokument vom Original abweichen.
InDesign-Snippets [21] sind einzeln isolierte InDesign-Objekte. Diese Objekte werden auch auf der XML-Basis des Adobe InDesign Interchange-Formats exportiert. InDesign-Snippets werden in dieser Ausarbeitung dazu benötigt, um beispielhaft den XML-Quellcode von einzelnen Objekten vereinfacht beschreiben zu können.
4.1.2
(X)HTML-Export
Das Exportieren in (X)HTML ist eine einfache Möglichkeit, InDesign-Inhalte in eine internetfähige Form zu bringen. Wenn Inhalte in das (X)HTML-Format exportiert werden, kann man zwar festlegen wie mit Bildern verfahren wird, die Textformatierung bleibt jedoch nicht erhalten. Die Namen von Absatz-, Zeichen-, Objekt-, und Tabellenformaten aus InDesign, die auf die exportierten Inhalte angewendet wurden, werden dagegen übernommen. Diese (X)HTML-Inhalte werden mit gleichnamigen CSS-Formatklassen gekennzeichnet.
InDesign exportiert alle Textabschnitte, verknüpfte und eingebettete Bilder, Fußnoten, Textvariablen (als Text), Aufzählungs- und nummerierte Listen sowie auf Text verweisende Hyperlinks. Tabellen werden ebenfalls exportiert, bestimmte Formatierungen, wie zum Beispiel Tabellen- und Zellkonturen, werden jedoch nicht exportiert.
InDesign exportiert keine gezeichneten Objekte (wie zum Beispiel Rechtecke, Ovale und Polygone), keine Filmdateien (abgesehen von SWF-Dateien), Hyperlinks (abgesehen von auf Text verweisende Hyperlinks), eingefügten Objekte (einschließlich eingefügten Illustrator
Bildern), keinen in Pfade konvertierten Text, keine XML-Tags, Bücher, Lesezeichen, Glyphen [22], Indexmarken, Objekte auf der Montagefläche oder Musterseitenobjekte (es sei denn, diese wurden manuell überschreiben oder vor dem Export ausgewählt).
InDesign bestimmt die Lesereihenfolge von Seitenobjekten durch Scannen von links nach rechts und von oben nach unten. Manchmal werden die Design-Elemente nicht in der gewünschten Lesereihenfolge angezeigt – dies kann insbesondere bei komplexen Dokumenten mit mehreren Spalten vorkommen. Das Gruppieren zusammengehöriger Elemente kann die Lesereihenfolge beim Export beeinflussen.
[Abb.: 4.02]
Splashscreen QuarkXPress
[23]
W3C (World Wide Web
Consortium):
Gremium zur Standardisierung der das World Wide Web
betreffenden Techniken
QuarkXPress ist ein rahmenorientiertes Layoutprogramm des US-amerikanischen Herstellers Quark Inc. und gehört mit InDesign zu den marktführenden DTP-Layoutprogrammen. QuarkXPress verfügt wie Adobe InDesign über zahlreiche im Bereich der Printmedien unverzichtbare Funktionen.
Seit QuarkXPress 5 können mit dem Programm auch direkt HTML-Webseiten erstellt werden, ohne auf externe Programm zugreifen oder sich mit HTML auseinanderzusetzen müssen.
Aufgrund der Tatsache, dass diese Ausarbeitung den Schwerpunkt auf die Layoutapplikation Adobe InDesign setzt, werden die Konvertierungsvarianten mit QuarkXPress teilweise gekürzt, teilweise auch nur auf kurze Stichpunkte verweisend beschrieben.
4.2.1
QXML-Schema
Wichtigster Unterschied zu den bisherigen Xpress-Versionen ist das völlig neue Dateiformat von Xpress 7. Quark setzt dabei mit QXML (Quark Xpress Markup Language) auf ein offenes Dateiformat, das die Spezifikationen von W3C [23] und Xpath berücksichtigt.
So lassen sich alle Bestandteile eines Xpress-Projektes als XML verfügbar machen, was die Weiterverarbeitung für andere Programme oder Ausgabegeräte erleichtert. Um Databased Publishing in Xpress zu erleichtern, hat Quark der Layoutsoftware die so genannte Personalized Print Markup Language (PPML) hinzugefügt. So sollen sich Xpress-Projekte besser für verschiedene Layouts in Print und Web aufbereiten lassen.
Per Quark XPress-DOM-Schnittstelle werden Dokumente für XTensions schreib- und lesbar. Somit sollen alle Bestandteile eines Layouts als XML verfügbar sein, um in weiteren Programmen oder ganzen Workflows problemlos und einheitlich verarbeitet werden zu können. Um die Entwicklungsarbeit noch weiter zu vereinfachen, stellt QXML QuarkXPress Projekte als XML-Baum dar. Alle Modifikationen an den XML Dateien wirken sich direkt auf das QuarkXPress Projekt aus.
4.2.2
HTML-Funktionen
Im Gegensatz zu anderen Programmen für die Webseitengestaltung ist QuarkXpress kein HTML-Editor. Das Web-Layout ist nur eine spezielle Benutzerumgebung zur Gestaltung von Webseiten, die man anschließend in das HTML-Format ex
portiert. Muss am Layout etwas geändert werden, öffnet man das XPress-Projekt, macht die Korrekturen und exportiert erneut in das HTML-Format.
Beim Gestalten eines Web-Layouts lassen sich die gewohnten XPress-Werkzeuge einsetzen; Funktionen, die in einem HTML-Dokument nicht umsetzbar sind, schaltet XPress aus.
Eine weitere Möglichkeit ein Web-Layout zu erzeugen, ist die Umwandlung eines Print-Layouts. Eine saubere HTML-Datei bekommt man dadurch aber nicht, denn QuarkXPress exportiert alle Elemente des umgewandelten Print-Dokumentes als Bildelemente, auch die Textrahmen!
4.2.3
Konvertierung der Dokumente in das InDesign-Format
InDesign kann Dokumente aus QuarkXPress 3.3 oder 4.1x konvertieren. Zum Konvertieren von Dokumenten aus QuarkXPress 5.0 oder höher müssen die Dokumente in QuarkXPress geöffnet und im 4.0-Format gespeichert werden.
Dateien aus QuarkXPress 5.x, 6.x und 7.x sind in einem Spezialformat gespeichert, sodass InDesign diese Dateien nicht direkt öffnen kann, um sie dann in InDesign-Dateien umzuwandeln.
Wenn man ein QuarkXPress-Dokument in InDesign öffnet, wird ein neues, nicht benanntes Dokument erstellt. InDesign konvertiert dann die ursprünglichen Dateiinformationen in programmeigene InDesign-Informationen.
QuarkXPress-Objekte in InDesign:
– Textfelder: werden in InDesign-Textrahmen umgewandelt. Damit die in QuarkXPress festgelegten Umfluss-Einstellungen korrekt in InDesign-Konturenführungen umgewandelt werden, aktiviert man die Option „Konturenführung wirkt sich nur auf Text unterhalb aus“.
– QuarkXPress-Stilvorlagen: werden in InDesign-Formate umgewandelt.
– Farbprofile: werden ignoriert, da XPress andere Profile verwendet.
– Text- und Grafik: werden im Verknüpfungenbedienfeld angezeigt.
– Musterseiten und Ebenen: werden zu
InDesign-Musterseiten und -Ebenen.
– Gruppierte Objekte: bleiben gruppiert, sofern keine nicht druckbaren Elemente enthalten sind.
– Konturen und Linien: werden in die Konturenstile konvertiert. Benutzerdefinierte Konturen und Striche in QuarkXPress werden in InDesign-eigene benutzerdefinierte Konturen und Striche konvertiert.
– Farben: werden exakt in InDesign-Farben konvertiert. Aus mehreren Druckfarben bestehende Farben aus QuarkXPress werden in InDesign den entsprechenden Mischdruckfarben zugeordnet. QuarkXPress 4.1-Farben aus der Farbbibliothek werden anhand ihrer CMYK-Werte konvertiert.
5. Web-Komponenten –
im Detail
[24]
Robot:
Computerprogramm,
das automatisch das World Wide Web durchsucht und
Inhalte analysiert
5.1 Statische HTML-Seiten
Durch die Verwendung von dynamischem HTML kann die Benutzerfreundlichkeit von Webseiten verbessert werden.
Während eine normale HTML-Seite nach dem Abruf statisch und unveränderlich ist (von Hover-Effekten mit CSS einmal abgesehen), können Seiten mit dynamischem HTML weitere Funktionalität bieten, etwa Teile der Seite verändern oder animieren.
Der Begriff kann leicht mit dynamischen Webseiten verwechselt werden; damit werden Webseiten bezeichnet, die vor dem Abruf durch den Webbrowser vom Server generiert werden (etwa durch ein PHP-Script), während Webseiten mit dynamischen HTML durch Scripting dynamisiert werden, welches nach dem Abruf im Browser ausgeführt wird.
Beide Techniken können auch kombiniert werden, viele Anwendungsfälle von dynamischen HTML ergeben ohne dynamisch auf Serverseite generiertem Inhalt sogar kaum Sinn.
Diese Notwendigkeit ergibt sich aus dem Bedürfnis, auf Eingaben des Benutzers dynamisch reagieren zu können.
5.2 Dynamische HTML-Seiten/
Dynamische Webseiten
Als statische HTML-Seiten werden Webseiten bezeichnet, deren Inhalte für die Anzeige nicht aus einer Online-Datenbank gelesen und vom Webserver zur sichtbaren Seite zusammengesetzt werden müssen.
Sie werden – eben weil sie nicht aus einer Datenbank stammen und nicht erst beim Abruf erzeugt werden müssen – besonders schnell angezeigt.
Ein wichtiger Vorteil von statischen HTML-Seiten ergibt sich aus der Art und Weise, wie Suchmaschinen-Robots [24] die Internetseiten in ihren Index aufnehmen.
Robots von Google lesen HTML-Code und folgen den darin enthaltenen Links.
Inhalte aus Datenbanken, die erst beim Aufruf zu Webseiten zusammengesetzt werden, können, je nachdem welche Technik verwendet wird, nicht von den Robots indiziert werden. Ein klarer Nachteil vieler Content Management Systeme.
Die Auszeichnungssprache HTML wurde vom World Wide Web Consortium (W3C) bis Version 4.01 weiterentwickelt und soll durch (X)HTML ersetzt werden.
Da Kosten für die Pflege von umfangreichen Webseiten auf Dauer unrentabel werden, haben sich in den vergangenen Jahren Content Management Systeme für die Verwaltung der Inhalte durchgesetzt.
Häufig werden Content Management Systeme (CMS) als Redaktionssysteme bezeichnet, da sie vor allem von Redakteuren für die regelmäßige Pflege und Aktualisierung der Inhalte genutzt werden.
Neben der Erstellung und Bearbeitung der Inhalte ermöglicht ein CMS auch dessen Organisation. Durch Trennung von Inhalt, Struktur und Design tragen diese Systeme dazu bei, dass eine Ausgabe der Inhalte in verschiedenen Formaten möglich ist und dabei die Einhaltung eines vom Corporate Design vorgegebenen Gestaltungsrasters gewährleistet bleibt. Auch der Import und Export von Daten auf XML-Basis gehört mittlerweile zum Standard.
Das sogenannte Template (Vorlage) ist das Herz einer CMS-Internetpräsenz. Es besteht aus mehreren Dateien (HTML, CSS, Bilder) die das Grundgerüst und Layout der Seite bestimmen. Es werden spezielle Markierungen gesetzt, die später vom CMS automatisch mit den entsprechenden Inhalten gefüllt werden. Die gesamte optische Erscheinung eines Internetauftrittes kann in einem einzigen statischen Template festgelegt werden und garantiert dadurch ein einheitliches Erscheinugsbild. Selbstverständlich können aber bei Bedarf für verschiedene Bereiche (beispielsweise Unterseiten) eines Auftrittes auch verschiedene Templates angelegt werden.
Je nach Komplexität und Leistungsfähigkeit des Systems kommen detaillierte Benutzer- und Rechteverwaltungen sowie Steuerungen ganzer Arbeitsprozesse hinzu. Zugangskontrollen basieren auf einer Benutzerverwaltung, die die Rechte der einzelnen Benutzer kennt. Während der Anmeldung weist sich der Benutzer zunächst aus und basierend auf den Berechtigungen wird entschieden welche Interaktionen das CMS ihm gestattet.
Während einfache Systeme möglicherweise nur globale Lese- und Schreibrechte kennen, erlaubt ein High-end-System die individuelle Kontrolle aller Objekte im CMS, also zum Beispiel des Layouts, der Textblöcke, Bilder und Code-Blöcke.
Damit Webseiten im Hinblick auf Funktionsumfang und Leistungsfähigkeit erweitert werden können, sollten Content Management Systeme eine schnelle und einfache Integration zusätzlicher Bestandteile ermöglichen. Oftmals existieren bereits fertige Module für die gängigsten Erweiterungen. Gerade bei Systemen auf Open Source Basis gibt es eine große Entwicklergemeinde die viele und auch qualitativ hochwertige Erweiterungen produzieren und zur freien Verfügung bereitstellen.
5.3 Content Management
Systeme
[27]
Rich Text Editor (RTE):
Programm zum Erstellen und Bearbeiten von Textformatierungen und wird in webbasierten Anwendungen zur Formatierung von Inhalten verwendet
[26]
GNU/GPL:
General Public License (GPL), Lizenz mit Copyleft für die
Lizensierung freier Software
[25]
DBMS-Ebene:
Verwaltungsebene eines
Datenbanksystems
Während einfache Systeme bei der Datensicherung kaum Möglichkeiten bieten, lassen datenbankbasierte CMS wenigstens die Datenbankreplikation auf DBMS-Ebene [25] zu. High-End CMS dagegen bieten sowohl Mechanismen für die explizite Sicherung von Teilbeständen als auch den Rollback basierend auf einer Protokollierungsfunktion.
Protokollfunktionen erfassen Bestandsänderungen der Datenbankinhalte und der Rollback macht Änderungen an Inhaltsbeständen so rückgängig, dass die Bestände auch nach der Wiederherstellung in einem definierten Zustand und in sich konsistent sind.
Content Management Systeme müssen mehrplatzfähig sein, damit mehrere Bearbeiter gleichzeitig an Inhalten arbeiten können, ohne sich gegenseitig zu behindern. Beim Check-Out teilt zum Beispiel ein Benutzer dem CMS mit, dass er die Inhalte x, y und z zur Bearbeitung haben möchte. Das CMS stellt die Inhalte zur Verfügung und markiert sie. Bis der Benutzer die Inhalte wieder per Check-In zurückgegeben hat, kann kein anderer sie verändern.
TYPO3 ist ein kostenloses Content Management Framework auf Open Source Basis (GNU/GPL) [26], welches von Kasper Skårhøj entwickelt wurde. TYPO3 basiert auf der serverseitigen Skriptsprache PHP und verwendet als Datenbank meist MySQL.
Zur Content-Pflege nutzt TYPO3 einen normalen Web-Browser als Editor. Es ist also keine weitere Software notwendig. TYPO3 verfügt auch über einen Rich Text Editor (RTE) [27]. Damit können Texte so eingegeben und formatiert werden, wie man es von einem Textbearbeitungsprogramm gewöhnt ist.
5.4.1
TypoScript
TYPO3 verfügt zur Template-Erstellung über eine eigene Konfigurationssprache namens TypoScript, mit der die Darstellung des Inhalts gesteuert wird. HTML-Dateien, die das Grundgerüst des Webauftritts bilden, können mit TypoScript bequem eingebunden werden. Bei der dynamischen Erzeugung einer Seite werden diese sogenannten Designvorlagen dann über TypoScript mit den eigentlichen Inhalten versehen.
Obwohl der Name TypoScript danach klingt, handelt es sich nicht um eine Skript- oder Programmiersprache im eigentlichen Sinn, sondern vielmehr um
eine Aneinanderreihung von Befehlen, mit denen eine TYPO3-interne Struktur gefüllt wird. TYPO3 wird intern über verschiedene PHP-Arrays gesteuert. Sie enthalten alle Informationen, die notwendig sind, um aus datenbankgespeicherten Inhalten über TypoScript-Befehle HTML-Code zu erzeugen
Durch den Einsatz von TypoScript ist es möglich, die Generierung von Menüs zu automatisieren. Das Aussehen der Elemente und die Funktionsweise werden über TypoScript-Anweisungen definiert. Das dynamische (scriptgesteuerte) Erzeugen von Bildern wird hauptsächlich bei grafischen Menüs und Elementen (Bildern) mit eingebetteten Textinformationen angewendet. Das gewinnt immer dann an Bedeutung, wenn eine spezielle Schriftart verwendet wird, deren Vorhandensein auf den Zielrechnern nicht vorausgesetzt werden kann.
5.4.2
TYPO3 Extensions
TYPO3 kann auf vielen Ebenen erweitert werden. Die Architektur ermöglicht nicht nur die Datenverarbeitung mit eigenen PHP-Skripten, Klassen und Funktionen, sondern auch das Einfügen von eigenen Backend-Modulen, Webseiten-Plugins und Datenbanktabellen.
TYPO3 Erweiterungen (Extensions) sind vorgefertigte Module, werden einem gewünschten Design angepasst und ersparen sehr viel Entwicklungsarbeit. Beispiele für Extensions sind: News, Newsletter, FAQ, Shop, Suche, Statistik und Bewertung.
5.4.3
MySQL
TYPO3 basiert auf einer internen MySQL-Datenbank. Innerhalb dieser Datenbank werden Inhalte aus verschiedenen Tabellen verwaltet.
Übersicht über die wichtigsten Tabellen der TYPO3-MySQL-Datenbank:
– Tabellen mit be_ enthalten die
Backend-Funktionalität
– Tabellen mit cache_ dienen dem
Seiten-Cache
– Tabellen mit fe_ enthalten die
Frontend-Funktionalität
– Tabellen mit index_ gehören zur
index-Suche (sys-Extension)
– Tabelle pages hier liegen die
Inhalte der einzelnen Seiten
– Tabellen mit static_ sind reine Hilfstabellen
– Tabellen mit sys_ sind Systemdaten
– Tabellen mit tt_ sind von älteren
Extensions (früher systemintern)
– Tabellen mit tx_ sind Extensions
Jede neu angelegte Seite in TYPO3 wird in der MySQL-Datenbank (in der Tabelle pages) gespeichert und jede dieser Seiten hat eine eindeutig zugewiesene Zeilennummer. Diese wird beim Mouseover über dem Seitensysmbol vor einer Seite angezeigt.
[Abb.: 5.02]
Benutzeroberfläche von TYPO3
5.4.4
Die Benutzeroberfläche von TYPO3
Die Arbeitsoberfläche von TYPO3 ist in drei Hauptbereiche unterteilt: Modulleiste, Navigationsansicht und Detailansicht.
Modulleiste: TYPO3 beinhaltet verschiedene Module zur Verwaltung und Bearbeitung der Webseite. Folgende wichtige Modulbereiche stehen dem Bearbeiter für die Pflege der Inhalte des Content Managements Systems zur Verfügung: Web, Datei und Benutzer.
Navigationsansicht: In der Navigationsansicht wird die komplette Seitenstruktur baumartig visualisiert. Es stehen zwei Seitenbäume zur Verfügung. Zum einen die Struktur der gesamten Webseite, bei der sich alle Inhalte anzeigen und kopieren lassen – je nach Berechtigung des Benutzer auch verändern und löschen lassen. Zum anderen die Struktur des eigenen Arbeitsbereiches, auf dessen Inhalte man vollen Zugriff zur Bearbeitung hat.
Detailansicht: Die Detailansicht (auch Datenansicht) stellt die eigentliche zentrale Arbeitsoberfläche für den Nutzer dar. In diesem Bereich werden die Details zu den in der Navigationsansicht ausgewählten Elementen angezeigt. Die Bearbeitungsoptionen (und damit auch die Art der Darstellung in der Detailansicht) sind abhängig von dem jeweiligen Modul, welches gerade benutzt wird. Die Detailansicht bietet dem Benutzer ebenfalls die für die einzelnen Objekte spezifischen Kontextmenüs an.
[Abb.: 5.05]
Modulbereich Benutzer
[Abb.: 5.03]
Modulbereich Web
[Abb.: 5.04]
Modulbereich Datei
Modulbereich Web: Der Modulbereich Web wird für den Benutzer der am häufigsten verwendete sein. Hier befinden sich die Module zur Pflege der Inhalte.
– Seite: Seiten können angelegt und Inhaltselemente eingegeben und bearbeitet werden.
– Anzeigen: Seiten können vor der Veröffentlichung in der Vorschau angezeigt und in Vorschau direkt editiert werden.
– Liste: Mehrere Seiten und Inhaltselemente können bearbeitet, kopiert oder gelöscht werden.
Modulbereich Datei: Der Modulbereich Datei liefert eine Übersicht über die verwendeten Ressourcen. An dieser Stelle können Dateien hochgeladen und verwaltet werden.
– Dateiliste: Zeigt die auf dem Server geladenen Dateien an und ermöglicht weitere Dateien hochzuladen oder zu löschen.
Modulbereich Benutzer: Im Modulbereich Benutzer kann jeder Benutzer des Systems Einstellungen zu seinem Benutzeraccount und seiner persönlichen Oberfläche machen.
– Aufgaben: Hier können eigene Notizen gemacht und verwaltet werden sowie anderen Benutzern des Arbeitsbereiches Nachrichten hinterlassen werden.
– Einstellungen: Hier können individuelle Ansichts-Einstellungen der Benutzeroberfläche und Sicherheitseinstellungen des Accounts vorgenommen werden.
6. Möglichkeiten zur
Konvertierung
[29]
Jaws PDF Library: Funktionsbibliothek zur Konvertierung von PostScript zu PDF und von PDF zu PostScript
[Abb.: 6.03] (links)
PDF-Export aus Adobe InDesign
[Abb.: 6.04] (rechts)
Einstellungen beim PDF-Export
[Abb.: 6.01] (links)
PDF-Export aus QuarkXPress
[Abb.: 6.02] (rechts)
Einstellungen beim PDF-Export
[28]
PDF/X-3: ISO-Standard,
für Übermittlung digitaler Druckvorlagen auf der
Grundlage von PDF
6.1 PDF-Export aus
Layoutapplikationen
Der PDF-Export aus Layoutapplikationen ist der klassische und vermutlich auch schnellste Weg Daten nicht nur für den Druck, sondern gleichzeitig auch für das Internet zu erzeugen. In diesem Kapitel werden die Export-Wege beider Layoutprogramme QuarkXPress und Adobe InDesign beschrieben und darüberhinaus, wie die Einbindung einer PDF-Datei sowohl in eine einfache HTML-Seite als auch in TYPO3 vorgenommen wird.
6.1.1
Konvertierungsvorgang
Ein direkter PDF-Export ist aus Adobe InDesign möglich – ohne den Umweg über den Acrobat Distiller nehmen zu müssen. Einige PDF-Standards (Druck, Monitor, PDF/X-3 [28] ) sind von Adobe schon vordefiniert. Um eigene Definitionen anzulegen, kann man diese bei den PDF-Exportvorgaben konfigurieren. Verknüpfungen und Hyperlinks für interaktive PDF sind direkt in InDesign erstellbar, der Export ist aber nicht PDF/X-3-konform.
Analog hierzu funktioniert der QuarkXPress PDF-Export. Quark nimmt aber den Umweg über eine für den Anwender nicht sichtbare, temporäre Postscript-Datei. Erst diese wird dann in ein PDF umgewandelt und gespeichert. Das Instrument hierfür ist die von Global Graphics lizensierte Jaws PDF Library [29] , die in XPress 7 integriert ist. Alternativ kann
[30]
MIME (Multipurpose Internet Mail Extensions):
Informationen über den Typ der übermittelten Daten
[Code: 6.01]
Für Verweise in HTML gibt es das Anker-Element <a>.
Damit jedoch eine Sprungmarke in ein anderes Dokument aus diesem Element wird, ist das Hyper(text)-Referenz-Attribut href erforderlich.
man auf die Umwandlung in ein PDF durch das Layoutprogramm verzichten, nur die Postscript-Datei exportieren und diese dann anschließend mithilfe des Acrobat Distillers in ein PDF konvertieren.
6.1.2
Anforderungen an PDF-Dokumente
Dokumente für eine Verbreitung im Internet sollten vier Kriterien erfüllen:
– eine geringe Dateigröße für einen schnellen Download
– bildschirmoptimierte Auflösungen
– interaktive Navigationshilfen
– echte Internet-Links zu anderen
Internetseiten
Oft erfahren PDF-Dateien für das Internet nur eine sehr mangelhafte Aufbereitung: Lediglich die Layoutdaten werden präsentiert, ohne jedoch Navigationshilfen zu bieten oder den Inhalt der PDF-Datei flexibel zu halten. Besonders umfangreiche Dokumente verderben dem Betrachter die Lust, am Bildschirm durch Hunderte von Seiten zu navigieren. Schaltflächen, Hyperlinks, Anker oder Lesezeichen werden erst dann in eine PDF-Datei exportiert, wenn die entsprechenden Optionen aktiviert wurden.
6.1.3
Manuelle Einbindung ins Web
Standardmäßig kann ein Browser nur Texte und Bilder anzeigen. Doch die Browser können mehr: Die Schlagworte sind hier MIME [30] (Multipurpose Internet Mail Extentions), Plugins und Hilfsprogramme. Die sogenannten MIME-Typen legen fest, welche Medien erlaubt sind, in welchem Format sie kodiert und wie sie gekennzeichnet sind. Letzteres erfolgt durch die Dateinamenserweiterung.
Die wichtigsten MIME-Typen sind:
– Hypertext-Dokumente .html .htm
– Plain-Text-Dokumente .txt
– Postscript-Dokumente .ps .eps
– PDF-Dokumente .pdf
– Bilder im GIF-Format .gif
– Bilder im JPEG-Format .jpg .jpeg
– Video im MPEG-Format .mpg .mpeg
– Flash Shockwave-Dateien .swf
– Audio im WAVE-Format .wav .wave
– Real Audio-Sequenzen .ra .ram
– Zip-komprimierte Dateien .gz .zip
Fehlt eine solche Festlegung für einen MIME-Typ, so wird der Browser häufig damit nichts anfangen können. In der Regel wird gefragt, was mit der Datei gemacht werden soll. Diese kann dann höchstens lokal gespeichert werden. Bei neueren Browser-Versionen wird der Benutzer alternativ gefragt, ob ein Zusatzprogramm installiert werden soll.
Bei den Hilfsprogrammen unterscheidet man Plugins und Helper. Bei Aktivierung eines der Multimedia-Formate werden Plugins im Browserfenster gestartet. Helper werden dagegen als getrennte Anwendung in einem gesonderten Fenster gestartet. Die Einbindung eines PDF-Dokumentes in eine HTML-Seite geschieht relativ einfach über folgenden Aufruf:
<a type=“application/pdf“ href=“pfadangabe/beispiel.pdf“>
Zum PDF-Dokument</a>
[31]
Filelink (TS):
http://wiki.typo3.org/
index.php/De:TSref/filelink
[Abb.: 6.05]
Betrachtung einer PDF-Datei
in einem Browser
[Code.: 6.02]
Das #-Zeichen leitet eine
Kommentarzeile ein.
Die Ziffer 10 ist eine Speicherposition im Array und dieser wird ein TEXT-Objekt mit
dem Wert beispiel.pdf und dem Funktionsaufruf
filelink { } zugewiesen.
Die Speicherpositionen können in beliebiger Reihenfolge
deklariert, aber nur in fester Abfolge ausgegeben werden.
6.1.4
Inhalts- und Navigationskomponenten im Browser
PDF-Dateien können entweder mit der Helper-Applikation Adobe Reader gelesen werden, oder über das Browser-Plugin geladen werden. Nach einem Klick auf ein PDF-Dokument im Internet startet der Browser das Programm Adobe Reader automatisch im Hintergrund und das PDF steht dann zum Lesen im Browser selbst zur Verfügung.
Die Adress- und Navigationsleisten des Browsers bleiben erhalten – der Adobe Reader ist Teil des Browsers geworden. Eine weitere Navigationsleiste des PDF-Plugins sorgt für eine Blätter-Möglichkeit durch die einzelnen Seiten des PDF-Dokumentes, für die Vergrößerung und die Positionierung der Dokumenteninhalte sowie zum Speichern, Kommentieren und Drucken.
Man kann PDF-Dokumente zum einen nach dem Inhalt durchsuchen lassen; oft sind PDFs aber auch mit einem Inhaltsverzeichnis versehen, das man sich auf der linken Seite des Readerfensters anzeigen lassen kann. In der Seitenleiste hat man dann die Wahl zwischen einer Bookmark und einer Inhaltsverzeichnisansicht (sofern ein solches vom Autor angelegt worden ist), der Ansicht der Seiten in verkleinerter Form als Bild (Thumbnails) sowie der eventuell im Dokument vorhandenen Kommentare und Signaturen.
6.1.5
Automatische Einbindung in ein CMS (TYPO3)
Alle PDF-Dateien, die in das System eingebunden werden sollten, müssen im Modulbereich Datei in dem Modul Dateiliste des TYPO3 Backends oder per FTP auf den Server hochgeladen werden. Systembedingt besteht die Möglichkeit, Dateien in die einzelnen Inhaltselemente direkt einzubinden, allerdings können hier hochgeladene Dateien global nicht weiterverwendet werden.
Filelink (TypoScript) [31] – Erstellt eine Verlinkung und bietet die Möglichkeit ein Icon für den Dateityp, die Dateigröße oder eine Vorschau anzeigen zu lassen.
# Ein Link auf das PDF-Dokument wird ausgegeben.
10 = TEXT
10.value = beispiel.pdf
10.filelink {
path = pfadangabe/
icon = 1
icon.wrap = |
icon_link = 1
size = 1
size.noTrimWrap = | (| Bytes) |
stdWrap.wrap = <div>|</div>
}
[33]
Livepaper:
http://www.livepaper.de/
[32]
Adobe Digital Editions:
http://www.adobe.com/
products/digitaleditions/
[34]
Zitat:
http://wirres.net/article/
articleview/2917/1/6/
[Abb: 6.06] (links)
Ausgabe einer ADE-Beispielumsetzung im Adobe Digital Editions Reader
[Abb: 6.07] (rechts)
Darstellung eines
Konversats mithilfe der
Livepaper-Technologie
6.2 Konvertierung auf Flash-Basis
(ADE/Livepaper/speedPaper)
Unter den Stichwort Flash und ePaper findet man bei Google mittlerweile viele Anbieter, die ihre Flash-basierten Konverter oder ihre Dienstleistung in diesem Segment anbeiten. Drei dieser Techniken mit jeweils unterschiedlichen Konzepten werden in diesem Kapitel näher erläutert.
6.2.1
Adobe Digital Editions (ADE) [32]
Für die Ausgabe aus Adobe InDesign wurde die Möglichkeit geschaffen, Dateien für elektronische Bücher zu exportieren. Das Konzept nennt sich Adobe Digital Editions und basiert auf einem kodierten (X)HTML-Format, welches über einen Server verschlüsselt und nur mit einem speziellen Reader betrachtet werden kann. Digital Editions unterstützt sowohl das PDF-Format als auch (X)HTML-basierte, flexible Darstellungsformate, sodass Inhalte unabhängig von Displaygrößen und Ausgabegeräten im optimalen Layout angezeigt werden können. Mit der Adobe Rich Internet Applikation (RIA) auf Basis von Adobe Flash lassen sich multimediale, dynamische Elemente nutzen und außerdem viele Einschränkungen des Web umgehen.
6.2.2
Livepaper [33]
Die Technik des „Livepaper“ hat Gruner + Jahr zugekauft, als sie Anfang 2007 den Entertainment Media Verlag übernahmen.Die PDF-Dateien werden direkt in die livepaper-Software geladen und von dieser in eine blätterbare Flash-Ausgabe umgewandelt. Über eine Audio- und Video-Datenbank können Videos, Grafiken, Soundfiles und Animationen verknüpft werden.
„[..] kein drucken, kein speichern, kein
cut & paste, kein kopieren, kein direktes linken, kein zitieren, keine Barrierefreiheit, keine Suchmaschinenindexierung, kein Abruf mit leistungsschwachen Geräten (Handy, Pocket PC, Palm), kein gewohntes User-Interface mehr, kein Abschalten von blinken und quieken [...]“ [34]
Leider wird beim Livepaper das Dokument nur optisch aufgebessert. Die Schriftinformation geht bei der Umwandlung verloren und somit wird die Durchsuchbarkeit des Dokumentes nach Inhalten unmöglich und der Suchmaschinenoptimierungsgrad tendiert gegen Null.
[37]
DRM (Digital Rights
Management):
Verfahren zur kontrollierten Nutzung und Verbreitung
digitaler Medien
[36]
Adobe Flex Technologie:
Entwicklungsframework
zum Erstellen von
Rich Internet Applications (RIA)
[38]
Adobe-LiveCycle-PolicyServer:
Serverbasiertes Sicherheitssystem zur dynamischen
Steuerung von PDFs
[35]
speedPaper:
http://www.speedpaper.com/
[Abb.: 6.08]
Ergebnis einer
ePaper-Konvertierung mittels speedPaper-Technologie
6.2.3
speedPaper [35]
speedPaper ist eine webbasierende Dokumentenmanagement- und ePaper-Lösung, die es ermöglicht Print-Dokumente im Internet zu präsentieren. Der entscheidende Vorteil gegenüber anderen ePaper-Technologien liegt beim speedPaper in der Darstellungsqualität selbst bei kleinsten Datenmengen. Mithilfe einer intelligenten Datenbank bekommt der Benutzer nur relevante Seiten „on demand“ dargestellt, ohne Unmengen an Daten herunterladen zu müssen.
speedPaper lässt sich aus Adobe InDesign oder jedem anderen Programm als PDF publizieren, ist plattformunabhängig und benötigt lediglich einen installierten Adobe Flash-Player. Die Inhalte liegen als Textinformationen vor, damit lassen sich einfach Verlinkungen und Verknüpfungen herstellen und das Dokument bleibt für Suchmaschinen indizierbar.
speedPaper basiert auf Adobe Flash/Flex Technologie [36] und ermöglicht somit sowohl die Anreicherung der Dokumente mit Multimedia-Inhalten als auch den Einsatz auf Mobile Devices. Durch DRM (Digital Rights Management) [37] und dem Adobe-LiveCycle-PolicyServer [38] können die Inhalte geschützt werden und nur für bestimmte Benutzergruppen zugänglich gemacht werden.
6.2.4
Manuelle Einbindung ins Web
Zum Einbinden von Flash-Dateien gibt es verschiedene Ansätze. Die beiden ältesten Verfahren entsprechen den Techniken zur Einbindung von Plugins, die Netscape und Microsoft unabhängig voneinander für ihre Browser entwickelten. Der Netscape Navigator erwartete ursprünglich die Einbindung über das Netscape-eigene embed-Element. Der Microsoft Internet Explorer hingegen erwartete, dass die Flash-Anwendung als ActiveX-Control eingebunden wird.
<object classid=“CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000“ width=“600“ height=“400“ codebase=“http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0“>
<param name=“movie“ value=“beispiel.swf“/>
<param name=“quality“ value=“high“/>
<param name=“scale“ value=“exactfit“/>
<param name=“menu“ value=“true“/>
<param name=“bgcolor“
value=“#000000“/>
<embed src=“beispiel.swf“ quality=“high“ scale=“exactfit“ menu=“false“
bgcolor=“#000000“ width=“600“ height=“400“ swLiveConnect=“false“
type=“application/x-shockwave-flash“
[40]
Multimedia-Objekt (TS):
http://www.typo3.net/tsref/cobject/multimedia/
[39]
HTML-4-Standard: Zum internationalen Standard ISO 8879 konforme SGML-Anwendung –
(X)HTML 1.0 ist eine
Reformulierung von HTML 4 auf Basis von XML
[Code: 6.03]
Einbindung einer Flash-Datei mit der klassischen
<object> - <embed> -
Kombination
[Code: 6.04] (links)
Einbindung einer Flash-Datei gemäß (X)HTML-Standard
[Code: 6.05]
Einbindung einer Flash-Datei
in TYPO3 in Form eines HTML-Objektes in einem <div>-Container
pluginspage=“http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash“>
</embed>
</object>
Diese umständliche doppelte Einbindung mit <object> und einem darin verschachtelten <embed> hat sich als robust erwiesen, der Nachteil dabei ist jedoch, dass ein HTML-Element verwendt wird, welches nicht zum HTML-Standard gehört. Die im HTML-4-Standard [39] geschaffene allgemeine Möglichkeit des Einbindens von Datendateien als Objekt ist auch zum Einbinden von Flash-Dateien zu gebrauchen. Damit existiert eine einheitliche, browserübergreifende Schreibweise.
<object data=“beispiel.swf“ type=“application/x-shockwave-flash“ width=“600“ height=“400“>
<param name=“movie“ value=“beispiel.swf“/>
<param name=“quality“ value=“high“/>
<param name=“scale“ value=“exactfit“/>
<param name=“menu“ value=“true“/>
<param name=“bgcolor“
value=“#000000“/>
</object>
6.2.5
Automatische Einbindung in ein CMS (TYPO3)
Alle Flash-Dateien, die in das System eingebunden werden sollen, müssen im Modulbereich Datei in dem Modul Dateiliste des TYPO3 Backends oder per FTP auf den Server hochgeladen werden.
Systembedingt besteht die Möglichkeit, Dateien in die einzelnen Inhaltselemente direkt einzubinden, allerdings können hier hochgeladene Dateien global nicht weiterverwendet werden.
Multimedia-Objekt (TypoScript) [40] – für die Einbettung von Multimedia-Objekten setzt TYPO3 standardmäßig das Element <embed> ein. Aus diesem Grund müssen alle Objekte über das Inhaltselement HTML eingebunden werden, damit die Einbettung des Flash-Elementes standardkonform und barrierefrei erfolgen kann.
Generell wird auch die Verwendung eines Javascriptes zur Abfrage der Flash-Funktionalität des Browsers empfohlen.
# Erzeugt ein Flash-HTML-Objekt in einem div-Container.
10 = HTML
10.value=<div>
20 = TEXT
20.value=
<object data=“fileadmin/beispiel.swf“ type=“application/x-shockwave-flash“ width=“600“ height=“400“>
<param name=“movie“ value=“fileadmin/beispiel.swf“/>
<param name=“quality“ value=“high“/>
<param name=“scale“ value=“exactfit“/>
<param name=“menu“ value=“true“/>
<param name=“bgcolor“
value=“#000000“/>
</object>
30 = HTML
30.value=</div>
[41,42]
„BatchXPort Pro“ und
„Batch XSLT (for InDesign)“ sind Produkte von Andreas Imhof, EDV-Dienstleistungen,
www.aiedv.ch
[Abb.: 6.09]
Scripting-Palette
von Adobe InDesign
Ersetzung bestimmter
Zeichen im Dateinamen
für eine sichere Verarbeitung
Dateinamen-Extraktion zur
Benennung der Komponenten
Festlegung
globaler Variablen,
Funktionsaufruf
6.3 BatchXSLT – XML-Konvertierung
aus Layoutapplikationen
Ein interessanter und besonders vielversprechender Ansatz ist die Aufbereitung von Layoutdokumenten auf XML-Basis. Im Gegensatz zu dem programmeigenen XML-Export bei dem ausschließlich vorher mit diversen Tags versehene Inhalte exportiert werden, sind mit „BatchXSLT [41] “ auch unbehandelte InDesign-Dokumente exportierfähig. Da die Layoutapplikation Adobe InDesign ein Schwerpunkt dieser Ausarbeitung ist, wird in diesem Kapitel nur diese Möglichkeit beschrieben.
QuarkXPress-Dokumente können auch – nachdem diese in das InDesign-Format konvertiert wurden – entsprechend aufbereitet werden. Für eine native Dokumentverarbeitung gibt es die Software „BatchXPort Pro [42] “, die aber hier nicht weiter besprochen wird.
6.3.1
Vorbereitungen für die Konvertierung
Aus dem InDesign-Dokument werden per Javascript automatisch alle zur Konvertierung benötigen Komponenten exportiert.
Notwendige Bestandteile sind zum einen das im Austausch-Format (INX) abgebildete InDesign-Dokument und zum anderen der Export jeder einzelnen Seite als JPG- und PDF-Datei. Das Javascript im Detail:
//BXSLTExport.jsx
function doDocumentExport(theExportFolder) {
var pageName, theFilePath, aFile;
var theDocument = app.documents.firstItem();
var theDocumentName = theDocument.name;
var theBaseDocumentName = theDocumentName;
// get the document name without file extension
if (theBaseDocumentName.indexOf(„.indd“) > 0) {
theBaseDocumentName = theBaseDocumentName.substr(0,theDocumentName.lastIndexOf(„.indd“));
}
// replace unwanted chars in filename: / - Ñ . ! ~ * Ô ( )
theBaseDocumentName = theBaseDocumentName.replace(/\//,“s“);
while (theBaseDocumentName.charAt(theBaseDocumentName.length - 1) == „.“) {
theBaseDocumentName = theBaseDocumentName.substr(0,theBaseDocumentName.length - 1);
}
Export des Dokumentes
im InDesign-Interchange- Format
Dateinamen der Einzelseiten
Festlegen der
JPEG-Exporteinstellung,
Export der Seiten-JPEGs
Funktionsschleife für Daten-
Export jeder einzelnen Seite
Festlegen der
PDF-Exporteinstellung
// export the whole document to a single INX file
if (inxExists == false) {
//$.writeln(„*** BXSLTExport: Exporting Document to INX“);
theFilePath = theExportFolder + „/“ + theBaseDocumentName + „.inx“;
aFile = new File(theFilePath);
theDocument.exportFile(inxExportFormatString, aFile, false); // for CS2
}
// Export PDF and JPEG page per page
for (var ctr = 0; ctr < theDocument.pages.length; ctr++) {
sectionName = theDocument.pages.item(ctr).appliedSection.name;
pageName = sectionName + theDocument.pages.item(ctr).name;
// The name of the exported files will be: documentName + pageStr + „.pdf“
var pageStr = „“ + (ctr + 1); // the page number string
if (ctr == 0) pageStr = „“; // none for page #1
var theFilePathBase = theExportFolder + „/“ + theBaseDocumentName + pageStr;
// export to PDF
if (pdfExists == false) {
//$.writeln(„*** BXSLTExport: Exporting Page #“ + (ctr + 1) + „ to PDF“);
$.sleep(500);
app.pdfExportPreferences.pageRange = pageName;
// set here your PDF preferences if you want others than the current defaults
theFilePath = theFilePathBase + „.pdf“;
aFile = new File(theFilePath);
theDocument.exportFile(ExportFormat.pdfType, aFile, false);
}
// export page to JPG
if (jpgExists == false) {
//$.writeln(„*** BXSLTExport: Exporting Page #“ + (ctr + 1) + „ to JPEG“);
$.sleep(500);
app.jpegExportPreferences.jpegExportRange = ExportRangeOrAllPages.exportRange;
app.jpegExportPreferences.pageString = pageName;
app.jpegExportPreferences.jpegQuality = JPEGOptionsQuality.maximum;
app.jpegExportPreferences.jpegRenderingStyle = JPEGOptionsFormat.baselineEncoding; // or progressiveEncoding
theFilePath = theFilePathBase + „.jpg“;
aFile = new File(theFilePath);
theDocument.exportFile(ExportFormat.jpg, aFile, false);
}
}
}
[45]
DTD (Dokumenttypdefinition):
Regelsatz, um Dokumente eines bestimmten Typs
zu repräsentieren
[43]
Script-ID:
Indentifizierung der Objekte im INX-Format, basierend auf einer Vier-Zeichen-Codierung
[44]
XML-Schema:
Komplexe Schemasprache
zur Beschreibung eines
XML-Typsystems
[Code.: 6.07]
XML-Deklaration,
Verarbeitungsanweisungen,
<docu> -Wurzelelement
des Dokumentes
6.3.2
Analyse des Adobe InDesign-
Interchange-Formates (INX)
Das InDesign-Interchange-Format ist XML-basiert und ein mehr als komplexes kaum interpretierbares Austauschformat. Jede INX-Datei beginnt mit einer XML-Deklaration, gefolgt von INX-spezifischen Verarbeitungsanweisungen und dem eigentlichen Wurzelelement, welches das Dokument-Objekt aus dem InDesign-DOM repräsentiert.
<?xml version=“1.0“ encoding=“UTF-8“ standalone=“yes“?>
<?aid style=“33“ type=“document“ DOMVersion=“4.0“ readerVersion=“3.0“ featureSet=“257“ product=“4.0(688)“ ?>
<docu [...] > [...]
</docu>
Jedes weitere Objekt aus dem InDesign-DOM wird als XML-Element beschrieben, alle Objekteigenschaften werden in XML-Attributen festgelegt und im InDesign-Interchange-Format über die sogenannten Script ID‘s [43] identifiziert.
InDesign benutzt ID‘s die immer aus vier Zeichen bestehen, beispielsweise:
<docu> – Dokument
<colr> – Farbe
<sprd> – Druckbogen
<cflo> – Textbereiche
<txsr> – Textformatbereiche
<IGeo> – Objektdimensionen und
Seitenposition
Die Art des Attributs wird im INX-Format über das Präfix definiert, der Inhalt oder Wert folgt nach dem ( _ )-Zeichen.
Beispiele für Attribut-Arten sind:
o_ object reference – Referenz
u_ unit – Einheit
s_ short integer – Ganzzahl(16bit)
l_ long integer – Ganzzahl(64bit)
c_ plain text – Inhalt/Text
b_ boolean – logischer Term
t_ datetime – Datum und Zeit
e_ enum – Aufzählung
f_ file – Datei
0_ void – Leerraum
x_ list – Anordnung
r_ read_only – Lesezugriff
In der Dateistruktur werden die InDesign-Voreinstellungen immer zuerst aufgeführt, gefolgt von dokumentspezifischen Eigenschaften und schließlich den individuellen Dokument-Objekten aus dem jeweiligen InDesign-DOM. Die Reihenfolge der Objekte entspricht immer dem Abbild des jeweiligen InDesign-Dokumentes und folglich kann es keine feste Struktur einer INX-Datei geben. Es gibt somit kein XML-Schema [44], welches diese Struktur beschreibt. In der „debug-version“ von InDesign kann man zwar eine DTD [45] der DOM-Struktur des aktuellen InDesign-Dokumentes erzeugen, nicht jedoch andere INX-Daten gegen diese Momentaufnahme eines einzelnen Dokumentes validieren. Trotzdem sind aber einige INX-Objekte immer nach einem festen Schema aufgebaut.
Die Dokument-Objekte erscheinen in folgender Reihenfolge:
XML-Bestandteile
XML-Exporteinstellungen
XML-Importeinstellungen
Farben
Mischdruckfarbengruppe
Mischdruckfarbe
Verlaufsdefinitions-Objekt
Farbtöne
Muster
Farbverläufe
Schriften
Zeichen-Stilvorlagen
Absatz-Stilvorlagen
Raster
| Formatierung
asiatischer Zeichen
Spracheinstellungen
Voreinstellungen
Linien- und Konturenarten
XML-Tags
Dokument-Ebenen
Musterseiten
Druckbogen
Abschnitte
Seiten
Textbereiche
Textverweise
Seitenverweise
URL-Verweise
Externe Verweise
Textquellen
Seitenquellen
Verweise
Lesezeichen
XML items (c_XMLItem, ‚cxit‘);
XML export maps (c_XMLStyleToTagMap, ‚stmX‘);
XML import maps (c_XMLTagToStyleMap, ‚tsmX‘);
Colors (c_Color, ‚colr‘);
Mixed ink groups (c_MixedInkGroup, ‘MxSg‘);
Mixed inks (c_MixedInk, ‚MxSw‘);
Pasted smooth shades (c_AGMBlackBox, ‚ctbb‘);
Tints (c_Tint, ‚tint‘);
Swatchs (c_Swatch, ‚swch‘);
Gradients (c_Gradient, ‚grad‘);
Fonts (c_Font, ‚FonT‘);
Character styles (c_CharStyle,‘csty‘);
Paragraph styles (c_ParaStyle,‘psty‘);
Named grids (c_NamedGrid, ‚Jngd‘);
Kinsoku tables (c_KinsokuTable, ‚Jkst‘);
Mojikumi tables (c_MojikumiTable, Jmjt‘);
Languages (c_Language, ‚lang‘);
Preferences (all kind of preference objects);
Stroke styles (c_StrokeStyle, ‚StSt‘);
XML tags (c_XMLTag, ‚tagX‘);
Layers (c_Layer, ‚layr‘);
Master spreads (c_MasterSpread, ‚mspr‘);
Spreads (c_Spread, ‚sprd‘);
Sections (c_Section, ‚sctn‘);
PageItems (c_PageItem, ‚pitm‘);
(all types of page items document directly own);
Stories (all stories);
Hyperlink text destinations (c_HyperlinkTextDestination, ‚HLTd‘);
Hyperlink page destinations (c_HyperlinkPageDestination, ‚HLPD‘);
Hyperlink URL destinations (c_HyperlinkURLDestination, ‚HLUD‘);
Hyperlink ext. destinations (c_HyperlinkExternalPageDestination, ‚HLEP‘);
Hyperlink text sources (c_HyperlinkTextSource, ‚HLTS‘);
Hyperlink page item sources (c_HyperlinkPageItemSource, ‚HLPs‘);
Hyperlinks (c_Hyperlink, ‚HLOB‘);
Bookmarks (c_Bookmark, ‚Bkmk‘);
All other remaining children of document;
Textformatbereiche
Tabellen
Seiten
Tabellenreihen und -spalten
[Abb.: 6.10]
Vorschau:
Leeres InDesign-Dokument
Druckbogen-Elemente werden folgendermaßen behandelt:
First write non-page items;
Then write page items in reverse z-order (to make importing more efficient)
Die Unterelemente einer Tabelle erscheinen in dieser Reihenfolge:
Table rows (c_TableRow, ‚crow‘);
Table columns (c_TableColumn, ‚ccol‘);
All other remaining children;
Textbereiche erscheinen in folgender
Abfolge:
Put all story preferences first.
Text style ranges (c_TextStyleRange, ‚txsr‘);
Tables (c_Table, ‘ctbl‘);
Page items (c_PageItem, ‚pitm‘,
all types of page items story own);
Notes (c_Note, ‚Note‘);
Changes (c_Change, ‚Chng‘);
All other remaining children;
Beispiel 1:
Leeres InDesign-Dokument
Um die komplexe Datenstruktur der INX-Formates darzustellen und besser verständlich zu machen, wird zunächst einmal nur ein leeres Dokument, welches nach den Standardeinstellungen von InDesign angelegt und ohne weitere Bearbeitung anschließend in das Adobe InDesign-Interchange-Format (INX) exportiert wurde, betrachtet.
[Abb.: 6.11]
Vorschau:
InDesign-Snippet
mit Textinhalt
[Abb.: 6.12]
Vorschau:
InDesign-Snippet
mit Bildinhalt
[Abb.: 6.13]
Meta-Informationen
aus Adobe Bridge
Beispiel 2 und 3:
InDesign-Snippet Text und Bild
Alle Inhaltsobjekte einer InDesign-Datei werden im InDesign-DOM dargestellt und als einzelne Kind-Elemente inklusive aller Eigenschaften und Attribute abgebildet.
Um die Komplexität nicht noch weiter zu erhöhen, werden Textinhalte und Bildinformationen eines InDesign-Dokumentes anhand sogenannter InDesign-Snippets, die durch die gleiche XML-Syntax beschrieben sind, am jeweiligen Beispiel dargestellt und erläutert.
InDesign-Snipptes sind eigenständige Dateien, die nur einzelne Objekte aus einem InDesign-Dokument darstellen.
Im Gegensatz zu Objekten, die in einer Bibliothek gespeichert sind, können Snippets unabhängig von anderen Dokumenten und Pfadangaben zu Datenquellen und Anwendungsprogrammen gespeichert und verwaltet werden.
XMP-M eta-Informationen
Mit jedem Dokument werden auch sogenannte Meta-Daten mitgespeichert, die Informationen über die Datei selbst enthalten. Beispielsweise werden Angaben über den Zeitpunkt der Dokumentenerzeugung, der letzten Modifikation, Informationen über das Anwendungsprogramm selbst sowie Beschreibungen der im Dokument definierten Farben und Schriften gemacht.
Druckfarben-Manager,
Angaben über Prozess-
farben, Überfüllungs-
reihenfolgen und die
jeweiligen Farbdichten
Globale Farbdefinitionen,
Angaben über Farbmodus, Grundfarben und deren
Zusammensetzung, sowie
Angaben über Papierfarbe
und Passermarken
Dokument-Sprachauswahl,
Einstellung für dynamische Rechtschreibprüfung
XML-Deklaration,
InDesign Versionsangaben,
Farbprofile, Wurzelelement
Beispiel 1:
Leeres InDesign-Dokument
Ein leeres DIN A4-Dokument, bestehend aus einer Seite, und nach den Standardeinstellungen von InDesign angelegt, hat folgende [gekürzte] XML-Syntax:
<?xml version=“1.0“ encoding=“UTF-8“ standalone=“yes“?>
<?aid style=“33“ type=“document“ DOMVersion=“4.0“ readerVersion=“3.0“ featureSet=“257“ product=“4.0(688)“?>
<docu pMep=“o_dcMep1“ InLi=“x_0“ zero=“x_2_U_0_U_0“ pacl=“o_u92“ ptag=“x_0“ DCcp=“c_Coated FOGRA27 (ISO 12647-2:2004)“ DCrp=“c_sRGB IEC61966-2.1“ DCci=“e_RIcs“ DCbi=“e_RIcs“ DCii=“e_RIcs“ CSrp=“e_CPpp“ CScp=“e_CPpd“ DCsa=“b_f“ Self=“rc_d“>
[...]
<lang pnam=“rk_[No Language]“ lsqu=“k_''“ ldqu=“k_""“ pril=“rk_[No Language]“ subl=“rk_[No Language]“ ID=“rl_0“ ptag=“x_0“ Self=“rc_u38“/>
<lang pnam=“rk_German: Reformed“ lsqu=“k_â€Å¡â€Ëœ“ ldqu=“k_â€Å¾â€Å““ pril=“rk_German“ subl=“rk_Reformed“ ID=“rl_113“ ptag=“x_0“ Self=“rc_u44“/>
<lang pnam=“rk_German: Traditional“ lsqu=“k_â€Å¡â€Ëœ“ ldqu=“k_â€Å¾â€Å““ pril=“rk_German“ subl=“rk_Traditional“ ID=“rl_113“ ptag=“x_0“ Self=“rc_u45“/>
[...]
<colr clmd=“e_prss“ clsp=“e_CMYK“ clvl=“x_4_D_0_D_0_D_0_D_100“ ovrd=“e_eOvB“ clbs=“o_n“ atcs=“e_nasp“ atvl=“x_0“ pnam=“c_Black“ edbl=“b_f“ rmbl=“b_f“ pvis=“b_t“ swID=“l_1f01“ ptag=“x_0“ Self=“rc_ub“/>
<colr clmd=“e_prss“ clsp=“e_CMYK“ clvl=“x_4_D_100_D_0_D_0_D_0“ ovrd=“e_eOvH“ clbs=“o_n“ atcs=“e_nasp“ atvl=“x_0“ pnam=“c_Cyan“ edbl=“b_f“ rmbl=“b_f“ pvis=“b_f“ swID=“l_1f01“ ptag=“x_0“ Self=“rc_uc“/>
<colr clmd=“e_prss“ clsp=“e_CMYK“ clvl=“x_4_D_0_D_100_D_0_D_0“ ovrd=“e_eOvH“ clbs=“o_n“ atcs=“e_nasp“ atvl=“x_0“ pnam=“c_Magenta“ edbl=“b_f“ rmbl=“b_f“ pvis=“b_f“ swID=“l_1f01“ ptag=“x_0“ Self=“rc_ud“/>
<colr clmd=“e_prss“ clsp=“e_CMYK“ clvl=“x_4_D_0_D_0_D_0_D_0“ ovrd=“e_eOvP“ clbs=“o_n“ atcs=“e_nasp“ atvl=“x_0“ pnam=“c_Paper“ edbl=“b_t“ rmbl=“b_f“ pvis=“b_t“ swID=“l_1f01“ ptag=“x_0“ Self=“rc_uf“/>
<colr clmd=“e_regs“ clsp=“e_CMYK“ clvl=“x_4_D_100_D_100_D_100_D_100“ ovrd=“e_eOvR“ clbs=“o_n“ atcs=“e_nasp“ atvl=“x_0“ pnam=“c_Registration“ edbl=“b_f“ rmbl=“b_f“ pvis=“b_t“ swID=“l_1f01“ ptag=“x_0“ Self=“rc_u10“/>
<colr clmd=“e_prss“ clsp=“e_CMYK“ clvl=“x_4_D_0_D_0_D_100_D_0“ ovrd=“e_eOvH“ clbs=“o_n“ atcs=“e_nasp“ atvl=“x_0“ pnam=“c_Yellow“ edbl=“b_f“ rmbl=“b_f“ pvis=“b_f“ swID=“l_1f01“ ptag=“x_0“ Self=“rc_u11“/>
[...]
<cink inIP=“rb_t“ pnam=“k_Process Cyan“ inSd=“rD_0“ inAs=“c_k[NoAlias]“ inAn=“D_15“ inCP=“b_f“ inFr=“D_106“ inND=“D_0.61“ inPI=“b_t“ inPo=“l_1“ inTp=“e_norm“ ptag=“x_0“ Self=“rc_u7“/>
<cink inIP=“rb_t“ pnam=“k_Process Magenta“ inSd=“rD_0“ inAs=“c_k[NoAlias]“ inAn=“D_75“ inCP=“b_f“ inFr=“D_106“ inND=“D_0.76“ inPI=“b_t“ inPo=“l_2“ inTp=“e_norm“ ptag=“x_0“ Self=“rc_u8“/>
<cink inIP=“rb_t“ pnam=“k_Process Yellow“ inSd=“rD_0“ inAs=“c_k[NoAlias]“ inAn=“D_0“ inCP=“b_f“ inFr=“D_106“ inND=“D_0.16“ inPI=“b_t“ inPo=“l_3“ inTp=“e_norm“ ptag=“x_0“ Self=“rc_u9“/>
<cink inIP=“rb_t“ pnam=“k_Process Black“ inSd=“rD_0“ inAs=“c_k[NoAlias]“ inAn=“D_45“ inCP=“b_f“ inFr=“D_106“ inND=“D_1.7“ inPI=“b_t“ inPo=“l_4“ inTp=“e_norm“ ptag=“x_0“ Self=“rc_ua“/>
<ctbb pvrs=“l_0“ bbtp=“e_bbtc“ spcl=“y_0“ bben=“e_eta6“ bbmx=“x_6_D_1_D_0_D_0_D_1_D_0_D_0“ pnam=“k_“ edbl=“b_t“ rmbl=“b_t“ pvis=“b_f“ swID=“l_1f01“ ptag=“x_0“ Self=“rc_u65“>
<pcnt><![CDATA[AAAAAT/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==]]></pcnt>
</ctbb>
Aus Einzelkomponenten
zusammengesetzte Zeichensätze , Bestandteile zur
Darstellung der
alphanumerischen Zeichen,
der Satzzeichen
und der Symbole
Grundlinienraster-
Einstellungen
Absatz- und Zeichenvorlagen
Linien- und Konturenarten
<swch pnam=“c_None“ edbl=“b_f“ rmbl=“b_f“ pvis=“b_t“ swID=“l_1f01“
ptag=“x_0“ Self=“rc_ue“/>
<grad grdt=“e_axlg“ pnam=“k_“ edbl=“b_t“ rmbl=“b_t“ pvis=“b_f“ swID=“l_1f01“ ptag=“x_0“ Self=“rc_u63“>
<gstp gcls=“o_u64“ loca=“D_0“ Self=“rc_u63gstp0“/>
<gstp gcls=“o_ub“ loca=“D_100“ mids=“D_50“ Self=“rc_u63gstp1“/>
</grad>
[...]
<StSt strT=“rk_“ pnam=“k_Dashed“ Self=“rc_di5a2a“/>
<StSt strT=“rk_“ pnam=“k_Solid“ Self=“rc_di5a29“/>
[...]
<cfnt pnam=“k_[No composite font]“ ptag=“x_0“ Self=“rc_u6f“>
[...]
<cfen pnam=“k_Punctuation“ font=“c_Kozuka Mincho Pro“ [...]/>
<cfen pnam=“k_Symbols“ font=“c_Kozuka Mincho Pro“ [...]/>
<cfen pnam=“k_Alphabetic“ font=“c_Times New Roman“ ptfs=“k_Regular“ jcfs=“D_100“ bshf=“D_0“ phzs=“D_100“ pvts=“D_100“ jcfc=“k_ !"#$%&'()*+,-./:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^~sep~`abcdefghijklmnopqrstuvwxyz{|}~  ¡¤¥¦©ª«Â®¯²³µ·¸¹º»¼½¾¿ÀÃÃ‚ÃÆ’ÄÅÆÇÈÉÊËÃÅ’ÃÃŽÃÃÑÒÓÔÕÖØÙÚÛÃÅ“ÃÞßà áâãäåæçèéêëìÃîïðñòóôõöøùúûüýþÿıŒœŠšŸŽžƒˆˇË˜˙Ëš˛Ëœ˖â€Å¡â€Å¾â€¢â€¹â€ºâ„€™âˆ†âˆâˆ‘â‰Ë†â‰¤â‰¥â—Šffï¬ï¬‚ï¬Æ’fflſtst“ plck=“b_t“ jcfa=“b_f“ ptag=“x_0“ Self=“rc_u75“/>
<cfen pnam=“k_Numbers“ font=“c_Times New Roman“ ptfs=“k_Regular“ jcfs=“D_100“ bshf=“D_0“ phzs=“D_100“ pvts=“D_100“ jcfc=“k_0123456789“ plck=“b_t“ jcfa=“b_f“ ptag=“x_0“ Self=“rc_u76“/>
</cfnt>
<Jngd Jgrd=“ro_u67Jgda1“ pnam=“k_[Page Grid]“ ptag=“x_0“ Self=“rc_u67“>
<Jgda ptfs=“k_“ ptsz=“D_9.21259842519685“ Jcak=“D_0“ Jlak=“D_6.909448818897637“ phzs=“D_100“ pvts=“D_100“ laln=“e_lltj“ jgal=“e_Jact“ jcal=“e_Jact“ Self=“rc_u67Jgda1“/>
</Jngd>
<csty pnam=“k_[No character style]“ [...] />
<psty pnam=“k_[No paragraph style]“ [...] />
<psty basd=“k_[No paragraph style]“ [...] />
<ObSt dtos=“o_u6a“ dfos=“o_u69“ dffg=“o_u6b“ pnam=“k_[None]“ [...]>
[...]
</ObSt>
<ObSt dtos=“o_u6a“ dfos=“o_u69“ dffg=“o_u6b“ basd=“k_[None]“ pnam=“k_[Normal Graphics Frame]“ [...] >
[...]
</ObSt>
<ObSt dtos=“o_u6a“ dfos=“o_u69“ dffg=“o_u6b“ basd=“k_[None]“ pnam=“k_[Normal Text Frame]“ [...]>
[...]
</ObSt>
<ObSt dtos=“o_u6a“ dfos=“o_u69“ dffg=“o_u6b“ basd=“k_[None]“ pnam=“k_[Normal Grid]“ [...]>
[...]
</ObSt>
<cPWP PIHL=“b_f“ PEnc=“k_“ POIM=“b_t“ PFIM=“b_t“ PMnS=“b_t“ PVwP=“b_f“ Self=“rc_dcPWP1“/>
<cdmr pdmp=“ro_dcdmr1cdmp1“ Self=“rc_dcdmr1“>
Textrahmen-
Voreinstellungen
XML-Import-, Export-
und Textbereich-
Einstellungen
Seiten- und Grundlinienraster
Seitendimensionen,
Dokument-Voreinstellungen
<cdmp Self=“rc_dcdmr1cdmp1“/>
</cdmr>
<cdmo dmFI=“e_dmPr“ dmCI=“b_f“ dmLI=“b_t“ dmRB=“b_f“ dmCN=“b_f“ dmDS=“l_32“ Self=“rc_dcdmo1“/>
<Ladp EnLA=“b_f“ Self=“rc_dLadp1“/>
<bk0C bk01=“D_36“ bk02=“D_36“ bk03=“D_36“ bk04=“D_36“ bk05=“D_0“ bk06=“D_0“ bk07=“D_0“ bk08=“D_12“ bk09=“D_0“ bk10=“D_0“ bk11=“l_0“ bk12=“l_fd“ bk13=“c_“ bk14=“D_6“ bk15=“D_0.25“ bk16=“l_0“ bk17=“l_1“ bk18=“l_0“ bk19=“l_0“ bk20=“l_1“ bk21=“l_4“ bk22=“b_f“ bk23=“b_f“ bk24=“D_0“ bk25=“D_0“ bk26=“l_48“ Self=“rc_dbk0C1“/>
<xiPf Xits=“b_t“ XMis=“e_XMmi“ Xicl=“b_f“ XMrt=“b_t“ Xtal=“b_f“ Xtit=“b_t“ Xiws=“b_f“ Xtar=“b_f“ Self=“rc_dxiPf1“/>
<xePf Xvae=“b_f“ Xprb=“k_“ Xefs=“b_f“ svFE=“e_svU8“ Xrub=“b_f“ Xdtd=“b_t“ Xeco=“b_f“ Xeoi=“b_f“ Xefi=“b_f“ Xeic=“e_ibst“ Xegp=“e_plap“ Xegi=“b_f“ Xejq=“e_enMd“ Xejf=“e_jpgb“ Self=“rc_dxePf1“/>
<xgPf XstN=“c_Textabschnitt“ XstC=“e_iBrd“ XtaN=“c_Tabelle“ XtaC=“e_iDbl“ XceN=“c_Zelle“ XceC=“e_iGgr“ Self=“rc_dxgPf1“/>
<xpPf xpPb=“e_CMYK“ Self=“rc_dxpPf1“/>
<SyPf omAL=“b_f“ omBZ=“U_12“ sgON=“e_Txft“ sorn=“e_horz“ Self=“rc_dSyPf1“/>
<TFPf ccnt=“l_1“ clgt=“U_12“ clwd=“U_144“ ufcw=“b_f“ inst=“x_4_U_0_U_0_U_0_U_0“ Fbof=“e_MAso“ Fboa=“U_0“ VJal=“e_top“ VJmi=“U_0“ iwrp=“b_f“ Self=“rc_dTFPf1“/>
<txtp typq=“b_t“ shhj=“b_f“ shkp=“b_f“ shsb=“b_f“ shcs=“b_f“ hlmf=“b_t“ mmos=“b_t“ pled=“b_f“ sups=“D_58.3“ supp=“D_33.3“ subs=“D_58.3“ subp=“D_33.3“ Smcp=“D_70“ lkbd=“U_2“ bkbd=“U_2“ kkbd=“D_20“ sinv=“b_f“ jwrp=“b_f“ sclt=“b_t“ awrp=“b_t“ zwrp=“b_f“ gplt=“b_f“ shkk=“b_f“ Jnvs=“b_f“ Jcid=“b_f“ Self=“rc_dtxtp1“/>
<cTdf [...]/>
<dctp dpcu=“e_both“ dpmu=“b_f“ dprc=“b_t“ Self=“rc_ddctp1“/>
<BfGo BFuc=“b_f“ BFso=“U_0“ BFro=“e_EToi“ BFic=“U_12“ BFcl=“e_iLbl“ Self=“rc_dBfGo1“/>
<cAOd AOct=“e_unas“ AOht=“D_72“ AOwd=“D_72“ AOps=“o_u5c“ AOos=“o_u68“ Self=“rc_dcAOd1“/>
<cAOs AOpt=“e_AOPi“ AOsr=“b_f“ AOlp=“b_f“ AOpp=“b_t“ AOwp=“e_ANbr“ AOHa=“e_left“ AHrl=“e_txtf“ AOVa=“e_top“ AOVr=“e_AVba“ AOxo=“D_0“ AOyo=“D_0“ AOya=“D_0“ Self=“rc_dcAOs1“/>
<FNop FNns=“e_Marb“ FNsa=“l_1“ FNrn=“e_Fdrs“ FNps=“e_Fpsn“ FNpr=“k_“ FNsu=“k_“ FNap=“o_u5e“ FNac=“o_u5d“ FNmp=“e_FmSp“ FNsp=“k_ „ FNsb=“U_0“ FNsh=“U_0“ FNfm=“e_MLdo“ FNfo=“U_0“ FNpl=“b_f“ FNds=“b_f“ FNn0=“b_t“ FNty=“o_di5a29“ FNsw=“U_1“ FNnc=“o_ub“ FNrg=“o_ue“ FNrt=“D_100“ FNgt=“D_100“ FNgo=“b_f“ FNnv=“b_f“ FNli=“U_0“ FNri=“U_72“ FNro=“U_0“ FNc0=“b_t“ FNcy=“o_di5a29“ FNcw=“U_1“ FNcc=“o_ub“ FNcg=“o_ue“ FNct=“D_100“ FNc4=“D_100“ FNcv=“b_f“ FNc3=“b_f“ FNci=“U_0“ FNcr=“U_288“ FNco=“U_0“ Self=“rc_dFNop1“/>
<docp phgt=“U_841.889763778“ pwdt=“U_595.275590551“ cclr=“e_iVlt“ mclr=“e_iMgn“ nump=“l_1“ ppsd=“b_t“ bldt=“U_0“ bldb=“U_0“ bldi=“U_0“ bldo=“U_0“ bldu=“b_f“ slgt=“U_0“ slgb=“U_0“ slgi=“U_0“ slgo=“U_0“ slgu=“b_f“ PrSl=“b_t“ Shfl=“b_t“ oprb=“b_t“ pbin=“e_ltrb“ cold=“e_horz“ clok=“b_t“ Self=“rc_ddocp1“/>
<grdp gsho=“b_f“ grto=“b_f“ Hgdv=“U_72“ Vgdv=“U_72“ Hgsd=“l_8“ Vgsd=“l_8“ grdc=“e_iLgr“ GrDb=“b_t“ blsn=“b_f“ blst=“U_36“ bldv=“U_12“ blvl=“D_75“ blcl=“e_iLbl“ grlo=“e_ENgt“ Self=“rc_dgrdp1“/>
<gudp gdib=“b_f“ gdsh=“b_t“ gdlk=“b_f“ gdto=“b_t“ gvth=“D_5“ gudc=“e_iCyn“ Self=“rc_dgudp1“/>
<imgp colc=“l_1“ colg=“U_12“ mart=“U_36“ marb=“U_36“ marl=“U_36“ marr=“U_36“ cold=“e_horz“ Self=“rc_dimgp1“/>
<pbdp PBbr=“U_72“ PBcr=“e_iWht“ PBbk=“e_iLgr“ PBbc=“e_iFie“ PBsc=“e_iGbl“ Self=“rc_dpbdp1“/>
<viwp sntz=“l_4“ keyn=“U_0.70866141732283“ hunt=“e_zmms“ vunt=“e_zmms“ RCtp=“e_RCSo“ srul=“b_t“ sfre=“b_t“ tunt=“e_zpoi“ tsnt=“e_zpoi“ pdnt=“e_zmms“ lunt=“e_zpoi“ ptin=“D_72“ hrcp=“D_12“ vecp=“D_12“ SHNt=“b_f“ Self=“rc_dviwp1“/>
<prnp Rsty=“e_Dflt“ Rprt=“c_RICOH AP2600N PS“ ppd=“c_RICOH Aficio AP2600N“ [...] ppdf=“k_C:\WINNT\system32\spool\DRIVERS\W32X86\3\RIAP26N3.PPD“ Rptd=“b_f“ Rppr=“ [...] „ Rpre=“D_600“ RpSR=“x_4_D_0_D_0_D_595_D_842“ RpIR=“x_4_D_12_D_12_D_583_D_830“ RpSS=“k_QTQA“ RpHR=“x_2_D_419_D_1225“ RpWR=“x_2_D_256_D_865“ RpOR=“x_2_D_0_D_0“ RpSs=“c_106 lpi / 600 dpi“ RpCs=“k_kDefault“ RSIA=“D_45“ RSIF=“D_106“ RpBC=“b_f“ RpCn=“b_t“ Self=“rc_dprnp1“/>
<cMet Self=“rc_dcMet1“/>
<cMep Self=“rc_dcMep1“>
<pcnt>
Musterseiten-Einstellungen, jeweils für linke und rechte
Dokumentenseite
Seiten- und Druckbogeneingenschaften
Seitenränder und Spalten
Typografische Einstellungen
XMP-Metadaten
(siehe [code: 6.11])
<![CDATA[<?xpacket begin=““ id=“W5M0MpCehiHzreSzNTczkc9d“?>
<x:xmpmeta xmlns:x=“adobe:ns:meta/“ x:xmptk=“3.1.1-111“>
[...]
</x:xmpmeta>
<?xpacket end=“r“?>]]>
</pcnt>
</cMep>
<cOpt tlnm=“k_Index“ tlsl=“o_u5c“ ReIx=“b_t“ iBkD=“b_f“ iHEs=“b_f“ IdxF=“e_NtIf“ iSHs=“b_t“ iEiS=“b_f“ lOst=“o_u5c“ lTws=“o_u5c“ lThs=“o_u5c“ lFst=“o_u5c“ sHst=“o_u5c“ pnSt=“o_u5d“ crSt=“o_u5d“ crTS=“o_u5d“ ftSp=“k_ „ beSp=“k_; „ prSp=“k_^=“ pnSp=“k_, „ crSp=“k_. „ eeSp=“k_“ Self=“rc_dcOpt1“/>
<cIhs [...]/>
<btnp pnam=“k_“ snam=“k_“ Self=“rc_dbtnp1“/>
<tinD Self=“rc_dtinD1“>
<pcnt><![CDATA[AAAAAA==]]>
</pcnt>
</tinD>
<Jcpg font=“c_Times New Roman“ ptfs=“k_Regular“ ptsz=“D_9.21259842519685“ Jcak=“D_0“ Jlak=“D_6.909448818897637“ phzs=“D_100“ pvts=“D_100“ Self=“rc_dJcpg1“/>
<Jcsg font=“c_Times New Roman“ ptfs=“k_Regular“ ptsz=“D_9.21259842519685“ Jcak=“D_0“ Jlak=“D_6.909448818897637“ phzs=“D_100“ pvts=“D_100“ laln=“e_lltj“ jgal=“e_Jact“ jcal=“e_Jact“ Jgdv=“e_jGgv“ Jgcc=“e_botm“ Jgcz=“D_9.21259842519685“ Self=“rc_dJcsg1“/>
<Jgpf Jgsa=“b_f“ Jgsf=“b_t“ Jgms=“D_50“ Jstp=“b_f“ Jgci=“e_iGdg“ Jcen=“s_a“ Jslc=“b_t“ Jicf=“b_f“ Jucc=“b_f“ Jscc=“b_t“ Self=“rc_dJgpf1“/>
<Jmui jmus=“s_7fff“ Self=“rc_dJmui1“/>
<tagX pnam=“c_Root“ XTCr=“e_iLbl“ ptag=“x_0“ Self=“rc_u87“/>
<layr pnam=“c_Ebene 1“ pvis=“b_t“ plck=“b_f“ lcol=“e_iLbl“ iwrp=“b_f“ sogd=“b_t“ lkgd=“b_f“ uilr=“b_t“ exlr=“b_t“ ptag=“x_0“ Self=“rc_u92“/>
<mspr pnam=“rc_A-Mustervorlage“ npfx=“c_A“ nmbs=“c_Mustervorlage“ smsi=“b_t“ PagC=“l_2“ pmas=“o_n“ ovpp=“x_0“ ptag=“x_0“ Self=“rc_u9c“>
<page impp=“ro_ua1imgp1“ pnam=“rc_A“ SnAd=“ro_n“ DCof=“rl_0“ pbnd=“rx_4_U_-420.944881889_U_-595.275590551_U_420.944881889_U_0“ pgTs=“o_u94“ PgSd=“re_lfth“ pmas=“o_n“ mpgs=“ry_0“ ovrl=“x_0“ TOpp=“y_0“ Jgrd=“ro_ua1Jgda1“ Jgsp=“e_gsto“ Jumg=“b_t“ ptag=“x_0“ Self=“rc_ua1“>
<imgp colc=“l_1“ colg=“U_12“ mart=“U_36“ marb=“U_36“ marl=“U_36“ marr=“U_36“ cold=“e_horz“ hccl=“rb_f“ cpos=“x_2_D_0_D_523.275590551“ Self=“rc_ua1imgp1“/>
<Jgda font=“c_Times New Roman“ ptfs=“k_Regular“ ptsz=“D_9.21259842519685“ Jcak=“D_0“ Jlak=“D_6.909448818897637“ phzs=“D_100“ pvts=“D_100“ laln=“e_lltj“ jgal=“e_Jact“ jcal=“e_Jact“ Self=“rc_ua1Jgda1“/>
</page>
<page impp=“ro_ua2imgp1“ pnam=“rc_A“ SnAd=“ro_n“ DCof=“rl_0“ pbnd=“rx_4_U_-420.944881889_U_0_U_420.944881889_U_595.275590551“ pgTs=“o_u94“ PgSd=“re_rgth“ pmas=“o_n“ mpgs=“ry_0“ ovrl=“x_0“ TOpp=“y_0“ Jgrd=“ro_ua2Jgda1“ Jgsp=“e_gsto“ Jumg=“b_t“ ptag=“x_0“ Self=“rc_ua2“>
<imgp colc=“l_1“ colg=“U_12“ mart=“U_36“ marb=“U_36“ marl=“U_36“ marr=“U_36“ cold=“e_horz“ hccl=“rb_f“ cpos=“x_2_D_0_D_523.275590551“ Self=“rc_ua1imgp1“/>
<Jgda font=“c_Times New Roman“ ptfs=“k_Regular“ ptsz=“D_9.21259842519685“ Jcak=“D_0“ Jlak=“D_6.909448818897637“ phzs=“D_100“ pvts=“D_100“ laln=“e_lltj“ jgal=“e_Jact“ jcal=“e_Jact“ Self=“rc_ua1Jgda1“/>
</page>
</mspr>
Dokument-Bereiche,
Benutzername
Überfüllungseinstellungen
XML-Inhaltsstruktur
Textbereich-Einstellungen
Textbereich-Metadaten
Textformatbereiche
Druckbogen-Einstellungen
Seitenränder und Spalten
Typografische Einstellungen
<sprd fsSo=“e_Dflt“ fsFS=“ro_u95flSe1“ smsi=“b_t“ ilnd=“b_f“ PagC=“l
1“ BnLc=“l_0“ pmas=“o_u9c“ ptag=“x_0“ Self=“rc_u95“>
<flSe fsLl=“D_50“ fsFr=“D_300“ fsGr=“D_150“ fsCr=“b_f“ fsSf=“b_f“
fsTo=“b_f“ Self=“rc_u95flSe1“/>
<page impp=“ro_u9aimgp1“ pnam=“rc_1“ SnAd=“ro_u9b“ DCof=“rl_1“
pbnd=“rx_4_U_-420.944881889_U_0_U_420.944881889_U_595.275590551“ pgTs=“o_u94“ PgSd=“re_rgth“ pmas=“o_u9c“ mpgs=“ry_0“ ovrl=“x_0“ TOpp=“y_0“ Jgrd=“ro_u9aJgda1“ Jgsp=“e_gsto“ Jumg=“b_t“ ptag=“x_0“ Self=“rc_u9a“>
<imgp colc=“l_1“ colg=“U_12“ mart=“U_36“ marb=“U_36“ marl=“U_36“ marr=“U_36“ cold=“e_horz“ hccl=“rb_f“ cpos=“x_2_D_0_D_523.275590551“ Self=“rc_u9aimgp1“/>
<Jgda font=“c_Times New Roman“ ptfs=“k_Regular“ ptsz=“D_9.21259842519685“ Jcak=“D_0“ Jlak=“D_6.909448818897637“ phzs=“D_100“ pvts=“D_100“ laln=“e_lltj“ jgal=“e_Jact“ jcal=“e_Jact“ Self=“rc_u9aJgda1“/>
</page>
</sprd>
<sctn leng=“rl_1“ pnam=“c_“ pnSt=“e_Marb“ SnCt=“b_t“ SnPx=“b_f“ SnPn=“l_1“ SnMk=“c_“ SnPg=“o_u9a“ spfx=“c_“ ptag=“x_0“ Self=“rc_u9b“/>
<DcUs UsrN=“k_Unknown User Name“ UsrC=“e_iGld“ Self=“rc_dDcUs0“/>
<cxst pMep=“o_u77cMep1“ pXLS=“x_0“ pWRD=“x_0“ pTXT=“x_0“ pSMP=“x_2_x_0_x_0“ Xans=“ro_n“ ATOC=“o_n“ pSTP=“ro_u77SyPf1“ TCAc=“b_f“ sLbl=“k_“ Jgrd=“ro_u77Jgda1“ Jang=“o_n“ ptag=“x_0“ Self=“rc_u77“>
<SyPf omAL=“b_f“ omBZ=“U_12“ sgON=“e_Txft“ sorn=“e_horz“ Self=“rc_u77SyPf1“/>
<Jgda ptfs=“k_“ ptsz=“D_9.21259842519685“ Jcak=“D_0“ Jlak=“D_6.909448818897637“ phzs=“D_100“ pvts=“D_100“ laln=“e_lltj“ jgal=“e_Jact“ jcal=“e_Jact“ Self=“rc_u77Jgda1“/>
<cMep Self=“rc_u77cMep1“>
<pcnt><![CDATA[ [...] ]]></pcnt>
</cMep>
<txsr prst=“o_u5e“ crst=“o_u5d“>
<pcnt>c_<?aid Self=“rc_u77cins0“?><?aid Self=“rc_u77cins1“?><?aid Self=“rc_u77cins2“?><?aid Self=“rc_u77cins3“?></pcnt>
</txsr>
</cxst>
<cTOC crbk=“b_t“ styd=“e_horz“ tlsl=“k_[No paragraph style]“ tlnm=“c_Inhalt“ pnam=“k_DefaultTOCStyleName“ runn=“b_f“ ichd=“b_f“ iBkD=“b_f“ ptag=“x_0“ Self=“rc_u6e“/>
<trSt pnam=“k_k[No Trap Preset]“ tpDW=“U_0.25“ tpBW=“U_0.5“ tpJS=“e_mjon“ tpES=“e_tpme“ tpOI=“b_t“ tpII=“b_t“ tpIM=“b_f“ tpOB=“b_t“ tpIP=“e_tpcn“ tpST=“D_10“ tpBT=“D_100“ tpBD=“D_1.6“ tpSL=“D_70“ tpRD=“D_100“ ptag=“x_0“ Self=“rc_u93“/>
<trSt pnam=“k_kDefaultTrapStyleName“ tpDW=“U_0.25“ tpBW=“U_0.5“ tpJS=“e_mjon“ tpES=“e_tpme“ tpOI=“b_t“ tpII=“b_t“ tpIM=“b_f“ tpOB=“b_t“ tpIP=“e_tpcn“ tpST=“D_10“ tpBT=“D_100“ tpBD=“D_1.6“ tpSL=“D_70“ tpRD=“D_100“ ptag=“x_0“ Self=“rc_u94“/>
<bnoc bnbt=“e_BCuo“ bnbv=“l_2022“ blfn=“k_“ blft=“k_“ Self=“rc_dbnoc0“/>
<bnoc bnbt=“e_BCuo“ bnbv=“l_2a“ blfn=“k_“ blft=“k_“ Self=“rc_dbnoc1“/>
<bnoc bnbt=“e_BCuo“ bnbv=“l_25ca“ blfn=“k_“ blft=“k_“ Self=“rc_dbnoc2“/>
<bnoc bnbt=“e_BCuf“ bnbv=“l_bb“ blfn=“c_Myriad Pro“ blft=“k_Regular“ Self=“rc_dbnoc3“/>
<bnoc bnbt=“e_BCgf“ bnbv=“l_276“ blfn=“c_Adobe Jenson Pro“ blft=“k_Regular“ Self=“rc_dbnoc4“/>
<AsMt hDPT=“rf_C:\Projekte\Studium\Bachelor~sep~Thesis\Leeres~sep~DINA4~sep~Dokument.indd“ pASt=“re_AUtD“ pnam=“k_UnassignedInCopy“ path=“k_“ UsrN=“k_“ AsEx=“e_AsEs“ AFCl=“e_none“ ptag=“x_0“ Self=“rc_ua3“/>
<cXML Xcnt=“o_u77cins1:u77cins2“ strp=“ro_n“ STof=“o_u77cins1“ XMLt=“o_u87“ Self=“rc_di1i2“/>
</docu>
Textbereich-Einstellungen
Textbereich-Einstellungen
Textrahmen-Voreinstellungen
Textrahmen-Voreinstellungen
XML-Deklaration,
InDesign Versionsangaben, Snippet-Wurzelelement
Farbmodus, Farbdefinition
Absatz- und Zeichenvorlagen
Linien- und Konturenarten,
Beispiel 2:
InDesign-Snippet Text
Ein einfacher Textrahmen mit dem Inhalt „hello world“ in der Schrift „Times New Roman“, Größe 12pt, mit automatischem Zeilenabstand, linksbündiger Ausrichtung und den typografischen Standardeinstellungen von InDesign hat folgenden
[gekürzten] XML-Code:
<?xml version=“1.0“ encoding=“UTF-8“ standalone=“yes“?>
<?aid style=“33“ type=“snippet“ DOMVersion=“4.0“ readerVersion=“3.0“ featureSet=“257“ product=“4.0(688)“?>
<?aid SnippetType=“PageItem“?>
<SnippetRoot>
<colr clmd=“e_prss“ clsp=“e_CMYK“ clvl=“x_4_D_0_D_0_D_0_D_100“ ovrd=“e_eOvB“ clbs=“o_n“ atcs=“e_nasp“ atvl=“x_0“ pnam=“c_Black“ edbl=“b_f“ rmbl=“b_f“ pvis=“b_t“ swID=“l_1f01“ ptag=“x_0“ Self=“rc_ub“/>
<swch pnam=“c_None“ edbl=“b_f“ rmbl=“b_f“ pvis=“b_t“ swID=“l_1f01“ ptag=“x_0“ Self=“rc_ue“/>
<StSt strT=“rk_“ pnam=“k_Solid“ Self=“rc_di5a29“/>
<csty pnam=“k_[No character style]“ [...] />
<psty basd=“k_[No paragraph style]“ [...] />
<ObSt dtos=“o_u6a“ dfos=“o_u69“ dffg=“o_u6b“ basd=“k_[None]“ pnam=“k_[Normal Text Frame]“ [...] >
<TFPf ccnt=“l_1“ clgt=“U_12“ clwd=“U_144“ ufcw=“b_f“ inst=“x_4_U_0_U_0_U_0_U_0“ Fbof=“e_MAso“ Fboa=“U_0“ VJal=“e_top“ VJmi=“U_0“ iwrp=“b_f“ Self=“rc_u6aTFPf1“/>
<BfGo BFuc=“b_f“ BFso=“U_0“ BFro=“e_EToi“ BFic=“U_12“ BFcl=“e_iLbl“ Self=“rc_u6aBfGo1“/>
<cAOs AOpt=“e_AOPi“ AOsr=“b_f“ AOlp=“b_f“ AOpp=“b_t“ AOwp=“e_ANbr“ AOHa=“e_left“ AHrl=“e_txtf“ AOVa=“e_botm“ AOVr=“e_AVba“ AOxo=“D_0“ AOyo=“D_0“ AOya=“D_0“ Self=“rc_u6acAOs1“/>
<ctxw txwt=“e_none“ ptwi=“e_none“ ptwv=“b_f“ pcos=“ro_u6actxw1ccos1“ Self=“rc_u6actxw1“>
<ccos ptns=“rx_0“ acpn=“rx_0“ pcot=“e_sacp“ iied=“b_f“ pcnm=“k_“ Self=“rc_u6actxw1ccos1“/>
</ctxw>
<SyPf omAL=“b_f“ omBZ=“U_12“ sgON=“e_Txft“ sorn=“e_Unkn“ Self=“rc_u6aSyPf1“/>
</ObSt>
<ObSt dtos=“o_u6a“ dfos=“o_u69“ dffg=“o_u6b“ basd=“k_[None]“ pnam=“k_[Normal Graphics Frame]“ [...] >
<TFPf ccnt=“l_1“ clgt=“U_12“ clwd=“U_144“ ufcw=“b_f“ inst=“x_4_U_0_U_0_U_0_U_0“ Fbof=“e_MAso“ Fboa=“U_0“ VJal=“e_top“ VJmi=“U_0“ iwrp=“b_f“ Self=“rc_u6aTFPf1“/>
<BfGo BFuc=“b_f“ BFso=“U_0“ BFro=“e_EToi“ BFic=“U_12“ BFcl=“e_iLbl“ Self=“rc_u69BfGo1“/>
<cAOs AOpt=“e_AOPi“ AOsr=“b_f“ AOlp=“b_f“ AOpp=“b_t“ AOwp=“e_ANbr“ AOHa=“e_left“ AHrl=“e_txtf“ AOVa=“e_botm“ AOVr=“e_AVba“ AOxo=“D_0“ AOyo=“D_0“ AOya=“D_0“ Self=“rc_u69cAOs1“/>
<ctxw txwt=“e_none“ ptwi=“e_none“ ptwv=“b_f“ pcos=“ro_u69ctxw1ccos1“ Self=“rc_u69ctxw1“>
<ccos ptns=“rx_0“ acpn=“rx_0“ pcot=“e_sacp“ iied=“b_f“ pcnm=“k_“ Self=“rc_u69ctxw1ccos1“/>
</ctxw>
<SyPf omAL=“b_f“ omBZ=“U_12“ sgON=“e_Unkn“ sorn=“e_Unkn“ Self=“rc_u69SyPf1“/>
</ObSt>
<ObSt dtos=“o_u6a“ dfos=“o_u69“ dffg=“o_u6b“ basd=“k_[None]“ pnam=“k_[Normal Grid]“ [...] >
Textbereich-Einstellungen,
Textbereich-Einstellungen
Textrahmen-Voreinstellungen
Textrahmen-Voreinstellungen
XMP-Metadaten
(siehe [code: 6.11])
Textrahmen-
Objektdimensionen,
Seitenposition
<TFPf ccnt=“l_1“ clgt=“U_12“ clwd=“U_144“ ufcw=“b_f“ inst=“x_4_U_0_U_
0_U_0_U_0“ Fbof=“e_MAso“ Fboa=“U_0“ VJal=“e_top“ VJmi=“U_0“ iwrp=“b_f“ Self=“rc_u6aTFPf1“/>
<BfGo BFuc=“b_f“ BFso=“U_0“ BFro=“e_EToi“ BFic=“U_12“ BFcl=“e
iLbl“ Self=“rc_u6bBfGo1“/>
<cAOs AOpt=“e_AOPi“ AOsr=“b_f“ AOlp=“b_f“ AOpp=“b_t“ AOwp=“e_ANbr“ AOHa=“e_left“ AHrl=“e_txtf“ AOVa=“e_botm“ AOVr=“e_AVba“ AOxo=“D_0“ AOyo=“D_0“ AOya=“D_0“ Self=“rc_u6bcAOs1“/>
<ctxw txwt=“e_none“ ptwi=“e_none“ ptwv=“b_f“ pcos=“ro_u6bctxw1ccos1“ Self=“rc_u6bctxw1“>
<ccos ptns=“rx_0“ acpn=“rx_0“ pcot=“e_sacp“ iied=“b_f“ pcnm=“k_“ Self=“rc_u6bctxw1ccos1“/>
</ctxw>
<SyPf omAL=“b_f“ omBZ=“U_12“ sgON=“e_FGtp“ sorn=“e_Unkn“ Self=“rc_u6bSyPf1“/>
</ObSt>
<layr pnam=“c_Ebene 1“ [...] />
<txtf [...] IGeo=“x_19_l_1_l_4_l_2_D_-99.9212598425197_D_-55.13385826771656_l_2_D_-99.9212598425197_D_-45.77952755905515_l_2_D_-43.22834645669286_D_
-45.77952755905515_l_2_D_-43.22834645669286_D_-55.13385826771656_b_f_D_-99.9212598425197_D_-55.13385826771656_D_-43.22834645669286_D_-45.77952755905515_D_1_D_0_D_0_D_1_D_135.9212598425197_D_-329.8110236212834“ [...] SnippetParent=“root“>
<TFPf ccnt=“l_1“ clgt=“U_12“ clwd=“U_144“ ufcw=“b_f“ inst=“x_4_U_0_U_0_U_0_U_0“ Fbof=“e_MAso“ Fboa=“U_0“ VJal=“e_top“ VJmi=“U_0“ iwrp=“b_f“ Self=“rc_u6aTFPf1“/>
<BfGo BFuc=“b_f“ BFso=“U_0“ BFro=“e_EToi“ BFic=“U_12“ BFcl=“e_iLbl“ Self=“rc_ubaBfGo1“/>
<cAOs Self=“rc_ubacAOs1“/>
<ctxw txwt=“e_none“ ptwi=“e_none“ ptwv=“b_f“ pcos=“ro_ubactxw1ccos1“ Self=“rc_ubactxw1“>
<ccos ptns=“rx_0“ acpn=“rx_0“ Self=“rc_ubactxw1ccos1“/>
</ctxw>
<Jgda Jgdv=“e_jGgv“ Jgcc=“e_botm“ Jgcz=“D_9.21259842519685“ Self=“rc_ubaJgda1“/>
</txtf>
<cflo pXLS=“x_0“ pWRD=“x_0“ pTXT=“x_0“ pSMP=“x_2_x_0_x_0“ Xans=“ro_n“ ATOC=“o_n“ pSTP=“ro_ua8SyPf1“ OVRF=“rb_f“ pMep=“o_ua8cMep1“ TCAc=“b_f“ sLbl=“k_“ Jgrd=“ro_ua8Jgda1“ Jang=“o_n“ ptag=“x_0“ Self=“rc_ua8“>
<SyPf omAL=“b_f“ omBZ=“U_12“ sgON=“e_Txft“ sorn=“e_horz“ Self=“rc_ua8SyPf1“/>
<cMep Self=“rc_ua8cMep1“>
<pcnt><![CDATA[ [...] ]]></pcnt>
</cMep>
<Jgda ptfs=“k_“ ptsz=“D_9.21259842519685“ Jcak=“D_0“ Jlak=“D_6.909448818897637“ phzs=“D_100“ pvts=“D_100“ laln=“e_lltj“ jgal=“e_Jact“ jcal=“e_Jact“ Self=“rc_ua8Jgda1“/>
<txsr prst=“o_u5e“ crst=“o_u5d“ paln=“e_left“>
<pcnt>c_hello world</pcnt>
</txsr>
</cflo>
<?xpacket begin=““ id=“W5M0MpCehiHzreSzNTczkc9d“?>
<x:xmpmeta [...] </x:xmpmeta>
<?xpacket end=“r“?>
</SnippetRoot>
Bildrahmen-Objekt-
dimensionen, Seitenposition
Textrahmen-Voreinstellungen
Textbereich-Einstellungen
XML-Deklaration,
InDesign Versionsangaben, Snippet-Wurzelelement
Farbmodus, Farbdefinition
Linien- und Konturenarten,
Beispiel 3:
InDesign-Snippet Bild
Ein einfacher Bildrahmen der Größe 36 x
50 mm, mit einem verknüpften RGB-Beispielbild, welches zentriert, auf 7,5% skaliert und auf einem nach den Standardeinstellungen von Adobe InDesign angelegtem Dokument platziert wurde, hat folgenden [gekürzten] XML-Code:
<?xml version=“1.0“ encoding=“UTF-8“ standalone=“yes“?>
<?aid style=“33“ type=“snippet“ DOMVersion=“4.0“ readerVersion=“3.0“ featureSet=“257“ product=“4.0(688)“?>
<?aid SnippetType=“PageItem“?>
<SnippetRoot>
<colr clmd=“e_prss“ clsp=“e_CMYK“ clvl=“x_4_D_0_D_0_D_0_D_100“ ovrd=“e_eOvB“ clbs=“o_n“ atcs=“e_nasp“ atvl=“x_0“ pnam=“c_Black“ edbl=“b_f“ rmbl=“b_f“ pvis=“b_t“ swID=“l_1f01“ ptag=“x_0“ Self=“rc_ub“/>
<swch pnam=“c_None“ edbl=“b_f“ rmbl=“b_f“ pvis=“b_t“ swID=“l_1f01“ ptag=“x_0“ Self=“rc_ue“/>
<StSt strT=“rk_“ pnam=“k_Solid“ Self=“rc_di5a29“/>
<ObSt dtos=“o_u6a“ dfos=“o_u69“ dffg=“o_u6b“ pnam=“k_[None]“ [...]>
[...]
</ObSt>
<ObSt dtos=“o_u6a“ dfos=“o_u69“ dffg=“o_u6b“ basd=“k_[None]“ pnam=“k_[Normal Graphics Frame]“ [...] >
<TFPf ccnt=“l_1“ clgt=“U_12“ clwd=“U_144“ ufcw=“b_f“ inst=“x_4_U_0_U_0_U_0_U_0“ Fbof=“e_MAso“ Fboa=“U_0“ VJal=“e_top“ VJmi=“U_0“ iwrp=“b_f“ Self=“rc_u6aTFPf1“/>
<BfGo BFuc=“b_f“ BFso=“U_0“ BFro=“e_EToi“ BFic=“U_12“ BFcl=“e_iLbl“ Self=“rc_u69BfGo1“/>
<cAOs AOpt=“e_AOPi“ AOsr=“b_f“ AOlp=“b_f“ AOpp=“b_t“ AOwp=“e_ANbr“ AOHa=“e_left“ AHrl=“e_txtf“ AOVa=“e_botm“ AOVr=“e_AVba“ AOxo=“D_0“ AOyo=“D_0“ AOya=“D_0“ Self=“rc_u69cAOs1“/>
<ctxw txwt=“e_none“ ptwi=“e_none“ ptwv=“b_f“ pcos=“ro_u69ctxw1ccos1“ Self=“rc_u69ctxw1“>
<ccos ptns=“rx_0“ acpn=“rx_0“ pcot=“e_sacp“ iied=“b_f“ pcnm=“k_“ Self=“rc_u69ctxw1ccos1“/>
</ctxw>
<SyPf omAL=“b_f“ omBZ=“U_12“ sgON=“e_Unkn“ sorn=“e_Unkn“ Self=“rc_u69SyPf1“/>
</ObSt>
<ObSt dtos=“o_u6a“ dfos=“o_u69“ dffg=“o_u6b“ basd=“k_[None]“ pnam=“k_[Normal Text Frame]“ [...]>
[...]
</ObSt>
<ObSt dtos=“o_u6a“ dfos=“o_u69“ dffg=“o_u6b“ basd=“k_[None]“ pnam=“k_[Normal Grid]“ [...]>
[...]
</ObSt>
<layr pnam=“c_Ebene 1“ [...] />
<crec [...] IGeo=“x_19_l_1_l_4_l_2_D_36_D_-384.944881889_l_2_D_36_D_-243.21259842443305_l_2_D_138.04724409448824_D_-243.21259842443305_l_2_D_138.04724409448824_D_-384.944881889_b_f_D_36_D_-384.944881889_D_138.04724409448824_D_-243.21259842443305_D_1_D_0_D_0_D_1_D_0_D_0“ [...] SnippetParent=“root“>
<cAOs Self=“rc_uc8cAOs1“/>
<ctxw txwt=“e_none“ ptwi=“e_none“ ptwv=“b_f“ pcos=“ro_uc8ctxw
Bilddaten-Verknüpfungspfad
Bildinformationen zu
Auflösung, Skalierung,
Positionierung inner-
halb des Rahmens,
Dateiformat, Farbmodus
XMP-Metadaten
(siehe [code: 6.11])
[48]
GUID: Globally Unique Identifier, global eindeutige Zahl in verteilten Computersystemen
[47]
URI: Uniform Resource
Identifiers, Bezeichnung von Ressourcen im Internet
[46]
RDF: Resource Description
Framework, Sprache zur Bereitstellung von Metadaten
ccos1“ Self=“rc_uc8ctxw1“>
<ccos ptns=“rx_0“ acpn=“rx_0“ pcot=“e_sacp“ iied=“b_f“ pcnm=“k_“ Self=“rc_uc8ctxw1ccos1“/>
</ctxw>
<imag Xaxn=“ro_n“ xpBm=“e_norm“ xpBo=“D_100“ xpBk=“b_f“ xpBi=“b_f“ xpSm=“e_none“ xpSb=“e_xpMb“ xpSx=“U_7“ xpSy=“U_7“ xpSr=“U_5“ xpSc=“o_ub“ xpSo=“D_75“ xpVm=“e_none“ xpVw=“U_9“ xpVc=“e_xpCc“ xpSs=“D_0“ xpSn=“D_0“ xpVn=“D_0“ txwr=“ro_uc9ctxw1“ pMep=“o_uc9cMep1“ pcpt=“ro_uc9cpth1“ iopp=“ro_uc9imop1“ grly=“ro_uc9glop1“ pplc=“ro_uc9cplc1“ IGeo=“x_f_l_0_D_0_D_0_D_1477_D_2049_D_0.07500000000000001_D_0_D_0_D_0.07500000000000001_D_31.636122047244108_D_-390.9162401567165_D_0_D_0_D_1477_D_2049“ nopr=“b_f“ clsp=“rc_RGB“ Appi=“rx_2_D_72_D_72“ Eppi=“rx_2_D_960_D_960“ aobs=“o_u68“ RpPr=“k_None“ ICii=“e_RIcs“ pLDs=“e_Dflt“ ImTp=“rc_JPEG“ ptag=“x_0“ Self=“rc_uc9“>
<ctxw txwt=“e_none“ ptwi=“e_none“ ptwv=“b_f“ pcos=“ro_uc9ctxw1ccos1“ Self=“rc_uc9ctxw1“>
<ccos ptns=“rx_0“ acpn=“rx_0“ pcot=“e_sacp“ iied=“b_f“ pcnm=“k_“ Self=“rc_uc9ctxw1ccos1“/>
</ctxw>
<cMep Self=“rc_uc9cMep1“>
<pcnt><![CDATA[ [...] ]]></pcnt>
</cMep>
<cpth ptns=“rx_0“ acpn=“rx_0“ cptp=“e_none“ invt=“b_f“ iied=“b_f“ rtfr=“b_f“ uhri=“b_t“ thhd=“l_19“ tlrc=“D_2“ isfr=“U_0“ ptnm=“k_“ Self=“rc_uc9cpth1“/>
<imop pres=“rl_48“ clfr=“b_t“ embd=“b_t“ alch=“k_“ Self=“rc_uc9imop1“/>
<glop gulo=“e_Unkn“ Self=“rc_uc9glop1“/>
<cplc plca=“l_ffffffff“ Self=“rc_uc9cplc1“/>
<clnk lURL=“k_“ letg=“rk_“ laID=“k_“ lstk=“re_lnsk“ LnkI=“x_c_c_C:\Projekte\Studium\Bachelor~sep~Thesis\Snippet~sep~Bild.jpg_k__l_0_l_8c01_k_JPEG_l_0_k__L_0~b3a1e_T_2007-11-02T21:01:06_l_0_b_t_b_f“ ptag=“x_0“ Self=“rc_ucc“/>
</imag>
</crec>
<?xpacket begin=““ id=“W5M0MpCehiHzreSzNTczkc9d“?>
<x:xmpmeta [...] </x:xmpmeta>
<?xpacket end=“r“?>
</SnippetRoot>
XMP-Meta-Informationen
Die Extensible Metadata Platform (XMP) ist ein Framework für Metadaten im Bereich der elektronischen Dokumentenerstellung und -publikation. XMP verwendet als Datenmodell eine relativ stark eingeschränkte und stellenweise modifizierte Untermenge des RDF [46] Datenmodells. RDF ist für die Beschreibung von Web-Ressourcen konzipiert, daher die Identifizierung von Ressourcen mittels URI [47]. Dieses Konzept passt für den sehr viel dynamischeren Bereich der Dokumentenerstellung weniger, da hier Dokumente mit ständig wechselnden Versionen, Bearbeitungsstati und Ausprägungen referenziert werden müssen. Daher werden in XMP lokal erzeugte GUIDs [48] anstelle von URIs zur Identifikation von Ressourcen verwendet. Die Entscheidung darüber, wie eine GUID zu erzeugen ist, liegt im Verantwortungsbereich der verarbeitenden Anwendung.
Beschreibung der
im Dokument
enthaltenen
Farbdefinitionen
Angaben zum
Dokumentenhandling
<x:xmpmeta xmlns:x=“adobe:ns:meta/“ x:xmptk=“3.1.1-111“>
<rdf:RDF xmlns:rdf=“http://www.w3.org/1999/02/22-rdf-syntax-ns#“>
<rdf:Description rdf:about=““ xmlns:xapMM=“http://ns.adobe.com/xap/1.0/mm/“>
<xapMM:InstanceID>xxxxxxxxxxxxxxxxxxxxxxxxx</xapMM:InstanceID>
<xapMM:DocumentID>adobe:docid:indd:xxxxxxxxxxxxxxxxxxxxxxxxx
</xapMM:DocumentID>
<xapMM:RenditionClass>default</xapMM:RenditionClass>
</rdf:Description>
<rdf:Description rdf:about=““ xmlns:xap=“http://ns.adobe.com/xap/1.0/“>
<xap:CreateDate>2007-11-01T10:23:43Z</xap:CreateDate>
<xap:ModifyDate>2007-11-01T10:24:35Z</xap:ModifyDate>
<xap:MetadataDate>2007-11-01T10:24:35Z</xap:MetadataDate>
<xap:CreatorTool>Adobe InDesign 4.0</xap:CreatorTool>
</rdf:Description>
<rdf:Description rdf:about=““ xmlns:dc=“http://purl.org/dc/elements/1.1/“>
<dc:format>application/x-indesign</dc:format>
</rdf:Description>
<rdf:Description rdf:about=““ xmlns:xapTPg=“http://ns.adobe.com/xap/1.0/t/pg/“ xmlns:xapG=“http://ns.adobe.com/xap/1.0/g/“ xmlns:stFNT=“http://ns.adobe.com/xap/1.0/sType/Font#“>
<xapTPg:Colorants>
<rdf:Seq>
<rdf:li rdf:parseType=“Resource“>
<xapG:swatchName>Schwarz</xapG:swatchName>
<xapG:mode>CMYK</xapG:mode>
<xapG:type>Process</xapG:type>
<xapG:cyan>0</xapG:cyan>
<xapG:magenta>0</xapG:magenta>
<xapG:yellow>0</xapG:yellow>
<xapG:black>100</xapG:black>
</rdf:li>
<rdf:li rdf:parseType=“Resource“>
<xapG:swatchName>Papier</xapG:swatchName>
<xapG:mode>CMYK</xapG:mode>
<xapG:type>Process</xapG:type>
<xapG:cyan>0</xapG:cyan>
<xapG:magenta>0</xapG:magenta>
<xapG:yellow>0</xapG:yellow>
<xapG:black>0</xapG:black>
</rdf:li>
<rdf:li rdf:parseType=“Resource“>
<xapG:swatchName>Passkreuze</xapG:swatchName>
<xapG:mode>CMYK</xapG:mode>
<xapG:type>Process</xapG:type>
<xapG:cyan>100</xapG:cyan>
<xapG:magenta>100</xapG:magenta>
<xapG:yellow>100</xapG:yellow>
<xapG:black>100</xapG:black>
</rdf:li>
</rdf:Seq>
</xapTPg:Colorants>
Beschreibung der
im Dokument
definierten Schriften
[Abb.: 6.14]
Meta-Informationen im
Layoutprogramm
<xapTPg:Fonts>
<rdf:Bag>
<rdf:li rdf:parseType=“Resource“>
<stFNT:fontName>TimesNewRomanPSMT</stFNT:fontName>
<stFNT:fontFamily>Times New Roman</stFNT:fontFamily>
<stFNT:fontFace>Regular</stFNT:fontFace>
<stFNT:fontType>OpenTypeTT</stFNT:fontType>
<stFNT:versionString>TimesNewRomanPSMTVersion 3.00</stFNT:versionString>
<stFNT:composite>false</stFNT:composite>
<stFNT:fontFileName>times.ttf</stFNT:fontFileName>
</rdf:li>
<rdf:li rdf:parseType=“Resource“>
<stFNT:fontName>TimesNewRomanPS-ItalicMT</stFNT:fontName>
<stFNT:fontFamily>Times New Roman</stFNT:fontFamily>
<stFNT:fontFace>Italic</stFNT:fontFace>
<stFNT:fontType>OpenTypeTT</stFNT:fontType>
<stFNT:versionString>TimesNewRomanPS-ItalicMTVersion 2.76</stFNT:versionString>
<stFNT:composite>false</stFNT:composite>
<stFNT:fontFileName>timesi.ttf</stFNT:fontFileName>
</rdf:li>
<rdf:li rdf:parseType=“Resource“>
<stFNT:fontName>TimesNewRomanPS-BoldMT</stFNT:fontName>
<stFNT:fontFamily>Times New Roman</stFNT:fontFamily>
<stFNT:fontFace>Bold</stFNT:fontFace>
<stFNT:fontType>OpenTypeTT</stFNT:fontType>
<stFNT:versionString>TimesNewRomanPS-BoldMTVersion 3.00</stFNT:versionString>
<stFNT:composite>false</stFNT:composite>
<stFNT:fontFileName>timesbd.ttf</stFNT:fontFileName>
</rdf:li>
<rdf:li rdf:parseType=“Resource“>
<stFNT:fontName>TimesNewRomanPS-BoldItalicMT</stFNT:fontName>
<stFNT:fontFamily>Times New Roman</stFNT:fontFamily>
<stFNT:fontFace>Bold Italic</stFNT:fontFace>
<stFNT:fontType>OpenTypeTT</stFNT:fontType>
<stFNT:versionString>TimesNewRomanPS-BoldItalicMTVersion 2.76</stFNT:versionString>
<stFNT:composite>false</stFNT:composite>
<stFNT:fontFileName>timesbi.ttf</stFNT:fontFileName>
</rdf:li>
</rdf:Bag>
</xapTPg:Fonts>
</rdf:Description>
</rdf:RDF>
</x:xmpmeta>
[51]
DPI (dots per inch):
Maßeinheit für Bildauflösungen
[50]
Hotfolder:
Überwachter Datenordner;
Programme, die über keine direkte Schnittstelle verfügen, können so über das Dateisystem kommunizieren
[49]
Drag and Drop:
Methode zur Bedienung von graphischen Benutzeroberflächen mithilfe einer Maus
[Abb.: 6.15]
Grafische Benutzeroberfläche
von BatchXSLT
6.3.3
BatchXSLT for InDesign
Die Hauptaufgabe von BatchXSLT besteht darin, das komplexe Adobe InDesign-Interchange-Format per XSL-Transformationen in verständliches und somit weiterbearbeitbares XML umzuwandeln, ohne vorherige langwierige Konfigurationen für jedes InDesign Dokument vornehmen zu müssen. Sogar hochaufgelöste Originalbilder (wie EPS oder TIFF) können automatisch in die im Internet gängigen Formate umgewandelt werden.
Die Hauptfunktionen im Überblick:
– Drag and Drop [49] -Transformation von InDesign INX-Dateien
– Vollautomatisches Abarbeiten im Batch-Modus (Hotfolder [50] )
– Anzeige der XML-Daten im Browser als ePaper oder XML-Baum
– Automatisches Erstellen von CSS aus den Original InDesign-Stilvorlagen
– Ersetzen von Zeichensätzen
– Aktive Links aus beliebigen
Stilvorlagen
Falls die Programme Ghostscript und
ImageMagick installiert sind:
– Konvertierung von hochauflösenden Bildern zu JPEG, GIF, PNG
– Konfigurierbare DPI-Anzahl [51] und
Bild-Qualität
Die resultierende XML Ausgabedatei
enthält Informationen über:
– Artikelinhalte (mit Stilvorlagen
versehener Text)
– Zu den Artikeln gelinkte Bilder
– Artikelpositionen auf der Seite
– Gelinkte Seiten-PDFs und Seiten-JPEGs, PDFs und CSS
Systemvoraussetzungen für BatchXSLT:
– Sun Java Version 1.5
– Betriebssystem:
– Windows 2000, 2003, XP, Vista
– Mac OS X 10.4x, 10.5
– Unix
– Optional: ImageMagick ab Version 6.3.3 und Ghostscript ab Version 8.54
[Abb.: 6.16]
Display:
Benutzerinterface
von ImageMagick
6.3.4
ImageMagick
ImageMagick ist eine frei erhältliche Grafik-Bibliothek für Linux, Windows und auch andere Plattformen, um komplizierte Formatumwandlungen, Bearbeitungen und Farbänderungen, auch unter Zuhilfenahme von Ghostscript, durchzuführen.
ImageMagick kann momentan mehr als 90 der meistverwendeten Bildformate lesen, verändern und schreiben.
Die Werkzeuge von ImageMagick lauten:
– DISPLAY öffnet ein Interface. Über das Menü kann man Dateien öffnen, abspeichern oder löschen, sie drehen, Änderungen an der Farbe vornehmen oder bestimmte Effekte anwenden.
– IMPORT erzeugt Screenshots des gesamten Bildschirms oder von
bestimmten Bildern oder Fenstern.
– ANIMATE ist ein Animationswerkzeug. Man kann eine Reihe von Bildern auswählen, die dann eines nach dem anderen oder als GIF-Animation gezeigt werden.
– MONTAGE kann zum Beispiel ein gekacheltes Bild erstellen oder ein Bild, auf dem alle einzelnen Bilder eines animierten GIF-Bildes zu sehen sind.
– CONVERT ist ein sehr mächtiges Werkzeug. Man kann ein Bild in ein anderes Format umwandeln, zum Beispiel ein GIF-Bild in ein JPG-Bild, man kann die Größe des Bildes verändern und auch Effekte anwenden.
– MOGRIFY ist sehr ähnlich zu convert. Der Befehl überschreibt aber das bearbeitete Bild, während bei convert und den anderen Werkzeugen eine Datei angegeben werden muss, die das veränderte Bild speichert.
– IDENTIFY gibt Infos über das Bild:
Geometrie, Größe, Name, Format
– COMBINE kombiniert zwei oder mehr Bilder zu einem neuen Bild.
Um die Werkzeuge im Kommandozeilen-
Textmodus zu benutzen, nimmt man den Namen des Werkzeuges, gefolgt von jeweiligen Befehlsoptionen, das die Quelldatei und den Dateinamen, unter dem das veränderte Bild abgespeichert wird.
[52]
GSView:
Grafische Benutzeroberfläche (GUI) für Ghostscript, um
Postscript-Dateien zu
betrachten und zu drucken
[Abb.: 6.17]
Benutzerinterface
von GSView
6.3.5
Ghostscript
Ghostscript ist ein Softwarepaket, das die Darstellung und den Ausdruck von Postscript- und PDF-Dokumenten unterstützt und für verschiedene Plattformen erhältlich ist. Darüber hinaus erlaubt es eine umfassende Bearbeitung und Konvertierung zwischen den genannten Formaten. Ghostscript wird per Kommandozeilenbefehl ausgeführt, daher nutzen insbesondere Windows-Anwender meist graphische Oberflächen wie GSView [52]. GSView erfordert die vorherige Installation von Ghostscript. Wesentliche Funktionen sind die Darstellung von Postscript- und PDF-Dateien sowie der Ausdruck von Postscript-Dokumenten auch auf nicht-postscriptfähigen Druckern.
Ghostscript akzeptiert PostScript- und PDF-Daten als Eingabe und beinhaltet zur Konvertierung in andere Formate eine Vielzahl von Ghostscript-Treibern, die bei Ghostscript Devices heissen.
Ghostscript arbeitet bei der Konvertierung in zwei Schritten:
1. Die PostScript-Daten werden gerastert, das bedeutet die in der PostScript-Sprache beschriebene Grafik wird in ein Raster einzelner Bildpunkte zerlegt. Dieser Schritt ist unabhängig vom jeweiligen Ghostscript-Treiber. Je feiner das Raster, desto höher ist einerseits die Ausgabequalität, aber bei doppelter Auflösung, vervierfacht sich die Anzahl der Rasterpunkte und damit vervierfacht sich der Rechenaufwand und Speicherverbrauch.
2. Die in Rasterpunkte aufgelöste Grafik wird nun durch den jeweiligen Ghostscript-Treiber in das letztlich gewünschte Format umgewandelt.
Ghostscript stellt nicht nur Druckertreiber zur Verfügung. Ghostscript kann auch PostScript-Dateien zur Bildschirmausgabe verarbeiten oder als PDF umwandeln. Die Ausgabeformate von Ghostscript lassen sich mittels sogenannter Devices bestimmen.
In folgender Liste sind einige Ausgabeformate aufgelistet.
Lowlevel-Formate:
.PNG, .JPG, .TIF, .BMP, .PCX, .PSD
High-Level Formate:
.PDF, .PS, .EPS
Es existieren noch weitere Formate und Ausgabemöglichkeiten, die hier aber nicht näher beschrieben werden.
[55,56]
PUSH- und PULL-Methode:
Strategien zum Aufbau einer XSL-Datei,
[53]
Java-Anwendung:
In der Programmiersprache Java geschriebene vollwertige Anwendung, die zur Ausführung keinen Browser benötigt
[54]
Xalan:
XSLT-Prozessor der Apache Software Foundation
[Abb.: 6.18]
Einstellungsmöglichkeiten
In BatchXSLT:
Output Mode: Ausgabe als XML-Baum oder ePaper;
Box Catching: Einstellung, um Artikelelemte zu gruppieren;
Page JPEG: Skalierung der
Seiten-JPEGs des Dokumentes;
Image Export: Art Verarbeitung der einzelnen Bildobjekte;
Stylesheets: Option externe Stylesheets einzubinden;
Font Replacement: Austausch-Liste von Schrift-Paaren;
LinkStyles: Liste mit Klassen, die als Links dargestellt werden
6.3.6
Funktionsweise von BatchXSLT
BatchXSLT ist eine Java-Anwendung [53] mit einer grafischen Benutzeroberfläche, auf der die Parameter für die XML-Konvertierung und die Bildverarbeitung sowie ganze Verarbeitungsroutinen und Automatisierungen eingestellt werden.
Bei der Konvertierung arbeitet im Hintergrund der XSLT-Prozessor Xalan [54] der mit Hilfe von XSLT-Stylesheets für eine Aufbereitung und Umwandlung der INX-Daten in bereinigte XML-Daten sorgt. Außerdem werden die beiden Bildverarbeitungsprogramme ImageMagick und Ghostscript hinzugezogen, um die Bilddaten aus dem Printprodukt webgerecht aufzubereiten.
Die zentrale XSL-Datei inxepaper.xse, in der die Templates für die Transformation nach der PUSH- [55] und der PULL- [56] Methode definiert und angelegt sind, ist aufgrund des kommerziellen Vertriebs der Anwendung verschlüsselt und somit nicht lesbar.
Die Natur der INX-Struktur erlaubt nur eine kombinierte XSL-Verarbeitung nach beiden Methode, da es keine strikten Schemata des Datensatzes gibt. Die PULL-Methode mit <for-each> und <value-of> hat den Vorteil, dass die Knoten direkt angesteuert werden können. Im Gegensatz dazu müssen bei den <apply-templates> der PUSH-Methode die entsprechenden Templates erst gesucht werden.
Der PUSH-Stil (auch pattern-matching oder rule-based stylesheets genannt) ist eine der grundlegenden Charaktereigenschaften von XSLT. Mit diesem Prinzip kann man für jede Art von Knoten Template-Regel erstellen, ohne sich groß um die Struktur der Daten Gedanken machen zu müssen.
Angaben zum Dokument,
zum Betriebssystem
und zur Konvertierung
Seitenzahl und Seitengröße
XSL-Verarbeitungsanweisung
6.3.7
Auswertung der Export-Daten
Beispiel 1:
Leeres InDesign-Dokument
(inklusive generierter CSS-Datei)
.P_____NoStyle____ { text-align:left; font-family:“Times New Roman“; font
size:12pt; color:#000000; font-weight:normal; font-style:italic; text-transform:none; margin-top:0px; margin-bottom:0px; }
.P_NormalParagraphStyle { margin-top:0px; margin-bottom:0px; }
.C_____NoStyle____ { }
<?xml version=“1.0“ encoding=“UTF-8“?>
<!DOCTYPE indd_document>
<?xml-stylesheet href=“XSLCSS/xml2htmlEpaper.xsl“ type=“text/xsl“?>
<indd_document>
<!-- **** GENERAL INFO: **** -->
<doctypeinfos encoding=“UTF-8“ xslpath=“xml2htmlEpaper.xsl“ csspath=“Leeres_DINA4_Dokument.css“/>
<!--
Creation Date: Sun Nov 04 17:05:40 GMT+0100 (CET) 2007
Output Version: 1.0
Input Path: C:\Projekte\Studium\Bachelor_Thesis\Beispiel 1 Leeres InDesign-Dokument\
Indesign Document Name: Leeres_DINA4_Dokument
Source INX File Name: Leeres_DINA4_Dokument.inx
Operating System: Windows 2000
VM Version: 1.6.0_01
Transformer Engine Name: BatchXSLT 10.05 (CopyRight www.AiEDV.ch, ALL RIGHTS RESERVED
-->
<header type=“layout“>
<headerfield name=“creationDate“>Sun Nov 04 17:05:40 GMT+0100 (CET) 2007</headerfield>
<headerfield name=“outputVersion“>1.0</headerfield>
<headerfield name=“inputPath“>C:%5cProjekte%5cStudium%5cBachelor_Thesis%5cBeispiel%201%20Leeres%20InDesign-Dokument%5c</headerfield>
<headerfield name=“indesignDocname“>Leeres_DINA4_Dokument</headerfield>
<headerfield name=“sourceINXfileName“>Leeres_DINA4_Dokument.inx</headerfield>
<headerfield name=“operatingSystem“>Windows 2000</headerfield>
<headerfield name=“vmVersion“>1.6.0_01</headerfield>
<headerfield name=“transformEngine“>BatchXSLT 10.05</headerfield>
</header>
<!-- **** GENERAL INFO: END **** -->
<!-- **** SPREAD #0 **** -->
<!-- **** PAGE #1 CONTENT: **** -->
<page page_sequence=“1“ page_name=“1“ w=“595.275590551“ h=“841.889763778“>
<pageJPEG sizefactor=“0.4“ original=“Leeres_DINA4_Dokument.jpg“ w=“238.11023622040003“ h=“336.7559055112“>Leeres_DINA4_Dokument_40.jpg</pageJPEG>
<pagePDF fullpath=“C:\Projekte\Studium\Bachelor_Thesis\Beispiel 1 Leeres InDesign-Dokument\Leeres_DINA4_Dokument.pdf“>Leeres_DINA4_Dokument.pdf</pagePDF>
</page>
<!-- **** PAGE #1 CONTENT: END **** -->
<documentPDF fullpath=“C:\Projekte\Studium\Bachelor_Thesis\Beispiel 1 Leeres InDesign-Dokument\Leeres_DINA4_Dokument.pdf“>Leeres_DINA4_Dokument.pdf</documentPDF>
</indd_document>
Inhalt des Textrahmens,
Zuweisung des Stylesheets
Angaben zum Dokument,
zum Betriebssystem
und zur Konvertierung
Seitenzahl und Seitengröße
XSL-Verarbeitungsanweisung
Beispiel 2:
InDesign-Snippet Text
(inklusive generierter CSS-Datei)
.P_____NoStyle____ { text-align:left; font-family:“Times New Roman“; font
size:12pt; color:#000000; font-weight:normal; font-style:italic; text-transform:none; margin-top:0px; margin-bottom:0px; }
.P_NormalParagraphStyle { margin-top:0px; margin-bottom:0px; }
.C_____NoStyle____ { }
<?xml version=“1.0“ encoding=“UTF-8“?>
<!DOCTYPE indd_document>
<?xml-stylesheet href=“XSLCSS/xml2htmlEpaper.xsl“ type=“text/xsl“?>
<indd_document>
<!-- **** GENERAL INFO: **** -->
<doctypeinfos encoding=“UTF-8“ xslpath=“xml2htmlEpaper.xsl“ csspath=“Snippet_Text.css“/>
<!--
Creation Date: Sun Nov 04 17:19:52 GMT+0100 (CET) 2007
Output Version: 1.0
Input Path: C:\Projekte\Studium\Bachelor_Thesis\Beispiel 2 InDesign-Snippet Text\
Indesign Document Name: Snippet_Text
Source INX File Name: Snippet_Text.inx
Operating System: Windows 2000
VM Version: 1.6.0_01
Transformer Engine Name: BatchXSLT 10.05 (CopyRight www.AiEDV.ch, ALL RIGHTS RESERVED)
-->
<header type=“layout“>
<headerfield name=“creationDate“>Sun Nov 04 17:19:52 GMT+0100 (CET) 2007</headerfield>
<headerfield name=“outputVersion“>1.0</headerfield>
<headerfield name=“inputPath“>C:%5cProjekte%5cStudium%5cBachelor_Thesis%5cBeispiel%202%20InDesign-Snippet%20Text%5c</headerfield>
<headerfield name=“indesignDocname“>Snippet_Text</headerfield>
<headerfield name=“sourceINXfileName“>Snippet_Text.inx</headerfield>
<headerfield name=“operatingSystem“>Windows 2000</headerfield>
<headerfield name=“vmVersion“>1.6.0_01</headerfield>
<headerfield name=“transformEngine“>BatchXSLT 10.05</headerfield>
</header>
<!-- **** GENERAL INFO: END **** -->
<!-- **** SPREAD #0 **** -->
<!-- **** PAGE #1 CONTENT: **** -->
<page page_sequence=“1“ page_name=“1“ w=“595.275590551“ h=“841.889763778“>
<pageJPEG sizefactor=“0.4“ original=“Snippet_Text.jpg“ w=“238.11023622040003“ h=“336.7559055112“>Snippet_Text_40.jpg</pageJPEG>
<pagePDF fullpath=“C:\Projekte\Studium\Bachelor_Thesis\Beispiel 2 InDesign-Snippet Text\Snippet_Text.pdf“>Snippet_Text.pdf</pagePDF>
<!-- **** ARTICLES ON PAGE #1: **** -->
<articles page_sequence=“1“>
<!-- **** ARTICLE ‚0‘ PAGE #1: **** -->
<article idx=“0“ page_sequence=“1“ coords=“14,14,36,18“ coords_orig=“36,36,92,45“>
<content type=“text“ Self=“rc_ua9“ id=“rc_ua9“>
<div class=“P_NormalParagraphStyle“>hello world</div>
</content>
<textshortcut>hello world</textshortcut>
</article>
<!-- **** ARTICLE ‚0‘ PAGE #1: END **** -->
Angaben zum Dokument,
zum Betriebssystem
und zur Konvertierung
Seitenzahl und Seitengröße
XSL-Verarbeitungsanweisung
</articles>
<!-- **** ARTICLES ON PAGE #1: END **** -->
</page>
<!-- **** PAGE #1 CONTENT: END **** -->
<documentPDF fullpath=“C:\Projekte\Studium\Bachelor_Thesis\Beispiel 2 InDesign-Snippet Text\Snippet_Text.pdf“>Snippet_Text.pdf
</documentPDF>
</indd_document>
Beispiel 3:
InDesign-Snippet Bild
(inklusive generierter CSS-Datei)
.P_____NoStyle____ { text-align:left; font-family:“Times New Roman“; font
size:12pt; color:#000000; font-weight:normal; font-style:italic; text-transform:none; margin-top:0px; margin-bottom:0px; }
.P_NormalParagraphStyle { margin-top:0px; margin-bottom:0px; }
.C_____NoStyle____ { }
<?xml version=“1.0“ encoding=“UTF-8“?>
<!DOCTYPE indd_document>
<?xml-stylesheet href=“XSLCSS/xml2htmlEpaper.xsl“ type=“text/xsl“?>
<indd_document>
<!-- **** GENERAL INFO: **** -->
<doctypeinfos encoding=“UTF-8“ xslpath=“xml2htmlEpaper.xsl“ csspath=“Snippet_Bild.css“/>
<!--
Creation Date: Sun Nov 04 17:38:38 GMT+0100 (CET) 2007
Output Version: 1.0
Input Path: C:\Projekte\Studium\Bachelor_Thesis\Beispiel 3 InDesign-Snippet Bild\
Indesign Document Name: Snippet_Bild
Source INX File Name: Snippet_Bild.inx
Operat
ing System: Windows 2000
VM Version: 1.6.0_01
Transformer Engine Name: BatchXSLT 10.05 (CopyRight www.AiEDV.ch, ALL RIGHTS RESERVED -->
<header type=“layout“>
<headerfield name=“creationDate“>Sun Nov 04 17:38:38 GMT+0100 (CET) 2007</headerfield>
<headerfield name=“outputVersion“>1.0</headerfield>
<headerfield name=“inputPath“>C:%5cProjekte%5cStudium%5cBachelor_Thesis%5cBeispiel%203%20InDesign-Snippet%20Bild%5c</headerfield>
<headerfield name=“indesignDocname“>Snippet_Bild</headerfield>
<headerfield name=“sourceINXfileName“>Snippet_Bild.inx</headerfield>
<headerfield name=“operatingSystem“>Windows 2000</headerfield>
<headerfield name=“vmVersion“>1.6.0_01</headerfield>
<headerfield name=“transformEngine“>BatchXSLT 10.05</headerfield>
</header>
<!-- **** GENERAL INFO: END **** -->
<!-- **** SPREAD #0 **** -->
<!-- **** PAGE #1 CONTENT: **** -->
<page page_sequence=“1“ page_name=“1“ w=“595.275590551“ h=“841.889763778“>
<pageJPEG sizefactor=“0.4“ original=“Snippet_Bild.jpg“ w=“238.11023622040003“ h=“336.7559055112“>Snippet_Bild_40.jpg</pageJPEG>
<pagePDF fullpath=“C:\Projekte\Studium\Bachelor_Thesis\Beispiel
3 InDesign-Snippet Bild\Snippet_Bild.pdf“>Snippet_Bild.pdf
Erzeugung des
(X)HTML-Grundgerüsts
Navigation zum Wurzel-
element der Export-Daten
Erzeugung der
XML-Deklaration
</pagePDF>
<!-- **** ARTICLES ON PAGE #1: **** -->
<articles page_sequence=“1“>
<!-- **** ARTICLE ‚0‘ PAGE #1: **** -->
<article idx=“0“ page_sequence=“1“ coords=“14,14,55,70“ coords_orig=“36,36,138,177“>
<content type=“image“ Self=“rc_ua8“ id=“rc_ua8“ anchor_id=““ exist=““>
<img src=“ua8_Snippet-Bild.jpg“ alt=“Snippet-Bild.jpg“/>
</content>
<textshortcut/>
</article>
<!-- **** ARTICLE ‚0‘ PAGE #1: END **** -->
</articles>
<!-- **** ARTICLES ON PAGE #1: END **** -->
</page>
<!-- **** PAGE #1 CONTENT: END **** -->
<documentPDF fullpath=“C:\Projekte\Studium\Bachelor_Thesis\Beispiel 3 InDesign-Snippet Bild\Snippet_Bild.pdf“>Snippet_Bild.pdf
</documentPDF>
</indd_document>
Browserseitige HTML-Konvertierung
Momentan bekommt der Browser nur XML-Daten zur Verarbeitung, die mithilfe des Stylesheets xml2htmEpaper.xsl interpretiert werden. Weiterhin ist zur Erweiterung der Funktionalität das Javascript INXepaper.js eingebunden, welches aber
an dieser Stelle nicht weiter erläutert wird. Die Datei xml2htmEpaper.xsl im Detail:
<?xml version=“1.0“ encoding=“UTF-8“?>
<xsl:stylesheet xmlns:xsl=“http://www.w3.org/1999/XSL/Transform“
version=“1.0“>
<xsl:output method=“html“ />
<xsl:output doctype-public=“-//W3C//DTD HTML 4.01 Transitional//EN“ />
<xsl:output media-type=“text/html“/>
<xsl:output indent=“yes“/>
<xsl:output encoding=“UTF-8“/>
<xsl:template match=“/“>
<xsl:apply-templates select=“indd_document“ />
</xsl:template>
<xsl:template match=“indd_document“>
<html>
<head>
<meta http-equiv=“Content-Type“>
<xsl:attribute name=“content“>text/html; charset=utf-8</xsl:attribute>
</meta>
<title><xsl:value-of select=“@title“ /></title>
<script language=“javascript“ type=“text/javascript“ src=“XSLCSS/INXepaper.js“></script>
<link type=“text/css“>
<xsl:attribute name=“rel“>Stylesheet</xsl:attribute>
<xsl:attribute name=“href“><xsl:value-of
select=“doctypeinfos/@csspath“/></xsl:attribute>
</link>
</head>
Erzeugung des
ePaper-Seiteninhalts
Aufruf der Templates:
create_epaper_page
output_articles
Aufruf des Templates:
show_creator
<xsl:call-template name=“show_creator“>
<xsl:with-param name=“creationDate“><xsl:value-of select=“header/headerfield[@name=‘creationDate‘]/.“ /></xsl:with-param>
<xsl:with-param name=“outputVersion“><xsl:value-of select=“header/headerfield[@name=‘outputVersion‘]/.“ /></xsl:with-param>
<xsl:with-param name=“inputPath“><xsl:value-of select=“header/headerfield[@name=‘inputPath‘]/.“ /></xsl:with-param>
<xsl:with-param name=“indesignDocname“><xsl:value-of select=“header/headerfield[@name=‘indesignDocname‘]/.“ /></xsl:with-param>
<xsl:with-param name=“sourceINXfileName“><xsl:value-of select=“header/headerfield[@name=‘sourceINXfileName‘]/.“ /></xsl:with-param>
</xsl:call-template>
<body style=“background-color:#FFFFFF; margin-left: 0px; margin-top: 0px; font-size:9pt“>
<xsl:comment> **** GENERAL INFO: **** </xsl:comment>
<div style=“position:absolute; visibility: hidden; top: -1000px; left: -1000px; width: 0px; height: 0px; overflow:hidden“>
<xsl:attribute name=“id“>doctypeinfos</xsl:attribute>
<xsl:attribute name=“enc“><xsl:value-of select=“/indd_document/doctypeinfos/@encoding“ /></xsl:attribute>
<xsl:value-of select=“/indd_document/doctypeinfos/@csspath“ /></div>
<xsl:comment> **** GENERAL INFO: END **** </xsl:comment>
<xsl:for-each select=“page“>
<xsl:comment> **** PAGE #<xsl:value-of select=“@page_sequence“ /> CONTENT: **** </xsl:comment>
<xsl:call-template name=“create_epaper_page“/>
<xsl:call-template name=“output_articles“/>
<xsl:comment> **** PAGE #<xsl:value-of select=“@page_sequence“ /> CONTENT: END **** </xsl:comment>
</xsl:for-each>
<xsl:comment> **** EPAPER FLOATER: The floater for the text shortcut when moving the mouse over an article **** </xsl:comment>
<div id=“float_container“ onclick=“show_current_article()“ class=“floatCont“ style=“position:absolute; visibility: hidden;z-index:9; top: 0px; left:0px; width:200px; height:155px; overflow: hidden“>
<div id=“float_inner“><div id=“float_tit“ class=“floatTit“></div><div id=“float_txt“ class=“floatTxt“></div></div>
</div>
<xsl:comment> **** EPAPER FLOATER: END **** </xsl:comment>
</body>
</html>
</xsl:template>
<xsl:template name=“create_epaper_page“>
<xsl:variable name=“thepage“><xsl:value-of select=“@page_sequence“ /></xsl:variable>
<xsl:variable name=“pagewidth“><xsl:value-of select=“@w“ /></xsl:variable>
<xsl:variable name=“pageheight“><xsl:value-of select=“@h“ /></xsl:variable>
<xsl:comment> **** EPAPER PAGE #<xsl:value-of select=“$thepage“ />: Table containing the navigatable page JPEG and box areas **** </xsl:comment>
<div style=“position:absolute; visibility: hidden; top: -1000px; left: -1000px; width: 0px; height: 0px; overflow:hidden“><xsl:attribute name=“id“>view_state_<xsl:value-of select=“$thepage“ /></xsl:attribute>0</div>
<table border=“0“ cellpadding=“0“ cellspacing=“0“ style=“font-size:9pt“>
<xsl:attribute name=“id“>page_table_<xsl:value-of select=“$thepage“/></xsl:attribute>
<tr style=“height: 15px“>
<xsl:attribute name=“id“>page_table_title</xsl:attribute>
<xsl:choose>
<xsl:when test=“/indd_document/@demo_mode = 1“>
<td align=“center“ colspan=“3“ style=“font-size:
10pt; font-family: sans-serif; color:#FF3333“>****** DEMO MODE!! Contains scrambled text content!</td>
Erzeugung des
ePaper-Seiteninhalts
</xsl:when>
<xsl:otherwise>
<td colspan=“3“ style=“font-size: 10pt; font-family: sans-serif“><div id=“page_table_title_cont“> </div></td>
</xsl:otherwise>
</xsl:choose>
</tr>
<tr style=“height: 0px“>
<xsl:attribute name=“id“>page_top_row_<xsl:value-of select=“$thepage“/></xsl:attribute>
<td align=“center“ colspan=“3“ style=“font-size: 1pt; font-family: sans-serif“> </td>
</tr>
<tr>
<td style=“width:10px“ ><xsl:attribute name=“id“>page_left_col_<xsl:value-of select=“$thepage“/></xsl:attribute>  </td>
<td valign=“top“><xsl:attribute name=“id“>page_cont_td_<xsl:value-of select=“$thepage“/></xsl:attribute>
<div style=“position:relative; top: 0px; left:0px;“>
<xsl:attribute name=“id“>page_cont_<xsl:value-of select=“$thepage“/></xsl:attribute>
<xsl:choose>
<xsl:when test=“pageJPEG/. != ‚‘“>
<img>
<xsl:attribute name=“style“>border-style:solid; border-width:1px; border-color:#AAAAAA; width:<xsl:value-of select=“pageJPEG/@w“/>px; height:<xsl:value-of select=“pageJPEG/@h“/>px;</xsl:attribute>
<xsl:attribute name=“src“><xsl:value-of select=“pageJPEG/.“/></xsl:attribute>
<xsl:attribute name=“alt“><xsl:value-of select=“$thepage“/></xsl:attribute>
<xsl:attribute name=“usemap“>#M<xsl:value-of select=“$thepage“/>map</xsl:attribute>
</img>
</xsl:when>
<xsl:otherwise><b>Missing Page JPEG!</b><br/>No ePaper display possible!</xsl:otherwise>
</xsl:choose>
<map>
<xsl:attribute name=“name“>M<xsl:value-of select=“$thepage“/>map</xsl:attribute>
<xsl:attribute name=“id“>M<xsl:value-of select=“$thepage“/>map</xsl:attribute>
<xsl:variable name=“sizefactor“><xsl:value-of select=“pageJPEG/@sizefactor“/></xsl:variable>
<xsl:for-each select=“articles/article“>
<xsl:if test=“@coords and content“>
<xsl:variable name=“hasWWWlink“></xsl:variable>
<xsl:variable name=“hrefAtrr“>javascript:show_article_jpg(this,‘Art<xsl:value-of select=“@idx“/>_<xsl:value-of select=“$thepage“/>‘,‘<xsl:value-of select=“$thepage“/>‘,‘<xsl:value-of select=“$sizefactor*100“/>%25‘,‘‘,‘<xsl:value-of select=“/indd_document/header/headerfield[@name=‘sourceINXfileName‘]/.“/>‘,‘<xsl:value-of select=“$hasWWWlink“/>‘)</xsl:variable>
<area> <xsl:attribute name=“id“>A<xsl:value-of select=“@idx“/>_<xsl:value-of select=“$thepage“/></xsl:attribute>
<xsl:attribute name=“alt“><xsl:value-of select=“@idx“/></xsl:attribute>
<xsl:attribute name=“onmouseover“>floater(this,1,‘‘,‘<xsl:value-of select=“textshortcut/.“/>‘)</xsl:attribute>
<xsl:attribute name=“onmouseout“>floater(this,0)</xsl:attribute>
<xsl:attribute name=“href“><xsl:value-of select=“$hrefAtrr“/></xsl:attribute>
<xsl:attribute name=“shape“>rect</xsl:attribute>
<xsl:attribute name=“coords“><xsl:value-of select=“@coords“/></xsl:attribute>
</area>
</xsl:if>
</xsl:for-each>
</map>
<div style=“position:absolute; visibility: hidden; top: 0px; left:0px; width:60px; height:2px; background-color:#FF0000; overflow: hidden“>
<xsl:attribute name=“id“>float_lineH_<xsl:value-of select=“$thepage“/></xsl:attribute></div>
<div style=“position:absolute; visibility: hidden; top: 0px; left:0px; width:2px; height:60px; background-color:#FF0000; overflow: hidden“>
Erzeugung der Verweise
auf das Seiten-PDF
Aufruf des Templates:
set_documentPDF
Aufruf des Templates:
set_pagePDF
<xsl:attribute name=“id“>float_lineV_<xsl:value-
of select=“$thepage“/></xsl:attribute></div>
</div>
</td>
<td style=“color:#333333; font-size: 8pt; font-family: ‚Arial‘, sans-serif; vertical-align: top; white-space: nowrap;“>
<div style=“margin-left:4px;“>
<xsl:if test=“pagePDF“>
<xsl:call-template name=“set_pagePDF“>
<xsl:with-param name=“page“><xsl:value-of select=“$thepage“/></xsl:with-param>
</xsl:call-template>
</xsl:if>
<xsl:if test=“/indd_document/documentPDF“>
<xsl:call-template name=“set_documentPDF“>
<xsl:with-param name=“page“><xsl:value-of select=“$thepage“/></xsl:with-param>
</xsl:call-template>
</xsl:if>
</div>
<xsl:variable name=“script_command“>/*<![CDATA[*/set_initial_display_mode_icons(<xsl:value-of select=“$thepage“/>,“icn_1_<xsl:value-of select=“$thepage“/>“,“icn_2_<xsl:value-of select=“$thepage“/>“,“icn_3_<xsl:value-of select=“$thepage“/>“,“info_text_1_<xsl:value-of select=“$thepage“/>“)/*]]>*/</xsl:variable>
<script language=“javascript“ type=“text/javascript“><xsl:value-of select=“$script_command“ disable-output-escaping=“yes“/></script>
</td>
</tr>
</table>
<xsl:comment> **** EPAPER PAGE #<xsl:value-of select=“$thepage“ />: END **** </xsl:comment>
<br/>
</xsl:template>
<xsl:template name=“output_articles“> <xsl:comment> **** ARTICLES ON PAGE #<xsl:value-of select=“@page_sequence“/>: **** </xsl:comment>
<xsl:for-each select=“articles/article“>
<xsl:comment> **** ARTICLE ‚<xsl:value-of select=“@idx“/>‘ PAGE #<xsl:value-of select=“@page_sequence“/>: **** </xsl:comment>
<div style=“position:absolute; visibility: hidden; top: -1000px; left: -1000px; width: 0px; height: 0px; overflow:hidden;“>
<xsl:attribute name=“id“>Art<xsl:value-of select=“@idx“/>_<xsl:value-of select=“@page_sequence“/></xsl:attribute>
<xsl:copy-of select=“content/*/.“/>
</div>
<xsl:comment> **** ARTICLE ‚<xsl:value-of select=“@idx“/>‘ PAGE #<xsl:value-of select=“@page_sequence“/>: END **** </xsl:comment>
</xsl:for-each>
<xsl:comment> **** ARTICLES ON PAGE #<xsl:value-of select=“@page_sequence“/>: END **** </xsl:comment>
</xsl:template>
<xsl:template match=“text()“><xsl:value-of select=“.“/></xsl:template>
<xsl:template name=“set_pagePDF“>
<xsl:param name=“page“/>
<a target=“_blank“ style=“text-decoration: none“>
<xsl:attribute name=“href“><xsl:value-of
select=“pagePDF/.“/></xsl:attribute>
<img src=“XSLCSS/pdf.jpg“ align=“middle“ alt=“PDF“ style=“width:32px; height:32px;border-style: solid; border-color: #FFFFFF; border-width: 2px“>
<xsl:attribute name=“id“>icn_3_<xsl:value-of select=“$page“/></xsl:attribute>
</img>
<xsl:variable name=“script_command“>/*<![CDATA[*/glt(3,null,“pdf_txt_1_<xsl:value-of select=“$page“/>“)/*]]>*/</xsl:variable>
Erzeugung der Verweise
auf das Seiten-PDF
[57]
XML-fähige Browser:
XML-Daten können mit XSL-Angaben transformiert werden
[Abb.: 6.19]
Beispiel 1: Leeres Dokument
[Abb.: 6.20] (links)
Beispiel 2: Text-Snippet
[Abb: 6.21] (rechts)
Beispiel 3: Bild-Snippet
Erzeugung der Verweise
auf das Gesamt-PDF
Generierung der
Verarbeitungskommentare
 <span><xsl:attribute name=“id“>pdf_txt_1_<xsl:value-of select=“$page“/></
xsl:attribute><script language=“javascript“ type=“text/javascript“><xsl:value-of select=“$script_command“ disable-output-escaping=“yes“/></script></span>
</a>
<br/>
</xsl:template>
<xsl:template name=“set_documentPDF“>
<xsl:param name=“page“/>
<a target=“_blank“ style=“text-decoration: none“>
<xsl:attribute name=“href“><xsl:value-of select=“/indd_document/documentPDF/.“/></xsl:attribute>
<img src=“XSLCSS/pdf.jpg“ align=“middle“ alt=“PDF“ style=“width:32px; height:32px;border-style: solid; border-color: #FFFFFF; border-width: 2px“>
<xsl:attribute name=“id“>icn_3_<xsl:value-of select=“$page“/></xsl:attribute>
</img>
<xsl:variable name=“script_command“>/*<![CDATA[*/glt(3,null,“pdf_txt_1_<xsl:value-of select=“$page“/>“)/*]]>*/</xsl:variable>
 <span><xsl:attribute name=“id“>pdf_txt_1_<xsl:value-of select=“$page“/></xsl:attribute><script language=“javascript“ type=“text/javascript“><xsl:value-of select=“$script_command“ disable-output-escaping=“yes“/></script></span>
</a>
<br/>
</xsl:template>
<xsl:template name=“show_creator“>
<xsl:param name=“creationDate“/>
<xsl:param name=“outputVersion“/>
<xsl:param name=“inputPath“/>
<xsl:param name=“indesignDocname“/>
<xsl:param name=“sourceINXfileName“/>
<xsl:comment>
<xsl:if test=“/indd_document/@demo_mode = 1“>****** DEMO MODE!! This document contains scrambled text content!</xsl:if>
Creation Date: <xsl:value-of select=“$creationDate“ />
Output Version: <xsl:value-of select=“$outputVersion“ />
Input Path: <xsl:value-of select=“$inputPath“ />
Indesign Document Name: <xsl:value-of select=“$indesignDocname“ />
Source INX File Name: <xsl:value-of select=“$sourceINXfileName“ />
</xsl:comment>
</xsl:template>
</xsl:stylesheet>
Ausschnitte der Browserdarstellung
In einem XML-fähigen Browser [57] (beispielsweise Mozilla Firefox) werden die XML-Daten mit dem hinterlegten Stylesheet und weiteren Komponenten verarbeitet und folgendermaßen ausgegeben
:
[61]
webparser:
http://typo3.org/extensions/
repository/search/
webparser/0.1.0/
[58]
Sablotron:
XSLT-Prozessor, der aktuell
von PHP unterstützt wird
[59,60]
uid, content:
Jede Seite in TYPO3 wird in der Datenbank (Tabelle pages) gespeichert und jede dieser Seiten hat eine eindeutige Nummer (Unique Number), Seiteninhalte sind als entsprechender content hinterlegt
[Code: 6.17]
XML-Transformationsmöglichkeit in PHP
[Code: 6.16]
HTML-Aufruf einer XML-Datei
6.3.8
Manuelle Einbindung ins Web
Direkt im BatchXSLT-Programm kann ein FTP-Account als Ausgabe-Ordner einer Verarbeitungsroutine definiert werden, in den das Konversat nach Fertigstellung mit allen Bestandteilen und Verlinkungen hochgeladen wird. Die in einem XML-fähigen Browser durch die hinzugefügte XSL-Datei sofort interpretierbare und darstellbare XML-Datei kann dann von anderen Seiten verlinkt werden:
<a href=“pfadangabe/beispiel.xml“>
Link zum XML-Dokument</a>
Damit die Ausgabe auch in nicht xml-fähigen Browsern funktioniert, sollten die XML-Daten idealerweise schon serverseitig in HTML transformiert werden. PHP bietet seit der Version 4 dank des integrierten XSLT-Prozessors Sablotron [58] die Funktion zur Transformation von XML-Dokumenten. Die PHP-Datei enthält dann beispielsweise folgenden Aufruf:
<?php
// XSLT Prozessor erzeugen
$xslt_processor = xslt_create();
// Transformierung durchführen,
Übergabe der XML- und XSL-Datei
$html_seite= xslt_process
($xslt_processor, ‚beispiel.xml‘, ‚beispiel.xsl‘);
// Ergebnis der Transformation ausgeben
echo $html_seite;
// Vom XSLT Prozessor belegten Speicher freigeben
xslt_free($xslt_processor);
?>
6.3.9
Automatische Einbindung in ein CMS (TYPO3)
Nachdem alle Bestandteile über den Datenupload im Modul Dateiliste des TYPO3 Backends oder per FTP auf den Server geladen worden sind, kann in TYPO3
eine neue Inhaltsseite mit einer neuen uid [59] in der Tabelle pages der internen SQL-Datenbank angelgt werden, dessen Inhalte dann beim Aufruf der Seite aus der entsprechenden content-Tabellenspalte [60], die den Verweis auf die XML- beziehungsweise PHP-Datei enthält, geladen werden.
Mithilfe der Extension webparser [61] ist es in TYPO3 möglich, spezielle Teilbereiche der XML/HTML-Datei zu addressieren, um so gezielt nur einzelne Seiten des Konversats ansteuern zu können. Nach der Installation steht in der Listenansicht des TYPO3-Backends der neue Datentyp Webparser-Sheet zur Verfügung. Mit den Webparser-Sheets werden Daten eingelesen, umgeformt und in der TYPO3-Datenbank gespeichert.
Um die geparsten Daten nun in eine TYPO3-Seite einzubinden, wird an der entsprechenden Stelle ein webparser-Plugin platziert. Hier lässt sich nun eines der zuvor angelegten Sheets auswählen und die Ausgabe der Daten über ein HTML-Templatefeld konfigurieren.
In dieses Feld kann beliebiger Seitencode und Variablen stellvertretend für die Daten eingegeben werden. Die Contentelemente werden hierbei durch die Variablennamen repräsentiert, die dann bei der Seitenerzeugung ersetzt werden.
[Abb.: 6.22]
Medienübergreifender (X)HTML-Export
aus Adobe InDesign
6.4 (X)HTML-Export
aus Layoutapplikationen
Viele Layoutprogramme, die sich über ihre Kernkompetenz im Druckbereich definieren, bemühen sich Daten auch medienübergreifend bereitzustellen oder per XML zu exportieren, um diese für eine weitere Bearbeitung und Zweitverwertung verfügbar zu machen.
Die Qualität der Exportergebnisse hängt natürlich zum einen von den Verarbeitungsroutinen der Layoutapplikationen ab – viel entscheidender für ein gutes Exportergebnis ist aber die Qualität der Quelldaten und deren semantische Strukturierung, welche idealerweise schon während des Entstehungsprozesses vorgenommen werden sollte. Je mehr Vorbereitung und Strukturierung im Dokument steckt, desto schneller ist das gewünschte Export-Ergebnis realisiert.
6.4.1
Konvertierungsvorgang
Beim Export eines Quark-Web-Dokumentes in das HTML-Format gibt es wenig einzustellen und zu berücksichtigen.
QuarkXPress wandelt die Seiten des Web-Layouts souverän in einzelne HTML-Dateien um, berechnet die Bilder neu und speichert sie in einem webfähigen Format wie beispielsweise GIF, JPG oder PNG.
Der entscheidende HTML-Export von QuarkXPress-Print-Dokumenten erzeugt aber wenig zufriedenstellende Daten, da sämtliche Text und Schriftinformationen in Pixeldaten konvertiert werden.
Adobe InDesign verfügt auch über eine Schnittstelle, die Print-Dokumente als HTML-Datensatz exportiert; nur mit dem Unterschied, dass dieser Export mehr Einstellungsmöglichkeiten bietet und auch viel besseres Ausgangsmaterial liefert. Im folgenden Abschnitt wird daher nur die Export-Möglichkeit von Adobe InDesign behandelt.
Um allgemein mehr Kontrolle über die Bildverbeitung beim Export zu bekommen, sollte man die Bilder in externen Bildbearbeitungsprogrammen öffnen und entsprechend optimiert exportieren. Stilangaben wie zu verwendete Schriften, Schriftstile, Schriftgrößen, Farben und Absatzausrichtungen sollten in einer eigenen CSS-Datei gespeichert werden.
Bei den Schriften ist die Kontrolle durch eine CSS-Datei nur eingeschränkt möglich, denn wenn auf dem Rechner des Anwenders die vorgegebenen Zeichensätze nicht vorhanden sind, verwendet der Browser automatisch eine Ersatzschrift.
6.4.2
Einstellungsmöglichkeiten beim Export
Vor dem eigentlichen Export kann es als vorbereitende Maßnahme sinnvoll sein, die Verarbeitungsreihenfolge beim Export durch Gruppieren zusammengehöriger Objekte im Dokument zu beeinflussen und zu strukturieren. In InDesign gruppierte Objekte sind auch in der späteren Ausgabe in (X)HTML in einem gemeinsamen Container gruppiert.
Folgende Auflistungen geben einen Überblick über die vom Anwender zu beeinflussenden Faktoren beim Exportvorgang eines Print-Dokumentes:
Allgemeine Optionen
– Exportieren: Wenn ein Textrahmen ausgewählt ist, wird der gesamte Textabschnitt exportiert. Wenn die Option „Dokument“ ausgewählt ist, werden alle Seitenobjekte von allen Druckbögen exportiert, ausgenommen Musterseitenobjekte, die nicht übergangen wurden, und Seitenobjekte auf ausgeblendeten Ebenen. XML-Tags sowie generierte Indizes und Inhaltsverzeichnisse werden ebenfalls ignoriert.
– Aufzählungszeichen: Mit „Nicht sortierten Listen zuordnen“ werden Absätze mit Aufzählungszeichen in Listenelemente konvertiert, die in HTML mit dem Tag <ul> formiert sind. Mit „In Text umwandeln“ werden Aufzählungszeichen unter Verwendung des Tags <p> als Textbestandteil formatiert und ausgegeben.
Zu sortierter Liste zuordnen
Konvertiert nummerierte Listen in Listenelemente, die in HTML mit dem Tag <ol> formatiert sind.
– Zu statisch sortierter Liste zuordnen: Konvertiert nummerierte Listen in Listenelemente, weist jedoch basierend auf der aktuellen Nummer des Absatzes in InDesign ein Attribut <value> zu.
– In Text umwandeln: Konvertiert
nummerierte Listen, die mit der aktuellen Absatznummer als Text beginnen.
Bildoptionen
– Original: Exportiert die Originalbilder in einen Web-Ordner, die dann noch extern bearbeitet und optimiert werden müssen.
– Optimiert: Ermöglicht das Ändern von Einstellungen, um die Art und Weise des Bildexports festzulegen.
– Formatiert: Behält InDesign-Formatierungen wie Drehungen oder Skalierungen bei Web-Bildern so weit wie möglich bei.
Bildumwandlung
– GIF-Optionen (Palette): Steuert wie Farben beim Optimieren von GIF-Dateien in InDesign gehandhabt werden. Das GIF-Format hat eine reduzierte Farbpalette mit maximal 256 Farben.
[Abb.: 6.24] (links)
Exportoptionen: Bilder
[Abb.: 6.23]
Exportoptionen: Allgemein
[Abb.: 6.25] (rechts)
Exportoptionen: Erweitert
– JPEG-Optionen (Bildqualität): Bestimmt, wie bei JPEG-Bildern zwischen Komprimierung und Bildqualität abgewogen wird.
– JPEG-Optionen (Formatmethode): Bestimmt, wie schnell JPEG-Grafiken angezeigt werden, wenn die Datei, die das Bild enthält, im Web-Browser geöffnet wird. Mit „Progressiv“ werden JPEG-Bilder beim Laden in einem Web-Browser allmählich und mit zunehmender Detailschärfe angezeigt. Mit „Grundlinie“ wird jede JPEG-Datei erst nach dem vollständigen Laden angezeigt; vorher ist ein Platzhalter zu sehen.
Mit Serverpfad verknüpfen
Mit dieser Option werden Bilder nicht in einen Unterordner exportiert, sondern man hat die Möglichkeit, eine lokale URL einzugeben, die vor die Bilddatei gesetzt wird. Im HTML-Code zeigt das Link-Attribut den festgelegten Pfad und die Erweiterung an. Diese Option ist besonders effektiv, wenn man Bilder selbst in webkompatible Formate konvertiert.
Erweiterte Optionen
– CSS-Optionen: Wenn man (X)HTML exportiert, kann man eine Liste von CSS-Stilen erstellen, die im Head-Abschnitt der HTML-Datei mit leeren Deklarationen (Attributen) aufgeführt wird. Man hat die Möglichkeit den CSS-Abschnitt auszulassen oder alternativ kann man ein externes vorhandenes CSS-Stylesheets über die eine URL angeben.
– JavaScript-Optionen: Möglichkeit ein zusätzliches JavaScript auszuführen, das bei Laden der Seite ausgeführt wird.
HTML-Dokument,
leere CSS-Deklaration,
DIV-Tag mit zugewiesenen
CSS-Klassen und Textinhalt
HTML-Dokument,
leeres CSS-Element,
leeres DIV-Tag
6.4.3
Auswertung der Export-Daten
Für einen direkten Vergleich der Export-Daten werden die gleichen Beispiele der BatchXSLT Konvertierung aus Kapitel 6.3 verwendet.
Der Unterschied hierbei ist aber, dass die Daten aus dem Print-Dokument direkt und ohne XML-Zwischenstufe in reines HTML, ohne Stylesheets und ohne visuelle Darstellung der relativen Objektpositionen der Inhalte zueinander ausgelesen und konvertiert werden.
Beispiel 1:
Leeres InDesign-Dokument
(inklusive CSS-Deklarationen)
<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN“ „http://www.w3.org/TR
xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=“http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=“content-type“ content=“text/html;charset=utf-8“ />
<title>Leeres_DINA4_Dokument</title>
<style type=“text/css“ media=“screen“><!--
--></style>
</head>
<body>
<div id=“leeres-dina4-dokument“></div>
</body>
</html>
Beispiel 2:
InDesign-Snippet Text
(inklusive CSS-Deklarationen)
<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN“ „http://www.w3.org/TR
xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=“http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=“content-type“ content=“text/html;charset=utf-8“ />
<title>Snippet_Text</title>
<style type=“text/css“ media=“screen“>
<!--div.story {}--></style>
</head>
<body>
<div id=“snippet-text“>
<div class=“story“>
<p>hello world</p>
</div>
</div>
</body>
</html>
HTML-Dokument,
leere CSS-Deklaration,
DIV-Tag mit zugewiesenen
CSS-Klassen ,
Bildverknüpfung
[Abb.: 6.27] (links)
Browserausgabe Beispiel 2
[Abb.: 6.26]
Browserausgabe Beispiel 1
[Abb.: 6.28] (rechts)
Browserausgabe Beispiel 3
Beispiel 3
InDesign-Snippet Bild
(inklusive leerer CSS-Definitionen)
<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN“ „http://www.w3.org/TR
xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=“http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=“content-type“ content=“text/html;charset=utf-8“ />
<title>Snippet_Bild</title>
<style type=“text/css“ media=“screen“><!--
div.image {}
--></style>
</head>
<body>
<div id=“snippet-bild“>
<div class=“image“>
<img src=“Snippet_Bild-web-images/Snippet-Bild_fmt.jpeg“ alt=“Snippet-Bild.jpg“ />
</div>
</div>
</body>
</html>
Ausschnitte der Browserdarstellung
Im Browser werden die durch den (X)HTML-Export erzeugten Beispiel-Dokumente ausgegeben.
Da die gewählten Ansichten den Beispielen der XML-Konvertierung aus Kapitel 6.3.7 entsprechen, bietet sich ein visueller Vergleich der Browserergebnisse an.
[siehe Abb.: 6.19-6.21]
[62]
CSS-Framework:
Zusammengestellte CSS-
Vorlagen, die auf den
gängigsten Browsern das
gleiche Erscheinungsbild liefern
[Code: 6.22]
Eigenschaften eines
div-Containers
[Code: 6.21]
Inhalt einer CSS-Datei mit drei angelegten und zwei näher
defnierten Formatklassen
[Abb.: 6.29]
W3C-CSS-Boxmodell:
Gesamtdimension = Inhalt + Polsterung + Rahmen + Rand
6.4.4
Weiterverarbeitung der Daten mittels Cascading Stylesheets
Die HTML-Konversate aus dem (X)HTML-Export benötigen zur optischen Aufbesserung noch eine Nachbearbeitung.Im Gegensatz zu den Daten aus dem BatchXSLT-Export werden hier keine CSS-Informationen generiert; lediglich die leere Formathülle wird angelegt.
Auch die optische Gestaltung einer Darstellungsseite ist überarbeitungswürdig, da die Exportfunktion die einzelnen Objekte nur seriell von links nach rechts und von oben nach unten ausliest und im HTML-Dokument auflistet; währenddessen beim BatchXSLT-Export der Gestaltungsrahmen des Printdokumentes im Hintergrund zu sehen bleibt.
Für die lokale Formatierung einzelner Objekte und Textbereiche sorgen CSS-Formatdeklarationen, die im Dokument oder als externe CSS-Datei eingebunden werden können, für Abhilfe.
.P_____NoStyle____ { text-align:left; font-family:“Times New Roman“; font-size:12pt; color:#000000; font-weight:normal; font-style:italic; text-transform:none; margin-top:0px; margin-bottom:0px; }
.P_NormalParagraphStyle { margin-top:0px; margin-bottom:0px; }
.C_____NoStyle____ { }
Auch die globale Positionierung der Elemente zueinander und die Gesamtanmutung der Webseite bedürfen einer Überarbeitung mittels CSS-Container.
<div id=“Layer1“style=“position:
absolute; width:200px; height:100px; z-index:1; background-color: #0099CC; border: 1px solid #000000; left: 50px; top: 50px“></div>
Ein CSS-Container ist nichts weiter als eine frei verschiebbare codierte Beschreibung eines Rahmens. Ein Container kann jedes andere aus HTML bekannte Element enthalten, man kann sie frei auf der Arbeitsfläche platzieren und man ist nicht mehr an die engen Beschränkungen von Tabellen und Blind-GIFs bei dem Seitenaufbau gebunden. Die Stapelreihenfolge, also die Ebenen-Schichtung der einzelnen Container wird mit dem z-index definiert.
Aller Vorzüge zum Trotz, der konsequente Einsatz von CSS-Containern schließt Besucher mit alten Browsern aus.
Typografische Qualitätsmerkmale und Gestaltungsmittel aus dem Printbereich wie das Grundlinienraster und der Mehrspaltensatz finden im Internet aufgrund technischer Beschränkungen kaum Verwendung. Hier können aber CSS-Frameworks [62] aushelfen, die dafür sorgen, dass
die Optik möglichst optimal dem „Look and Feel“ des Printlayouts entspricht.
[64]
Floats bestimmen wie Blockelemente reagieren sollen:
So dürfen neben einem
Blockelement weitere
Elemente stehen, die
ansonsten unterhalb platziert werden würden.
[65]
blueprintcss:
CSS Framework,
http://code.google.com
/p/blueprintcss/
[63]
YAML (Yet Another
Multicolumn Layout):
CSS-Framework,
http://www.yaml.de
6.4.5
CSS-Frameworks
Oftmals ist es zu umständlich, für jedes neues Projekt oder jede Webseite jeweils ein eigenes Stylesheet zu entwerfen und mit allen Feinheiten zu konzipieren und somit die immer wiederkehrende Grundkonfiguration neu aufzubauen. So etwas gibt es auch schon in einer vorgefertigten Form.
Sehr bekannt ist YAML [63] „Yet Another Multicolumn Layout” von Dirk Jesse. YAML ist ein (X)HTML/CSS Framework zur Erstellung flexibler Layouts auf Grundlage von float-Umgebungen [64]. Dabei stehen ein Höchstmaß an Layout-Flexibilität und Zugänglichkeit für die Nutzer im Vordergrund.
Noch in der Entwicklungsphase befindet sich das Framework blueprintcss [65]. Basierend auf einem Gestaltungsraster können hier einzelne div-Container platziert werden. Es gibt mittlerweile auch einen Raster-Generator für blueprintcss, der einem dabei hilft, sein individuelles Grundkonzept zu erstellen.
6.4.6
YAML – Yet Another Multicolumn Layout
Das YAML-Framework ist ein Open-Source-Projekt und wird seit der Veröffentlichung im Oktober 2005 kontinuierlich weiterentwickelt. YAML wurde als Basis für die Entwicklung flexibler Layouts entworfen und besteht im Grunde genommen aus einer vordefinierten (X)HTML-Struktur sowie aus einer Reihe von CSS-Dateien mit unterschiedlichen Funktionen.
YAML stellt ein flexibles, mehrspaltiges Basislayout mit allen wichtigen Standardelementen sowie funktionale Stylesheets für browserübergreifend korrekte Bildschirmdarstellung und verschiedene Ausgabemedien bereit. Der Nutzer optimiert das Layout durch Löschen nicht benötigter Elemente aus dem Quelltext.
Generell lassen sich zwei grundsätzliche Arbeitsweisen bei der Erstellung eines Layouts unterscheiden:
– Das Bottom-Up-Prinzip: Ein Basislayout ist in diesem Fall nicht vorhanden. Die benötigten Container werden erstellt und per CSS positioniert und gestaltet.
– Das Top-Down-Prinzip: In diesem Fall steht ein modular aufgebautes Basislayout zur Verfügung, welches alle häufig benötigten Layoutelemente enthält. Der Webdesigner modifiziert dieses Basislayout nach seinen Vorstellungen und optimiert anschließend den (X)HTML- und CSS-Code, indem er nicht benötigte Elemente aus dem Layout entfernt.
Jedes YAML-basierte Layout benötigt die drei CSS-Grundbausteine base.css, iehacks.css und print_base.css. Die ersten beiden Dateien sind verantwortlich für die browserübergreifend korrekte Bildschirmdarstellung, die dritte Datei für eine optimale Ausgabe des Layouts auf Printmedien. In Verbindung mit vordefiniertem (X)HTML-Markup und der Datei base.css entsteht ein robustes dreispaltiges Basislayout mit Kopf- und Fußbereich.
Rohbau des Basislayouts
mit Standardvorgaben für die Raumaufteilung der Spalten und Navigationsbereiche
Zurücksetzen der browserseitigen Standardformatierungen auf
vorgegebene Werte
@media-Regel: Möglichkeit veraltete Browser aufgrund ihrer fehlenden Unter-
stützung von CSS von dieser
Deklaration auszuschließen
YAML Grundbaustein:
base.css
/* ### „Yet Another Multicolum Layout“ (c) by Dirk Jesse (http://www.yaml.de)
** YAML Version: 2.5.2
** Dateiversion: 01.11.06
** Datei : base.css
** Funktion : Basis-Stylesheet
**
** Don‘t make any changes in this file!
** Any changes should be placed in basemod-files in css/modifications directory.*/
@media all
{
/* ### Vorbereitende Maßnahmen | Reset ####################################*/
/* Hiermit werden die Randabstände und border aller HTML-Elemente auf Null gesetzt. Damit wird das
** Aussehen der Webseite in unterschiedlichen Browsern vereinheitlicht.*/
{ margin:0; padding: 0; }
/* Das zurücksetzen der Innen- und Außenabstände verursacht zu kleine Selectboxen. Dies wird korrigiert */
option {padding-left: 0.4em}
/* Die nachfolgenden Angaben entstammen dem Artikel ‚Useful Code Snippets‘ von Mike Foskett [http://www.websemantics.co.uk/tutorials/useful_css_snippets/] */
/* Vertikalen Scrollbalken im Netscape & Firefox erzwingen. Dies verhindert, dass zentrierte Layouts um 10 Pixel springen wenn der Seiteninhalt kleiner wird als die Höhe des Browserfensters. */
html { height: 100% }
body {
min-height: 101%;
/* Beseitigung des Rundungsfehlers bei Schriftgrößen im Opera sowie Standardformatierungen */
font-size: 100.01%;
/* FIX: Verhindert, dass positionierte Elemente nicht verschoben werden when die Größe des Browser Fensters geändert wird. */
position: relative;
/* Vorgabe der Standardfarben und Textausrichtung*/
color: #000;
background: #fff;
text-align: left;
}
/* Standardrahmen zurücksetzen */
fieldset, img { border:0; }
/* Anpassung für Safari Browser. font-size:100% ist für den Safari in Formularen zu groß */
select, input, textarea { font-size: 99% }
/* ### DIV-Container des Basislayouts #####################################*/
#header { position:relative }
#topnav {
position:absolute;
top: 10px;
right: 10px;
color: #fff;
background: transparent;
text-align: right; /* Erforderlich, damit im Opera 6 wirklich rechts plaziert ! */
}
#nav { clear:both; width: auto; }
#main { clear:both; width: auto; }
#col1 {
float: left;
Rohbau des Basislayouts
mit Standardvorgaben für die Raumaufteilung der Spalten und Navigationsbereiche
Standardvorgaben
für Listen und Zitate
Float-Clearing:
Partielles Aufheben der Umflusseigenschaften,
um ein float-Objekt in
einen statischen Container
einzuschließen
width: 200px; /* Standard-Wert, falls keine anderen Vorgaben gemacht
werden */
}
#col2 {
float:right;
width: 200px; /* Standard-Wert, falls keine anderen Vorgaben gemacht werden */
}
#col3
{
width:auto;
margin-left: 200px; /* Standard-Wert, falls keine anderen Vorgaben gemacht werden */
margin-right: 200px; /* Standard-Wert, falls keine anderen Vorgaben gemacht werden */
}
#footer { clear:both; } /* Backup für IE-Clearing */
/* Der z-Index verhindert, dass im Falle des noch bestehenden IE-Bugs die Texte vor dem Spaltenhintergrund erscheinen. */
#col1 {z-index: 3;}
#col2 {z-index: 5;}
#col3 {z-index: 1;}
#col1_content {z-index: 4;}
#col2_content {z-index: 6;}
#col3_content {z-index: 2;}
#col1_content, #col2_content, #col3_content { position:relative; }
/* ### Markupfreie CSS-Floatclearing-Lösungen #############################*/
/* Clearfix-Methode zum Clearen der Float-Umgebungen */
.clearfix:after {
content: „.“;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Diese Angabe benötigt der Safari-Browser zwingend !! */
.clearfix { display: block; }
/* Overflow-Methode zum Clearen der Float-Umgebungen */
.floatbox { overflow:hidden; }
/* IE-Clearing: Benötigt nur der Internet Explorer und über iehacks.css zugeschaltet */
#ie_clearing { display: none }
/* ### IE-Clearing bis YAML V2.4 ###########################################**
** Die CSS-Definition des IE-Clearings, welches bis YAML 2.4 verwendet wurde, ist aus Gründen der Abwärtskompatibilität des Basis-Stylesheets weiterhin enthalten.*/
/* Clearen der 3 Inhaltsspalten mittels dieses speziellen hr-Tags */
hr.clear_columns {
clear: both;
float: left;
content: „.“;
display: block;
height: 0;
line-height: 0px;
visibility: hidden;
border: 0;
padding: 0;
margin: -1.1em 0 0 0; /* erforderlich damit kein Leerraum zwischen Spalten und Footer entsteht */
}
/* ###Standard-Formatierungen für Listen & Zitate #########################*/
ul, ol, dl { margin: 0 0 1em 1em }
li { margin-left: 1.5em; line-height: 1.5em; }
dt { font-weight: bold; }
dd { margin: 0 0 1em 2em; }
blockquote, cite { margin: 0 0 1em 1.5em; font-size: 0.93em; width: auto;}
Nicht sichtbare Sprung-
marken der Webseite
Vorlage zur Gliederung von Inhalten innerhalb beliebiger Container des Layouts
/* ### Subtemplates ######################################################*/
.subcolumns {
width: 100%;
padding: 0 1px 0 1px;
margin: 0 -1px 0 -1px;
overflow:hidden;
}
.c50l, .c25l, .c33l, .c38l, .c66l, .c75l, .c62l {float: left; overflow: hidden;}
.c50r, .c25r, .c33r, .c38r, .c66r, .c75r, .c62r {float: right; overflow: hidden;}
.c25l, .c25r { width: 24.999%; }
.c33l, .c33r { width: 33.333%; }
.c50l, .c50r { width: 49.999%; }
.c66l, .c66r { width: 66.666%; }
.c75l, .c75r { width: 74.999%; }
.c38l, .c38r { width: 38.196%; } /* Goldener Schnitt */
.c62l, .c62r { width: 61.803%; } /* Goldener Schnitt */
.subc { padding: 0 0.5em 0 0.5em; overflow: hidden; }
.subcl { padding: 0 1em 0 0; overflow: hidden; }
.subcr { padding: 0 0 0 1em; overflow: hidden; }
}
/* ### Skiplink-Navigation ###############################################*/
@media screen, print
{
.skip {
position: absolute;
left: -1000em;
width: 20em;
}
}
In der Datei iehacks.css werden alle layout- und strukturunabhängigen CSS-Anpassungen für den Internet Explorer (Versionen 5.x - 7.0) zusammengefasst. Sie ist damit ein weiterer Grundbaustein und ihre Einbindung in jedem YAML-basierten Layout zwingend erforderlich.
Vorteile des YAML Layouts
– Browserkompatibilität: Die Grundbausteine von YAML garantieren eine browserübergreifend korrekte Darstellung des Layouts. Alle für die fehlerfreie Darstellung des Layouts erforderlichen Browser-Anpassungen sind in den Grundbausteinen bereits integriert. Der erforderliche Zeitaufwand für umfangreiche Kompatibilitätstests zu verschiedensten Browsern kann auf ein Minimum reduziert werden.
– Baukasten-Prinzip: Das Baukasten-Prinzip ermöglicht eine besonders effiziente Nutzung des vorhandenen Codes bei der Layouterstellung. Mit den Grundbausteinen wird ein Basislayout mit voller Funktionalität bereitgestellt. Durch zusätzliche Bausteine kann diese Basis ergänzt oder modifiziert werden. Diese CSS-Bausteine sind universell einsetzbar. Einmal geschrieben und gestestet, können sie bei Bedarf eingebunden werden und stehen für zukünftige Projekte zum Einsatz bereit.
– Flexibilität in der Layoutgestaltung: Die Gestaltungsmöglichkeiten des Frameworks gehen weit über ein einfaches 3-Spalten-Layout hinaus. Die flexible Basis ermöglicht eine beliebige Anordnung der Inhaltsspalten
am Bildschirm. Der dynamische Charakter der verwendeten float-Umgebungen ermöglicht die Modifikation hin zu 1- oder 2-Spalten-Layouts. Spalten- und Layoutbreiten können in beliebigen Maßeinheiten definiert werden. Die Mischung unterschiedlicher Einheiten bei den Spaltenbreiten ist dabei problemlos möglich.
– Robuster Code: Der Aufbau der (X)HTML- und CSS-Struktur der Grundbausteine garantiert eine fast vollständige Unabhängigkeit vom Aufbau der später eingefügten Inhalte. Die Kapselung der Hauptelemente der Webseite in separaten DIV-Containern sichert die korrekte Positionierung der Elemente am Bildschirm, unabhängig von der Art der späteren Nutzung der Container.
Floats:
Grundlegende Eigenschaften
Jedes Element kann aus dem Fluss der HTML-Elemente herausgenommen werden: Absätze, <div>, Listen, Tabellen, Grafiken und selbst Inline-Elemente wie <span> oder <strong>. Jedes Element wird dadurch automatisch zu einem Block-Element. Das bedeutet, dass man ihm sowohl eine Breite als auch eine Höhe zuweisen kann.
Im Gegensatz zu absolut positionierten Elementen, werden Floats direkt nach dem letzten vorausgehenden Block-Element angeordnet. Wenn sich ein Float innerhalb einer Zeilenbox befindet, wird die Oberkante des Floats auf eine Höhe mit der Oberkante der Zeilenbox gesetzt. Abgesehen von diesen beiden Eigenschaften, haben Floats große Ähnlichkeit mit absolut positionierten Elementen, denn beide werden von normalen Blockboxen völlig ignoriert.
Diese statisch angeordneten Blockboxen werden in ihrem Fluss eine nach der anderen so angeordnet, als ob die Floats gar nicht vorhanden wären.
YAML-Builder
Mit dem YAML-Builder ist ein Werkzeug verfügbar, welches die visuelle Erstellung von YAML-basierten Layout direkt im Browser ermöglicht. Beim YAML-Builder schwebt eine frei verschiebbare Toolbox über dem Layout.
Der aktuelle Funktionsumfang umfasst:
– Wahl des Doctypes
– Ab-/Abschalten und
Postionierung der Basiselemente
des YAML-Layouts
– Wahl der Spaltenanzahl sowie
deren Anordnung am Bildschirm
– Festlegung von Layout- und
Spaltenbreiten
– Innerhalb der Basiselemente können Subtemplates, sowie Dummy-
Inhaltselemente per Drag & Drop
eingefügt und ineinander
verschachtelt werden
– Ansicht und Ausgabe des generierten Codes (X)HTML und CSS
– Einfügen und Verschachteln
von zusätzlichen Elementen per
Drag & Drop
– Previewfunktion zu Ansicht des erstellten Layouts
[Abb.: 6.30]
Logo: T3N-Magazin
[66]
Templa-Voilà:
Visuelle Template Engine
für die Erzeugung von
Templates in TYPO3
[67]
Zitat:
www.t3n-magazin.de,
Ausgabe 03/2006
[Abb.: 6.31]
YAML-Grundgerüst für TYPO3
YAML für TYPO3
Unterstützt wird das YAML-Projekt von Dieter Bunkerd, einem der Köpfe hinter der Webseite t3net.de.
Dieter Bunkerd ist TYPO3-Spezialist und hat ein YAML-basiertes Template für dieses weitverbreitete, aber für Einsteiger nicht ganz einfach zu verstehende Content Management System erstellt.
YAML für TYPO3 gibt es in verschiedenen Versionen:
– Als t3d-Datei oder Komplettpaket für den Template Autoparser (zum Importieren in das TYPO3-BackEnd)
– Als TYPO3 Extension oder Komplettpaket für TemplaVoilà [66]
– Als TYPO3 Webhosting-Paket mit einem der Templates vorinstalliert
„Da es für TYPO3 kaum frei verfügbare Templates gibt, hat t3net.de das Framework in TYPO3 integriert und zudem die wichtigsten Extensions, beispielsweise zur Benutzeranmeldung und Anzeige von News, implementiert.
Innerhalb kürzester Zeit soll so ein professionell erscheinender TYPO3-Auftritt zu realisieren sein.
Zu den Extensions wurden auch entsprechende Tutorials verfasst, die nun auf den YAML-Webseiten von t3net.de zu finden sind. YAML für TYPO3 ist auf der Webseite von Dirk Jesse verfügbar und bei nicht kommerziellem Einsatz kostenlos.“ [67]
6.4.7
blueprintcss
blueprintcss erscheint auf den ersten Eindruck sehr viel einfacher strukturiert als YAML und besteht aus lediglich fünf Dateien. Das blueprintcss-Framework bietet aber dennoch gute Möglichkeiten Inhalte auf Spaltenbasis und einem Grundlinienraster zu layouten.
Die Layouterstellung, die Modifikationen an fertigen Internetseiten und sonstige Wartungsarbeiten werden vereinfacht, da immer wiederkehrende Aufgaben automatisiert und in einer zentralen Schnittstelle verwaltet werden.
Das vom norwegischen Studenten Olav Bjorkoy entwickelte blueprintcss setzt sich von Template-Systemen wie YAML dadurch ab, dass es die freie Platzierung des Inhalts in einem Designraster ermöglicht. Gleichzeitig bringt es zahlreiche Textformatierungen für ein typografisch ansprechendes Aussehen sowie ein Druck-Stylesheet mit.
Hauptfunktionen von blueprintcss:
– Globales Zurücksetzen aller browserseitigen Standardformatierungen, beispielsweise das Zurücksetzen der margin- und padding-Werte für alle Elemente auf den Wert 0
– Festlegen sinnvoller typografischer Vorgaben, Absatzvorlagen, Listenelementen, Grundlinienraster sowie ein Set von Filtern, welches unschöne typografische Effekte verhindert
– Ausrichtung der Zeilen an eine definierte Grundlinie, indem die Abstände bei allen Textauszeichnungen auf ein ganzzahliges Vielfaches des Basiszeilenabstandes, der durch die Einstellung line-height festgelegt ist, ausgerichtet werden
– Möglichkeit komplett eigene Gestaltungsraster mit individuellen Spaltenanzahlen und -breiten anzulegen
– Implementierung eines sinnvollen Stylesheets für die Druckausgabe
Bestandteile des Frameworks
reset.css – bewirkt das globale
Zurücksetzen der Browsereinstellung
type.css – legt die Typografie
und das Grundlinien- raster fest
grid.css – legt das Gestaltungs raster der Seite fest
widgets.css – implementiert Zusatz funktionen wie Drop- Down-Menüs
base.css – wird im HTML aufge rufen und lädt alle üb- rigen Stylesheets
Der blueprint-Generator
Dieses Tool erweitert die Flexibilität von blueprintcss, indem es individuelle Versionen – mit frei konfigurierbaren Spaltenanzahlen und -abständen – der Datei
grid.css erzeugt. Online zu benutzen oder als ZIP-Datei herunter zu laden ist das Tool unter der Adresse: http://www.kematzy.com/blueprint-generator/
Abweichende Rand-Eigenschaften der letzten Spalte
Globale Umfluss-
Definitionen des
Mehrspaltengerüstes
Definition der einzelnen
Spalten und Spaltenbreiten
Umschließender Container,
beinhaltet alle Spalten
Zur Vollständigkeit die zentrale Datei grid.css:
/* --------------------------------------------------------------
grid.css
* Sets up an easy-to-use grid of 24 columns.
Based on work by:
* Nathan Borror [playgroundblues.com]
* Jeff Croft [jeffcroft.com]
* Christian Metts [mintchaos.com]
* Khoi Vinh [subtraction.com]
By default, the grid is 950px wide, with 24 columns
spanning 30px, and a 10px margin between columns.
If you need fewer or more columns, use this
formula to find the new total width:
Total width = (columns * 40) - 10
Read more about using a grid here:
* subtraction.com/archives/2007/0318_oh_yeeaahh.php
-------------------------------------------------------------- */
/* A container should group all your columns. */
.container {
width: 950px;
margin: 0 auto;
}
/* Columns
-------------------------------------------------------------- */
/* Use this class together with the .span-x classes
to create any composition of columns in a layout. */
.column {
float: left;
margin-right: 10px;
}
/* The last column in a row needs this class. */
.last { margin-right: 0; }
/* Use these classes to set the width of a column. */
.span-1 { width: 30px; }
.span-2 { width: 70px; }
.span-3 { width: 110px; }
.span-4 { width: 150px; }
.span-5 { width: 190px; }
.span-6 { width: 230px; }
.span-7 { width: 270px; }
.span-8 { width: 310px; }
.span-9 { width: 350px; }
.span-10 { width: 390px; }
.span-11 { width: 430px; }
.span-12 { width: 470px; }
.span-13 { width: 510px; }
.span-14 { width: 550px; }
.span-15 { width: 590px; }
.span-16 { width: 630px; }
.span-17 { width: 670px; }
.span-18 { width: 710px; }
.span-19 { width: 750px; }
.span-20 { width: 790px; }
.span-21 { width: 830px; }
.span-22 { width: 870px; }
.span-23 { width: 910px; }
.span-24 { width: 950px; margin: 0; }
Zwischenraum für Linien
innerhalb einer Spalte
Randeinstellungen
am rechten Spaltenrand
Umfluss für Objekte
in einer Spalte vor
und nach dem Objekt
Klassen, um einer Spalte
eine oder mehrere Spalten
voran zu stellen
Klassen, um einer Spalte
eine oder mehrere Spalten
nach zu stellen
/* Add these to a column to append empty cols. */
.append-1 { padding-right: 40px; }
.append-2 { padding-right: 80px; }
.append-3 { padding-right: 120px; }
.append-4 { padding-right: 160px; }
.append-5 { padding-right: 200px; }
.append-6 { padding-right: 240px; }
.append-7 { padding-right: 280px; }
.append-8 { padding-right: 320px; }
.append-9 { padding-right: 360px; }
.append-10 { padding-right: 400px; }
.append-11 { padding-right: 440px; }
.append-12 { padding-right: 480px; }
.append-13 { padding-right: 520px; }
.append-14 { padding-right: 560px; }
.append-15 { padding-right: 600px; }
.append-16 { padding-right: 640px; }
.append-17 { padding-right: 680px; }
.append-18 { padding-right: 720px; }
.append-19 { padding-right: 760px; }
.append-20 { padding-right: 800px; }
.append-21 { padding-right: 840px; }
.append-22 { padding-right: 880px; }
.append-23 { padding-right: 920px; }
/* Add these to a column to prepend empty cols. */
.prepend-1 { padding-left: 40px; }
.prepend-2 { padding-left: 80px; }
.prepend-3 { padding-left: 120px; }
.prepend-4 { padding-left: 160px; }
.prepend-5 { padding-left: 200px; }
.prepend-6 { padding-left: 240px; }
.prepend-7 { padding-left: 280px; }
.prepend-8 { padding-left: 320px; }
.prepend-9 { padding-left: 360px; }
.prepend-10 { padding-left: 400px; }
.prepend-11 { padding-left: 440px; }
.prepend-12 { padding-left: 480px; }
.prepend-13 { padding-left: 520px; }
.prepend-14 { padding-left: 560px; }
.prepend-15 { padding-left: 600px; }
.prepend-16 { padding-left: 640px; }
.prepend-17 { padding-left: 680px; }
.prepend-18 { padding-left: 720px; }
.prepend-19 { padding-left: 760px; }
.prepend-20 { padding-left: 800px; }
.prepend-21 { padding-left: 840px; }
.prepend-22 { padding-left: 880px; }
.prepend-23 { padding-left: 920px; }
/* Border on right hand side of a column. */
.border {
padding-right: 4px;
margin-right: 5px;
border-right: 1px solid #eee;}
/* Border with more whitespace, spans one column. */
.colborder {
padding-right: 24px;
margin-right: 25px;
border-right: 1px solid #eee;}
/* Use these classes on an element to push it into the
next column, or to pull it into the previous column. */
.pull-1 { margin-left: -40px; }
.pull-2 { margin-left: -80px; }
.pull-3 { margin-left: -120px; }
.pull-4 { margin-left: -160px; }
.push-0 { margin: 0 0 0 18px; }
.push-1 { margin: 0 -40px 0 18px; }
.push-2 { margin: 0 -80px 0 18px; }
.push-3 { margin: 0 -120px 0 18px; }
.push-4 { margin: 0 -160px 0 18px; }
.push-0, .push-1, .push-2, .push-3, .push-4 { float: right; }
Schriftgröße: Basis, von der
sich weitere typografische
Werte ableiten lassen
Float-Clearing: Partielles Aufheben der Umflusseigenschaften, um ein float-Objekt in einen statischen Container einzuschließen
Objekte mit einem
Innenabstand innerhalb
einer Spalte
/* Misc classes and elements
-------------------------------------------------------------- */
/* Use a .box to create a padded box inside a column. */
.box {
padding: 1.5em;
margin-bottom: 1.5em;
background: #eee;
}
/* Use this to create a horizontal ruler across a column. */
hr {
background: #ddd;
color: #ddd;
clear: both;
float: none;
width: 100%;
height: .1em;
margin: 0 0 1.4em;
border: none;
}
hr.space {
background: #fff;
color: #fff;
}
/* Clearing floats without extra markup
Based on How To Clear Floats Without Structural Markup by PiE
[http://www.positioniseverything.net/easyclearing.html] */
.clear { display: inline-block; }
.clear:after, .container:after {
content: „.“;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: block; }
Und die zentrale Datei
typography.css:
/* --------------------------------------------------------------
typography.css
* Sets up some sensible default typography.
Based on work by:
* Nathan Borror [playgroundblues.com]
* Jeff Croft [jeffcroft.com]
* Christian Metts [mintchaos.com]
* Wilson Miner [wilsonminer.com]
* Richard Rutter [clagnut.com]
Read more about using a baseline here:
* alistapart.com/articles/settingtypeontheweb
-------------------------------------------------------------- */
/* This is where you set your desired font size. The line-heights
and vertical margins are automatically calculated from this.
The percentage is of 16px (0.75 * 16px = 12px). */
body { font-size: 75%; }
/* Default fonts and colors.
If you prefer serif fonts, remove the font-family
on the headings, and apply this one to the body:
font: 1em Georgia, „lucida bright“, „times new roman“, serif; */
Definition weiterer
Strukturklassen
Formatierung von
Tabellen und
Tabellenelementen
Formatierung
von Absatzformaten,
Listenelemten und
weiteren
Auszeichnungselementen
Definition verschiedener
Überschriftenkategorien
Grundlegende Schrift- und
Farbeinstellungen
body {
color: #222; font-family: „Helvetica Neue“, „Lucida Grande“, Helvetica, Arial, Verdana, sans-serif;
}
h1,h2,h3,h4,h5,h6 {
color: #111; font-family: „Helvetica Neue“, Helvetica, Arial, sans-serif;
}
/* Headings
-------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 { font-weight: normal; }
h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }
/* Text elements
-------------------------------------------------------------- */
p { margin: 0 0 1.5em; }
p.last { margin-bottom: 0; }
p img { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.top { margin-top: 0; }
img { margin: 0 0 1.5em; }
ul, ol { margin:0 1.5em 1.5em 1.5em; }
ul { list-style-type: circle; }
ol { list-style-type: decimal; }
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dd { margin-left: 1.5em;}
abbr,
acronym { border-bottom: 1px dotted #666; }
address { margin-top: 1.5em; font-style: italic; }
del { color:#666; }
a:focus,
a:hover { color: #000; }
a { color: #009; text-decoration: underline; }
blockquote { margin: 1.5em; color: #666; font-style: italic; }
strong { font-weight: bold; }
em,dfn { font-style: italic; background: #ffc; }
dfn { font-weight: bold; }
pre,code { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em ‚andale mono‘, ‚monotype.com‘, ‚lucida console‘, monospace; line-height: 1.5; }
tt { display: block; margin: 1.5em 0; line-height: 1.5; }
/* Tables
-------------------------------------------------------------- */
table { margin-bottom: 1.4em; }
th { border-bottom: 2px solid #ccc; font-weight: bold; }
td { border-bottom: 1px solid #ddd; }
th,td { padding: 4px 10px 4px 0; }
tfoot { font-style: italic; }
caption { background: #ffc; }
table .last { padding-right: 0; }
/* Some default classes
-------------------------------------------------------------- */
.small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.quiet { color: #666; }
.hide { display: none; }
.highlight { background:#ff0; }
.added { color:#060; }
.removed { color:#900; }
.top { margin-top:0; padding-top:0; }
.bottom { margin-bottom:0; padding-bottom:0; }
[68]
AJAX:
Asynchronous JavaScript and XML, Konzept der asynchronen Datenübertragung zwischen einem Server und dem Browser, das es ermöglicht, innerhalb einer HTML-Seite eine
HTTP-Anfrage durchzuführen, ohne die Seite komplett
neu laden zu müssen
[Abb.: 6.32]
blueprint css:
Beispielseite
[Code: 6.26]
HTML-Aufruf einer HTML-Datei
6.4.8
Manuelle Einbindung ins Web
Da mit diesem Verfahren der Datenkonvertierung gleich fertige HTML-Dateien erzeugt werden, können diese, nachdem sie mithilfe von CSS formatiert und überarbeitet wurden, direkt hochgeladen und von anderen Clients aufgerufen werden. Eine Verlinkung zu dieser Datei erfolgt nach bekanntem Prinzip:
<a href=“pfadangabe/beispiel.html“>
Link zum HTML-Dokument</a>
Um Seiteninhalte gezielt an bestimmte Stellen oder Strukturbereiche innerhalb vorhandener Webseiten zu positionieren beziehungsweise vorhandenen Inhalte zu aktualisieren, ist auf Techniken wie PHP oder AJAX [68] zurückzugreifen.
6.4.9
Automatische Einbindung in ein CMS (TYPO3)
Nachdem alle Bestandteile über den Datenupload im Modul Dateiliste des TYPO3 Backends oder per FTP auf den Server geladen worden sind, kann in TYPO3 eine neue HTML-Inhaltsseite mit einer neuen uid in der Tabelle pages der internen SQL-Datenbank angelgt werden, dessen Inhalte dann beim Aufruf der Seite aus der entsprechenden content Tabelle geladen werden.
Für zusätzliche Bearbeitungen und für die Integration in vorhandene Webseiten, kann auch hier auf Methoden der webparser-Extension (siehe Kapitel 6.3.9) sowie auf die weiteren Möglichkeiten von PHP- und AJAX zurückgegriffen werden.
7. Gestaltungsmöglichkeiten
in Web und Print
[Abb.: 7.01]
blueprint css:
Mehrspaltiges
Gestaltungsraster
7.1 Mehrspaltiges
Webseitenlayout
Übersicht und Lesbarkeit stoßen bei Mehrspaltigkeit im Web an ihre Grenzen. Niemand vermag eine dreispaltige Webseite sofort zu überschauen. So muss der Blick des Benutzers von ganz links nach ganz rechts springen; und das immer wieder, schließlich sind die Seiten nicht nur breit, sondern auch sehr lang.
Ein grundsätzliches Problem des Webdesigns tritt damit zunehmend deutlicher zu Tage: Während man Bücher und Zeitschriften einfach umfangreicher machen kann – die Länge eines Inhaltsverzeichnisses spielt hier kaum eine Rolle –, muss im Web jede Seite quasi den kompletten Inhalt in Form einer Navigation bereithalten. Da diese aber mit zunehmender Masse immer ausgedehnter ausfallen muss, wird der Platz für den eigentlichen Inhalt weiter eingeschränkt.
Eigentlich folgt alles ganz einfachen Regeln: Es gilt, durch geschicktes Layout optische Schwerpunkte zu setzen. Die Unruhe eines Layouts überträgt sich auf den Leser: Je chaotischer eine Seite, desto schwerer die Orientierung, insbesondere wenn Elemente ähnlich stark gewichtet sind.
Das Wichtigste gehört plakativ hervorgehoben. Je mehr gleichartige Spalten ein Layout besitzt, desto größer ist die Gefahr, dass der Leser den Überblick verliert.
Einen idealen Lösungsweg gibt es nicht. Eine Möglichkeit wäre statt einer Webseite, die Inhalte auf mehrere Unterseiten zu verteilen, die andere Möglichkeit wäre die Reduzierung der Inhalte auf das Wesentliche. Bei allen Lösungen ist aber dennoch die Optik der Seite entscheidend.
[Code: 7.01]
body-CSS-Klasse
Für die Typografen und Layouter aus dem Printbereich gehört das Grundlinienraster zum täglichen Gebrauch, nur bei der Gestaltung von textlastigen Webseiten wird interessanterweise noch so gut wie kein Gebrauch davon gemacht.
Das Grundlinienraster ist vom Prinzip ein vertikales Raster an dem die Text- und Bildelemente des Fließtextes angeordnet werden. Es ergibt sich so auch am Bildschirm ein angenehmer zu lesendes Textbild. So erscheinen Randbemerkungen in einer Marginalspalte neben dem Fließtext mit dem gleichen Zeilenabstand harmonischer.
Nicht jeder Seite muss man mit einem Grundlinienraster umsetzen. Aber vor allem bei textlastigem Inhalt macht eine Ausrichtung des Fließtextes, der Überschriften und der Bildelemente Sinn. Schwierig wird das Ganze bei Listen, Aufzählungen, Formularelementen und Zitaten. Möglich ist es, ob es Sinn macht, muss man für den jeweiligen Fall individuell entscheiden.
Als Erstes muss man einen Zeilenabstand für das Grundlinienraster festlegen. Die Einstellung hängt von der verwendeten Schriftgröße des Fließtextes (also der
p-Tags) ab. Bei der Standardschriftgröße 12px verwendet man meist eine Zeilenhöhe (line-height) von 18px, welche einem Verhältnis von 150% entspricht.
Eine Eigenheit gibt es dabei zu beachten: setzt man per CSS eine line-height wird zuerst die angegebene Höhe aufgezogen und das Element dann in dieser vertikal zentriert.
Die einfachste Darstellungs-Variante ist eine Hintergrundgrafik mit diesem Raster zu erstellen. Wichtig ist, das die erste Linie erst nach einer Höheneinheit beginnt. So werden die Elemente immer vertikal zentriert im Raster angezeigt. Bei dieser Technik muss man bei jedem Projekt mit anderem Raster eine neue Grafik erzeugen oder eine Bibliothek mit den gängigsten Varianten anlegen. Über ein Javascript wird der Zeilenabstand des p-Tags (jeder andere ist natürlich auch möglich) ausgelesen und über ein PHP Skript kann eine Rastergrafik erzeugt werden.
Der Einfachheit halber werden alle Werte in Pixeln angegeben, um das Prinzip einfacher zu verstehen. Als Erstes legt man nun die Standardschriftgröße und den Zeilenabstand fest:
body {
font-size: 68.75%; /* 11px */
font-family: „Helvetica Neue“, Arial, Helvetica, Geneva, sans-serif;
line-height: 18px;
}
Alle Abstände müssen ein Vielfaches des Grundlinienrasters, in diesem Beispiel 18px betragen. Da p-Tags immer unter einer Headline oder einem anderen p-Tag vorkommen, erhält diese nur ein margin-bottom von einer Höheneinheit beziehungsweise 18px.
[Code: 7.04]
h2-CSS-Klasse
[Code: 7.03]
h1-CSS-Klasse
[Abb.: 7.02]
blueprintcss:
Mikrotypografie
p {
font-size: 11px;
line-height: 18px;
margin: 0 0 18px 0;
}
Interessanter wird die Sache bei Headlines. Möchte man die h1 in 24px setzen muss man die line-height immer auf das passende oder nächst höhere Vielfache des Rasters setzen. Eine Schriftgröße von 36px = 2 Höheneinheiten = line-heigt 36px, aber 24px = 1,3 Höheneinheiten = auf 2 Höheneinheiten aufrunden = 36px. Dazu kommt noch ein Abstand von einer Höheneinheit oben und unten.
h1 {
font-size: 24px;
line-height: 36px;
margin-bottom: 18px;
padding-top: 18px;
}
Möchte man zum Beispiel einen Rand unter einer Headline mit einbeziehen, so muss man diesen in die Berechnung der Zeilenhöhe integrieren. In diesem Fall ist der Rand unten; also wird die Größe des Randes vom unteren Abstand abgezogen = margin-bottom: 17px.
h2 {
font-size: 20px;
line-height: 36px;
margin-bottom: 17px;
padding-top: 36px;
border-bottom: 1px solid red;
}
So können analog alle Headlines angepasst werden. Bei weiteren Elementen wie beispielsweise ungeordneten Listen, Definitionslisten, Tabellen muss man individuell entscheiden, ob diese nach dem Grundlinienraster ausrichtet werden sollen oder nicht.
[Abb.: 7.04] (rechts)
SIFR aktiviert
http://www.mikeindustries.com/blog/files/sifr/2.0/
[Abb.: 7.03] (links)
SIFR deaktiviert
http://www.mikeindustries.com/blog/files/sifr/2.0/
SIFR steht für Scalable Inman Flash Replacement und wurde von Mike Davidson entwickelt. Mit dieser Technik, die Fließtexte aus HTML-Seiten gegen Flash-formatierte Texte austauschen kann, ist man in der Lage, Internetseiten hinsichtlich der typographischen Gestaltung so zu formatieren, wie es der Kunde oder das Corporate Design vorgibt.
Denn im Gegensatz zur heute üblichen Praxis, Grafiken einzusetzen, wenn Schriftarten in Seiten eingebunden werden sollen, die nicht dem Standard entsprechen, bleibt bei dem SIFR der Text erhalten.
Er genügt damit den Regeln für barrierefreies Design und kann von Text-Browsern, Screen-Readern und natürlich von Suchmaschinen erkannt werden. Außerdem entscheidet der Browser über die Größe der Schriftdarstellung.
Das SIFR-Paket besteht aus einem kleinen Flash-Film und einer Javascript-Datei, sowie etwas CSS- und Script-Quellcode für die betreffende HTML-Seite. Dieser Quellcode liest die Tags in einer HTML-Seite und ordnet diese den CSS-Stilen zu. Von diesen Stilen sind einige an den Flash-Film gebunden. Der Text, der innerhalb solcher Tags auftaucht, wird durch Flash-Text ersetzt. Da Flash in der Lage ist, seinen Filmen Schriftartkonturen mitzugeben, nehmen die Texte eben diese Konturen an. Das Ergebnis ist ein skalierbarer Text in jedem beliebigen Font, der nach wie vor auswählbar bleibt und von Suchmaschinen gefunden wird.
Unterstützt ein Browser Flash nicht, dann bleibt die Formatierung im ursprünglichen Stil erhalten. Alle Texte innerhalb einer Seite lassen sich im Quelltext oder im Redaktionssystem editieren. Viele Webseiten erzeugen Textgrafiken auch dynamisch über ein PHP-Modul; auch das entfällt und damit die Server-Last, die bei den großen Webseiten hierdurch entsteht.
Laufweite, Schriftschnitt und andere typographische Parameter lassen sich aber auf diesem Weg nicht kontrollieren. Auch der Rechtsklick auf den Text zeigt nicht das normale Kontextmenü des Browsers, sondern ein spezifisches SIFR-Menü. Hier fehlen vor allem die Hyperlink-Optionen, etwa zum Öffnen eines Links in einer neuen Seite.
7.3 Schriftenvielfalt –
Neue Möglichkeiten mit SIFR
[69]
CGI-Skript:
Common Gateway Interface, Standard für den Datenaustausch zwischen einem Webserver und dritter Software,
die Anfragen bearbeitet
7.4 Silbentrennung
im Internet
In professionellen Layoutprogrammen aus dem Printbereich wird der Silbentrennung große Aufmerksamkeit geschenkt. Fragen wie optischer Randausgleich spielen wegen der viel geringeren Auflösung der Darstellung im Web aber kaum eine Rolle.
Normalerweise werden Textabsätze von den Browsern in linksbündigem Flattersatz angezeigt. Mit dem CSS- Befehl
text-align:justify ist es möglich, die
Absätze im Blocksatz anzuzeigen, was aber bei schmalen Textspalten mangels
Silbentrenunng zu einem hässlichen Schriftbild führen kann.
Aber auch das optische Erscheinungsbild des klassischen linksbündigen Flattersatzes könnte mithilfe einer Silbentrennungsfunktion aufgebessert werden, um so eine gleichmäßiger gefüllte Flatterzone erzielen zu können.
In HTML gibt es zwei Typen von Trennzeichen: den normalen Trennstrich und das weiche Trennzeichen (soft hyphen).Der normale Trennstrich sollte von den Benutzerprogrammen wie jedes andere Zeichen behandelt werden. Das weiche Trennzeichen zeigt dem Benutzerprogramm, wo ein Zeilenumbruch auftreten kann.
Diejenigen Browser, die weiche Trennzeichen interpretieren, müssen folgende Semantik beachten: Wenn eine Zeile an einem weichen Trennzeichen umgebrochen wird, muss ein Trennstrich am Ende der ersten Zeile stehen. Wenn eine Zeile an einem weichen Trennzeichen nicht umgebrochen wird, darf das Benutzerprogramm keinen Trennstrich ausgeben.Bei Operationen wie Suchen und Sortieren sollte das weiche Trennzeichen immer ignoriert werden.
In HTML wird der normale Trennstrich durch das Minus-Zeichen (- oder -) repräsentiert. Das weiche Trennzeichen wird repräsentiert durch die Zeichen-Entity-Referenz ­ (soft hyphen, ­ oder ­)
Der HTML-Standard schreibt aber nicht vor, dass Browser das ­- Zeichen als Trennstelle erkennen müssen. Mit CSS 3 (heute ist CSS 2.1 aktuell), wird es möglich sein, das Trennungsverhalten von Textabsätzen mittels CSS zu steuern. Aber auch hier wird nicht vorgeschrieben, dass Browser diese Silbentrennung vornehmen müssen.
Bis die Browser selbst eine Silbentrennung integriert haben, muss diese entweder beim Schreiben der Texte (durch den Texteditor), vor dem Ausliefern auf dem Server (mittels CGI-Skript [69]) oder im Browser (per Javascript) vorgenommen werden.
Eine Umsetzung in Javascript hat den Vorteil, dass die Silbentrennung den Text für Suchfunktionen nicht unleserlich macht und vom Benutzer ein- oder ausgeschaltet werden kann. Im folgenden wird hier eine Lösung auf Javascript-Basis gezeigt.
[Code: 7.05]
Einbindung des Skriptes
[Code: 7.06]
Funktionsaufruf des Skriptes
[Abb.: 7.05]
Problematik des Blocksatzes bei zu geringer Spaltenbreite,
http://ingomar.wesp.name/journal/silbentrennung-im-browser
Hyphenator.js –
Einsatz des JavaScriptes
Das Script trennt nach dem Aufruf von Hyphenator.hyphenateDocument() sämtlichen Text aller Elemente mit dem Attribut class=“hyphenate“ – auch den Text in weiteren Kind-Elementen.
Das Skript wird im <head>-Bereich einer HTML-Datei eingebunden:
<script src=“Hyphenator.js“ type=“text/javascript“></script>
Durch das Einbinden dieses Scriptes wird automatisch das Objekt Hyphenator erstellt. Anschließend muss die Methode Hyphenator.hyphenateDocument() ausgeführt werden, sobald die gesamte Datei geladen ist:
<script type=“text/javascript“>
window.onload=function()
{ Hyphenator.hyphenateDocument(6,‘‚); } </script>
Das Script sucht automatisch alle Elemente mit der Klasse hyphenate (beispielsweise <p class=“hyphenate“>) und nimmt die Silbentrennung in diesen Elementen und weiteren Kind-Elementen vor.
Zur Angabe der Sprache muss das Attribut lang oder xml:lang in mindestens einem übergeordneten Element-Tag stehen.
Der vollständige Quelltext des Javascriptes Hyphenator.js befindet sich im Anhang dieser Ausarbeitung auf der Daten-CD.
8. Vergleich der Konvertierungs- möglichkeiten
In den Anforderungen an den „Print-to-Web“-Workflow wurden in Kapitel 3.3 Vergleichskriterien definiert. An dieser Stelle werden jetzt die Konvertierungsmöglichkeiten an diesen Anforderungen und Zielsetzungen gemessen und vergleichen.
Als wichtigste Optimierungskriterien sind ein hoher Automatisierungsgrad des Konvertierungsprozesses und eine hohe inhaltliche und technische Integrität festgelegt worden, natürlich unter der Berücksichtigung eines hohen Qualitätsniveaus bei der optischen Darstellung und Wiedererkennung zum Print-Dokument beziehungsweise zum Corporate Design.
Hoher Automatisierungsgrad: Mithilfe von Scritping-Regeln und Hotfolder-Technologien sind bei allen Konvertierungsmethoden sehr hohe Automatisierungsgrade zu erreichen. Sowohl der reine PDF-Export aus der Layoutanwendung lässt sich über Javascript automatisieren, als auch die Vorbereitung der Daten und die Konvertierung per BatchXSLT.
Für eine komplette Aufbereitung der (X)HTML-Exportdaten mittels YAML oder blueprintcss wird natürlich ein gewisser Mehraufwand durch die manuelle Optimierung der Inhalte benötigt.
Für die firmeninternen Zwecke stehen die Flash-basierten Lösungen leider aussen vor, da man bis auf die Adobe Digital Editions Lösung, bei allen auf einen externen Dienstleister angewiesen ist.
Hohe inhaltliche und technische Integrität: Zu einer benutzbaren Webseite gehört nicht nur die Validierung von Markup und Stylesheets, sondern auch ein Test der Struktur (Outline-Konsistenz), der Accessibility (Zugänglichkeit) und Performance (Ladezeit).
Während bei der PDF- und Flash-basierten Konvertierung Markup und Stylesheets nicht existent sind, kommt es hier nur auf eine fehlerfreie Integration in die Webseite an. Fehlende Browser-Plugins sind oftmals die zu nehmende Hürde und daher müssen hier Abfragemöglichkeiten über die Browserfunktionalität und Alternativansichten geschaffen werden.
Bei den XML- und (X)HTML-basierten Konvertierungen ist zum einen eine innere Konsistenz wichtig, damit alle Elemente der Webseite untereinander funktionieren, zum anderen aber auch die syntaktische Überprüfung des Quelltextes und der Stylesheets durch externe Validatoren.
Hoher optischer Wiedererkennungswert: Unter diesem Punkt wird die Ähnlichkeit zum Print-Produkt beziehungsweise die Einhaltung der Gestaltungsvorgaben des Corporate Designs untersucht. An dieser Stelle haben die PDF- und Flash-basierten Konvertierungen Vorteile gegenüber den anderen Möglichkeiten, da sie sich optisch direkt an das Print-Produkt anlehnen. Allerdings scheitern diese beiden Methoden an den Anforderungen von Barrierefreiheit und Usability.
8.1 Zielsetzungen und
deren Erreichungsgrade
[70]
Zitat:
http://www.web-blog.net/
comments/P63_0_1_0/
Mindestens genauso wichtig wie die technische und optische Umsetzung, sind die Qualitätskriterien des Konversats bei der Interaktion mit dem Benutzer.
„PDF-Dokumente bringen dennoch heftigste Usability-Probleme mit sich. Oftmals ärgern sich User völlig zurecht, auf einen Link geklickt zu haben, der plötzlich einen Download startet und ein megabytegroßes PDF öffnet, das lediglich für den Printbereich optimiert worden und somit weder strukturiert, navigier- oder gar durchschaubar ist.“ [70]
PDF-Dateien sollten neben einer datenmäßig Optimierung darüberhinaus auch interaktive Lesezeichen zur Strukturierung der Inhalte, Meta-Angaben und eingebettete Links zu externen Daten oder zu HTML-Verweisen haben.
Bei der Darstellung der Inhalte in Form einer Seitenansicht folgen die PDF- und die SWF-Konversate gleichen Regeln und haben daher ähnliche Anforderungen an die Benutzbarkeit. So sollten sowohl die Schriftgröße beziehungsweise die Darstellung der Inhalte vergrößert werden können als auch eine Ausgabe der Inhalte für Textbrowser und Screen-Reader möglich sein.
Bei XML- und (X)HTML-Seiten, die keine direkte Seitenansicht des Print-Produktes darstellen, ist eine intuitive Gesamtstruktur nicht nur bei umfangreichen Webseiten Pflicht. Ein gutes Gestaltungsraster zeigt dem Nutzer wie die Elemente angeordnet sind, so dass er nicht nur innerhalb von Sekunden eine Erwartung an die Webseite entwickelt, sondern sich auch – eine gewisse Logik im Raster vorausgesetzt – intuitiv zurechtfindet.
Die Nutzung von relativen Werten zur Formatierung und Positionierung von Elementen räumt dem Nutzer die Möglichkeit ein, mit Hilfe der Einstellung der Schriftgröße und des Browserfensters das Layout zu beeinflussen.
In Bezug auf Barrierefreiheit eines Layouts steht oft die Forderung im Raum, die eigentlichen Hauptinhalte einer Webseite im Quelltext möglichst weit oben anzuordnen. Das Ziel dieser Regelung ist, den Zugang zu diesen Inhalten über Textbrowser oder Screen-Reader so einfach wie möglich zu gestalten. Andere Seitenelemente sollen daher im Quelltext möglichst erst nach den Hauptinhalten folgen.
Bei allen Konversaten gelten verfahrensübergreifende Regeln für eine hohe Benutzerfreundlichkeit. Serifenschriften sollten generell größer dargestellt werden, als Schriften ohne Serifen, da sie mehr typografische Details enthalten und die Lesbarkeit stark reduzieren. Je mehr Zeichen eine Zeile enthält, desto deutlicher sollten die Zeilen voneinander entfernt sein, da das Auge sonst den Sprung vom Ende der Zeile zum Beginn der nächsten Zeile nicht schafft. Es ist außerdem auch für einen ausreichenden Kontrast zwischen Vordergrund und Hintergrund zur guten Lesbarkeit der Inhalte zu sorgen.
Schnittstellen sind für eine weitere Bearbeitbarkeit der Daten wichtig, damit die Datencharakteristik speziell auf das Ausgabemedium angepasst und optimiert werden kann.
Zu unterscheiden sind hier die strukturellen Datenänderungen und die optischen Veränderungen der Datendarstellung. Strukturelle Änderungen können über XSLT mithilfe entsprechender Stylesheets vorgenommen werden. Für die optische Formatierung werden CSS-Stylesheets herangezogen.
8.3.1
XSLT-Weiterverarbeitungsmöglichkeit
PDF-Daten und SWF-Daten sind allein durch ihre abgeschlossene Datenstruktur von weiteren strukturellen Verarbeitungen ausgeschlossen. Die Textinformation ist zwar noch verfügbar und unter Umständen aus den Daten seriell auszulesen, es fehlt dann aber jeglicher struktureller Zusammenhang zu den Inhalten.
XML- und (X)HTML-Daten haben – da sie selbst meistens Produkte aus vorhergehenden XSL-Transformationen sind –
natürlich ihre Fähigkeit und ihre Schnittstellen zur weiteren Verarbeitung behalten. Solange das resultierende Dokument der XML-Syntax entspricht und keine Inhalte bei der Transformation verloren gehen, kann es beliebig weiterverarbeitet werden. Es können aber auch abgeschlossene Datenformate oder Binärdateien erstellt werden.
8.3.2
CSS-Weiterverarbeitungsmöglichkeit
Eine Webseite ist für die Ausgabe auf dem Bildschirm bestimmt. Es ist hilfreich bei der Ausgabe auf Papier die Inhalte mit einem entsprechenden Stylesheet aufzubereiten.
Die medienspezifische Anpassung ist für alle Ausgabekanäle vorzunehmen, um den Vorgaben der Benutzerfreundlichkeit und der Barrierefreiheit gerecht zu werden.
Auch an dieser Stelle zeigt sich, dass die vier Konvertierungsmöglichkeiten sich in zwei Kategorien einteilen lassen. Verarbeitbar sind nur die offenen Konversate, die XML- beziehungsweise (X)HTML-Daten enthalten und bei denen die generelle optische Ausprägung der einzelnen Elemente extern über eine CSS-Datei geregelt wird.
Nichtverarbeitbar hingegen sind die PDF- und SWF-Formate, wobei an dieser Stelle angemerkt werden muss, dass die entsprechenden ausgabespezifischen Anpassungen teilseise vor oder während des Konvertierungsprozesses festgelegt werden können.
Da aber gerade die individuellen Einstellungen bei Flash-basierten Konvertierungsmöglichkeiten sehr vom jeweiligen Hersteller abhängig sind, wird an dieser Stelle auf diese erweiterten Möglichkeiten nicht weiter eingegangen.
8.3 Individuelle Konvertierungs-
möglichkeiten und Erweiterungen
In der folgenden Tabelle werden die Konvertierungsmöglichkeiten nach verschiedenen Gesichtspunkten bewertet und anhand von Gewichtung einzelner Kriterien ein Gesamtergebnis errechnet. Das Verfahren zur Bewertung entspricht dem Notenverfahren mit Werten von 1,0 bis 5,0 sowie Auf- und Abwertungen von 0,3.
8.4 Übersicht und firmeninterne
Bewertung der Möglichkeiten
|
Direkter Vergleich und gewichtete Bewertung der Konvertierungsmöglichkeiten
|
| |
PDF
|
SWF
|
XML
|
(X)HTML
|
|
Faktor
|
Note
|
gew.Note
|
Note
|
gew.Note
|
Note
|
gew.Note
|
Note
|
gew.Note
|
|
Automatisierungsgrad
|
20
|
1,3
|
26
|
2,0
|
40
|
1,3
|
26
|
2,7
|
54
|
|
CSS-Weiterverarbeitungsmöglichkeit
|
10
|
5,0
|
50
|
5,0
|
50
|
1,0
|
10
|
1,0
|
10
|
|
Barrierefreiheit
|
5
|
3,0
|
15
|
3,3
|
16,5
|
2,0
|
10
|
1,7
|
8,5
|
|
Usability
|
10
|
3,0
|
30
|
4,0
|
40
|
2,0
|
20
|
1,0
|
10
|
|
Workflowintegration
|
10
|
1,0
|
10
|
2,7
|
27
|
1,3
|
13
|
2,3
|
23
|
|
Einhaltung des Corporate Design
|
15
|
1,0
|
15
|
1,0
|
15
|
1,7
|
25,5
|
1,7
|
25,5
|
|
Manueller Bearbeitungsanteil
|
20
|
1,0
|
20
|
1,3
|
26
|
1,3
|
26
|
3,0
|
60
|
|
XSLT-Weiterverarbeitungsmöglichkeit
|
5
|
5,0
|
25
|
5,0
|
25
|
1,0
|
5
|
1,0
|
5
|
|
Vorbereitung für die Konvertierung
|
5
|
1,0
|
5
|
1,3
|
6,5
|
1,3
|
6,5
|
1,7
|
8,5
|
|
Qualität der Ausgabedaten
|
15
|
1,0
|
15
|
1,7
|
25,5
|
1,3
|
19,5
|
3,3
|
49,5
|
|
Investitionskosten
|
5
|
1,0
|
5
|
3,0
|
15
|
3,0
|
15
|
1,0
|
5
|
|
Veränderung des Workflows
|
5
|
1,0
|
5
|
1,3
|
6,5
|
1,3
|
6,5
|
2,0
|
10
|
|
SUMME
|
125
|
–
|
221
|
–
|
293
|
–
|
183
|
–
|
267
|
|
ERGEBNIS
| |
1,768
|
2,344
|
1,464
|
2,136
|
Kommentar zum Ergebnis: Obwohl der klassische PDF-Export bei vielen Kriterien und auch bei den beiden entscheidenden Kriterien mitunter am besten abschneidet, ergibt sich interessanterweise durch die Gewichtug aller Faktoren in der Summe aber ein anderes Bild. Der Export von XML-Daten als Ausgangsbasis zur Konvertierung bietet das bessere Gesamtpaket, da das Konversat benutzerfreundlicher ist und mehr Schnittstellen zur weiteren Datenverarbeitung bietet.
9. Workflow-Integration und
Praxisbeispiel
[71]
Zitat:
http://www.idgmedia.de/
index.cfm?pid=1334
[Abb.: 9.01]
Cover:
Macwelt 01/2008
9.2 Magazin-Beispiel:
Macwelt
9.1 Optimierter Workflow
der One Advertising AG
Nach Umstellung des Workflows auf den XML-Export würde beispielsweise die Online-Ausgabe des Magazins Macwelt nach folgendem Schema produziert werden:
Aus dem InDesign-Print-Dokument werden direkt per Javascript alle zur Konvertierung benötigten Bestandteilegesammelt und automatisch in einen Dateneingangs-Ordner der BatchXSLT-Verarbeitung gespeichert. Dieser Ordner wird vom Konvertierungsprogramm verwaltet und alle Inhalte, die in dieser Ordnerstruktur liegen, werden zu einem ePaper verarbeitet. Als Ziel-Ordner ist ein Verzeichnis auf dem internen FTP-Server angegeben, dessen Dokument-Pfade einen Eintrag in der MySQL-Datenbank von TYPO3 haben. Mit einer Aktualisierung der Inhalte dieses Ordners werden auch gleich die von TYPO3 ausgegebenen HTML-Dateien auf den neuesten Stand gebracht.
Macwelt
Ausgabe 01/2008,
IDG Magazine Media GmbH
„Die Macwelt ist das führende deutschsprachige Magazin für den ambitionierten und professionellen Mac-Anwender. Die Leser der monatlich erscheinenden Zeitschrift schätzen die aktuellen Nachrichten und punktgenauen Themen in den Rubriken Aktuell, Test & Technik, Publish und Praxis. Die Macwelt-Produktlinie umfasst neben dem Hauptheft regelmäßig publizierte Sonderhefte zu Schwerpunktthemen, wie zum Beispiel das erfolgreiche iPod Special.
Ergänzend bietet die Website macwelt.de täglich aktualisierte Nachrichten und ein umfangreiches Download-Archiv. In der Grafikdesign- und Publishing-Branche verfügen Apple und das Mac-OS-System über breit gefächerte Einsatzgebiete – hier ist die Marke Macwelt das mit deutlichem Vorsprung meistverkaufte Magazin Europas.“ [71]
IDG Deutschland ist, unter dem Dach der IDG Communications Media AG, mit den Tochtergesellschaften IDG Business Media GmbH, IDG Magazine Media GmbH und IDG Entertainment Media GmbH Kunde bei der One Advertising AG.
Die Produktionsabteilung der IDG Magazine Media GmbH erstellt ihre Macwelt-Ausgaben mithilfe datenbankgestützter InDesign-Dokumente. Die Layout-Dokumente der aktuellen Ausgabe wurden für diese Ausarbeitung freundlicherweise zur Verfügung gestellt, um Alternativmöglichkeiten für die Online-Verwertung aufzuzeigen und zu bewerten.
Die folgenden Beispielansichten zeigen die Konvertierungsergebnisse von einzeln selektierbaren Artikelbestandteilen und die Darstellung von Tabellen mit Text- und Bildinhalten. Die Formatierung der Inhalte mithilfe entsprechender Stylesheets kann zusätzlich noch vorgenommen werden.
[Abb.: 9.03]
Screenshot, Macwelt
ePaper-Konvertierung (Tabelle)
[Abb.: 9.02]
Screenshot, Macwelt
ePaper-Konvertierung (Artikel)
10. Zusammenfassung
und Ausblick
In dieser Ausarbeitung zum Thema „Print-to-Web – Neue Möglichkeiten der Datenkonvertierung“ sind vier generelle Wege vorgestellt worden, um Daten und Inhalte aus Layoutprogrammen für eine Zweitverwertung im Internet aufzubereiten. Alle beschriebenen Verfahren bauen jeweils auf einer anderen Basistechnologie auf, um die Inhalte zu exportieren:
PDF-Basis: Zum einen gibt es das klassische PDF-Konversat, welches direkt mithilfe der PDF-Export-Funktionen aus den beiden Layoutprogrammen Adobe InDesign und QuarkXPress oder alternativ mithilfe des Acrobat Distillers und eines Postscript-Dokuments des Layouts gemäß einer internetoptimierten PDF-Einstellungsdatei erzeugt wird.
Flash-Basis: Eine Sonderstellung besitzen die Flash-basierten Techniken. Hierbei ist man nicht nur auf externe Dienstleister mit entsprechender Konvertierungssoftware angewiesen, sondern man bekommt ein Produkt, welches – in der Natur des SWF-Formates begründet – nicht mehr weitereditierbar ist und keine Bearbeitungsschnittstellen hat. Bei den einzelnen vorgestellten Verfahren tendieren die Ergebnisse von überzeugend und für manche Publikationen sinnvoll (Adobe Digital Editions, Speedpaper) bis hin zu benutzerunfreundlich und technisch überholt (Liverpaper).
XML-Basis: Die Konvertierung auf XML-Basis ist sowohl aus QuarkXPress als aus Adobe InDesign mithilfe entsprechender Tools (BatchXport Pro/BatchXSLT for InDesign) von AiEDV möglich. Neben einer hochgradigen Automatisierbarkeit der Konvertierung, bleiben durch die XML-basierte Technik viele Möglichkeiten zur individuellen Steuerung des Konvertierungsprozesses und der Bildverarbeitung erhalten. Desweiteren können verschiedene Techniken beispielsweise das spaltenbasierte CSS-Layout YAML oder mikrotypografische Funktionen von SIFR oder Javascripte zur Steuerung der Silbentrennung für eine weitere Verarbeitung angedockt werden.
HTML-Basis: Der programminterne HTML-Export von Print-Dokumenten – sowohl in QuarkXPress als auch in Adobe InDesign vorhanden – erzeugt lediglich beim Adobe InDesign-Export brauchbares Material. Das (X)HTML-Format muss aber noch optisch weiterverarbeitet werden, da nur CSS-Deklarationen ohne jeglichen Inhalt definiert werden. Auch hier ist die Implementierung weiterer Verarbeitungstechniken – wie beim XML-Export – möglich.
Neben Kriterien der optischen Wiedererkennung zum Printprodukt und der technischen und inhaltlichen Integrität, ist vor allem das Potenzial einer vollständigen Automatisierbarkeit der Konvertierung und der Einbindung in ein Content Management System wichtig. Unter diesen Gesichtspunkten sind vor allem die XML- und die HTML Konvertierungen interessant, da sie die Möglichkeit eines hochgradig automatisierbaren Workflows
10. Zusammenfassung
und Ausblick
[72]
Zitat:
http://www.print-media-
production-forum.de/
[Abb.: 10.01]
Grafische Darstellung Web2.0
bieten und dabei parallel noch Schnittstellen und manuelle Eingriffspunkte in die Verarbeitung zur Verfügung stellen.
Auch das Potenzial einer Verknüpfung mit verschiedenen hier vorgestellten Verarbeitungsfunktionen, beispielsweise die Überarbeitung der Daten auf CSS-Basis mit Mehrspaltigkeit und Grundlinienraster, sowie die Kombination mit dem Content Management System TYPO3, bieten noch viele Möglichkeiten zum weiteren Ausbau des Workflows.
Darüberhinaus bieten diese beiden Konvertierungsmethoden auch die Möglichkeit, Inhalte, neben der Browserdarstellung auf klassischen Computern, auch auf weiteren Ausgabekanälen – beispielsweise auf mobilen Endgeräten – darzustellen.Hierzu ist lediglich eine Anpassung der Datenausgabe auf das Ausgabemedium durch eine entsprechende XSL-Transformation beziehungsweise durch ein entsprechendes Stylesheet vorzunehmen.
Zum aktuellen Zeitpunkt hat der firmeninterne Workflow am Beispiel des Magazins „Macworld“ einen Optimierungsgrad erreicht, bei dem der Internetnutzer sogleich den optischen Mehrwert nutzen kann, und das bei gleichzeitiger Minimierung der internen Produktionszeit der Onlineausgabe – und somit einer Minimierung der Kosten für die Zweitverwertung des Magazininhalts.
Zusammenfassend ist zu sagen, dass die beiden Welten Print und Web zwar unterschiedlichen Prinzipien und Gesetzen folgen und dementsprechend unterschiedliche Anforderungen an die technische Datenverarbeitung und die Usability gestellt werden, es dennoch aber eine gemeinsame Austauschbasis gibt und damit Möglichkeiten zur bidirektionalen Konvertierung – sowohl Web-to-Print als auch Print-to-Web – existieren.
Um schließlich auf das einleitende Zitat zurückzukommen und die Frage nach den besseren Lösungen zu beantworten, hoffe ich, dass ich mit dieser Ausarbeitung ein Stück weit dazu beitragen konnte, Schnittstellen und Wege aufzuzeigen, die den komfortablen Austausch von Inhalten zwischen diesen beiden Medien möglich machen.
Heute werden bereits Entwicklungen von „Print-to-Web 2.0“ wie zuletzt in Stuttgart auf dem „Print Media Production Forum 2007“ diskutiert. Auf der Basis von Web 2.0 sind neuartige Konzepte zur Erzeugung und Verbreitung von Nachrichten, Meinungen, Musik und Video möglich.
„Von der Gewinnung der Inhalte (Content) über deren vernetzte, dezentrale redaktionelle Aufbereitung bis zur Wiedergabe auf beliebigen (mobilen) Endgeräten beim Nutzer, der sich aktiv an solchen Prozessen beteiligen kann, stehen hier ungeahnte Möglichkeiten offen.“ [72]
Adobe Systems Incorporated
Adobe InDesign CS3 – Benutzerhandbuch
1. Auflage, Adobe Systems Incorporated, San Jose, California (USA), 2007
Working with INX file format – Solutions Document #10091
Veröffentlichung: 11/2005, Internetlink: 12/2007
Armbrüster, Thomas
QuarkXPress 7 – Das Praxisbuch zum Lernen und Nachschlagen
1. Auflage, Galileo Press GmbH, Bonn, 2007
Bongers, Frank; Stöckl, Andreas
Einstieg in TYPO3 – Inklusive Einführung in TypoScript
2. aktualisierte und erweiterte Auflage, Galileo Press GmbH, Bonn, 2006
Borsutzky, Silvana
Web Usability – eine Einführung
Veröffentlichung: 08/2002, Internetlink: 12/2007
Davidson, Mike
SIFR 2.0: Rich Accessible Typography for the Masses
Veröffentlichung: 04/2005, Internetlink: 12/2007
Grüder, Christoph
Adobe InDesign CS3 – Das Praxisbuch zum Lernen und Nachschlagen
1. Auflage, Galileo Press GmbH, Bonn, 2007
Haasler, Michael
Cross-Media-Publishing als technische Herausforderung
Veröffentlichung: 2002, Internetlink: 12/2007
Imhof, Andreas
BatchXSLT for InDesign Installation and User‘s Guide
www.aiedv.ch, 2007, Daten-CD: Programme/BatchXSLT_Demo/Docs/
BatchXSLT4InDesign/BatchXSLT4Ind_Manual_en.htm
11.1 Literaturverzeichnis
Jesse, Dirk
CSS-Layouts – Praxislösungen mit YAML
1. Auflage, Galileo Press GmbH, Bonn, 2007
Laborenz, Kai; Wendt, Thomas; Ertel, Andrea; Dussoye, Prakash; Hinz, Elmar
TYPO3 – Das Handbuch für Einsteiger
2. Auflage, Galileo Press GmbH, Bonn, 2006
Müller-Prothmann, Tobias
TYPO3-Kurzhandbuch für Redakteure
Veröffentlichung: 11/2003, Internetlink: 12/2007
Nater, Mathias
Silbentrennung in HTML
Veröffentlichung: 2007, Internetlink: 12/2007
Payer, Margarete
Computervermittelte Kommunikation
Veröffentlichung: 01/2001, Internetlink: 12/2007
Peltzer, Matthias
Barrierefreies Internet
Veröffentlichung: 2006, Internetlink: 12/2007
Pereira Martins, Filipe; Kobylinska, Anna
Adobe Acrobat 7 Standard und Professional für Office, Web und Druckproduktion
Adobe InDesign CS3 und InCopy CS3 für Digital- und Printmedien
jeweils 1. Auflage, Springer Verlag, Berlin, 2006 und 2007
Rohe, Steffen
Grundlinienraster für Webseiten
Veröffentlichung: 7/2007, Internetlink: 12/2007
www.drweb.de
Die heilige Dreispaltigkeit
Veröffentlichung: 2002, Internetlink: 12/2007
Adobe Digital Editions 35, 96, 106
Adobe InDesign 13, 18 ff., 32, 35 f., 38 ff., 55, 68, 106
Adobe Distiller 32 f., 106
Auswertung der Export-Daten 59, 71
Automatisierungsgrad 7, 14, 96, 99
Automatische Einbindung in ein CMS 34, 37, 67, 85
BatchXSLT 38, 55, 58, 67, 71, 73, 96, 102, 106
Barrierefreiheit 15, 35, 96 ff.
Browser 12, 14, 24, 26, 33 f., 37 f., 55, 62, 66 ff., 70, 72 ff., 80, 85, 91 ff., 96 f., 107
Blueprintcss 74, 80, 90, 96
Content Management System (CMS) 13, 25 f., 34, 37, 67, 85
Corporate Design 6, 7, 14, 25, 91, 96, 99
Cross-Media-Publishing 10
CSS 12, 14, 19, 24 f., 55, 59 ff., 68, 70 ff., 80 f., 83, 85, 88 ff., 96, 98 f., 106 f.
Datenkonvertierung 2, 85, 106
DIV-Container 37, 73 ff., 78
DOM 18, 20, 40,43 f., 49, 51
ePaper 35 f., 55, 58 ff., 63, 102 f.
Flash 3, 33, 35 ff., 91, 96, 98 f., 106
Float(-Umgebungen) 63 ff., 74 ff., 81 ff.
Grundlinienraster 45 f., 73, 80, 89 f., 107
InDesign-Snippet 19, 43, 49 ff., 60 ff., 71 f., 75
Integrität (inhaltlich und technisch) 7, 10, 14, 96, 106
Interchange-Format 2, 18 f., 38 ff., 42, 55
Javascript 38, 62 ff., 70, 89, 91 ff., 96, 102
Konvertierung auf PDF-Basis 32, 106
Konvertierung auf SWF-Basis 35, 106
Konvertierung auf XML-Basis 38, 106 f.
Konvertierung auf (X)HTML-Basis 68, 106 f.
Konvertierungsvorgang 32, 38, 68
11.2 Stichwortverzeichnis
Manuelle Einbindung ins Web 33, 36 f., 67, 85
Medienneutrale Datenhaltung 3, 6 f., 10 ff.
PDF 2, 3, 13, 32 ff., 38, 57, 59 ff., 96 ff., 106
PDF-Export 32, 96, 99, 106
PHP 13, 24, 26 f., 34, 67, 81, 85, 89, 91
Plugin 27, 33 f., 36 f., 67, 96
Postscript 32 f., 57, 106
Print-to-Web 2, 13 f., 96, 106 f.
QuarkXPress 13, 18, 20 f., 32, 38, 68, 106
Silbentrennung 92 f., 106
Template 12 f., 25 f., 58, 62 ff., 78 ff.
TYPO3 2, 13, 26 ff., 34, 37, 67, 79, 85, 102, 107
TYPO3 Extensions 27, 67, 79, 85
TYPO3-Modulbereiche 28 f., 34, 37
Usability 14 f., 96 f., 99, 107
W3C 10, 20, 24, 62, 71 ff.
webparser-Extension 67, 85
Workflow 2, 6 f., 10 ff., 14, 20, 96, 99, 102, 106 f.
(X)HTML 12, 14, 18 f., 24, 35, 37, 62, 68 ff., 72 ff., 78, 96 ff., 106
XML 2 f., 10 ff., 18 ff., 25, 38, 44 ff., 58 ff., 71 f., 93, 96 ff., 102, 106
XMP Meta Informationen 43, 47 f., 50, 52 ff., 97
XSL 55, 58 ff., 67, 98, 107
XSLT 12, 38 f., 55, 58 ff., 67, 71, 73, 96, 98, 102, 106
Daten-CD mit Quellcode
und Anwendungsdaten
Dateien:
Blueprint Generator 0.6
Blueprintcss 0.6
Hyphenator Javascript v4
SIFR 2.0
TYPO3 4.1.4
TYPO3 Webparser 0.1
YAML 2.5 TYPO3
YAML 3.0
Dokumente:
(X)HTML Beispiel 1
(X)HTML Beispiel 2
(X)HTML Beispiel 3
INX Beispiel 1
INX Beispiel 2
INX Beispiel 3
XML Beispiel 1
XML Beispiel 2
XML Beispiel 3
XSLCSS
PDF-Dokument der Ausarbeitung
Programme:
Adobe Digital Editions Reader
Adobe Flash Player 9
Adobe InDesign CS3 (30 Tage Demo)
Adobe Reader 8
BatchXSLT (30 Tage Demo)
Ghostscript 8.6.1
ImageMagick 6.3.5
Java VM 6.3
Mozilla Firefox 2.0
XAMPP 1.6.4