Multimediale und mobile Dokumentation erstellen! tekom - München Prof. Dipl.-Ing. Martin Schober

Transkript

1 Multimediale und mobile Dokumentation erstellen!

2 Unterstützung aller Geräte und Betriebssysteme, ohne den SingleSource-Ansatz aufzugeben!

3 Alle App Stores im Überblick: itunes App Store Programmiersprache: Objective C Entwickleraccount: 99 USD jährlich Auszahlung für Appanbieter: 70% Windows Mobile Marketplace Programmiersprache: C,C++,C#,.NET Entwickleraccount: 99 USD für 5 Apps, dann 99USD pro App Auszahlung für Appanbieter: 70% Google Android Market Programmiersprache: Java Entwickleraccount: 25 USD einmalig Auszahlung für Appanbieter: 70% Palm App Catalog Programmiersprache: Mojo Entwickleraccount: 99 USD jährlich plus pro App 50 USD Auszahlung für Appanbieter: 70% Blackberry (Rim) App World Programmiersprache: Java Entwickleraccount: 200 USD pro 10 Apps Auszahlung für Appanbieter: 80% Nokia Ovi Programmiersprache: Java Entwickleraccount: 50 USD einmalig Auszahlung für Appanbieter: 70% Die Zukunft liegt eindeutig in der Entwicklung von Web Apps (HTML5, CSS3, Javascript, Frameworks ) und dem Vertrieb über viele verschiedene Stores bzw. direkt über das Web und unabhängige App Stores.

4 Marktanteile der Betriebssysteme mobiler Geräte

5 Marktanteile der Betriebssysteme mobiler Geräte

6 Mobile Endgeräte sind die Technologietreiber Welche Technologien, welche Unternehmen setzten sich langfristig durch? Android (Google) Windows 8 mobile iox (Apple) Größter Zugewinn an Marktanteilen liegt derzeit bei Android

7 Mobile Dokumentation + WCMS Mobile Dokumentationserstellung kann in zwei generelle Vorgehensweisen unterteilt werden. Die erste Vorgehensweise ist die Erstellung von Apps, mit denen die Dokumentation zur Verfügung gestellt wird. Die zweite Vorgehensweise ist die Erstellung und Bereitstellung von Dokumentation durch Anwendungen wie Contentmanagement-Systeme oder Editoren. In diesem Falle werden die Informationen als Websites, epup-format oder PDF-Dateien bereitgestellt. Die für mobile Geräte optimale Bereitstellung von Informationen durch Contentmanagement-Systeme wird durch den Einsatz CSS3 und Templates, die ein spezielles Design für mobile Geräte zur Verfügung stellen, ermöglicht.

8 Mobile Dokumentation / Apps Die Erstellung von Mobiler Dokumentation in Apps hängt davon ab, welche Klasse von Apps erstellt werden soll. Hierbei kann zwischen drei Varianten unterschieden werden: - Die native App - Die Web App - Die hybride App Je nach App-Klasse gibt es einen unterschiedlichen Erstellungsprozess und unterschiedliche Gerätenutzungsmöglichkeiten. Die App-Klassen wirken sich stark auf die Erstellungskosten aus. Bei nativen Apps sind die Programmierkosten höher als bei Web Apps und es sind eventuell Varianten für die unterschiedlichen Betriebssysteme (ios, Android, Windows, etc...) zu erstellen und zu pflegen. Bei Web Apps und hybriden Apps hingegen sind die technischen Möglichkeiten bei der Gerätenutzung geringer als bei nativen Apps. Sie sind jedoch im Erstellungsprozess und im Pflegeprozess kostengünstiger.

9 App-Klassen Vergleich von Nativen-, Web- und Hybriden-Apps

10 App-Klassen

11 Entwicklungszeiten der App-Klassen

12 Web App vs. native App Web Wichtige Entscheidungskriterien Marketing Native Kosten Native Funktionen Offline Daten Entwicklung Gebrauch Freiheit beim Veröffentlichen Bedienoberfläche

