Your SlideShare is downloading. ×
0
YAP: Yahoo! Application Platform<br />By<br />Amit Kumar<br />Supriyo Bose<br />
What is yap ?<br />“YAP is a platform that allows developers to build web applications that would be accessible across dif...
Programming modelS<br />Browser<br />SERVER-SIDE<br />“Cajoled” JS/HTML<br />Request<br />YAP Engine<br />HTML<br />JS, CS...
Programming modelS<br />Browser<br />CLIENT-SIDE<br />io.datarequest<br />“Cajoled” JS/HTML<br />io.makerequest<br />YAP E...
Programming modelS<br />BROWSER<br />FLASH<br />To 3rd PARTY SITE<br />FLASH OBJECT<br />OAuth support<br />YAP Engine<br ...
Why build for YAP ?<br />
<ul><li> Yahoo!’s huge footprint
  600+ million users
  330+ million unique visitors per month
  Multiple destinations:
 My Yahoo!
 Toolbar
 Games
 Messenger
 Pulse
 OpenSocial: Build for the web</li></li></ul><li><ul><li> Discovery</li></li></ul><li>my yahoo!<br />
toolbar<br />
Games<br />
Yahoo! Messenger <br />
Pulse<br />
Creating your first App<br />
Gadget xml <br /><ul><li> App is defined by the Gadget XML.
 Conforms to OpenSocial gadgets API specification    </li></ul>http://developer.yahoo.com/yap/guide/gadgets-xml-config.htm...
YahooSmallView<br /><ul><li>No Javascript
 HTML,CSS and YML Lite (subset of YML)
 Faster
 Two states (default or personalized)</li></li></ul><li>YahooFullView<br /><ul><li>Supports HTML, CSS, YML and JS
Richer Interface</li></li></ul><li>YahooFullView<br />
Creating your first app<br />Go to http://developer.yahoo.com and click on My Projects <br />
Creating your first app<br />
Creating your first app<br />
Creating your first app<br />
Preview your app<br />
Preview view<br />
Creating your first app<br />
Launch your app !<br />
Your app is ready !<br />http://apps.yahoo.com/-3XNdoV62<br />
Code snippet: Using PHP sdk<br />https://github.com/kkunal/yap-hacks/tree/master/social<br />
YAP FEATURES<br />
OpenSocial: Common APIs, multiple destinations.<br />
OpenSocial is a collection of common APIs for web-based social network applications.<br />We are 0.8/0.9 compliant.<br />
Opensocial example<br />http://apps.yahoo.com/-EKalHy4k<br />
OPENSOCIAL EXAMPLE<br />https://github.com/kkunal/yap-hacks/tree/master/opensocial/api_examples<br />
OPENSOCIAL EXAMPLE<br />http://apps.yahoo.com/-hi0q6k74<br />
Opensocial example<br />https://github.com/kkunal/yap-hacks/tree/master/opensocial/api_examples<br />
OpenSocial APIs can also be invoked on the server side. <br />Yahoo! Open Social REST End Point: http://appstore.apps.yaho...
+<br />YML, a simple way to get more out of your App !<br />
YML – Yahoo! Markup Language<br /><ul><li>   XML-syntax
Upcoming SlideShare
Loading in...5
×

YAP, Open Hack Day, Bangalore 2011

