Your SlideShare is downloading. ×
Yui mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Yui mobile

3,887

Published on

Latest version of the YUI3 mobile talk

Latest version of the YUI3 mobile talk

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,887
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
52
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \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
  • Transcript

    • 1. YUI MobileGonzalo Cordero @goonieiam
    • 2. YUI().use(“42”) So what’s there? What’s coming? Can I see a demo?When would feature ____ be available?
    • 3. Did I miss the memo?
    • 4. YUI().use(“Intro”) “Use”One statement to rule them all
    • 5. YUI().use(“Mobile”) Look at the quotes
    • 6. YUI().use(“Features”)Those features you’re thinking about are not unique to mobile
    • 7. TouchGestures
    • 8. Touch Gestures TransitionsOffline Cache History
    • 9. YUI().use(“Constrains”) Neither are the constrains...
    • 10. k-weight run-time performance screen real estateOk, except for maybe this one
    • 11. YUI 3
    • 12. YUI().use(“Eco”)• Code once use everywhere• Best F2E principles still apply• Learning ecosystem
    • 13. YUI().use(“Mobile”) Everything you need is already available.
    • 14. YUI().use(“Features”)• Loader• Transitions• Touch Gestures• ScrollView Widget• History
    • 15. YUI().use(“Loader”)• Feature based loading• Dependency calculation• Manual or Automatic
    • 16. 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.
    • 17. YUI().use(“The best”) and it just about to get even better...
    • 18. YUI().use(“YLS”)• Server side dependency resolution using node.js• Extremely fast• You can use it with your own modules
    • 19. YUI().use(“transition”, function(Y){ ...});
    • 20. YUI().use(“Transition”)• Cross-Browser support• Vendor prefixes• Hardware acceleration(CSS3)
    • 21. 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’;}
    • 22. YUI().use(“Transition”)function NotTedious() { node.transition({ left: { duration: 1, easing: ease-out, value: ‘200px’ }, top: { duration: 2, easing: ease-in, value: ‘100px’ } });}
    • 23. YUI().use(“history”)YUI().use(“history”, function(Y){ ...});
    • 24. YUI().use(“history”)• Let’s you create browser history entries• Useful to maintain control custom navigation controls• Supports HTML5 History API(when available)
    • 25. DemoHistory + Transition
    • 26. YUI().use(“touch”)
    • 27. DragDrop ScrollViewmouse touch mouse touch
    • 28. DragDrop ScrollViewmouse touch mouse touch Gestures
    • 29. DragDrop ScrollViewmouse touch mouse touch Gestures movemouse touch
    • 30. DragDrop ScrollView Gestures move flickmouse touch mouse touch
    • 31. DragDrop ScrollView move move Gestures move flickmouse touch mouse touch
    • 32. DragDrop ScrollView move move flick Gestures move flickmouse touch mouse touch
    • 33. YUI.use(“Demo”) Event touch demo
    • 34. YUI.use(“event-touch”)• Availble in most touch based devices: touchstart, touchmove, touchend, touchcancel.• iOS: gesturestart,gesturechange,gestureend
    • 35. YUI().use(“event- gesture”)• Can be used combined with mouse input devices• Two interesting modules: Flicks and Gestures
    • 36. 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});
    • 37. YUI().use(“event- move”)• It provides a set of synthetic events to detect gestures• gesturemovestart, gesturemove, gesturemoveend.
    • 38. 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});
    • 39. 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) {...});
    • 40. YUI().use(“scrollview”)• Provides scrollable content for touch enabled devices.• Two plugins: ScrollViewScrollBars & ScrollViewPaginator
    • 41. 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>
    • 42. 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" });});
    • 43. Another case study: Local mobile
    • 44. YUI3 Mobile example
    • 45. YUI3 Mobile examplepulldown event
    • 46. YUI3 Mobile examplepulldown event ScrollView module
    • 47. YUI3 Mobile examplepulldown event ScrollView module touch-events + CSS3
    • 48. Demo
    • 49. YUI().use(“Widgets”) So YUI is the king of widgets.... Where are my mobile widgets?!
    • 50. YUI().use(“3.4.0")• Page flow/App state/Navigate(MVC)• Page level controls - Toolbars, navbars• Dialogs/Overlays (skinning)
    • 51. YUI().use(“Widgets”) Keep an eye open for 3.4.0
    • 52. YUI().use(“Gallery”) In the meantime... Got a cool idea? Build it! http://yuilibrary.com/gallery/
    • 53. YUI().use(“Thank you”) @goonieiam http://developer.yahoo.com/yui/3/

    ×