SlideShare una empresa de Scribd logo
1 de 48
Descargar para leer sin conexión
jQTouch and Titanium
           by Marc Grabanski
Mobile Web Development
Native Apps in JavaScript
Ah, choices!
Native Apps
Native Apps


• High Performance
Native Apps


• High Performance
• Findable in App Store
Native Apps


• High Performance
• Findable in App Store
• Native UI, Media API,
Native Apps


• High Performance
• Findable in App Store
• Native UI, Media API,
  File System, Accelerometer
Native Apps


• High Performance
• Findable in App Store
• Native UI, Media API,
  File System, Accelerometer
• Monetization
Web App Features
Web App Features
• Instant Updates (no app store)
Web App Features
• Instant Updates (no app store)
• HTML5 Offline, Local Storage
Web App Features
• Instant Updates (no app store)
• HTML5 Offline, Local Storage
• Save to Home Icon
Web App Features
•   Instant Updates (no app store)
•   HTML5 Offline, Local Storage
•   Save to Home Icon
•   Touch Events
Web App Features
•   Instant Updates (no app store)
•   HTML5 Offline, Local Storage
•   Save to Home Icon
•   Touch Events
•   Geolocation
Web App Features
•   Instant Updates (no app store)
•   HTML5 Offline, Local Storage
•   Save to Home Icon
•   Touch Events
•   Geolocation
•   Canvas
Web App Features
•   Instant Updates (no app store)
•   HTML5 Offline, Local Storage
•   Save to Home Icon
•   Touch Events
•   Geolocation
•   Canvas
•   CSS Transforms
Web App Features
•   Instant Updates (no app store)
•   HTML5 Offline, Local Storage
•   Save to Home Icon
•   Touch Events
•   Geolocation
•   Canvas
•   CSS Transforms
•   100% revenue
jQTouch
jQTouch

• Themes
jQTouch

• Themes
• Automatic Navigation
jQTouch

• Themes
• Automatic Navigation
• CSS Animations (fast)
jQTouch

• Themes
• Automatic Navigation
• CSS Animations (fast)
• Save Icon to Home
jQTouch

• Themes
• Automatic Navigation
• CSS Animations (fast)
• Save Icon to Home
• Ajax
jQTouch

• Themes
• Automatic Navigation
• CSS Animations (fast)
• Save Icon to Home
• Ajax
• Touch Events
Can’t jQTouch this!
jQTouch is markup driven
     HTML and CSS
Pages
<div id=”home”>
 <div class=”toolbar”>
   <h1>My Page</h1>
   <a class=”back”>Back</a>
 </div>
 <ul>
   <li><a href=”#mypage”>link</a></li>
 </ul>
</div>
<div id=”mypage”>
 <div class=”toolbar”>
   <h1>My Page</h1>
   <a class=”back”>Back</a>
 </div>
CSS transforms are
hardware accelerated
Animation
• slide      • swap
• flip       • cube
• fade       • pop
• slideup    • dissolve
Animation
• slide          • swap
• flip           • cube
• fade           • pop
• slideup        • dissolve
<a href=”#page” class=”swap”>
Animation
  • slide             • swap
  • flip              • cube
  • fade              • pop
  • slideup           • dissolve
   <a href=”#page” class=”swap”>

clicking back will auto-reverse animation
Events
Events


• tap - touch version of click
Events


• tap - touch version of click
• pageAnimationStart
Events


• tap - touch version of click
• pageAnimationStart
• pageAnimationEnd
Events


• tap - touch version of click
• pageAnimationStart
• pageAnimationEnd
• turn - orientation turned
Events


• tap - touch version of click
• pageAnimationStart
• pageAnimationEnd
• turn - orientation turned
• swipe
Themes




jQT and Apple
Web App.. Plus Native



       +
+= native app
PhoneGap + jQTouch
PhoneGap + jQTouch

• Accellorometer
PhoneGap + jQTouch

• Accellorometer
• Magnometer
PhoneGap + jQTouch

• Accellorometer
• Magnometer
• Camera
PhoneGap + jQTouch

• Accellorometer
• Magnometer
• Camera
• Sound
PhoneGap + jQTouch

• Accellorometer
• Magnometer
• Camera
• Sound
• Get in the App Store!
Thank you!
Marc Grabanski:
http://marcgrabanski.com

Twitter: @1Marc

Más contenido relacionado

Destacado

jQuery Learning
jQuery LearningjQuery Learning
jQuery Learning
Uzair Ali
 
Introduction to open_gl_in_android
Introduction to open_gl_in_androidIntroduction to open_gl_in_android
Introduction to open_gl_in_android
tamillarasan
 
OpenGL Introduction.
OpenGL Introduction.OpenGL Introduction.
OpenGL Introduction.
Girish Ghate
 
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScriptjQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
Philipp Bosch
 
Apache web server
Apache web serverApache web server
Apache web server
zrstoppe
 

Destacado (20)

HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
 
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
 
jQuery Learning
jQuery LearningjQuery Learning
jQuery Learning
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
 
