SlideShare ist ein Scribd-Unternehmen logo
Roadshow:
Einstieg in die Hybrid-App Entwicklung
Gregor Biswanger | CEO von CleverSocial.de, Freier Dozent, Berater, Trainer und Autor
about.me/gregor.biswanger
Ü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
Verlosung am Ende der Show
Posten mit dem Hashtag #IntelXDKShow auf Facebook oder Twitter.
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
HTML5 liegt im Trend
#IntelXDKShow
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)
HTML5 läuft auf allen gängigen Geräten!
#IntelXDKShow
Wofür dann noch Apps entwickeln?
#IntelXDKShow
Der Unterschied von App und Web
 Mehr Performance
 Besseren Zugriff auf Hardware
 Bessere Interaktion
 …
Accelerometer Gyroscope GPS Ambient LightCompass NFC
#IntelXDKShow
Wir haben ein Problem: Der Markt ist zu groß!
#IntelXDKShow
JavaScript – The Good Parts ;)
Wenn nicht alle Plattformen benötigt werden, soll eine native App-Entwicklung bevorzugt werden!
#IntelXDKShow
Die Lösung: Xamarin für native Apps
#IntelXDKShow
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
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
Die Geschichte von Apache Cordova
#IntelXDKShow
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
Nitobi wurde von Adobe gekauft
 2011: Adobe verkündete offiziell die Übernahme
von Nitobi Software
 Gleichzeitig wurde PhoneGap der Apache
Software Foundation gespendet
#IntelXDKShow
Wie Cordova funktioniert
PhoneGap Build
(Apache Cordova)
JS
CSS
HTML
Cloud Compiler
AppsEin Projekt
#IntelXDKShow
Das Cordova Projekt
JS
CSS
HTML
#IntelXDKShow
Das Builden
Natives WP8 Package (APP)WP8 ProjektCordova Projekt
#IntelXDKShow
Die WebView im XAML (WP8 Projekt)
#IntelXDKShow
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
Die Lösung: Das Intel XDK
#IntelXDKShow
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
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
Kostenlos downloaden unter…
xdk.intel.com
#IntelXDKShow
Die Entwicklungsumgebung
Code-Editor /
Designer
Emulatoren /
Debugger
Remote-Tools
(Test / Debugger / Profiler)
Erstellen von Apps Cloud Dienste /
Web Services
#IntelXDKShow
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
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
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
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
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
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
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
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
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
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
Responsive Webdesign
#IntelXDKShow
Das ist Responsive Webdesign
http://daserste.de
#IntelXDKShow
Das ist KEIN Responsive Design
http://www.rtl2.de oder
http://Lingscars.com
#IntelXDKShow
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
Eine kleine Geschichte zum Thema Responsive
#IntelXDKShow
Das Web war schon immer Responsive!
Philadelphia 1955
#IntelXDKShow
Das Layout der Zeitung wird mit Tabellen gemacht
Layouten mit einer Desktop-Publishing (DTP)
Software
Druck bei der Presse
Artikel
#IntelXDKShow
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
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
Media Queries
@media all {
#content {
text-align:center;
}
}
@media screen and (max-width: 480px) {
#content {
font-size:80%;
color:#0000FF;
}
}
http://cssmediaqueries.com
#IntelXDKShow
Der Fluch von Responsive Webdesign
#IntelXDKShow
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
Twitter ging es genauso…
#IntelXDKShow
August 2011 war die Geburtsstunde von Bootstrap!
#IntelXDKShow
Die Eltern von Bootstrap
Jacob Thornton
#IntelXDKShow
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
Mit Bootstrap Responsive
 Zurück zu Tabellen aber mit Div durch das Bootstrap Grid-System
 Besteht aus 12 Spalten
#IntelXDKShow
Das Bootstrap Grid
#IntelXDKShow
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
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
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
Sensoren
Accelerometer Gyroscope GPS Ambient LightCompass NFC
#IntelXDKShow
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
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
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
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
Kostenloses Video-Training für alle!
http://goo.gl/BQb8ul#IntelXDKShow
FRAGEN?
#IntelXDKShow <- Letzte Chance ;)
Verlosung!
Vielen Dank!
http://about.me/Gregor.Biswanger
Ich freue mich auf Feedback!

