itl Institut fürtechnische Literatur

Ausgabe 16 03/14

[ i ] m FokusDas Fachmagazin von itl

HTML5 als Basis für Technische Dokumentation auf mobilen Endgeräten

[ i ] m Fokus: News2

Ausgabe 16 03/14

Grußwort des Aufsichtsrats

Sehr geehrte Kunden!

In der aktuellen Ausgabe von [i]m Fokusmöchte ich Sie über wichtige personelleÄnderungen bei itl informieren und Ihnenunseren neuen Vorstand, Aufsichtsratund die neue Leitung der Übersetzungs-abteilung vorstellen.Ich gratuliere Regine Ceglarek, PeterKreitmeier, Dieter Gust und Carina Mayrganz herzlich zu den neuen Positionenund freue mich auf weiterhin guteZusammenarbeit.

Darüber hinaus erhalten Sie selbstver-ständlich auch wieder spannende Infor-mationen zu einem aktuellen Thema ausder Technischen Dokumentation.

Wischen, Tippen, Streichen, Auf- undZuziehen – was so selbstverständlich undintuitiv ist, war der Auslöser einer Revolu-tion, die auch die Technische Dokumen-tation erfasst hat.

Anleitungen werden statt auf Papierzunehmend auf mobilen Endgerätenpubliziert. In diesem Zusammenhang istvor allem der Begriff „HTML5“ in allerMunde. Doch welche Technologien ver-bergen sich hinter diesem vermeintlichenModewort? Und wo liegen derzeit dieMöglichkeiten und Grenzen von HTML5-Lösungen?

All das und noch vieles mehr rund umHTML5 lesen Sie in dieser Ausgabe unse-res Fachmagazins.

Außerdem erfahren Sie Termine undDetails unserer aktuellen kostenlosenAbendveranstaltungen zum Schwer-punktthema „Der Stand von HTML5 fürdie Technische Dokumentation – Wun-derwaffe oder Rohrkrepierer?“..

Viel Freude beim Lesen wünscht Ihnen Ihre Christine Wallin-Felkner

Bekannte Gesichter, neue Funktionen – Wechsel an der Führungsspitze bei itl

Peter Kreitmeier und Regine Ceglarek

Am 1. Januar 2014 begann nicht nur dasneue Jahr, sondern auch die Amtszeit desneuen Vorstands der itl AG. Die bisherigeVorstandsvorsitzende Christine Wallin-Felkner, die das Familienunternehmen imAugust 1982 gründete, wechselte in denAufsichtsrat und übergab die Unterneh-mensleitung an Peter Kreitmeier und Re-gine Ceglarek.Peter Kreitmeier, der neue Vorstandsvor-sitzende, ist für den GeschäftsbereichÜbersetzungen zuständig. Zuvor leitete erüber 20 Jahre die Übersetzungsabteilungvon itl und trug wesentlich zu deren Auf-und Ausbau bei. Zudem setzte er sich inenger Zusammenarbeit mit den anderenitl-Fachabteilungen für eine kontinuierli-che Optimierung der Übersetzungspro-zesse sowie eine effiziente Einbettung indie gesamte Dokumentationserstellungein.Die Abteilungsleitung übernimmt CarinaMayr, die bisher Teamleiterin in der Über-setzungsabteilung war. In dieser Funktiongehörten vor allem die Steuerung desoperativen Geschäfts mit SchwerpunktNeukundenberatung und -betreuung so-wie Key Account Management zu ihrenAufgaben. Als Leiterin der Übersetzungs-abteilung wird sie sich nun insbesondereum folgende Themen kümmern:• Internes Controlling• Strategische Weiterentwicklung der

Abteilung• Forcierung des Austauschs zwischen

den itl-Gesellschaften und Geschäfts-bereichen

Carina Mayr

Regine Ceglarek, seit 1995 bei itl, ist fürden Geschäftsbereich Technische Doku-mentation verantwortlich. Sie ist bei allenThemen rund um Modularisierung, Hand-bucherstellung in Redaktionssystemen,Terminologie, Utility-Film mit [itl]-clipsund Autorenunterstützung die richtigeAnsprechpartnerin für Sie. Dieter Gust wurde in den Aufsichtsrat deritl AG berufen. Er ist bereits seit 1986 beiitl, wo er als Prokurist und Leiter der Abtei-lung Forschung & Entwicklung tätig ist.In dieser Funktion legt er seinen Schwer-punkt auf die Themen:• Prozessautomatisierung• Kontrollierte Sprache• Nutzungsgerechte Aufbereitung von

Technischer Dokumentation• Normen- und richtlinienkonforme

Anleitungen• Technische Dokumentation auf mobi-

len MedienSeit Steve Jobs legendärer Vorstellung desiPhones im Jahr 2007 befasst sich DieterGust intensiv mit der Möglichkeit, Techni-sche Dokumentation auf mobilen Endge-räten zu präsentieren. Auch im Aufsichts-rat ist Dieter Gust weiterhin für zukünftigeTrends und neue Medien in der Techni-schen Dokumentation zuständig und ver-tritt zudem die Belange der Mitarbeiter imKontrollgremium von itl.Im Rahmen seiner F&E-Tätigkeiten entwi-ckelte er außerdem für die itl-AkademieKurz- und Vollzeit-Ausbildungskonzeptefür die Technische Dokumentation undgibt regelmäßig Schulungen für Techni-sche Redakteure.