jQTouch at jQuery Conference 2010
jQTouch at jQuery Conference 2010jQTouch at jQuery Conference 2010
jQTouch at jQuery Conference 2010
 
Introduction to LESS
Introduction to LESSIntroduction to LESS
Introduction to LESS
 
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
 
Introduction to open_gl_in_android
Introduction to open_gl_in_androidIntroduction to open_gl_in_android
Introduction to open_gl_in_android
 
Opengl basics
Opengl basicsOpengl basics
Opengl basics
 
OpenGL ES Presentation
OpenGL ES PresentationOpenGL ES Presentation
OpenGL ES Presentation
 
OpenGL Introduction.
OpenGL Introduction.OpenGL Introduction.
OpenGL Introduction.
 
OpenGLES - Graphics Programming in Android
OpenGLES - Graphics Programming in Android OpenGLES - Graphics Programming in Android
OpenGLES - Graphics Programming in Android
 
OpenGL ES 2.x Programming Introduction
OpenGL ES 2.x Programming IntroductionOpenGL ES 2.x Programming Introduction
OpenGL ES 2.x Programming Introduction
 
OpenGL NVIDIA Command-List: Approaching Zero Driver Overhead
OpenGL NVIDIA Command-List: Approaching Zero Driver OverheadOpenGL NVIDIA Command-List: Approaching Zero Driver Overhead
OpenGL NVIDIA Command-List: Approaching Zero Driver Overhead
 
HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기
 
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScriptjQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
 
Apache web server
Apache web serverApache web server
Apache web server
 
jQuery in 15 minutes
jQuery in 15 minutesjQuery in 15 minutes
jQuery in 15 minutes
 
jQuery PPT
jQuery PPTjQuery PPT
jQuery PPT
 

Similar a jQTouch and Titanium

WordCamp 2012 - Seth Carstens Presentation (Responsive Width)
WordCamp 2012 - Seth Carstens Presentation (Responsive Width)WordCamp 2012 - Seth Carstens Presentation (Responsive Width)
WordCamp 2012 - Seth Carstens Presentation (Responsive Width)
Seth Carstens
 

Similar a jQTouch and Titanium (20)

HTML5: Introduction
HTML5: IntroductionHTML5: Introduction
HTML5: Introduction
 
Beginning jQuery Mobile
Beginning jQuery MobileBeginning jQuery Mobile
Beginning jQuery Mobile
 
UXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UXUXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UX
 
HTML5 JS APIs
HTML5 JS APIsHTML5 JS APIs
HTML5 JS APIs
 
Progressively Enhancing WordPress Themes
Progressively Enhancing WordPress ThemesProgressively Enhancing WordPress Themes
Progressively Enhancing WordPress Themes
 
jQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile: Progressive Enhancement with HTML5jQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile: Progressive Enhancement with HTML5
 
NinjaScript and Mizugumo 2011-02-05
NinjaScript and Mizugumo 2011-02-05NinjaScript and Mizugumo 2011-02-05
NinjaScript and Mizugumo 2011-02-05
 
Fake it 'til you make it
Fake it 'til you make itFake it 'til you make it
Fake it 'til you make it
 
Software Transition from Flash to HTML5 - WebElement
Software Transition from Flash to HTML5 - WebElementSoftware Transition from Flash to HTML5 - WebElement
Software Transition from Flash to HTML5 - WebElement
 
Mobile First - WCJ 2012
Mobile First - WCJ 2012Mobile First - WCJ 2012
Mobile First - WCJ 2012
 
iOS and Android Acceptance Testing with Calabash - Xcake Dublin
iOS and Android Acceptance Testing with Calabash - Xcake DubliniOS and Android Acceptance Testing with Calabash - Xcake Dublin
iOS and Android Acceptance Testing with Calabash - Xcake Dublin
 
WordCamp 2012 - Seth Carstens Presentation (Responsive Width)
WordCamp 2012 - Seth Carstens Presentation (Responsive Width)WordCamp 2012 - Seth Carstens Presentation (Responsive Width)
WordCamp 2012 - Seth Carstens Presentation (Responsive Width)
 
Flexible UI Components for a Multi-Framework World
Flexible UI Components for a Multi-Framework WorldFlexible UI Components for a Multi-Framework World
Flexible UI Components for a Multi-Framework World
 
Flexible UI Components for a Multi-Framework World
Flexible UI Components for a Multi-Framework WorldFlexible UI Components for a Multi-Framework World
Flexible UI Components for a Multi-Framework World
 
A Holistic Approach to HTML5 Game Design & Development
A Holistic Approach to HTML5 Game Design & DevelopmentA Holistic Approach to HTML5 Game Design & Development
A Holistic Approach to HTML5 Game Design & Development
 
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web Applications
 
Android ActionBar Navigation reloaded
Android ActionBar Navigation reloadedAndroid ActionBar Navigation reloaded
Android ActionBar Navigation reloaded
 
End of native?
End of native?End of native?
End of native?
 
Html5 public
Html5 publicHtml5 public
Html5 public
 
Touch the web
Touch the webTouch the web
Touch the web
 

Último

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Último (20)

Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 

jQTouch and Titanium