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

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar1

Riccardo La Rosa


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


Goruneasy.com


Mash-up, Mash-up, Mash-up


Is this a Web2.0 site?

ratings

ugc: comment

tagging Discussion forum

ugc: run

ugc: note

ugc: photo


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


Mash-ups


Google Maps Mash-up


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


Google Maps


Flickr Mash-up


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!


Flickr Mash-up


iTunes Mash-up


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


iTunes Mash-up


JumpCut Mash-up


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


Mash-up resource


Navigation


Island Hopping Navigation


Island Hopping Navigationtile-inner 4500 x 2100



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;


Internationalization


Internationalize it all!

• 15 Languages

• Typical i18n problems:– Images– Text

• ASP.NET to the rescue


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


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)


Mobile


Mobile integration


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


OpenID


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/


Discussion Forum


Keeping it social


Campaigns


Digital campaigns: other social networks


Integrate with other social networks


Non digital campaigns


Thank you!

[email protected]

http://www.molecular.com/webbuilder20

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

Business

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