SlideShare a Scribd company logo
1 of 55
New trend of making mobile
apps with web technology
Manyoung Cho | WebDevMobile.com

manyoung@gmail.com
About Me
  Web Evangelist
  WebDevMobile.com

  Opera Software

  manyoung@gmail.com


  Blog : http://manyoung.net

  Twitter : @manyoungc

  Me2Day : http://me2day.net/manyoung
Agenda
 History of WebApps

 Web as Apps

 Smartphone Wars

 PhoneGap

 Mobile Web or Mobile App?
History of WebApps
Web as Application
 Old days = ASP/PHP/JSP

 Web program for web service

 Mostly e-commerce sites
Web technology evolves
HTML5/CSS3
 HTML5 makes web standalone application
  http://www.hongkiat.com/blog/48-excellent-
  html5-demos/



 CSS3 gives rich user experiences
  http://www.webdesignerwall.com/trends/47-
  amazing-css3-animation-demos/
Opera Widget = First
browser based WebApp
 Opera introduced browser based application
  called widget in 2006

 Widget is W3C standard
  http://www.w3.org/TR/widgets/

 Opera Widget
  http://widgets.opera.com

 Widget = browser based standalone web
  application
Making mobile apps with web technology (revised)
2007 : Apple MacOS 10.5
 MacOs Dashboard Widget

 http://developer.apple.com/macosx/
  dashboard.html

 http://en.wikipedia.org/wiki/Dashboard_
  (software)

 HTML5 Canvas was also introducted by Apple
2008 : Widget Chaos!
 Google Desktop widget

 Yahoo Widget

 Naver, Daum Widget

 All gone…

 Non standard based
2010 : Chrome Webstore
 Chrome WebStore = Desktop WebApps

 https://chrome.google.com/webstore

 Chrome to Phone = Mobile WebApps
Web apps Demo
 Web apps? = Piece of cake
Smartphone wars
Smartphone Wars
 2007 : Success of iPhone

 2008 : Success of AppStore

 iPhone : Mobile internet machine

 iPhone : Application contents matter
Browser Wars
 Browser is a killer app of the smartphone

 Opera mobile 10

 iPhone Safari

 Chrome lite

 Mobile browser war is more severe than desktop

 New technology is applied in mobile browser
Mobile Apps Wars
Mobile Apps Wars
 Apple is the only winner

 iPod, iPhone2G, iPhone 3G users

 Followers can’t defeat this.
Anti Apple alliances
 Operators

 Handset makers

 Too many platforms 

 Windows Mobile, Limo, Android, Brew, SHP,
  Symbian, Proprietrary OS….

 What can be the crossplatform?
It’s WEB!
 Cross Device

 Cross Platform
Web as mobile apps
Anti Apple alliances
 2008 : Using web as cross platform mobile
  application by Operators
Widget runtime
 Web application platform

 Browser rendering engine based

 HTML/CSS/Javascript is the main technology

 Operator/OEM driven

       Widget Manager UI
     Widget Runtime Engine
        = Browser Engine
      (Opera, Webkit, etc)


  Android    WM         LIMO
Widget Runtime
Widget Store
                                     Android
                                     (Widget
                                     Engine)




   Mobile
   Widget          Widget
                   Widget              WM
                    Widget
   HTML/            Store
                     Store
                                     (Widget
   CSS/JS             Store          Engine)

Web Developer
                Operator Stores
                 OEMs Stores
                                      LIMO
                                     (Widget
                                     Engine)



                                  Mobile Phones
Widget Runtime Demo
 http://www.youtube.com/watch?v=3xpS21aR-
  BQ

 http://widget.developer.vodafone.com/en/

 http://www.youtube.com/watch?v=3xpS21aR-
  BQ
Widget Examples : ebay


                 User observes his watching, buying and selling
                  items.

                 Each item shows picture, description, price, number
                  of bids and remaining auction time.

                 Clicking on the item will open item details in the
                  browser, where user will be able to log in and bid for
                  item.

                 In menu screen user can set his ebay username/
                  password and configure autorefresh time (in
                  minutes). 

                 Main screen should contain refresh button.

                 Widget will contact eBay API directly using HTTP
                  protocol and retrieve data in JSON or XML format.
Widget Examples : Facebook

                User will be able to browse list of his friends, see friends details ,see friends
                   status message history, see and write messages to the friend's wall.


                User will be able to poke selected friend, and write a message to him.


                If phone and widget runtime supports it, user will be able to take a photo
                     and post it directly to Facebook, or post photo from phone gallery.


                Widget will periodically (time configurable in widget preferences, in minutes)
                   check if there are new pokes, personal messages or wall messages for the
                   user.


                In case of new action, user will be informed by overlay icon on the widget in
                    widget gallery.


                Note: API key is needed. Check Terms and conditions for using it.
