Your SlideShare is downloading. ×
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
MashUp Mania: How Reebok Created the Ultimate Mashup and You Can Too
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,918

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 …

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 GoRunEasy.com 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
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

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

×