13 Frameworks erzeugen aus HTML5 Hybride Apps Phonegap (Adobe Cordova) ist ein Open Source Framework, um schnell und kostengünstig cross-plattform mobile Apps (hybride Apps) zu erstellen. Der Quellcode wird mit HTML5, JavaScript und CSS erstellt. Quelle:

14 Weitere Frameworks Sencha Touch 2.0, titanium und MoSync für App-Entwickler Mit diesen Frameworks lassen sich Webapplikationen erstellen, die unter ios und Android im Browser laufen. Zusätzlich ist es möglich, ähnlich wie bei Phonegap, Hybride Apps zu generieren, die wie native Apps installierbar sind und als natives Paket in den App Store gestellt werden können. Sencha Touch 2.0 steht für Open-Source-Projekte quelloffen unter der GPLv3 zum Download zur Verfügung. Alternativ stehen weitere Lizenzoptionen für eine kommerzielle Verwendung und den Einsatz in Embedded-Umgebungen zur Auswahl.

15 Hybride App vs. native App Hybride Wichtige Entscheidungskriterien Marketing Native Kosten Native Funktionen Offline Daten Entwicklung Gebrauch Freiheit beim Veröffentlichen Bedienoberfläche

16 Was bringt HTML5 für die Technische Doku?

17 HTML5 - Basistechnologien HTML5 = + neue Tags + neue Styles +neue JS-Methoden

18 Webtechnologien um HTML5 Quelle: Peter Kröner,

19 Unterstützung von HTML5 Quelle: html5readiness.com

20 Interessante HTML5-Neuerungen für die TD HTML5 wird von einer Arbeitsgruppe (Microsoft, Apple, Mozilla, Opera und Adobe) betrieben und vom W3C toleriert und anerkannt. Neuerungen von HTML5, die sich für die Technische Dokumentation eignen: Native Unterstützung von Audio- und Videodateien. Canvas: Grafiken mit JavaScripts erstellen und animieren. SVG kann über ein <svg>-tag einfach eingebunden werden. (Neue Animationsbibliothek snap.svg) Native 3D-Unterstützung mit WebGL (Mozilla, Google, AMD, Nvidia, ).

21 HTML5 - Tools & Technologien? Adobe Edge HTML5/JS/CSS animation/interaction tool - Less Framework CSS grid system/layout - Less alternative CSS syntax supports OO-like syntax referenced by Google at Google IO used in many projects - Saas another alternative CSS syntax similar to Less - Kendo UI Framework (mobile coming soon) - Sencha multiple products including Sencha Touch, Charts, etc. JQuery UI - JQuery (core) - JQuery Mobile - xui -minimalist JQuery-like framework - zepto.js minimalist JQuery-like framework - Backbone.js MVC framework for JavaScript - Underscore.js Kitchen-sink utilities for JavaScript - Modernizr JavaScript library to detect device features very popular - cubiq.org home of iscroll, a very popular scroll/list lib - appmobi web-based dev with emulation, etc. Also has an HTML5-framework - LeviRoutes - lightweight routes framework for hooking in to HTML5 history - Mustache logic-less templates mentioned by Google presenters at Google IO - Midori JavaScript framework JQuery-like with some unique features - Knockout.js JavaScript UI framework implements MVVM pattern recommended by Greg s brother popular - AngularJS MVC framework, two-way data binding, JQuery-compatible - JSFiddle online tool for doing lint/tidy/debugging - HighCharts fantastic looking charts - ZingCharts HTML5/SVG/VML and Flash charts - AMCharts JavaScript/HTML5-based charts. They also offer Flash-based charts. - HTML5 Boiler Plate assist with cross-browser issues and other utils - Bootstrap, from Twitter - Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. Popcorn.js HTML5/JS Media Framework - Three.js JavaScript 3D engine - and PhoneGap PhoneGap Plugins - Require.js - RequireJS is a JavaScript file and module loader Brunch A lightweight approach to building HTML5 applications with emphasis on elegance and simplicity.