Weitere ähnliche Inhalte

Was ist angesagt?

Windows 8 für Entwickler
Windows 8 für EntwicklerWindows 8 für Entwickler
Windows 8 für EntwicklerJan Hentschel
 
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
greenrobot
 
Windows 8.1 UI für Entwickler
Windows 8.1 UI für EntwicklerWindows 8.1 UI für Entwickler
Windows 8.1 UI für Entwickler
Thomas Claudius Huber
 
Ionic 3
Ionic 3Ionic 3
Android Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndroid Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickeln
André Krämer
 
C API for Lotus Notes & Domino
C API for Lotus Notes & DominoC API for Lotus Notes & Domino
C API for Lotus Notes & Domino
Ulrich Krause
 
Spiele entwickeln mit dem Adobe AIR SDK
Spiele entwickeln mit dem Adobe AIR SDKSpiele entwickeln mit dem Adobe AIR SDK
Spiele entwickeln mit dem Adobe AIR SDK
IndieOutpost
 
Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Taugt AngularJS wirklich was? Erfahrungsbericht und AusblickTaugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Philipp Burgmer
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
Torben Brodt
 
Workshop: Besseres C#
Workshop: Besseres C#Workshop: Besseres C#
Workshop: Besseres C#
Rainer Stropek
 
Hybrid App Development mit Intel XDK
Hybrid App Development mit Intel XDKHybrid App Development mit Intel XDK
Hybrid App Development mit Intel XDK
Hans Rudolf Tremp
 
Jalimo Slides Linuxtag2007
Jalimo Slides Linuxtag2007Jalimo Slides Linuxtag2007
Jalimo Slides Linuxtag2007
smancke
 
Continuous Integration mit Hudson (JUG Stuttgart, 11.02.2010)
Continuous Integration mit Hudson (JUG Stuttgart, 11.02.2010)Continuous Integration mit Hudson (JUG Stuttgart, 11.02.2010)
Continuous Integration mit Hudson (JUG Stuttgart, 11.02.2010)
Wiest Simon
 
Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!
inovex GmbH
 
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
LeanIX GmbH
 
HTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich istHTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich ist
Renate Hermanns
 
DevOps der Triple-E Klasse - Eclipse DemoCamp
DevOps der Triple-E Klasse - Eclipse DemoCampDevOps der Triple-E Klasse - Eclipse DemoCamp
DevOps der Triple-E Klasse - Eclipse DemoCamp
Werner Keil
 
Chrome for Work | CLOUDPILOTS FastTrack Update
Chrome for Work | CLOUDPILOTS FastTrack UpdateChrome for Work | CLOUDPILOTS FastTrack Update
Chrome for Work | CLOUDPILOTS FastTrack Update
CLOUDPILOTS Software & Consulting GmbH
 
Automatischer Build mit Maven
Automatischer Build mit MavenAutomatischer Build mit Maven
Automatischer Build mit Maven
Stefan Scheidt
 
Applikationsentwicklung für Android
Applikationsentwicklung für AndroidApplikationsentwicklung für Android
Applikationsentwicklung für Android
Thorsten Weiskopf
 

Was ist angesagt? (20)

Windows 8 für Entwickler
Windows 8 für EntwicklerWindows 8 für Entwickler
Windows 8 für Entwickler
 
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
 
Windows 8.1 UI für Entwickler
Windows 8.1 UI für EntwicklerWindows 8.1 UI für Entwickler
Windows 8.1 UI für Entwickler
 
Ionic 3
Ionic 3Ionic 3
Ionic 3
 
Android Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndroid Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickeln
 
C API for Lotus Notes & Domino
C API for Lotus Notes & DominoC API for Lotus Notes & Domino
C API for Lotus Notes & Domino
 
