January 27, 2010

UK Yahoo! Application Platform Competition

Last week saw the final judging for the UK’s first Yahoo! Application Platform competition, which took place at the beautiful Century Club in London. Over the last couple months, some of the most innovative brands and developers battled it out for a chance to have their app showcased on the Yahoo! UK homepage. There were some fantastic submissions, so a big thank you to everyone who took part! Each app was evaluated for its innovation, engaging user experience, and quick and reliable performance. The illustrious panel of judges included Murad Ahmed from The Times newspaper, and Christian Heilmann, Jennifer Davies, and Oli Van Bilsen from Yahoo!

The evening was the culmination of two months hard graft by developers who worked tirelessly to make sure their app was ready in time. The competition was first announced back in November at a Yahoo! Developer Evening in London, attracting attention from developers across the UK who were keen to get their app hosted on the Yahoo! homepage and tap into our tremendous audience – Yahoo! receives more than 23 million UK visitors a month.

After some deliberation, the panel agreed that Nestoria, a property search engine, deserved to be the winner for creating an app that allows people to search real estate listings from all over the UK in one place. As the celebrations got underway, Nestoria’s Ed Freyfogle had this to say about winning the competition, “We’re absolutely delighted! From the outset, we wanted to create an app that was going to engage Yahoo!’s users and help simplify their online lives. Millions of UK users come to Yahoo! every day, and we are excited for them to discover a new way of searching for properties online.”

For Nestoria, the next steps will be to work closely with the Yahoo! team to get their app hosted on Yahoo!’s homepage and app gallery, and we’re looking forward to working with them! You can see photos of the event on Christian Heilmann’s Flickr page.

The Yahoo! Development Network is keen to continue receiving new apps to excite Yahoo! UK visitors, and offers technical support to help those new to the platform. Learn more about building applications on the Yahoo’s Application Platform (YAP) or follow @ydn on Twitter for all the latest news of contests, events, and new offers for web developers.

Sophie Major
Head of YDN International

Posted at 9:11 AM | Comments (0) | Permalink

December 21, 2009

Setting an Open App's detail images in 8 easy steps

If you’re just getting started with the Yahoo! Application Platform (YAP), you should be aware that you’ll need to define a few parameters in the YAP dashboard before your app can be pushed live. Four of these required fields concern the images that represent the app in various contexts. This brief tutorial walks through the steps for defining these images and clarifies the requirements.

Screenshot showing yahoo.com icons. Image credit: YDN

Prerequisites

• An Open App. You can easily create one of these using the YAP dashboard
• 4 images for your app (all dimensions in pixels):
  • Application Icon: 64 x 64 jpg, gif, or png. This is the image that appears in the top left of an app’s border on apps.yahoo.com
  • Favicon: 16 x 16 jpg, gif, png, or ico. This image represents your app in event notifications
  • Yahoo.com icon: 20 x 20 gif. This is the image that appears in the list of applications on the Yahoo! homepage (see screenshot above)
  • Screenshot: 300 x 250 jpg, gif, or png. This image is displayed when a user clicks Options—>About in the app border on apps.yahoo.com
• A publicly accessible server to host these images. Generally, you would put them on the same server that is hosting your app code, but you could put them anywhere online. Flickr is a good option.

Steps

1. Open the YAP dashboard
2. Click on your app’s entry under the My Projects heading
3. Click the Details button in the navigation bar
4. Enter the URLs for each of your app’s images under the Project Images heading. After entering an URL and tabbing/clicking to the next field, a preview image will appear under the URL input box if the image URL is valid.
5. Click the Save button at the bottom of the form. Note: if there are any required details left empty, e.g., Project Name, Description, Supported Languages, etc., the Save button will be deactivated.
6. Click the Open Application button in the navigation bar
7. Click the Update Live button to update the settings associated with your app, including the image URLs.
8. View your app and confirm that the correct images are being used. Note: the Yahoo! homepage processes icons in batches, so changes may take 24 hours to appear.

More info

• Yahoo! Developer Network documentation: Best Practices
• Yahoo! Developer Network documentation: Getting Started: Build Your First Open Application
• Join the YAP developer community in the YAP forum

Erik Eldridge
Yahoo! Developer Network

Posted at 12:02 PM | Comments (0) | Permalink

December 15, 2009

Yahoo Application Platform Release 1.9

A new release of the Yahoo! Application platform is now live on the Yahoo! homepage; on My! Yahoo!, our personalized start page; and on apps.yahoo.com!

Check out the updated apps management page where you can now browse and search for your favorite apps. Developers should note the improvements to our existing sharing flows: users can now share their apps with their contacts and their connections, leveraging their Yahoo! Address Book and enabling the entry of free-form emails. Check out the docs for yml:message to learn more.