Dieter Gust

[ i ] m Fokus: News 3

Ausgabe 16 03/14

Neue kostenlose Abendveranstaltungen: Der Stand von HTML5 für die Technische Dokumentation – Wunderwaffe oder Rohrkrepierer?Mit seiner revolutionären Vorstellung des iPhones im Jahr 2007machte Steve Jobs das mobile Medium zum neuen Standard undzu einer echten Alternative zum Papier. Doch wie sieht es in derTechnischen Dokumentation mit mobilen Medien aus?Im März und April 2014 nehmen Dieter Gust, Leitung F&E, undsein Sohn Florian Gust in München, Zürich, Stuttgart und Ham-burg den aktuellen Stand von HTML5 in der Technischen Doku-mentation genau unter die Lupe und stellen in ihrem Vortrag fol-gende Fragen zur Diskussion:• Technische Dokumentation auf Papier als teure, logistische

Herausforderung – warum diese dann nicht nur online zur Ver-fügung stellen, am besten als Doku-App?

• Verhindern zurzeit nur Rechtsanwälte das Drücken auf denInnovationsknopf, indem sie vermeintlich im Sinne der Ziel-gruppen Papier fordern?

• Ist die Zeit tatsächlich reif für mobile Medien in der Techni-schen Dokumentation?

• Kann man nur bei einer „echten“ App oder zumindest einerHTML5-Web-Anwendung von Innovation sprechen?

Bei dieser Veranstaltung gehen die beiden Referenten im Detailauf folgende Themen ein:• Die Neuerfindung der Online-Nutzung nach Steve Jobs• HTML5: Top-Features, Top-Gemeinheiten• HTML5-Video-Use-Cases: Auf den Player kommt es an• HTML5 Responsive Design• Web-App oder Hybrid-App?• Gibt es noch ein Dokuleben jenseits von HTML5?

Sie möchten erfahren, ob HTML5 tatsächlich eine Wunderwaffeoder eher ein Rohrkrepierer ist? Dann melden Sie sich am bestengleich zu einer der Veranstaltungen an:

Am 26.03.14 in München:Zur Online-Anmeldung hier klicken.

Am 02.04.14 in Zürich:Zur Online-Anmeldung hier klicken.

Am 03.04.14 in Stuttgart:Zur Online-Anmeldung hier klicken.

Am 08.04.14 in Hamburg:Zur Online-Anmeldung hier klicken.

Florian Gust und Dieter GustF&EE-Mail: florian.gust@itl.eu bzw. dieter.gust@itl.eu

itl ist nun Across-zertifizierter Sprachdienstleister

Seit Februar verfügt itl über ein weiteres wichtiges Zertifikat: Dasumfangreiche Fachwissen von itl über den effizienten Einsatz vonAcross wurde mit dem Siegel „Across certified“ bestätigt. Die Zer-tifizierung umfasst die Module Projektmanagement, Terminolo-gie, Übersetzung und Systemadministration.itl arbeitet bereits seit der ersten Version mit Across und hat we-sentlich zur Weiterentwicklung des Translation-Memory-Systemsbeigetragen.

Wir unterstützen unsere Kunden mit unserem langjährigenKnow-how nicht nur bei der Einführung von Across, sondern ste-hen ihnen auch während der gesamten Projektabwicklung alskompetenter und verlässlicher Partner zur Seite.Darüber hinaus bietet unsere Abteilung Technical Services internund extern Lösungen für alle Herausforderungen rund um denÜbersetzungsprozess und stellt gleichzeitig eine Schnittstelle mitAcross her.„Die Zertifizierung war ein wichtiger Schritt, um unsere umfas-sende Kompetenz auch nach außen transparent zu machen. Mitden erfolgreich abgeschlossenen Schulungsmodulen in den Be-reichen Projektmanagement, Terminologie, Übersetzung undSystemadministration können wir außerdem sicherstellen, dassunsere Mitarbeiter auf dem aktuellen Stand im Umgang mitAcross sind. Nur so können wir unseren Kunden optimalenService und eine reibungslose Abwicklung selbst komplexesterProjekte bieten“, bekräftigt Peter Kreitmeier, Vorstand Geschäfts-bereich Übersetzungen der itl AG.

[ i ] m Fokus: Titelthema4

Ausgabe 16 03/14

HTML5 als Basis für Technische Dokumentation auf mobilen EndgerätenDie Zukunft der Technischen Dokumentation liegt in Apps auf mobilen Endgeräten. Doch welche Technologie bildet die richtige Grundlage, um Apps für die verschiedenen Endgeräte mit unterschiedlichen Auflösungen effizient aufzubereiten? Einmal mehr versprechen HTML5 und moderne Browsertechnologien die Lösung. Doch zur Euphorie

gesellt sich auch grundsätzliche Kritik, wie etwa die von Mark Zuckerberg, Gründer und Vorstandsvorsitzender von Facebook, im Jahr 2012: „Our biggest mistake was betting too much on HTML5 as opposed to native. Because it just wasn’t there“.

Autoren: Florian und Dieter Gust, F&E

Die aktuelle App-Referenz für Technische Dokumentation nach Dieter Gust: BMW Driver’s Guide, MB Guides, MyOpel, Junkers InfoScan, Giga-set App. Außer bei der Junkers App sind die Dokumentinhalte HTML-basiert. Alle Lösungen benötigen eine native Grundprogrammierung, daMark Zuckerbergs Kritik auch 2014 zumindest für das Thema Offline/Online-Datenzugriff und weitere Spezialthemen zutrifft

