SlideShare ist ein Scribd-Unternehmen logo
1 von 56
Downloaden Sie, um offline zu lesen
Mobile Apps
                         Cross Platform
                          HTML5 Apps
                             Wolfram Kriesing
                                  uxebu



Mittwoch, 12. Mai 2010
We open the mobile web.




Mittwoch, 12. Mai 2010
Mittwoch, 12. Mai 2010
Mittwoch, 12. Mai 2010
Landscape
                         http://www.flickr.com/photos/tillwe/146242691/

Mittwoch, 12. Mai 2010
Landscape
                         http://www.flickr.com/photos/tillwe/146242691/

Mittwoch, 12. Mai 2010
30th July 2009
                                14 Stores
                         23rd September 2009
                               23 Stores
                          2nd December 2009
                               26 Stores




                          http://bit.ly/distimo-appstores

Mittwoch, 12. Mai 2010
Cross Platform



Mittwoch, 12. Mai 2010
Mittwoch, 12. Mai 2010
Objective-C        Symbian C   Java




                         Java     .NET      ...
Mittwoch, 12. Mai 2010
HTML




Mittwoch, 12. Mai 2010
Engine of the web

                         http://www.flickr.com/photos/robadob/88901885/




Mittwoch, 12. Mai 2010
Why HTML?


                         •lot of devs
                         •easy to write
                         •common
                         •easy to test
                         •stable standard
                         •widely spread


Mittwoch, 12. Mai 2010
iPhone - First usable mobile browser




                         http://www.flickr.com/photos/chris_radcli!/2947219465/

Mittwoch, 12. Mai 2010
71% of all phones
                         have a modern xTML web browser.




                                http://bit.ly/tomiahonen-2010-almanac


Mittwoch, 12. Mai 2010
App Store
                         without Apple!


Mittwoch, 12. Mai 2010
all the (smart)phones have browsers



                              HTML works everywhere!




                                  low hanging fruit



Mittwoch, 12. Mai 2010
http://www.flickr.com/photos/halfbisqued/2353845688




                                               =
                                                                W3C Widget,
                                                              Vodafone360 App

Mittwoch, 12. Mai 2010
What is a Widget?



Mittwoch, 12. Mai 2010
Mittwoch, 12. Mai 2010
}?
Mittwoch, 12. Mai 2010
Types of "Apps"
                     • Preinstalled
                     • Native App (from "some" app store)
                     • Website
                         limited access to phone resources


                     • W3C Widget
                         access by widget runtime


                     • Wrapped W3C Widget
                         access depends on it's runtime



Mittwoch, 12. Mai 2010
Types of "Apps"
                     • Preinstalled
                     • Native App (from "some" app store)
                     • Website
                         limited access to phone resources


                     • W3C Widget
                         access by widget runtime


                     • Wrapped W3C Widget
                         access depends on it's runtime



Mittwoch, 12. Mai 2010
Layout
                                      index.html




                                                   Design
                                                   style.css




                                    AJAX Library



                         Database




Mittwoch, 12. Mai 2010
Layout
                                      index.html




         W3C Widget =
                                                   Design
                                    Icon           style.css




                                                           Configuration
                                    AJAX Library               config.xml




                         Database




Mittwoch, 12. Mai 2010
What is a W3C Widget?

                     • HTML
                     • CSS
                     • JavaScript
                     • config.xml
                     • zip it
                     • rename to *.wgt
Mittwoch, 12. Mai 2010
DONE!        http://www.flickr.com/photos/sundazed/2704578067/


Mittwoch, 12. Mai 2010
On any phone?



Mittwoch, 12. Mai 2010
HTML
                                tive
                            na




Mittwoch, 12. Mai 2010
W3C Widgets
                                          ti ve
                                        na

                          HTML
                                 tive
                             na




Mittwoch, 12. Mai 2010
W3C Widgets




                                          ...yes
                             not purely

                             but great
                               HTML
                              support
Mittwoch, 12. Mai 2010
Almost for free

                     • Facebook widget
                     • Dashboard widget
                     • Website widget
                     • TV Widget
                     • ...

