+ All Categories
Home > Technology > iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

Date post: 01-Nov-2014
Category:
Upload: stefan-kolb
View: 563 times
Download: 1 times
Share this document with a friend
Description:
Note: Slides are mostly in German
Popular Tags:
53
iEnterprise Mit 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/
Transcript
Page 1: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

iEnterpriseMit HTML5 zum Unternehmens-Dashboard für Tablets

MobileTechCon 201113/Sep/2011 - Mainz, Germany

Stefan KolbIndiginox GmbH

http://www.flickr.com/photos/bump/4487899229/

Page 2: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

Me, Myself & I

@stefan_kolb Social Media, baby!

stefankolb.de My blog is my castle

Softwareentwickler

Hier macht‘s Spaß :-)

Page 3: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

Den Überblick behalten

Dashboard

http://www.enterprise-dashboard.com/img/cockpit-dashboard.jpg

Page 4: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

Dashboard

• dt.: Armaturenbrett, Instrumententafel

• Überblick

• Zustandsüberwachung

Page 5: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

Dashboard

• Computergestützte Applikation

• Abbildung von (geschäftsrelevanten) Daten & Fakten

• Steuerungsinstrument

Page 6: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

http://www.dashboardinsight.com/CMS/a43dcca8-cef5-48a8-97d9-c1bb02b286ee/CTUIT_RADAR_restaurant_performance_digital_dashboard.png

Page 7: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

http://3.bp.blogspot.com/_nIHqs6-wQqM/S83RaqDJBaI/AAAAAAAAA9U/WOAvNAM5NiA/s1600/LS+Trading+Screen+4-19-10.jpg

Page 8: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

http://lhcdashboard.web.cern.ch/lhcdashboard/images/dashboard.png

Page 9: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
Page 10: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
Page 11: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
Page 12: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

Schrift nicht lesbarSchwer zu bedienen

Überfrachtet

Tabellenzeilen zu schmal

Navigation nicht eindeutigBilder skalieren nicht

Page 13: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

http://www.flickr.com/photos/rebelation-arround-the-world/3431859257

Page 14: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

http://t3n.de/news/wp-content/uploads/2010/04/Kontagent_Dashboard.jpg

Page 16: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

Tablet PCs

Marktübersicht

http://www.flickr.com/photos/mgr66/6030407016

Page 17: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

Apple iPad 2

http://www.thinkdigit.com/FCKeditor/uploads/Apple%20iPad2-2.jpg

iOS 4 1024x768 / 132ppi

3G / WiFiMobile Safari

Page 18: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

Motorola Xoom

http://www.androidnet.de/wp-content/uploads/2011/05/XOOM_3G_seitlich-1010x1024.jpg

Android 3.x1280x800 / 150ppi

WiFiAndroid HTML Webkit

Page 19: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

Samsung Galaxy Tab 10.1

http://www.pcgameshardware.de/screenshots/original/2011/07/Samsung_Galaxy_Tab_10_1_2_screen.png

Android 3.x 1280x800 / 149ppi

3G / WiFiAndroid Browser

Page 20: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

BlackBerry PlayBook

http://www.heise.de/imgs/18/6/3/0/3/7/4/playbook-b11604850412be09.png

BlackBerry Tablet OS 1024x600 / 123ppi

3G / WiFiBlackBerry Browser

Page 21: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

HP TouchPad

http://www.channelinsider.de/wp-content/uploads/2011/07/HP-TouchPad-Card_Stacks.jpg

webOS 1024x768 / 132ppi

WiFiwebOS Browser

Page 22: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

Warum Web-Tech?

http://www.flickr.com/photos/plainkacyjane/2254145745

Page 23: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

. . .

Objective-C Java .NETSilverlightXNA

Java Symbian-C

Qt

Page 24: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

. . .

Objective-C Java .NETSilverlightXNA

Java Symbian-C

Qt