HTML Help: Vorbildliches Grundkonzept auch für Doku-Apps

Microsoft HTML Help: Das UI-Konzept ist immer noch aktuell: Grund-legende Steuerungsschaltflächen, einblendbares Navigations-TOC,Inhaltsbereich, Volltextsuche, Lesezeichen (Favoriten)

HTML ist seit 15 Jahren längst ein Standardausgabeformat – auchfür die Technische Dokumentation. Neben PDF ist MicrosoftHTML Help die klassische Lösung für Onlinehilfen. Um plattform-übergreifend verwendbar zu sein, gibt es auch schon lange Me-thoden unter dem Sammelbegriff „Webhelp“. Damit wird eine zuHTML Help vergleichbare Funktionalität mithilfe von HTML undJavaScript in beliebigen HTML-Browsern auf beliebigen Plattfor-men bereitgestellt. Und der Weg von Webhelp zur mobilen Appist dank jQuery und jQuery Mobile technologisch gesehen zu-mindest vordergründig sehr überschaubar.Die Umsetzung der (Multi-)Touch-Bedienung erfolgt weitgehendautomatisch durch die jeweiligen Browser oder die sogenanntensystemintern zur Verfügung gestellten „Webviews“ (jeweils un-terschiedlich für Android, iOS und Windows).Was auf den ersten Blick wie eine unproblematische Adaption alt-bekannter HTML-Lösungen für die neue Multitouch-Welt aus-

sieht, erweist sich dann doch als „Teufel im Detail“. Das betrifftweniger die eigentliche Umsetzung des klassischen Inhalts inText- und Bildform. Während XML-Protagonisten gerne den XML-Ansatz als Bedingung des Cross-Media-Publishings (z. B. PDF undHTML) ansehen, ist praktisch „nur“ der strukturierte Ansatz nötig,wie ihn schon eine saubere formatvorlagenbasierte Dokument-gestaltung bietet. Herausforderungen lagen schon immer in derGrafikkonvertierung. Während im DTP durch RahmenfunktionenGrafiken sehr flexibel gestaltet werden können, fehlt HTML einvergleichbares Konzept. Ein HTML-Konverter muss also gegebe-nenfalls sehr intelligent das im DTP-System integrierte, skalierte,beschnittene, durch mehrere überlagernde Grafiken definierteKonstrukt in eine neue Grafik umwandeln.Wirklich neu bei mobilen Medien ist das für Finger-Touch opti-mierte Design. Zusätzlich wird ein Responsive Design benötigt,das alle Bildschirmgrößen (im Hoch- und Querformat) bis hin zumDesktop ohne Neukonvertierung dynamisch abdeckt. Dieses De-sign und auch die Touch-Optimierung werden durch sogenannteJavaScript-Frameworks und Cascading Style-Sheets (CSS2/CSS3)bereitgestellt. Das heißt, die eigentliche HTML-Konvertierungkann praktisch auch die 15 Jahre alte Lösung bereitstellen. Das möglichst automatische Verknüpfen der HTML-Dateien mitden neuen JavaScript-Frameworks ist jedoch eine der Herausfor-derungen, weil viele HTML-Konverter einen nicht wirklich wart-baren HTML- und JavaScript-Code erzeugen. Alle mobilen HTML-Browsertechnologien – auch die von Apple –sind leider „mit heißer Nadel gestrickt“. Das wird spätestens danndeutlich, wenn man beim Responsive Design von den hundertenbereitgestellten Parametern auch wirklich Gebrauch machen will,um etwa Videos im Hoch- und Querformat automatisch anzupas-

[ i ] m Fokus: Titelthema 5

Ausgabe 16 03/14

sen, Playlists dynamisch einblenden zu können und generell dievon Steve Jobs zu Recht beschworenen Feinheiten auch wirklichfehlerfrei einsetzen zu können. Diese sind z. B. folgende:• Sanftes Scrollen• Sanftes Ein- und Ausblenden von Objekten, getriggert durch

Wisch- oder Touch-Events oder durch Drehen des Geräts.Fast drei Jahre nach Steve Jobs’ Tod überrascht dann doch fol-gende Meldung über Apple, die kurz nach der Veröffentlichungvon iOS7, dem aktuellen Betriebssystem für iPads und iPhones, zulesen war: „… for the first time ever, we’re disappointed in the exe-cution of iOS software“ (Sencha-Blog Sept. 2013).

Für Apple-Fans ein neues Gefühl: Solche Vorwürfe konnte man früherallenfalls Microsoft zuordnen

Diese Meldungen stehen für „Killerkriterien“, um termin- und kos-teneffizient HTML5-Lösungen anbieten zu können. Ein weiteresBeispiel: Beim Update von Android 2.x auf 3 funktionierten keineHTML-Hyperlinks mehr in der sogenannten Android Webview, dieSonderzeichen wie # oder ? enthielten (eine wirklich typischeNutzung in Hyperlinks). Die Webview ist dabei die von Androidbereitgestellte Browser-Engine, um HTML-Inhalte in einer nativenApp darstellen zu können. Erst aufwändige Workarounds vonHTML-Enthusiasten brachten eine Lösung. Jahre später, in And-roid 4, wurde das Desaster dann auch von Google beendet.