Mittwoch, 12. Mai 2010
A Phone is ...



Mittwoch, 12. Mai 2010
http://www.flickr.com/photos/kratz/1984004945/

Mittwoch, 12. Mai 2010
http://www.flickr.com/photos/mbiddulph/3087388964/

Mittwoch, 12. Mai 2010
http://www.flickr.com/photos/redstamp/4222841946/




Mittwoch, 12. Mai 2010
•   Camera

                     •   Compass

                     •   GPS

                     •   Accelerometer

                     •   Calendar

                     •   Email

                     •   Address book

                     •   Watch

                     •   Alarm clock

                     •   ...



Mittwoch, 12. Mai 2010
Multiple Ways
                     • W3C Spec
                         http://w3.org/2009/dap/



                     • JIL Spec
                         http://www.jil.org/



                     • BONDI Spec
                         http://bondi.omtp.org/




Mittwoch, 12. Mai 2010
Multiple Ways
                     • JIL Spechttp://www.jil.org/



                     • BONDI Spec       http://bondi.omtp.org/



                     • W3C Spec   http://w3.org/2009/dap/



                     • PhoneGap    http://phonegap.pbworks.com/



                     • Nokia WRT     http://bit.ly/nokia-WRT-APIs



                     • Appcelerator      http://www.codestrong.com/timobile/api/




Mittwoch, 12. Mai 2010
Runtimes
                                                                                   Nokia S60
                     • JIL Spechttp://www.jil.org/



                     • BONDI Spec       http://bondi.omtp.org/
                                                                                    iPhone

                     • W3C Spec   http://w3.org/2009/dap/

                                                                                    Android
                     • PhoneGap    http://phonegap.pbworks.com/



                     • Nokia WRT     http://bit.ly/nokia-WRT-APIs                  Blackberry

                     • Appcelerator      http://www.codestrong.com/timobile/api/   Windows
                                                                                    Mobile
Mittwoch, 12. Mai 2010
PhoneGap
                         "An express goal of the PhoneGap project
                              is for the project to not exist."




                                       Open Source


Mittwoch, 12. Mai 2010
http://phonegap.pbworks.com/Roadmap


Mittwoch, 12. Mai 2010
Some numbers




Mittwoch, 12. Mai 2010
Some numbers

                     • iPhone App = 364 kB
                     • JavaScript, HTML, CSS, media = 124 kB
                     • that means PhoneGap+SDK foot print =
                         240 kB




Mittwoch, 12. Mai 2010
Native Look

                             vs.

         One style cross platform
Mittwoch, 12. Mai 2010
Mittwoch, 12. Mai 2010
Mittwoch, 12. Mai 2010
EventNinja



Mittwoch, 12. Mai 2010
Events,        Layout
                                      index.html


                     a Calendar

                                                   Design
                                    Icon           style.css

                         Database

                                                           Configuration
                                    AJAX Library               config.xml




Mittwoch, 12. Mai 2010
http://bit.ly/webdev-events

Mittwoch, 12. Mai 2010
Mittwoch, 12. Mai 2010
Mittwoch, 12. Mai 2010
Mittwoch, 12. Mai 2010
http://uxebu.com/blog/2010/01/25/humanapi-the-browser-in-the-real-world/

Mittwoch, 12. Mai 2010
Want to see it in action?


                            Download it from your store.


                                    Contact us.



Mittwoch, 12. Mai 2010
thx

                           http://uxebu.com

                             Wolfram Kriesing, uxebu

                                 wolfram@uxebu.com
                               http://twitter.com/uxebu
                         http://twitter.com/wolframkriesing




Mittwoch, 12. Mai 2010

Weitere ähnliche Inhalte

Ähnlich wie May 12 html5 apps - cross platform - upfront ug berlin

Cross platform development - by Uxebu
Cross platform development - by UxebuCross platform development - by Uxebu
Cross platform development - by UxebuVodafone developer
 
App vs. Widget (HTML5 Apps) - WebTechCon 2010
App vs. Widget (HTML5 Apps) - WebTechCon 2010App vs. Widget (HTML5 Apps) - WebTechCon 2010
App vs. Widget (HTML5 Apps) - WebTechCon 2010wolframkriesing
 
