SlideShare ist ein Scribd-Unternehmen logo
1 von 29
Downloaden Sie, um offline zu lesen
16.11.2015  111.09.2012  1
USER INTERFACE-TRENDS FÜR
GESCHÄFTSANWENDUNGEN
Lösungsansätze und Plattformen
16.11.2015  211.09.2012  2
MOBILE
APPLICATION DEVELOPMENT
16.11.2015  311.09.2012  3
16.11.2015  411.09.2012  4
NATIVE VS. HTML 5
16.11.2015  511.09.2012  5
NATIVE VS. HTML 5
NATIVE
 Performance
 Security
 User Interface
 Device-Funktionalitäten
 Offline nutzbar
HTML 5
 Breites Zielpublikum
ansprechen
 Cross-Plattform Potential
von HTML 5 nutzen
 Simples Management/
Updates von Apps
16.11.2015  611.09.2012  6
HYBRIDS: BEST OF TWO WORLDS ?
NATIVE
HTML 5
NATIVEHTML 5
 HTML Inhalte
 CSS
 JavaScript
 Portable HTML5
 Soviel native
wie nötig
 Voller Zugriff
 Keine
Portabilität
16.11.2015  711.09.2012  7
CAPABILITY VS. PORTABILITY
http://wiki.developerforce.com
16.11.2015  811.09.2012  8
PHONEGAP
 Full-Screen UI (Native Wrapper)
 JavaScript API ermöglicht Zugriffe auf Native-
Funktionalitäten
16.11.2015  911.09.2012  9
PHONEGAP
 Entwicklung mit HTML5, CSS3 & JavaScript
 Endprodukt = Binary application archive
 Verteilung durch Plattform Stores
16.11.2015  1011.09.2012  10
CROSS PLATTFORM APPS WITH
HTML 5
16.11.2015  1111.09.2012  11
HTML5 – WAS IST DAS?
 Rich Web-Experience
 basierend auf Web-Standards
 Keine Plugins
16.11.2015  1211.09.2012  12
HTML5
 Neue Version von HTML
– Alles aus HTML 4, plus
– Einfacherer Doctype
– Sematische Tags
<header>, <footer>, <nav>, <details>, <figure>, etc…
– Multimedia <video> und <audio>
– WebForms
 SVG Support
16.11.2015  1311.09.2012  13
CSS3
 Alles aus CSS2, plus:
– Rounded corners
– Drop shadows
– RGBA & HSLA colors
– CSS Media Queries
– Pseudo-class selectors
– Web fonts
– Rich formatting & multi-column layouts
16.11.2015  1411.09.2012  14
NEUE API
 Canvas
 Drag & Drop
 History
 Inline Editing
 Messaging
 Offline Apps
 Geolocation
 Local Storage
 Selectors
 Server Events
 WebSockets
 Workers
16.11.2015  1511.09.2012  15
APPLICATION ARCHITECTURE
16.11.2015  1611.09.2012  16
SINGLE-PAGE APPLICATIONS
 «Rich, responsive applications combining the best of web
