Hybrid Web Application Platform
               Appcelerator Titanium
Web Evolution


               •                   .

               •                       .

               •   3.0    ...
Printer                           Fax
                                                                                   s...
Why Hybrid Web App?


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

               •   Web OS(Chrome OS, Pa...
Index


               • Introduce
               • Development
               • Demo
               • Appendix

	    	   ...
Introduction
Architecture


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


                                     Your Application
                             (html, css, javascript,p...
Tablet

          Desktop   Mobile




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



                                    HTML
                 ...
Bridge = Kroll
Kroll Process    is
               a pyrometallurgical industrial process
               used to produce metallic titanium...
Titanium APIs
Carrier            12:34 PM
               Optional instructions for this pane go here
                            Web Pag...
Desktop API, Phone API
                                             Titanium.Platform
                     Titanium.Codec
...
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

               •   Mac

               •   Linux
Mobile


               •   iPhone
                   Lastest iPhone SDK 3.2 for iPhone/iPad

               •   Android
 ...
Introduce Interface
Usage
New Project
Launch & Testing
Package
Distribution
Run Emulator
Run Emulator
Online platform
Show Case
resource : http://www.appcelerator.com/showcase/applications-showcase/
Demo
•   Usage Demo

               •   Desktop uTube Deck Demo

               •   iPhone/iPad KitchenSink Demo




	    	    ...
Appendix
PhoneGap




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




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




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

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


               •   Wi...
ending
                   Author : rhio.kim
                       @rhiokim
                http://rhio.tistory.com
      ...
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
Upcoming SlideShare
Loading in …5
×

Mobile appcelerator titanium

2,399 views
2,312 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
2,399
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
38
Comments
0
Likes
0
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 . • HTML5
  3. 3. 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
  4. 4. 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)
  5. 5. Index • Introduce • Development • Demo • Appendix
  6. 6. Introduction
  7. 7. Architecture Your Application (html, css, javascript,php,python,ruby) UI API Desktop API Optional Modules Bridge to OS - JavaScript,Ruby,Python,PHP OS - Window, Mac, Linux
  8. 8. Architecture Your Application (html, css, javascript,php,python,ruby) UI API Phone API Optional Modules Bridge - JavaScript - Java, Objective-C OS - Android, iOS
  9. 9. Tablet Desktop Mobile resource : http://www.deshow.net/animal/2008/rabbit_small_animals.html#pic
  10. 10. JavaScript CSS Webkit HTML Kroll
  11. 11. Bridge = Kroll
  12. 12. Kroll Process is a pyrometallurgical industrial process used to produce metallic titanium
  13. 13. Titanium APIs
  14. 14. 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
  15. 15. 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
  16. 16. Optional Modules Titanium.Analytics Titanium.Map Titanium.Yahoo Titanium.Facebook
  17. 17. 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)
  18. 18. 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!!
  19. 19. 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
  20. 20. Development
  21. 21. System Spec
  22. 22. Desktop • Window • Mac • Linux
  23. 23. 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)
  24. 24. Introduce Interface
  25. 25. Usage
  26. 26. New Project
  27. 27. Launch & Testing
  28. 28. Package
  29. 29. Distribution
  30. 30. Run Emulator
  31. 31. Run Emulator
  32. 32. Online platform
  33. 33. Show Case
  34. 34. resource : http://www.appcelerator.com/showcase/applications-showcase/
  35. 35. Demo
  36. 36. • Usage Demo • Desktop uTube Deck Demo • iPhone/iPad KitchenSink Demo
  37. 37. Appendix
  38. 38. PhoneGap • http://www.phonegap.com/
  39. 39. Corona • http://www.anscamobile.com/
  40. 40. QuickConnect • http://quickconnect.pbworks.com/
  41. 41. 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
  42. 42. ending Author : rhio.kim @rhiokim http://rhio.tistory.com rhio.kim@gmail.com NHN/Ajax UI Developer FRENDS.kr
  43. 43. Thanks ; )

×