22 Es gibt viele Möglichkeiten, HTML5 zu erzeugen 1. Editoren (Dreamweaver, notepad++,..); 2. Animationswerkzeuge wie Sencha Animator exportiert HTML5; 3. Tumult Hype ein reines Mac-Tool, um HTML5 zu erstellen; 4. Adobe Edge exportiert HTML5; 5. Adobe Flash 6 Export von HTML5 mittels Framework createjs; 6. Adobe Captivate 6 HTML5-Konvertierung, HTML5-Export 7. JavaScript Frameworks;

23 It s only (Rock n Roll) JavaScript, but I like it! Dreamweaver, Notepad++,

24 Sencha Animator Erstellt Web-Animationen auf Basis von CSS3; animiert Text sowie Bilder mit sanften Übergängen und erstellt Knöpfe mit Rundungen; unterstützt außer WebKit auch Browser von Mozilla. $ 199

25 Hype Hype" ist ein HTML5-Animations-Tool für Mac OS X, mit dem sich interaktive Websites in HTML5 realisieren lassen. There are no plans for a windows version yet. 40

26 Adobe Edge Edge ist Adobes Reaktion auf die wachsende Bedeutung von HTML5, JavaScript insbesondere jquery und CSS im Bereich der Web-Techniken.

27 HTML5-Export mit Adobe Captivate 6 möglich Sind die Dateien einmal in HTML5 konvertiert, können sie mit jedem Editor weiterbearbeitet werden.

28 Adobe Flash 6 wiederbelebt durch createjs Für die Aufbereitung im HTML5-Format, bietet Adobe eine kostenlose Erweiterung für Adobe Flash Professional CS6: das Toolkit für CreateJS. Mit diesem Toolkit können die Animations- und Zeichenwerkzeuge von Flash bei der Entwicklung von HTML5-Inhalten genutzt werden. + = Source

29 jquery Framework Ein Framework ist eine Erweiterung einer Programmiersprache. Das jquery Framework ist eine Erweiterung von JavaScript. Außer dem jquery Framework gibt es noch viele weitere JS-Frameworks, z.b.: Dojo Ext JS Prototype scripta.culo.us jquery ist das Framework, um Elemente zu finden, Elemente zu manipulieren, Inhalte einzufügen (AJAX), Bestandteile einer Seite zu animieren, Event Handling durchzuführen