Page 25: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

http://www.distimo.com/uploads/mobile%20app%20store%20overview.pdf

Mobile app store overviewLast updated: December 2, 2009For more information, check

Mobile app store overviewLast updated: December 2, 2009For 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, 2005

Supported platforms iPhone OS Android OS Blackberry OS 4.2 and higher

Java, Symbian,Flash Lite,

WRT Widgets

Java, Symbian, Windows Mobile, Palm, Blackberry,

Flash Lite, Android

Palm webOS Symbian, Windows Mobiile

Java, Symbian Windows Mobile Windows Mobile,Widgets

Android, BlackBerry, Java, Palm, Palm Web OS,

Windows Mobile, Symbian

Java, Debian Moblin Native, Windows Native,

Adobe AIR, RedHat Linux

Windows Mobile, Symbian, Android OS, BlackBerry,

Java

Amount 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,000

Billing 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 billingCredit card, operator billing - Credit card, paypal, operatorDeveloper revenue share 70% 70% 80% 70% Undisclosed, in beta 70% 70% - 80% 70% - 70% 60%One-off billing Yes Yes Yes Yes Yes Yes Yes - Yes Yes Yes YesSubscription billing Yes No No No No No No - No No No YesIn-app billing Yes No No No No No No - No No No Yes

# countries for free apps 77 26 19 - - 2 1 13 2 - - -# 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 worldwide

Developer submission fee $99 $25 $200 $0 $0 $99 $0 $0 Undisclosed $99 - $99 $0Remarks Charges for operator

billing to be paid from 70% developer rev share

Also provides white-label app stores

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, 2008

Supported platforms Java, Symbian, Windows Mobile, Palm, Blackberry,

Flash Lite, Android

Undisclosed Java Windows Mobile, Palm, Blackberry, Android,

Symbian

Windows Mobile, Android, Symbian

Android, BlackBerry, Java, Mobile Web, Sidekick, Windows

Mobile

Android, BlackBerry, Windows Mobile,

Blackberry, Palm Web OS, Windows Mobile, Symbian

Android, Blackberry, Palm, Windows Mobile, Symbian

Android Android JAVA, Brew, Flash, Android. To be added:

Windows Mobile, Symbian, Palm, LiMo

Android

Amount of Users 40M subscribers -Available applications 24,000 - - - - - 70,000 - 66 292 - 258Total downloads to date - - - - - - 100,000,000 100,000,000 - - - 160,000

Billing 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 worldwide

Developer submission fee $0 - - - - - - - - - - $0Remarks Provided by Handmark Targets Android devices

without Google’s approval to include Android Market

103 App Storesand counting...

Page 26: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

http://www.distimo.com/uploads/mobile%20app%20store%20overview.pdf

Mobile app store overviewLast updated: December 2, 2009For more information, check

Mobile app store overviewLast updated: December 2, 2009For 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, 2005

Supported platforms iPhone OS Android OS Blackberry OS 4.2 and higher

Java, Symbian,Flash Lite,

WRT Widgets

Java, Symbian, Windows Mobile, Palm, Blackberry,

Flash Lite, Android

Palm webOS Symbian, Windows Mobiile

Java, Symbian Windows Mobile Windows Mobile,Widgets

Android, BlackBerry, Java, Palm, Palm Web OS,

Windows Mobile, Symbian

Java, Debian Moblin Native, Windows Native,

Adobe AIR, RedHat Linux

Windows Mobile, Symbian, Android OS, BlackBerry,

Java

Amount 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,000

Billing 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 billingCredit card, operator billing - Credit card, paypal, operatorDeveloper revenue share 70% 70% 80% 70% Undisclosed, in beta 70% 70% - 80% 70% - 70% 60%One-off billing Yes Yes Yes Yes Yes Yes Yes - Yes Yes Yes YesSubscription billing Yes No No No No No No - No No No YesIn-app billing Yes No No No No No No - No No No Yes

