mashup mania: how reebok created the ultimate mashup and you can too
DESCRIPTION
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.TRANSCRIPT
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar1
Riccardo La Rosa
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar2
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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar3
Goruneasy.com
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar4
Mash-up, Mash-up, Mash-up
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar5
Is this a Web2.0 site?
ratings
ugc: comment
tagging Discussion forum
ugc: run
ugc: note
ugc: photo
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar6
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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar7
Mash-ups
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar8
Google Maps Mash-up
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar9
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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar10
Google Maps
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar11
Flickr Mash-up
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar12
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!
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar13
Flickr Mash-up
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar14
Flickr Mash-up
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar15
iTunes Mash-up
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar16
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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar17
iTunes Mash-up
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar18
JumpCut Mash-up
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar19
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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar20
Mash-up resource
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar21
Navigation
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar22
Island Hopping Navigation
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar23
Island Hopping Navigationtile-inner 4500 x 2100
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar24
Island Hopping Navigation
<div id="homeframe" class="iframes offisland" style="left: 1450px; top: 59px; position: relative;">…</div>
<iframe id="mapframe" class="iframes" style="left: 141px; top: 1080px;" allowtransparency="true" src="blank.html"></iframe>
<iframe id="sayframe" class="iframes" style="left: 3036px; top: 1080px;" allowtransparency="true" src="blank.html"></iframe>
<iframe id="gearframe" class="iframes" style="left: 1471px; top: 1080px;" allowtransparency="true" src="blank.html"></iframe>
<iframe id="watchframe" class="iframes" style="left: 141px; top: 59px;" allowtransparency="true" src="blank.html"></iframe>
<iframe id="hearframe" class="iframes" style="left: 3036px; top: 59px;" allowtransparency="true" src="blank.html"></iframe>
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar25
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;
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar26
Internationalization
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar27
Internationalize it all!
• 15 Languages
• Typical i18n problems:– Images– Text
• ASP.NET to the rescue
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar28
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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar29
Local Resources
Anything that is specific to a page (e.g.: text)
<asp:Label ID="lbWhereRunEasy" runat="server"
Text="Where do you want to Run Easy?" meta:resourcekey="lbWhereRunEasyResource1" />
• Page.aspx (you)
<data name="lbWhereRunEasyResource1.Text" xml:space="preserve">
<value>Where do you want to Run Easy?</value>
</data>
• Page.aspx.resx (automatic)
<data name="lbWhereRunEasyResource1.Text" xml:space="preserve">
<value>Dove vuoi correre Run Easy?</value>
</data>
• Page.aspx.resx.it-IT (your translation company)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar30
Mobile
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar31
Mobile integration
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar32
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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar33
OpenID
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar34
OpenID
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar35
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/
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar36
Discussion Forum
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar37
Keeping it social
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar38
Keeping it social
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar39
Campaigns
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar40
Digital campaigns: other social networks
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar41
Integrate with other social networks
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar42
Non digital campaigns
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar43
Thank you!
http://www.molecular.com/webbuilder20