MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too


Published on

Though not as simple as mashing potatoes, online mash-ups do offer marketers tasty results by creating unique and engaging customer experiences. These experiences may be exciting for the user, but can be challenging for the technologist behind the scenes.

In this presentation, Web 2.0 and emerging technologies expert Riccardo La Rosa shares his experiences in leading the development of Reebok’s uber mash-up of Google Maps, Flickr, and iTunes. He presents the technical challenges of making complex mash-ups function smoothly for a seamless user-experience. Riccardo also delves into the many lessons-learned along the path to Reebok’s successful global online community. He’ll show you how AJAX was used to create this ultimate mash-up and provide tips how to utilize AJAX effectively to create yours.

Published in: Business, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too

  1. 1. Riccardo La Rosa
  2. 2. Agenda <ul><li>Building mash-ups </li></ul><ul><ul><li>GoogleMaps, Flickr, iTunes and JumpCut </li></ul></ul><ul><li>Ajax + Flash + Frameworks </li></ul><ul><li>Island hopping navigation </li></ul><ul><li>Internationalize it all </li></ul><ul><li>Mobile integration </li></ul><ul><li>OpenID: why use it? </li></ul><ul><li>Keep it social </li></ul><ul><li>Digital and non digital campaigns </li></ul>
  3. 3.
  4. 4. Mash-up, Mash-up, Mash-up
  5. 5. Is this a Web2.0 site? ratings ugc: comment tagging Discussion forum ugc: run ugc: note ugc: photo
  6. 6. Technology used <ul><li>ASP.NET </li></ul><ul><li>prototype + </li></ul><ul><li>Yahoo! Browser History Manager </li></ul><ul><li>Lightbox </li></ul><ul><li>Firebug + Firefox = rock on! </li></ul><ul><li>Flash for iTunes playlists and JumpCut video editing </li></ul>
  7. 7. <ul><li>Mash-ups </li></ul>
  8. 8. Google Maps Mash-up
  9. 9. Google Maps <ul><li>map = new GMap2 (document.getElementById(&quot;map&quot;)); </li></ul><ul><li>Other Important APIs: </li></ul><ul><li>GClientGeocoder : not always accurate. We also used Yahoo! Geocoder when Google failed </li></ul><ul><li>GEvent .addListener (map,&quot;moveend&quot;,drawVisibleRoutes); </li></ul><ul><li>var xml = GXml .parse(transport.responseText); </li></ul><ul><li>Note: APIs will change and you won’t know </li></ul>
  10. 10. Google Maps
  11. 11. Flickr Mash-up
  12. 12. Flickr Mash-up <ul><li>searchOptions .Extras |= PhotoSearchExtras.Geo; </li></ul><ul><li>Photos photos = flickr. PhotosSearch (searchOptions); </li></ul><ul><li>Take the time to understand Flickr User Authentication and Authorization </li></ul><ul><ul><li>Authorize users to see their pictures in our apps </li></ul></ul><ul><ul><li>Store the token in the cookie </li></ul></ul><ul><li>Commercial vs non Commercial license considerations </li></ul><ul><li>Used Flickr.NET wrapper (or any other wrapper): it’s open source! </li></ul>
  13. 13. Flickr Mash-up
  14. 14. Flickr Mash-up
  15. 15. iTunes Mash-up
  16. 16. iTunes Mash-up <ul><li>The least open of all systems </li></ul><ul><li>Hack into the xml that is passed to the Flash movie to get some information </li></ul><ul><li>iTunes doesn’t it make it easy, </li></ul><ul><li>Public playlists are not loved by users </li></ul>
  17. 17. iTunes Mash-up
  18. 18. JumpCut Mash-up
  19. 19. JumpCut Mash-up <ul><li>Doesn’t provide public API </li></ul><ul><li>Product was still in Beta when we launched </li></ul><ul><li>Did not want to replace YouTube for users </li></ul><ul><li>Allow users to mix video: create their own Run Easy campaign </li></ul>
  20. 20. Mash-up resource
  21. 21. <ul><li>Navigation </li></ul>
  22. 22. Island Hopping Navigation
  23. 23. Island Hopping Navigation tile-inner 4500 x 2100
  24. 24. Island Hopping Navigation <ul><li>< div id=&quot;homeframe&quot; class=&quot;iframes offisland&quot; style=&quot; left: 1450px; top: 59px ; position: relative;&quot;>…</div> </li></ul><ul><li>< iframe id=&quot;mapframe&quot; class=&quot;iframes&quot; style=&quot; left: 141px; top: 1080px ;&quot; allowtransparency=&quot;true&quot; src=&quot;blank.html&quot;></iframe> </li></ul><ul><li>< iframe id=&quot;sayframe&quot; class=&quot;iframes&quot; style=&quot; left: 3036px; top: 1080px; &quot; allowtransparency=&quot;true&quot; src=&quot;blank.html&quot;></iframe> </li></ul><ul><li>< iframe id=&quot;gearframe&quot; class=&quot;iframes&quot; style=&quot; left: 1471px; top: 1080px; &quot; allowtransparency=&quot;true&quot; src=&quot;blank.html&quot;></iframe> </li></ul><ul><li>< iframe id=&quot;watchframe&quot; class=&quot;iframes&quot; style=&quot; left: 141px; top: 59px; &quot; allowtransparency=&quot;true&quot; src=&quot;blank.html&quot;></iframe> </li></ul><ul><li>< iframe id=&quot;hearframe&quot; class=&quot;iframes&quot; style=&quot; left: 3036px; top: 59px; &quot; allowtransparency=&quot;true&quot; src=&quot;blank.html&quot;></iframe> </li></ul>
  25. 25. Island Hopping Navigation <ul><li>islands.each( function(el){ // look through the island </li></ul><ul><li>if (el.files.indexOf(parsed.fileName.toLowerCase()) != -1){ // if we find a filename that matches our hash </li></ul><ul><li>moveTo(, el.dropper, url); // move the view to that // island </li></ul><ul><li>} </li></ul><ul><li>}); </li></ul>new Effect. Scroll (container, x:(element_x-container_x), y:(element_y-container_y)}); this.element.scrollLeft = this.options.x * position + this.originalLeft;
  26. 26. <ul><li>Internationalization </li></ul>
  27. 27. Internationalize it all! <ul><li>15 Languages </li></ul><ul><li>Typical i18n problems: </li></ul><ul><ul><li>Images </li></ul></ul><ul><ul><li>Text </li></ul></ul><ul><li>ASP.NET to the rescue </li></ul>
  28. 28. Global Resources <ul><li>Anything that is global to the application that you want to access as a constant from your code: </li></ul><ul><li>Resources.Resource.distanceUnit it’s either kilometers or miles </li></ul>
  29. 29. Local Resources <ul><li>Anything that is specific to a page (e.g.: text) </li></ul><asp:Label ID=&quot;lbWhereRunEasy&quot; runat=&quot;server&quot; Text=&quot;Where do you want to Run Easy?&quot; meta:resourcekey=&quot;lbWhereRunEasyResource1 &quot; /> <ul><li>Page.aspx (you) </li></ul><data name=&quot;lbWhereRunEasyResource1.Text&quot; xml:space=&quot;preserve&quot;> <value>Where do you want to Run Easy?</value> </data> <ul><li>Page.aspx.resx (automatic) </li></ul><data name=&quot;lbWhereRunEasyResource1.Text&quot; xml:space=&quot;preserve&quot;> <value>Dove vuoi correre Run Easy?</value> </data> <ul><li> (your translation company) </li></ul>
  30. 30. <ul><li>Mobile </li></ul>
  31. 31. Mobile integration
  32. 32. Mobile integration <ul><li>Technology is easy </li></ul><ul><ul><li>SMS = XML </li></ul></ul><ul><li>Wireless providers are hard </li></ul><ul><ul><li>Different agreements and costs for each </li></ul></ul><ul><ul><li>Can’t insert links in SMS </li></ul></ul><ul><li>Note: Not every mobile user has a data plan </li></ul>
  33. 33. <ul><li>OpenID </li></ul>
  34. 34. OpenID
  35. 35. OpenID <ul><li>Why create another username/password? </li></ul><ul><li>OpenID is not perfect </li></ul><ul><ul><li>But it’s a good starting point </li></ul></ul><ul><li>Before Google OpenSocial came out this was one of the few option </li></ul><ul><li>Code is open source: contribute! </li></ul><ul><ul><li> </li></ul></ul>
  36. 36. <ul><li>Discussion Forum </li></ul>
  37. 37. Keeping it social
  38. 38. Keeping it social
  39. 39. <ul><li>Campaigns </li></ul>
  40. 40. Digital campaigns: other social networks
  41. 41. Integrate with other social networks
  42. 42. Non digital campaigns
  43. 43. Thank you! <ul><li>[email_address] </li></ul><ul><li> </li></ul>