Spiele entwickeln mit dem Adobe AIR SDK
Spiele entwickeln mit dem Adobe AIR SDKSpiele entwickeln mit dem Adobe AIR SDK
Spiele entwickeln mit dem Adobe AIR SDK
 
Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Taugt AngularJS wirklich was? Erfahrungsbericht und AusblickTaugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Workshop: Besseres C#
Workshop: Besseres C#Workshop: Besseres C#
Workshop: Besseres C#
 
Hybrid App Development mit Intel XDK
Hybrid App Development mit Intel XDKHybrid App Development mit Intel XDK
Hybrid App Development mit Intel XDK
 
Jalimo Slides Linuxtag2007
Jalimo Slides Linuxtag2007Jalimo Slides Linuxtag2007
Jalimo Slides Linuxtag2007
 
Continuous Integration mit Hudson (JUG Stuttgart, 11.02.2010)
Continuous Integration mit Hudson (JUG Stuttgart, 11.02.2010)Continuous Integration mit Hudson (JUG Stuttgart, 11.02.2010)
Continuous Integration mit Hudson (JUG Stuttgart, 11.02.2010)
 
Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!
 
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
 
HTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich istHTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich ist
 
DevOps der Triple-E Klasse - Eclipse DemoCamp
DevOps der Triple-E Klasse - Eclipse DemoCampDevOps der Triple-E Klasse - Eclipse DemoCamp
DevOps der Triple-E Klasse - Eclipse DemoCamp
 
Chrome for Work | CLOUDPILOTS FastTrack Update
Chrome for Work | CLOUDPILOTS FastTrack UpdateChrome for Work | CLOUDPILOTS FastTrack Update
Chrome for Work | CLOUDPILOTS FastTrack Update
 
Automatischer Build mit Maven
Automatischer Build mit MavenAutomatischer Build mit Maven
Automatischer Build mit Maven
 
Applikationsentwicklung für Android
Applikationsentwicklung für AndroidApplikationsentwicklung für Android
Applikationsentwicklung für Android
 

Andere mochten auch

Position & Float // MM 08-11
Position & Float // MM 08-11Position & Float // MM 08-11
Position & Float // MM 08-11
Noël Bossart
 
Fundraising Isa 071009
Fundraising Isa 071009Fundraising Isa 071009
Fundraising Isa 071009guestf18693
 
Formulare Lösungen
Formulare LösungenFormulare Lösungen
Formulare Lösungen
Noël Bossart
 
Entwicklung deutscher Wissenschafts-Medien
Entwicklung deutscher Wissenschafts-MedienEntwicklung deutscher Wissenschafts-Medien
Entwicklung deutscher Wissenschafts-Medien
Prof. Alexander Gerber
 
Vorstellung OSGi Users'-Forum Germany
Vorstellung OSGi Users'-Forum GermanyVorstellung OSGi Users'-Forum Germany
Vorstellung OSGi Users'-Forum GermanyKai Hackbarth
 
PräSentation1
PräSentation1PräSentation1
PräSentation1
Steuer
 
Patientenvortrag Ankylos
Patientenvortrag AnkylosPatientenvortrag Ankylos
Patientenvortrag Ankylos
Steuer
 
Webinar: 10 Zutaten für Ihre Weihnachtskampagne
Webinar: 10 Zutaten für Ihre WeihnachtskampagneWebinar: 10 Zutaten für Ihre Weihnachtskampagne
Webinar: 10 Zutaten für Ihre Weihnachtskampagne
optivo GmbH
 
Formulare
FormulareFormulare
Formulare
Noël Bossart
 
PresentacióN3
PresentacióN3PresentacióN3
PresentacióN3
yariely concepcion
 
Robo Memo Elpos Tagung
Robo Memo Elpos TagungRobo Memo Elpos Tagung
Robo Memo Elpos Tagungluzius
 
Realisierung von Service-Varianten und zustandsbehafteten Services aus Basis ...
Realisierung von Service-Varianten und zustandsbehafteten Services aus Basis ...Realisierung von Service-Varianten und zustandsbehafteten Services aus Basis ...
Realisierung von Service-Varianten und zustandsbehafteten Services aus Basis ...Kai Hackbarth
 
