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

Slide 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 2 Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar

Slide 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 6 Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar

Slide 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 9 Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar

Slide 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! 12 Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar

Slide 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 16 Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar

Slide 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 19 Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar

Slide 24: 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> 24 Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar

Slide 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; 25 Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar

Slide 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 28 Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar

Slide 29: Local Resources Anything that is specific to a page (e.g.: text) • Page.aspx (you) <asp:Label ID="lbWhereRunEasy" runat="server" Text="Where do you want to Run Easy?" meta:resourcekey="lbWhereRunEasyResource1" /> • Page.aspx.resx (automatic) <data name="lbWhereRunEasyResource1.Text" xml:space="preserve"> <value>Where do you want to Run Easy?</value> </data> • Page.aspx.resx.it-IT (your translation company) <data name="lbWhereRunEasyResource1.Text" xml:space="preserve"> <value>Dove vuoi correre Run Easy?</value> </data> 29 Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar

Slide 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 32 Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar

Slide 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/ 35 Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar

Slideshare.net (beta)