SlideShare a Scribd company logo
1 of 49
Download to read offline
Building Yahoo Apps




Sophie Davies‐Patrick and Chris;an Heilmann, YDN developer 
evening, Paris, October 2009                                  h"p://www.flickr.com/photos/mknowles/47457221/
Building Yahoo! Front Page Apps
                     October, 2009




           - -
Summary


 • The Yahoo! Front Page (www.yahoo.com) is the single most-
   visited website in the world


 • In a few weeks, for the first time, Yahoo! will allow third
   party applications (apps) to run on the Front Page


 • Yahoo! has created a technology platform that will allow
   anyone to build a Front Page app




                                - -
Why Build Apps on the Yahoo! Front Page?


  • Over 330 million unique visitors worldwide visit a Yahoo! home
    page each month

  • Application gallery allows direct install of 3rd party developer
    apps

  • Apps built for Front Page will also run on My Yahoo! (over 40
    million unique visitors per month worldwide) and Yahoo! Toolbar
    (near future)

  • International rollout of apps to international My Yahoo! Properties
    throughout 2009-2010

  • Opportunity to acquire new users / customers




                                   - -
Yahoo! France Homepage


  • With over 190M pageviews per month generated by
    6.5millions users, it’s one of the most trafficked pages in
    France

  • This one page alone reaches almost 20% of the online
    French population…

  • …and the average user visits the page over 15 times per
    month, making these amongst the most loyal users in
    France




                                 - -
Important Technology Components




            Yahoo! Social Platform                    Yahoo! Application Platform


   Provides developers with access to:         Allows developers to build rich, interactive
        • User profile                         applications that users can choose to
        • Contacts/friends                     install on a Yahoo! website
        • Presence/status
        • Activity updates



                                         - -
How it Works (1)

     Anyone Can Build an App

     Any developer can build a Front Page app
     and distribute that app through traditional
     awareness mechanisms (email, ads, etc.).
     In addition, “Add to Yahoo!” buttons will be
     provided and app installs are reflected in
     Yahoo! Updates.                                         Examples:
                                                             Target and
                                                             Mint.com




     The Yahoo! Front Page Gallery

     Initially, users will be able to discover a
     limited set of high-quality apps in the gallery
     which have been approved. In the future,
     app developers will submit apps into a
     more comprehensive gallery through a
     streamlined approval process.




                                                       - -
How it Works (2)




                                                       Yahoo! ad
                                                         space




             The Standard View

             When a user places his or her mouse over an
             app, it displays in a standard view with
             Yahoo! ads running next to it.



                                 - -
How it Works (3)




             The Expanded View

             Users can expand the view of an app to
             access greater functionality.




                                 - -
Monetization Now

  •   Monetization opportunities available now:

        •   Advertising

        •   Transactions

        •   Subscriptions



  •   Additional notes:

        •   Approved third party ad-network tags available (currently US-only)

        •   Other opportunities (developer self-serve promotion, advertiser/publisher solutions,
            etc.) to follow




                                                         - -
Building Good Front Page Apps

  •   Gallery requirements:

      •   Good standard (400px) and expanded (750px) views

      •   Quick and reliable

      •   Dynamic content providing a different experience everyday

      •   Intuitive to use

      •   Well-designed and readable

      •   Appeals to users regardless of their level of Internet expertise


  •   Design guidelines:

      •   Communicate key actions/state quickly

      •   Enable users to make meaningful interactions in under 2 seconds and one click

      •   Quick set-up

      •   Give users a successful experience right out of the box

      •   Hide unnecessary complexity: help users focus on a single goal at one time

      •   Less is more: use the fewest interaction patterns as possible

      •   Performance matters: stay fast

      •   Flexible inputs & no inputs: infer data whenever possible (user settings/profile)

      •   One task at a time - focus user attention
                                                        - -
Developer Components (1)




     Yahoo! Application Platform (YAP)              Yahoo! Markup Language (YML)

    • Easily build apps that run on Front Page • Allows secured access to private data
      and My Yahoo!
                                               • Can use ‘me’ and ‘viewer’ keywords
    • Apps will run on Yahoo! Toolbar and
      other Yahoo! websites soon               • Will begin integrating into OSML

    • http://developer.yahoo.com/yap/             • http://developer.yahoo.com/yap/yml




                                            - -