Have a look here at some of the highlights of this release. Complete release notes will be available on the YAP documentation pages later this week.

Updated “My Apps” page:
• Check it out: apps.yahoo.com
• New nav bar for the canvas page and the my apps page, users can now go back to their list of apps from the canvas page.
• Users can now search and browse apps on apps.yahoo.com.

Updated share flows:
• yml:message, yml:share and the chrome share (the share button on apps.yahoo.com in the app chrome) have been updated.
• Users can now share their favorite apps with contacts in their address book and enter free form email addresses.
• Why is this a big deal? If an application can access a user’s Yahoo! Address Book, developers gain immediate access to an existing social graph, and don’t need to rely on the user to build out a social graph in order to share and extend the app.

Improved experience and integration on Yahoo! homepage:
• Users will now be able to stay in context when interacting with a YAP application on the Yahoo! homepage.
• Developers who use yml:a in their small view will automatically get this benefit, enabling behaviors like switching the user from the small view to the full view and enabling the user to stay in the homepage when interacting with yml:a links.

Want to check out some of the latest apps? Visit apps.yahoo.com or check out this one if you like gardening:
http://yahoo.com/add?yapid=6SUppx54

Xavier Legros
Director, Product – Yahoo! Application Platform

Posted at 6:44 PM | Comments (3) | Permalink

November 25, 2009

Build a Better App

With the ability now to publish any application on the Yahoo! homepage via the Yahoo! Application Platform (YAP), we've received numerous requests on what guidelines and best practices developers should follow to increase their chance of promotion and exposure to all Yahoo! users.

To help, we've published a set of Best Practices for Application development here on YDN. The guide is comprised of seven sections, each containing links to live Apps demonstrating these principles:

1. Helping Users Discover Your Application
   Yahoo! is a big place, so be sure to maximize your App's reach across the network: leverage Yahoo!'s sharing components; describe your App (and yourself) in a clear, differentiated manner; promote the App on your site, Twitter stream, Facebook fan page, etc.; and provide a signed-out experience so that the largest potential userbase can fall in love with your App.
2. Providing a Better Initial Experience
   Regardless of your App's function, be sure to provide some level of utility to users on its initial load. Also, make sure your interface leverages existing data whenever possible (via YML, YQL, and other data sources), asking the user for personal information only when certain you don't already have access.
3. Optimizing the Views
   Yahoo! offers both a Small View (widget-sized) and Canvas View (full page) to developers, affording opportunities to present quick, at-a-glance snippets of information as well as rich, immersive environments.
4. Making Applications Social
   Many Apps can become significantly more enjoyable when populated with your friends. Yahoo! offers APIs for our Social Directory, providing access to rich profile data and friends' lists, as well as an ever-growing footprint for our Updates user event/activity stream. Leverage both effectively to make your App experience richer while also making your App more visible to folks not currently using it.
5. Respecting Your Users
   Trust is a serious issue for Yahoo! users. They can be turned off to using your App quickly if you don't adhere to several tenets when building your experience.
6. Improving Performance
   Yahoo! has long pioneered the Web performance space. As such, users on the network expect quick responses to their every interaction. Dig in to techniques that can enhance both the actual and perceived performance of your App to ensure a quick-acting experience for your users.
7. Optimizing Your Application for the Gallery
   Both the Yahoo! homepage and My Yahoo! offer users a mechanism to find and add new Apps to their pages. To ensure your App stands out from the crowd, follow these simple steps to making your App discoverable.

Now with this guide in hand, we hope to minimize any confusion developers may have around how to quickly get their App out in front of Yahoo!'s hundreds of millions of users. Still have questions? Check out our Getting Started guide, App platform documentation, code examples, and user-to-user forums. (If you're just getting started, too, don't forget to take advantage of Joyent's free year of hosting for YAP development.)

