Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
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