Developer Components (2)




                  Social APIs                      Yahoo! Query Language (YQL)

    • Social Directory (read)                    • SQL-like syntax

    • Contacts (read)                            • Private/public data

    • User Status (read/write)                   • Queries external data feeds

    • Updates (read/write)                       • Allows custom tables

    • http://developer.yahoo.com/social/         • http://developer.yahoo.com/yql



                                           - -
Developer Components (3)




         Cajoled JavaScript (Caja)                          Available SDKs

    • HTML/CSS/JavaScript securer                   • Several SDKs available today (PHP,
                                                      Flash and Objective-C)
    • Enforces standards
                                                    • More to come
    • Includes JSLint

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




                                              - -
Next Steps


  •   Review application ideas/approaches with the Yahoo!
      team


  •   Read the online documentation at http://
      developer.yahoo.com/yap/metro




                              - -
...and now for a deep
   dive...
YAP is the plaHorm
hIp://developer.yahoo.com/yap/guide/yap‐overview.html
hIps://developer.apps.yahoo.com/dashboard
hIp://github.com/codepo8/TweetTrans
hIp://isithackday.com/yosdemo/nonyos/tweeIrans.php?search=chien&tl=en
hIp://code.google.com/apis/ajaxlanguage/documenta;on/#Translate
hIp://developer.yahoo.com/yql/console/?q=show%20tables&env=store://
                   datatables.org/alltableswithkeys