and desktop, built with HTML5 and JavaScript»
 Client und Application Server
 Communication (HTTP Requests for HTML content, RESTful
XML services, JSON services or SOAP, or WebSockets (if
supported) (similar to desktop browser based AJAX-
Applications)
16.11.2015  1711.09.2012  17
Client
Single Page Application
Server
USER INTERFACE TECHNOLOGIEN
Visible UI
HTML & CSS
Application Layer
JavaScript
Data Access Layer
JavaScript
Local Storage
HTML 5
Nav
APIs
Web
Forms
ASP.NET
SITESSERVICES
MVC
WebAPI
SignalR
Dev Tools
Visual Studio 2012
HTML/
CSS/JS
JSON/
XML
16.11.2015  1811.09.2012  18
16.11.2015  1911.09.2012  19
16.11.2015  2011.09.2012  20
16.11.2015  2111.09.2012  21
UNTERSCHIEDLICHE DISPLAYS
 Device/Browser fragmentation
 Screen sizes
 Etc.
16.11.2015  2211.09.2012  22
UNTERSCHIEDLICHE DISPLAYS
16.11.2015  2311.09.2012  23
16.11.2015  2411.09.2012  24
MOBILE WEB WITH ASP.NET MVC 4
 Adaptive Rendering
– Einsatz von CSS Media Queries in Standard Templates
 Display Modes
– Selectively adapt views based on devices
 Mobile Optimized Templates
– jQuery Mobile
16.11.2015  2511.09.2012  25
WINDOWS 8
16.11.2015  2611.09.2012  26
Cloud-
connected
Builtona
solid
foundation
Getmoreat
theWindows
Store
Athomeand
atwork
Alltheapps
youwant
Reimagined
browsing
withIE10
Windows
reimagined
Great
experience
across
hardware
WINDOWS 8
16.11.2015  2711.09.2012  27
KEY INVESTMENTS
 New Windows Runtime (WinRT)
 New Windows 8 User Experience
 New App Execution Environment
 Windows Store
16.11.2015  2811.09.2012  28
WINDOWS 8 PLATFORM
Sty
16.11.2015  2911.09.2012  29
VERGLEICH DESKTOP / METRO
Metro Apps Desktop Software
Haupt-Eingabemedium Touch Maus/Tastatur
UI-Style Metro Windows
Runtime WinRT (Win32) .NET/SL/Win32
Verteilung Windows Store Download Webseite
Installation .appx Package MSI
Systemzugriff Nur über WinRT Voller Zugriff

Weitere ähnliche Inhalte

Ähnlich wie User Interface Trends für Geschäftsanwendungen

iOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstelleniOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstellen
Michael Kühnel
 
Roadmap von Microsoft UI Technologien und Windows 8
Roadmap von Microsoft UI Technologien und Windows 8Roadmap von Microsoft UI Technologien und Windows 8
Roadmap von Microsoft UI Technologien und Windows 8
chmoser79
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Peter Rozek
 
Dominik Helleberg Widgets Wjax
Dominik Helleberg Widgets WjaxDominik Helleberg Widgets Wjax
Dominik Helleberg Widgets Wjax
Dominik Helleberg
 

Ähnlich wie User Interface Trends für Geschäftsanwendungen (20)

Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
iOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstelleniOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstellen
 
Top 10 Internet Trends 2011
Top 10 Internet Trends 2011Top 10 Internet Trends 2011
Top 10 Internet Trends 2011
 
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
 
Roadmap von Microsoft UI Technologien und Windows 8
Roadmap von Microsoft UI Technologien und Windows 8Roadmap von Microsoft UI Technologien und Windows 8
Roadmap von Microsoft UI Technologien und Windows 8
 
Roadmap von Microsoft UI-Technologien und Windows 8
Roadmap von Microsoft UI-Technologien und Windows 8Roadmap von Microsoft UI-Technologien und Windows 8
Roadmap von Microsoft UI-Technologien und Windows 8
 
Überblick zu MVC6 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu MVC6 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015Überblick zu MVC6 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu MVC6 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
 
Mobile Anwendungen mit Apache Cordova
Mobile Anwendungen mit Apache CordovaMobile Anwendungen mit Apache Cordova
Mobile Anwendungen mit Apache Cordova
 
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
 
Mobile und Trends.
Mobile und Trends.Mobile und Trends.
Mobile und Trends.
 
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
 
Rapid Application Development mit Openobject
Rapid Application Development mit OpenobjectRapid Application Development mit Openobject
Rapid Application Development mit Openobject
 
DACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdf
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
Thin, Rich und RIA Clients entwirrt -- und Faktoren, die Sie zum geeigneten C...
Thin, Rich und RIA Clients entwirrt -- und Faktoren, die Sie zum geeigneten C...Thin, Rich und RIA Clients entwirrt -- und Faktoren, die Sie zum geeigneten C...
Thin, Rich und RIA Clients entwirrt -- und Faktoren, die Sie zum geeigneten C...
 
Multichannel Application Development Best Practices
Multichannel Application Development Best PracticesMultichannel Application Development Best Practices
Multichannel Application Development Best Practices
 
Dominik Helleberg Widgets Wjax
Dominik Helleberg Widgets WjaxDominik Helleberg Widgets Wjax
Dominik Helleberg Widgets Wjax
 
W3C/DFKI Automotive Workshop
W3C/DFKI Automotive WorkshopW3C/DFKI Automotive Workshop
W3C/DFKI Automotive Workshop
 
HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)
 

