• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Yui mobile
 

Yui mobile

on

  • 4,115 views

Latest version of the YUI3 mobile talk

Latest version of the YUI3 mobile talk

Statistics

Views

Total Views
4,115
Views on SlideShare
4,115
Embed Views
0

Actions

Likes
6
Downloads
50
Comments
0

0 Embeds 0

No embeds

Accessibility

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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Yui mobile Yui mobile Presentation Transcript

  • YUI MobileGonzalo Cordero @goonieiam
  • YUI().use(“42”) So what’s there? What’s coming? Can I see a demo?When would feature ____ be available?
  • Did I miss the memo?
  • YUI().use(“Intro”) “Use”One statement to rule them all
  • YUI().use(“Mobile”) Look at the quotes
  • YUI().use(“Features”)Those features you’re thinking about are not unique to mobile
  • TouchGestures
  • Touch Gestures TransitionsOffline Cache History
  • YUI().use(“Constrains”) Neither are the constrains...
  • k-weight run-time performance screen real estateOk, except for maybe this one
  • YUI 3
  • YUI().use(“Eco”)• Code once use everywhere• Best F2E principles still apply• Learning ecosystem
  • YUI().use(“Mobile”) Everything you need is already available.
  • YUI().use(“Features”)• Loader• Transitions• Touch Gestures• ScrollView Widget• History
  • YUI().use(“Loader”)• Feature based loading• Dependency calculation• Manual or Automatic
  • YUI().use(“Loader”)Manual: use(“selector-native”,”transition-native”)Automatic: use(“Node”) //This won’t load any of the IE6 stuff if the request comes from a phone.
  • YUI().use(“The best”) and it just about to get even better...
  • YUI().use(“YLS”)• Server side dependency resolution using node.js• Extremely fast• You can use it with your own modules
  • YUI().use(“transition”, function(Y){ ...});
  • YUI().use(“Transition”)• Cross-Browser support• Vendor prefixes• Hardware acceleration(CSS3)
  • YUI().use(“Transition”) function Tedious () { node.style.WebkitTransitionProperty = left, top ; node.style.WebkitTransitionDuration = 1s, 2s ; node.style.WebkitTransitionTimingFunction = ease- out, ease-in ; node.style.top = ‘100px’; node.style.left = ‘200px’;}
  • YUI().use(“Transition”)function NotTedious() { node.transition({ left: { duration: 1, easing: ease-out, value: ‘200px’ }, top: { duration: 2, easing: ease-in, value: ‘100px’ } });}
  • YUI().use(“history”)YUI().use(“history”, function(Y){ ...});
  • YUI().use(“history”)• Let’s you create browser history entries• Useful to maintain control custom navigation controls• Supports HTML5 History API(when available)
  • DemoHistory + Transition
  • YUI().use(“touch”)
  • DragDrop ScrollViewmouse touch mouse touch
  • DragDrop ScrollViewmouse touch mouse touch Gestures
  • DragDrop ScrollViewmouse touch mouse touch Gestures movemouse touch
  • DragDrop ScrollView Gestures move flickmouse touch mouse touch
  • DragDrop ScrollView move move Gestures move flickmouse touch mouse touch
  • DragDrop ScrollView move move flick Gestures move flickmouse touch mouse touch
  • YUI.use(“Demo”) Event touch demo
  • YUI.use(“event-touch”)• Availble in most touch based devices: touchstart, touchmove, touchend, touchcancel.• iOS: gesturestart,gesturechange,gestureend
  • YUI().use(“event- gesture”)• Can be used combined with mouse input devices• Two interesting modules: Flicks and Gestures
  • YUI.use(“event-flick”)myNode.on("flick", flickHandler, {// only notify me if the flick covered// more than 20px and was faster than 0.8px/ms minDistance:20, minVelocity:0.8});
  • YUI().use(“event- move”)• It provides a set of synthetic events to detect gestures• gesturemovestart, gesturemove, gesturemoveend.
  • YUI().use(“event- move”)myNode.on("gesturemovestart",flickHandler, {// Wait for 1000ms, or for thefinger/mouse to moves by more than3pxs before firing the event minDistance:20, minTime:1000});
  • YUI().use(“event- move”)// Notify me when the user moves the finger, ormouse (only if a gesturemovestart was received onthe node).myNode.on("gesturemove", function(e){...});// Notify me when the user lifts their finger, or lets goofthe mouse button (only if a gesturemovestart wasreceived on the node).myNode.on("gesturemoveend",function(e) {...});
  • YUI().use(“scrollview”)• Provides scrollable content for touch enabled devices.• Two plugins: ScrollViewScrollBars & ScrollViewPaginator
  • How to? <ul> <li> <img src=”image.jpeg”> <div class="yui-cap"> <h2>Player let $21 millioncheck sit in house</h2> <p>For of weeks,Washingtons Albert didnt...</p> </div> </li> </ul>
  • ScrollViewYUI({...}).use("scrollview", function(Y){ var scrollview = new Y.ScrollView({ srcNode:"#yui-main ul", flick : {minVelocity:0.8}, deceleration : 0.98, bounce: 0.1, width:"20em" });});
  • Another case study: Local mobile
  • YUI3 Mobile example
  • YUI3 Mobile examplepulldown event
  • YUI3 Mobile examplepulldown event ScrollView module
  • YUI3 Mobile examplepulldown event ScrollView module touch-events + CSS3
  • Demo
  • YUI().use(“Widgets”) So YUI is the king of widgets.... Where are my mobile widgets?!
  • YUI().use(“3.4.0")• Page flow/App state/Navigate(MVC)• Page level controls - Toolbars, navbars• Dialogs/Overlays (skinning)
  • YUI().use(“Widgets”) Keep an eye open for 3.4.0
  • YUI().use(“Gallery”) In the meantime... Got a cool idea? Build it! http://yuilibrary.com/gallery/
  • YUI().use(“Thank you”) @goonieiam http://developer.yahoo.com/yui/3/