In der Präsentation von Gregor Biswanger wird eine Einführung in die Hybrid-App-Entwicklung gegeben, wobei verschiedene Technologien und Frameworks wie Intel XDK und Apache Cordova diskutiert werden. Die Vor- und Nachteile der Nutzung von nativen Apps versus hybriden Apps werden hervorgehoben, während die Relevanz von Cross-Plattform-Entwicklung und Responsive Webdesign betont wird. Zudem werden Funktionen und Tools zur Senorenerfassung sowie zur Verbesserung der Performance vorgestellt.

1. Roadshow:
Einstieg in die Hybrid-App Entwicklung
Gregor Biswanger | CEO von CleverSocial.de, Freier Dozent, Berater, Trainer und Autor
about.me/gregor.biswanger

2. Über mich
 Gründer von CleverSocial.de
 Freier Dozent, Berater und Trainer
 Schwerpunkte .NET-Architektur, Agile Prozesse,
XAML, Web und Cloud
 Technologieberater für die Intel Developer Zone
 Sprecher auf Konferenzen und User Groups
 Freier Autor für heise.de, dotnetpro,
WindowsDeveloper und viele weitere Fachmagazine
 Video-Trainer bei video2brain und Microsoft
Gregor Biswanger
Microsoft MVP, Intel Black Belt &
Intel Software Innovator
dotnet-blog.net
about.me/gregor.biswanger

3. Verlosung am Ende der Show
Posten mit dem Hashtag #IntelXDKShow auf Facebook oder Twitter.

4. Unser Reiseplan
 Wieso ist Cross-Plattform Entwicklung wichtig
 Aktuelle Lösungen im Vergleich
 Einführung in das Intel XDK
 Das Intel App Framework
 Responsive Webdesign
 Sensoren
#IntelXDKShow

5. HTML5 liegt im Trend
#IntelXDKShow

6. HTML5 bietet Features aus der Desktop-Welt!
 Offline Lauffähig
 Multi-threading mit WebWorkers
 Effiziente Kommunikation mit WebSockets
 Persistente Datenspeicherung
 Zugriff auf lokale Geräte (z.B. Kamera, Webcam)
 Geolokalisierung
 3D Fähigkeiten (WebGL)
 Multimedia (Video und Audio)
 Zeichnen von 2D Bitmaps/Sprites (Canvas)

7. HTML5 läuft auf allen gängigen Geräten!
#IntelXDKShow

8. Wofür dann noch Apps entwickeln?
#IntelXDKShow

9. Der Unterschied von App und Web
 Mehr Performance
 Besseren Zugriff auf Hardware
 Bessere Interaktion
 …
Accelerometer Gyroscope GPS Ambient LightCompass NFC
#IntelXDKShow

10. Wir haben ein Problem: Der Markt ist zu groß!
#IntelXDKShow

11. JavaScript – The Good Parts ;)
Wenn nicht alle Plattformen benötigt werden, soll eine native App-Entwicklung bevorzugt werden!
#IntelXDKShow

12. Die Lösung: Xamarin für native Apps
#IntelXDKShow

13. Xamarin
Vorteile
 Die Entwicklungsumgebung ist
Visual Studio
 Entwicklungssprache ist C#
 Die Apps werden nativ kompiliert
 Einheitliches Frontend
Nachteile
 Ist nicht kostenlos
 Jede Plattform hat eine eigene API
 Die Apple-Plattform kann nur auf dem
Mac entwickelt werden
 Zu wenig Plattformen werden unterstützt
#IntelXDKShow

14. Die Lösung: Hybrid-Apps mit Apache Cordova
 Cordova ist ein JavaScript-Framework für lokal installierbare WebApps
auf mobilen Endgeräten
 Ist Open-Source und liegt auf GitHub
 Unterstützte Plattformen: iOS, Android, LG webOS, Symbian OS,
BlackBerry, Tizen, Firefox OS, Windows Phone, Windows 8
 Features
 Zugriff auf Sensoren
 Plattformspezifische Funktionen (Notifications)
 Zugriff auf Kontakte
 Zugriff auf lokale Dateien
 Cordova bietet kein UI Framework!
cordova.apache.org
#IntelXDKShow

15. Die Geschichte von Apache Cordova
#IntelXDKShow

16. Entwickelt von der Firma Nitobi
 2009: Erstmals wurde PhoneGap auf dem