Ein Problem der HTML5-Programmierung liegt darin, dass hinterdem Modewort HTML5 eine Vielzahl an komplexen Technologiensteckt, die insgesamt einer nativen Programmierung nicht oderwenig nachsteht. Als HTML5 wird zusätzlich das neue Verständnis in der HTML-An-wendung auf unterschiedlichen – vor allem mobilen – Endgerä-ten definiert (z. B. Stichworte wie „Mobile First“).

Eigentlich konnte man seit vielen Jahren mit JavaScript und mitHTML4 ein Mobile Design planen, denn auch JavaScript ist seitLangem in den Browsern präsent. Neu im Responsive Design istallerdings die Nutzung der Media Queries aus CSS3.

Beispiel für Media Queries

CSS3 gehört zwar zum Umfeld von HTML5, jedoch nicht zurHTML5-Spezifikation.Dennoch hat sich unter HTML5 das DOM (Dokument-Objekt-Mo-dell, die interne Repräsentation einer HTML-Seite als Baumstruk-tur) ebenfalls weiterentwickelt und bietet z. B. die Option für ei-gene, d. h. Custom-Attribute.

HTML-DOM – Document Object Model. Für die Verarbeitung derHTML-Seite im Browser erzeugt dieser eine Baumstruktur. Diese Ver-arbeitungslogik wird auch als DOM bezeichnet

Kleine Meldung – große Wirkung. Ohne aufwändigen Workaround wären alle Web-Apps plötzlich nutzlos geworden

[ i ] m Fokus: Titelthema6

Ausgabe 16 03/14

Geschichte von HTML anhand der Spezifikationen

Die folgende Tabelle offenbart dem Kenner, welcher Kampf derHTML-Entwicklung nach HTML4 die letzten zehn Jahre „hinterden Kulissen“ stattgefunden hat: Fast zehn Jahre dauerte das Rin-gen, die Gründung eines neuen HTML-Normierungsgremiums,WHATWG (the Web Hypertext Application Technology WorkingGroup) unter Federführung von Google, das Ende von XHTMLund das Zusammenraufen für die Verabschiedung einer HTML5-Spezifikation zusammen mit dem W3C, wie die Liste der Autorenzeigt. Dass jedoch Adobe nicht dabei ist, überrascht so manchen.

Eine kurze Geschichte der HTML Specs: Zeitangaben und Autoren of-fenbaren dem Kenner ein echtes Drama

HTML5 – das Modewort für viele Technologien

Der Kreis in dem Diagramm unten mit der Bezeichnung „HTML-Markup“ bildet die Basis von HTML5. Die so viel gepriesenenneuen „semantischen“ Elemente werden aktuell in HTML-Appsnicht oder kaum verwendet. Eine Ausnahme bildet das Video-Ele-ment. Das Video-Element signalisiert, dass nun kein externesPlug-in zur Videoanzeige mehr benötigt wird, die eigentlichekleine Revolution von HTML5. Die Nutzung der sensationellen Animationsfunktionen von CSS3gewöhnt man sich zunächst sehr schnell wieder ab, da CSS3 nichtBestandteil der HTML5-Normierung ist und im Test die verschie-denen Browser und Webkits keine verlässliche Nutzung erkennenlassen.Die Herausforderung liegt also im Zusammenspiel der vielen Teil-spezifikationen und Testen der hunderte von einzelnen Parame-tern/Optionen im jeweiligen Browser. So sind einerseits spekta-kuläre Demo-HTML5-Websites zu finden, die suggerieren, dassalles mit HTML5 realisierbar ist. Anderseits kämpft der HTML5-Programmierer permanent mit grundlegenden „Show-Stoppern“und „Killerkriterien“, weil bei irgendeinem Systemupdate – sei esiOS, Android oder Windows – viele der unzähligen Parameternicht getestet wurden.Eigentlich gilt als Grundlage einer sauberen HTML-Programmie-rung das Model-View-Controller-Prinzip (MVC), also die Trennungzwischen Inhalten (dargestellt durch HTML-Markup), die Präsen-tation (durch CSS) und Controller (dynamische Funktionen mitHilfe von JavaScript). Jedoch lassen sich viele Layoutaspektedurch JavaScript oder CSS3 alternativ abdecken, während die Be-deutung der Elemente durch das Klassenattribut und den DIV-Container fast obsolet geworden ist. Überhaupt scheint das Zusammenspiel aus HTML-Elementenund CSS-Dateien sehr oft „abenteuerlich“ bis „kreativ“ zu sein.FrameMaker 12 etwa nutzt bei der neuen HTML5-Konvertierungpraktisch nur das P-Element aus HTML. Überschriften und Listen-elemente werden in P-Elemente konvertiert und über das Klasse-nattribut gekennzeichnet und per CSS entsprechend formatiert.

• TML 2.0, RFC 1866, November 1995, Tim Berners Lee, Dan Connolly

• HTML 3.2, W3C Recommendation, 14 January 1997, Dave Raggett, Author

• HTML 4.01, W3C Recommendation, 24 December 1999, Dave Raggett, Arnaud Le Hors, Ian Jacobs, Editors

• XHTML 1.0, W3C Recommendation, revised 1 August 2002, Steven Pemberton, et al., Authors

• XHTML™ 1.1 – Module-based XHTML, W3C Recommendation, 31 May 2001, Murray Altheim, Shane McCarron, Editors

• XHTML Basic 1.1 – Second Edition, 23 November 2010Shane McCarron, Applied Testing and Technology, Inc.,Masayasu Ishikawa

