JavaScript, HTML5, CSS3 - tekom

Ab in die App, aber bezahlbar!

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

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

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Alle App Stores im Überblick: iTunes App Store http://www.apple.com/itunes/store

Google Android Market http://www.android.com/market

Blackberry (Rim) App World http://de.blackberyy.com/services/appworld

Programmiersprache: Objective C

Programmiersprache: Java

Programmiersprache: Java

Entwickleraccount: 99 USD jährlich Auszahlung für Appanbieter: 70%

Entwickleraccount: 25 USD einmalig Auszahlung für Appanbieter: 70%

Entwickleraccount: 200 USD pro 10 Apps Auszahlung für Appanbieter: 80%

Windows Mobile Marketplace http://marketplace.windowsphone.com

Palm App Catalog http://www.palm.com/us/products/software/mobileapplications.html

Nokia Ovi http://www.ovi.com/services

Programmiersprache: C,C++,C#,.NET

Programmiersprache: Java Programmiersprache: Mojo

Entwickleraccount: 99 USD für 5 Apps, dann 99USD pro App Auszahlung für Appanbieter: 70%

Entwickleraccount: 99 USD jährlich plus pro App 50 USD Auszahlung für Appanbieter: 70%

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. 06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Mobile Endgeräte  Marktanteile Marktanteile 2. Quartal 2012: Die Marktforscher von Nielsen Wire berichten, dass das Apple Betriebssystems von iPhone und iPad jetzt deutlich hinter Android liegt.

Quelle: http://blog.nielsen.com

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

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

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

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.

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

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. 06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

App-Klassen

Vergleich von Nativen-, Web- und Hybriden-Apps 06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Web App vs. native App Web

Wichtige Entscheidungskriterien

Native

Marketing Kosten Native Funktionen Offline Daten Entwicklung Gebrauch Freiheit beim Veröffentlichen Bedienoberfläche 06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

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: http://www.phonegap.com 06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

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.

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Hybride App vs. native App Hybride

Wichtige Entscheidungskriterien

Native

Marketing Kosten Native Funktionen Offline Daten Entwicklung Gebrauch Freiheit beim Veröffentlichen Bedienoberfläche 06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Was bringt HTML5 für die Technische Doku?

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

HTML5 - Basistechnologien

+ neue Tags + neue Styles +neue JS-Methoden

HTML5 =

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Webtechnologien um HTML5

Quelle: Peter Kröner, http://html5-buch.de 06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Unterstützung von HTML5

Quelle: html5readiness.com 06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

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

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

HTML5 - Tools & Technologien? Adobe Edge – HTML5/JS/CSS animation/interaction tool - http://labs.adobe.com/technologies/edge/ Less Framework – CSS grid system/layout - http://lessframework.com/ Less – alternative CSS syntax – supports OO-like syntax – referenced by Google at Google IO – used in many projects - http://lesscss.org/ Saas – another alternative CSS syntax – similar to Less - http://sass-lang.com/ Kendo UI Framework (mobile coming soon) - http://www.kendoui.com/ Sencha - http://www.sencha.com/ - multiple products – including Sencha Touch, Charts, etc. JQuery UI - http://jqueryui.com/ JQuery (core) - http://jquery.com/ JQuery Mobile - http://jquerymobile.com/ xui -minimalist JQuery-like framework - http://xuijs.com/ zepto.js – minimalist JQuery-like framework - http://zeptojs.com/ Backbone.js MVC framework for JavaScript - http://documentcloud.github.com/backbone/ Underscore.js – Kitchen-sink utilities for JavaScript - http://documentcloud.github.com/underscore/ Modernizr – JavaScript library to detect device features – very popular - http://modernizr.com/ cubiq.org – home of iScroll, a very popular scroll/list lib - http://cubiq.org/ appMobi – web-based dev with emulation, etc. Also has an HTML5-framework - http://www.appmobi.com/ LeviRoutes - lightweight routes framework for hooking in to HTML5 history - https://github.com/PaulKinlan/leviroutes Mustache – “logic-less templates” – mentioned by Google presenters at Google IO - http://mustache.github.com/ Midori – JavaScript framework – JQuery-like with some unique features - http://www.midorijs.com/ Knockout.js – JavaScript UI framework – implements MVVM pattern – recommended by Greg’s brother – popular - http://knockoutjs.com/ AngularJS – MVC framework, two-way data binding, JQuery-compatible - http://angularjs.org/ JSFiddle – online tool for doing lint/tidy/debugging - http://jsfiddle.net/ HighCharts – fantastic looking charts - http://www.highcharts.com/ ZingCharts – HTML5/SVG/VML and Flash charts - http://www.zingchart.com/#welcome AMCharts – JavaScript/HTML5-based charts. They also offer Flash-based charts. - http://www.amcharts.com/javascript/ HTML5 Boiler Plate – assist with cross-browser issues and other utils - http://html5boilerplate.com/ Bootstrap, from Twitter - Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. http://twitter.github.com/bootstrap/ Popcorn.js – HTML5/JS Media Framework - http://popcornjs.org/ Three.js – JavaScript 3D engine - https://github.com/mrdoob/three.js and http://www.aerotwist.com/lab/getting-started-with-three-js/ PhoneGap – http://phonegap.com PhoneGap Plugins - https://github.com/phonegap/phonegap-plugins Require.js – http://requirejs.org - RequireJS is a JavaScript file and module loader Brunch - http://brunch.io/ - A lightweight approach to building HTML5 applications with emphasis on elegance and simplicity. …

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Es gibt viele Möglichkeiten, HTML5 zu erzeugen

