jQTouch at jQuery Conference 2010
Upcoming SlideShare
Loading in...5
×
 

jQTouch at jQuery Conference 2010

on

  • 7,676 views

My presentation from the 2010 jQuery Conference. Covers a bit of WebKit, emerging standards, and an overview of jQTouch.

My presentation from the 2010 jQuery Conference. Covers a bit of WebKit, emerging standards, and an overview of jQTouch.

Statistics

Views

Total Views
7,676
Views on SlideShare
7,416
Embed Views
260

Actions

Likes
9
Downloads
230
Comments
4

4 Embeds 260

http://www.slideshare.net 223
http://wiki.onakasuita.org 28
http://www.linkedin.com 8
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • Outpost, WKB, <br />
  • <br />
  • Does not mean 60% of all devices are iPhone, just that we like using the internet more. Why? WebKit. WebKit is on iPhone, Andoroid, and Palm, and likely coming to RIM soon. What does it mean? <br />
  • <br />
  • <br />
  • opacity, corners, shadows, gradients &#x2014;&#xA0;rotate, scale, depth, hardware accelerated. Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android. <br />
  • opacity, corners, shadows, gradients &#x2014;&#xA0;rotate, scale, depth, hardware accelerated. Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android. <br />
  • opacity, corners, shadows, gradients &#x2014;&#xA0;rotate, scale, depth, hardware accelerated. Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android. <br />
  • Easy distribution, no app store, easy dev, tons of features &#x2014;&#xA0;Brian. <br />
  • Made for WebKit browsers to create web apps quickly. Who&#x2019;s developed with web? Who&#x2019;s used jQTouch? Who uses jQuery? It&#x2019;s been a month since. <br />
  • Now for the code. Just a few lines of Javascript. <br />
  • Now for the code. Just a few lines of Javascript. <br />
  • Now for the code. Just a few lines of Javascript. <br />
  • Now for the code. Just a few lines of Javascript. <br />
  • Panels are created in a stub fashion, body > *. Using plain, semantic code, like classes. <br />
  • Panels are created in a stub fashion, body > *. Using plain, semantic code, like classes. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • back, slide, useTransitions <br />
  • Panels are created in a stub fashion, body > *. Using plain, semantic code, like classes. <br />
  • <br />
  • 2 themes by default, just switch CSS file. <br />
  • Matches identity of Flash site. <br />
  • <br />
  • Built in by default. <br />
  • All Ajax &#x201C;live&#x201D;. GET requests cached. <br />
  • All Ajax &#x201C;live&#x201D;. GET requests cached. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Benefits of web distribution, Benefits of PhoneGap, Eventual cross-compatability <br />
  • Simplest. Still can go offline, internal db, etc. <br />
  • <br />
  • Simplest. Still can go offline, internal db, etc. <br />
  • Device support, more transitions/themes, XUI port, COD <br /> Upcoming extensions <br />
  • <br />

jQTouch at jQuery Conference 2010 jQTouch at jQuery Conference 2010 Presentation Transcript

  • jQTouch
  • David Kaneda Creative director at Ext and Rock Band Superstar. davidkaneda.com @davidkaneda
  • (thx Jean)
  • going mobile
  • US Mobile Traffic iPhone OS Android 39% RIM OS webOS Windows Mobile Other 47% 7% 2%3% 2% http://metrics.admob.com/ (jan 2010)
  • NOT the future of * SRRY NOKIA
  • The Future of Mobile
  • The Future of Mobile Apple + Android Touch-based Resolution & Color WebKit
  • WebKit Rocks! • CSS3 • Transforms, Transitions, and Animations • Canvas • SQLite • Cache Manifest • Geo-Location
  • WebKit Rocks! • CSS3 • Transforms, Transitions, and Animations • Canvas • SQLite • Cache Manifest • Geo-Location
  • “Learning Objective-C is great, if only for the historical obscurity of it.” — Brian LeRoux, PhoneGap
  • jQTouch
  • Icon (no gloss) Startup Screen Full Screen Black Status Bar No Zooming
  • javascript
  • HTML
  • full screen options
  • full screen options • icon string null
  • full screen options • icon string null • addGlossToIcon boolean true
  • full screen options • icon string null • addGlossToIcon boolean true • fixedViewport boolean true
  • full screen options • icon string null • addGlossToIcon boolean true • fixedViewport boolean true • fullScreen boolean true
  • full screen options • icon string null • addGlossToIcon boolean true • fixedViewport boolean true • fullScreen boolean true • fullScreenClass string ‘fullscreen’
  • full screen options • icon string null • addGlossToIcon boolean true • fixedViewport boolean true • fullScreen boolean true • fullScreenClass string ‘fullscreen’ • startupScreen string null
  • full screen options • icon string null • addGlossToIcon boolean true • fixedViewport boolean true • fullScreen boolean true • fullScreenClass string ‘fullscreen’ • startupScreen string null • statusBar string ’normal’
  • More Options
  • More Options • preloadImages array null
  • More Options • preloadImages array null • touchSelector string ‘a, .touch’
  • More Options • preloadImages array null • touchSelector string ‘a, .touch’ • formSelector string ‘form’
  • More Options • preloadImages array null • touchSelector string ‘a, .touch’ • formSelector string ‘form’ • submitSelector string ‘.submit’
  • More Options • preloadImages array null • touchSelector string ‘a, .touch’ • formSelector string ‘form’ • submitSelector string ‘.submit’ • cacheGetRequests boolean true
  • More Options • preloadImages array null • touchSelector string ‘a, .touch’ • formSelector string ‘form’ • submitSelector string ‘.submit’ • cacheGetRequests boolean true • useFastTouch boolean true
  • animations
  • Animation Options
  • Animation Options • backSelector string ‘.back, .cancel’ • slideSelector string ‘body > * > ul li a, .slide’ • slideUpSelector string ‘.slideup’ • flipSelector string ‘.flip’ • cubeSelector string ‘.cube’ • swapSelector string ‘.swap’ • fadeSelector string ‘.fade’ • useTransitions boolean true
  • HTML
  • themes
  • apple jqt
  • AJAX
  • GET/POST Caching Live Events
  • GET/POST Caching Live Events
  • EVENTS
  • tap swipe pageAnimationStart pageAnimationEnd turn
  • tap swipe pageAnimationStart pageAnimationEnd turn
  • javascript
  • javascript
  • public object • var jQT = new $.jQTouch(); • jQT.goTo(‘#newpage’, ‘flip’); • jQT.getOrientation(); • jQT.addAnimation({}); • jQT.submitForm(‘#myform’); • jQT.goBack();
  • distribution
  • save to home • Instant deployment • Offline access with Cache Manifest • Internal SQLite database • No Safari interface
  • PhoneGap • Simple, Javascript-based access to Accellorometer, Magnometer (that’s a compass!), Camera, Sound • Distribute on App Store • PROFIT!!! • Easy to port to other devices like Android and Blackberry http://www.phonegap.com/
  • beta 3 • jQuery 1.4 • jQT.goTo(‘myurl.php • Live events ’); • HTML5 Video and • OS4 + iPad support inputs • New animations • Google Maps demo • Loads of fixes • Better history support • New callback: pageInserted
  • </presentation> <discussion>
  • get involved jqtouch.com code.google.com/p/jqtouch/ groups.google.com/group/jqtouch/ more davidkaneda.com webkitbits.com @davidkaneda