• XHTML 1.1 – Module-based XHTML, 23 November 2010Murray Altheim, Sun Microsystems Shane McCarron,Applied Testing and Technology

• W3C: HTML5 A vocabulary and associated APIs for HTML andXHTML, W3C Candidate Recommendation 04 February 2014This Candidate Recommendation is expected to advance to Pro-posed Recommendation no earlier than 01 September 2014W3C: Robin Berjon, W3C: Steve Faulkner, The Paciello Group: Tra-vis Leithead, Microsoft: Erika Doyle Navara, Microsoft: EdwardO'Connor, Apple: Inc.Silvia Pfeiffer WHATWG: Ian Hickson,Google, Inc.

HTML5-Taxonomie der unterschiedlichen Spezifikationen, Technologien und Verantwortlichkeiten

[ i ] m Fokus: Titelthema 7

Ausgabe 16 03/14

So lässt ausgerechnet die neue HTML5-Konvertierung vonFrameMaker keine klare Zuordnung von FrameMaker-Formatenund HTML-Elementen zu, wie sie die uralte, noch immer integ-rierte HTML-Konfiguration kennt. Dass bei der Konvertierung derFormatnamen in entsprechende Klassenattribute gängige Son-derzeichen, wie z. B. der Unterstrich, auch noch einfach geändertwerden, macht den Umwandlungsprozess nach HTML fehleran-fällig. So war HTML eigentlich nicht gedacht: Reduktion auf einElement (P) und Variation per Klassenattribut. Weil HTML so flexibel ist, nutzen viele Konverter auch zusätzlichmassiv das DIV-Element (FrameMaker kann in der Konfigurationper User Interface kein DIV zuordnen). DIV steht bekanntlich für„Diverses“ und erlaubt beliebige HTML-Elemente zu klammernund nach Bedarf zu prozessieren. Beide Ansätze „Klassen- bzw.ID-Attributierung“ und „DIV-Klammerung“ machen HTML so un-glaublich flexibel und zu einem chaotisches Gesamtkonzept.

Wie uns HTML- und CSS-Anwendung gelehrt wird (Quelle: 1st Webdesigner)

Auszug aus einer CSS, die FrameMaker 12 erzeugt

HTML5-Web-Apps: Kernpunkte einer neuen User Experience

Aus Sicht eines Technischen Redakteurs liegt die eigentlich neueHerausforderung in der neuen User Experience der mobilen Apps.

Die von Steve Jobs 2007 erstmals gezeigten Multitouch-Gestenwie Wischen und Pinch-to-Zoom bilden das Zentrum der neuenUser Experience. Diese Multitouch-Gesten sind so selbstverständ-lich und intuitiv, dass vielen deren revolutionäre Wirkung auf dieNutzungsmöglichkeiten von technischen Informationen auf mo-bilen Endgeräten noch nicht klar ist. Und die Verbindung derneuen Multitouch-Gesten mit den altbekannten Nutzungsfunkti-onen einer Online-Dokumentation unter automatischer Berück-sichtigung eines Responsive Design für die so unterschiedlichenBildschirmgrößen von Smartphones, Tablets und Desktop unddazu noch die zahllosen Bugs der Desktop-Browser und HTML5-Umsetzungen in Android und iOS – all das macht die Program-mierung so abenteuerlich und Projekte leider nur schwer kalku-lierbar.Da viele Programmierer vor ähnlichen Problemen stehen, hat sichein erstaunlicher Markt für JavaScript-Bibliotheken und HTML-Templates bis hin zu kompletten Frameworks (UI-Design, Anima-tionen, Seitenlayouts) entwickelt, der Fluch und Segen zugleichist: Einerseits nehmen die Codeschnippsel dem Programmiererunter Umständen viel Arbeit ab, indem die Funktionen mit denunterschiedlichsten Browsern getestet wurden und bereits Work-arounds enthalten. Wenn ein Framework aber Fehler enthält, sinddiese noch schwieriger zu debuggen als ohne Framework. UndAnpassungen jenseits der Änderungen für Font, Farben undButtonumrandungen sind zum Teil nur schwierig oder gar nichtzu realisieren. Die folgende Grafik von Templatemonster.com zeigt am BeispielBootstrap über Pop-ups sehr schön, was ein Framework umfassenkann.

Nette „Metro-Windows 8“-Aufbereitung einer Erläuterung zum Boot-strap Framework

Seit HTML5 sind für HTML-basierte Dokumentationen zwei alter-native Ansätze zu klären: • Darstellung der gesamten Dokumentation als eine physikali-

sche HTML-Seite, die dynamisch in Topics zerlegt wird • Klassische Trennung in einzelne Topic-Seiten. Der Vorteil des

1-Seiten-Ansatzes: bessere Manipulierbarkeit des DOM ähn-lich wie bei einer nativen App-Lösung. Nachteil: erstmalig län-gere Ladezeit und Updates von Einzelinformationen sind sonicht möglich. itl empfiehlt zurzeit die Zerlegung einer Doku-mentation in topic-orientierte HTML-Seiten.

Als Anregung zu diesem Thema siehe z. B. Sitepoint-Thread „Mul-tipage, Single Page or Hybrid AJAX Application“.

[ i ] m Fokus: Titelthema8

Ausgabe 16 03/14

Usability-Funktionen für eine Technische Dokumentation umgesetzt als mobile Web-App