06.11.2013

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;

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

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

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

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

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

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 €

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

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

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

HTML5-Export mit Adobe Captivate 6 möglich Wenn die Dateien einmal in HTML5 konvertiert sind, können sie mit jedem Editor weiter bearbeitet werden.

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

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.

+ 06.11.2013

tekom - Wiesbaden

= Prof. Dipl.-Ing. Martin Schober

Source

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 …

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

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]); });

http://www.technischeredaktion.com/ajax1

$("#Elektromotor, #Abtriebswelle").mouseout( function() { $(this).css('cursor','auto'); $("#" + this.id + "text").hide(1500);

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Ein kleines E-Learning-Programm mit jQuery Drag & drop mit jQuery

http://www.technischeredaktion.com/webapp1

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Source

HTML5 schnell und einfach nutzen mit dem Video-Tag 3D-CAD-Daten

Videokamera

Screengrabber

Animation Rendering Video 06.11.2013

Video tekom - Wiesbaden

Video Prof. Dipl.-Ing. Martin Schober

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…) 06.11.2013

Xmedia Recode (*.mp4, *.ogg, *.webm) tekom - Wiesbaden

AVS video converter (*.ogg, *.mp4, *.webm) Prof. Dipl.-Ing. Martin Schober

.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 AddType AddType AddType AddType AddType AddType

06.11.2013

video/ogg .ogm video/ogg .ogv video/ogg .ogg video/webm .webm audio/webm .weba video/mp4 .mp4 video/x-m4v .m4v

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

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;

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Technologie-Mix Video, HTML, Javascript und XML

http://www.cedar.de/video http://www.cedar.de/video2 06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Source

Videos steuern mit HTML5

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Source

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

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Source

Informationen zeitabhängig einblenden

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

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

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Source

Video to go – Kein Rumgemache im Source-code

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

HTML5 und ab ins App mit Phonegap

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

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 06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Apps -Die Werkstatt Webserver (lokal oder extern) Lokal testen:  XAMPP (Lokaler Webserver, der auf einem lokalen Rechner das Web simuliert) Download unter http://www.apachefriends.org/de/ 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 ::1 127.0.0.0/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.: 192.168.2.115/Apps/mmquizzi

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Apps -Die Werkstatt Im Web testen:  Webserver bei einem Provider mieten(Externer Webserver) WebApp mit URL aufrufen z.B.: www.cedar.de/video 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

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

CSS für unterschiedliche Geräte Responsive Design

Think CROSS - Change MEDIA: Eine Standortbestimmung im Jahr 2012 von Christine Michitsch 06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

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

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

CSS3 und Responsive Design  CSS3 Media Queries  bestehen aus einem Mediatype  min. einem Ausdruck der den Scope des Stylesheets einschränkt

css /*sobald die max. Breite des Geräts nur noch 350px beträgt, wird der folgende Media Query ausgeführt*/ @media screen and (max-width: 350px) { body > header > nav:nth-child(3) { display:none; } } 06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

HTML5 ★ BOILERPLATE HTML5 Boilerplate • Sammlung von HTML-, CSS- und Javascriptdateien • 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

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Responsive Design (1) Darstellung der Inhalte auf einem Widescreen-Monitor

Nach Mack und Kleiser Hausarbeit WS12/13 HS-Karlsruhe 06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Responsive Design (2) Darstellung der Inhalte auf einem Tablet-PC

Nach Mack und Kleiser Hausarbeit WS12/13 HS-Karlsruhe 06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Responsive Design (3) Darstellung der Inhalte auf einem Smartphone Siehe auch… http://html5boilerplate.com http://www.initializr.com/ http://www.dict.cc/?s=boilerplate http://de.wikipedia.org/wiki/Boilerplate https://github.com/h5bp/html5-boilerplate/blob/v4.0.1/doc/TOC.md http://matthiasschuetz.com/initializr-html5-projekte-per-klick-erstellen

Nach Mack und Kleiser Hausarbeit WS12/13 HS-Karlsruhe 06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

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  https://build.phonegap.com/

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.

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Erstellung der Apps Native Apps

WebApps PhoneGap (Adobe Cordova) Sencha Touch

Hybride Apps

App-Stores (z.B. Apple(iOS), Google(Android), Microsoft(Windows Mobile) 06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Die PhoneGap-Wege zur (hybriden) iOS-App 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

1)

Über iTunes Installation auf Devices oder in den App-Store

06.11.2013

Über iTunes Installation auf Devices oder in den App-Store

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Adobe PhoneGap Build

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Adobe PhoneGap Build

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Adobe PhoneGap Build Was muss die Datei enthalten die hochgeladen wird? 1. 2. 3.

4.

06.11.2013

Es muss eine ZIP-Datei sein, die weniger als 10 MB groß ist. Alle Dateien die das Projekt benötigt z.B.: HTML5, JavaScript, Frameworks, Bilder, Filme Die Sicherheitsdateien: a) abcdefg.p12 b) hijklmn.mobileprovision Ein Icon für die App

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Adobe PhoneGap Build

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Upload einer neuen ZIP-Datei

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Settings

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Installation 1. 2.

