iEnterpriseMit HTML5 zum Unternehmens-Dashboard für Tablets                                     MobileTechCon 2011        ...
Me, Myself & I                    @stefan_kolb Social Media, baby!                    stefankolb.de My blog is my castleHi...
DashboardDen Überblick behalten                         http://www.enterprise-dashboard.com/img/cockpit-dashboard.jpg
Dashboard• dt.: Armaturenbrett, Instrumententafel• Überblick• Zustandsüberwachung
Dashboard• Computergestützte Applikation• Abbildung von (geschäftsrelevanten)  Daten & Fakten• Steuerungsinstrument
http://www.dashboardinsight.com/CMS/a43dcca8-cef5-48a8-97d9-c1bb02b286ee/CTUIT_RADAR_restaurant_performance_digital_dashbo...
http://3.bp.blogspot.com/_nIHqs6-wQqM/S83RaqDJBaI/AAAAAAAAA9U/WOAvNAM5NiA/s1600/LS+Trading+Screen+4-19-10.jpg
http://lhcdashboard.web.cern.ch/lhcdashboard/images/dashboard.png
ÜberfrachtetNavigation nicht eindeutig                                                  Bilder skalieren nicht            ...
http://www.flickr.com/photos/rebelation-arround-the-world/3431859257
http://t3n.de/news/wp-content/uploads/2010/04/Kontagent_Dashboard.jpg
http://blog.roundarch.com/wp-content/uploads/2010/09/BB_NFL_team_support2.png
MarktübersichtTablet PCs                 http://www.flickr.com/photos/mgr66/6030407016
Apple iPad 2              iOS 4  1024x768 / 132ppi          3G / WiFi      Mobile Safari  http://www.thinkdigit.com/FCKedi...
Motorola Xoom               Android 3.x         1280x800 / 150ppi                      WiFi      Android HTML Webkit  http...
Samsung Galaxy Tab 10.1                                           Android 3.x                                     1280x800...
BlackBerry PlayBook        BlackBerry Tablet OS           1024x600 / 123ppi                    3G / WiFi         BlackBerr...
HP TouchPad                            webOS                  1024x768 / 132ppi                               WiFi        ...
Warum Web-Tech?        http://www.flickr.com/photos/plainkacyjane/2254145745
Objective-C     Java           .NET                                      Silverlight                                      ...
Objective-C     Java           .NET                                      Silverlight                                      ...
Mobile app store overview                             Last updated: December 2, 2009                             For more ...
Mobile app store overview                             Last updated: December 2, 2009                             For more ...
http://nm7.org/sites/default/files/images/xHTML5_sticker.png.pagespeed.ic.nzyaNxFn3k.png
http://lh4.ggpht.com/__yGAwoTVvQg/TZD7WR5Kj5I/AAAAAAAAHSs/eLnDLGVOQ0w/MobileFever3%5B8%5D.png
Tablet-Applikationen• Use-Case Evaluierung • Einsatzgebiet definieren• Begrenzte Prozessor- und  Grafikleistung
Tablet-Applikationen• Skalierung von Schriften, Bildern,  Bedienelementen etc. • Bedienbarkeit gewährleisten• Nutzung ohne...
Web-App BausteineHTML, CSS, JavaScript                        http://www.macnotes.de/gimages/ipad2teardown/ipad2-einzeltei...
http://www.flickr.com/photos/dlisbona/4550704443
http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png
http://lh3.ggpht.com/_acf4FzpScrE/TWkyyOFxMjI/AAAAAAAAAOk/yib37WIhnuc/Semantic%5B7%5D.png
<form>http://nettuts.s3.amazonaws.com/881_html5Forms/demo/demo.html
<video>http://www.mediamaestro.net/PicsKarl/cameraEKcinespecial.jpg
<audio>http://www.mylespaul.com/gallery/data/548/425070_425075.jpg
DemoCanvas/SVG/WebGL                   http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
http://img.flamingeeks.com/2011/07/no_internet_today.jpg
http://www.flickr.com/photos/redhousewd/6079852166/
Media Queries
1024px
DemoCSS3 Transitions & Animations                      http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1...
JavaScript
DemoSencha Touch & jQuery Mobile                     http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d0...
DemoDatenvisualisierung                      http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33...
Fragen?               Bitte nicht so schwierige :!)       @stefan_kolbstefan.kolb@indiginox.com
THXI‘m up for beers                   http://hi-zu-mi.deviantart.com/art/The-Legendary-152264959
iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für Tablets
iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für Tablets
iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für Tablets
iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für Tablets
iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für Tablets
iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für Tablets
iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für Tablets
Upcoming SlideShare
Loading in...5
×

iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für Tablets

697

Published on

Vortrag von Stefan Kolb anlässlich der MTC 11 in Mainz zum Thema wie man Unternehmens-Dashboards mit Mobile-Web Technologien bauen kann.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
697
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für Tablets

  1. 1. iEnterpriseMit HTML5 zum Unternehmens-Dashboard für Tablets MobileTechCon 2011 13/Sep/2011 - Mainz, Germany Stefan Kolb Indiginox GmbH http://www.flickr.com/photos/bump/4487899229/
  2. 2. Me, Myself & I @stefan_kolb Social Media, baby! stefankolb.de My blog is my castleHier macht‘s Spaß :!) Softwareentwickler
  3. 3. DashboardDen Überblick behalten http://www.enterprise-dashboard.com/img/cockpit-dashboard.jpg
  4. 4. Dashboard• dt.: Armaturenbrett, Instrumententafel• Überblick• Zustandsüberwachung
  5. 5. Dashboard• Computergestützte Applikation• Abbildung von (geschäftsrelevanten) Daten & Fakten• Steuerungsinstrument
  6. 6. http://www.dashboardinsight.com/CMS/a43dcca8-cef5-48a8-97d9-c1bb02b286ee/CTUIT_RADAR_restaurant_performance_digital_dashboard.png
  7. 7. http://3.bp.blogspot.com/_nIHqs6-wQqM/S83RaqDJBaI/AAAAAAAAA9U/WOAvNAM5NiA/s1600/LS+Trading+Screen+4-19-10.jpg
  8. 8. http://lhcdashboard.web.cern.ch/lhcdashboard/images/dashboard.png
  9. 9. ÜberfrachtetNavigation nicht eindeutig Bilder skalieren nicht Schrift nicht lesbar Tabellenzeilen zu schmal Schwer zu bedienen
  10. 10. http://www.flickr.com/photos/rebelation-arround-the-world/3431859257
  11. 11. http://t3n.de/news/wp-content/uploads/2010/04/Kontagent_Dashboard.jpg
  12. 12. http://blog.roundarch.com/wp-content/uploads/2010/09/BB_NFL_team_support2.png
  13. 13. MarktübersichtTablet PCs http://www.flickr.com/photos/mgr66/6030407016
  14. 14. Apple iPad 2 iOS 4 1024x768 / 132ppi 3G / WiFi Mobile Safari http://www.thinkdigit.com/FCKeditor/uploads/Apple%20iPad2-2.jpg
  15. 15. Motorola Xoom Android 3.x 1280x800 / 150ppi WiFi Android HTML Webkit http://www.androidnet.de/wp-content/uploads/2011/05/XOOM_3G_seitlich-1010x1024.jpg
  16. 16. Samsung Galaxy Tab 10.1 Android 3.x 1280x800 / 149ppi 3G / WiFi Android Browser http://www.pcgameshardware.de/screenshots/original/2011/07/Samsung_Galaxy_Tab_10_1_2_screen.png
  17. 17. BlackBerry PlayBook BlackBerry Tablet OS 1024x600 / 123ppi 3G / WiFi BlackBerry Browser http://www.heise.de/imgs/18/6/3/0/3/7/4/playbook-b11604850412be09.png
  18. 18. HP TouchPad webOS 1024x768 / 132ppi WiFi webOS Browserhttp://www.channelinsider.de/wp-content/uploads/2011/07/HP-TouchPad-Card_Stacks.jpg
  19. 19. Warum Web-Tech? http://www.flickr.com/photos/plainkacyjane/2254145745
  20. 20. Objective-C Java .NET Silverlight XNA Qt Java Symbian-C ...
  21. 21. Objective-C Java .NET Silverlight XNA Qt Java Symbian-C ...
  22. 22. Mobile app store overview Last updated: December 2, 2009 For more information, check www.distimo.com Apple App Store Android Market Blackberry App World Nokia Ovi Store GetJar Palm App Catalog Samsung App Store Sony Ericsson PlayNow LG Application Store Windows Marketplace Handmark Intel Atom HandsterLaunch date Jul 11, 2008 Oct 22, 2008 Apr 1, 2009 May 26, 2009 Dec 1, 2004 Jun 6, 2009 Feb 3, 2009 Aug 10, 2009 Jul 13, 2009 Expected Q3 2009 Dec 1, 2000 - May 26, 2005Supported platforms iPhone OS Android OS Blackberry OS 4.2 Java, Symbian, Java, Symbian, Windows Palm webOS Symbian, Java, Symbian Windows Mobile Windows Mobile, Android, BlackBerry, Java, Java, Debian Moblin Windows Mobile, Symbian, and higher Flash Lite, Mobile, Palm, Blackberry, Windows Mobiile Widgets Palm, Palm Web OS, Native, Windows Native, Android OS, BlackBerry, WRT Widgets Flash Lite, Android Windows Mobile, Symbian Adobe AIR, RedHat Linux JavaAmount of Users 50M 1M 5-10M 5-10M 15M <1M 5MAvailable applications 105,000 15,000 3,500 7,500 14,000 250 1,000 3,700 1,400 - - - 5,700Total downloads 2,000,000,000 40,000,000 Undisclosed - 692,000,000 1,000,000 Undisclosed - - - - - 10,000,000Billing method iTunes Google checkout, opr. bill Paypal Credit card,operator billing Credit card Credit card Credit card, Paypal Credit card, premium SMS Credit card Credit card, operator billing - Credit card, paypal, operatorDeveloper revenue shareOne-off billingSubscription billingIn-app billing and counting... 70% Yes Yes Yes 70% Yes No No 80% Yes No No 70% Yes No No Undisclosed, in beta Yes No No 70% Yes No No 70% Yes No No - - - - 80% Yes No No 70% Yes No No Yes No No - 70% 60% Yes Yes Yes# countries for free apps 77 26 19 - - 2 1 13 2 - - - 103 App Stores# countries for paid apps 77 8 19 - - 0 1 13 2 - - -Countries http://tinyurl.com/6r45es http://tinyurl.com/pbrpz6 http://tinyurl.com/b8tz88 - Open worldwide US, Canada UK, France, Italy - Australia, Canada - Open worldwide Open worldwideDeveloper submission fee $99 $25 $200 $0 $0 $99 $0 $0 Undisclosed $99 - $99 $0Remarks Charges for operator Also provides white-label billing to be paid from app stores 70% developer rev share Mobango Vodafone 360 Java App Store Verizon VCast China Mobile Market T-Mobile web2go Software Store PocketGear Handango Archos AppsLib SlideME TIM App Store AndAppStoreLaunch date Dec 1, 2004 Expected end 2009 Undisclosed Expected Q4 2009 Aug 17, 2009 Nov 20, 2008 Sep 18, 2002 Jun 1, 2008 Jun 1, 2008 Sep 15, 2009 April, 2008 Expected Q1 2010 Oct 10, 2008Supported platforms Java, Symbian, Windows Undisclosed Java Windows Mobile, Palm, Windows Mobile, Android, BlackBerry, Android, BlackBerry, Blackberry, Palm Web OS, Android, Blackberry, Palm, Android Android JAVA, Brew, Flash, Android Mobile, Palm, Blackberry, Blackberry, Android, Android, Symbian Java, Mobile Web, Windows Mobile, Windows Mobile, Symbian Windows Mobile, Symbian Android. To be added: Flash Lite, Android Symbian Sidekick, Windows Windows Mobile, Mobile Symbian, Palm, LiMoAmount of Users 40M subscribers -Available applications 24,000 - - - - - 70,000 - 66 292 - 258Total downloads to date - - - - - - 100,000,000 100,000,000 - - - 160,000Billing method - Operator billing - Operator billing - Credit card Credit card, Paypal - Credit card, Amazon - PayPalDeveloper revenue share - 70% - 70% 70% 70% 60% 60% - - - 100%One-off billing No Yes - Yes - Yes Yes Yes No Yes - YesSubscription billing No Yes - Yes - Yes No No No No - NoIn-app billing No Yes - Yes - No No No No No - No# countries for free apps - - - - - 1 - - - - 1 -# countries for paid apps - - - - - 1 - - - - 1 All PayPal countriesCountries Open worldwide - - - China United States Open worldwide Open worldwide Open worldwide Open worldwide Brazil Open worldwideDeveloper submission fee $0 - - - - - - - - - - $0Remarks Provided by Handmark Targets Android devices without Google’s approval to include Android Market http://www.distimo.com/uploads/mobile%20app%20store%20overview.pdf
  23. 23. Mobile app store overview Last updated: December 2, 2009 For more information, check www.distimo.com Apple App Store Android Market Blackberry App World Nokia Ovi Store GetJar Palm App Catalog Samsung App Store Sony Ericsson PlayNow LG Application Store Windows Marketplace Handmark Intel Atom HandsterLaunch date Jul 11, 2008 Oct 22, 2008 Apr 1, 2009 May 26, 2009 Dec 1, 2004 Jun 6, 2009 Feb 3, 2009 Aug 10, 2009 Jul 13, 2009 Expected Q3 2009 Dec 1, 2000 - May 26, 2005Supported platforms iPhone OS Android OS Blackberry OS 4.2 Java, Symbian, Java, Symbian, Windows Palm webOS Symbian, Java, Symbian Windows Mobile Windows Mobile, Android, BlackBerry, Java, Java, Debian Moblin Windows Mobile, Symbian, and higher Flash Lite, Mobile, Palm, Blackberry, Windows Mobiile Widgets Palm, Palm Web OS, Native, Windows Native, Android OS, BlackBerry, WRT Widgets Flash Lite, Android Windows Mobile, Symbian Adobe AIR, RedHat Linux JavaAmount of Users 50M 1M 5-10M 5-10M 15M <1M 5MAvailable applications 105,000 15,000 3,500 7,500 14,000 250 1,000 3,700 1,400 - - - 5,700Total downloads 2,000,000,000 40,000,000 Undisclosed - 692,000,000 1,000,000 Undisclosed - - - - - 10,000,000Billing method iTunes Google checkout, opr. bill Paypal Credit card,operator billing Credit card Credit card Credit card, Paypal Credit card, premium SMS Credit card Credit card, operator billing - Credit card, paypal, operatorDeveloper revenue shareOne-off billingSubscription billingIn-app billing and counting... 70% Yes Yes Yes 70% Yes No No 80% Yes No No 70% Yes No No Undisclosed, in beta Yes No No 70% Yes No No 70% Yes No No - - - - 80% Yes No No 70% Yes No No Yes No No - 70% 60% Yes Yes Yes# countries for free apps 77 26 19 - - 2 1 13 2 - - - 103 App Stores# countries for paid apps 77 8 19 - - 0 1 13 2 - - -Countries http://tinyurl.com/6r45es http://tinyurl.com/pbrpz6 http://tinyurl.com/b8tz88 - Open worldwide US, Canada UK, France, Italy - Australia, Canada - Open worldwide Open worldwideDeveloper submission fee $99 $25 $200 $0 $0 $99 $0 $0 Undisclosed $99 - $99 $0Remarks Charges for operator Also provides white-label billing to be paid from app stores 70% developer rev share Mobango Vodafone 360 Java App Store Verizon VCast China Mobile Market T-Mobile web2go Software Store PocketGear Handango Archos AppsLib SlideME TIM App Store AndAppStoreLaunch date Dec 1, 2004 Expected end 2009 Undisclosed Expected Q4 2009 Aug 17, 2009 Nov 20, 2008 Sep 18, 2002 Jun 1, 2008 Jun 1, 2008 Sep 15, 2009 April, 2008 Expected Q1 2010 Oct 10, 2008Supported platforms Java, Symbian, Windows Undisclosed Java Windows Mobile, Palm, Windows Mobile, Android, BlackBerry, Android, BlackBerry, Blackberry, Palm Web OS, Android, Blackberry, Palm, Android Android JAVA, Brew, Flash, Android Mobile, Palm, Blackberry, Blackberry, Android, Android, Symbian Java, Mobile Web, Windows Mobile, Windows Mobile, Symbian Windows Mobile, Symbian Android. To be added: Flash Lite, Android Symbian Sidekick, Windows Windows Mobile, Mobile Symbian, Palm, LiMoAmount of Users 40M subscribers -Available applications 24,000 - - - - - 70,000 - 66 292 - 258Total downloads to date - - - - - - 100,000,000 100,000,000 - - - 160,000Billing method - Operator billing - Operator billing - Credit card Credit card, Paypal - Credit card, Amazon - PayPalDeveloper revenue share - 70% - 70% 70% 70% 60% 60% - - - 100%One-off billing No Yes - Yes - Yes Yes Yes No Yes - YesSubscription billing No Yes - Yes - Yes No No No No - NoIn-app billing No Yes - Yes - No No No No No - No# countries for free apps - - - - - 1 - - - - 1 -# countries for paid apps - - - - - 1 - - - - 1 All PayPal countriesCountries Open worldwide - - - China United States Open worldwide Open worldwide Open worldwide Open worldwide Brazil Open worldwideDeveloper submission fee $0 - - - - - - - - - - $0Remarks Provided by Handmark Targets Android devices without Google’s approval to include Android Market http://www.distimo.com/uploads/mobile%20app%20store%20overview.pdf
  24. 24. http://nm7.org/sites/default/files/images/xHTML5_sticker.png.pagespeed.ic.nzyaNxFn3k.png
  25. 25. http://lh4.ggpht.com/__yGAwoTVvQg/TZD7WR5Kj5I/AAAAAAAAHSs/eLnDLGVOQ0w/MobileFever3%5B8%5D.png
  26. 26. Tablet-Applikationen• Use-Case Evaluierung • Einsatzgebiet definieren• Begrenzte Prozessor- und Grafikleistung
  27. 27. Tablet-Applikationen• Skalierung von Schriften, Bildern, Bedienelementen etc. • Bedienbarkeit gewährleisten• Nutzung ohne Datenverbindung
  28. 28. Web-App BausteineHTML, CSS, JavaScript http://www.macnotes.de/gimages/ipad2teardown/ipad2-einzelteile.jpg
  29. 29. http://www.flickr.com/photos/dlisbona/4550704443
  30. 30. http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png
  31. 31. http://lh3.ggpht.com/_acf4FzpScrE/TWkyyOFxMjI/AAAAAAAAAOk/yib37WIhnuc/Semantic%5B7%5D.png
  32. 32. <form>http://nettuts.s3.amazonaws.com/881_html5Forms/demo/demo.html
  33. 33. <video>http://www.mediamaestro.net/PicsKarl/cameraEKcinespecial.jpg
  34. 34. <audio>http://www.mylespaul.com/gallery/data/548/425070_425075.jpg
  35. 35. DemoCanvas/SVG/WebGL http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
  36. 36. http://img.flamingeeks.com/2011/07/no_internet_today.jpg
  37. 37. http://www.flickr.com/photos/redhousewd/6079852166/
  38. 38. Media Queries
  39. 39. 1024px
  40. 40. DemoCSS3 Transitions & Animations http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
  41. 41. JavaScript
  42. 42. DemoSencha Touch & jQuery Mobile http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
  43. 43. DemoDatenvisualisierung http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg
  44. 44. Fragen? Bitte nicht so schwierige :!) @stefan_kolbstefan.kolb@indiginox.com
  45. 45. THXI‘m up for beers http://hi-zu-mi.deviantart.com/art/The-Legendary-152264959
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×