Upload
rhio-kim
View
2.499
Download
4
Tags:
Embed Size (px)
DESCRIPTION
WebDevMobile.com Hybrid Web Application Appcelerator Titanium
Citation preview
Web Evolution
• 웹은 계속 진화하고 있다.
• 인터넷 환경도 계속 진화하고 있다.
• 3.0을 넘어 4.0 유비쿼터스 웹으로 진화하고 있다.
2010년 10월 17일 일요일
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의 욕구 상승
2010년 10월 17일 일요일
TV
Display Screen
ATM, Kiosk
Home Device
Desktop
NotebookSmart Phone
Door lock
Light
set-top box
Display ui
Chrome OS
Tablet
Ice box
Printer Fax
iPhone
Andorid
Advertisement
iPad
Sub trainDisplay ui
Galaxy Tab
Web Game
Gov2.0
2010년 10월 17일 일요일
Architecture Desktop
Your Application(html, css, javascript,php,python,ruby)
Desktop API Optional Modules
OS - Window, Mac, Linux
UI API
Bridge to OS - JavaScript,Ruby,Python,PHP, C, C#
2010년 10월 17일 일요일
Architecture Mobile
Your Application(html, css, javascript)
Phone API Optional Modules
Bridge - JavaScript - Java, Objective-C
OS - Android, iOS
UI API
2010년 10월 17일 일요일
resource : http://www.deshow.net/animal/2008/rabbit_small_animals.html#pic
2010년 10월 17일 일요일
Desktop
Tablet
Mobile
resource : http://www.deshow.net/animal/2008/rabbit_small_animals.html#pic
2010년 10월 17일 일요일
Kroll Process is a pyrometallurgical industrial processused to produce metallic titanium
2010년 10월 17일 일요일
ui APITitanium.UI.*
320 x 480Vertical Resolution
Carrier 12:34 PMWeb Page Title
http://host.domain.tld
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer.
Optional instructions for this pane go here
Pane LabelCancel Save
HTML text field
HTML <select>
HTML radio button (off)
HTML radio button (on)
HTML Button
HTML checkbox (off)
HTML checkbox (on)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer.
Option 1 Optional Status
Option 2 Optional Status
Tab ThreeTab One Tab Two
Item 1 ON
Example as a form label
Item 3 Optional Status
Item 2 OFF
Carrier 12:34 PM
rhio.kimBack Button Button
Confirmation MessageOptional explanation of what is the
system is asking
Secondary Primary
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer.
Optional instructions for this pane go here
Pane LabelCancel Save
1 2 3 4 5 6 7 8 9 0
- / : ; ( ) $ & @
. , ? ! ’#+=
spaceABC return
”
First Name Example Text here
Last Name Example Text here
Phone Number Example Text here
low high
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer.
Item 1 ON
Item 3 Optional Status
Item 4 Optional Status
ICN ICN
Option 1 Optional Status
Option 2 Optional Status
Item 2 OFF
WebDevMobileBack Button
Carrier 12:34 PM
2010년 10월 17일 일요일
ui APITitanium.UI.*
320 x 480Vertical Resolution
Carrier 12:34 PMWeb Page Title
http://host.domain.tld
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer.
Optional instructions for this pane go here
Pane LabelCancel Save
HTML text field
HTML <select>
HTML radio button (off)
HTML radio button (on)
HTML Button
HTML checkbox (off)
HTML checkbox (on)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer.
Option 1 Optional Status
Option 2 Optional Status
Tab ThreeTab One Tab Two
Item 1 ON
Example as a form label
Item 3 Optional Status
Item 2 OFF
Carrier 12:34 PM
rhio.kimBack Button Button
Confirmation MessageOptional explanation of what is the
system is asking
Secondary Primary
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer.
Optional instructions for this pane go here
Pane LabelCancel Save
1 2 3 4 5 6 7 8 9 0
- / : ; ( ) $ & @
. , ? ! ’#+=
spaceABC return
”
First Name Example Text here
Last Name Example Text here
Phone Number Example Text here
low high
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer.
Item 1 ON
Item 3 Optional Status
Item 4 Optional Status
ICN ICN
Option 1 Optional Status
Option 2 Optional Status
Item 2 OFF
WebDevMobileBack Button
Carrier 12:34 PM
2010년 10월 17일 일요일
Desktop API, Phone APITitanium.Codec
Titanium.DesktopTitanium.JSON
Titanium.NotificationTitanium.ProcessTitanium.Worker
Titanium.UpdaterManager
2010년 10월 17일 일요일
Desktop API, Phone APITitanium.Platform
Titanium.FileSystemTitanium.Geolocation
Titanium.GestureTitanium.Contact
Titanium.AccelerometerTitanium.Media
Titanium.Network
Titanium.CodecTitanium.Desktop
Titanium.JSONTitanium.Notification
Titanium.ProcessTitanium.Worker
Titanium.UpdaterManager
2010년 10월 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)
2010년 10월 17일 일요일
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!!
2010년 10월 17일 일요일
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
2010년 10월 17일 일요일
Desktop
• Window 7, XP and Vista
• Mac OS X 10.6.4 (Snow Leopard)
• Ubuntu 9.10 (Karmic Koala)
2010년 10월 17일 일요일
Mobile
• iPhoneLastest iPhone SDK 3.2 for iPhone/iPad
• AndroidAndroid SDK - http://developer.android.com/sdk/index.htmlSDK platform Android 1.6 API 4(recommand)
Google APIs package for KitchenSinkJava Development Kit 6(java 1.6)
2010년 10월 17일 일요일
• Downloadhttp://www.appcelerator.com/products/download/
• Source Installgit clone http://github.com/appcelerator/titanium_developer.git
2010년 10월 17일 일요일
See more
• Desktophttp://developer.appcelerator.com/doc/desktop/guides
• Mobilehttp://developer.appcelerator.com/doc/mobile/guides
2010년 10월 17일 일요일
resource : http://www.appcelerator.com/showcase/applications-showcase/
2010년 10월 17일 일요일
• Usage Demo
• Desktop uTube Deck Demo
• Twitter Client Demo with Ext JS
• iPhone/iPad KitchenSink Demo
2010년 10월 17일 일요일
• Localization Framework
• Advertising, Commerce
• Buletooth networking
• Third-party accessories
• Application Database Sync
• encrypted databases
Titanium 2.0
2010년 10월 17일 일요일
PhoneGap
• http://www.phonegap.com/
2010년 10월 17일 일요일
Corona
• http://www.anscamobile.com/
2010년 10월 17일 일요일
QuickConnect
• http://quickconnect.pbworks.com/
2010년 10월 17일 일요일
Reference
• Appcelerator Titaniumhttp://www.appcelerator.com
• Wikipediahttp://en.wikipedia.org/wiki/Appcelerator_Titanium
• Titanium tutorialhttp://www.sergemeunier.com/blog/tutorials/titanium-tutorials/
• Compare with othershttp://stackoverflow.com/questions/1482586/comparison-between-corona-phonegap-titanium
2010년 10월 17일 일요일
endingAuthor : rhio.kim
@rhiokim
http://rhio.tistory.com
FRENDS
NHNJavaScript Ninija
2010년 10월 17일 일요일
endingAuthor : rhio.kim
@rhiokim
http://rhio.tistory.com
FRENDS
NHN
JavaScript Ninija
2010년 10월 17일 일요일