HTML5 Apps Cross Platform - SWDC 2010, Stockholm
HTML5 Apps Cross Platform - SWDC 2010, StockholmHTML5 Apps Cross Platform - SWDC 2010, Stockholm
HTML5 Apps Cross Platform - SWDC 2010, Stockholmwolframkriesing
 
Das mobile Web kommt - nun aber wirklich
Das mobile Web kommt - nun aber wirklichDas mobile Web kommt - nun aber wirklich
Das mobile Web kommt - nun aber wirklichdie.agilen GmbH
 
Mobile Commerce (Meet-Magento 04.10)
Mobile Commerce (Meet-Magento 04.10)Mobile Commerce (Meet-Magento 04.10)
Mobile Commerce (Meet-Magento 04.10)Roman Zenner
 
Mobile Webapps Entwicklung
Mobile Webapps EntwicklungMobile Webapps Entwicklung
Mobile Webapps EntwicklungMatthias Luebken
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Peter Hecker
 
Flash? Wer braucht das eigentlich noch
Flash? Wer braucht das eigentlich nochFlash? Wer braucht das eigentlich noch
Flash? Wer braucht das eigentlich nochFrank Leue
 
Webinar: Responsive Design
Webinar: Responsive DesignWebinar: Responsive Design
Webinar: Responsive Designkuehlhaus AG
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign ProcessSven Wolfermann
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIAThomas Christinck
 
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)die.agilen GmbH
 
7 Top Internet-Trends
7 Top Internet-Trends7 Top Internet-Trends
7 Top Internet-TrendsMarkus Tressl
 
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)Christian Heindel
 
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 BereichPeter Rozek
 

Ähnlich wie May 12 html5 apps - cross platform - upfront ug berlin (20)

Cross platform development - by Uxebu
Cross platform development - by UxebuCross platform development - by Uxebu
Cross platform development - by Uxebu
 
App vs. Widget (HTML5 Apps) - WebTechCon 2010
App vs. Widget (HTML5 Apps) - WebTechCon 2010App vs. Widget (HTML5 Apps) - WebTechCon 2010
App vs. Widget (HTML5 Apps) - WebTechCon 2010
 
HTML5 Apps Cross Platform - SWDC 2010, Stockholm
HTML5 Apps Cross Platform - SWDC 2010, StockholmHTML5 Apps Cross Platform - SWDC 2010, Stockholm
HTML5 Apps Cross Platform - SWDC 2010, Stockholm
 
Fowa html5 apps
Fowa html5 appsFowa html5 apps
Fowa html5 apps
 
Das mobile Web kommt - nun aber wirklich
Das mobile Web kommt - nun aber wirklichDas mobile Web kommt - nun aber wirklich
Das mobile Web kommt - nun aber wirklich
 
Mobile Commerce (Meet-Magento 04.10)
Mobile Commerce (Meet-Magento 04.10)Mobile Commerce (Meet-Magento 04.10)
Mobile Commerce (Meet-Magento 04.10)
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
Mobile Webapps Entwicklung
Mobile Webapps EntwicklungMobile Webapps Entwicklung
Mobile Webapps Entwicklung
 
HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
Flash? Wer braucht das eigentlich noch
Flash? Wer braucht das eigentlich nochFlash? Wer braucht das eigentlich noch
Flash? Wer braucht das eigentlich noch
 
Webinar: Responsive Design
Webinar: Responsive DesignWebinar: Responsive Design
Webinar: Responsive Design
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIA
 
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)
 
7 Top Internet-Trends
7 Top Internet-Trends7 Top Internet-Trends
7 Top Internet-Trends
 
Html5 - Traum oder Wirklichkeit
Html5 - Traum oder WirklichkeitHtml5 - Traum oder Wirklichkeit
Html5 - Traum oder Wirklichkeit
 
SEOs als Dienstleister
SEOs als DienstleisterSEOs als Dienstleister
SEOs als Dienstleister
 
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
 
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
 

May 12 html5 apps - cross platform - upfront ug berlin