Download der App und Installation (z.B. über iTunes) Installation über ein QR-Code-App mit dem Mobilen Gerät

2

1

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Installation auf dem iPad/iPhone über iTunes

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Phonegap installieren auf Mac OS X1.

06.11.2013

1.

Node.js herunterladen und installieren http://nodejs.org/

2.

Phonegap über folgenden Befehl im Terminal installieren  sudo npm install -g phonegap#

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

iOS-App erstellen 1. Xcode installieren 2. In gewünschten Ordner navigieren 3. Folgenden Befehl im Terminal ausführen: phonegap create com.example. "„ 4.

Per "cd"-Befehl in navigieren

5.

Folgenden Befehl im Terminal ausführen phonegap build ios6.

Zum Ordner wechseln und die xcode-Datei öffnen

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Vorgehensweise

06.11.2013

1.

Ein neues Provisioning Profile anlegen

2.

Xcode starten und ein neues Projekt anlegen

3.

Aus der App ein IPA-Archiv erstellen, das dann in den App-Store gestellt oder auf die Devices geladen werden kann.

4.

Installation auf einem Device mit iTunes

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

App-Baukästen

06.11.2013

•

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 LayoutMö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 AndroidGeräte verfügbar. tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

App-Baukästen

06.11.2013

•

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.

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

App-Baukästen Service

unterstützte Plattformen

Preis

Reseller

Homepage

Program* appconKit

iOS, Android (Blackberry 10 und Windows

ab 500 €

ja

Phone in Vorbereitung)

http://www.weptun.de/

User

auf

Analyse

deutsch

ja

teilweise

appconkit

app confector

HTML5, iOS, Android

ab 380 € / 6 Monate

nein

http://www.appconfector.de

ja

ja

app Machine

iOS, Android

ab 400 € (derzeit kostenlos in Beta)

nein

http://www.appmachine.com

ja

ja

Apps Builder

HTML5, iOS, Android, Blackberry, Windows

ab 15 € / Monat

ja

http://www.apps-builder.com

ja

ja

ab 444 € (einmalig) plus 9,99 € / Monat

ja

http://www.apptitan.de

ja

ja

Phone apptitan

iOS, Android (Windows Phone in Vorbereitung)

app Flight

iOS, Android, Blackberry

ab rund 305 € (1 Jahr)

nein

http://www.appflight.com

ja

nein

appyourself

iOS, Android

355 € (einmalig) plus ca. 47 € / Mon.

ja

http://www.appyourself.net

ja

ja

app breeder

iOS, Android

ab circa 38 €/Mon.

nein

http://www.appbreeder.com

ja

nein

app Makr

iOS, Android

ab circa 60 €/Mon.

ja

http://www.appmakr.com

ja

nein

Mobile roadie

iOS, Android

ab 115 €/Mon.

ja

https://mobileroadie.com

ja

teilweise

Mobile by conduit

iOS, Android

ab circa 30 €/ Mon.

ja

http://mobile.conduit.com

ja

nein

Mobincube

iOS, Android, Windows Phone

kostenlos mit Werbeeinblendungen 99 € /

ja

http://www.mobincube.com

ja

nein

ja

http://www.shoutem.com

ja

nein

Plattform / Jahr, um die Werbung zu entfernen showthem

06.11.2013

HTML5, iPhone, iPad, Android

ab rund 45 € / Monat

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

Literatur und Links Hauser, T./ Wenz, C. / Maurice, F. (2008): Das Website Handbuch. Markt + Technik Verlag, München, 248-349 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. 36-42, 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. http://openbook.galileocomputing.de/javascript_ajax/ Wacker, S. (2007): selfhtml.org. SELFHTML e.V., Kiel http://selfhtml.org/ und http://de.selfhtml.org/javascript/index.htm http://www.html-world.de/program/ajax_2.php http://jquery.com http://jquerymobile.com/demos/1.0/ http://slides.html5rocks.com/#landing-slide

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober

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, 76012 Karlsruhe Besucheranschrift: Amalienstr. 81-87 | 76133 Karlsruhe | Raum AM 113 fon +49 (0)721 925 - 2990 | fax +49 (0)721 925 -1125 [email protected] | www.technischeredaktion.com

06.11.2013

tekom - Wiesbaden

Prof. Dipl.-Ing. Martin Schober