iPhoneDevCamp in San Francisco vorgestellt
 Bei O‘Reilly Media 2009 Web 2.0 Conference
gewann PhoneGap den People´s Choice Award
#IntelXDKShow

17. Nitobi wurde von Adobe gekauft
 2011: Adobe verkündete offiziell die Übernahme
von Nitobi Software
 Gleichzeitig wurde PhoneGap der Apache
Software Foundation gespendet
#IntelXDKShow

18. Wie Cordova funktioniert
PhoneGap Build
(Apache Cordova)
JS
CSS
HTML
Cloud Compiler
AppsEin Projekt
#IntelXDKShow

19. Das Cordova Projekt
JS
CSS
HTML
#IntelXDKShow

20. Das Builden
Natives WP8 Package (APP)WP8 ProjektCordova Projekt
#IntelXDKShow

21. Die WebView im XAML (WP8 Projekt)
#IntelXDKShow

22. Adobe PhoneGap
 Ein Code für alle gängige Plattformen
 Eine Vielzahl an Plattformen werden
unterstützt
 Einheitliche API für alle gängigen
Plattformen
 Sehr große Community
Nachteile
 Das Erstellen von Apps in der Cloud ist
nicht kostenfrei
 Die Apps sind nur teilweise nativ
 Für jede Plattform wird ein eigener
Emulator benötigt
 Für jede Plattform wird eine eigene
Datenstruktur benötigt
 Plattform spezifische Contracts müssen
mit zusätzlichen Aufwand implementiert
werden
 Hoher Lernaufwand
Vorteile
#IntelXDKShow

23. Die Lösung: Das Intel XDK
#IntelXDKShow

24. Intel XDK
 Ein Code für alle gängige Plattformen
 Eine Vielzahl an Plattformen wird unterstützt
 Einheitliche API für alle gängigen Plattformen
 Sehr große Community
 Kostenlose Entwicklungsumgebung
 Emulatoren für alle gängigen Geräte und
Plattformen
 Kostenloses Erstellen von Apps
 Interoperabilität zu anderen
Entwicklungsumgebungen
 Einige native Lösungen für schnellere Apps
 Rapid Application Development möglich
Nachteile
 Die Apps sind nur teilweise nativ
 Plattform spezifische Contracts müssen mit
zusätzlichen Aufwand implementiert werden
Vorteile
#IntelXDKShow

25. Das Intel XDK
 Komplett kostenlos
 Leichtgewichtig mit nur 130 MB
 Läuft unter Windows, OS X, Linux und weitere Linux-Derivaten
 Ist selbst in HTML und JavaScript entwickelt worden
 Besteht aus:
 Einer Entwicklungsumgebung (IDE)
 Ein JavaScript UI Framework (Intel App Framework)
 Kostenlosen App Builder in der Cloud (basierend auf Apache Cordova)
#IntelXDKShow

26. Kostenlos downloaden unter…
xdk.intel.com
#IntelXDKShow

27. Die Entwicklungsumgebung
Code-Editor /
Designer
Emulatoren /
Debugger
Remote-Tools
(Test / Debugger / Profiler)
Erstellen von Apps Cloud Dienste /
Web Services
#IntelXDKShow

28. Der Develop-Tab
 Code-Editor ist vom Adobes Open-Source HTML-Editor Brackets
 IntelliSense für JavaScript und viele weitere Features
 Unterstützung für die Versionsverwaltung Git
 App Designer
 Unterstützt unterschiedliche JavaScript UI Frameworks:
 Intel App Framework
 Bootstrap 3
 JQuery Mobile
 Topcoat
 Unterstützt Responsive Webdesign
#IntelXDKShow

29. Der Emulate-Tab
 Apache Ripple Integration simuliert Mobile Geräte
 Emulatoren für Smartphones, Tablets, E-Book-Reader und Ultrabooks
 Das Simulieren von Sensoren ist möglich
 Multi-Monitor Support
 Debugging mittels Google Chrome Developer Tools
#IntelXDKShow

30. Der Test-Tab
 Ermöglicht ein Ausführen der App auf dem eigenen Device
 Mobile (Über die Cloud)
 WiFi (WLAN)
 Per E-Mail (Via Project-Tab)
 App muss auf dem Zielgerät vorhanden sein
 Intel XDK App Preview
#IntelXDKShow

31. Der Build-Tab
 App wird vom Intel XDK Build
