Hybrid Web Application Platform
               Appcelerator Titanium
Web Evolution


               •                  .

               •                          .

               •   3.0  ...
Why Hybrid Web App?

               •   Hand-held Device(smart phone, tablet pc)

               •   Web OS(Chrome OS, Pal...
Web
Desktop

                                                 TV
                Home Device




               Notebook      ...
Printer                           Fax
                                                                                    ...
Index


               • Introduce
               • Development
               • Demo
               • Appendix

	    	   ...
Introduction
Architecture Desktop


                                       Your Application
                               (html, css, ...
Architecture Mobile


                                   Your Application
                                    (html, css, ...
resource : http://www.deshow.net/animal/2008/rabbit_small_animals.html#pic
Tablet

          Desktop   Mobile




                             resource : http://www.deshow.net/animal/2008/rabbit_sm...
HTML
JavaScript




                   HTML
JavaScript
               CSS




                         HTML
JavaScript
                        CSS
               Webkit



                                  HTML
JavaScript
                        CSS
               Webkit



                                    HTML
                 ...
JavaScript
                        CSS
               Webkit



                                  HTML
                   ...
Bridge = Kroll
Kroll Process is
               a pyrometallurgical industrial process
               used to produce metallic titanium


...
Titanium APIs
ui API
Carrier            12:34 PM
           Optional instructions for this pane go here
                          Web Page Titl...
Carrier            12:34 PM
           Optional instructions for this pane go here
                          Web Page Titl...
Desktop API, Phone API
Desktop API, Phone API
                     Titanium.Codec
                    Titanium.Desktop
                      Tita...
Desktop API, Phone API
                                             Titanium.Platform
                     Titanium.Codec
...
Optional Modules
Optional Modules
                   Titanium.Analytics
                      Titanium.Map
                    Titanium.Yah...
So what’s Titanium?

               •   Titanium is a rapid application development
                   platform(HTML, CSS ...
Adobe Air Junior?

               •   free/open source Apache license, for ultimate
                   compatibility with ...
How it all works

               •   Full filesystem access

               •   Internal SQLite database access

          ...
Development
System Spec
Desktop



               •   Window 7, XP and Vista

               •   Mac OS X 10.6.4 (Snow Leopard)

               • ...
Mobile


               •   iPhone
                   Lastest iPhone SDK 3.2 for iPhone/iPad

               •   Android
 ...
Install & Setting
•   Download
                   http://www.appcelerator.com/products/download/

               •   Source Install
        ...
Introduce Interface
Usage
New Project
Edit Project
Launch & Testing
Run Emulator
Run Emulator
Package
Distribution
Distribution
See more


               •   Desktop
                   http://developer.appcelerator.com/doc/desktop/
                  ...
Online platform
Show Case
resource : http://www.appcelerator.com/showcase/applications-showcase/
Demo
•   Usage Demo

               •   Desktop uTube Deck Demo

               •   Twitter Client Demo with Ext JS

          ...
Titanium 2.0

               •   Localization Framework

               •   Advertising, Commerce

               •   Bule...
Titanium 2.0



               •   RIM Blackberry

               •   Nokia
Appendix
PhoneGap




               •   http://www.phonegap.com/
Corona




               •   http://www.anscamobile.com/
QuickConnect




               •   http://quickconnect.pbworks.com/
Reference

               •   Appcelerator Titanium
                   http://www.appcelerator.com


               •   Wi...
QA
ending
                                      Author : rhio.kim
                                          @rhiokim
        ...
ending
                                      Author : rhio.kim
                                          @rhiokim
        ...
Thanks
Thanks ; )
Mobile appcelerator titanium
Mobile appcelerator titanium
Mobile appcelerator titanium
Mobile appcelerator titanium
Mobile appcelerator titanium
Mobile appcelerator titanium
Mobile appcelerator titanium
Mobile appcelerator titanium
Mobile appcelerator titanium
Mobile appcelerator titanium
Mobile appcelerator titanium
Mobile appcelerator titanium
Mobile appcelerator titanium
Upcoming SlideShare
Loading in...5
×

Mobile appcelerator titanium

2,041

Published on

WebDevMobile.com Hybrid Web Application Appcelerator Titanium

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,041
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
109
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mobile appcelerator titanium

  1. 1. Hybrid Web Application Platform Appcelerator Titanium
  2. 2. Web Evolution • . • . • 3.0 4.0 .
  3. 3. Why Hybrid Web App? • Hand-held Device(smart phone, tablet pc) • Web OS(Chrome OS, Palm Web OS) • Home Device(Apple TV, Google TV) • Browser(Chrome, Safari, Firefox extension) • Social Network & Real Time
  4. 4. Web
  5. 5. Desktop TV Home Device Notebook Web Smart Phone Display Screen Tablet ATM, Kiosk
  6. 6. Printer Fax set-top box Door lock Desktop TV Display ui Light Home Device Ice box iPhone Chrome OS Notebook Web Smart Phone Game Andorid iPad Display Screen Tablet Advertisement ATM, Kiosk Galaxy Tab Sub train Display ui Gov2.0
  7. 7. Index • Introduce • Development • Demo • Appendix
  8. 8. Introduction
  9. 9. Architecture Desktop Your Application (html, css, javascript,php,python,ruby) UI API Desktop API Optional Modules Bridge to OS - JavaScript,Ruby,Python,PHP, C, C# OS - Window, Mac, Linux
  10. 10. Architecture Mobile Your Application (html, css, javascript) UI API Phone API Optional Modules Bridge - JavaScript - Java, Objective-C OS - Android, iOS
  11. 11. resource : http://www.deshow.net/animal/2008/rabbit_small_animals.html#pic
  12. 12. Tablet Desktop Mobile resource : http://www.deshow.net/animal/2008/rabbit_small_animals.html#pic
  13. 13. HTML
  14. 14. JavaScript HTML
  15. 15. JavaScript CSS HTML
  16. 16. JavaScript CSS Webkit HTML
  17. 17. JavaScript CSS Webkit HTML Kroll
  18. 18. JavaScript CSS Webkit HTML Kroll
  19. 19. Bridge = Kroll
  20. 20. Kroll Process is a pyrometallurgical industrial process used to produce metallic titanium
  21. 21. Titanium APIs
  22. 22. ui API
  23. 23. Carrier 12:34 PM Optional instructions for this pane go here Web Page Title Cancel Button Back Back Pane Label rhio.kim WebDevMobile Button Save http://host.domain.tld Item One Tab 1 First Name Example Text here ON Tab Two Tab Three HTML text field Item 2 as a form label Text here Last Name Example Example OFF HTML <select> Phone3 Confirmation Message Item Number Example Text here Optional Status ui API ItemOptional explanation of (off) is the 1 ON HTML radio button what Item 4 system is Optional Statushigh asking low 320 x 480 Item 2 Verticalradio button (on) OFF HTML Resolution Secondary Primary 1Item 3 3 HTML 5 6Optional8 9 ICN0 ICN 2 4 checkbox (off) Status 7 - Option HTML checkbox (on) & @ ” / : 1 ( ) $ Status ; Optional Status Optional Titanium.UI.* HTML Button #+= Option 2, . ? ! ’ Optional Status Optional Status Lorem ipsum dolor sit amet, consectetuer ABC adipiscing elit. space consectetuer. Aenean return
  24. 24. Carrier 12:34 PM Optional instructions for this pane go here Web Page Title Cancel Button Back Back Pane Label rhio.kim WebDevMobile Button Save http://host.domain.tld Item One Tab 1 First Name Example Text here ON Tab Two Tab Three HTML text field Item 2 as a form label Text here Last Name Example Example OFF HTML <select> Phone3 Confirmation Message Item Number Example Text here Optional Status ui API ItemOptional explanation of (off) is the 1 ON HTML radio button what Item 4 system is Optional Statushigh asking low 320 x 480 Item 2 Verticalradio button (on) OFF HTML Resolution Secondary Primary 1Item 3 3 HTML 5 6Optional8 9 ICN0 ICN 2 4 checkbox (off) Status 7 - Option HTML checkbox (on) & @ ” / : 1 ( ) $ Status ; Optional Status Optional Titanium.UI.* HTML Button #+= Option 2, . ? ! ’ Optional Status Optional Status Lorem ipsum dolor sit amet, consectetuer ABC adipiscing elit. space consectetuer. Aenean return
  25. 25. Desktop API, Phone API
  26. 26. Desktop API, Phone API Titanium.Codec Titanium.Desktop Titanium.JSON Titanium.Notification Titanium.Process Titanium.Worker Titanium.UpdaterManager
  27. 27. Desktop API, Phone API Titanium.Platform Titanium.Codec Titanium.FileSystem Titanium.Desktop Titanium.Geolocation Titanium.JSON Titanium.Gesture Titanium.Notification Titanium.Contact Titanium.Process Titanium.Accelerometer Titanium.Worker Titanium.Media Titanium.UpdaterManager Titanium.Network
  28. 28. Optional Modules
  29. 29. Optional Modules Titanium.Analytics Titanium.Map Titanium.Yahoo Titanium.Facebook
  30. 30. So what’s Titanium? • Titanium is a rapid application development platform(HTML, CSS and JavaScript) • The framework also has support for Python, Ruby and PHP • Seamlessly create desktop web applications(your favorites back-end and front-end web technologies) • One source Multi platform(Window,MAC,Linux,iOS,Android)
  31. 31. Adobe Air Junior? • free/open source Apache license, for ultimate compatibility with your workflow, and infinite extensibility • Support Python, Ruby, and without needing to learn Flash or ActionScript • Cloud publishing features to compile and publish your application for multiple platforms. • And much more!!
  32. 32. How it all works • Full filesystem access • Internal SQLite database access • AJAX is still avaiable, Network API allows to interface with HTTP at a much lower level, open socket connections to other service • Wrapping Desktop features such as notifications, tray icons, window menu • HTML5, CSS3, Web APIs
  33. 33. Development
  34. 34. System Spec
  35. 35. Desktop • Window 7, XP and Vista • Mac OS X 10.6.4 (Snow Leopard) • Ubuntu 9.10 (Karmic Koala)
  36. 36. Mobile • iPhone Lastest iPhone SDK 3.2 for iPhone/iPad • Android Android SDK - http://developer.android.com/sdk/index.html SDK platform Android 1.6 API 4(recommand) Google APIs package for KitchenSink Java Development Kit 6(java 1.6)
  37. 37. Install & Setting
  38. 38. • Download http://www.appcelerator.com/products/download/ • Source Install git clone http://github.com/appcelerator/ titanium_developer.git
  39. 39. Introduce Interface
  40. 40. Usage
  41. 41. New Project
  42. 42. Edit Project
  43. 43. Launch & Testing
  44. 44. Run Emulator
  45. 45. Run Emulator
  46. 46. Package
  47. 47. Distribution
  48. 48. Distribution
  49. 49. See more • Desktop http://developer.appcelerator.com/doc/desktop/ guides • Mobile http://developer.appcelerator.com/doc/mobile/ guides
  50. 50. Online platform
  51. 51. Show Case
  52. 52. resource : http://www.appcelerator.com/showcase/applications-showcase/
  53. 53. Demo
  54. 54. • Usage Demo • Desktop uTube Deck Demo • Twitter Client Demo with Ext JS • iPhone/iPad KitchenSink Demo
  55. 55. Titanium 2.0 • Localization Framework • Advertising, Commerce • Buletooth networking • Third-party accessories • Application Database Sync • encrypted databases
  56. 56. Titanium 2.0 • RIM Blackberry • Nokia
  57. 57. Appendix
  58. 58. PhoneGap • http://www.phonegap.com/
  59. 59. Corona • http://www.anscamobile.com/
  60. 60. QuickConnect • http://quickconnect.pbworks.com/
  61. 61. Reference • Appcelerator Titanium http://www.appcelerator.com • Wikipedia http://en.wikipedia.org/wiki/Appcelerator_Titanium • Titanium tutorial http://www.sergemeunier.com/blog/tutorials/titanium-tutorials/ • Compare with others http://stackoverflow.com/questions/1482586/comparison-between-corona- phonegap-titanium
  62. 62. QA
  63. 63. ending Author : rhio.kim @rhiokim http://rhio.tistory.com rhio.kim@gmail.com FRENDS JavaScript Ninija NHN
  64. 64. ending Author : rhio.kim @rhiokim http://rhio.tistory.com rhio.kim@gmail.com FRENDS NHN JavaScript Ninija
  65. 65. Thanks
  66. 66. Thanks ; )
  1. A particular slide catching your eye?

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

×