The document discusses Yahoo Application Platform (YAP) which allows developers to build web applications that are distributed by Yahoo. It provides instructions on converting a basic web application into a YAP application, including removing blacklisted tags, making CSS and JavaScript inline, and ensuring it passes the Caja sanitization process. Examples are given of a Flickr photo application and a YouTube video application built as YAP apps. Caveats of the YAP platform are also outlined.

1. Yahoo Application Platform (YAP) Ravikiran J Developer Twitter: @ravikiranj

2. Agenda Pre-requisites Web Application YAP Web App to YAP App Rich Demo YAP Caveats Important Links

3. Pre-requisites HTML (structured content) Little bit of CSS (beautify) Little bit of Javascript (dynamic/interaction) Little bit of PHP/Python (logic) Web Services / API’s (data source) Looks like I need to know 101 things! Doh !

4. Web Application A Web Application is an application that is accessed over a network such as the Internet or an intranet. Browser-controlled environment (e.g. a Java applet) or Coded in a browser-supported language (HTML + CSS + Javascript).

5. Web Application Flow Request Server (Logic) [PHP + Libs] Web Service / API /Database Response GET/POST Raw data Resp data CSS HTML Javascript

6. Let’s start simplifying Let us build a simple WebApp step by step. What is YAP ? Why do I need YAP ? What is YAPify ? Caution: Design First, Code Last.

7. Simple App - Flickr Recent Photos Display a grid view of recent flickr photos. Should be able to view a single photo in zoom view. http://hackyourworld.org/~ravikirn/flickr_yap_demo/

8. Flickr Recent Photos Flow Request Server (Logic) [PHP + Libs] Response GET/POST Raw data Resp data CSS HTML Javascript YQL (flickr.photos.recent)

9. Flickr Recent Photos - Raw SELECT * FROM flickr.photos.recent LIMIT 10; http://tinyurl.com/69dyy77 http://hackyourworld.org/~ravikirn/flickr_yap_demo/flickr_raw.php

10. Flickr Recent Photos - HTML Convert Raw XML into images. <ul> ... <li><a><img /></a></li> … </ul> http://hackyourworld.org/~ravikirn/flickr_yap_demo/flickr_html.php

11. Flickr Recent Photos HTML + CSS Remove the ugly list-style and show the images in a grid format. http://hackyourworld.org/~ravikirn/flickr_yap_demo/flickr_html_css.php

12. Flickr Recent Photos HTML + CSS + JS Add interactions / click-handler via javascript to enable zoom-view. http://hackyourworld.org/~ravikirn/flickr_yap_demo/flickr_html_css_js.php

13. Flickr Recent Photos HTML + CSS + JS

14. Yahoo! Application Platform YAP is the software and services that enable developers to build Web applications that are available throughout Yahoo!. Developer provides great apps, Yahoo! will shower it with traffic and users. Sounds like a win/win, doesn’t it ? That’s our goal.

15. YAP - Advantages Never need to worry about user traffic Instant deployment and distribution Build applications using your favorite software stack, environment and servers. OpenSocial and Social Distribution

16. YAP – Create a new project

17. YAP – Create a new project

18. YAP – Download default xml

19. Update your config ModulePrefs (title, desc, category) Icon & some more icons Short description Small view Full view It’s a little annoying to fix xml errors, so ensure its proper the first time itself

20. Create a Small View Create a preview version of your app called as “smallview” Very important to give a launcher to the full view. ( http://tinyurl.com/4vp9tuc ) Don’t try to mimic fullview but give a teaser.

21. Convert your Web App to YAP app ( Fix the Full View ) Remove black listed tags Make your CSS inline Make your Javascript inline / **AJAX ** Ensure it passes through Caja (pronounced “KAhah”) Web App YAP app Caja + Rules

22. YAP – Upload new config

23. Flickr Recent Photos – Small view

24. Flickr Recent Photo – Full view

25. Live Preview / Additional Purchase Push your app live so that you can directly view it in production on a Yahoo! page. Full View of the apps are available in Y! Games, Y! pulse, Y! Messenger. My Yahoo! will also launch inline full view in a couple of months.

26. Some more good stuff YML (Yahoo! Markup Language) ( http://tinyurl.com/4u5cj42 ) Social Directory API ( http://tinyurl.com/4w94qje ) OpenSocial (Common API’s for web-based social network applications) ( http://tinyurl.com/45exubc ) Updates API ( http://tinyurl.com/d8nj5e )

27. Rich demo of a decent app YouTube Videos App http://pulse.yahoo.com/y/apps/yZj8ez5i/?yap_intl= in&yap_js =IN

28. Rich demo - Screenshot

29. Rich demo - Screenshot

30. YAP Caveats All of your files need to be on a public server. Not all HTML / Javascript will run due to Cajoling ( http://textsnip.com/6f7fb2/jscript ) YUI Support in YAP ( http://developer.yahoo.com/yap/guide/yui-support.html )

31. YAP Caja/JS Caveat Include YUI 2.8.0 – makes things lot easier Any javascript you write, sandbox it under a namespace. Use YUICompressor to minify code. http://hackyourworld.org/~ravikirn/caveats/js_in_yap.php

32. Important Links http:// developer.yahoo.com / http:// developer.yahoo.com/everything.html http:// developer.yahoo.com/yap/guide/index.html http:// developer.yahoo.com /documentation http://code.google.com/p/google-caja / http:// code.google.com/apis/opensocial /