Fussball Euro 2012
Fussball Euro 2012Fussball Euro 2012
Fussball Euro 2012gueste3fea5
 
Hello World // MM 08-11
Hello World // MM 08-11Hello World // MM 08-11
Hello World // MM 08-11
Noël Bossart
 
GRAFFITI.
GRAFFITI.GRAFFITI.

Andere mochten auch (20)

Position & Float // MM 08-11
Position & Float // MM 08-11Position & Float // MM 08-11
Position & Float // MM 08-11
 
OKNOS Webservice
OKNOS WebserviceOKNOS Webservice
OKNOS Webservice
 
Fundraising Isa 071009
Fundraising Isa 071009Fundraising Isa 071009
Fundraising Isa 071009
 
WissJour20
WissJour20WissJour20
WissJour20
 
Formulare Lösungen
Formulare LösungenFormulare Lösungen
Formulare Lösungen
 
Entwicklung deutscher Wissenschafts-Medien
Entwicklung deutscher Wissenschafts-MedienEntwicklung deutscher Wissenschafts-Medien
Entwicklung deutscher Wissenschafts-Medien
 
Vorstellung OSGi Users'-Forum Germany
Vorstellung OSGi Users'-Forum GermanyVorstellung OSGi Users'-Forum Germany
Vorstellung OSGi Users'-Forum Germany
 
Einladung
EinladungEinladung
Einladung
 
D3 M4 U10 P1 GIOCO
D3 M4 U10 P1 GIOCOD3 M4 U10 P1 GIOCO
D3 M4 U10 P1 GIOCO
 
PräSentation1
PräSentation1PräSentation1
PräSentation1
 
Patientenvortrag Ankylos
Patientenvortrag AnkylosPatientenvortrag Ankylos
Patientenvortrag Ankylos
 
Webinar: 10 Zutaten für Ihre Weihnachtskampagne
Webinar: 10 Zutaten für Ihre WeihnachtskampagneWebinar: 10 Zutaten für Ihre Weihnachtskampagne
Webinar: 10 Zutaten für Ihre Weihnachtskampagne
 
Formulare
FormulareFormulare
Formulare
 
PresentacióN3
PresentacióN3PresentacióN3
PresentacióN3
 
Robo Memo Elpos Tagung
Robo Memo Elpos TagungRobo Memo Elpos Tagung
Robo Memo Elpos Tagung
 
Realisierung von Service-Varianten und zustandsbehafteten Services aus Basis ...
Realisierung von Service-Varianten und zustandsbehafteten Services aus Basis ...Realisierung von Service-Varianten und zustandsbehafteten Services aus Basis ...
Realisierung von Service-Varianten und zustandsbehafteten Services aus Basis ...
 
connect.me
connect.meconnect.me
connect.me
 
Fussball Euro 2012
Fussball Euro 2012Fussball Euro 2012
Fussball Euro 2012
 
Hello World // MM 08-11
Hello World // MM 08-11Hello World // MM 08-11
Hello World // MM 08-11
 
GRAFFITI.
GRAFFITI.GRAFFITI.
GRAFFITI.
 

Ähnlich wie Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache Cordova

Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Gregor Biswanger
 
iOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstelleniOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstellenMichael Kühnel
 
.NET Core, .NET Standard & ASP.NET Core - Eine Übersicht
.NET Core, .NET Standard & ASP.NET Core - Eine Übersicht.NET Core, .NET Standard & ASP.NET Core - Eine Übersicht
.NET Core, .NET Standard & ASP.NET Core - Eine Übersicht
Jürgen Gutsch
 
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT Group
 
ESE Conference: iOS, Android, WP7... Alle nativ auf einen Streich! streich
ESE Conference: iOS, Android, WP7...Alle nativ auf einen Streich! streichESE Conference: iOS, Android, WP7...Alle nativ auf einen Streich! streich
ESE Conference: iOS, Android, WP7... Alle nativ auf einen Streich! streich
Romano Roth
 