Widget Examples : Twitter

                 User will be able to reply or between any messages from another people.


                 Clicking on another user username will show this person details at the top of
                     the screen, and messages just from this user below.


                 User will be able to set his status on twitter.


                 User will be able to see list of people he is following and his followers.


                 Clicking on follower/following name will open that user page.


                 Each relevant page will also contain a link that opens that page in the
                    browser.
WebApps Pros/Cons
 Pros
   Easy development than Java/Objective-C
   Easy use of OpenAPI/MeshUp
   Easy delivery of web contents
   Cross platform deployment


 Cons

 No device H/W controls

 Low graphics, multimedia control
Extend Web : Device APIs
 Contact

 Calendar

 File system

 Messaging

 System info :

 CPU, Battery, etc
Extending Web Spec
 JIL (Joint Innovation Lab)
   Vodafone, VZW, Softbank, China Mobile
    http://www.jil.org/

 BONDI(OMTP driven)

 W3C Device APIs and Policy
  http://www.w3.org/2009/dap/
Widgets = Mobile apps
Samsung Widget SDK
 http://innovator.samsungmobile.com
Nokia Ovi Developer
 http://www.forum.nokia.com/
Vodafone Betavine
 http://www.betavine.net/bvportal/home.html
WAC(Wholesale Application
Community)
 Cross-platform mobile apps

 Cross-device apps

 Wholesale Applications Community
Global Appstore
WAC
 Widgets – Widget Runtime, SDK, Documentation,
  WAC Device API spec.

 Operator API
K-WAC
Size does matter
                             Units

 Cellphone


Smartphone
                                                                Units

    iPhone


             0   200   400   600     800   1000   1200   1400
Altogether!
 HTML5/CSS3/SVG

 Devices API

 Huge market
   20 Global operators
   5 Handset makers
Web UI Components
Web UI Framework : iUI
 iUI: iPhone User Interface Framework

 Javascript, HTML, CSS

 Demo
  http://chriscarey.com/projects/mythtv/iphone/
Web UI Framework :
JQTouch
 JQTouch

 Similar to native app UI

 Javascript, HTML, CSS

 JS Library

 http://www.jqtouch.com/preview/demos/main/
  #home
Web UI Framework : Sencha
 HTML5, CSS3, Javascript

 Resolution independent

 JS Library

 http://touchstyle.mobi/app/
PhoneGap
PhoneGap
 PhoneGap is an open source development
  framework for building cross-platform mobile
  apps. Build apps in HTML and JavaScript and still
  take advantage of core features in iPhone/
  iTouch, iPad, Google Android, Palm, Symbian
  and Blackberry SDKs. Learn

 http://phonegap.com
PhoneGap

                Android        Android
                Market

   PhoneGap
     Mobile
     Widget      Apple         iPhone
     HTML/      Appstore
     CSS/JS


Web Developer   Blackberr      Blackb
                    y            erry
                 Market




                            Mobile Phones
PhoneGap.js
 Device API to control phone resources
Phonegap
 http://phonegap.com
Web or Apps?
Web or Apps?
 Same UX

 Doesn’t matter

 http://www.youtube.com/watch?v=-61h8UGsi_M
Web as application
 New era of mobile apps

 By Web standard technology

 HTML5/CSS3 is much powerful

 Cross device/platform
Thank you for listening

http://webdevmobile.com
Blog : http://manyoung.net
Twitter : @manyoungc
Me2Day : http://me2day.net/manyoung

More Related Content

What's hot

Top 21 tools to collect and manage visual feedback
Top 21 tools to collect and manage visual feedbackTop 21 tools to collect and manage visual feedback
Top 21 tools to collect and manage visual feedbackMopinion
 
Support Design Library
Support Design LibrarySupport Design Library
Support Design LibraryTaeho Kim
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do ThatNathan Smith
 
HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기JungHyuk Kwon
 
Progressive Web Apps: Opera's perspective
Progressive Web Apps: Opera's perspectiveProgressive Web Apps: Opera's perspective
Progressive Web Apps: Opera's perspectiveAndreas Bovens
 
Ext Js In Action January 2010 (Meap Edition)
Ext Js In Action January 2010 (Meap Edition)Ext Js In Action January 2010 (Meap Edition)
Ext Js In Action January 2010 (Meap Edition)Goran Kljajic
 