hIp://code.google.com/p/google‐caja/
Caja and HTML
★ name aIributes with gadgets.io.makeRequest
★ Custom aIributes
★ Custom tags
★ Unclosed tags
★ <embed>
★ <iframe>
★ <link rel=‘…
★ javascript:void(0) 
★ Radio buIons in IE
★ Rela;ve url’s
Caja and JavaScript
★ eval()
★ new Func;on()
★ Strings as event handlers (node.onclick = '...';)
★ Names ending with double / triple underscores
★ with func;on (with (obj) { ... })
★ Implicit global variables (specify var variable)
★ Calling a method as a func;on
★ document.write 
★ window.event
★ .onclick
★ OpenSocial gadgets.io.makeRequest return JS
Caja and CSS
★ * hacks
★ _ hacks
★ IE condi;onals
★ Insert‐aler clear fix
★ expression()
★ @import
★ Background images in IE
Working with Caja
★ Use OpenSocial JavaScript standards
★ Use W3C standards
★ Use YML wherever possible
★ Unit test all JavaScript
★ Read the documenta;on 
  (hIp://developer.yahoo.com/yos)
★ Par;cipate in the forums 
  (hIp://developer.yahoo.net/forum/)
hIp://developer.yahoo.com/yap/guide/caja‐ready‐code‐exs.html
Alterna;vely: YML




  hIp://developer.yahoo.com/yap/guide/yapdev‐yml.html
YML Tags (Large View)   YML Lite Tags (Small View)
yml:a                   yml:a
yml:ad                  yml:audio
yml:audio               yml:form
yml:form                yml:if‐env
yml:friend‐selector     yml:name
yml:if‐env              yml:profile‐pic
yml:message             yml:pronoun
yml:name                yml:user‐badge
yml:profile‐pic
yml:pronoun
yml:share
yml:swf
yml:user‐badge  
hIp://yahoo.com/add?yapid=zKMBH94k
Moving from web to 
Yahoo Applica;on:
★ No <head> or <body> ‐ DIV level
★ clean HTML and CSS to avoid errors
★ Caja safe JavaScript or Ajax via YML
★ keep it small and load on demand.
hIp://github.com/yahoo/yos‐social‐php
MERCI!
  Chris;an Heilmann
  hIp://wait‐;ll‐i.com 
  hIp://developer‐evangelism.com
  hIp://twiIer.com/codepo8   

More Related Content

More from Christian Heilmann

The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
Christian Heilmann
 

More from Christian Heilmann (20)

Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynote
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays Finland
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer
 
Taking the P out of PWA
Taking the P out of PWATaking the P out of PWA
Taking the P out of PWA
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReach
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humans
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
 
Breaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconfBreaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconf
 
Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017
 

Recently uploaded

SPLICE Working Group: Reusable Code Examples
SPLICE Working Group:Reusable Code ExamplesSPLICE Working Group:Reusable Code Examples
SPLICE Working Group: Reusable Code Examples
Peter Brusilovsky
 
Contoh Aksi Nyata Refleksi Diri ( NUR ).pdf
Contoh Aksi Nyata Refleksi Diri ( NUR ).pdfContoh Aksi Nyata Refleksi Diri ( NUR ).pdf
Contoh Aksi Nyata Refleksi Diri ( NUR ).pdf
cupulin
 
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes GuàrdiaPersonalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
EADTU
 
Spellings Wk 4 and Wk 5 for Grade 4 at CAPS
Spellings Wk 4 and Wk 5 for Grade 4 at CAPSSpellings Wk 4 and Wk 5 for Grade 4 at CAPS
Spellings Wk 4 and Wk 5 for Grade 4 at CAPS
AnaAcapella
 
SURVEY I created for uni project research
SURVEY I created for uni project researchSURVEY I created for uni project research
SURVEY I created for uni project research
CaitlinCummins3
 

Recently uploaded (20)

Details on CBSE Compartment Exam.pptx1111
Details on CBSE Compartment Exam.pptx1111Details on CBSE Compartment Exam.pptx1111
Details on CBSE Compartment Exam.pptx1111
 
How to Manage Website in Odoo 17 Studio App.pptx
How to Manage Website in Odoo 17 Studio App.pptxHow to Manage Website in Odoo 17 Studio App.pptx
How to Manage Website in Odoo 17 Studio App.pptx
 
SPLICE Working Group: Reusable Code Examples
SPLICE Working Group:Reusable Code ExamplesSPLICE Working Group:Reusable Code Examples
SPLICE Working Group: Reusable Code Examples
 
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
 
Contoh Aksi Nyata Refleksi Diri ( NUR ).pdf
Contoh Aksi Nyata Refleksi Diri ( NUR ).pdfContoh Aksi Nyata Refleksi Diri ( NUR ).pdf
Contoh Aksi Nyata Refleksi Diri ( NUR ).pdf
 
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes GuàrdiaPersonalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
 
Spellings Wk 4 and Wk 5 for Grade 4 at CAPS
Spellings Wk 4 and Wk 5 for Grade 4 at CAPSSpellings Wk 4 and Wk 5 for Grade 4 at CAPS
Spellings Wk 4 and Wk 5 for Grade 4 at CAPS
 
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
 
e-Sealing at EADTU by Kamakshi Rajagopal
e-Sealing at EADTU by Kamakshi Rajagopale-Sealing at EADTU by Kamakshi Rajagopal
e-Sealing at EADTU by Kamakshi Rajagopal
 
PSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptxPSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptx
 
Model Attribute _rec_name in the Odoo 17
Model Attribute _rec_name in the Odoo 17Model Attribute _rec_name in the Odoo 17
Model Attribute _rec_name in the Odoo 17
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
 
OSCM Unit 2_Operations Processes & Systems
OSCM Unit 2_Operations Processes & SystemsOSCM Unit 2_Operations Processes & Systems
OSCM Unit 2_Operations Processes & Systems
 
SURVEY I created for uni project research
SURVEY I created for uni project researchSURVEY I created for uni project research
SURVEY I created for uni project research
 
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjj
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjjStl Algorithms in C++ jjjjjjjjjjjjjjjjjj
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjj
 
ESSENTIAL of (CS/IT/IS) class 07 (Networks)
ESSENTIAL of (CS/IT/IS) class 07 (Networks)ESSENTIAL of (CS/IT/IS) class 07 (Networks)
ESSENTIAL of (CS/IT/IS) class 07 (Networks)
 
UChicago CMSC 23320 - The Best Commit Messages of 2024
UChicago CMSC 23320 - The Best Commit Messages of 2024UChicago CMSC 23320 - The Best Commit Messages of 2024
UChicago CMSC 23320 - The Best Commit Messages of 2024
 
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community PartnershipsSpring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
 
Rich Dad Poor Dad ( PDFDrive.com )--.pdf
Rich Dad Poor Dad ( PDFDrive.com )--.pdfRich Dad Poor Dad ( PDFDrive.com )--.pdf
Rich Dad Poor Dad ( PDFDrive.com )--.pdf
 
8 Tips for Effective Working Capital Management
8 Tips for Effective Working Capital Management8 Tips for Effective Working Capital Management
8 Tips for Effective Working Capital Management
 

Introduction to Yahoo Apps