User Interface Trends für Geschäftsanwendungen

  • 1. 16.11.2015  111.09.2012  1 USER INTERFACE-TRENDS FÜR GESCHÄFTSANWENDUNGEN Lösungsansätze und Plattformen
  • 2. 16.11.2015  211.09.2012  2 MOBILE APPLICATION DEVELOPMENT
  • 4. 16.11.2015  411.09.2012  4 NATIVE VS. HTML 5
  • 5. 16.11.2015  511.09.2012  5 NATIVE VS. HTML 5 NATIVE  Performance  Security  User Interface  Device-Funktionalitäten  Offline nutzbar HTML 5  Breites Zielpublikum ansprechen  Cross-Plattform Potential von HTML 5 nutzen  Simples Management/ Updates von Apps
  • 6. 16.11.2015  611.09.2012  6 HYBRIDS: BEST OF TWO WORLDS ? NATIVE HTML 5 NATIVEHTML 5  HTML Inhalte  CSS  JavaScript  Portable HTML5  Soviel native wie nötig  Voller Zugriff  Keine Portabilität
  • 7. 16.11.2015  711.09.2012  7 CAPABILITY VS. PORTABILITY http://wiki.developerforce.com
  • 8. 16.11.2015  811.09.2012  8 PHONEGAP  Full-Screen UI (Native Wrapper)  JavaScript API ermöglicht Zugriffe auf Native- Funktionalitäten
  • 9. 16.11.2015  911.09.2012  9 PHONEGAP  Entwicklung mit HTML5, CSS3 & JavaScript  Endprodukt = Binary application archive  Verteilung durch Plattform Stores
  • 10. 16.11.2015  1011.09.2012  10 CROSS PLATTFORM APPS WITH HTML 5
  • 11. 16.11.2015  1111.09.2012  11 HTML5 – WAS IST DAS?  Rich Web-Experience  basierend auf Web-Standards  Keine Plugins
  • 12. 16.11.2015  1211.09.2012  12 HTML5  Neue Version von HTML – Alles aus HTML 4, plus – Einfacherer Doctype – Sematische Tags <header>, <footer>, <nav>, <details>, <figure>, etc… – Multimedia <video> und <audio> – WebForms  SVG Support
  • 13. 16.11.2015  1311.09.2012  13 CSS3  Alles aus CSS2, plus: – Rounded corners – Drop shadows – RGBA & HSLA colors – CSS Media Queries – Pseudo-class selectors – Web fonts – Rich formatting & multi-column layouts
  • 14. 16.11.2015  1411.09.2012  14 NEUE API  Canvas  Drag & Drop  History  Inline Editing  Messaging  Offline Apps  Geolocation  Local Storage  Selectors  Server Events  WebSockets  Workers
  • 15. 16.11.2015  1511.09.2012  15 APPLICATION ARCHITECTURE
  • 16. 16.11.2015  1611.09.2012  16 SINGLE-PAGE APPLICATIONS  «Rich, responsive applications combining the best of web and desktop, built with HTML5 and JavaScript»  Client und Application Server  Communication (HTTP Requests for HTML content, RESTful XML services, JSON services or SOAP, or WebSockets (if supported) (similar to desktop browser based AJAX- Applications)
  • 17. 16.11.2015  1711.09.2012  17 Client Single Page Application Server USER INTERFACE TECHNOLOGIEN Visible UI HTML & CSS Application Layer JavaScript Data Access Layer JavaScript Local Storage HTML 5 Nav APIs Web Forms ASP.NET SITESSERVICES MVC WebAPI SignalR Dev Tools Visual Studio 2012 HTML/ CSS/JS JSON/ XML
  • 21. 16.11.2015  2111.09.2012  21 UNTERSCHIEDLICHE DISPLAYS  Device/Browser fragmentation  Screen sizes  Etc.
  • 22. 16.11.2015  2211.09.2012  22 UNTERSCHIEDLICHE DISPLAYS
  • 24. 16.11.2015  2411.09.2012  24 MOBILE WEB WITH ASP.NET MVC 4  Adaptive Rendering – Einsatz von CSS Media Queries in Standard Templates  Display Modes – Selectively adapt views based on devices  Mobile Optimized Templates – jQuery Mobile
  • 25. 16.11.2015  2511.09.2012  25 WINDOWS 8
  • 26. 16.11.2015  2611.09.2012  26 Cloud- connected Builtona solid foundation Getmoreat theWindows Store Athomeand atwork Alltheapps youwant Reimagined browsing withIE10 Windows reimagined Great experience across hardware WINDOWS 8
  • 27. 16.11.2015  2711.09.2012  27 KEY INVESTMENTS  New Windows Runtime (WinRT)  New Windows 8 User Experience  New App Execution Environment  Windows Store
  • 28. 16.11.2015  2811.09.2012  28 WINDOWS 8 PLATFORM Sty
  • 29. 16.11.2015  2911.09.2012  29 VERGLEICH DESKTOP / METRO Metro Apps Desktop Software Haupt-Eingabemedium Touch Maus/Tastatur UI-Style Metro Windows Runtime WinRT (Win32) .NET/SL/Win32 Verteilung Windows Store Download Webseite Installation .appx Package MSI Systemzugriff Nur über WinRT Voller Zugriff