Mobile Development mit ASP.NET MVC 4
Mobile Development mit ASP.NET MVC 4Mobile Development mit ASP.NET MVC 4
Mobile Development mit ASP.NET MVC 4
Digicomp Academy AG
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-Apps
Ralf Lütke
 
CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...
CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...
CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...
Gordon Breuer
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
Markus Eiglsperger
 
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Digicomp Academy AG
 
Top 10 Internet Trends 2008
Top 10 Internet Trends 2008Top 10 Internet Trends 2008
Top 10 Internet Trends 2008
Jürg Stuker
 
B3 Lotus Expeditor Und Composite Applications
B3 Lotus Expeditor Und Composite ApplicationsB3 Lotus Expeditor Und Composite Applications
B3 Lotus Expeditor Und Composite Applications
Andreas Schulte
 
Android Entwicklung GTUG München 2009
Android Entwicklung GTUG München 2009Android Entwicklung GTUG München 2009
Android Entwicklung GTUG München 2009
greenrobot
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
Jürg Stuker
 
C / C++ Api for Beginners
C / C++ Api for BeginnersC / C++ Api for Beginners
C / C++ Api for Beginners
Ulrich Krause
 
PHPblue LOS!NRW
PHPblue LOS!NRWPHPblue LOS!NRW
PHPblue LOS!NRW
Andreas Schulte
 
Code-Generierung vereinfacht IoT-Entwicklung
Code-Generierung vereinfacht IoT-EntwicklungCode-Generierung vereinfacht IoT-Entwicklung
Code-Generierung vereinfacht IoT-Entwicklung
bhoeck
 
2008 - Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
2008 - Gewinnung von OPEN SOURCE Techniken für junge Unternehmen2008 - Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
2008 - Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
Bjoern Reinhold
 
WTC 2019 – Flutter
WTC 2019 – FlutterWTC 2019 – Flutter
WTC 2019 – Flutter
webconia
 
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
DNUG e.V.
 

Ähnlich wie Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache Cordova (20)

Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
 
iOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstelleniOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstellen
 
.NET Core, .NET Standard & ASP.NET Core - Eine Übersicht
.NET Core, .NET Standard & ASP.NET Core - Eine Übersicht.NET Core, .NET Standard & ASP.NET Core - Eine Übersicht
.NET Core, .NET Standard & ASP.NET Core - Eine Übersicht
 
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
 
ESE Conference: iOS, Android, WP7... Alle nativ auf einen Streich! streich
ESE Conference: iOS, Android, WP7...Alle nativ auf einen Streich! streichESE Conference: iOS, Android, WP7...Alle nativ auf einen Streich! streich
ESE Conference: iOS, Android, WP7... Alle nativ auf einen Streich! streich
 
Mobile Development mit ASP.NET MVC 4
Mobile Development mit ASP.NET MVC 4Mobile Development mit ASP.NET MVC 4
Mobile Development mit ASP.NET MVC 4
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-Apps
 
CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...
CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...
CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
 
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
 
Top 10 Internet Trends 2008
Top 10 Internet Trends 2008Top 10 Internet Trends 2008
Top 10 Internet Trends 2008
 
B3 Lotus Expeditor Und Composite Applications
B3 Lotus Expeditor Und Composite ApplicationsB3 Lotus Expeditor Und Composite Applications
B3 Lotus Expeditor Und Composite Applications
 
Android Entwicklung GTUG München 2009
Android Entwicklung GTUG München 2009Android Entwicklung GTUG München 2009
Android Entwicklung GTUG München 2009
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
C / C++ Api for Beginners
C / C++ Api for BeginnersC / C++ Api for Beginners
C / C++ Api for Beginners
 
PHPblue LOS!NRW
PHPblue LOS!NRWPHPblue LOS!NRW
PHPblue LOS!NRW
 
Code-Generierung vereinfacht IoT-Entwicklung
Code-Generierung vereinfacht IoT-EntwicklungCode-Generierung vereinfacht IoT-Entwicklung
Code-Generierung vereinfacht IoT-Entwicklung
 
2008 - Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
2008 - Gewinnung von OPEN SOURCE Techniken für junge Unternehmen2008 - Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
2008 - Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
 