Service in der Cloud erzeugt
 Unterstützt werden die
Plattformen:
 Windows 8 Store Apps, Windows Phone 8
Apps
 Android, Crosswalk for Android
 Tizen
 Amazon
 Nook
 iOS Ad Hoc, iOS Production
 Firefox OS
 WebApp
 Chrome App
 Facebook App
#IntelXDKShow

32. Der Service-Tab
 Cloud-Dienste von Drittanbietern
 Teilweise kostenpflichtig
 Proxy-Generator für REST Web-Services mit JSON
 Ist vom Open-Source Projekt I/O Docs
 Unterstützung von AngularJS oder Backbone
#IntelXDKShow

33. Fazit
 Das Intel XDK bietet alle wichtigen Funktionen für die Cross-Plattform
Entwicklung
 Das Intel XDK ist eine Kombination aus unterschiedlichen Open-
Source-Projekten
 Interoperabilität zu jeder Phase
#IntelXDKShow

34. Das Intel App Framework
 Ist eine umfangreiche UI-JavaScript-Bibliothek, die auf drei Hauptmerkmale
aufbaut:
1. Es verfügt über eine Abfrage-Selektor-Bibliothek für die einfache DOM-Manipulation, deren
Syntax der von JQuery sehr ähnlich ist
2. Zusätzlich umfasst es ein UI/UX-Framework, das gestochen scharfe Animationen und flüssiges
Scrollen bietet (native Lösungen)
3. Zudem gibt es die Möglichkeit, hier für JavaScript Plug-ins zu erstellen
 Ist Open-Source unter MIT-X11-Lizenz
 Für mehr Performance
 http://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html
#IntelXDKShow

35. App-Framework-Query-Selector
Zugriff auf HTML-Elemente mit der $()-Funktion.
Dazu werden unterschiedliche Parameter zur Zuweisung unterstützt:
 String: Zugriff auf Elemente mit ID-Attributen, Elemente, die auf bestimmte CSS-Klassen verweisen, oder beides.
Auch ein direkter Verweis für alle HTML-Elemente vom gleichen Typ ist möglich
 Element: Das App-Framework erzeugt dynamisch ein HTML-Elementobjekt
 Array/Object: Das App-Framework erzeugt dynamisch ein HTML-Elementobjekt mit Kinder-Elementen
 Function: Führt eine Funktion aus, wenn DOMContentLoaded angetriggert wurde
#IntelXDKShow

36. App-Framework-UI
 Das App-Framework-UI wird abgekürzt im Code verwendet: AFUI
 Ermöglicht ein natives Theming der App
 Das Layout passt sich automatisch der darunterliegenden Plattform an
 Zahlreiche fertige Steuerelemente
 CSS3 bietet zahlreiche fertige Icons (Vektorbasiert) und Animationen
 Kompatibel mit anderen Frameworks (z.B. Backbone.js oder JQuery)
 Erweiterungen durch Plug-in-Support möglich
#IntelXDKShow

37. Fazit
 Große Ähnlichkeiten zu JQuery Mobile, Zepto.js oder Twitter
Bootstrap, konzentriert sich aber auf die wesentlichen Punkte wie
Einfachheit und Performance
 Es ist Open-Source
 Kompatibel zu anderen JavaScript Frameworks
#IntelXDKShow

38. Responsive Webdesign
#IntelXDKShow

39. Das ist Responsive Webdesign
http://daserste.de
#IntelXDKShow

40. Das ist KEIN Responsive Design
http://www.rtl2.de oder
http://Lingscars.com
#IntelXDKShow

41. Responsive Webdesign Regeln
 Oberfläche passt sich der Device-Größe an
 Oberfläche muss nicht zusätzlich gezoomt werden
 Oberfläche lässt sich passend zum Device mit Maus/Tastatur oder
Touch bedienen
#IntelXDKShow

42. Eine kleine Geschichte zum Thema Responsive
#IntelXDKShow

43. Das Web war schon immer Responsive!
Philadelphia 1955
#IntelXDKShow

44. Das Layout der Zeitung wird mit Tabellen gemacht
Layouten mit einer Desktop-Publishing (DTP)
Software
Druck bei der Presse
Artikel
#IntelXDKShow

45. Die Geschichte vom Layouten im Webdesign
 Frameset -> Tabellen -> Div -> Tabellen -> Div
 Standard Auflösung von
 800 x 600
 1024 x 768