Die folgende Tabelle stellt die typischen Usability-Funktionenden jeweiligen möglichen Frameworks und Standardfunktions-bibliotheken gegenüber.

Wichtige Funktionenfür Usability

Bemerkungen Lösung

• Volltextsuche• Highlighting für

Suchworte• Viele weiter Opti-

onen denkbar und sinnvoll

• Es gibt Open Source-JavaScript-Beispiele. Siehe GitHub

• Prozess zum Erzeu-gen des Volltext-Indexes nötig, wenn nicht vom HTML-Konverter bereitgestellt

• Die FrameMaker HTML5-Konverter-lösung umfasst auch eine Volltext-suche. Gleiches gilt für Webworks ePublisher

• Umfassende itl-eigene Lösung

• Live-Filter für Listen • Sofortige Wirkung bei Eingeben eines Buchstabens

• jQuery Mobile• Bootstrap• itl-eigene Lösung

• Pinch-to-Zoom • Gesamte Seite (Browser-intern: Viewport setzen und Zoom erlau-ben)

• Nur Text mit Text-umbruch

• Nur Text ohne Text-umbruch

• In Lösungen sehr oft automatisch unterbunden, was schlecht ist

• Ansonsten: indivi-duelles JavaScript

• Opera Mobile Browser erlaubt Textumbruch als Option

• Navigations-TOC• Hierarchien ein-/

ausklappbar• …

• Es sind viele Optio-nen denkbar, insbe-sondere im Sinne eines gut nutzba-ren Responsive Designs

• HTML-Processing zur Erzeugung des TOCs nötig (in der Regel Bestandteil von HTML-Konver-tern)

• Für statische List-items Standard-Plug-ins vorhan-den, z. B. in jQuery Mobile

• Mini-TOCs • Standard HTML- Links

• Funktionalität muss in Autorenumge-bung definiert sein (z. B. Doc-TOC für FrameMaker itl [i]-frame)

• Dynamischer Scroll-Top-Button

• Bei langen HTML-Seiten, z. B. Rück-sprung zum Anfang

• Zahlreiche Stan-dard-Plug-ins, z. T. fehlerhaft

• Slide-Logik (Off-Canvas)

• Verschiedene Ansätze denkbar

• Basierend auf jQuery-Events

• Existierende Plug-ins sehr fehlerhaft

• jQuery Mobile• itl-eigene Lösung

• Bild-Sequenzen• Video-Sequenzen• Untertitel

• Bild-/Videofolgen per Wischgesten oder Thumbnail-Playlist abrufbar

• CuePoints in Videos (Zeitliche Sprung-marken)

• Bisher seitens der Dokument-Edito-ren nur unzurei-chend gelöst (bester Ansatz InDesign)