We (and Yahoo!'s users) look forward to seeing your App on Yahoo! soon.

Micah Laaker
Director of User Experience, Yahoo! Open Strategy

Posted at 5:39 PM | Comments (2) | Permalink

November 24, 2009

Yahoo! Application Platform (YAP) search box code example

Putting a search box in your YAP app

Want to add a search box to your Yahoo application (YAP app)? Here’s some sample PHP code to help you get started. It consists of a single file that calls itself to perform a search and output the results. If the file is requested without a search_term parameter, it will output a form consisting of:

• yml:form tags defining a form that will make an asynchronous Get request when submitted. Because no param attribute is defined for the yml:form tag, it will call back to the application URL by default. The replace attribute specifies that output of the callback file will replace a DOM element in the app with the id matching the value of the attribute, which in this example is “results”.
• an input field and submit button

When the form submits back to this file with the search_term defined, the file outputs HTML for an unordered list containing the results of a search. This HTML is then placed on the page by the yml:form tag.

Prerequisites

• PHP 5.2
• A server that’s accessible to YAP, i.e., a server with a valid domain name and capable of receiving POST requests. For this example, I’ll assume the domain name is example.com.
• A YAP application. If you don’t have one already, you can create one using the YDN dashboard.

Usage

1. Put the code below into a file on your server. For this example, I’ll use the file name file.php.
2. In the YDN dashboard, set the Application URL to the location of the file you created in step 1, e.g., http://example.com/file.php.
3. Preview the app by clicking the Preview button in the dashboard.
4. In the app’s text field, enter a search term, e.g., “pizza”, and click the Search button.
5. View the search results when they appear below the text field.

Code

See the code on github

---

Erik Eldridge

Yahoo! Developer Network

Posted at 6:37 PM | Comments (4) | Permalink

November 23, 2009

Joyent launches free hosting for Yahoo! developers

Yahoo! is very excited to partner with Joyent to launch free hosting for Yahoo! application platform developers. Joyent is offering a Launch Accelerator for developers, optimized for the Yahoo! Application Platform, and it's free for one year!

The Yahoo-specific Joyent Launch Accelerator is a shared platform running on the Joyent Accelerator Cloud. This platform has been configured to be a fast, easy, and affordable way to develop and deploy your Yahoo! application. The program was designed to minimize the sys-admin skills needed to kick-start and manage your web application. There is no need to invest time in being a sys-admin for your hosted app. All you need to do is code your killer Yahoo application and deploy. Please note: the Joyent Launch Accelerator for Yahoo! does not give you root access. If you do need the added flexibility of root access please review the Joyent Public Cloud offering.

What You Get With Joyent Launch Accelerator

• One Joyent Launch per Yahoo account with a single SSH/SFTP login
• One MySQL and PostgreSQL login with up to 5 databases (in total) allowed, access to phpMyAdmin and phpPgAdmin tools
• 5 GB of total disk space
• 100 GB of monthly bandwidth
• 200 MB of total memory available, with a 100 MB per-process limit
• One web URL in the form of username.yahoo.joyent.us. Includes DNS provided by Joyent.
• 10 ports to run processes on
• Ability to create Cron jobs and define Bootup Actions (SMF services)
• Many command line utilities, editors, version control tools, etc.
• Yahoo! PHP + Python SDK Preinstalled

We look forward to seeing the successful applications that you create using this powerful new platform. To get started right away, sign up here for Joyent hosting.

Dustin Whittle
Open Developer Evangelist

Posted at 1:22 PM | Comments (1) | Permalink

September 29, 2009

Newest Features of the Yahoo! Application Platform

As the Yahoo! Application Platform (YAP) matures and is introduced into new drop zones throughout Yahoo!, many questions have come up about developer support and the best new features. There have been numerous suggestions from our community and we have looked into many of the questions and concerns raised by our users. To that end, we have implemented significant technology upgrades to make the lives of YAP developers much easier, and that is what I want to outline in this post. I want to highlight some of the best updates to the platform and additional tools that developers may find useful.

YML:Include Tag

We have heard from developers that you would like to allow the small view of a YAP application to be more dynamic, or build content each time the user views the application. This was a valid concern and is one that we have addressed with the yml:include tag. This tag will allow you to automatically make a server-side request for content once the application loads. In doing so, you can incorporate fresh data into the small view or set up a deferred content load on the large view to speed up the perceived application load time. A delay feature is also available within this tag. This will allow you to defer the loading of content by a certain number of seconds. Using this tag, you can create an application interface that refreshes automatically at timed intervals.

A full overview and code samples of this new feature can be found here: http://www.nakedtechnologist.com/?p=393.

New OpenSocial Support

The Yahoo! Application Platform has long supported the OpenSocial 0.8 JavaScript APIs. To add to this, we have recently also included full support of the OpenSocial 0.81 REST specification. The OpenSocial community has produced several high-quality client libraries that make interaction with our OpenSocial endpoints quick and easy.

Additional Social SDKs and Upgrades

The Yahoo! Social SDKs wrap our Social API endpoints and handle all the OAuth magic needed by the backend of an Open app, i.e., authenticating a user with the application platform, updating an app’s small view content, publishing updates in response to user activities, fetching the user’s social data, etc. These SDKs provide the easiest way to dive into backend development for your Open App.

You may be aware of our standard PHP, AS3 and Objective-C SDKs, but did you also know that we have a few new additions and new methods for providing them to the community? Our SDKs have all moved to a new home at http://www.github.com/yahoo and are listed under yos-social-LANGUAGE. These SDKs are all released under the BSD license, so feel free to use them in your projects. Adding to the repertoire of SDKs, there has been a release of a new Python SDK for developers to use.

For more experienced developers, an experimental iteration on the PHP SDK is also available on github. Some of the more noteworthy features of this version are simplified token management, which gives the developer more control over session handling, and use of YQL internally for data fetching (see getProfileLocation() and getGeoPlaces() in lib/Yahoo/YahooOAuthApplication.class.php). Although not required for Open app development, another feature of this SDK worth mentioning is its support of OpenID + OAuth “hybrid auth.” Please feel free to fork these projects and send us pull requests.

Jonathan LeBlanc (@jcleblanc)
Erik Eldrige (@erikeldridge)
Yahoo! Developer Network - Partner Integrations

Posted at 7:45 AM | Comments (6) | TrackBack | Permalink

June 14, 2009

What's Cookin' Food & Wine Pairing from Snooth & MyRecipes

Editor's note: This is a guest post from Philip James, CEO & Founder of Snooth, and Rich Tomko, General Manager, MyRecipes Network, collaborators in creating What's Cookin': Food & Wine Pairing, now available as an application on My Yahoo!. As part of the launch of new open applications for users of My Yahoo! and Yahoo! Mail, we asked all of the app developers to introduce themselves and talk about building their apps on Yahoo!'s open platforms.

Snooth, a leading wine site on the Web, has launched What's Cookin': Food & Wine Pairings, a new open app for My Yahoo!. Users are now able to peruse thousands of recipes from recipe hub MyRecipes.com and get automatically-generated wine pairings based on each individual dish. MyRecipes.com aggregates recipes from popular and widely read food and lifestyle publications, including Cooking Light, Real Simple, Southern Living, Sunset, Health, and Food & Wine. For example, for a Classic Beef Pot Roast, Snooth’s digital sommelier might recommend “Neudorf Pinot Noir 2004” because “this medium bodied red is bright and earthy, allowing it to partner perfectly with this meal.” The What's Cookin' app highlights the most popular recipes, pairings, and wines of the day, with links to purchase the corresponding bottles.

The What's Cookin' Food & Wine Pairing app is built on the Tyrant, an interface for the Tokyo Cabinet, which is a format for managing an ultra-fast and scalable database in real memory. The matching recipes/wines on the detail pages are served using Tyrant, so there aren't any on-the-fly calculations required.

The recipe search itself is provided via an index server. On our platform, we use Jetty, a Java-based servlet that provides an interface to Lucene, the index that underlies the rest of the Snooth site. Since there are several fields in each recipe, it's not a purely text-based search; we can search for specific categories or other parameters on the back-end, which is how the big food category buttons always get relevant results.

To make What's Cookin' more engaging, we have added a couple of interactive features: voting and bookmarks. Using the provided yahoo_guid, we store the user-specific information in our database, and call it directly, usually with a second AJAX call on the page, to fill in bookmark state information. The bookmarks page is simple page-based browsing, and we use the Yahoo! Updates API to insert events into the activity feed, whenever a user bookmarks an item or votes for a pairing.

Our app is very fast on it's own, for now, and could easily handle over 25K users per day (we are currently getting 120), but we are making some changes in the next few weeks that will make the app even more scalable. One is that all initial page loads will be served via our edge network, Akamai, which will improve performance and reduce our own server load, benefiting users outside of the U.S. Yahoo! does a great job with serving the image content on their own edge network, so this creates less work for us. The other change is to push more of the data into Tokyo Cabinet, which will drop the database load down considerably, although the app is not very database-intensive at all, as it stands.

If there is any bottleneck in an application like this, it will be with the Lucene search, which is why we will be using a combination of reverse proxy caching and akamai integration to drop the load for searches, which will follow a Pareto distribution, so most searches will fall into a small set of common searches, i.e. Main Course + Chicken. This makes it easier to serve the app to a greater number of Yahoo! users, which we are happy to do!

Together, MyRecipes and Snooth are taking the mystery out of food and wine pairing and making it easy for the My Yahoo! user to make great matches.

Philip James, CEO & Founder, Snooth
Rich Tomko, General Manager, MyRecipes Network

Posted at 6:10 PM | Comments (1) | Permalink

June 12, 2009

kaChing Stock Investing on My Yahoo!

Editor's note: This is a guest post from Dan Carroll, the founder of kaChing, now available as an application on My Yahoo!. As part of the launch of new open applications for users of My Yahoo! and Yahoo! Mail, we asked all of the app developers to introduce themselves and talk about building their apps on Yahoo!'s open platforms.

Now Yahoo! users can give their investing skills a huge boost using kaChing, a remarkably realistic web-based virtual trading environment. The new kaChing application on My Yahoo! provides users with a $10,000,000 virtual portfolio, so they can learn the ropes—or hone ideas and strategies—risk-free.

Built on the Yahoo! Application Platform (YAP), the app uses the Yahoo! Social Directory API, to enable users to connect directly with their Yahoo! contacts and friends to swap ideas or to see who can pull in the best returns. Another key feature of the app allows users to tap into the thoughts of top investors in the kaChing community of 370,000 members. kaChing ranks and spotlights the best performers, and users can choose to follow anyone, watching all their trades in real time.

kaChing provides a fun and social way for new and experienced investors to view their track record and see every detail of their portfolios and the portfolios of the investors they’re following. Users can see detailed information for any portfolio on kaChing, since the platform is designed to be completely open and transparent. Experienced investors will appreciate just how realistic the trading platform is, with real-time pricing, restrictions on trading volume, and other details that make it an almost perfect proving ground.

With groups devoted to every style of investing and every corner of the market, it’s easy to connect with investors who share your interests. And coming soon, investors who rise to the top will actually be able to earn a living on kaChing. There are plenty of investors on kaChing with impressive track records—and followers who want to duplicate their performance in the real world. Soon, followers will be able to set up a brokerage account to automatically mirror every kaChing trade their favorite investor makes. They’ll pay a small fee for this service, most of which will go to the investor they’re mirroring.

Dan Carroll
Founder, kaChing

Posted at 6:00 PM | Comments (2) | Permalink

June 9, 2009

Mokugift GreenLifestyle on My Yahoo!

Editor's note: This is a guest post from Hans Chung, one of the founders of Mokugift, now available as an application on My Yahoo!. As part of the launch of new open applications for users of My Yahoo! and Yahoo! Mail, we asked all of the app developers to introduce themselves and talk about building their apps on Yahoo!'s open platforms.

Mokugift gives everyone an easy way to plant a real tree in Central America, Africa, or Asia, in honor of a friend. For just one dollar a tree, the recipient gets an e-card or a virtual representation of their tree displayed on Facebook, Mokugift, and now on My Yahoo! as well. Mokugift tree plantings not only restock depleted forests with native trees, but also contribute to more diverse, productive and economically sustainable land-use systems. Mokugift’s mission is to make tree-planting convenient and to empower everyone to inspire their friends to live environmentally responsible lifestyles. Mokugift is an official partner of the United Nations Environment Programme (UNEP).

GreenLifestyle provides three thought-provoking questions daily in the form of a quiz. You earn points when you choose the correct answer and when you challenge friends to take the quiz. The top 1,000 point scorers get to plant a real tree for free.

Tree planting is a positive way to celebrate special occasions and to inspire others. As you plant more trees, GreenLifestyle shows you the total environmental benefit of those trees. In this way, GreenLifestyle empowers you to be part of the fight against climate change, and to inspire your friends to live environmentally responsible lifestyles.

Mokugift is committed to adding features to the GreenLifestyle app that help empower the My Yahoo! audience to live greener lifestyles. In conjunction with the launch of the app, Mokugift also recently launched the Mokugift Artists and Athletes program. We give fans the opportunity to plant trees with their favorite artists and athletes via mokugift.com. We are launching this with a few artists such as Pharoahe Monch, Tajai Massey, Mystic, Pepper and Nina B. Mokugift invites all artists to inspire everyone to fight climate change by getting on board with Mokugift.

Hans Chung
Mokugift

Posted at 10:10 AM | Comments (2) | Permalink

June 5, 2009

Mint.com: Personal Finance Management on My Yahoo!

Editor's note: This is a guest post from Lee Sherman, editor of the Mint.com blog. As part of the launch of new open applications for users of My Yahoo! and Yahoo! Mail, we asked all of the app developers to introduce themselves and talk about building their apps on Yahoo!'s open platforms.

One million users already have found Mint.com to be a better way for money management and now they can get Mint right on their personalized My Yahoo! page with Mint’s new Yahoo! app.

After getting the call from Yahoo!, the Mint team was able to develop the app in just six weeks, taking full advantage of the Yahoo! Application Platform (YAP) in order to bring the most important functionality of the Mint.com service to Yahoo! users.

Since the My Yahoo! homepage is the place where users go to catch up on the most important things in their lives, the Mint team was careful not to overwhelm them with all of the detailed information they can get on Mint.com. Instead, the Mint.com app provides an overview of the financial essentials – net cash, budget, categorized spending, Mint.com alerts, and investment performance that users need to get through their busy days.

Security and privacy were also paramount in developing Mint.com for Yahoo!. Mint.com is already secure -- user data is protected by the same bank-level data security used by major financial institutions, no one can move money on Mint, and Mint never collects any personal identifying information. But the Mint team took this one step further for the My Yahoo! app. Since many My Yahoo! users might use the app in public, Mint decided not to display actual account balances or specific transactions. Instead, easy-to-read charts are used in order to provide an overview of a user’s personal finances. For a deeper dive, users just need to click through to the Mint.com website.

The Mint team thinks that extending the Mint.com experience to YAP makes sense for a number of reasons. Many users already go to their My Yahoo! homepage to get the latest news about the economy, so now they can see how their personal economy is doing in the same place. And it is a logical extension of Mint’s approach to personal finance. Mint has continued to make finances more accessible, first by providing a secure connection from any web browser, next by providing mobile access in the form of 2-way SMS and email alerts and an iPhone app, and now by bringing a daily dose of Mint.com to a user’s My Yahoo! page.

Mint remains focused on providing the best user experience possible wherever users need to access their personal finances. Yahoo! users can expect support for additional financial institutions (if your bank isn’t supported now, it soon will be), enhanced budgeting tools, and even more ways to save in the coming months.

Lee Sherman
Editor of the Mint.com Blog

Posted at 7:50 AM | Comments (4) | Permalink

January 22, 2009

Whaddyathink? & the Yahoo! Application Platform

Several months ago, inspired by an idea from hacker/summer intern Mattt Thompson, we developed an app on MySpace called Whaddyathink?. Whaddyathink? enables users to create simple opinion polls for their friends, and although we think it's a good product, part of the motivation for building it was also to get our feet wet with OpenSocial and to build up a code base so we could get experience porting it to the Yahoo! Application Platform (YAP).

Last December, we started adapting the code for YAP, and last week, we released the app on YAP. Although the YAP development team is constantly rolling out features and fixes, there are a few aspects of the platform we think deserve special attention at this time:

Coding for the Small View
To ensure your app loads quickly in My Yahoo!, only a subset of YML, YML Lite, is available, and JavaScript and Flash are disallowed. To implement asynchronous behavior in the small view, we made extensive use of yml:a's "insert" and "replace" attributes.

Note: your app must be in the "live" state to see it in context on My Yahoo!. If it isn't, go to the dev dashboard and click the edit button for your app. In the top right corner of the editing screen, there is a button with the text "push live." Click this, and in a couple seconds, a small notification will pop up stating the push is complete. Click the live segment indicated by the notification to see the app's canvas as it will look to users who install the app. On the canvas, look in the yellow bar above the app for a link to install the app on your My Yahoo! page. Click the link and accept the installation on My Yahoo!. You will now see the small view as it appear to your users. By accepting the install, you are now, literally, a user. The content of the small view is the default content defined in the developer dashboard.

Default code for the small view
In the developer dashboard, clicking on the edit button for an app will open a perspective that includes an area for defining the default small view. The code that goes here is, as the name suggests, the default content for the small view. In other words, it's the content shown on My Yahoo! before new content is cached. The simplest way we found for pushing new content is to use the setSmallView method in the PHP SDK. A discussion on doing this can be found in the documentation. The "Preview Open Application Small View" tutorial covers a method of previewing the small view from the canvas view.

Refreshing the small view content from the small view
In the settings for My Yahoo!, there is an option for auto-refreshing the modules installed on the page. At this time, however, there is no way to auto-refresh app content. The most reliable method we found for ensuring fresh content requires clicking a button so that new dynamic content is displayed. By doing this, we are able to incorporate a call for the most up-to-date data into the content request.

Large and Small views
OpenSocial defines canvas, home, and profile views, yet the YAP platform references "Full" and "Small" views, so what gives? For the purpose of discussion, "Full View" and canvas are interchangeable, as are "Small View" and home. However, there are a couple technical details to be aware of:

• the "YahooFullView" keyword in a url represents the url defined in the app dashboard.


• if the url defined in the developer dashboard ends with a file name, this file will be loaded by default. For example, if the url is "domain/path/file.php" then browsing to "apps.yahoo.com/-yourAppId/YahooFullView/" will load "file.php" Browsing to "apps.yahoo.com/-yourAppId/YahooFullView/anotherfile.php" will load "domain/path/anotherfile.php." This same logic holds true in the params attribute of the yml:a, yml:form, and yml:message tags.


• Setting the view to "YahooSmallView" in either yml:a, yml:form, or yml:message and defining either "insert" or "replace" will load the content of the small or home view into the element with the designated id. If you want to actually navigate to the home view, use a regular a tag and set the href to: http://my.yahoo.com.

Caja enforces the W3C standards for JavaScript, HTML, and CSS, regardless of browser (!).
Yes, you read correctly, if your code cajoles, it will run in Firefox and IE. This is amazing and its value cannot be overestimated.

Keep your client-side code base simple.
Caja is a great resource, but it does rewrite your code to be more secure. If your code is complicated to begin with, debugging the Caja-processed cajoled code will be difficult. Please check out the Caja page of the YAP docs for help debugging Caja's error messages

Start using YML quickly to reduce your code base
If you're resistant to learning another language, be aware that a similar markup language is incorporated in OpenSocial 0.9 as OSML, so you've got nothing to lose. In the YAP version of our app, we use YML extensively as an easy way to put friends' pics and names on a page and link to their profile. Also, because JavaScript and Flash are disallowed in the small view, yml:a is the only way to achieve asynchronous behavior.

Navigation using yml:a
Hallelujah for the ability to navigate between files on your server using traditional, synchronous interactions: the yml:a tag allows you to do this whether your app is in preview or live mode. For our app on MySpace, we used asynchronous calls to swap out content. You can do this in YAP as well using yml:a's "insert" and "replace" attributes or io.makeRequest, but it's much simpler to just link between your files. Note that Caja's client-side component strips YML from io.makeRequest responses, and CSS blocks and JavaScript from yml:a responses. For more information, please refer to Jon's forum post.

Adding event listeners
Use addEventListener instead of the onclick assignment shorthand. It's a bit wordier, but in Caja, it works in IE and Firefox, which is great! Additionally, the event object is consistently passed as an argument to the event handler regardless of browser. For example, instead of this:

<a href="#">before</a>
<script>
var a = document.getElementsByTagName('a')[0],
    handler = function(e){
        var target = e.target || window.event.srcElement;
        target.firstChild.data = 'after';//set link text to 'after'
    };
a.onclick = handler;
</script>

You would use:

<a href="#">before</a>
<script>
var a = document.getElementsByTagName('a')[0],
    handler = function(e){
        e.target.firstChild.data = 'after';//set link text to 'after'
    };
a.addEventListener('click', handler, false);
</script>

POST data is sent to browser with all synchronous requests
OpenSocial 0.8 now defines a way to sign requests made back to your server so you can get some basic data about the owner and viewer from the request variables, but, as referenced above, YAP does this automatically for you. This eliminates the need to request user data when the app is initializing. For our app on MySpace, we chained everything to an initial request for owner and viewer data, which seemed like cumbersome architecture at the time and we are glad to be rid of it.

Caja restricts access to insecure aspects of JavaScript
One example of a restricted element is the this object. A reasonable use case for this is in an event handler to access the element that's clicked. Because this is inaccessible, try to use the target property of the event object passed to the handler, as in this example:

handler(e){
    var href = e.target.href
}

Instead of:

handler(){
    var href = this.href

}

Another restricted element is document.location. MySpace developers accustomed to retrieving the user and viewer ids from the url, should use the POST data sent with the request for the app instead. Note also that Caja eliminates the need to silo untrusted JavaScript within an iframe. This improves performance, but it alters the relationship between the app and the page on which it resides. As mentioned above, data that is typically passed to the app through the iframe URL is accessible in YAP as POST data in the content request.

CSS hacks are stripped
What! No CSS hacks, filters, or coding? But the layout will look très horrible in (browser name here). Not to worry. Use the yml:if-env tag instead. For example, instead of this:

* a{color:red}

Use:

<yml:if-env ua="ie">
    a{color:red}
</yml:if-env>

Again, it's wordier, but it's self-descriptive and works in all grade-A browsers.

YAP doesn't use an XML file to define an app
Yes, the platform supports the OpenSocial 0.8 JavaScript API, but in your app definition, instead of referencing an XML spec file, you simply state the base url for the canvas view of your app. When the user loads the app, content is requested from that url. This app architecture is very similar to the way the view @href attribute of the "Content" block defined in OpenSocial 0.9 will work.

Closing remarks
By the time you read this, new features may be implemented and bugs fixed. Please refer to the YAP documentation in general for the most up-to-date information about the platform. For quick reference on the top ten or so issues observed in the latest version of the platform, please read the FAQ section of the docs.

Erik Eldridge, Jon LeBlanc, & Dan Theurer
Yahoo! Developer Network

Posted at 9:30 AM | Comments (1) | Permalink

October 28, 2008

Introducing Y!OS 1.0 - live today!

Earlier this month, we introduced a revamped universal profile to all Yahoo! users – but that was just the tip of the iceberg. With the new profile page, you got a peek at our open vision, but today’s Yahoo! Open Strategy (Y!OS) 1.0 platform launch gives you something to get your hands on. Today we’re making Y!OS a reality for developers through the release of the Yahoo! Application Platform (YAP) , Yahoo! Social Platform (YSP) and Yahoo! Query Language (YQL). Now, anyone on the web has access to Yahoo!’s tools and data to start building applications for Yahoo!’s vast audience and the web beyond.

Yahoo! Social Platform
The Yahoo! Social Platform (YSP) consists of a suite of REST-based social APIs from Yahoo! including: Profiles, Connections, Updates, Contacts and Status. These services will make it possible for you to write social applications either on Yahoo! using the Application Platform or on your own website. We are releasing a PHP SDK an a Flash SDK to help you access these web services. Because we make use of standard OAuth and REST (both XML and JSON), standard libraries can also be used.

Yahoo! Query Language (YQL)
YQL is a new web service API that lets you access other web services using a SQL-like language rather than typical programmatic access. You can think of it as a command line version of Pipes. Its goal is to make data from Yahoo! as well as from across the internet universally accessible through a single common interface.

Yahoo! Application Platform (YAP)
YAP will soon become the mechanism for distributing your application to millions of users on Yahoo!’s homepages, media sites, and mail properties, some of the most trafficked sites on the Internet. The initial release supports a few programming models including:
- Developer hosted execution of applications with access to Yahoo's Social APIs and YQL;
- Support for OpenSocial's JavaScript API; and
- Support for server-side YML tags.

Today we are launching the platform itself; for now, we hope you’ll start building apps to view in the canvas view. We will keep you updated on the rollout schedule for embedding third-party applications within the pages of Yahoo!'s properties. In the meantime we’d love to hear from you and see what you’re building.

Yahoo! values user security and privacy. We've put several mechanisms in place to keep YAP secure, so that people are always in control of the data they put into the system:
- All HTML, CSS & JS code will be run through Caja . Check the release notes for what capabilities are supported;
- Users have the option of not sharing their data with their connections applications;
- Spam protection is in place around messaging, invites, and updates.

OAuth
YAP, YSP, and YQL are all accessed using the open standard OAuth to authenticate both the developer and the 3rd-party (user) on whose behalf the developer is accessing the data. This ensures that our users are always in control over who can access their data.

What’s next?

In 2008, it’s been all about building the base platform. For the rest of the year and into 2009, we’ll focus on integrating the platform into rest of Yahoo!. As we rewire Yahoo! in this way, you’ll see two major things start to happen:

1. Users will begin to experience what we call a “social dimension” across Yahoo!.

We’ll activate our network horizontally across Yahoo!. Yahoo! Mail and Yahoo! Messenger will encourage users to connect with the people that they care the most about. For example, Mail will incentivize connections by enabling users to filter their inboxes to see emails just from social connections. And Mail, Messenger, the front page of Yahoo!, and My Yahoo! will allow people to see things their connections have been doing across Yahoo! and the web. Finally, Yahoo!’s media properties (Sports, Music) will contribute to social relevancy by encouraging users to share experiences with each other.

2. We’ll continue to open Yahoo! to developers and publishers like never before.

By opening up, we create experiences that give people choice about the content they consume. We’re committed to giving our users what they want, where and with whom they want it. We’ll continue opening the UI of places like My Yahoo!, the Yahoo! homepage (www.yahoo.com), and Mail to 3rd party applications via YAP, so our users gain access to the best and liveliest of the web. And our Social Platform APIs give developers across the web the tools and data services to create rich experiences for this newly active social user base. You’ll be able to publish activity stream information via Updates and reach users across the Front Page, Messenger and Yahoo! Mail.

This launch also marks Yahoo!’s first implementation of OpenSocial support. As a founding member of the OpenSocial Foundation, Yahoo! is committed to supporting the complete OpenSocial specification and is working with the community to expand the spec to include OSML and OpenSocial templates. In addition, we are currently implementing a Shindig-based OpenSocial container which will allow us to provide full support for the OpenSocial REST Protocols and thus for Portable Contacts. To learn more about YAP and OpenSocial, please visit the OpenSocial blog.

Developers everywhere benefit from the fact that Yahoo!'s audience is worldwide. Our platform is fully internationalized from the start for use in 31 countries. And we’re growing. Come along and go global with Yahoo!.

We hope that you’ll check out the documentation and start creating apps today.

Sam Pullara
Vice President, Yahoo! Application Platform

Posted at 12:15 PM | Comments (4) | Permalink