# countries for free apps 77 26 19 - - 2 1 13 2 - - -# 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 worldwide

Developer submission fee $99 $25 $200 $0 $0 $99 $0 $0 Undisclosed $99 - $99 $0Remarks Charges for operator

billing to be paid from 70% developer rev share

Also provides white-label app stores

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, 2008

Supported platforms Java, Symbian, Windows Mobile, Palm, Blackberry,

Flash Lite, Android

Undisclosed Java Windows Mobile, Palm, Blackberry, Android,

Symbian

Windows Mobile, Android, Symbian

Android, BlackBerry, Java, Mobile Web, Sidekick, Windows

Mobile

Android, BlackBerry, Windows Mobile,

Blackberry, Palm Web OS, Windows Mobile, Symbian

Android, Blackberry, Palm, Windows Mobile, Symbian

Android Android JAVA, Brew, Flash, Android. To be added:

Windows Mobile, Symbian, Palm, LiMo

Android

Amount of Users 40M subscribers -Available applications 24,000 - - - - - 70,000 - 66 292 - 258Total downloads to date - - - - - - 100,000,000 100,000,000 - - - 160,000

Billing 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 worldwide

Developer submission fee $0 - - - - - - - - - - $0Remarks Provided by Handmark Targets Android devices

without Google’s approval to include Android Market

103 App Storesand counting...

Page 27: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

http://nm7.org/sites/default/files/images/xHTML5_sticker.png.pagespeed.ic.nzyaNxFn3k.png

Page 28: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

http://lh4.ggpht.com/__yGAwoTVvQg/TZD7WR5Kj5I/AAAAAAAAHSs/eLnDLGVOQ0w/MobileFever3%5B8%5D.png

Page 29: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

Tablet-Applikationen

• Use-Case Evaluierung

• Einsatzgebiet definieren

• Begrenzte Prozessor- und Grafikleistung

Page 30: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

Tablet-Applikationen

• Skalierung von Schriften, Bildern, Bedienelementen etc.

• Bedienbarkeit gewährleisten

• Nutzung ohne Datenverbindung

Page 31: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

HTML, CSS, JavaScript

Web-App Bausteine

http://www.macnotes.de/gimages/ipad2teardown/ipad2-einzelteile.jpg

Page 32: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

http://www.flickr.com/photos/dlisbona/4550704443

Page 33: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png

Page 34: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

http://lh3.ggpht.com/_acf4FzpScrE/TWkyyOFxMjI/AAAAAAAAAOk/yib37WIhnuc/Semantic%5B7%5D.png

Page 35: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

<form>

http://nettuts.s3.amazonaws.com/881_html5Forms/demo/demo.html

Page 36: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

<video>

http://www.mediamaestro.net/PicsKarl/cameraEKcinespecial.jpg

Page 37: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

<audio>

http://www.mylespaul.com/gallery/data/548/425070_425075.jpg

Page 38: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg

Canvas/SVG/WebGL

Demo

Page 39: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

http://img.flamingeeks.com/2011/07/no_internet_today.jpg

Page 40: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

http://www.flickr.com/photos/redhousewd/6079852166/

Page 41: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

Media Queries

Page 42: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

1024px

Page 43: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
Page 44: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
Page 45: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
Page 46: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg

CSS3 Transitions & Animations

Demo

Page 47: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

JavaScript

Page 48: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
Page 49: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
Page 50: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg

Sencha Touch & jQuery Mobile

Demo

Page 51: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

http://media.oregonlive.com/ent_impact_arts/photo/leventijpg-1275f1d04cd5ba33.jpg

Datenvisualisierung

Demo

Page 52: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

Fragen?Bitte nicht so schwierige :-)

@[email protected]

Page 53: iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets

I‘m up for beers

THX

http://hi-zu-mi.deviantart.com/art/The-Legendary-152264959


Recommended