Prof. Dr. Michael Bauer16.10. 2014 Tekom-RG Nordrhein --------------------------------------- Autorensysteme für mobile Anwendungen Technische / wissenschaftliche

Prof. Dr. Michael Bauer 16.10. 2014 Tekom-RG Nordrhein

---------------------------------------

Autorensysteme für mobile

Anwendungen

Technische / wissenschaftliche Dokumentationen auf mobile Endgeräten


Was ist, was will ein Autor?

• Produzent interaktiver, multimedialer Inhalte

• geschlossene Einheiten (Apps)

• keine Grenzen für Kreativität

• Entwicklungs- und Pflegekosten minimieren: Single Source, Cross Media, Cross Platform

• Schutz der eigenen Erzeugnisse

• sofort produzieren

• kein Informatiker


Was ist ein Autorensystem?

• Plattform-übergreifende Entwicklungsumgebung

• grafische Oberfläche & Skriptsprache

• Medienintegration: Text, Bild, Grafik, Video, 3D etc.

• komplexe Animations- und Interaktionsmuster

• umfassendes Publizieren: Win, Mac, Desktop, Kiosk, offline, online, Smartphones, Tablets, iOS, Android etc.

• akzeptable Einlernzeiten


Desktop

Desktop

Video

Bilder

Daten

Multimediale, interaktive Anwendungen früher

AnwendungDesktop

Web(Browser)

EntwicklungsumgebungAutorensystem

• wenige Medien, wenige Medien-Formate

• wenige Endgeräte, wenige Bildschirmformate

• wenige Plattformen (Betriebssysteme)

• wenige Entwicklungsumgebungen

Texte

Daten

Bilder

Grafik

Video


AnwendungAnwendungAnwendung

Daten

Bilder

Grafik

Video

Schnittstellen

Daten

Bilder

Grafik

Video

Schnittstellen

Multimediale, interaktive Anwendungen heute

Anwendung

EntwicklungsumgebungenAutorensysteme

• viele Medien, viele Medien-Formate

• viele Endgeräte, viele Bildschirm-Formate

• viele Plattformen (Betriebssysteme)

• viele Entwicklungsumgebungen

Texte

Daten

Bilder

Grafik

Video

Echtzeit-3D

Schnittstellen

ARAR

Texte

Daten

Bilder

Grafik

Video

Echtzeit-3D

Schnittstellen

Des

ktop

Desktop

Web(Browser)

MobileEndgeräte

Desktop

Web(Browser)

MobileEndgeräte

Desktop

Web(Browser)

MobileEndgeräte


Des

ktop

Desktop

Web(Browser)

MobileEndgeräte

Desktop

Web(Browser)

MobileEndgeräte

Multimediale, interaktive Anwendungen

AnwendungDesktop

Web(Browser)

MobileEndgeräte

EntwicklungsumgebungAutorensystem

?

Daten

Bilder

Grafik

Video

Schnittstellen

Daten

Bilder

Grafik

Video

Schnittstellen

Texte

Daten

Bilder

Grafik

Video

Echtzeit-3D

Schnittstellen

ARAR

Texte

Daten

Bilder

Grafik

Video

Echtzeit-3D

Schnittstellen


Web-App:•mobile Website•HTML, HTML5•CSS, JavaScript•Online im Browser

Hybrid-App:•*.ipa als Container

•App Store

Native, hybride, Kiosk- und Web-Apps

Native App:•z.B. *.ipa•z.B. Apple-SDK (Xcode)•optimale Anpassung•alle Schnittstellen (APIs)•App Store

• z.B. Flash, HTML5• nicht alle APIs• u.U. langsamer

Kiosk-App:•„Als-ob“-App•Content-Player•Pdf, Video etc.


Kiosk-App (z.B. PressMatrix)

+ schneller Weg zur eigenen App

+ Wiederverwendung von digitalem Content

+ Kosten

----------------------------------------------------

- mangelnde Medienunterstützung

- wenig Individualisierung


Native App (z.B. Apple Xcode)

+ optimale Anpassung an Plattform

+ optimale Nutzung der Schnittstellen

+ optimaler Publikationsweg (z.B. iTunes-Store)

