ByLavanya Lakshman

Balachandar Sankar7/24/2010

YAP – Yahoo Application

Platform

Agenda

• Introduction• Gadget XML• Supporting Views• YML• Caja/YUI• OpenSocial• Walkthrough of Sample Gadget XML• App Creation Steps• Joyent Web Hosting• DEMO• Questions

Yahoo!’s Footprint

• 700M people use Y! Worldwide

• 200M people visit every day, 365 days a year

• Yahoo!’s social graph is growing rapidly

Introduction: YAP [Yahoo Application Platform]

• YAP, is a platform that allows developers to build web applications that would be accessible across different yahoo networks

• Apps are easier to create • Open application could leverage Yahoo!’s

enormous social graph.• Open applications has various access points

– Yahoo! Frontpage– MyYahoo!– Yahoo! Toolbar– Yahoo! Pulse– Yahoo! Games (Coming soon…)– Yahoo! Messenger Plugin (Coming soon…)

MyYahoo!

Yahoo Frontpage

Yahoo! Pulse

Yahoo! Toolbar

Yahoo! Games (Mock up)

Yahoo! Messenger Plugin (Mock up)

Getting Started

• App is defined by a Gadget XML

• Gadget XML conforms to OpenSocial gadgets API specification.

http://developer.yahoo.com/yap/guide/gadgets-xml-config.html

Getting Started .. contd

<?xml version="1.0" encoding="utf-8"?><Module> <ModulePrefs title=”Sample app” title_url=http://example.com description="test app” author="Bala” author_link="http://www.example.com"> <Icon>http://example.com/my_icon-16X16.gif</Icon> <Locale lang="en" country="us"/>  </ModulePrefs> <Content type="html" view="YahooSmallView,”> <![CDATA[This is small view ]]> </Content> <Content type="html" view="YahooFullView" href=http://example.com/></Content> <Content type="html" view=“preview”> <![CDATA[This is preview view]]> </content></Module>

Yahoo Small View

• No Javascript.

• Faster

• HTML or YML Lite (Subset of YML).

• Two States– Default– Personalized

Yahoo Small View

Yahoo Full View

• Supports HTML, CSS, YML, YUI and Caja friendly JS

• Richer Interface

• Opensocialv0.8/0.9 compatible

Yahoo Full View

Preview View

• Content is shown to users who are– Not signed in– Haven’t installed / authorized to view application

• Try to have some interesting preview content, so that users are motivated to install the app.

• yml:customize tag is used for installing an app

YML – Yahoo Markup Language

• Similar in format to XML, Yahoo! Markup Language (YML) provides functionality to Open Applications in a safe and standardized fashion

• Adds functionality to Open Application.

http://developer.yahoo.com/yap/guide/yapdev-yml.html

yml:ayml:adyml:audioyml:customizeyml:formyml:friend-selectoryml:if-env yml:include

yml:messageyml:nameyml:profile-picyml:pronounyml:shareyml:swfyml:user-badge 

YML – Yahoo Markup Language

<yml:a view=“YahooFullView” params=hello.php?a=b>Hello Open Hack Day</yml:a>

<yml:friend-selector uid=“viewer”/>

<yml:name uid=“viewer”/>

<yml:user-badge uid=“viewer” capitalize=“true”/>

 <yml:share>                    <yml:friend-selector name="to" multiple="true" size="10” >          <input type="submit" value="Share with your friends!">  </yml:share> 

YAP with Caja/YUI

• Caja is a system that transforms ordinary HTML and JavaScript into a secured form of HTML/JS

• Caja is an Opensource project sponsored by Google.

• Caja prevents insecure JS

• YUI is a library of JavaScript utilities and controls for building richly interactive web applications using techniques such as DOM Scripting.

• Supports subset of YUI 2.8.0 libraries and utilitieshttp://developer.yahoo.com/yap/guide/caja-support.html

http://developer.yahoo.com/yap/guide/yui-support.html

Opensocial and its compatibility

• OpenSocial is a collection of common

application programming interfaces (APIs) for web-based social network applications

• Supports OpenSocial 0.9 JavaScript APIs and OpenSocial 0.8.1 RESTful API

• OSML and Opensocial templates are in beta phase.

http://www.opensocial.org/opensocial-foundation/http://developer.yahoo.net/blog/archives/2010/07/opensocial_and_yap.html

Sample Gadget XML<?xml version="1.0" encoding="utf-8"?><Module xmlns:yap="http://www.yahoo.com/ns/yap"> <ModulePrefs title="OHD Demo App" description="OHD Demo App" category="Sports"

category2="Entertainment-Games"><Locale lang="en" country="us"/><Require feature="opensocial-0.8"/><Locale lang="en" country="ca"/><Icon>http://upload.wikimedia.org/wikipedia/commons/4/47/

PNG_transparency_demonstration_1.png</Icon><yap:Extension name="yap.gadgets.ShortDescription">To test YAP functionality</yap:Extension><yap:Extension name="yap.gadgets.ApplicationIconUrl">

http://upload.wikimedia.org/wikipedia/commons/7/70/Rotating_earth_%28small%29.gif</yap:Extension><yap:Extension name="yap.gadgets.YahooComIconUrl">

http://upload.wikimedia.org/wikipedia/commons/7/70/Rotating_earth_%28small%29.gif</yap:Extension><yap:Extension name="yap.gadgets.ScreenshotUrl">

http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png

</yap:Extension><yap:Extension name="yap.gadgets.CreatorImageUrl">

http://www.dirtbikebitz.com/images/products/graphics/Honda/cr125-250/2009_One_Industries_HH_Lifestyle_Graphic_Kit.jpg

</yap:Extension><yap:Extension name="yap.gadgets.CreatorWebsiteUrl">http://www.yahoo.com</yap:Extension><yap:Extension name="yap.gadgets.TouUrl">http://www.yahoo.com</yap:Extension><yap:Extension name="yap.gadgets.PrivacyUrl">http://www.yahoo.com</yap:Extension><yap:Extension name="yap.gadgets.Tags">steph,喜 ,中國</yap:Extension><yap:Extension name="yap.gadgets.baseUrl"/>

</ModulePrefs>

……….</module>

Sample Gadget XML .. contd

<Content type="html" view="YahooFullView"><![CDATA[<html><div id="yapqa-app"></div><script type="text/javascript" >……..

</script></html>]]> </Content>

<!--<Content type="html" view="YahooFullView"

href="http://aagmgw3v.yahoo.joyent.us/YUI.html"/>

<Content type="html" view="YahooFullView"><![CDATA[<div class="viewerClean"><yml:user-badge uid="viewer" linked="false" width="55" capitalize="true"/></div>]]> </Content>

<Content type="html" view="YahooSmallView"><h1>This is a sample Small View</h1> </Content>

</Module>

Open App Creation [YDN Dashboard]

YDN Devtool Page

Import Gadget

Live App.Share with friends.

Reviewed before publishing

App Analytics

App Analytics

Hosting solution

JOYENT

http://www.joyent.com/developers/free-yahoo-developer-program/

DEMO

Gadget xml templatehttp://www.balasankar.com/OpenHackDay_India_2010/YAP/Gadge

t_Xml_Template.xml

Thank You