Layouten mit Framesets#IntelXDKShow

46. Mobile First Responsive Design
 So klein wie möglich anfangen
 Idee von Luke Wroblewski (lukew.com)
 Wird erfolgreich umgesetzt bei großen
Konzernen
 Google
 Facebook
 Adobe
 yelp
 Und viele weitere…
#IntelXDKShow

47. Media Queries
@media all {
#content {
text-align:center;
}
}
@media screen and (max-width: 480px) {
#content {
font-size:80%;
color:#0000FF;
}
}
http://cssmediaqueries.com
#IntelXDKShow

48. Der Fluch von Responsive Webdesign
#IntelXDKShow

49. Der Fluch von Responsive Webdesign
 Das aktuelle Design passt nicht dazu
 Wir sind gar keine Designer
 Ständige Seiteneffekte
 Cross-Browser Probleme
 Zu aufwändig
 Fazit: Ist es wirklich nötig?
#IntelXDKShow

50. Twitter ging es genauso…
#IntelXDKShow

51. August 2011 war die Geburtsstunde von Bootstrap!
#IntelXDKShow

52. Die Eltern von Bootstrap
Jacob Thornton
#IntelXDKShow

53. Bootstrap 3.3.2
 UI Framework fürs Web
 Open-Source auf GitHub
 Basiert auf CSS3 und JavaScript
 Bietet zahlreiche Steuerelemente und Icons
 Unterstützt alle gängigen Browser
#IntelXDKShow

54. Mit Bootstrap Responsive
 Zurück zu Tabellen aber mit Div durch das Bootstrap Grid-System
 Besteht aus 12 Spalten
#IntelXDKShow

55. Das Bootstrap Grid
#IntelXDKShow

56. Das Bootstrap Grid
col-xx-6 col-xx-6
col-xx-4 col-xx-4 col-xx-4
col-xx-3 col-xx-3 col-xx-3 col-xx-3
col-xx-9 col-xx-3
col-xx-9 col-xx-offset-2
#IntelXDKShow

57. Das Intel XDK und das Intel App Framework
unterstützen das gleiche Prinzip!
 Der App Designer unterstützt unterschiedliche UI Frameworks
 Der App Designer bietet Responsive Webdesign ohne Programmieraufwand
 Das Intel App Framework selbst unterstützt auch das Grid-System
#IntelXDKShow

58. Fazit
 Wir wissen jetzt was Responsive Webdesign ist
 Wofür es wichtig ist
 Worauf man zu achten hat
 Und dass das Intel XDK durch den App Designer ein
ideales Tooling bietet
#IntelXDKShow

59. Sensoren
Accelerometer Gyroscope GPS Ambient LightCompass NFC
#IntelXDKShow

60. API´s
Intel XDK mit Simulator-Support
 Accelerometer, Geolocation, Camera, Vibration
Cordova (Nur per remote Debugging testbar)
 Compass, Accelerometer, Geolocation, Camera, Vibration
Öffentliche Plug-ins
 Unterstützung aller Sensoren
http://software.intel.com/en-us/node/492826
http://cordova.apache.org/docs/en/2.9.0/guide_overview_index.md.html#Overview
#IntelXDKShow

61. Einheitlicher Zugriff auf Funktionen
Aktuelle Abfrage
 Beginnt immer mit sensor.get…
Abfrage in einem bestimmten Intervall
 Beginnt immer mit sensor.watch…
 Intervall kann optional festgelegt werden
#IntelXDKShow

62. Accelerometer
Auch bekannt als Beschleunigungssensor
Wird nicht nur zur Messung von Geschwindigkeit verwendet:
 Erkennung von Vibration und Bewegung
 Messen von Kräften
intel.xdk.accelerometer
http://software.intel.com/en-us/node/492838
#IntelXDKShow

63. Fazit
 Simulator unterstützt „noch“ nicht alle Sensoren
 Zugriff auf Sensoren mittels Intel XDK, Cordova und weiteren
Plug-Ins möglich
 Einheitlicher Zugriff mit einfachem Standard
#IntelXDKShow

64. Kostenloses Video-Training für alle!
http://goo.gl/BQb8ul#IntelXDKShow

65. FRAGEN?
#IntelXDKShow <- Letzte Chance ;)

66. Verlosung!

67. Vielen Dank!
http://about.me/Gregor.Biswanger
Ich freue mich auf Feedback!