-------------------------------------------------------

- nur für jeweils eine Plattform

- Expertise (Progammierung)

- Kosten


+ Zukunftsicherheit

+ Austauschbarkeit, Wiederverwendung

+ Kosten

----------------------------------------------

- HTML und Rich Media

- langsame Entwicklung

- Schnittstellen

Hybrid-App (offene Standards: HTML5 & CSS 3 & JS)


Hybrid-App (Proprietäre Systeme: Flash & AS3 & AIR)

+ Abdeckung nahezu aller Plattformen

+ Medien-Integration (z.B. Echtzeit 3D + AR)

+ zügige Entwicklung

+ Kosten

----------------------------------------------------

- hohes Risiko durch Abhängigkeit

- Adobe


animierbareVektorgrafik

Proprietäres Autorensystem: Flash Professional

MedienTexteBilderGrafikenTöneVideos3D, AR

Web

Desktop

POI

Mobile

Grafik/Animation

SchnittstellenTouchKameraPhoneGPSBeschleun.Kompass

swf & html

swf & exe

swf & exe

swf & ipa

div. Formate

div. Formate

AS3, ANE


Flash Professional: Metapher “Bühne”

Besetzung(Objekte)

Bühne(Monitor)

Skript-Editor(ActionScript)

Drehbuch(Zeitleiste)


Flash, ActionScript und AIR

Desktop:•ausführbar (*.exe, *.app)•installierbar (*.air)

Flash Pro / Flash Builder

Mobile:•install. App (*.ipa, *.apk)

Web: Flashplayer(HTML & swf)

AIR

HTML5-Canvas


IPA – Container (Apple iOS)


April 2010: “Flash ist tot”

Steve Jobs:

•kein offenes Format

•nicht sicher

•zu langsam für Mobile

•hoher Energieverbrauch

•keine Touch-Unterstützung

•zu wenige Schnittstellen

•Zukunft: HTML5


Die Wiederauferstehung

• April 2010: Adobe stellt iOS-Unterstützung ein

• Sommer 2010: keine weiteren mobilen Browser-PlugIns

• September 2010: Apple läßt Flash-Apps zu

• 2011: Flash CS5.5 mit StageWebView

• 2011: Echtzeit-3D mit Stage3D

• 2012: Flash CS6 mit neuer AIR-Schnittstelle und ANE

• 2014: Flash CC mit HTML5-Canvas


September 2010: erster Test GeoUhr

• Lässt sich Flash in ipa-Datei packen?

• Funktioniert AS3 unter iOS?

• Funktioniert animierte Vektor-Grafik?

• Funktionieren Touch-Events?

• Akzeptiert Apple Flash-Apps im iTunes-App-Store?


Schnittstellen-Tests

• GPS

• Bewegungs-Sensor

• Kompass

• Kamera

• Front-Kamera

• Video

• Pdf


XML auf Server

lokalesDatei-

System

Was akzeptiert Apple?

Videos auf YouTube

Name Link

Video1 http://...

Video2 http://...

Video3 http://...


Beispiel: BIOLOX App und CeraFacts

• fünf Plattformen: iOS, Android, Web, Win, Mac

• drei Sprachen: englisch, deutsch, chinesisch, russisch

• zwei Versionen: Mobile & Web und Desktop (Stick)

Mobile

Web

Desktop


Aufwand für natives Authoring

Android SDK

AppleSDK

DirectorLingo

HTML+JS

Aufwand: 100 %

Aufwand: 100 %

Aufwand: 100 %

Aufwand insgesamt: 400 %

WebMobileMobile

Aufwand: 100 %


Aufwand mit Plattform-neutralem Autorensystem

20 %10 % 15 %10 %

Aufwand insgesamt: ca. 150 %

WebMobileMobile

gemeinsam80 – 90 %


1999:2D-Web-AnimationUrweltmuseum Hauff(Flash)

2008:Touchscreen-Version fürUrweltmuseum Hauff, Geopark Karnische Alpen(Macromedia Director)

2010:iPhone-App(Flash & AIR)

Die Geologische Uhr

D:\Daten\Fh1\Vortrag Forschungssemster 2013\geouhr.swf

