closs tekom 20130411.ppt...
TRANSCRIPT
![Page 1: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/1.jpg)
Mobile Doku mit altbekannten Werkzeugen
® Prof. Sissi Closs
![Page 2: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/2.jpg)
Mobile Doku?
® Prof. Sissi Closs
Mobile Doku?Ein neues Buzz-Wort. Dazu später noch der neue tekom Leitfaden.
![Page 3: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/3.jpg)
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
![Page 4: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/4.jpg)
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
![Page 5: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/5.jpg)
<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
![Page 6: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/6.jpg)
Text-to-Speech
YouTube embedded
Geolocation (GPS)
Google Maps
… weitere schöne Funktionen
® Prof. Sissi Closs
Google Maps
Kamera
…
![Page 7: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/7.jpg)
HTML5
CSS3
JavaScript, vordefinitierte Bibliotheken, insbesondere:
jQuery Mobile
Mobile Doku: Basis-Technik
® Prof. Sissi Closs
jQTouch
![Page 8: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/8.jpg)
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
![Page 9: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/9.jpg)
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
![Page 10: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/10.jpg)
jQuery Mobile: Rahmen
® Prof. Sissi Closs
![Page 11: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/11.jpg)
jQuery Mobile: Navigation
® Prof. Sissi Closs
![Page 12: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/12.jpg)
jQuery Mobile: Video + Geolocation
® Prof. Sissi Closs
![Page 13: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/13.jpg)
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"
![Page 14: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/14.jpg)
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 …
![Page 15: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/15.jpg)
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/
![Page 16: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/16.jpg)
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
![Page 17: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/17.jpg)
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
![Page 18: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/18.jpg)
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
![Page 19: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/19.jpg)
RoboHelp: Geräteprofil auswählen/ definieren
® Prof. Sissi Closs
![Page 20: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/20.jpg)
RoboHelp: Screen Layout konfigurieren
® Prof. Sissi Closs
![Page 21: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/21.jpg)
RoboHelp: Ausgabe generieren
® Prof. Sissi Closs
![Page 22: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/22.jpg)
Neu EPUBWeb-App
Author-it – Mobile AusgabenMasterthesis: Stefan Hirn
® Prof. Sissi Closs
Entwickelt für Version 5.5 Einfache Integrierung in Version 6
![Page 23: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/23.jpg)
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
![Page 24: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/24.jpg)
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
![Page 25: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/25.jpg)
4M: Beispiel Kaffeemaschine
® Prof. Sissi Closs
![Page 26: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/26.jpg)
4M: Processs Editor – Abläufe
® Prof. Sissi Closs
![Page 27: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/27.jpg)
4M: Processs Editor – Verzweigungen
® Prof. Sissi Closs
![Page 28: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/28.jpg)
4M: Processs Editor – Inhalte
® Prof. Sissi Closs
![Page 29: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/29.jpg)
4M: Templates
® Prof. Sissi Closs
![Page 30: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/30.jpg)
Wiki
® Prof. Sissi Closs
![Page 31: closs tekom 20130411.ppt [Kompatibilitätsmodus]ctopic.de/wp-content/uploads/2013/04/closs_tekom_20130411.pdfTouch-optimiertes Web Framework für Smartphones und Tablets speziell für](https://reader030.vdocuments.net/reader030/viewer/2022011919/6011f090d21cc62fe60bc12e/html5/thumbnails/31.jpg)
Wiki
® Prof. Sissi Closs