30 Multimedia Dokumentation mit jquery $("#Elektromotor").mouseover( function() { $(this).css('cursor','pointer'); $("#" + this.id + "text").show(800); $("#" + this.id + "text").html(begriff[0]); }); $("#Abtriebswelle").mouseover( function() { $(this).css('cursor','pointer'); $("#" + this.id + "text").show(800); $("#" + this.id + "text").html(begriff[1]); }); $("#Elektromotor, #Abtriebswelle").mouseout( function() { $(this).css('cursor','auto'); $("#" + this.id + "text").hide(1500);

31 Ein kleines E-Learning-Programm mit jquery Drag & drop mit jquery Source

32 HTML5 schnell und einfach nutzen mit dem Video-Tag 3D-CAD-Daten Videokamera Screengrabber Animation Rendering Video Video Video

33 Videoformate für HTML5 HTML5 - Safari-Browser, Google Chrome benötigen mp4-dateien HTML5 Firefox, Internet Explorer benötigen ogg-dateien HTML5 Google + On2 forcieren das WebM-Format (*.webm) Einige Videokonverter VLC media player (*.ogg, *.mp4, *.webm ) Xmedia Recode (*.mp4, *.ogg, *.webm) AVS video converter (*.ogg, *.mp4, *.webm)

34 .htaccess Video von Web-Server abspielen Wenn Sie Ihre Daten und Ihre Videos auf einen Web-Server spielen, dann ist es notwendig folgende Datei anzulegen. Name:.htaccess Inhalt: AddType video/ogg.ogm AddType video/ogg.ogv AddType video/ogg.ogg AddType video/webm.webm AddType audio/webm.weba AddType video/mp4.mp4 AddType video/x-m4v.m4v

35 Mp4 videos auf ipad oder iphone? Wenn Ihre Video nicht abgespielt werden., dann sollten Sie folgende Parameter Ihres Videos prüfen. According to Apple official website, ipad or iphone 4S is only compatible with H.264 or MPEG-4 video format with the following specifications: If it is H.264 video, it should meet: up to 1080p, 30 frames per second, High Profile level 4.1 with AAC-LC audio up to 160 Kbps, 48kHz, stereo audio in.m4v,.mp4, and.mov file formats; If it is MPEG-4 video, it should meet: up to 2.5 Mbps, 640 by 480 pixels, 30 frames per second, Simple Profile with AAC-LC audio up to 160 Kbps per channel, 48kHz, stereo audio in.m4v,.mp4, and.mov file formats;

36 Technologie-Mix Video, HTML, Javascript und XML Source

37 Videos steuern mit HTML5 Source

38 Über Links zu Szenen springen mit HTML5 Navigation des Videos über Text-Links Source

39 Informationen zeitabhängig einblenden

40 Interaktive und mehrsprachige Videoanleitungen Interaktive, mehrsprachige Videoanleitung mit HTML5, JavaScript, AJAX und XML Source

41 Video to go Kein Rumgemache im Source-code

42 HTML5 und ab ins App mit Phonegap

43 Ab in die App, aber bezahlbar! Der Prozess HTML5 PhoneGap Alle mobilen Endgeräte Der Prozess aus dem CMS! CMS XML XSLT HTML5 PhoneGap AppStores oder CMS XML AJAX HTML5 PhoneGap AppStores

44 Apps -Die Werkstatt Webserver (lokal oder extern) Lokal testen: XAMPP (Lokaler Webserver, der auf einem lokalen Rechner das Web simuliert) Download unter Zugang für Tablets und Smartphones auf lokalen XAMPP innerhalb eines WLAN httpd-xampp.conf imverzeichnis APACHE/CONF/EXTRA suche In httpd-xampp.conf den Eintrag Allow from :: /8 in Allow from all ändern Starten von cmd.exe in der Befehlszeile von Windows Über ipconfig die ip-adresse Ihres lokalen Webservers herausfinden Aufruf der App vom lokalen Webserver z.b.: /Apps/mmquizzi

45 Apps -Die Werkstatt Im Web testen: Webserver bei einem Provider mieten(externer Webserver) WebApp mit URL aufrufen z.b.: Verzeichnis auf dem Webserver: Beim Einsatz von Videos muss sich eine.htaccess-datei mit den folgenden Einträgen im Verzeichnis befinden: #MP4 video mimetype #OGG video mimetype AddType video/ogg.ogv AddType video/mp4.mp4

46 CSS für unterschiedliche Geräte Responsive Design Think CROSS - Change MEDIA: Eine Standortbestimmung im Jahr 2012 von Christine Michitsch

47 CSS3 und Responsive Design Responsive Layouts passen sich der aktuellen Breite des Browsers an ermöglichen immer eine optimale Darstellung

48 CSS3 und Responsive Design CSS3 Media Queries Css Methode 1 /*sobald die max. Breite des Geräts nur noch 350px beträgt, wird der folgende Media Query ausgeführt*/ bestehen aus einem Mediatype min. einem Ausdruck der den Bereich (z.b. Bildschirmbreite) des Stylesheets einschränkt Css Methode 2 <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" only screen and (max-device-width: 480px) { div#wrapper { width: 400px; } div#header { background-image: url(media-queries-phone.jpg); height: 93px; position: relative; } div#header h1 { font-size: 140%; } #content { float: none; width: 100%; } #navigation { float:none; width: auto; } }

49 HTML5-TEMPLATES: BOILERPLATE, BOOTSTRAP ETC. HTML5 Boilerplate Sammlung von HTML-, CSS- und JavaScript-Dateien Alle wichtigen Webserverkonfigurationen voreingestellt Dient als Ausgangspunkt für die Neuerstellung einer Website Erspart dem Ersteller das Zusammensuchen und Einbetten der benötigten Basis-Komponenten

50 Responsive Design (1) Darstellung der Inhalte auf einem Widescreen-Monitor Nach Mack und Kleiser Hausarbeit WS12/13 HS-Karlsruhe

51 Responsive Design (2) Darstellung der Inhalte auf einem Tablet-PC Nach Mack und Kleiser Hausarbeit WS12/13 HS-Karlsruhe

52 Responsive Design (3) Darstellung der Inhalte auf einem Smartphone Siehe auch Nach Mack und Kleiser Hausarbeit WS12/13 HS-Karlsruhe

53 Hybride Apps automatisch kompilieren AdobeBuild Service der WebApps zu nativen Apps macht PhoneGap How-to Mit Adobe ID oder GitHub-Account anmelden. GitHub-Repository(Projekt-Verzeichnis) angeben oder eine zip-datei hochladen. App wird gebaut Take the pain out of developing mobile apps. Simply upload your HTML5, CSS, and JavaScript assets to the Adobe PhoneGap Build cloud service and we do the work of compiling for you.

54 Erstellung der Apps Native Apps WebApps PhoneGap (Adobe Cordova) Sencha Touch Hybride Apps App-Stores (z.b. Apple(iOS), Google(Android), Microsoft(Windows Mobile)

55 Die PhoneGap-Wege zur (hybriden) ios-app 1) HTML5.zip + Apple-Zertifikate 2) xcode + ios + MacBook + PhoneGap + HTML5 + Apple-Zertifikate Adobe PhoneGap Build *.ipa Download der App z.b.: *.ipa Download der App z.b.: *.ipa Über itunes Installation auf Devices oder in den App-Store Über itunes Installation auf Devices oder in den App-Store

56 Adobe PhoneGap Build

57 Adobe PhoneGap Build

58 Adobe PhoneGap Build Was muss die Datei enthalten die hochgeladen wird? 1. Es muss eine ZIP-Datei sein, die weniger als 10 MB groß ist. 2. Alle Dateien die das Projekt benötigt z.b.: HTML5, JavaScript, Frameworks, Bilder, Filme 3. Die Sicherheitsdateien: a) abcdefg.p12 b) hijklmn.mobileprovision 4. Ein Icon für die App

