Mobile Doku mit altbekannten Werkzeugen

® Prof. Sissi Closs

Mobile Doku?

® Prof. Sissi Closs

Mobile Doku?Ein neues Buzz-Wort. Dazu später noch der neue tekom Leitfaden.

Darstellung passt sich nicht an (responsive design)

Warum keine klassische Web-Help/Seite am mobilen Gerät?

kein schönes Bedienerlebnis (user experience)

Gerätefunktionen werden nicht genutzt

® Prof. Sissi Closs

Gerätefunktionen werden nicht genutzt

seit 2004 von der Arbeitsgruppe WHATWG (Apple, Google, Opera, Modzilla, Microsoft, …)

Responsive Design: individuelles Layout für Gerät Medienabfragen, mit denen passendes Layout ausgewählt wird, z. B. http://mashable.com/

W3C Verabschiedung geplant 2014

HTML5

® Prof. Sissi Closs

W3C Verabschiedung geplant 2014

viele Lernquellen, z.B.

http://www.w3schools.com/html5/

http://webkompetenz.wikidot.com/docs:html-handbuch

<canvas> für 2D-Grafik

<video> und <audio>

<article>, <footer>, <header>, <nav>, <section>

calendar, date, time, email, url, search

HTML5 - wichtige Elemente

® Prof. Sissi Closs

calendar, date, time, email, url, search

Text-to-Speech

YouTube embedded

Geolocation (GPS)

Google Maps

… weitere schöne Funktionen

® Prof. Sissi Closs

Google Maps

Kamera

…

HTML5

CSS3

JavaScript, vordefinitierte Bibliotheken, insbesondere:

jQuery Mobile

Mobile Doku: Basis-Technik

® Prof. Sissi Closs

jQTouch

Touch-optimiertes Web Framework für Smartphones und Tablets

speziell für mobile Geräte basierend auf jQuery Javascript und CSS(3)

jQuery Mobile

® Prof. Sissi Closs

Javascript und CSS(3) mehrere Templates zur Auswahl viele mobile Funktionen und Elemente out-of-the-box setzt HTML5 data Attribute ein, um Infos zu

transportieren

data-role

data-theme

Inhalt = Reihe von Seitendata-role="page" aufgeteilt in:

jQuery Mobile: Steuerung über data-Attribute

® Prof. Sissi Closs

optional headercontent

optional footer

jQuery Mobile: Rahmen

® Prof. Sissi Closs

jQuery Mobile: Navigation

® Prof. Sissi Closs

jQuery Mobile: Video + Geolocation

® Prof. Sissi Closs

jQuery Mobile: Links und Übergänge

mit Ajax (außer bei externen Seiten: same origin policy)

data-transition="slide" "pop"

® Prof. Sissi Closs

p p"fade""flip"

nach Machart Web App Native App Hybride App

nach Anbindungstandalone

Mobile Doku: wir unterscheiden

® Prof. Sissi Closs

standalone integriert ins Produkt (kontextsensitiv)

nach Zweck und Inhaltsart als Hilfe zur Info zum Lernen …

TouchDevelop Microsoft https://www.touchdevelop.com/

AppMakr: Apps auf Basis von RSS-Feeds zusammenzustellenhttp://www.appmakr.com/

App-Entwicklung ohne Programmierung

® Prof. Sissi Closs

http://www.appmakr.com/

Mobile Apps visuell entwickeln MobiFlex/viziappshttp://www.viziapps.com/

Erstellungsseite: optimaler Ansatz für Inhalte

Aufteilung des Inhalts in Topics (Bausteine)

Topics über Links miteinander verbinden

aus Topics ein Inhaltsgebilde zusammenstellen

idealerweise in DITA

® Prof. Sissi Closs

idealerweise in DITA

Klassische Online-Autorenwerkzeuge Flare RoboHelp …

Klassische Autorenwerzeuge mit Add-Ons FrameMaker + DITA-OT

FrameMaker + ePublisher

Welche Doku-Werkzeuge?

® Prof. Sissi Closs

FrameMaker + ePublisher

CMS+erweitere Ausgabe Author-it

Wiki Customized MediaWiki

Dedizierte Werkzeuge 4M

Schritt 1: Projekt einrichten Schritt 2: Topics erstellen Schritt 3: Dokument zusammenstellen Schritt 4: Ausgabe vorbereiten Schritt 5: Ausgabe generieren

Topicbasierte Produktion

® Prof. Sissi Closs

Schritt 5: Ausgabe generieren

RoboHelp: Geräteprofil auswählen/ definieren

® Prof. Sissi Closs

RoboHelp: Screen Layout konfigurieren

® Prof. Sissi Closs

RoboHelp: Ausgabe generieren

® Prof. Sissi Closs

Neu EPUBWeb-App

Author-it – Mobile AusgabenMasterthesis: Stefan Hirn

® Prof. Sissi Closs

Entwickelt für Version 5.5 Einfache Integrierung in Version 6

Wichtigste Anpassung: Pro Ausgabe ein Publikationsprofil mit After-Publish-Prozessen Batch-Dateien XSL-Skripte

Author-it – Umsetzung Mobiler AusgabenMasterthesis: Stefan Hirn

EPUB

® Prof. Sissi Closs

Web-App

Was ist zu tun: Web-App Generierung Inhaltsverzeichnis Generierung Inhalte Individuelle Inhaltsanpassung Suchfunktion

Author-it – Umsetzung mobiler AusgabenMasterthesis: Stefan Hirn

® Prof. Sissi Closs

Besonderheiten Web-App Cache Manifest XSL-Skripte gültig für Sample-Datenbank; schnelle Anpassung an

eigene Datenbank möglich

4M: Beispiel Kaffeemaschine

® Prof. Sissi Closs

4M: Processs Editor – Abläufe

® Prof. Sissi Closs

4M: Processs Editor – Verzweigungen

® Prof. Sissi Closs

4M: Processs Editor – Inhalte

® Prof. Sissi Closs

4M: Templates

® Prof. Sissi Closs

Wiki

® Prof. Sissi Closs

Wiki

® Prof. Sissi Closs

Vielen Dank

® Prof. Sissi Closs

closs@ctopic.decloss@ctopic.de