Testing For Web Accessibility
Testing For Web AccessibilityTesting For Web Accessibility
Testing For Web AccessibilityHagai Asaban
 
Facebook api
Facebook api Facebook api
Facebook api snipermkd
 

What's hot (9)

Top 21 tools to collect and manage visual feedback
Top 21 tools to collect and manage visual feedbackTop 21 tools to collect and manage visual feedback
Top 21 tools to collect and manage visual feedback
 
Support Design Library
Support Design LibrarySupport Design Library
Support Design Library
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
 
HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기
 
Progressive Web Apps: Opera's perspective
Progressive Web Apps: Opera's perspectiveProgressive Web Apps: Opera's perspective
Progressive Web Apps: Opera's perspective
 
Facebook API for iOS
Facebook API for iOSFacebook API for iOS
Facebook API for iOS
 
Ext Js In Action January 2010 (Meap Edition)
Ext Js In Action January 2010 (Meap Edition)Ext Js In Action January 2010 (Meap Edition)
Ext Js In Action January 2010 (Meap Edition)
 
Testing For Web Accessibility
Testing For Web AccessibilityTesting For Web Accessibility
Testing For Web Accessibility
 
Facebook api
Facebook api Facebook api
Facebook api
 

Similar to Making mobile apps with web technology (revised)

웹(web)의 현재와 미래(2)
웹(web)의 현재와 미래(2)웹(web)의 현재와 미래(2)
웹(web)의 현재와 미래(2)mosaicnet
 
FEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing MojitoFEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing MojitoCaridy Patino
 
2011 08-24 mobile web app
2011 08-24  mobile web app2011 08-24  mobile web app
2011 08-24 mobile web appSholto Maud
 
Future of Mobile Web Application and Web App Store
Future of Mobile Web Application and Web App StoreFuture of Mobile Web Application and Web App Store
Future of Mobile Web Application and Web App StoreJonathan Jeon
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppSt. Petersburg College
 
An end-to-end experience of Windows Phone 7 development (Part 2)
An end-to-end experience of Windows Phone 7 development (Part 2)An end-to-end experience of Windows Phone 7 development (Part 2)
An end-to-end experience of Windows Phone 7 development (Part 2)rudigrobler
 
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010Heiko Behrens
 
Inside Mobile Widgets Publish
Inside Mobile Widgets PublishInside Mobile Widgets Publish
Inside Mobile Widgets Publish360|Conferences
 
I like i phone and android but know .net
I like i phone and android but know .netI like i phone and android but know .net
I like i phone and android but know .netChris Love
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeCaridy Patino
 
Mobile applications for SharePoint using HTML5
Mobile applications for SharePoint using HTML5Mobile applications for SharePoint using HTML5
Mobile applications for SharePoint using HTML5Christian Heindel
 
JQuery Mobile vs Appcelerator Titanium vs Sencha Touch
JQuery Mobile vs Appcelerator Titanium vs Sencha TouchJQuery Mobile vs Appcelerator Titanium vs Sencha Touch
JQuery Mobile vs Appcelerator Titanium vs Sencha TouchSteve Drucker
 
Mobile application
Mobile applicationMobile application
Mobile applicationaspnet123
 
Android 3.0 Portland Java User Group 2011-03-15
Android 3.0 Portland Java User Group 2011-03-15Android 3.0 Portland Java User Group 2011-03-15
Android 3.0 Portland Java User Group 2011-03-15sullis
 
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5Christian Heindel
 
Windows Phone 7 Unleashed Session 1
Windows Phone 7 Unleashed Session 1Windows Phone 7 Unleashed Session 1
Windows Phone 7 Unleashed Session 1Wes Yanaga
 
Hybrid vs Native vs Web Apps
Hybrid vs Native vs Web AppsHybrid vs Native vs Web Apps
Hybrid vs Native vs Web AppsPoluru S
 

Similar to Making mobile apps with web technology (revised) (20)

웹(web)의 현재와 미래(2)
웹(web)의 현재와 미래(2)웹(web)의 현재와 미래(2)
웹(web)의 현재와 미래(2)
 
FEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing MojitoFEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing Mojito
 
2011 08-24 mobile web app
2011 08-24  mobile web app2011 08-24  mobile web app
2011 08-24 mobile web app
 
Future of Mobile Web Application and Web App Store
Future of Mobile Web Application and Web App StoreFuture of Mobile Web Application and Web App Store
Future of Mobile Web Application and Web App Store
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
 
An end-to-end experience of Windows Phone 7 development (Part 2)
An end-to-end experience of Windows Phone 7 development (Part 2)An end-to-end experience of Windows Phone 7 development (Part 2)
An end-to-end experience of Windows Phone 7 development (Part 2)
 