• Zahlreiche Plug-ins (Slider/Carousel-Lösungen, z. B. Bootstrap: In Verbindung mit einem Responsive Design z. T. fehler-haft

• itl-eigene Lösung

• 3D-Animationen • Bisher nicht wirk-lich effizient umsetzbar

• Pseudo-3D „für visuelle Naviga-tion“

• Echtes 3D leider noch weitgehend ungelöst in HTML5

• Pseudo 3D: jQuery-reel-Plug-in,zahlreiche kosten-pflichtige Plug-insAnsonsten: manu-elle Handarbeit

• Buttons• Home • Zurück• Exit aus Anwen-

dung• Suche usw.

• Grundlegendes UI-Design

• Standard Browser „Zurück“ bei 1-Sei-tenansatz nicht ohne Weiteres nutzbar

• Unklares Konzept, da gerätebezogen unterschiedlich umgesetzt

• Optional basierend auf jQuery Mobile UI-Designs

• Breadcrumbs • Funktionalität durch Konverter zu definieren oder HTML-Postproces-sing

• In der Regel HTML-Konverterlösung

• itl-eigene Lösung

• Browse Sequence • Funktionalität durch Konverter zu definieren oder HTML-Postproces-sing

• In der Regel HTML-Konverterlösung

• itl-eigene Lösung

• Dynamic HTML Drop-Down/Expan-dable Areas

• Früher unter Dyna-mic HTML bekannt

• In der Regel HTML-Konverterlösung

• Bootstrap• jQuery Mobile

• Bookmarks/Lese-zeichen

• Lokale Speicherung nötig

• itl-Entwicklung• Diverse Open

Source Plug-ins ver-fügbar

• Logistik: Download, Dokumente, Videos, Animatio-nen getrennt

• In HTML alleine nicht realisierbar (Offline Cache, kein ausgereifter Use Case)

• In Verbindung mit webserverbasier-ten Ansätzen und nativer Program-mierung

Wichtige Funktionenfür Usability

Bemerkungen Lösung

[ i ] m Fokus: Titelthema 9

Ausgabe 16 03/14

. Frameworks,Funktions-bibliotheken

Bemerkungen Lösung

• jQuery • Freie JavaScript-Bibliothek, die Funktionen zur DOM-Navigation und -Manipulation bereitstellt

• Nahezu alle mobi-len Lösungen nut-zen jQuery

• jQuery 1.x (für Unterstützung älte-rer Browser)

• jQuery 2.x setzt auf Zugriffe auf DOM-Knoten der moder-nen Web-Browser auf

• jQuery Mobile • Setzt auf jQuery auf• Touch-optimiertes

Web-Framework (HTML-Templates, CSS-Designs, JavaScripts)

• Entwickelt sich mehr und mehr zum De-facto-Stan-dard. Hauptkritik: Auf mobilen Gerä-ten zum Teil spür-bare Performance-Probleme

• Bootstrap • Baut auf jQuery auf• Inzwischen

bekanntestes Framework neben jQuery Mobile

• Ursprünglich Desk-top-optimiert

• Wird in der HTML5-Lösung von Schema ST4 umge-setzt

• HTML5-Lösung für Typo3

• Boilerplate/Initializr

• Weniger umfas-send als Bootstrap nutzt aber optional Bootstrap-Kompo-nenten

• Konfigurierbares Baukastensystem

• Normalize.css • Berücksichtigt mehr als ein reines „reset.css“

• Dient zur gleichen Grunddarstellung von HTML-Elemen-ten in jedem Brow-ser

• Respond.js • Ermöglicht die Nut-zung von Media Queries auch für alte Browser

• itl-eigene Lösung nutzt respsond.js

• UI Icon Fonts: Font Awesome

• Anstelle von PNG-Grafiken, um unter-schiedliche Bild-schirmgrößen optimal abzude-cken

• Font Awesome: The iconic font desig-ned for Bootstrap

• itl-eigene Lösung nutzt Font Awe-some

Frameworks,Funktions-bibliotheken

Bemerkungen Lösung

[ i ] m Fokus: Titelthema10

Ausgabe 16 03/14

Das Rad nicht neu erfinden: Templates, Bibliotheken, Frameworks – oder doch alles neu machen?

itl beschäftigt sich seit knapp 2 Jahren mit HTML5-Lösungen undhat dabei die bekannten JavaScript-Frameworks und HTML-Tem-plate-Konzepte näher betrachtet. Bisher konnten wir uns noch zu keinem der bekannten Frame-works als Basis durchringen, das uns für nahezu alle Anforderun-gen als geeignet erscheint. Allerdings ist jQuery immer und beiallen dabei.Neben den großen Frameworks gibt es inzwischen zahllose zu-sätzliche JavaScript-Funktionen, die sich zum Teil als Plug-ins zuden Frameworks gesellen. Überschaubar kann man die aktuelleSituation schon lange nicht mehr nennen und moderne, effizi-ente HTML-Entwicklungen sind letztlich auch immer wieder vonkleinen, manchmal auch großen Code-Juwelen abhängig, dieplötzlich im Internet bekannt werden.Als grundsätzliche webbasierte Unterstützungswerkzeuge emp-fehlen wir außerdem filterbare Unterstützungstabellen fürHTML5, CSS und JavaScript in den jeweiligen Browsern, wie bei-spielsweise: http://caniuse.com oder http://html5please.com/

Zum Lernen viel gescholten, von uns sehr gelobt wird folgendeWebsite: www.w3schools.com/

Florian Gust und Dieter GustF&EE-Mail: florian.gust@itl.eu und dieter.gust@itl.eu

[ i ] m Fokus: Einblick & Ausblick 11

Ausgabe 16 03/14

itl-Termine

Gratis, aber nicht umsonst

Die itl-Abendveranstaltungen

Der Stand von HTML5 für die Technische Dokumentation: Wunderwaffe oder Rohrkrepierer?Das F&E-Team Dieter und Florian Gust stellt die Frage nach HTML5 für die Technische Dokumentation.

Hier anmelden für den Termin am 26.03.14 in München

Hier anmelden für den Termin am 02.04.14 in Zürich

Hier anmelden für den Termin am 03.04.14 in Stuttgart

Hier anmelden für den Termin am 08.04.14 in Hamburg

Was ist neu bei MS Word 2013?Seit einiger Zeit ist die 15. Version von MS Word auf dem Markt. Die runderneuerte Software bietet viele neue Funktionen. Ulrike Hatzl, Microsoft Office Specialist Expert, führt durch die neuen Funktionen und betrachtet diese mit den kritischen Augen einer erfahrenen technischen Redakteurin.

Hier anmelden für den Termin am 25.03.14 in Graz

Hier anmelden für den Termin am 27.03.14 in Wien

Die Veranstaltungsreihe itl & friends

itl meets Adobe Systems: Mobile Dokumentation in der Praxis angekommenEine hochkarätige Runde thematisiert die aktuelle Diskussion rund um Technische Dokumentation auf mobilen Medien: Lösungen von Adobe und Erfahrungen des Full-Service-Dienstleisters itl.

Hier anmelden für den Termin am 06.05.14 in Wien

Hier anmelden für den Termin am 07.05.14 in Linz

itl-Seminare

3-tägiges Kompaktseminar Technische DokumentationSeit 30 Jahren bietet itl Seminare, Trainings und Workshops im Bereich Technische Dokumentation an. Ein regelrechter Klassiker ist das „Kompaktseminar Technische Dokumentation“.

Hier anmelden für den Termin am 28.-30.04.14 in München

Hier anmelden für den Termin am 21.-23.05.14 in Wien

Hier anmelden für den Termin am 08.-10.07.14 in Kreuzlingen

Hier anmelden für den Termin am 09.-11.09.14 in Hamburg

Textarme Dokumentation – zielgruppenorientiert und kostensparend mit Bildern arbeitenEs scheint so einfach zu sein – doch das Anleiten allein mit Bildern stellt uns vor große Herausforderungen. In diesem 2-tägigen Seminar lernen Sie die wichtigsten theoretischen Grundlagen zum Anleiten mit Bildern und üben deren Umsetzung in der Praxis.

Hier anmelden für den Termin am 14.-15.05.14 in Kreuzlingen

Tagungen

DTT-Symposion 2014 – Terminologietagung mit Vortrag von Ulrich Schmidt28.-29.03.14 Mannheim

tekom-Frühjahrstagung – Besuchen Sie uns an unserem Stand 1810.-11.04.14 Augsburg

[ i ] m Fokus: Einblick & Ausblick12

Ausgabe 16 03/14

Berichte aus den Niederlassungen

Neue Mitarbeiter in Deutschland, neue Domain in Österreich

Wir freuen uns, Anita Dedat als neue Mit-arbeiterin begrüßen zu dürfen. Sie unter-stützt seit 1. März 2014 die technische Re-daktion in Stuttgart.Auch in München gab es personellen Zu-wachs: Ming Ren verstärkt ebenfalls seit1. März 2014 die Übersetzungsabteilungim Rahmen eines Praktikums.

Seit 17. Februar 2014 ist die österreichi-sche Tochtergesellschaft itl Institut fürtechnische Literatur GmbH rechtmäßigerInhaber der Domain www.itl.at. Der Inha-berwechsel wurde durch das Domain-Zer-tifikat von nic.at bestätigt und die Websiteist bereits umgezogen. Im Web ist itl nunüber die Länderadressen www.itl.de,www.itl.ch, www.itl.eu und www.itl.at er-reichbar. Die itl-Mitarbeiter in Österreichkönnen ab sofort zusätzlich zur bisherigenE-Mail-Adresse mit der Endung „.eu“ auchkontaktiert werden über die Adresse„<vorname>.<nachname>@itl.at“.

WANTED: Technischer Redakteur (m/w) in Stuttgart

Sie haben einen Abschluss als TechnischerRedakteur (m/w) oder mehrjährige Be-rufserfahrung als Quereinsteiger und sehrgute Deutschkenntnisse?Außerdem verfügen Sie über Rechts-, Nor-men- und Richtliniensicherheit in den o. g.Branchen (z. B. Richtlinien für Maschinen,Druckgeräte und ATEX)? Sie arbeiten zudem selbständig und sindbereit, fundiertes Wissen über elektroni-sche Produkte zu erwerben?Dann sind Sie vielleicht genau der richtigeKandidat oder die richtige Kandidatin für

unsere offene Stelle in der TechnischenRedaktion in Stuttgart.Mit über 30 Jahren Markterfahrung ist itleiner der führenden Dienstleister für Tech-nische Dokumentation und Übersetzungim deutschsprachigen Raum.Wir bieten Ihnen:• ein interessantes und vielfältiges Auf-

gabengebiet,• ein tolles Betriebsklima mit flachen

Hierarchien in einem motivierten undinnovativen Team,

• ein leistungsbezogenes Einkommen,• flexible Arbeitszeiten und vieles mehr.Profitieren Sie davon und wachsen Sie mituns. Interessiert? Weitere Infos zu Ihrem opti-malen Profil und unserem Jobangebot fin-den Sie unter: www.itl.eu/de/unternehmen/jobs/techni-scher-redakteur-stuttgart.html Oder melden Sie sich gleich direkt bei uns:Erik Hermann, PersonalleitungE-Mail-Adresse: karriere@itl.eu

Wussten Sie schon …… dass itl einen Bürohund namens Berniehat? Sie möchten mehr darüber erfahren?Dann sehen Sie sich das Video über Bernieauf YouTube oder Facebook an.In Kürze stellen wir Ihnen im Rahmen un-serer neuen YouTube-Reihe „Wir bei itl“auch einige 2-beinige itl-Mitarbeiter vor.

… dass auch im mobilen Zeitalter vonSmartphones die Hälfte der Weltbevölke-rung noch nie telefoniert hat? Das erste kommerziell vertriebene Mobil-telefon der Welt, das Motorola DynaTAC8000 X aus dem Jahr 1983, war übrigensnoch 33 cm lang und 800 g schwer. DasiPhone 5 S z. B. wiegt im Vergleich dazu le-diglich 112 g und weist eine Höhe von123,8 mm auf.

itl – Ihr Full-Service-Dienstleister Übersetzung Technische Dokumentation Produkt- & Prozesslösungen Schulung & Beratung

ImpressumHerausgeber

itl Institut für technische Literatur AG, Elsenheimerstraße 65,80687 Müncheninfo@itl.eu

Standorte

itl AG (Zentrale Deutschland)Elsenheimerstraße 65D-80687 München+49 89 8926 23-0www.itl.eu

itl AG (Niederlassung Stuttgart)Silberburgstraße 126D-70176 Stuttgart+49 89 8926 23-425

itl Technologiezentrum GmbH(Cottbus)Hubertstraße 24D-03044 Cottbus+49 355 2889590

itl GmbH (Zentrale Österreich)Lerchenfelder Gürtel 43A-1160 Wien+43 1 4020523-0 www.itl.at

itl GmbH (Niederlassung Linz)Ziegelweg 1A-4481 Asten+43 7224 65729-0

itl AG (Zentrale Schweiz)Hafenstrasse 50 BCH-8280 Kreuzlingen+41 71 6 778050www.itl.ch

Nachdruck, auch auszugsweise, nur mit Genehmigung des Herausgebers. Copy-right 2014. Alle Rechte vorbehalten.