59 Installation 1. Download der App und Installation (z.b. über itunes) 2. Installation über ein QR-Code-App mit dem Mobilen Gerät 2 1

60 App-Baukästen Laien können Apps erstellen, die in Stores eingereicht werden können. Zu den Vorteilen von App-Buildern zählen niedrige Entwicklungskosten Nutzer müssen Kompromisse hinsichtlich der Funktionalitäten eingehen. Außerdem sind die Layout- Möglichkeiten begrenzt. Die Baukasten-Module, mit denen in App-Builder gearbeitet werden, sind vorgefertigt und lassen sich somit zwar anpassen, aber nicht grundlegend verändern. Die Apps werden auf Basis von HTML5 erstellt. Die Meisten App-Builder sind derzeit für ios- und Android- Geräte verfügbar.

61 App-Baukästen App-Builder können gegen monatliche oder jährliche Gebühren erworben werden. Die Preise reichen von monatlich 15 Euro bis monatlich 115 Euro. Jährlich können die Kosten bis zu 599 Euro betragen. Einige Anbieter erheben außerdem einmalige Kosten zu Beginn. Auch diese variieren stark und können sich bis auf knapp 700 Euro belaufen. Einige der Anbieter bieten kostenlose Probeversionen für bis zu 30 Tage an.