WTC 2019 – Flutter
WTC 2019 – FlutterWTC 2019 – Flutter
WTC 2019 – Flutter
 
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
 

Mehr von Gregor Biswanger

Einführung in Clean Code mit .NET - Teil 1
Einführung in Clean Code mit .NET - Teil 1Einführung in Clean Code mit .NET - Teil 1
Einführung in Clean Code mit .NET - Teil 1
Gregor Biswanger
 
MongoDB: Entwurfsmuster für das NoSQL-Schema-Design
MongoDB: Entwurfsmuster für das NoSQL-Schema-DesignMongoDB: Entwurfsmuster für das NoSQL-Schema-Design
MongoDB: Entwurfsmuster für das NoSQL-Schema-Design
Gregor Biswanger
 
Yes zu NoSQL mit MongoDB für .NET-Entwickler
Yes zu NoSQL mit MongoDB für .NET-EntwicklerYes zu NoSQL mit MongoDB für .NET-Entwickler
Yes zu NoSQL mit MongoDB für .NET-Entwickler
Gregor Biswanger
 
Fachmodell-First: Einstieg in das NoSQL-Schema-Design
Fachmodell-First: Einstieg in das NoSQL-Schema-DesignFachmodell-First: Einstieg in das NoSQL-Schema-Design
Fachmodell-First: Einstieg in das NoSQL-Schema-Design
Gregor Biswanger
 
MongoDB: Security-Tipps gegen Hacker
MongoDB: Security-Tipps gegen HackerMongoDB: Security-Tipps gegen Hacker
MongoDB: Security-Tipps gegen Hacker
Gregor Biswanger
 
Clevere Tipps zum Thema Facebook Posts
Clevere Tipps zum Thema Facebook PostsClevere Tipps zum Thema Facebook Posts
Clevere Tipps zum Thema Facebook Posts
Gregor Biswanger
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
Gregor Biswanger
 
Multi Touch.Prio.Conference 2009
Multi Touch.Prio.Conference 2009Multi Touch.Prio.Conference 2009
Multi Touch.Prio.Conference 2009Gregor Biswanger
 

Mehr von Gregor Biswanger (8)

Einführung in Clean Code mit .NET - Teil 1
Einführung in Clean Code mit .NET - Teil 1Einführung in Clean Code mit .NET - Teil 1
Einführung in Clean Code mit .NET - Teil 1
 
MongoDB: Entwurfsmuster für das NoSQL-Schema-Design
MongoDB: Entwurfsmuster für das NoSQL-Schema-DesignMongoDB: Entwurfsmuster für das NoSQL-Schema-Design
MongoDB: Entwurfsmuster für das NoSQL-Schema-Design
 
Yes zu NoSQL mit MongoDB für .NET-Entwickler
Yes zu NoSQL mit MongoDB für .NET-EntwicklerYes zu NoSQL mit MongoDB für .NET-Entwickler
Yes zu NoSQL mit MongoDB für .NET-Entwickler
 
Fachmodell-First: Einstieg in das NoSQL-Schema-Design
Fachmodell-First: Einstieg in das NoSQL-Schema-DesignFachmodell-First: Einstieg in das NoSQL-Schema-Design
Fachmodell-First: Einstieg in das NoSQL-Schema-Design
 
MongoDB: Security-Tipps gegen Hacker
MongoDB: Security-Tipps gegen HackerMongoDB: Security-Tipps gegen Hacker
MongoDB: Security-Tipps gegen Hacker
 
Clevere Tipps zum Thema Facebook Posts
Clevere Tipps zum Thema Facebook PostsClevere Tipps zum Thema Facebook Posts
Clevere Tipps zum Thema Facebook Posts
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
 
Multi Touch.Prio.Conference 2009
Multi Touch.Prio.Conference 2009Multi Touch.Prio.Conference 2009
Multi Touch.Prio.Conference 2009
 

Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache Cordova

  • 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
  • 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
  • 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
  • 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
  • 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

Hinweis der Redaktion

  1. Tagboard.com