D:\Daten\Fh1\Vortrag Forschungssemster 2013\geouhr.swf

D:\Daten\Fh1\Vortrag Forschungssemster 2013\geo.swf


Prof. Dr. Hans P. Schönlaub, Dir. i.R., Geologische BundesanstaltDipl.-Geol. Rolf Hauff, Urweltmuseum Hauff, HolzmadenProf. Dr. Ron Blakey, Northern Arizona University (USA)Prof. Dr. Christian Köberl, Universität WienProf. Dr. Wolfgang Frisch, Universität TübingenDr. Ralf Schuster, Geologische Bundesanstalt WienDr. Gerhard Mandl, Geologische Bundesanstalt WienProf. Dr. Annalisa Ferretti, Università di Modena e Reggio Emilia


2013: Touchscreen-Version für Urweltmuseum Hauff, Geopark Karnische Alpen, Geopark Karawanken, Naturhistorisches Museum Wien

2014: iPad-App

EarthAge – Die Uhr der Erdgeschichte

● 5 Plattformen: Win, Mac, iOS, Android, html & swf

● 3 Versionen: Kiosk, Desktop, Mobile

● 4 Varianten: neutral, Holzmaden, Kärnten, Karawanken

● 4 Sprachen: deutsch, englisch, italienisch, slowenisch

D:\Daten\Fh1\Vortrag Forschungssemster 2013\EarthAge_Demo.app\EarthAge.exe


3D-Animation:ModelleSequenzen GPU

Morphing:2D-Animation

Schnitt, Effekte:VideoAudio

Grafik:BilderMenü-Elemente

Autorensystem:Struktur, AnimationInteraktion

Kiosksysteme:Touchscreen, Win

Desktop:Win, Mac

Mobile:iOS, Android

Server:Daten, Videos

Web:html & swf


Interaktives Echtzeit-3D

3D Animation, CAD

Exportformat

GPU

CPU

Flash-Stage

Autorensystem mit Echtzeit-3Dund 3D-Klasse


Beispiel EarthAge

3D-Animation

*.zf3d


Studio Max

x, y, zx, y, z

Beispiel CeraFacts

Motion Capture

Skelett.zf3d

GPU

Bewegungen.zf3d

x, y, zx, y, z

Haut.zf3d


Anforderung an 3D

• Echtzeit-Rendering

• Voller Zugriff auf Elemente (Modelle, Texturen, Animationen)

• Physik-Engine (Schwerkraft, Kollission etc.)

• Partikelsystem

• Skinning

• AR-Unterstützung

Spiele-Industrie


Augmented Reality

Realbild

3D-Modell

Mischbild


IOS Android Web Desktop

Text

Schriften Eingebettete Zeichensätze

Sprachversionen Stringtabelle (XML), mit Übersetzungssoftware kompatibel

PDF StageWebView File-Klasse + ANE im BrowserFenster StageWebView

Medien

Bild / Grafik alle gängigen Formate, inklusive Alpha-Kanal

2D-Animation Keyframe-gesteuertes Tweening

AV StageWebView Flv-Playback YouTube + API Flv-Playback

3D + AR Stage3D (hardware-beschleunigtes Rendering), spez. Klassen von Drittanbietern

Daten

XML AS3 XML-Klasse

Dateisystem File-Klasse File-Klasse File-Klasse File-Klasse

Schnittstellen

Touch TouchEvent-Klasse

GPS Geolocation-Klasse -- --

Bewegung Accelerometer-Klasse -- --

Kamera Camera-Klasse


Fazit• Autoren brauchen Autorensysteme

• Plattform-übergreifendes Publizieren möglich

• komplexe Anwendungen realisierbar

• hohe gemeinsame Fertigungstiefe

--------------------------------------------------------------------

• Flash geeignet für Desktop und Mobile

• Probleme mit einzelnen Formaten (z.B. PDF)

• Problem: Abhängigkeit von Adobe

Documents

Prof. Dr. Michael Bauer16.10. 2014 Tekom-RG Nordrhein --------------------------------------- Autorensysteme für mobile Anwendungen Technische / wissenschaftliche