mobicon_paper
mobicon_papermobicon_paper
mobicon_paper
 
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
 
Inside Mobile Widgets Publish
Inside Mobile Widgets PublishInside Mobile Widgets Publish
Inside Mobile Widgets Publish
 
Mobile Widgets Development
Mobile Widgets DevelopmentMobile Widgets Development
Mobile Widgets Development
 
I like i phone and android but know .net
I like i phone and android but know .netI like i phone and android but know .net
I like i phone and android but know .net
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
 
Mobile applications for SharePoint using HTML5
Mobile applications for SharePoint using HTML5Mobile applications for SharePoint using HTML5
Mobile applications for SharePoint using HTML5
 
JQuery Mobile vs Appcelerator Titanium vs Sencha Touch
JQuery Mobile vs Appcelerator Titanium vs Sencha TouchJQuery Mobile vs Appcelerator Titanium vs Sencha Touch
JQuery Mobile vs Appcelerator Titanium vs Sencha Touch
 
Mobile application
Mobile applicationMobile application
Mobile application
 
Android Minnebar
Android MinnebarAndroid Minnebar
Android Minnebar
 
Android 3.0 Portland Java User Group 2011-03-15
Android 3.0 Portland Java User Group 2011-03-15Android 3.0 Portland Java User Group 2011-03-15
Android 3.0 Portland Java User Group 2011-03-15
 
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
 
Windows Phone 7 Unleashed Session 1
Windows Phone 7 Unleashed Session 1Windows Phone 7 Unleashed Session 1
Windows Phone 7 Unleashed Session 1
 
Hybrid vs Native vs Web Apps
Hybrid vs Native vs Web AppsHybrid vs Native vs Web Apps
Hybrid vs Native vs Web Apps
 

Recently uploaded

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 

Recently uploaded (20)

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 