62 App-Baukästen Service unterstützte Plattformen Preis Reseller Program* Homepage User Analyse auf deutsch appconkit ios, Android (Blackberry 10 und Windows ab 500 ja ja teilweise Phone in Vorbereitung) appconkit app confector HTML5, ios, Android ab 380 / 6 Monate nein ja ja app Machine ios, Android ab 400 (derzeit kostenlos in Beta) nein ja ja Apps Builder HTML5, ios, Android, Blackberry, Windows ab 15 / Monat ja ja ja Phone apptitan ios, Android (Windows Phone in ab 444 (einmalig) plus 9,99 / Monat ja ja ja Vorbereitung) app Flight ios, Android, Blackberry ab rund 305 (1 Jahr) nein ja nein appyourself ios, Android 355 (einmalig) plus ca. 47 / Mon. ja ja ja app breeder ios, Android ab circa 38 /Mon. nein ja nein app Makr ios, Android ab circa 60 /Mon. ja ja nein Mobile roadie ios, Android ab 115 /Mon. ja ja teilweise Mobile by conduit ios, Android ab circa 30 / Mon. ja ja nein Mobincube ios, Android, Windows Phone kostenlos mit Werbeeinblendungen 99 / ja ja nein Plattform / Jahr, um die Werbung zu entfernen showthem HTML5, iphone, ipad, Android ab rund 45 / Monat ja ja nein

63 HTML5 DAYS und JAVASCRIPT DAYS in München Workshops zu - Web Apps mit HTML5 und Javascript, - Multithreading für HTML5-Apps, - Performance Optimierung, - Responsive Webdesign, - Touch- und Pointer-Events mit HTML5 Nächste HTML5- und JAVASCRIPT DAYS vom Oktober in Hamburg

64 Beispiele

65 Literatur und Links Hauser, T./ Wenz, C. / Maurice, F. (2008): Das Website Handbuch. Markt + Technik Verlag, München, Hogan, Brian P. (2011) HTML5 & CSS3. Webentwicklungen mit den Standards von morgen. 1. Aufl. Köln, O Reilly Verlag GmbH & Co.KG. ix Kompakt Webdesign (2012) HTML5 und CSS3. Hannover, Verlag Heise Koch, Daniel. (2011) HTML5 - Grundlagen & Praxislösungen. Düsseldorf, Verlag Data Becker. Kröner, Peter (2010) HTML5 Webseiten innovativ und zukunftssicher. München, Verlag Open Source Press. Schober, Martin (2012) Mobil, mehrsprachig und multimedial Grundlagen von HTML5, in technische kommunikation 34. Jahrgang Heft 6/12 S , Stuttgart: Gesellschaft für technische Kommunikation e.v. Vollendorf, Maximilian./ Bongers Frank. (2010): jquery Das Praxishandbuch. Bonn, Galileo Press. Wenz, Christian (2007) Javascript & AJAX. Das umfassende Handbuch. 7. Aufl. Bonn, Galileo Press. Vollendorf, M./ Bongers F. (2010): jquery Das Praxishandbuch. Bonn, Galileo Press. Wenz, Christian (2007): Javascript & AJAX. Das umfassende Handbuch. 7. Aufl. Bonn, Galileo Press. Wenz, Christian (2007) Javascript & AJAX. Das umfassende Handbuch. 7. Aufl. Bonn, Galileo Press. Wacker, S. (2007): selfhtml.org. SELFHTML e.v., Kiel und

66 Kontakt: Prof. Martin Schober Informations- und Medientechnik Leiter Studiengang Kommunikation und Medienmanagement Bachelor KMM Hochschule Karlsruhe - Technik und Wirtschaft Fakultät für Informationsmanagement und Medien Postanschrift: Postfach 24 40, Karlsruhe Besucheranschrift: Amalienstr Karlsruhe Raum AM 113 fon +49 (0) fax +49 (0) martin.schober@hs-karlsruhe.de