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

Like this? Share it with your network

Share

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

  • 4,159 views
Uploaded 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......

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.

More in: Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,159
On Slideshare
4,153
From Embeds
6
Number of Embeds
1

Actions

Shares
Downloads
83
Comments
0
Likes
4

Embeds 6

http://www.slideshare.net 6

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