Your SlideShare is downloading. ×
  • Like
  • Save
Javascript, APIs and Mashups
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Javascript, APIs and Mashups

  • 11,946 views
Published

Adding JavaScript to your portfolio used to mean more work. Thanks to the wide range of APIs springing up from the likes of Google (Mail, Maps, Ads, Calendar, Search, etc.), Yahoo! (Flickr, Maps, …

Adding JavaScript to your portfolio used to mean more work. Thanks to the wide range of APIs springing up from the likes of Google (Mail, Maps, Ads, Calendar, Search, etc.), Yahoo! (Flickr, Maps, Search, etc.) and Microsoft (Virtual Earth), JavaScript can actually save you a lot of work these days. JavaScript veterans Cameron Adams (The Man In Blue) and Kevin Yank (SitePoint) will take a whirlwind (and somewhat irreverant) tour of the "free stuff" you get from JavaScript today, and the creative things people are doing with it.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Interesting. A lot to be learned. I’m Ana Mui Stanley, working on my latest site on lyrics, www.lyrics-search.org/ . I enjoy reading the slide.
    Are you sure you want to
    Your message goes here
  • I have discovered interesting information in your presentation. Well done!

    http://www.riding-mower.org/

    http://www.riding-mower.org/husqvarna-lawn-tractor-22-hp-46in-deck-model-yth2246/
    Are you sure you want to
    Your message goes here
  • Excellent job. You make it fun to read.

    John.
    www.freeringtones.ws/
    Are you sure you want to
    Your message goes here
  • The usage of imagery in this presentation is really effective. You've done a fantastic job here friend.

    Janie
    http://financejedi.com
    http://healthjedi.com
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
11,946
On SlideShare
0
From Embeds
0
Number of Embeds
10

Actions

Shares
Downloads
0
Comments
4
Likes
31

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. work you don’t have to do JAVASCRIPT APIS & MASHUPS Kevin Yank www.sitepoint.com Cameron Adams www.themaninblue.com
  • 2.  
  • 3.  
  • 4.  
  • 5. APIS VS MASHUPS
    • both are very closely linked
    • to understand a mashup you first have to understand APIs
  • 6. WHAT’S AN API?
    • work you don’t have to do
  • 7.  
  • 8. APIS
    • A pplication P rogramming I nterface
      • an abstracted interface to 3 rd party programming
      • access someone else’s code without having to worry about the details
      • a general principle in software development
      • http://java.sun.com/j2ee/1.4/docs/api/
  • 9. WEB APIS
    • Far sexier than their desktop cousins
    • Operate on the same principles
    • But why do we need them?
  • 10.  
  • 11.  
  • 12. WHAT YOUR WEBSITE LOOKS LIKE TO A PROGRAMMER
  • 13. WHAT YOUR WEB 2.0 WEB SITE LOOKS LIKE TO A PROGRAMMER
  • 14. APIS LET PROGRAMMERS GET DATA OUT OF A WEBSITE
  • 15. Your website is an island
  • 16. Now it’s part of a true network
  • 17. WHAT DOES A WEB API LOOK LIKE?
    • usually accessed via HTTP
      • you don’t need any special technology to access a Web API, just your browser or a server HTTP connection
    • a call to a script on someone else’s server
    • http://www.flickr.com/services/api/
  • 18.  
  • 19. WEB API EXAMPLES
    • work you don’t have to do
  • 20. MAPPING APIS
    • Google Maps
      • best Australian images
      • good Australian maps
      • free for free sites
  • 21. MAPPING APIS
    • Google Maps
      • best Australian images
      • good Australian maps
      • free for free sites
    • Virtual Earth
      • good Australian images
      • good Australian maps
      • restrictive licensing
  • 22. MAPPING APIS
    • Google Maps
      • best Australian images
      • good Australian maps
      • free for free sites
    • Virtual Earth
      • good Australian images
      • good Australian maps
      • restrictive licensing
    • Yahoo! Maps
      • good Australian images
      • Flash or JavaScript
      • static image
  • 23. MAPPING APIS
    • Google Maps
      • best Australian images
      • good Australian maps
      • free for free sites
    • Virtual Earth
      • good Australian images
      • good Australian maps
      • restrictive licensing
    • Yahoo! Maps
      • good Australian images
      • Flash or JavaScript
      • static image
      • limited Australian maps
  • 24. MAPPING DEMO
  • 25. SEARCH APIS
    • Google
    • Yahoo!
    • MSN
    • providers
    • services
    • web search
    • web cache
    • spelling
    • content analysis
    • incoming links
  • 26. AMAZON
    • product information
      • prices
      • images
      • customer reviews
      • affiliate sales
  • 27. MANY, MANY MORE
    • advertising
    • blogging
    • bookmarks
    • events
    • messaging
    • music
    • news
    • photos
    • video
    • weather
  • 28. MASHUPS
    • work you don’t have to do
  • 29.
    • novel UI or application
    • enhance data
    • combine multiple data sources
    MASHUPS API API local data
  • 30. MASHUP EXAMPLES
    • work you don’t have to do
  • 31. MAAAAAAAAAAAPS!
    • Chicagocrime http://www.chicagocrime.org/
    • Overplot http://persistent.info/overplot/
    • Banned Books http://www.applefritter.com/bannedbooks/
    • Transit Map http://www.brail.org/transit/nycgoogle.html
    • World of Warcraft http://mapwow.com/
  • 32.  
  • 33.  
  • 34.  
  • 35.  
  • 36.  
  • 37. IT’S NOT ALL MAPS
    • TagTV http://www.onflex.org/TagTV/
    • Viral Video http://www.viralvideochart.com/
    • Blueorganizer http://www.adaptiveblue.com/
    • Salesforce AdWords http://www.salesforce.com/google/
  • 38.  
  • 39.  
  • 40.  
  • 41.  
  • 42. BLOWING MY OWN HORN
    • FlickrSVG
    • Familiar Faces
    • Web Connections
  • 43.  
  • 44. HOW DO I USE AN API?
    • work you don’t have to do
  • 45. TYPES OF APIS
    • 2 general types:
      • Interfaces (maps)
      • Data (everything else)
  • 46. MAKING A MAP
    • <script type=&quot;text/javascript&quot; src=&quot;http://maps.google.com/maps?file=api&amp;v=2&amp;key=XXXX&quot;></script>
  • 47. MAKING A MAP
    • mapObject = new GMap2(document.getElementById(&quot;mapArea&quot;));
    • mapObject.setCenter(new GLatLng(-27.059126, 132.791016), 3);
    • var userPoint = new GLatLng(-37.851543, 145.011978);
    • var mapMarker = new GMarker(userPoint);
    • mapObject.addOverlay(mapMarker);
  • 48. MAKING A MAP
  • 49. XML
    • using REST architecture, simply make an HTTP request to a resource on the server
      • curl()
      • wget()
    • returns XML
    • you do whatever you want with it!
  • 50.  
  • 51. XML + JavaScript
    • AJAX: Use XMLHttpRequest()
  • 52. X ML + JavaScript
    • AJA X : Use X MLHttpRequest()
  • 53. LIMITATIONS & CHALLENGES
    • work you don’t have to do
  • 54. LIMITATIONS OF APIS
    • restricted to what the provider makes available
      • screen scraping
    • query size/quantity
    • privacy concerns with automation
  • 55. API LOCK-IN
    • APIs change
      • license no longer appropriate
      • terms of use change
      • can you keep up?
  • 56. API LOCK-IN
    • APIs change
      • license no longer appropriate
      • terms of use change
      • can you keep up?
    • API standards
    • meta-APIs
      • Mapstraction
  • 57. CROSS-DOMAIN AJAX
    • same domain policy
    • can load
      • images
      • CSS
      • JavaScript
    • but not HTML/XML
      • browsers designed to protect “content”
    A
  • 58. WORKAROUNDS
    • server proxy
      • slow if not cached
      • bottleneck
    server
  • 59. WORKAROUNDS
    • server proxy
      • slow if not cached
      • bottleneck
    • JSON-P
      • no POST
      • fails silently
      • security risk
    { name1: value1, name2: value2, … } <script>
  • 60. WORKAROUNDS
    • server proxy
      • slow if not cached
      • bottleneck
    • JSON-P
      • no POST
      • fails silently
      • security risk
    callback( { name1: value1, name2: value2, … } ); ?f=callback <script>
  • 61. WORKAROUNDS
    • server proxy
      • slow if not cached
      • bottleneck
    • JSON-P
      • no POST
      • fails silently
      • security risk
    • Flash
      • it’s Flash
    Flash crossdomain.xml
  • 62. THE FUTURE
    • ContextAgnosticXmlHttpRequest
    • no HTTP authentication
    • no cookies
    • and/or
    • cross-domain policy file (like Flash)
    • and/or
    • HTTP header: X-Allow-Foreign-Hosts
    • limited cross-domain XMLHttpRequest
    • enhanced JSON
    • JSONRequest
    • like XHR, but execute JavaScript response
    • allows POST requests
    • provides status/error info
    • and/or
    • HTTP header: X-Allow-Foreign-Hosts
  • 63. DO SOMETHING!
    • open your data
      • trust
      • let others do the work
    • offer an API
      • microformats
      • XML
      • JSON-P
    • get involved
      • W3C Web API WG
  • 64. QUESTIONS?
    • work you don’t have to do
    Kevin Yank www.sitepoint.com Cameron Adams www.themaninblue.com