674

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
674
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Module is the root node.ModulePrefs is used to define app meta data. Content describes the app’s content.YML is supported only in YahooSmallView, YahooFullView, and, Preview. In other views, YML tags would be stripped off. The code can be put within the gadget XML as well as referenced to external file.
  • Change xml ..
  • Use preview to test your App and see if things are working fine.
  • Expand the dropdownChange the App
  • Additional slide for pulse launching the app
  • Let’s do a little deep dive and see what features YAP offers
  • Exact APIs will be clear with the examples in coming slides.
  • Are there any limitations to YAP ?
  • Transcript of "YAP, Open Hack Day, Bangalore 2011"

    1. 1.
    2. 2. YAP: Yahoo! Application Platform<br />By<br />Amit Kumar<br />Supriyo Bose<br />
    3. 3. What is yap ?<br />“YAP is a platform that allows developers to build web applications that would be accessible across different Yahoo! properties.”<br />
    4. 4. Programming modelS<br />Browser<br />SERVER-SIDE<br />“Cajoled” JS/HTML<br />Request<br />YAP Engine<br />HTML<br />JS, CSS, YML<br />Request + <br />Add-On info<br />Yahoo! API/ Any Open API<br />Developer Server<br />
    5. 5. Programming modelS<br />Browser<br />CLIENT-SIDE<br />io.datarequest<br />“Cajoled” JS/HTML<br />io.makerequest<br />YAP Engine<br />Yahoo! API/ Any Open API<br />Signing + OAuth<br />Developer Server<br />
    6. 6. Programming modelS<br />BROWSER<br />FLASH<br />To 3rd PARTY SITE<br />FLASH OBJECT<br />OAuth support<br />YAP Engine<br />Yahoo! API/ Any Open API<br />Developer Server<br />
    7. 7. Why build for YAP ?<br />
    8. 8. <ul><li> Yahoo!’s huge footprint
    9. 9. 600+ million users
    10. 10. 330+ million unique visitors per month
    11. 11. Multiple destinations:
    12. 12. My Yahoo!
    13. 13. Toolbar
    14. 14. Games
    15. 15. Messenger
    16. 16. Pulse
    17. 17. OpenSocial: Build for the web</li></li></ul><li><ul><li> Discovery</li></li></ul><li>my yahoo!<br />
    18. 18. toolbar<br />
    19. 19. Games<br />
    20. 20. Yahoo! Messenger <br />
    21. 21. Pulse<br />
    22. 22. Creating your first App<br />
    23. 23. Gadget xml <br /><ul><li> App is defined by the Gadget XML.
    24. 24. Conforms to OpenSocial gadgets API specification </li></ul>http://developer.yahoo.com/yap/guide/gadgets-xml-config.html<br />
    25. 25. YahooSmallView<br /><ul><li>No Javascript
    26. 26. HTML,CSS and YML Lite (subset of YML)
    27. 27. Faster
    28. 28. Two states (default or personalized)</li></li></ul><li>YahooFullView<br /><ul><li>Supports HTML, CSS, YML and JS
    29. 29. Richer Interface</li></li></ul><li>YahooFullView<br />
    30. 30. Creating your first app<br />Go to http://developer.yahoo.com and click on My Projects <br />
    31. 31. Creating your first app<br />
    32. 32. Creating your first app<br />
    33. 33. Creating your first app<br />
    34. 34. Preview your app<br />
    35. 35. Preview view<br />
    36. 36. Creating your first app<br />
    37. 37. Launch your app !<br />
    38. 38. Your app is ready !<br />http://apps.yahoo.com/-3XNdoV62<br />
    39. 39. Code snippet: Using PHP sdk<br />https://github.com/kkunal/yap-hacks/tree/master/social<br />
    40. 40. YAP FEATURES<br />
    41. 41. OpenSocial: Common APIs, multiple destinations.<br />
    42. 42. OpenSocial is a collection of common APIs for web-based social network applications.<br />We are 0.8/0.9 compliant.<br />
    43. 43. Opensocial example<br />http://apps.yahoo.com/-EKalHy4k<br />
    44. 44. OPENSOCIAL EXAMPLE<br />https://github.com/kkunal/yap-hacks/tree/master/opensocial/api_examples<br />
    45. 45. OPENSOCIAL EXAMPLE<br />http://apps.yahoo.com/-hi0q6k74<br />
    46. 46. Opensocial example<br />https://github.com/kkunal/yap-hacks/tree/master/opensocial/api_examples<br />
    47. 47. OpenSocial APIs can also be invoked on the server side. <br />Yahoo! Open Social REST End Point: http://appstore.apps.yahooapis.com/social/rest<br />Examples of this are at: <br />https://github.com/yahoo/yos-social-php5/tree/master/examples<br />
    48. 48. +<br />YML, a simple way to get more out of your App !<br />
    49. 49. YML – Yahoo! Markup Language<br /><ul><li> XML-syntax
    50. 50. Yahoo! Markup Language (YML) provides functionality to Open Applications in a safe and standardized fashion.
    51. 51. Adds functionality to Open Application.</li></ul>http://developer.yahoo.com/yap/guide/yapdev-yml.html<br />
    52. 52. yml:swf<br />https://github.com/kkunal/yap-hacks/tree/master/yml/swf<br />http://apps.yahoo.com/-JfamS46m<br />
    53. 53. yml:a<br />https://github.com/kkunal/yap-hacks/tree/master/yml/tab<br />http://apps.yahoo.com/-Mg5VBt6o<br />
    54. 54. yml:profile-pic, yml:name etc<br />https://github.com/kkunal/yap-hacks/tree/master/yml/profile<br />http://apps.yahoo.com/-MOtB6q4s<br />
    55. 55. Looks too simple, there must be a catch ?!<br />
    56. 56. Caja<br /><ul><li> Caja is a system that transforms ordinary HTML and JavaScript into a secured form by removing unsafe HTML/CSS/Javascript
    57. 57. Enables Yahoo! to embed third party applications safely.
    58. 58. Caja is an open source project sponsored by Google.
    59. 59. Validating your Javascript using:
    60. 60. http://www.jslint.com
    61. 61. http://cajadores.com/demos/testbed
    62. 62. Caja works well with YUI 2.8 ! Prefer YUI over external libraries.</li></ul>Refer :<br /><ul><li>Cheatsheet
    63. 63. http://developer.yahoo.com/yap/guide/caja-support.html</li></li></ul><li>Yui example<br />https://github.com/kkunal/yap-hacks/tree/master/yui<br />http://apps.yahoo.com/-EDNQYz4e<br />
    64. 64. YAP parameters<br />Browser<br />Parameters YAP passes:<br /><ul><li> User Agent
    65. 65. Parameters for OAuth calls
    66. 66. User guid</li></ul>“Cajoled” JS/HTML<br />Request<br />YAP Engine<br />Request <br />with parameters <br />Developer Server<br />For complete list of parameters, see<br />http://developer.yahoo.com/yap/guide/yap-params.html<br />
    67. 67. YAP Best Practices<br /><ul><li> Build for YAP. Don’t build elsewhere and test on YAP.
    68. 68. Prefer YUI over other JS libraries.
    69. 69. Adhere to W3C standards.
    70. 70. Avoid Caja problems by:
    71. 71. Pushing more logic to server-side.
    72. 72. Referring to our Cheatsheet !</li></li></ul><li>Important links<br />
    73. 73. Questions?<br /> http://xkcd.com/246/<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×