Making mobile apps with web technology (revised)

  • 1. New trend of making mobile apps with web technology Manyoung Cho | WebDevMobile.com manyoung@gmail.com
  • 2. About Me   Web Evangelist   WebDevMobile.com   Opera Software   manyoung@gmail.com   Blog : http://manyoung.net   Twitter : @manyoungc   Me2Day : http://me2day.net/manyoung
  • 3. Agenda  History of WebApps  Web as Apps  Smartphone Wars  PhoneGap  Mobile Web or Mobile App?
  • 5. Web as Application  Old days = ASP/PHP/JSP  Web program for web service  Mostly e-commerce sites
  • 7. HTML5/CSS3  HTML5 makes web standalone application http://www.hongkiat.com/blog/48-excellent- html5-demos/  CSS3 gives rich user experiences http://www.webdesignerwall.com/trends/47- amazing-css3-animation-demos/
  • 8. Opera Widget = First browser based WebApp  Opera introduced browser based application called widget in 2006  Widget is W3C standard http://www.w3.org/TR/widgets/  Opera Widget http://widgets.opera.com  Widget = browser based standalone web application
  • 10. 2007 : Apple MacOS 10.5  MacOs Dashboard Widget  http://developer.apple.com/macosx/ dashboard.html  http://en.wikipedia.org/wiki/Dashboard_ (software)  HTML5 Canvas was also introducted by Apple
  • 11. 2008 : Widget Chaos!  Google Desktop widget  Yahoo Widget  Naver, Daum Widget  All gone…  Non standard based
  • 12. 2010 : Chrome Webstore  Chrome WebStore = Desktop WebApps  https://chrome.google.com/webstore  Chrome to Phone = Mobile WebApps
  • 13. Web apps Demo  Web apps? = Piece of cake
  • 15. Smartphone Wars  2007 : Success of iPhone  2008 : Success of AppStore  iPhone : Mobile internet machine  iPhone : Application contents matter
  • 16. Browser Wars  Browser is a killer app of the smartphone  Opera mobile 10  iPhone Safari  Chrome lite  Mobile browser war is more severe than desktop  New technology is applied in mobile browser
  • 18. Mobile Apps Wars  Apple is the only winner  iPod, iPhone2G, iPhone 3G users  Followers can’t defeat this.
  • 19. Anti Apple alliances  Operators  Handset makers  Too many platforms   Windows Mobile, Limo, Android, Brew, SHP, Symbian, Proprietrary OS….  What can be the crossplatform?
  • 22. Anti Apple alliances  2008 : Using web as cross platform mobile application by Operators
  • 23. Widget runtime  Web application platform  Browser rendering engine based  HTML/CSS/Javascript is the main technology  Operator/OEM driven Widget Manager UI Widget Runtime Engine = Browser Engine (Opera, Webkit, etc) Android WM LIMO
  • 25. Widget Store Android (Widget Engine) Mobile Widget Widget Widget WM Widget HTML/ Store Store (Widget CSS/JS Store Engine) Web Developer Operator Stores OEMs Stores LIMO (Widget Engine) Mobile Phones
  • 26. Widget Runtime Demo  http://www.youtube.com/watch?v=3xpS21aR- BQ  http://widget.developer.vodafone.com/en/  http://www.youtube.com/watch?v=3xpS21aR- BQ
  • 27. Widget Examples : ebay   User observes his watching, buying and selling items.   Each item shows picture, description, price, number of bids and remaining auction time.   Clicking on the item will open item details in the browser, where user will be able to log in and bid for item.   In menu screen user can set his ebay username/ password and configure autorefresh time (in minutes).    Main screen should contain refresh button.   Widget will contact eBay API directly using HTTP protocol and retrieve data in JSON or XML format.
  • 28. Widget Examples : Facebook  User will be able to browse list of his friends, see friends details ,see friends status message history, see and write messages to the friend's wall.  User will be able to poke selected friend, and write a message to him.  If phone and widget runtime supports it, user will be able to take a photo and post it directly to Facebook, or post photo from phone gallery.  Widget will periodically (time configurable in widget preferences, in minutes) check if there are new pokes, personal messages or wall messages for the user.  In case of new action, user will be informed by overlay icon on the widget in widget gallery.  Note: API key is needed. Check Terms and conditions for using it.
  • 29. Widget Examples : Twitter  User will be able to reply or between any messages from another people.  Clicking on another user username will show this person details at the top of the screen, and messages just from this user below.  User will be able to set his status on twitter.  User will be able to see list of people he is following and his followers.  Clicking on follower/following name will open that user page.  Each relevant page will also contain a link that opens that page in the browser.
  • 30. WebApps Pros/Cons  Pros   Easy development than Java/Objective-C   Easy use of OpenAPI/MeshUp   Easy delivery of web contents   Cross platform deployment  Cons  No device H/W controls  Low graphics, multimedia control
  • 31. Extend Web : Device APIs  Contact  Calendar  File system  Messaging  System info :  CPU, Battery, etc
  • 32. Extending Web Spec  JIL (Joint Innovation Lab)   Vodafone, VZW, Softbank, China Mobile http://www.jil.org/  BONDI(OMTP driven)  W3C Device APIs and Policy http://www.w3.org/2009/dap/
  • 37. WAC(Wholesale Application Community)  Cross-platform mobile apps  Cross-device apps  Wholesale Applications Community
  • 39. WAC  Widgets – Widget Runtime, SDK, Documentation, WAC Device API spec.  Operator API
  • 40. K-WAC
  • 41. Size does matter Units Cellphone Smartphone Units iPhone 0 200 400 600 800 1000 1200 1400
  • 42. Altogether!  HTML5/CSS3/SVG  Devices API  Huge market   20 Global operators   5 Handset makers
  • 44. Web UI Framework : iUI  iUI: iPhone User Interface Framework  Javascript, HTML, CSS  Demo http://chriscarey.com/projects/mythtv/iphone/
  • 45. Web UI Framework : JQTouch  JQTouch  Similar to native app UI  Javascript, HTML, CSS  JS Library  http://www.jqtouch.com/preview/demos/main/ #home
  • 46. Web UI Framework : Sencha  HTML5, CSS3, Javascript  Resolution independent  JS Library  http://touchstyle.mobi/app/
  • 48. PhoneGap  PhoneGap is an open source development framework for building cross-platform mobile apps. Build apps in HTML and JavaScript and still take advantage of core features in iPhone/ iTouch, iPad, Google Android, Palm, Symbian and Blackberry SDKs. Learn  http://phonegap.com
  • 49. PhoneGap Android Android Market PhoneGap Mobile Widget Apple iPhone HTML/ Appstore CSS/JS Web Developer Blackberr Blackb y erry Market Mobile Phones
  • 50. PhoneGap.js  Device API to control phone resources
  • 53. Web or Apps?  Same UX  Doesn’t matter  http://www.youtube.com/watch?v=-61h8UGsi_M
  • 54. Web as application  New era of mobile apps  By Web standard technology  HTML5/CSS3 is much powerful  Cross device/platform
  • 55. Thank you for listening http://webdevmobile.com Blog : http://manyoung.net Twitter : @manyoungc Me2Day : http://me2day.net/manyoung